@microsoft/mgt
Version:
The Microsoft Graph Toolkit
476 lines (448 loc) • 17.3 kB
text/typescript
// THIS FILE IS AUTO GENERATED
// ANY CHANGES WILL BE LOST DURING BUILD
// MODIFY THE .SCSS FILE INSTEAD
import { css } from 'lit-element';
/**
* exports lit-element css
* @export styles
*/
export const styles = [
css`
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
:host([hidden]) {
display: none; }
:host {
display: block;
--default-font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI",
-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
--theme-primary-color: #0078d7;
--theme-dark-color: #005a9e; }
.ms-Icon {
display: inline-block;
font-family: "FabricMDL2Icons";
font-style: normal;
font-weight: normal;
font-size: 16px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
margin: 4px 0; }
.ms-Icon--ChevronDown::before {
content: "\\\E70D"; }
.ms-Icon--ChevronUp::before {
content: "\\\E70E"; }
.ms-Icon--Contact::before {
content: "\\\E77B"; }
.ms-Icon--AddFriend::before {
content: "\\\E8FA"; }
.ms-Icon--OutlookLogoInverse::before {
content: "\\\EB6D"; }
/*
Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
*/
mgt-tasks,
:host {
font-family: var(--default-font-family, "Segoe UI");
display: flex;
flex-direction: column; }
mgt-tasks .TaskIcon,
:host .TaskIcon {
font-family: 'FabricMDL2Icons';
text-align: center;
justify-self: center;
align-content: center;
align-self: center;
vertical-align: middle;
user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
mgt-tasks .Header,
:host .Header {
padding: var(--tasks-header-padding, 0px 10px 0 10px);
margin: var(--tasks-header-margin, 0 0 10px 0); }
mgt-tasks .TaskIcon.Divider,
:host .TaskIcon.Divider {
vertical-align: initial;
margin: 0 12px;
font-size: 16px; }
mgt-tasks .Header .PlannerTitle,
:host .Header .PlannerTitle {
padding: var(--tasks-title-padding, 0px 0px 0px 0px);
display: flex;
align-items: center;
align-content: center; }
mgt-tasks select,
:host select {
font-family: var(--default-font-family, "Segoe UI");
border: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer; }
mgt-tasks select::-ms-expand,
:host select::-ms-expand {
display: none; }
mgt-tasks .PlannerTitle select,
:host .PlannerTitle select,
mgt-tasks .Header .PlannerTitle .PlanTitle,
:host .Header .PlannerTitle .PlanTitle {
font-family: var(--default-font-family, "Segoe UI");
font-size: var(--tasks-plan-title-font-size, 1.1em);
padding: var(--tasks-plan-title-padding, 5px); }
mgt-tasks .Header .AddBar,
:host .Header .AddBar {
display: flex; }
mgt-tasks .Header .AddBar .AddBarItem,
:host .Header .AddBar .AddBarItem {
flex: 1 1 auto; }
mgt-tasks .Header .NewTaskDue,
:host .Header .NewTaskDue {
display: flex; }
mgt-tasks .Header .NewTaskDue input,
:host .Header .NewTaskDue input {
flex: 1 1 auto; }
mgt-tasks .Header .TitleCont,
:host .Header .TitleCont {
flex: 1 1 auto;
height: var(--tasks-new-button-height, 34px); }
mgt-tasks .Header .NewTaskButton,
:host .Header .NewTaskButton {
flex: 0 0 auto;
display: inline-block;
width: var(--task-new-button-width, 90px);
height: var(--tasks-new-button-height, 32px);
max-width: 90px;
min-width: 90px;
line-height: 200%;
text-align: center;
align-content: center;
align-self: center;
vertical-align: middle;
justify-self: flex-end;
background: var(--tasks-new-button-background, #0078d4);
border: var(--tasks-new-button-border, solid 1px rgba(0, 0, 0, 0));
color: var(--tasks-new-button-color, #ffffff);
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer; }
mgt-tasks .Header .NewTaskButton:hover,
:host .Header .NewTaskButton:hover {
background: var(--tasks-new-button-hover-background, #0091ff); }
mgt-tasks .Header .NewTaskButton:active,
:host .Header .NewTaskButton:active {
background: var(--tasks-new-button-active-background, #00508d); }
mgt-tasks .Task,
:host .Task {
margin: var(--task-margin, 0 10px 10px 10px);
padding: var(--task-padding, 0 0 0 0);
box-shadow: var(--task-box-shadow, 0px 2px 8px rgba(0, 0, 0, 0.092));
background: var(--task-background, #ffffff);
position: relative; }
mgt-tasks .Task .TaskContent,
:host .Task .TaskContent {
display: flex;
flex-direction: row; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer,
:host .Task .TaskContent .TaskDetailsContainer {
color: var(--task-detail-color, #767676);
margin: 20px 0 18px 0;
display: flex;
flex-direction: column;
flex: 1 1 auto; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskTitle,
:host .Task .TaskContent .TaskDetailsContainer .TaskTitle {
flex: 1 0 auto;
color: #333333;
max-width: 370px;
width: 100%;
font-size: 20px;
font-weight: 300; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails {
display: flex;
margin: 10px 0 0 0;
font-size: 12px;
font-weight: 400;
align-items: center;
flex-wrap: wrap; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails svg,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails svg {
vertical-align: middle;
margin-right: 4px; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails span,
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails select,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails span,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails select {
vertical-align: middle; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails .TaskDetail,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails .TaskDetail {
margin: 0 20px 0 0; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails .TaskIcon,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails .TaskIcon {
color: #333333;
margin: var(--task-detail-icon-margin 0 8px 0 0); }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails mgt-people,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails mgt-people {
color: var(--task-detail-color, black);
font-size: 16px; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails mgt-person,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails mgt-person {
display: inline-block; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails .Picker,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails .Picker {
background-color: white;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
width: 350px;
color: var(--task-detail-color, black);
margin: 8px; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails .Picker mgt-people-picker,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails .Picker mgt-people-picker {
--separator-margin: 0px 10px 0px 10px; }
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails input,
mgt-tasks .Task .TaskContent .TaskDetailsContainer .TaskDetails select,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails input,
:host .Task .TaskContent .TaskDetailsContainer .TaskDetails select {
color: var(--task-detail-color, #767676);
font-size: 0.9em; }
mgt-tasks .Task .TaskHeader,
:host .Task .TaskHeader {
display: flex;
justify-content: center;
color: var(--task-header-color, #333333);
margin: var(--task-header-margin, 0 0 0 10px); }
mgt-tasks .Task.ReadOnly .TaskCheckContainer,
:host .Task.ReadOnly .TaskCheckContainer {
cursor: default; }
mgt-tasks .Task.Complete,
:host .Task.Complete {
background: var(--task-complete-background, #f6f6f6);
border-color: var(--task-complete-border, #e2e2e2); }
mgt-tasks .Task.Complete .TaskHeader,
:host .Task.Complete .TaskHeader {
color: var(--task-complete-header-color, #959595); }
mgt-tasks .Task.Complete .TaskDetails,
:host .Task.Complete .TaskDetails {
color: var(--task-complete-detail-color #b0b0b0); }
mgt-tasks .Task.Complete .TaskDetails .TaskIcon,
:host .Task.Complete .TaskDetails .TaskIcon {
color: var(--task-compete-detail-icon-color, #959595); }
mgt-tasks .Task.NewTask,
:host .Task.NewTask {
margin: var(--task-new-margin, var(--task-margin, 0 10px 10px 10px));
display: flex;
flex-direction: row; }
mgt-tasks .Task.NewTask .SelfAssign,
:host .Task.NewTask .SelfAssign {
display: none; }
mgt-tasks .Task.NewTask .AssignTo,
:host .Task.NewTask .AssignTo {
border: 0;
background: none; }
mgt-tasks .Task.NewTask .FakeCheckBox,
:host .Task.NewTask .FakeCheckBox {
width: 15px;
height: 15px;
cursor: pointer;
margin: 0 5px 0 5px; }
mgt-tasks .Task.NewTask .FakeCheckBox::after,
:host .Task.NewTask .FakeCheckBox::after {
font-family: 'FabricMDL2Icons';
content: '\uE739'; }
mgt-tasks .Task.NewTask .FakeCheckBox ~ :checked,
:host .Task.NewTask .FakeCheckBox ~ :checked {
font-family: 'FabricMDL2Icons';
content: '\uE73A'; }
mgt-tasks .Task.NewTask .TaskContent,
:host .Task.NewTask .TaskContent {
flex: 1 1 auto;
align-content: center;
vertical-align: middle;
margin: 0 0 0 12px; }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer,
:host .Task.NewTask .TaskContent .TaskDetailsContainer {
margin: 0; }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer .TaskTitle,
:host .Task.NewTask .TaskContent .TaskDetailsContainer .TaskTitle {
max-width: none; }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer .TaskTitle input,
:host .Task.NewTask .TaskContent .TaskDetailsContainer .TaskTitle input {
flex: 1 0 auto;
font-family: var(--default-font-family, "Segoe UI");
margin: var(--task-new-input-margin, 16px 0 0 0);
padding: var(--task-new-input-padding, 7px);
font-size: var(--task-new-input-font-size, 1em);
border: var(--task-new-border, none);
width: 100%; }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer .TaskTitle input:active,
:host .Task.NewTask .TaskContent .TaskDetailsContainer .TaskTitle input:active {
border: var(--task-new-input-active-border, none); }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer hr,
:host .Task.NewTask .TaskContent .TaskDetailsContainer hr {
border: var(--task-new-line-border, solid 1px #d8d8d8);
margin: 0; }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails,
:host .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails {
flex: 1 0 auto;
margin: 14px 0 14px 4px; }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails .TaskPeople label,
:host .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails .TaskPeople label {
display: flex;
align-content: center;
align-items: center; }
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails select,
mgt-tasks .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails input,
:host .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails select,
:host .Task.NewTask .TaskContent .TaskDetailsContainer .TaskDetails input {
font-family: var(--default-font-family, "Segoe UI");
border: var(--task-new-select-border, none);
padding: 0 10px; }
mgt-tasks .Task.NewTask .TaskAddButtonContainer,
:host .Task.NewTask .TaskAddButtonContainer {
flex: 0 0 auto;
display: flex;
align-content: center;
align-items: center; }
mgt-tasks .Task.NewTask .TaskAddButtonContainer .TaskAdd,
mgt-tasks .Task.NewTask .TaskAddButtonContainer .TaskCancel,
:host .Task.NewTask .TaskAddButtonContainer .TaskAdd,
:host .Task.NewTask .TaskAddButtonContainer .TaskCancel {
height: 100%;
max-width: 50px;
min-width: 50px;
flex: 1 1 auto;
justify-content: center;
align-items: center;
display: flex;
cursor: pointer;
color: white; }
mgt-tasks .Task.NewTask .TaskAddButtonContainer .TaskAdd,
:host .Task.NewTask .TaskAddButtonContainer .TaskAdd {
background: var(--task-new-add-button-background, #0078d4); }
mgt-tasks .Task.NewTask .TaskAddButtonContainer .TaskCancel,
:host .Task.NewTask .TaskAddButtonContainer .TaskCancel {
font-family: var(--default-font-family, "Segoe UI");
color: var(--task-new-cancel-button-color, gray);
margin: 0px 20px 0px 32px; }
mgt-tasks .Task.NewTask .TaskAddButtonContainer.Disabled .TaskAdd,
:host .Task.NewTask .TaskAddButtonContainer.Disabled .TaskAdd {
background: var(--task-new-add-button-disabled-background, #eaeaea);
cursor: default; }
mgt-tasks .Task .TaskCheckContainer,
:host .Task .TaskCheckContainer {
font-family: 'FabricMDL2Icons';
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
border-radius: 50%;
flex: 0 0 auto;
color: white;
cursor: pointer;
display: flex;
align-items: center;
align-content: center;
justify-items: center;
justify-content: center;
margin: 20px 10px 20px 20px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
mgt-tasks .Task .TaskCheckContainer.Complete .TaskCheck,
:host .Task .TaskCheckContainer.Complete .TaskCheck {
background: #00b294;
border-color: #00b294;
display: flex;
align-items: center;
align-content: center;
justify-items: center;
justify-content: center; }
mgt-tasks .Task .TaskCheck,
:host .Task .TaskCheck {
font-family: 'FabricMDL2Icons';
display: inline-block;
width: 22px;
height: 22px;
text-align: center;
border-radius: 50%;
border: solid 1px #666666;
flex: 0 0 auto;
color: white;
display: flex;
align-items: center;
align-content: center;
justify-items: center;
justify-content: center;
user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
mgt-tasks .Task .TaskCheck.Loading,
:host .Task .TaskCheck.Loading {
color: black;
animation: rotateIcon 2s infinite linear; }
mgt-tasks .Task.LoadingTask .TaskCheckContainer,
:host .Task.LoadingTask .TaskCheckContainer {
cursor: default; }
mgt-tasks .Task.LoadingTask .TaskCheck,
:host .Task.LoadingTask .TaskCheck {
background: #f2f2f2;
border-color: #f2f2f2;
cursor: default; }
mgt-tasks .Task.LoadingTask .TaskHeader,
:host .Task.LoadingTask .TaskHeader {
justify-content: flex-start;
justify-items: flex-start; }
mgt-tasks .Task.LoadingTask .TaskDetailIcon,
:host .Task.LoadingTask .TaskDetailIcon {
width: 16px;
height: 16px;
margin: 5px;
background: #f2f2f2; }
mgt-tasks .Task.LoadingTask .TaskTitle,
:host .Task.LoadingTask .TaskTitle {
background: #f2f2f2;
height: 20px; }
mgt-tasks .Task.LoadingTask .TaskDetail,
:host .Task.LoadingTask .TaskDetail {
margin-right: 8px;
display: flex;
flex-direction: row;
align-items: center; }
mgt-tasks .Task.LoadingTask .TaskDetailName,
:host .Task.LoadingTask .TaskDetailName {
width: 81px;
height: 10px;
background: #f2f2f2; }
mgt-tasks .Task .TaskOptions,
:host .Task .TaskOptions {
cursor: pointer;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: absolute;
top: 0;
right: 0; }
mgt-tasks .LoadingHeader,
:host .LoadingHeader {
max-width: 90px;
width: 100%;
height: 20px;
background: #f2f2f2; }
@keyframes rotateIcon {
from {
transform: rotate(0deg); }
to {
transform: rotate(360deg); } }
`];