From 3b0720a7a2a481a862d93b78afe3eebb3183d74d Mon Sep 17 00:00:00 2001 From: Thomas O'Connor Date: Wed, 20 Apr 2016 11:58:25 -0700 Subject: [PATCH] Check in compiled bits for 2.4.1 --- .gitignore | 1 - dist/components/Breadcrumb/Breadcrumb.css | 429 + dist/components/Breadcrumb/Breadcrumb.html | 37 + dist/components/Breadcrumb/Breadcrumb.json | 10 + dist/components/Breadcrumb/Breadcrumb.min.css | 2 + dist/components/Breadcrumb/Breadcrumb.scss | 170 + dist/components/Button/Button.Command.html | 7 + dist/components/Button/Button.Compound.html | 7 + dist/components/Button/Button.Hero.html | 7 + dist/components/Button/Button.Primary.html | 7 + dist/components/Button/Button.css | 315 + dist/components/Button/Button.html | 7 + dist/components/Button/Button.json | 93 + dist/components/Button/Button.min.css | 2 + dist/components/Button/Button.scss | 327 + .../Callout/Callout.ActionText.html | 24 + dist/components/Callout/Callout.Close.html | 20 + dist/components/Callout/Callout.Oobe.html | 24 + dist/components/Callout/Callout.Peek.html | 17 + dist/components/Callout/Callout.css | 677 ++ dist/components/Callout/Callout.html | 17 + dist/components/Callout/Callout.json | 140 + dist/components/Callout/Callout.min.css | 2 + dist/components/Callout/Callout.scss | 315 + .../ChoiceField.Checkbox.Disabled.html | 6 + .../ChoiceField.Checkbox.Selected.html | 6 + .../ChoiceField/ChoiceField.Checkbox.html | 6 + .../ChoiceField.ChoiceFieldGroup.html | 23 + .../ChoiceField/ChoiceField.Disabled.html | 6 + .../ChoiceField/ChoiceField.Selected.html | 6 + dist/components/ChoiceField/ChoiceField.css | 242 + dist/components/ChoiceField/ChoiceField.html | 6 + dist/components/ChoiceField/ChoiceField.json | 96 + .../ChoiceField/ChoiceField.min.css | 2 + dist/components/ChoiceField/ChoiceField.scss | 198 + dist/components/CommandBar/CommandBar.css | 664 ++ dist/components/CommandBar/CommandBar.html | 86 + dist/components/CommandBar/CommandBar.json | 32 + dist/components/CommandBar/CommandBar.min.css | 2 + dist/components/CommandBar/CommandBar.scss | 396 + .../ContextualMenu.Dividers.html | 23 + .../ContextualMenu.Multiselect.html | 15 + .../ContextualMenu.SubMenu.html | 20 + .../ContextualMenu/ContextualMenu.css | 267 + .../ContextualMenu/ContextualMenu.html | 9 + .../ContextualMenu/ContextualMenu.json | 32 + .../ContextualMenu/ContextualMenu.min.css | 2 + .../ContextualMenu/ContextualMenu.scss | 226 + dist/components/DatePicker/DatePicker.css | 831 ++ dist/components/DatePicker/DatePicker.html | 45 + dist/components/DatePicker/DatePicker.json | 18 + dist/components/DatePicker/DatePicker.min.css | 2 + dist/components/DatePicker/DatePicker.scss | 532 ++ dist/components/Dialog/Dialog.Blocking.html | 34 + dist/components/Dialog/Dialog.Close.html | 42 + dist/components/Dialog/Dialog.LgHeader.html | 34 + dist/components/Dialog/Dialog.Multiline.html | 38 + dist/components/Dialog/Dialog.css | 693 ++ dist/components/Dialog/Dialog.html | 42 + dist/components/Dialog/Dialog.json | 67 + dist/components/Dialog/Dialog.min.css | 2 + dist/components/Dialog/Dialog.scss | 211 + .../Dropdown/Dropdown.Disabled.html | 13 + dist/components/Dropdown/Dropdown.css | 329 + dist/components/Dropdown/Dropdown.html | 13 + dist/components/Dropdown/Dropdown.json | 27 + dist/components/Dropdown/Dropdown.min.css | 2 + dist/components/Dropdown/Dropdown.scss | 245 + dist/components/Facepile/Facepile.css | 2208 ++++++ dist/components/Facepile/Facepile.html | 241 + dist/components/Facepile/Facepile.json | 15 + dist/components/Facepile/Facepile.min.css | 2 + dist/components/Facepile/Facepile.scss | 110 + dist/components/Label/Label.Disabled.html | 3 + dist/components/Label/Label.Required.html | 3 + dist/components/Label/Label.css | 59 + dist/components/Label/Label.html | 5 + dist/components/Label/Label.json | 27 + dist/components/Label/Label.min.css | 2 + dist/components/Label/Label.scss | 48 + dist/components/Link/Link.css | 35 + dist/components/Link/Link.html | 6 + dist/components/Link/Link.json | 13 + dist/components/Link/Link.min.css | 2 + dist/components/Link/Link.scss | 34 + dist/components/List/List.Grid.html | 106 + dist/components/List/List.css | 268 + dist/components/List/List.html | 108 + dist/components/List/List.json | 25 + dist/components/List/List.min.css | 2 + dist/components/List/List.scss | 31 + .../ListItem/ListItem.Document.html | 9 + dist/components/ListItem/ListItem.Image.html | 18 + .../ListItem/ListItem.Selectable.html | 17 + .../ListItem/ListItem.Selected.html | 17 + dist/components/ListItem/ListItem.Unread.html | 17 + dist/components/ListItem/ListItem.Unseen.html | 17 + dist/components/ListItem/ListItem.css | 268 + dist/components/ListItem/ListItem.html | 17 + dist/components/ListItem/ListItem.json | 46 + dist/components/ListItem/ListItem.min.css | 2 + dist/components/ListItem/ListItem.scss | 230 + .../MessageBanner/MessageBanner.css | 458 ++ .../MessageBanner/MessageBanner.html | 20 + .../MessageBanner/MessageBanner.json | 10 + .../MessageBanner/MessageBanner.min.css | 2 + .../MessageBanner/MessageBanner.scss | 133 + dist/components/NavBar/NavBar.css | 792 ++ dist/components/NavBar/NavBar.html | 29 + dist/components/NavBar/NavBar.json | 13 + dist/components/NavBar/NavBar.min.css | 2 + dist/components/NavBar/NavBar.scss | 279 + dist/components/OrgChart/OrgChart.Square.html | 121 + dist/components/OrgChart/OrgChart.css | 544 ++ dist/components/OrgChart/OrgChart.html | 123 + dist/components/OrgChart/OrgChart.json | 26 + dist/components/OrgChart/OrgChart.min.css | 2 + dist/components/OrgChart/OrgChart.scss | 43 + dist/components/Overlay/Overlay.Dark.html | 3 + dist/components/Overlay/Overlay.None.html | 3 + dist/components/Overlay/Overlay.css | 26 + dist/components/Overlay/Overlay.html | 3 + dist/components/Overlay/Overlay.json | 28 + dist/components/Overlay/Overlay.min.css | 2 + dist/components/Overlay/Overlay.scss | 32 + dist/components/Panel/Panel.ExtraLarge.html | 44 + dist/components/Panel/Panel.Large.Fixed.html | 44 + dist/components/Panel/Panel.Large.html | 44 + dist/components/Panel/Panel.Left.html | 12 + dist/components/Panel/Panel.LightDismiss.html | 12 + dist/components/Panel/Panel.Medium.html | 44 + dist/components/Panel/Panel.css | 1634 ++++ dist/components/Panel/Panel.html | 68 + dist/components/Panel/Panel.json | 51 + dist/components/Panel/Panel.min.css | 2 + dist/components/Panel/Panel.scss | 478 ++ .../PeoplePicker/PeoplePicker.Compact.html | 169 + .../PeoplePicker.Disconnected.html | 168 + .../PeoplePicker/PeoplePicker.FacePile.html | 172 + .../PeoplePicker.MembersList.html | 112 + .../PeoplePicker/PeoplePicker.Searching.png | Bin 0 -> 1601 bytes dist/components/PeoplePicker/PeoplePicker.css | 1775 +++++ .../components/PeoplePicker/PeoplePicker.html | 178 + .../components/PeoplePicker/PeoplePicker.json | 43 + .../PeoplePicker/PeoplePicker.min.css | 2 + .../components/PeoplePicker/PeoplePicker.scss | 635 ++ .../Persona/Persona.ExtraLarge.html | 15 + .../Persona/Persona.ExtraSmall.html | 12 + dist/components/Persona/Persona.Initials.html | 13 + dist/components/Persona/Persona.Large.html | 15 + dist/components/Persona/Persona.Person.jpg | Bin 0 -> 5650 bytes dist/components/Persona/Persona.Person2.png | Bin 0 -> 15280 bytes .../Persona/Persona.Presence.Available.html | 13 + .../Persona/Persona.Presence.Away.html | 13 + .../Persona/Persona.Presence.Blocked.html | 13 + .../Persona/Persona.Presence.Busy.html | 13 + .../Persona/Persona.Presence.Dnd.html | 13 + .../Persona/Persona.Presence.Offline.html | 13 + .../Persona.Presence.Square.Available.html | 13 + .../Persona/Persona.Presence.Square.Away.html | 13 + .../Persona.Presence.Square.Blocked.html | 13 + .../Persona/Persona.Presence.Square.Busy.html | 13 + .../Persona/Persona.Presence.Square.Dnd.html | 13 + .../Persona.Presence.Square.Offline.html | 13 + dist/components/Persona/Persona.Small.html | 14 + .../Persona/Persona.Square.ExtraLarge.html | 15 + .../Persona/Persona.Square.ExtraSmall.html | 12 + .../Persona/Persona.Square.Large.html | 14 + .../Persona/Persona.Square.Small.html | 13 + .../Persona/Persona.Square.Tiny.html | 8 + dist/components/Persona/Persona.Square.html | 13 + dist/components/Persona/Persona.Tiny.html | 9 + dist/components/Persona/Persona.css | 500 ++ dist/components/Persona/Persona.html | 13 + dist/components/Persona/Persona.json | 191 + dist/components/Persona/Persona.min.css | 2 + dist/components/Persona/Persona.scss | 595 ++ .../PersonaCard/PersonaCard.Square.html | 168 + dist/components/PersonaCard/PersonaCard.css | 859 ++ dist/components/PersonaCard/PersonaCard.html | 170 + dist/components/PersonaCard/PersonaCard.json | 28 + .../PersonaCard/PersonaCard.min.css | 2 + dist/components/PersonaCard/PersonaCard.scss | 289 + dist/components/Pivot/Pivot.Large.html | 10 + dist/components/Pivot/Pivot.Tabs.Large.html | 10 + dist/components/Pivot/Pivot.Tabs.html | 10 + dist/components/Pivot/Pivot.css | 242 + dist/components/Pivot/Pivot.html | 10 + dist/components/Pivot/Pivot.json | 45 + dist/components/Pivot/Pivot.min.css | 2 + dist/components/Pivot/Pivot.scss | 242 + .../ProgressIndicator/ProgressIndicator.css | 63 + .../ProgressIndicator/ProgressIndicator.html | 10 + .../ProgressIndicator/ProgressIndicator.json | 7 + .../ProgressIndicator.min.css | 2 + .../ProgressIndicator/ProgressIndicator.scss | 56 + dist/components/SearchBox/SearchBox.css | 178 + dist/components/SearchBox/SearchBox.html | 7 + dist/components/SearchBox/SearchBox.json | 20 + dist/components/SearchBox/SearchBox.min.css | 2 + dist/components/SearchBox/SearchBox.scss | 109 + dist/components/Spinner/Spinner.Large.html | 3 + .../Spinner/Spinner.Message.Large.html | 5 + dist/components/Spinner/Spinner.Message.html | 5 + dist/components/Spinner/Spinner.css | 52 + dist/components/Spinner/Spinner.html | 3 + dist/components/Spinner/Spinner.json | 32 + dist/components/Spinner/Spinner.min.css | 2 + dist/components/Spinner/Spinner.scss | 44 + dist/components/Table/Table.Fixed.html | 43 + dist/components/Table/Table.css | 140 + dist/components/Table/Table.html | 43 + dist/components/Table/Table.json | 22 + dist/components/Table/Table.min.css | 2 + dist/components/Table/Table.scss | 132 + .../TextField/TextField.Multiline.html | 6 + .../TextField/TextField.Placeholder.html | 10 + .../TextField/TextField.Underlined.html | 6 + dist/components/TextField/TextField.css | 344 + dist/components/TextField/TextField.html | 7 + dist/components/TextField/TextField.json | 108 + dist/components/TextField/TextField.min.css | 2 + dist/components/TextField/TextField.scss | 204 + dist/components/Toggle/Toggle.Disabled.html | 10 + dist/components/Toggle/Toggle.TextLeft.html | 10 + dist/components/Toggle/Toggle.css | 286 + dist/components/Toggle/Toggle.html | 10 + dist/components/Toggle/Toggle.json | 43 + dist/components/Toggle/Toggle.min.css | 2 + dist/components/Toggle/Toggle.scss | 208 + dist/css/fabric.components.css | 6554 +++++++++++++++ dist/css/fabric.components.min.css | 6 + dist/css/fabric.components.rtl.css | 6356 +++++++++++++++ dist/css/fabric.components.rtl.min.css | 6 + dist/css/fabric.css | 5976 ++++++++++++++ dist/css/fabric.min.css | 6 + dist/css/fabric.rtl.css | 6265 +++++++++++++++ dist/css/fabric.rtl.min.css | 6 + dist/js/jquery.fabric.js | 2451 ++++++ dist/js/jquery.fabric.min.js | 2 + dist/packages/OfficeUIFabric.2.4.0.nupkg | Bin 0 -> 190288 bytes .../Components/Breadcrumb/Breadcrumb.css | 429 + .../Components/Breadcrumb/Breadcrumb.js | 269 + .../Components/Breadcrumb/Breadcrumb.min.css | 2 + dist/samples/Components/Breadcrumb/index.html | 143 + dist/samples/Components/Button/Button.css | 315 + dist/samples/Components/Button/Button.min.css | 2 + dist/samples/Components/Button/index.html | 144 + dist/samples/Components/Callout/Callout.css | 677 ++ .../Components/Callout/Callout.min.css | 2 + dist/samples/Components/Callout/index.html | 210 + .../Components/ChoiceField/ChoiceField.css | 242 + .../ChoiceField/ChoiceField.min.css | 2 + .../samples/Components/ChoiceField/index.html | 170 + .../Components/CommandBar/CommandBar.css | 664 ++ .../Components/CommandBar/CommandBar.min.css | 2 + .../CommandBar/Jquery.CommandBar.js | 163 + dist/samples/Components/CommandBar/index.html | 192 + .../ContextualMenu/ContextualMenu.css | 267 + .../ContextualMenu/ContextualMenu.min.css | 2 + .../ContextualMenu/Jquery.ContextualMenu.js | 59 + .../Components/ContextualMenu/index.html | 176 + .../Components/DatePicker/DatePicker.css | 831 ++ .../Components/DatePicker/DatePicker.min.css | 2 + .../DatePicker/Jquery.DatePicker.js | 286 + .../Components/DatePicker/PickaDate.js | 1 + dist/samples/Components/DatePicker/index.html | 152 + dist/samples/Components/Dialog/Dialog.css | 693 ++ dist/samples/Components/Dialog/Dialog.min.css | 2 + dist/samples/Components/Dialog/index.html | 300 + .../Components/Dialog/jquery.Dialog.js | 44 + dist/samples/Components/Dropdown/Dropdown.css | 329 + .../Components/Dropdown/Dropdown.min.css | 2 + .../Components/Dropdown/Jquery.Dropdown.js | 157 + dist/samples/Components/Dropdown/index.html | 132 + dist/samples/Components/Facepile/Facepile.css | 2208 ++++++ .../Components/Facepile/Facepile.min.css | 2 + .../Components/Facepile/Jquery.Facepile.js | 207 + dist/samples/Components/Facepile/index.html | 687 ++ dist/samples/Components/Label/Label.css | 59 + dist/samples/Components/Label/Label.min.css | 2 + dist/samples/Components/Label/index.html | 118 + dist/samples/Components/Link/Link.css | 35 + dist/samples/Components/Link/Link.min.css | 2 + dist/samples/Components/Link/index.html | 111 + dist/samples/Components/List/List.css | 268 + dist/samples/Components/List/List.min.css | 2 + dist/samples/Components/List/index.html | 320 + .../Components/ListItem/Jquery.ListItem.js | 27 + dist/samples/Components/ListItem/ListItem.css | 268 + .../Components/ListItem/ListItem.min.css | 2 + dist/samples/Components/ListItem/index.html | 224 + .../MessageBanner/MessageBanner.css | 458 ++ .../Components/MessageBanner/MessageBanner.js | 162 + .../MessageBanner/MessageBanner.min.css | 2 + .../Components/MessageBanner/index.html | 126 + .../Components/NavBar/Jquery.NavBar.js | 95 + dist/samples/Components/NavBar/NavBar.css | 792 ++ dist/samples/Components/NavBar/NavBar.min.css | 2 + dist/samples/Components/NavBar/index.html | 135 + dist/samples/Components/OrgChart/OrgChart.css | 544 ++ .../Components/OrgChart/OrgChart.min.css | 2 + dist/samples/Components/OrgChart/index.html | 348 + dist/samples/Components/Overlay/Overlay.css | 26 + .../Components/Overlay/Overlay.min.css | 2 + dist/samples/Components/Overlay/index.html | 116 + dist/samples/Components/Panel/Jquery.Panel.js | 94 + dist/samples/Components/Panel/Panel.css | 1634 ++++ dist/samples/Components/Panel/Panel.min.css | 2 + dist/samples/Components/Panel/index.html | 174 + .../PeoplePicker/Jquery.PeoplePicker.js | 398 + .../PeoplePicker/PeoplePicker.Searching.png | Bin 0 -> 1601 bytes .../Components/PeoplePicker/PeoplePicker.css | 1775 +++++ .../PeoplePicker/PeoplePicker.min.css | 2 + .../Components/PeoplePicker/index.html | 1077 +++ .../Components/Persona/Persona.Person.jpg | Bin 0 -> 5650 bytes .../Components/Persona/Persona.Person2.png | Bin 0 -> 15280 bytes dist/samples/Components/Persona/Persona.css | 500 ++ .../Components/Persona/Persona.min.css | 2 + dist/samples/Components/Persona/index.html | 451 ++ .../PersonaCard/Jquery.PersonaCard.js | 57 + .../Components/PersonaCard/PersonaCard.css | 859 ++ .../PersonaCard/PersonaCard.min.css | 2 + .../samples/Components/PersonaCard/index.html | 444 ++ dist/samples/Components/Pivot/Pivot.css | 242 + dist/samples/Components/Pivot/Pivot.min.css | 2 + dist/samples/Components/Pivot/index.html | 149 + dist/samples/Components/Pivot/jquery.Pivot.js | 37 + .../ProgressIndicator/ProgressIndicator.css | 63 + .../ProgressIndicator/ProgressIndicator.js | 103 + .../ProgressIndicator.min.css | 2 + .../Components/ProgressIndicator/index.html | 116 + .../Components/SearchBox/Jquery.SearchBox.js | 69 + .../Components/SearchBox/SearchBox.css | 178 + .../Components/SearchBox/SearchBox.min.css | 2 + dist/samples/Components/SearchBox/index.html | 113 + dist/samples/Components/Spinner/Spinner.css | 52 + dist/samples/Components/Spinner/Spinner.js | 151 + .../Components/Spinner/Spinner.min.css | 2 + dist/samples/Components/Spinner/index.html | 125 + dist/samples/Components/Table/Table.css | 140 + dist/samples/Components/Table/Table.min.css | 2 + dist/samples/Components/Table/index.html | 191 + .../Components/TextField/Jquery.TextField.js | 56 + .../Components/TextField/TextField.css | 344 + .../Components/TextField/TextField.min.css | 2 + dist/samples/Components/TextField/index.html | 138 + dist/samples/Components/Toggle/Toggle.css | 286 + dist/samples/Components/Toggle/Toggle.min.css | 2 + dist/samples/Components/Toggle/index.html | 136 + dist/samples/Form/css/Form.css | 6685 ++++++++++++++++ dist/samples/Form/css/Form.min.css | 1 + dist/samples/Form/index.html | 253 + dist/samples/Form/sass/Form.scss | 94 + dist/samples/Icons/index.html | 438 + dist/samples/VideoPortal/channel.html | 228 + dist/samples/VideoPortal/channels.html | 79 + dist/samples/VideoPortal/css/VideoPortal.css | 7031 +++++++++++++++++ .../VideoPortal/css/VideoPortal.min.css | 1 + dist/samples/VideoPortal/index.html | 275 + dist/samples/VideoPortal/player.html | 188 + dist/samples/VideoPortal/sass/Base.scss | 42 + .../samples/VideoPortal/sass/ChannelPage.scss | 21 + .../VideoPortal/sass/ChannelsPage.scss | 34 + dist/samples/VideoPortal/sass/HomePage.scss | 22 + dist/samples/VideoPortal/sass/NavBar.scss | 26 + dist/samples/VideoPortal/sass/PlayerPage.scss | 203 + dist/samples/VideoPortal/sass/SpotLight.scss | 72 + dist/samples/VideoPortal/sass/Utilities.scss | 30 + .../VideoPortal/sass/VideoListItem.scss | 75 + .../samples/VideoPortal/sass/VideoPortal.scss | 23 + dist/samples/index.html | 111 + dist/sass/Fabric.Animations.Output.scss | 419 + dist/sass/Fabric.Animations.RTL.Output.scss | 80 + dist/sass/Fabric.Color.Mixins.Output.scss | 448 ++ dist/sass/Fabric.Components.scss | 31 + dist/sass/Fabric.Grid.Output.scss | 32 + dist/sass/Fabric.Icons.Font.Output.scss | 23 + dist/sass/Fabric.Icons.Output.scss | 771 ++ dist/sass/Fabric.Icons.RTL.Output.scss | 114 + dist/sass/Fabric.RTL.scss | 39 + .../Fabric.Responsive.Utilities.Output.scss | 1022 +++ dist/sass/Fabric.Typography.Fonts.Output.scss | 76 + ....Typography.Language.Overrides.Output.scss | 56 + dist/sass/Fabric.Typography.Output.scss | 374 + dist/sass/Fabric.Utilities.Output.scss | 23 + dist/sass/Fabric.scss | 40 + dist/sass/_Fabric.Animations.RTL.scss | 79 + dist/sass/_Fabric.Animations.scss | 237 + dist/sass/_Fabric.Color.Mixins.scss | 406 + dist/sass/_Fabric.Color.Variables.scss | 89 + dist/sass/_Fabric.Common.scss | 15 + dist/sass/_Fabric.Grid.scss | 34 + dist/sass/_Fabric.Icons.scss | 397 + dist/sass/_Fabric.Mixins.RTL.scss | 315 + dist/sass/_Fabric.Mixins.scss | 274 + ...Fabric.Responsive.Utilities.Variables.scss | 697 ++ dist/sass/_Fabric.Responsive.Variables.scss | 35 + dist/sass/_Fabric.Typography.Fonts.scss | 170 + ..._Fabric.Typography.Language.Overrides.scss | 118 + dist/sass/_Fabric.Typography.Variables.scss | 27 + dist/sass/_Fabric.Typography.scss | 353 + dist/sass/_Fabric.Utilities.scss | 36 + dist/sass/_Fabric.ZIndex.Variables.scss | 32 + dist/sass/_Office.Color.Variables.scss | 34 + 405 files changed, 101619 insertions(+), 1 deletion(-) create mode 100644 dist/components/Breadcrumb/Breadcrumb.css create mode 100644 dist/components/Breadcrumb/Breadcrumb.html create mode 100644 dist/components/Breadcrumb/Breadcrumb.json create mode 100644 dist/components/Breadcrumb/Breadcrumb.min.css create mode 100644 dist/components/Breadcrumb/Breadcrumb.scss create mode 100644 dist/components/Button/Button.Command.html create mode 100644 dist/components/Button/Button.Compound.html create mode 100644 dist/components/Button/Button.Hero.html create mode 100644 dist/components/Button/Button.Primary.html create mode 100644 dist/components/Button/Button.css create mode 100644 dist/components/Button/Button.html create mode 100644 dist/components/Button/Button.json create mode 100644 dist/components/Button/Button.min.css create mode 100644 dist/components/Button/Button.scss create mode 100644 dist/components/Callout/Callout.ActionText.html create mode 100644 dist/components/Callout/Callout.Close.html create mode 100644 dist/components/Callout/Callout.Oobe.html create mode 100644 dist/components/Callout/Callout.Peek.html create mode 100644 dist/components/Callout/Callout.css create mode 100644 dist/components/Callout/Callout.html create mode 100644 dist/components/Callout/Callout.json create mode 100644 dist/components/Callout/Callout.min.css create mode 100644 dist/components/Callout/Callout.scss create mode 100644 dist/components/ChoiceField/ChoiceField.Checkbox.Disabled.html create mode 100644 dist/components/ChoiceField/ChoiceField.Checkbox.Selected.html create mode 100644 dist/components/ChoiceField/ChoiceField.Checkbox.html create mode 100644 dist/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html create mode 100644 dist/components/ChoiceField/ChoiceField.Disabled.html create mode 100644 dist/components/ChoiceField/ChoiceField.Selected.html create mode 100644 dist/components/ChoiceField/ChoiceField.css create mode 100644 dist/components/ChoiceField/ChoiceField.html create mode 100644 dist/components/ChoiceField/ChoiceField.json create mode 100644 dist/components/ChoiceField/ChoiceField.min.css create mode 100644 dist/components/ChoiceField/ChoiceField.scss create mode 100644 dist/components/CommandBar/CommandBar.css create mode 100644 dist/components/CommandBar/CommandBar.html create mode 100644 dist/components/CommandBar/CommandBar.json create mode 100644 dist/components/CommandBar/CommandBar.min.css create mode 100644 dist/components/CommandBar/CommandBar.scss create mode 100644 dist/components/ContextualMenu/ContextualMenu.Dividers.html create mode 100644 dist/components/ContextualMenu/ContextualMenu.Multiselect.html create mode 100644 dist/components/ContextualMenu/ContextualMenu.SubMenu.html create mode 100644 dist/components/ContextualMenu/ContextualMenu.css create mode 100644 dist/components/ContextualMenu/ContextualMenu.html create mode 100644 dist/components/ContextualMenu/ContextualMenu.json create mode 100644 dist/components/ContextualMenu/ContextualMenu.min.css create mode 100644 dist/components/ContextualMenu/ContextualMenu.scss create mode 100644 dist/components/DatePicker/DatePicker.css create mode 100644 dist/components/DatePicker/DatePicker.html create mode 100644 dist/components/DatePicker/DatePicker.json create mode 100644 dist/components/DatePicker/DatePicker.min.css create mode 100644 dist/components/DatePicker/DatePicker.scss create mode 100644 dist/components/Dialog/Dialog.Blocking.html create mode 100644 dist/components/Dialog/Dialog.Close.html create mode 100644 dist/components/Dialog/Dialog.LgHeader.html create mode 100644 dist/components/Dialog/Dialog.Multiline.html create mode 100644 dist/components/Dialog/Dialog.css create mode 100644 dist/components/Dialog/Dialog.html create mode 100644 dist/components/Dialog/Dialog.json create mode 100644 dist/components/Dialog/Dialog.min.css create mode 100644 dist/components/Dialog/Dialog.scss create mode 100644 dist/components/Dropdown/Dropdown.Disabled.html create mode 100644 dist/components/Dropdown/Dropdown.css create mode 100644 dist/components/Dropdown/Dropdown.html create mode 100644 dist/components/Dropdown/Dropdown.json create mode 100644 dist/components/Dropdown/Dropdown.min.css create mode 100644 dist/components/Dropdown/Dropdown.scss create mode 100644 dist/components/Facepile/Facepile.css create mode 100644 dist/components/Facepile/Facepile.html create mode 100644 dist/components/Facepile/Facepile.json create mode 100644 dist/components/Facepile/Facepile.min.css create mode 100644 dist/components/Facepile/Facepile.scss create mode 100644 dist/components/Label/Label.Disabled.html create mode 100644 dist/components/Label/Label.Required.html create mode 100644 dist/components/Label/Label.css create mode 100644 dist/components/Label/Label.html create mode 100644 dist/components/Label/Label.json create mode 100644 dist/components/Label/Label.min.css create mode 100644 dist/components/Label/Label.scss create mode 100644 dist/components/Link/Link.css create mode 100644 dist/components/Link/Link.html create mode 100644 dist/components/Link/Link.json create mode 100644 dist/components/Link/Link.min.css create mode 100644 dist/components/Link/Link.scss create mode 100644 dist/components/List/List.Grid.html create mode 100644 dist/components/List/List.css create mode 100644 dist/components/List/List.html create mode 100644 dist/components/List/List.json create mode 100644 dist/components/List/List.min.css create mode 100644 dist/components/List/List.scss create mode 100644 dist/components/ListItem/ListItem.Document.html create mode 100644 dist/components/ListItem/ListItem.Image.html create mode 100644 dist/components/ListItem/ListItem.Selectable.html create mode 100644 dist/components/ListItem/ListItem.Selected.html create mode 100644 dist/components/ListItem/ListItem.Unread.html create mode 100644 dist/components/ListItem/ListItem.Unseen.html create mode 100644 dist/components/ListItem/ListItem.css create mode 100644 dist/components/ListItem/ListItem.html create mode 100644 dist/components/ListItem/ListItem.json create mode 100644 dist/components/ListItem/ListItem.min.css create mode 100644 dist/components/ListItem/ListItem.scss create mode 100644 dist/components/MessageBanner/MessageBanner.css create mode 100644 dist/components/MessageBanner/MessageBanner.html create mode 100644 dist/components/MessageBanner/MessageBanner.json create mode 100644 dist/components/MessageBanner/MessageBanner.min.css create mode 100644 dist/components/MessageBanner/MessageBanner.scss create mode 100644 dist/components/NavBar/NavBar.css create mode 100644 dist/components/NavBar/NavBar.html create mode 100644 dist/components/NavBar/NavBar.json create mode 100644 dist/components/NavBar/NavBar.min.css create mode 100644 dist/components/NavBar/NavBar.scss create mode 100644 dist/components/OrgChart/OrgChart.Square.html create mode 100644 dist/components/OrgChart/OrgChart.css create mode 100644 dist/components/OrgChart/OrgChart.html create mode 100644 dist/components/OrgChart/OrgChart.json create mode 100644 dist/components/OrgChart/OrgChart.min.css create mode 100644 dist/components/OrgChart/OrgChart.scss create mode 100644 dist/components/Overlay/Overlay.Dark.html create mode 100644 dist/components/Overlay/Overlay.None.html create mode 100644 dist/components/Overlay/Overlay.css create mode 100644 dist/components/Overlay/Overlay.html create mode 100644 dist/components/Overlay/Overlay.json create mode 100644 dist/components/Overlay/Overlay.min.css create mode 100644 dist/components/Overlay/Overlay.scss create mode 100644 dist/components/Panel/Panel.ExtraLarge.html create mode 100644 dist/components/Panel/Panel.Large.Fixed.html create mode 100644 dist/components/Panel/Panel.Large.html create mode 100644 dist/components/Panel/Panel.Left.html create mode 100644 dist/components/Panel/Panel.LightDismiss.html create mode 100644 dist/components/Panel/Panel.Medium.html create mode 100644 dist/components/Panel/Panel.css create mode 100644 dist/components/Panel/Panel.html create mode 100644 dist/components/Panel/Panel.json create mode 100644 dist/components/Panel/Panel.min.css create mode 100644 dist/components/Panel/Panel.scss create mode 100644 dist/components/PeoplePicker/PeoplePicker.Compact.html create mode 100644 dist/components/PeoplePicker/PeoplePicker.Disconnected.html create mode 100644 dist/components/PeoplePicker/PeoplePicker.FacePile.html create mode 100644 dist/components/PeoplePicker/PeoplePicker.MembersList.html create mode 100644 dist/components/PeoplePicker/PeoplePicker.Searching.png create mode 100644 dist/components/PeoplePicker/PeoplePicker.css create mode 100644 dist/components/PeoplePicker/PeoplePicker.html create mode 100644 dist/components/PeoplePicker/PeoplePicker.json create mode 100644 dist/components/PeoplePicker/PeoplePicker.min.css create mode 100644 dist/components/PeoplePicker/PeoplePicker.scss create mode 100644 dist/components/Persona/Persona.ExtraLarge.html create mode 100644 dist/components/Persona/Persona.ExtraSmall.html create mode 100644 dist/components/Persona/Persona.Initials.html create mode 100644 dist/components/Persona/Persona.Large.html create mode 100644 dist/components/Persona/Persona.Person.jpg create mode 100644 dist/components/Persona/Persona.Person2.png create mode 100644 dist/components/Persona/Persona.Presence.Available.html create mode 100644 dist/components/Persona/Persona.Presence.Away.html create mode 100644 dist/components/Persona/Persona.Presence.Blocked.html create mode 100644 dist/components/Persona/Persona.Presence.Busy.html create mode 100644 dist/components/Persona/Persona.Presence.Dnd.html create mode 100644 dist/components/Persona/Persona.Presence.Offline.html create mode 100644 dist/components/Persona/Persona.Presence.Square.Available.html create mode 100644 dist/components/Persona/Persona.Presence.Square.Away.html create mode 100644 dist/components/Persona/Persona.Presence.Square.Blocked.html create mode 100644 dist/components/Persona/Persona.Presence.Square.Busy.html create mode 100644 dist/components/Persona/Persona.Presence.Square.Dnd.html create mode 100644 dist/components/Persona/Persona.Presence.Square.Offline.html create mode 100644 dist/components/Persona/Persona.Small.html create mode 100644 dist/components/Persona/Persona.Square.ExtraLarge.html create mode 100644 dist/components/Persona/Persona.Square.ExtraSmall.html create mode 100644 dist/components/Persona/Persona.Square.Large.html create mode 100644 dist/components/Persona/Persona.Square.Small.html create mode 100644 dist/components/Persona/Persona.Square.Tiny.html create mode 100644 dist/components/Persona/Persona.Square.html create mode 100644 dist/components/Persona/Persona.Tiny.html create mode 100644 dist/components/Persona/Persona.css create mode 100644 dist/components/Persona/Persona.html create mode 100644 dist/components/Persona/Persona.json create mode 100644 dist/components/Persona/Persona.min.css create mode 100644 dist/components/Persona/Persona.scss create mode 100644 dist/components/PersonaCard/PersonaCard.Square.html create mode 100644 dist/components/PersonaCard/PersonaCard.css create mode 100644 dist/components/PersonaCard/PersonaCard.html create mode 100644 dist/components/PersonaCard/PersonaCard.json create mode 100644 dist/components/PersonaCard/PersonaCard.min.css create mode 100644 dist/components/PersonaCard/PersonaCard.scss create mode 100644 dist/components/Pivot/Pivot.Large.html create mode 100644 dist/components/Pivot/Pivot.Tabs.Large.html create mode 100644 dist/components/Pivot/Pivot.Tabs.html create mode 100644 dist/components/Pivot/Pivot.css create mode 100644 dist/components/Pivot/Pivot.html create mode 100644 dist/components/Pivot/Pivot.json create mode 100644 dist/components/Pivot/Pivot.min.css create mode 100644 dist/components/Pivot/Pivot.scss create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.css create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.html create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.json create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.min.css create mode 100644 dist/components/ProgressIndicator/ProgressIndicator.scss create mode 100644 dist/components/SearchBox/SearchBox.css create mode 100644 dist/components/SearchBox/SearchBox.html create mode 100644 dist/components/SearchBox/SearchBox.json create mode 100644 dist/components/SearchBox/SearchBox.min.css create mode 100644 dist/components/SearchBox/SearchBox.scss create mode 100644 dist/components/Spinner/Spinner.Large.html create mode 100644 dist/components/Spinner/Spinner.Message.Large.html create mode 100644 dist/components/Spinner/Spinner.Message.html create mode 100644 dist/components/Spinner/Spinner.css create mode 100644 dist/components/Spinner/Spinner.html create mode 100644 dist/components/Spinner/Spinner.json create mode 100644 dist/components/Spinner/Spinner.min.css create mode 100644 dist/components/Spinner/Spinner.scss create mode 100644 dist/components/Table/Table.Fixed.html create mode 100644 dist/components/Table/Table.css create mode 100644 dist/components/Table/Table.html create mode 100644 dist/components/Table/Table.json create mode 100644 dist/components/Table/Table.min.css create mode 100644 dist/components/Table/Table.scss create mode 100644 dist/components/TextField/TextField.Multiline.html create mode 100644 dist/components/TextField/TextField.Placeholder.html create mode 100644 dist/components/TextField/TextField.Underlined.html create mode 100644 dist/components/TextField/TextField.css create mode 100644 dist/components/TextField/TextField.html create mode 100644 dist/components/TextField/TextField.json create mode 100644 dist/components/TextField/TextField.min.css create mode 100644 dist/components/TextField/TextField.scss create mode 100644 dist/components/Toggle/Toggle.Disabled.html create mode 100644 dist/components/Toggle/Toggle.TextLeft.html create mode 100644 dist/components/Toggle/Toggle.css create mode 100644 dist/components/Toggle/Toggle.html create mode 100644 dist/components/Toggle/Toggle.json create mode 100644 dist/components/Toggle/Toggle.min.css create mode 100644 dist/components/Toggle/Toggle.scss create mode 100644 dist/css/fabric.components.css create mode 100644 dist/css/fabric.components.min.css create mode 100644 dist/css/fabric.components.rtl.css create mode 100644 dist/css/fabric.components.rtl.min.css create mode 100644 dist/css/fabric.css create mode 100644 dist/css/fabric.min.css create mode 100644 dist/css/fabric.rtl.css create mode 100644 dist/css/fabric.rtl.min.css create mode 100644 dist/js/jquery.fabric.js create mode 100644 dist/js/jquery.fabric.min.js create mode 100644 dist/packages/OfficeUIFabric.2.4.0.nupkg create mode 100644 dist/samples/Components/Breadcrumb/Breadcrumb.css create mode 100644 dist/samples/Components/Breadcrumb/Breadcrumb.js create mode 100644 dist/samples/Components/Breadcrumb/Breadcrumb.min.css create mode 100644 dist/samples/Components/Breadcrumb/index.html create mode 100644 dist/samples/Components/Button/Button.css create mode 100644 dist/samples/Components/Button/Button.min.css create mode 100644 dist/samples/Components/Button/index.html create mode 100644 dist/samples/Components/Callout/Callout.css create mode 100644 dist/samples/Components/Callout/Callout.min.css create mode 100644 dist/samples/Components/Callout/index.html create mode 100644 dist/samples/Components/ChoiceField/ChoiceField.css create mode 100644 dist/samples/Components/ChoiceField/ChoiceField.min.css create mode 100644 dist/samples/Components/ChoiceField/index.html create mode 100644 dist/samples/Components/CommandBar/CommandBar.css create mode 100644 dist/samples/Components/CommandBar/CommandBar.min.css create mode 100644 dist/samples/Components/CommandBar/Jquery.CommandBar.js create mode 100644 dist/samples/Components/CommandBar/index.html create mode 100644 dist/samples/Components/ContextualMenu/ContextualMenu.css create mode 100644 dist/samples/Components/ContextualMenu/ContextualMenu.min.css create mode 100644 dist/samples/Components/ContextualMenu/Jquery.ContextualMenu.js create mode 100644 dist/samples/Components/ContextualMenu/index.html create mode 100644 dist/samples/Components/DatePicker/DatePicker.css create mode 100644 dist/samples/Components/DatePicker/DatePicker.min.css create mode 100644 dist/samples/Components/DatePicker/Jquery.DatePicker.js create mode 100644 dist/samples/Components/DatePicker/PickaDate.js create mode 100644 dist/samples/Components/DatePicker/index.html create mode 100644 dist/samples/Components/Dialog/Dialog.css create mode 100644 dist/samples/Components/Dialog/Dialog.min.css create mode 100644 dist/samples/Components/Dialog/index.html create mode 100644 dist/samples/Components/Dialog/jquery.Dialog.js create mode 100644 dist/samples/Components/Dropdown/Dropdown.css create mode 100644 dist/samples/Components/Dropdown/Dropdown.min.css create mode 100644 dist/samples/Components/Dropdown/Jquery.Dropdown.js create mode 100644 dist/samples/Components/Dropdown/index.html create mode 100644 dist/samples/Components/Facepile/Facepile.css create mode 100644 dist/samples/Components/Facepile/Facepile.min.css create mode 100644 dist/samples/Components/Facepile/Jquery.Facepile.js create mode 100644 dist/samples/Components/Facepile/index.html create mode 100644 dist/samples/Components/Label/Label.css create mode 100644 dist/samples/Components/Label/Label.min.css create mode 100644 dist/samples/Components/Label/index.html create mode 100644 dist/samples/Components/Link/Link.css create mode 100644 dist/samples/Components/Link/Link.min.css create mode 100644 dist/samples/Components/Link/index.html create mode 100644 dist/samples/Components/List/List.css create mode 100644 dist/samples/Components/List/List.min.css create mode 100644 dist/samples/Components/List/index.html create mode 100644 dist/samples/Components/ListItem/Jquery.ListItem.js create mode 100644 dist/samples/Components/ListItem/ListItem.css create mode 100644 dist/samples/Components/ListItem/ListItem.min.css create mode 100644 dist/samples/Components/ListItem/index.html create mode 100644 dist/samples/Components/MessageBanner/MessageBanner.css create mode 100644 dist/samples/Components/MessageBanner/MessageBanner.js create mode 100644 dist/samples/Components/MessageBanner/MessageBanner.min.css create mode 100644 dist/samples/Components/MessageBanner/index.html create mode 100644 dist/samples/Components/NavBar/Jquery.NavBar.js create mode 100644 dist/samples/Components/NavBar/NavBar.css create mode 100644 dist/samples/Components/NavBar/NavBar.min.css create mode 100644 dist/samples/Components/NavBar/index.html create mode 100644 dist/samples/Components/OrgChart/OrgChart.css create mode 100644 dist/samples/Components/OrgChart/OrgChart.min.css create mode 100644 dist/samples/Components/OrgChart/index.html create mode 100644 dist/samples/Components/Overlay/Overlay.css create mode 100644 dist/samples/Components/Overlay/Overlay.min.css create mode 100644 dist/samples/Components/Overlay/index.html create mode 100644 dist/samples/Components/Panel/Jquery.Panel.js create mode 100644 dist/samples/Components/Panel/Panel.css create mode 100644 dist/samples/Components/Panel/Panel.min.css create mode 100644 dist/samples/Components/Panel/index.html create mode 100644 dist/samples/Components/PeoplePicker/Jquery.PeoplePicker.js create mode 100644 dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png create mode 100644 dist/samples/Components/PeoplePicker/PeoplePicker.css create mode 100644 dist/samples/Components/PeoplePicker/PeoplePicker.min.css create mode 100644 dist/samples/Components/PeoplePicker/index.html create mode 100644 dist/samples/Components/Persona/Persona.Person.jpg create mode 100644 dist/samples/Components/Persona/Persona.Person2.png create mode 100644 dist/samples/Components/Persona/Persona.css create mode 100644 dist/samples/Components/Persona/Persona.min.css create mode 100644 dist/samples/Components/Persona/index.html create mode 100644 dist/samples/Components/PersonaCard/Jquery.PersonaCard.js create mode 100644 dist/samples/Components/PersonaCard/PersonaCard.css create mode 100644 dist/samples/Components/PersonaCard/PersonaCard.min.css create mode 100644 dist/samples/Components/PersonaCard/index.html create mode 100644 dist/samples/Components/Pivot/Pivot.css create mode 100644 dist/samples/Components/Pivot/Pivot.min.css create mode 100644 dist/samples/Components/Pivot/index.html create mode 100644 dist/samples/Components/Pivot/jquery.Pivot.js create mode 100644 dist/samples/Components/ProgressIndicator/ProgressIndicator.css create mode 100644 dist/samples/Components/ProgressIndicator/ProgressIndicator.js create mode 100644 dist/samples/Components/ProgressIndicator/ProgressIndicator.min.css create mode 100644 dist/samples/Components/ProgressIndicator/index.html create mode 100644 dist/samples/Components/SearchBox/Jquery.SearchBox.js create mode 100644 dist/samples/Components/SearchBox/SearchBox.css create mode 100644 dist/samples/Components/SearchBox/SearchBox.min.css create mode 100644 dist/samples/Components/SearchBox/index.html create mode 100644 dist/samples/Components/Spinner/Spinner.css create mode 100644 dist/samples/Components/Spinner/Spinner.js create mode 100644 dist/samples/Components/Spinner/Spinner.min.css create mode 100644 dist/samples/Components/Spinner/index.html create mode 100644 dist/samples/Components/Table/Table.css create mode 100644 dist/samples/Components/Table/Table.min.css create mode 100644 dist/samples/Components/Table/index.html create mode 100644 dist/samples/Components/TextField/Jquery.TextField.js create mode 100644 dist/samples/Components/TextField/TextField.css create mode 100644 dist/samples/Components/TextField/TextField.min.css create mode 100644 dist/samples/Components/TextField/index.html create mode 100644 dist/samples/Components/Toggle/Toggle.css create mode 100644 dist/samples/Components/Toggle/Toggle.min.css create mode 100644 dist/samples/Components/Toggle/index.html create mode 100644 dist/samples/Form/css/Form.css create mode 100644 dist/samples/Form/css/Form.min.css create mode 100644 dist/samples/Form/index.html create mode 100644 dist/samples/Form/sass/Form.scss create mode 100644 dist/samples/Icons/index.html create mode 100644 dist/samples/VideoPortal/channel.html create mode 100644 dist/samples/VideoPortal/channels.html create mode 100644 dist/samples/VideoPortal/css/VideoPortal.css create mode 100644 dist/samples/VideoPortal/css/VideoPortal.min.css create mode 100644 dist/samples/VideoPortal/index.html create mode 100644 dist/samples/VideoPortal/player.html create mode 100644 dist/samples/VideoPortal/sass/Base.scss create mode 100644 dist/samples/VideoPortal/sass/ChannelPage.scss create mode 100644 dist/samples/VideoPortal/sass/ChannelsPage.scss create mode 100644 dist/samples/VideoPortal/sass/HomePage.scss create mode 100644 dist/samples/VideoPortal/sass/NavBar.scss create mode 100644 dist/samples/VideoPortal/sass/PlayerPage.scss create mode 100644 dist/samples/VideoPortal/sass/SpotLight.scss create mode 100644 dist/samples/VideoPortal/sass/Utilities.scss create mode 100644 dist/samples/VideoPortal/sass/VideoListItem.scss create mode 100644 dist/samples/VideoPortal/sass/VideoPortal.scss create mode 100644 dist/samples/index.html create mode 100644 dist/sass/Fabric.Animations.Output.scss create mode 100644 dist/sass/Fabric.Animations.RTL.Output.scss create mode 100644 dist/sass/Fabric.Color.Mixins.Output.scss create mode 100644 dist/sass/Fabric.Components.scss create mode 100644 dist/sass/Fabric.Grid.Output.scss create mode 100644 dist/sass/Fabric.Icons.Font.Output.scss create mode 100644 dist/sass/Fabric.Icons.Output.scss create mode 100644 dist/sass/Fabric.Icons.RTL.Output.scss create mode 100644 dist/sass/Fabric.RTL.scss create mode 100644 dist/sass/Fabric.Responsive.Utilities.Output.scss create mode 100644 dist/sass/Fabric.Typography.Fonts.Output.scss create mode 100644 dist/sass/Fabric.Typography.Language.Overrides.Output.scss create mode 100644 dist/sass/Fabric.Typography.Output.scss create mode 100644 dist/sass/Fabric.Utilities.Output.scss create mode 100644 dist/sass/Fabric.scss create mode 100644 dist/sass/_Fabric.Animations.RTL.scss create mode 100644 dist/sass/_Fabric.Animations.scss create mode 100644 dist/sass/_Fabric.Color.Mixins.scss create mode 100644 dist/sass/_Fabric.Color.Variables.scss create mode 100644 dist/sass/_Fabric.Common.scss create mode 100644 dist/sass/_Fabric.Grid.scss create mode 100644 dist/sass/_Fabric.Icons.scss create mode 100644 dist/sass/_Fabric.Mixins.RTL.scss create mode 100644 dist/sass/_Fabric.Mixins.scss create mode 100644 dist/sass/_Fabric.Responsive.Utilities.Variables.scss create mode 100644 dist/sass/_Fabric.Responsive.Variables.scss create mode 100644 dist/sass/_Fabric.Typography.Fonts.scss create mode 100644 dist/sass/_Fabric.Typography.Language.Overrides.scss create mode 100644 dist/sass/_Fabric.Typography.Variables.scss create mode 100644 dist/sass/_Fabric.Typography.scss create mode 100644 dist/sass/_Fabric.Utilities.scss create mode 100644 dist/sass/_Fabric.ZIndex.Variables.scss create mode 100644 dist/sass/_Office.Color.Variables.scss diff --git a/.gitignore b/.gitignore index cb742fce1..d5d9fff45 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,6 @@ npm-debug.log # Fabric files *.sublime-workspace docs.css -dist # Docs files docs/app diff --git a/dist/components/Breadcrumb/Breadcrumb.css b/dist/components/Breadcrumb/Breadcrumb.css new file mode 100644 index 000000000..852a22130 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.css @@ -0,0 +1,429 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-Breadcrumb { + margin: 23px 0 1px 0; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + margin-right: -4px; + padding: 12px 8px 3px 8px; + cursor: pointer; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: white; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} diff --git a/dist/components/Breadcrumb/Breadcrumb.html b/dist/components/Breadcrumb/Breadcrumb.html new file mode 100644 index 000000000..88854c893 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.html @@ -0,0 +1,37 @@ + + +
+
+
+ +
+
    +
    +
    + +
    diff --git a/dist/components/Breadcrumb/Breadcrumb.json b/dist/components/Breadcrumb/Breadcrumb.json new file mode 100644 index 000000000..9355715b0 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.json @@ -0,0 +1,10 @@ +{ + "name": "Breadcrumb", + "notes": "A component that shows the user's current location in a hierarchy and provides a means of navigating up or down it.", + "description": "Shows the user's current location in a hierarchy and provides a means of navigating upward.", + "template": "Breadcrumb.html", + "class": "ms-Breadcrumb", + "dependencies": [ + "ContextualMenu" + ] +} diff --git a/dist/components/Breadcrumb/Breadcrumb.min.css b/dist/components/Breadcrumb/Breadcrumb.min.css new file mode 100644 index 000000000..c368e982c --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:2}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}} \ No newline at end of file diff --git a/dist/components/Breadcrumb/Breadcrumb.scss b/dist/components/Breadcrumb/Breadcrumb.scss new file mode 100644 index 000000000..e23a021d2 --- /dev/null +++ b/dist/components/Breadcrumb/Breadcrumb.scss @@ -0,0 +1,170 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Breadcrumb styles + + +.ms-Breadcrumb { + margin: 23px 0 1px 0; + + &.is-overflow { + .ms-Breadcrumb-overflow { + display: inline; + } + } +} + +.ms-Breadcrumb-chevron { + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; + + .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; + + &:last-of-type { + .ms-Breadcrumb-chevron { + display: none; + } + } + } +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + margin-right: -4px; + + .ms-Breadcrumb-overflowButton { + font-size: $ms-font-size-s; + display: inline-block; + color:$ms-color-themePrimary; + margin-right: -4px; + padding: 12px 8px 3px 8px; + cursor: pointer; + } +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; + + &.is-open { + display: block; + top: 36px; + left: 0; + @include drop-shadow; + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); + } + + &:before { + position: absolute; + @include drop-shadow; + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + transform: rotate(45deg); + background-color: white; + } + + .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; + + &.is-open { + margin-bottom: 0; + } + } +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; + + &:hover { + background-color: $ms-color-neutralLighter; + cursor: pointer; + } + + &:focus { + outline: $ms-color-neutralSecondaryAlt solid 1px; + color: $ms-color-black; + } + + &:active { + outline: transparent; + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-Breadcrumb-itemLink { + @include ms-font-xl(); + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + + +@media screen and (max-width: $ms-screen-md-max) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-l; + } + + .ms-Breadcrumb-chevron { + font-size: $ms-font-size-m; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } + } +} + +@media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow { + .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } + } +} diff --git a/dist/components/Button/Button.Command.html b/dist/components/Button/Button.Command.html new file mode 100644 index 000000000..0df351821 --- /dev/null +++ b/dist/components/Button/Button.Command.html @@ -0,0 +1,7 @@ + + + diff --git a/dist/components/Button/Button.Compound.html b/dist/components/Button/Button.Compound.html new file mode 100644 index 000000000..5879bd702 --- /dev/null +++ b/dist/components/Button/Button.Compound.html @@ -0,0 +1,7 @@ + + + diff --git a/dist/components/Button/Button.Hero.html b/dist/components/Button/Button.Hero.html new file mode 100644 index 000000000..857ca08bc --- /dev/null +++ b/dist/components/Button/Button.Hero.html @@ -0,0 +1,7 @@ + + + diff --git a/dist/components/Button/Button.Primary.html b/dist/components/Button/Button.Primary.html new file mode 100644 index 000000000..2f216c0ff --- /dev/null +++ b/dist/components/Button/Button.Primary.html @@ -0,0 +1,7 @@ + + + diff --git a/dist/components/Button/Button.css b/dist/components/Button/Button.css new file mode 100644 index 000000000..0c474b100 --- /dev/null +++ b/dist/components/Button/Button.css @@ -0,0 +1,315 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} diff --git a/dist/components/Button/Button.html b/dist/components/Button/Button.html new file mode 100644 index 000000000..6cbeb316e --- /dev/null +++ b/dist/components/Button/Button.html @@ -0,0 +1,7 @@ + + + diff --git a/dist/components/Button/Button.json b/dist/components/Button/Button.json new file mode 100644 index 000000000..a307283b5 --- /dev/null +++ b/dist/components/Button/Button.json @@ -0,0 +1,93 @@ +{ + "name": "Button", + "notes": "", + "description": "A simple button that contains multiple variants and can be used for action-oriented screens or dialogs.", + "template": "Button.html", + "class": "ms-Button", + "wrapBranches": true, + "fileOrder": [ + "Button.html", + "Button.Primary.html", + "Button.Hero.html", + "Button.Compound.html", + "Button.Command.html" + ], + "branches": [ + { + "name": "Action", + "default": true, + "branches": [ + { + "name": "Standard", + "default": true, + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Primary", + "class": "ms-Button--primary", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] + }, + { + "name": "Hero", + "class": "ms-Button--hero", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Compound", + "class": "ms-Button--compound", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Command", + "class": "ms-Button--command", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] +} diff --git a/dist/components/Button/Button.min.css b/dist/components/Button/Button.min.css new file mode 100644 index 000000000..3063585db --- /dev/null +++ b/dist/components/Button/Button.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px} \ No newline at end of file diff --git a/dist/components/Button/Button.scss b/dist/components/Button/Button.scss new file mode 100644 index 000000000..c42153908 --- /dev/null +++ b/dist/components/Button/Button.scss @@ -0,0 +1,327 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Button styles + + +.ms-Button { + @include ms-font-m; + @include ms-u-normalize; + background-color: $ms-color-neutralLighter; + border: 1px solid $ms-color-neutralLighter; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; + + &:hover { + background-color: $ms-color-neutralLight; + border-color: $ms-color-neutralLight; + outline: 1px solid transparent; + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:focus { + background-color: $ms-color-neutralLight; + border-color: $ms-color-themePrimary; + outline: 1px solid transparent; + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + cursor: default; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + + &:hover, + &:focus { + outline: 0; + } + } +} + +// Add space between adjacent buttons. +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-semibold; + font-size: $ms-font-size-m; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + + +//== Modifier: Primary action button +// +.ms-Button.ms-Button--primary { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + + .ms-Button-label { + color: $ms-color-white; + } + + &:hover { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDark; + } + + &:focus { + background-color: $ms-color-themeDark; + border-color: $ms-color-themeDarker; + } + + &:active { + background-color: $ms-color-themePrimary; + border-color: $ms-color-themePrimary; + } + + &:disabled, + &.is-disabled { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Hero button +// +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; + + .ms-Button-icon { + color: $ms-color-themePrimary; + display: inline-block; + font-size: $ms-font-size-s; + position: relative; + top: -8px; + text-align: center; + + .ms-Icon { + border-radius: 18px; + border: 1px solid $ms-color-themePrimary; + height: 18px; + line-height: 18px; + width: 18px; + font-size: $ms-font-size-s; + margin: 0; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + font-family: $ms-font-family-light; + font-size: $ms-font-size-xl; + position: relative; + top: -5px; + text-decoration: none; + } + + &:hover, + &:focus { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-themeDark; + } + } + + .ms-Button-label { + color: $ms-color-themeDarker; + } + } + + &:active { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-themePrimary; + } + } + + .ms-Button-label { + color: $ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + .ms-Icon { + color: $ms-color-neutralTertiaryAlt; + } + } + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Compound button +// +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; + + .ms-Button-label { + display: block; + font-family: $ms-font-family-semibold; + position: relative; + text-align: left; + margin-top: -5px; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + display: block; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-s; + position: relative; + text-align: left; + top: 3px; + } + + &:hover { + .ms-Button-description { + color: $ms-color-neutralDark; + } + } + + &:focus { + border-color: $ms-color-themePrimary; + background-color: $ms-color-neutralLighter; + + .ms-Button-label { + color: $ms-color-neutralPrimary; + } + + .ms-Button-description { + color: $ms-color-neutralSecondary; + } + } + + &:active { + background-color: $ms-color-themePrimary; + + .ms-Button-description, + .ms-Button-label { + color: $ms-color-white; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + + &:focus, + &:active { + border-color: $ms-color-neutralLighter; + background-color: $ms-color-neutralLighter; + + .ms-Button-label, + .ms-Button-description { + color: $ms-color-neutralTertiary; + } + } + } +} + + +//== Modifier: Command button +// +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: $ms-font-size-m; + + .ms-Button-icon { + color: $ms-color-neutralSecondary; + display: inline-block; + margin-right: 4px; + position: relative; + } + + .ms-Button-label { + font-family: $ms-font-family-regular; + } + + &:hover, + &:focus { + .ms-Button-icon { + color: $ms-color-neutralDark; + } + + .ms-Button-label { + color: $ms-color-black; + } + } + + &:active { + .ms-Button-icon, + .ms-Button-label { + color: $ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + color: $ms-color-neutralTertiaryAlt; + } + + .ms-Button-label { + color: $ms-color-neutralTertiary; + } + } +} + +// Add space between adjacent command buttons. +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} diff --git a/dist/components/Callout/Callout.ActionText.html b/dist/components/Callout/Callout.ActionText.html new file mode 100644 index 000000000..5058d8f27 --- /dev/null +++ b/dist/components/Callout/Callout.ActionText.html @@ -0,0 +1,24 @@ + + +
    +
    +
    +

    All of your favorite people

    +
    +
    +
    +

    People automatically puts together all of the people you care most about in one place.

    +
    +
    + + +
    +
    +
    +
    diff --git a/dist/components/Callout/Callout.Close.html b/dist/components/Callout/Callout.Close.html new file mode 100644 index 000000000..9f4d6808c --- /dev/null +++ b/dist/components/Callout/Callout.Close.html @@ -0,0 +1,20 @@ + + +
    +
    +
    +

    All of your favorite people

    +
    + +
    +
    +

    Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

    +
    +
    + Learn more +
    +
    +
    +
    diff --git a/dist/components/Callout/Callout.Oobe.html b/dist/components/Callout/Callout.Oobe.html new file mode 100644 index 000000000..8a11d1a28 --- /dev/null +++ b/dist/components/Callout/Callout.Oobe.html @@ -0,0 +1,24 @@ + + +
    +
    +
    +

    All of your favorite people

    +
    +
    +
    +

    People automatically puts together all of the people you care most about in one place.

    +
    +
    + + +
    +
    +
    +
    diff --git a/dist/components/Callout/Callout.Peek.html b/dist/components/Callout/Callout.Peek.html new file mode 100644 index 000000000..9de0f98d9 --- /dev/null +++ b/dist/components/Callout/Callout.Peek.html @@ -0,0 +1,17 @@ + + +
    +
    +
    +

    Uploaded 2 items to Alton's OneDrive

    +
    +
    +
    + +
    +
    +
    +
    \ No newline at end of file diff --git a/dist/components/Callout/Callout.css b/dist/components/Callout/Callout.css new file mode 100644 index 000000000..ab58cf8d6 --- /dev/null +++ b/dist/components/Callout/Callout.css @@ -0,0 +1,677 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + content: ''; + position: absolute; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + height: 0; + width: 0; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before { + z-index: 0; + outline: 1px solid transparent; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:after { + z-index: 10; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + top: 40px; + display: none; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after { + border-top: 10px solid #ffffff; + border-right: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #ffffff; + left: -10px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + border-top: 10px solid transparent; + border-right: 10px solid #ffffff; + border-bottom: 10px solid #ffffff; + border-left: 10px solid transparent; + right: -10px; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + left: 0; + right: 0; + margin: 0 auto; + width: 0; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + border-top: 10px solid #ffffff; + border-right: 10px solid #ffffff; + border-bottom: 10px solid transparent; + border-left: 10px solid transparent; + top: -10px; +} + +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + border-top: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #ffffff; + border-left: 10px solid #ffffff; + bottom: -10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + border: 0; + width: 20px; + height: 20px; + background-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + background-color: #ffffff; + } +} + +.ms-Callout-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: 105; + padding: 18px 24px 12px; +} + +.ms-Callout-title { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-Link.ms-Link--hero { + position: relative; + left: -8px; +} + +.ms-Callout-action { + position: relative; + top: 4px; + left: -8px; + margin-left: 0 !important; +} + +.ms-Callout-action:hover .ms-Callout-actionIcon, +.ms-Callout-action:focus .ms-Callout-actionIcon { + color: #0078d7; +} + +.ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--close .ms-Callout-title { + margin-right: 20px; +} + +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after { + border-color: #0078d7; + background-color: transparent; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + margin-bottom: -8px; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after { + left: 40px; + right: auto; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after { + top: calc('50% - 10px'); +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +@media (min-width: 480px) { + .ms-Callout { + width: 300px; + margin: 16px; + } + + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after { + display: block; + } +} diff --git a/dist/components/Callout/Callout.html b/dist/components/Callout/Callout.html new file mode 100644 index 000000000..9a8e15918 --- /dev/null +++ b/dist/components/Callout/Callout.html @@ -0,0 +1,17 @@ + + +
    +
    +
    +

    All of your favorite people

    +
    +
    +
    +

    Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

    +
    +
    + Learn more +
    +
    +
    +
    diff --git a/dist/components/Callout/Callout.json b/dist/components/Callout/Callout.json new file mode 100644 index 000000000..054b14b91 --- /dev/null +++ b/dist/components/Callout/Callout.json @@ -0,0 +1,140 @@ +{ + "name": "Callout", + "notes": "Callouts & Peeks.", + "description": "A pop-out out notification area with several variants to allow a more detailed description or set of actions on an object or item.", + "class": "ms-Callout", + "dependencies": [ + "Button", + "Label", + "Link" + ], + "fileOrder": [ + "Callout.html", + "Callout.Close.html", + "Callout.ActionText.html", + "Callout.Oobe.html", + "Callout.Peek.html" + ], + "branches": [ + { + "name": "Default", + "default": true, + "template": "Callout.Default.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "Close Button", + "class": "ms-Callout--close", + "template": "Callout.Close.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "ActionText", + "class": "ms-Callout--actionText", + "template": "Callout.ActionText.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "OOBE", + "class": "ms-Callout--OOBE", + "template": "Callout.Oobe.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "Peek", + "class": "ms-Callout--peek", + "template": "Callout.peek.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + } + ] +} diff --git a/dist/components/Callout/Callout.min.css b/dist/components/Callout/Callout.min.css new file mode 100644 index 000000000..b382fe0a8 --- /dev/null +++ b/dist/components/Callout/Callout.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Callout{z-index:3;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:2}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:1;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:5}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:4;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}} \ No newline at end of file diff --git a/dist/components/Callout/Callout.scss b/dist/components/Callout/Callout.scss new file mode 100644 index 000000000..a3f4c9bda --- /dev/null +++ b/dist/components/Callout/Callout.scss @@ -0,0 +1,315 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Callout styles + + +.ms-Callout { + z-index: $ms-zIndex-Callout; + margin: 16px auto; + position: relative; + width: 288px; +} + +// Mixin for arrow size and color +@mixin arrowBorders($ms-color-top, $ms-color-right, $ms-color-bottom, $ms-color-left) { + border-top: 10px solid $ms-color-top; + border-right: 10px solid $ms-color-right; + border-bottom: 10px solid $ms-color-bottom; + border-left: 10px solid $ms-color-left; +} + + +//= Modifier: Base styling for all callout arrows +// +.ms-Callout.ms-Callout--arrowRight, +.ms-Callout.ms-Callout--arrowLeft, +.ms-Callout.ms-Callout--arrowBottom, +.ms-Callout.ms-Callout--arrowTop { + &:before, + &:after { + content: ''; + position: absolute; + transform: rotate(-45deg); + height: 0; + width: 0; + } + + &:before { + z-index: $ms-zIndex-back; + outline: 1px solid transparent; + @include drop-shadow; + } + + &:after { + z-index: $ms-zIndex-front; + } +} + + +//= Modifier: Callout with left and right arrows +// +.ms-Callout.ms-Callout--arrowLeft, +.ms-Callout.ms-Callout--arrowRight { + &:before, + &:after { + top: 40px; + display: none; // Hide left and right arrows on sm screens + } +} + +.ms-Callout.ms-Callout--arrowLeft { + &:before, + &:after { + @include arrowBorders($ms-color-white, transparent, transparent, $ms-color-white); + left: -10px; + } +} + +.ms-Callout.ms-Callout--arrowRight { + &:before, + &:after { + @include arrowBorders(transparent, $ms-color-white, $ms-color-white, transparent); + right: -10px; + } +} + + +//= Modifier: Callout with top and bottom arrows +// +.ms-Callout.ms-Callout--arrowTop, +.ms-Callout.ms-Callout--arrowBottom { + &:before, + &:after { + left: 0; + right: 0; + margin: 0 auto; + width: 0; + } +} + +.ms-Callout.ms-Callout--arrowTop { + &:before, + &:after { + @include arrowBorders($ms-color-white, $ms-color-white, transparent, transparent); + top: -10px; + } +} + +.ms-Callout.ms-Callout--arrowBottom { + &:before, + &:after { + @include arrowBorders(transparent, transparent, $ms-color-white, $ms-color-white); + bottom: -10px; + } +} + +// High contrast mode styling for callout arrows +.ms-Callout.ms-Callout--arrowRight, +.ms-Callout.ms-Callout--arrowLeft, +.ms-Callout.ms-Callout--arrowBottom, +.ms-Callout.ms-Callout--arrowTop { + &:before, + &:after { + @media screen and (-ms-high-contrast: active) { + border: 0; + width: 20px; + height: 20px; + background-color: $ms-color-black; + } + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-white; + } + } +} + +// The actual callout element +.ms-Callout-main { + position: relative; + background-color: $ms-color-white; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: $ms-zIndex-middle; + @include drop-shadow; +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: $ms-font-size-m; + color: $ms-color-neutralSecondary; + z-index: ($ms-zIndex-Callout + $ms-zIndex-front); +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: ($ms-zIndex-Callout + $ms-zIndex-middle); + padding: 18px 24px 12px; +} + +.ms-Callout-title { + margin: 0; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-xl; +} + +.ms-Callout-subText { + margin: 0; + font-family: $ms-font-family-semilight; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; +} + +.ms-Callout-link { + font-size: $ms-font-size-m; + font-family: $ms-font-family-semilight; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; + + .ms-Link.ms-Link--hero { + position: relative; + left: -8px; // Move link inline with body text + } +} + +.ms-Callout-action { + position: relative; + top: 4px; + left: -8px; + margin-left: 0 !important; + + &:hover .ms-Callout-actionIcon, + &:focus .ms-Callout-actionIcon { + color: $ms-color-themePrimary; + } +} + +.ms-Callout-button { + margin-right: 12px; +} + + +//= Modifier: Close button callout +// +.ms-Callout.ms-Callout--close { + .ms-Callout-title { + margin-right: 20px; // Avoid overlap with close button + } +} + + +//= Modifier: OOBE (Out of box experience) callout +// +.ms-Callout.ms-Callout--OOBE { + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowTop { + &:before, + &:after { + border-color: $ms-color-themePrimary; + background-color: transparent; + } + } + + .ms-Callout-header { + padding: 28px 24px; + background-color: $ms-color-themePrimary; + } + + .ms-Callout-title { + font-family: $ms-font-family-light; + font-size: $ms-font-size-xxl; + color: $ms-color-white; + } + + .ms-Callout-inner { + padding-top: 20px; + } + + .ms-Callout-subText { + font-size: $ms-font-size-m; + } +} + + +//= Modifier: ActionText callout +// +.ms-Callout.ms-Callout--actionText { + .ms-Callout-actions { + border-top: 1px solid $ms-color-neutralLight; + margin-bottom: -8px; + } +} + + +//= Modifier: Peek callout +// +.ms-Callout.ms-Callout--peek { + &.ms-Callout--arrowTop, + &.ms-Callout--arrowBottom { + &:before, + &:after { + left: 40px; + right: auto; + } + } + + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft { + &:before, + &:after { + top: calc('50% - 10px'); + } + } + + .ms-Callout-header { + padding-bottom: 0; + } + + .ms-Callout-title { + font-size: $ms-font-size-m; + } + + .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; + } +} + + + +@media (min-width: $ms-screen-md-min) { + // Make width larger and remove centering on md+ screens + .ms-Callout { + width: 300px; + margin: 16px; + } + + // Show arrows right and left + .ms-Callout.ms-Callout--arrowRight, + .ms-Callout.ms-Callout--arrowLeft { + &:before, + &:after { + display: block; + } + } +} diff --git a/dist/components/ChoiceField/ChoiceField.Checkbox.Disabled.html b/dist/components/ChoiceField/ChoiceField.Checkbox.Disabled.html new file mode 100644 index 000000000..4caf32d48 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.Checkbox.Disabled.html @@ -0,0 +1,6 @@ + + +
    + + +
    diff --git a/dist/components/ChoiceField/ChoiceField.Checkbox.Selected.html b/dist/components/ChoiceField/ChoiceField.Checkbox.Selected.html new file mode 100644 index 000000000..de6588afd --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.Checkbox.Selected.html @@ -0,0 +1,6 @@ + + +
    + + +
    diff --git a/dist/components/ChoiceField/ChoiceField.Checkbox.html b/dist/components/ChoiceField/ChoiceField.Checkbox.html new file mode 100644 index 000000000..425608fb4 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.Checkbox.html @@ -0,0 +1,6 @@ + + +
    + + +
    diff --git a/dist/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html b/dist/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html new file mode 100644 index 000000000..aae38e254 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html @@ -0,0 +1,23 @@ + + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    diff --git a/dist/components/ChoiceField/ChoiceField.Disabled.html b/dist/components/ChoiceField/ChoiceField.Disabled.html new file mode 100644 index 000000000..8e1fa8fda --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.Disabled.html @@ -0,0 +1,6 @@ + + +
    + + +
    diff --git a/dist/components/ChoiceField/ChoiceField.Selected.html b/dist/components/ChoiceField/ChoiceField.Selected.html new file mode 100644 index 000000000..4ce0fa154 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.Selected.html @@ -0,0 +1,6 @@ + + +
    + + +
    diff --git a/dist/components/ChoiceField/ChoiceField.css b/dist/components/ChoiceField/ChoiceField.css new file mode 100644 index 000000000..67bbd040f --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.css @@ -0,0 +1,242 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} diff --git a/dist/components/ChoiceField/ChoiceField.html b/dist/components/ChoiceField/ChoiceField.html new file mode 100644 index 000000000..d109d5843 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.html @@ -0,0 +1,6 @@ + + +
    + + +
    diff --git a/dist/components/ChoiceField/ChoiceField.json b/dist/components/ChoiceField/ChoiceField.json new file mode 100644 index 000000000..cd5451a05 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.json @@ -0,0 +1,96 @@ +{ + "name": "ChoiceField", + "notes": "Radio buttons and checkboxes.", + "description": "A set of components that allows users to select one or many of a set number of choices. This takes the form of a Radio button for selection of only 1 choice among many or Checkboxes for multiple selections.", + "class": "ms-ChoiceField", + "dependencies": [ + "Label" + ], + "fileOrder": [ + "ChoiceField.html", + "ChoiceField.Selected.html", + "ChoiceField.Disabled.html", + "ChoiceField.Checkbox.html", + "ChoiceField.Checkbox.Selected.html", + "ChoiceField.Checkbox.Disabled.html", + "ChoiceField.ChoiceFieldGroup.html" + ], + "branches": [ + { + "name": "Radio button", + "default": true, + "branches": [ + { + "name": "Unselected", + "default": true, + "template": "ChoiceField.Radio.Unselected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Selected", + "class": "ms-TextField--underlined", + "template": "ChoiceField.Radio.Selected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] + }, + { + "name": "Checkbox", + "branches": [ + { + "name": "Unselected", + "default": true, + "template": "ChoiceField.Checkbox.Unselected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Selected", + "template": "ChoiceField.Checkbox.Selected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] + }, + { + "name": "Group", + "notes": "Wrap individual ChoiceField components in a ChoiceFieldGroup to create a list.", + "template": "Choicefield.ChoiceFieldGroup.html", + "class": "ms-ChoiceFieldGroup" + } + ] +} diff --git a/dist/components/ChoiceField/ChoiceField.min.css b/dist/components/ChoiceField/ChoiceField.min.css new file mode 100644 index 000000000..1105dfb27 --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px} \ No newline at end of file diff --git a/dist/components/ChoiceField/ChoiceField.scss b/dist/components/ChoiceField/ChoiceField.scss new file mode 100644 index 000000000..3635c0a6b --- /dev/null +++ b/dist/components/ChoiceField/ChoiceField.scss @@ -0,0 +1,198 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Choice fields (radio buttons and checkboxes) styles + + +// Unselected, radio button (default) +.ms-ChoiceField { + @include ms-font-m; + @include ms-u-normalize; + min-height: 36px; + position: relative; + + .ms-Label { + font-size: $ms-font-size-m; + padding: 0 0 0 26px; + } +} + +//== State: Disabled choicefield +.ms-ChoiceField-input:disabled { + + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; + + &:before { + background-color: $ms-color-neutralTertiaryAlt; + color: $ms-color-neutralTertiaryAlt; + } + + &:after { + border-color: $ms-color-neutralLight; + } + + .ms-Label { + color: $ms-color-neutralTertiary; + } + + @media screen and (-ms-high-contrast: active) { + &:before { + background-color: $ms-color-contrastBlackDisabled; + color: $ms-color-contrastBlackDisabled; + } + + &:after { + border-color: $ms-color-contrastBlackDisabled; + } + + .ms-Label { + color: $ms-color-contrastBlackDisabled; + } + } + + @media screen and (-ms-high-contrast: black-on-white) { + &:before { + background-color: $ms-color-contrastWhiteDisabled; + color: $ms-color-contrastWhiteDisabled; + } + + &:after { + border-color: $ms-color-contrastWhiteDisabled; + } + + .ms-Label { + color: $ms-color-contrastWhiteDisabled; + } + } + } +} + +// The original unstyled input element +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; + + &:focus:not(:disabled) { + + .ms-ChoiceField-field:after { + border-color: $ms-color-neutralSecondaryAlt; + } + } +} + +// The choicefield radio button or checkbox +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; + + // The actual styled choicefield element - radio button by default + &:after { + content: ''; + display: inline-block; + border: 1px $ms-color-neutralTertiaryAlt solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; + } + + &:hover { + &:after { + border-color: $ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: $ms-color-black; + } + } +} + +// A selected radio button +.ms-ChoiceField-input:checked { + + .ms-ChoiceField-field { + // Circle indicating a checked radio button + &:before { + background-color: $ms-color-neutralSecondary; + border-color: $ms-color-neutralSecondary; + color: $ms-color-neutralSecondary; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-white; + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-black; + background-color: $ms-color-black; + } + } + + &:hover:before { + background-color: $ms-color-neutralDark; + color: $ms-color-neutralDark; + } + } +} + +// Checkbox +.ms-ChoiceField-input[type="checkbox"] { + + .ms-ChoiceField-field:after { + border-radius: 0; + } +} + +// A selected checkbox +.ms-ChoiceField-input[type="checkbox"]:checked { + + .ms-ChoiceField-field { + &:before { + @include ms-Icon; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: $ms-font-size-s-plus; + top: 3px; + left: 3px; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-white; + border-color: transparent; + background-color: transparent; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-black; + border-color: transparent; + background-color: transparent; + } + } + } +} + + +//== Component: Choicefield group +// +// Choice field groups contain multiple radio buttons or checkboxes +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} diff --git a/dist/components/CommandBar/CommandBar.css b/dist/components/CommandBar/CommandBar.css new file mode 100644 index 000000000..781de3c3f --- /dev/null +++ b/dist/components/CommandBar/CommandBar.css @@ -0,0 +1,664 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: 58px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-mainArea { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-right: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem { + margin-right: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch { + border-right: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch { + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 8px 8px 0; + border: none; + border-left: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch-input { + border-left: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch-input { + border-left: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-right: 40px; + border-left-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-right: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0px 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} diff --git a/dist/components/CommandBar/CommandBar.html b/dist/components/CommandBar/CommandBar.html new file mode 100644 index 000000000..662ced88b --- /dev/null +++ b/dist/components/CommandBar/CommandBar.html @@ -0,0 +1,86 @@ + + +
    +
    + +
    + +
    +
    + +
    +
    +
    +
    +
    + + + Undo + + +
    +
    +
    +
    +
    +
    + + + New + + +
    +
    +
    +
    + + + Delete + +
    +
    +
    +
    + + + Archive + +
    +
    +
    +
    + + Junk + +
    +
    +
    +
    + + Move To + + +
    +
    +
    +
    + + Categories + + +
    +
    + +
    +
    + + + Ellipsis + + +
    +
      +
      + +
      +
      diff --git a/dist/components/CommandBar/CommandBar.json b/dist/components/CommandBar/CommandBar.json new file mode 100644 index 000000000..16120fb39 --- /dev/null +++ b/dist/components/CommandBar/CommandBar.json @@ -0,0 +1,32 @@ +{ + "name": "CommandBar", + "notes": "", + "description": "A commanding surface for panels, pages, and applications. Unlike the {0} NavBar {1}, this component is intended for action and not navigation.", + "accessibilityNotes": + { + "role": "CommandBar", + "narration": "Read all the elements in the dialog on open.", + "keyboard": "Use the TAB key to navigate between elements in the dialog. To exit, use ESC. Trap focus in the dialog until the user dismisses it. The user needs to return to the previous element on close." + }, + "class": "ms-CommandBar", + "dependencies": [ + "ContextualMenu" + ], + "branches": [ + { + "name": "Default", + "default": true, + "template": "CommandBar.html", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Close button", + "class": "ms-Dialog--close" + } + ] + } + ] +} diff --git a/dist/components/CommandBar/CommandBar.min.css b/dist/components/CommandBar/CommandBar.min.css new file mode 100644 index 000000000..77fb1149b --- /dev/null +++ b/dist/components/CommandBar/CommandBar.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:2}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:2}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:2;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7} \ No newline at end of file diff --git a/dist/components/CommandBar/CommandBar.scss b/dist/components/CommandBar/CommandBar.scss new file mode 100644 index 000000000..776ec7ac1 --- /dev/null +++ b/dist/components/CommandBar/CommandBar.scss @@ -0,0 +1,396 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Command Bar styles + +$CommandBar-height: 40px; +$CommandBar-mobileHeight: 48px; +$CommandBar-iconSize: 18px; +$CommandBar-smallLeft: 44px; +$CommandBar-largeLeft: 48px; +$CommandBar-xLargeLeft: 232px; +$CommandBar-sideAreaWidthsm: 128px; +$CommandBar-sideAreaWidthlg: 260px; +$CommandBar-sideAreaWidthxlg: 345px; + +$CommandBarItem-height: $CommandBar-height; +$CommandBarItem-marginTop: 13px; +$CommandBarItem-textHeight: 16px; +$CommandBarItem-iconWidth: 16px; +$CommandBarItem-iconLabelMargin: 8px; +$CommandBarItem-flippedLineHeight: 32px; + + +$SearchBox-height: 40px; +$SearchBox-widthLgCollapsed: 50px; +$SearchBox-widthMdDownCollapsed: 36px; +$SearchBox-widthXLarge: 208px; +$SearchBox-iconSize: 17px; +$SearchBox-sidePadding: 8px; // padding in input on left and right sides without icons +$SearchBox-smallWidth: 36px; +$SearchBox-iconWrapperWidth: $SearchBox-widthLgCollapsed - ($SearchBox-sidePadding * 2); + +@mixin highContrastBorder($color) { + border-left: 1px solid $color; + border-right: 1px solid $color; +} + +.ms-CommandBar { + background-color: $ms-color-themeLighterAlt; + height: $CommandBar-height; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; + + &:focus { + outline: none; + } +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: $SearchBox-widthLgCollapsed + 8; + @media only screen and (min-width: $ms-screen-xl-min) { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; + + .ms-CommandBarItem:last-child { + margin-right: 0; + } + + @media only screen and (min-width: $ms-screen-lg-min) { + min-width: $CommandBar-sideAreaWidthsm; + } + + @media only screen and (min-width: $ms-screen-lg-min) { + padding-right: 12px; + } + + @media only screen and (min-width: $ms-screen-xl-min) { + padding-right: 16px; + } +} + +// Command Bar Item +.ms-CommandBarItem { + display: inline-block; + color: $ms-color-themePrimary; + height: $CommandBarItem-height; + outline: none; + vertical-align: top; + margin-right: -4px; + + .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem-commandText { + display: none; + } + + @media screen and (-ms-high-contrast: active) { + @include highContrastBorder($ms-color-black); + height: 38px; + outline: none; + } + + @media screen and (-ms-high-contrast: black-on-white) { + @include highContrastBorder($ms-color-white); + height: 38px; + outline: none; + } + + &:hover { + background-color: $ms-color-themeLight; + color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + @include highContrastBorder($ms-color-white); + } + + @media screen and (-ms-high-contrast: black-on-white) { + @include highContrastBorder($ms-color-black); + } + } + + // Hide labels and Chevrons SM-MD + @media only screen and (min-width: $ms-screen-lg-min) { + margin-right: 8px; + .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem-commandText { + display: inline; + } + } + +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +//== Modifier: For commands with only an icon +// +.ms-CommandBarItem.icon-only, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly { + .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem-commandText { + display: none; + } +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly { + .ms-CommandBarItem-commandText, + .ms-CommandBarItem-chevronDown { + display: inline; + } +} + +.ms-CommandBarItem-overflow { + display: none; + + &.is-visible { + display: inline-block; + } + + .ms-Icon { + font-size: $ms-font-size-m; + color: $ms-color-neutralSecondary; + } +} + +.ms-CommandBarItem-link { + line-height: $CommandBarItem-height - 1; + padding: 0 6px; + cursor: pointer; + height: $CommandBarItem-height; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; + &:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid $ms-color-neutralTertiary; + content: ''; + } +} + +.ms-CommandBarItem-icon { + font-size: $ms-font-size-l; + color: $ms-color-themePrimary; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: $CommandBarItem-marginTop; + font-size: 1.1em; + line-height: 1em; + color: $ms-color-neutralSecondary; + + &:before { + height: 10px; + line-height: $CommandBarItem-textHeight; + } +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: $ms-color-themeLighter; + color: $ms-color-neutralPrimary; + height: $SearchBox-height; + position: relative; + box-sizing: border-box; + border-color: transparent; // give a base state for animation + + + @media only screen and (max-width: $ms-screen-lg-max) { + overflow: hidden; + width: $SearchBox-widthLgCollapsed; + position: absolute; + } + + transition: $ms-duration1 $ms-ease1; + transition-property: width, background-color; + + @media screen and (-ms-high-contrast: active) { + border-right: 1px solid $ms-color-white; + z-index: 10; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-right: 1px solid $ms-color-black; + } + + &:hover { + background-color: $ms-color-themeLight; + color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + @include highContrastBorder($ms-color-white); + } + + @media screen and (-ms-high-contrast: black-on-white) { + @include highContrastBorder($ms-color-black); + } + } + + .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; + } +} + +.ms-CommandBarSearch-input { + height: $SearchBox-height; + // Due to a bug in IE9, we have to use a transparent left border instead of left padding + padding: $SearchBox-sidePadding $SearchBox-sidePadding $SearchBox-sidePadding 0; + border: none; + border-left: $SearchBox-height + 2 solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: $ms-font-size-m; + + @media screen and (-ms-high-contrast: active) { + border-left: $SearchBox-height solid $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-left: $SearchBox-height solid $ms-color-white; + } + + // remove default iOS styles on input boxes + -webkit-appearance: none; + -webkit-border-radius: 0; + + // hide IE's X button for clearing the input (we have our own) + &::-ms-clear { + display: none; + } + + //Placeholder text styles + &::placeholder { + color: $ms-color-neutralPrimary; + opacity: 1; + font-size: $ms-font-size-m; + } + + //Fixes older firefox issue. + &:placeholder { + color: $ms-color-neutralPrimary; + opacity: 1; + font-size: $ms-font-size-m; + } +} + +// default styles for icons, show the search icon and hide X (and arrow) until focused +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: $ms-zIndex-front; +} + + +//== State: Puts search in an active state +// +.ms-CommandBarSearch.is-active { + background-color: $ms-color-themeLight; + color: $ms-color-black; + + @media only screen and (max-width: $ms-screen-lg-max) { + width: 100%; + position: absolute; + z-index: $ms-zIndex-front; + max-width: 100%; + } + + &:hover { + background-color: $ms-color-themeLight; + color: $ms-color-black; + } + + .ms-CommandBarSearch-input { + cursor: text; + padding-right: $SearchBox-height; // leave room for the X + border-left-width: $SearchBox-sidePadding; + } + + &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: $SearchBox-height; // leave room for arrow + } + + // when focused, remove the search icon and possibly show arrow icon + & .ms-CommandBarSearch-iconSearchWrapper { + display: none; + } + + &.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; + } + + .ms-CommandBarSearch-input { + padding-right: $SearchBox-height; + } + + .ms-CommandBarSearch-iconClearWrapper { + display: block; + } +} + +.ms-CommandBarSearch-iconWrapper { + height: $SearchBox-height; + line-height: $SearchBox-height; + cursor: pointer; + padding: 0px $SearchBox-sidePadding; + position: absolute; + width: $SearchBox-iconWrapperWidth; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: $SearchBox-iconSize; + color: $ms-color-themePrimary; +} + diff --git a/dist/components/ContextualMenu/ContextualMenu.Dividers.html b/dist/components/ContextualMenu/ContextualMenu.Dividers.html new file mode 100644 index 000000000..fe79ee224 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.Dividers.html @@ -0,0 +1,23 @@ + + + diff --git a/dist/components/ContextualMenu/ContextualMenu.Multiselect.html b/dist/components/ContextualMenu/ContextualMenu.Multiselect.html new file mode 100644 index 000000000..de669c095 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.Multiselect.html @@ -0,0 +1,15 @@ + + + diff --git a/dist/components/ContextualMenu/ContextualMenu.SubMenu.html b/dist/components/ContextualMenu/ContextualMenu.SubMenu.html new file mode 100644 index 000000000..61cc77cab --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.SubMenu.html @@ -0,0 +1,20 @@ + + + diff --git a/dist/components/ContextualMenu/ContextualMenu.css b/dist/components/ContextualMenu/ContextualMenu.css new file mode 100644 index 000000000..2c226d7f9 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.css @@ -0,0 +1,267 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} diff --git a/dist/components/ContextualMenu/ContextualMenu.html b/dist/components/ContextualMenu/ContextualMenu.html new file mode 100644 index 000000000..95cc4b21b --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.html @@ -0,0 +1,9 @@ + + + diff --git a/dist/components/ContextualMenu/ContextualMenu.json b/dist/components/ContextualMenu/ContextualMenu.json new file mode 100644 index 000000000..610dbc9c4 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.json @@ -0,0 +1,32 @@ +{ + "name": "ContextualMenu", + "notes": "", + "description": "A hidden menu containing actionable items pertaining to an object such as a link or piece of text that should be invoked by a click or hover event. This menu is used by other components including the {0} CommandBar {1}. Custom JavaScript will be needed to complete the functionality of this component.", + "template": "ContextualMenu.html", + "class": "ms-ContextualMenu", + "fileOrder": [ + "ContextualMenu.html", + "ContextualMenu.SubMenu.html", + "ContextualMenu.Dividers.html", + "ContextualMenu.Multiselect.html" + ], + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Sub menu", + "template": "contextualmenu.submenu.html" + }, + { + "name": "Group", + "template": "contextualmenu.dividers.html" + }, + { + "name": "Multi-select", + "template": "contextualmenu.multiselect.html", + "class": "ms-ContextualMenu--multiselect" + } + ] +} diff --git a/dist/components/ContextualMenu/ContextualMenu.min.css b/dist/components/ContextualMenu/ContextualMenu.min.css new file mode 100644 index 000000000..5a7e8a565 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px} \ No newline at end of file diff --git a/dist/components/ContextualMenu/ContextualMenu.scss b/dist/components/ContextualMenu/ContextualMenu.scss new file mode 100644 index 000000000..799994575 --- /dev/null +++ b/dist/components/ContextualMenu/ContextualMenu.scss @@ -0,0 +1,226 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Contextual Menu styles + +// Mixin for high contrast mode link states +@mixin contextualMenuLinkState { + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; + color: $ms-color-black; + + &:focus { + border-color: $ms-color-black; + } + + + .ms-ContextualMenu-subMenuIcon, + + .ms-ContextualMenu-caretRight { + color: $ms-color-black; + } + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; + color: $ms-color-white; + + + .ms-ContextualMenu-subMenuIcon, + + .ms-ContextualMenu-caretRight { + color: $ms-color-white; + } + } +} + +.ms-ContextualMenu { + @include ms-font-m; + @include ms-u-normalize; + display: none; + + // Hidden by default, then trigger this state to show it. + &.is-open { + @include drop-shadow; + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle); + } +} + +.ms-ContextualMenu-item { + @include ms-u-borderBox; + position: relative; +} + +// Modifier: Menu item Dividers +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: $ms-color-neutralLight; + position: relative; +} + +// Modifier: Menu item Headers +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: $ms-color-themePrimary; + font-size: $ms-font-size-s; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: $ms-color-neutralPrimary; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + } + + // Shorten the first and last items to maintain baseline alignment. + &:first-child, + &:last-child { + height: 39px; + } + + &:hover, + &:active, + &:focus { + background-color: $ms-color-neutralLight; + color: $ms-color-black; + } + + &:hover { + @include contextualMenuLinkState; + } + + &:active { + border: 1px solid $ms-color-themePrimary; + } + + &:focus { + border-color: $ms-color-themePrimary; + outline: 0; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-black; + } + } + + &.is-selected { + background-color: $ms-color-themeLight; + color: $ms-color-black; + font-family: $ms-font-family-semibold; + + &:hover { + background-color: $ms-color-themeLight; + } + + @include contextualMenuLinkState; + } + + &.is-disabled { + color: $ms-color-neutralTertiary; + cursor: default; + pointer-events: none; + + &:active, + &:focus { + border-color: $ms-color-white; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + } + } + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } +} + +// Modifier: Contextual menu with submenu +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; // Move the submenu to the left of the menu item that triggered it +} + +// Right chevron. +// Note: The .ms-ContextualMenu-caretRight class has been deprecated. +// Please use .ms-ContextualMenu-subMenuIcon. +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m-plus + 1; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + + +//== Modifier: Multi-select menu +// +.ms-ContextualMenu.ms-ContextualMenu--multiselect { + + // Align the header with the items + .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; + } + + .ms-ContextualMenu-link { + padding: 0 30px; + + // Multi-select checkmark + &.is-selected { + background-color: $ms-color-white; + + // Checkmark + &:after { + @include ms-Icon; + color: $ms-color-neutralPrimary; + content: '\e041'; + font-size: $ms-font-size-s; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; + } + } + } +} diff --git a/dist/components/DatePicker/DatePicker.css b/dist/components/DatePicker/DatePicker.css new file mode 100644 index 000000000..1a83264a3 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.css @@ -0,0 +1,831 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-DatePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + -webkit-animation-name: fadeIn, slideDownIn10; + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #c7e0f4; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + text-align: center; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0px; + position: absolute; + top: 0px; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: normal; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: normal; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} diff --git a/dist/components/DatePicker/DatePicker.html b/dist/components/DatePicker/DatePicker.html new file mode 100644 index 000000000..4771dc725 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.html @@ -0,0 +1,45 @@ + + + +
      +
      + + + +
      +
      + + +
      +
      + Go to today +
      +
      +
      + + +
      +
      +
      +
      + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
      +
      +
      +
      + + +
      +
      +
      diff --git a/dist/components/DatePicker/DatePicker.json b/dist/components/DatePicker/DatePicker.json new file mode 100644 index 000000000..94f03d2e6 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.json @@ -0,0 +1,18 @@ +{ + "name": "DatePicker", + "notes": "This is a sample Date Picker that works for Gregorian calendars. It uses jQuery and pickadate.js for demonstration.", + "description": "This is a sample Date Picker that works for Gregorian calendars. It uses jQuery and pickadate.js for demonstration purposes.", + "template": "DatePicker.html", + "class": "ms-DatePicker", + "dependencies": [ + "TextField", + "Label", + "Link" + ], + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/dist/components/DatePicker/DatePicker.min.css b/dist/components/DatePicker/DatePicker.min.css new file mode 100644 index 000000000..e9eb34d35 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:3}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:1}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:2}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;line-height:40px;text-align:center;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:1;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}} \ No newline at end of file diff --git a/dist/components/DatePicker/DatePicker.scss b/dist/components/DatePicker/DatePicker.scss new file mode 100644 index 000000000..fab56b101 --- /dev/null +++ b/dist/components/DatePicker/DatePicker.scss @@ -0,0 +1,532 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Date Picker styles + + +.ms-DatePicker { + @include ms-u-normalize; + margin-bottom: 17px; + z-index: $ms-zIndex-DatePicker; + + .ms-TextField{ position: relative; } +} + +// Base wrapper for the date picker. +.ms-DatePicker-picker { + color: $ms-color-black; + font-size: $ms-font-size-m; + position: relative; + text-align: left; + z-index: $ms-zIndex-back; +} + +// Insert a calendar icon over the date field. +.ms-DatePicker-event { + color: $ms-color-neutralSecondary; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: $ms-zIndex-middle; +} + +// The holder is the only "scrollable" top-level container element. +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + @include ms-u-borderBox; + background: $ms-color-white; + position: absolute; + min-width: 300px; + display: none; +} + + +// When the picker opens, reveal the content. +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + @include ms-u-slideDownIn10; + @include ms-u-borderBox; + @include drop-shadow; + border: 1px solid $ms-color-neutralLight; + display: block; +} + +// When a picker opens, always open it in front of other closed pickers +.ms-DatePicker-picker--opened { + position: relative; + z-index: $ms-zIndex-front; +} + + +// The frame and wrap work together to ensure that +// clicks within the picker don’t reach the holder. +.ms-DatePicker-frame { + padding: 1px; +} +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + + +// Wrapper containing the calendar view to pick a specific date. +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + + +// The header containing the month and year. +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + + +// The month and year labels. +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: $ms-font-family-light; + font-size: 21px; + color: $ms-color-themePrimary; + margin-top: -1px; + + &:hover { + color: $ms-color-themeDark; + cursor: pointer; + } +} +.ms-DatePicker-month { + margin-left: 15px; +} +.ms-DatePicker-year { + margin-left: 5px; +} + + +// The calendar table of dates. +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; + + td { + margin: 0; + padding: 0; + + &:hover { outline: 1px solid transparent; } + } +} + + +// The days on the calendar. +.ms-DatePicker-day, .ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: $ms-font-family-regular; + font-size: 15px; + font-weight: normal; + color: $ms-color-neutralPrimary; +} + + +// Today. +.ms-DatePicker-day--today { + position: relative; + background-color: $ms-color-themeLight; +} + + +// Disabled day. +.ms-DatePicker-day--disabled:before { + border-top-color: $ms-color-neutralTertiary; +} + + +// Out of focus days. +.ms-DatePicker-day--outfocus { + color: $ms-color-neutralTertiary; + font-family: $ms-font-family-regular; +} + + +// Hovered date picker items. +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: $ms-color-black; + background: $ms-color-neutralLight; +} + + +// Highlighted and hovered/focused dates. +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: $ms-color-white; + background: $ms-color-themePrimary; +} + + +// Disabled and highlighted dates. +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: $ms-color-neutralTertiary; +} + + +// Month and year pickers, hidden on small screens by default. +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + + +// Month and year previous/next components. +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + text-align: center; + font-size: 21px; + color: $ms-color-neutralSecondary; + position: relative; + top: 3px; + + &:hover { + color: $ms-color-neutralDark; + cursor: pointer; + outline: 1px solid transparent; + } +} + +// Without modifying the Pickadate JS, this transparent +// button is necessary to toggle the month view. +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0px; + position: absolute; + top: 0px; + width: 140px; + z-index: $ms-zIndex-middle; + cursor: pointer; +} + + +// Text showing the currently-selected year. +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: normal; + font-family: $ms-font-family-semilight; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +// The current year is blue and actionable. +.ms-DatePicker-currentYear { + color: $ms-color-themePrimary; + + &:hover { + color: $ms-color-themeDark; + cursor: pointer; + } +} + + +// A grid of month or year options, which pushes them over +// five pixels for horizontal centering and moves them down. +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +// Button to select a different month. +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: $ms-color-neutralLighter; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: normal; + font-family: $ms-font-family-regular; + font-size: 13px; + color: $ms-color-neutralPrimary; + text-align: center; + + &:hover { + background-color: $ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + + &.is-highlighted { + background-color: $ms-color-neutralPrimary; + color: $ms-color-white; + } +} + + +// Button to navigate to the current date. +.ms-DatePicker-goToday { + bottom: 9px; + color: $ms-color-themePrimary; + cursor: pointer; + font-family: $ms-font-family-semilight; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; + + &:hover { + outline: 1px solid transparent; + } +} + +// State: The picker is showing the year components. +.ms-DatePicker.is-pickingYears { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + +} + +// 460px and up. +// +// On screens that can fit it, we show the month picker next to the day picker at all times. +@media (min-width: 460px) { + + .ms-DatePicker-holder { + width: 440px; + } + + + // Update header text styles. + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: $ms-font-family-semilight; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + // Contains the calendar view for picking a day. + .ms-DatePicker-dayPicker { + @include ms-u-borderBox; + border-right: 1px solid $ms-color-neutralLight; + width: 220px; + } + + // Show the month picker. + .ms-DatePicker-monthPicker { + display: block; + } + + + // Swap margin for padding so that the border extends the full height. + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + // Style the the month and year pickers. + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0 0; + } + + // Size the month components to the day picker's new width + .ms-DatePicker-monthComponents { + width: 210px; + } + + // Size and position of the month and year labels. + .ms-DatePicker-month { + margin-left: 12px; + } + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: $ms-color-neutralPrimary; + + &:hover { + color: $ms-color-neutralPrimary; + cursor: default; + } + } + + + // Calendar day cells are smaller. + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: $ms-font-family-semibold; + font-size: 12px; + } + + + // Reduce the size of arrows to change month/year. + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + + // This component is only used on small displays. + .ms-DatePicker-toggleMonthView { + display: none; + } + + + // Position the current year and decade labels. + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + + // Reduce the size of the month buttons. + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + + &:hover { + outline: 1px solid transparent; + } + } + + + // Position the "Go to today" button below the month picker. + .ms-DatePicker-goToday { + @include ms-u-borderBox; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + // State: The picker is showing the year components. + // On larger screens the calendar will remain and the years + // will replace the months. + .ms-DatePicker.is-pickingYears { + + // On large screens, we need to keep the day picker + // and month components in view. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: block; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + } +} + +// On smaller screens the month button toggles to the picking months state. +@media (max-width: 459px) { + + // State: The picker is showing the month components. + .ms-DatePicker.is-pickingMonths { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Show the month picking components. + .ms-DatePicker-monthPicker { + display: block; + } + } +} diff --git a/dist/components/Dialog/Dialog.Blocking.html b/dist/components/Dialog/Dialog.Blocking.html new file mode 100644 index 000000000..4e5cae881 --- /dev/null +++ b/dist/components/Dialog/Dialog.Blocking.html @@ -0,0 +1,34 @@ + + + + +
      +
      +
      + +
      +

      Unsaved changes

      +
      +
      +
      +

      Are you sure you want to discard these changes?

      +
      +
      +
      + + +
      +
      +
      +
      +
      diff --git a/dist/components/Dialog/Dialog.Close.html b/dist/components/Dialog/Dialog.Close.html new file mode 100644 index 000000000..dc5254bc5 --- /dev/null +++ b/dist/components/Dialog/Dialog.Close.html @@ -0,0 +1,42 @@ + + + + +
      +
      +
      + +
      +

      All emails together

      +
      +
      +
      +

      Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

      +
      + + +
      +
      + + +
      +
      +
      +
      + + +
      +
      +
      +
      +
      diff --git a/dist/components/Dialog/Dialog.LgHeader.html b/dist/components/Dialog/Dialog.LgHeader.html new file mode 100644 index 000000000..7e8f7299b --- /dev/null +++ b/dist/components/Dialog/Dialog.LgHeader.html @@ -0,0 +1,34 @@ + + + + +
      +
      +
      + +
      +

      All emails together now

      +
      +
      +
      +

      Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

      +
      +
      +
      + + +
      +
      +
      +
      +
      diff --git a/dist/components/Dialog/Dialog.Multiline.html b/dist/components/Dialog/Dialog.Multiline.html new file mode 100644 index 000000000..8144858db --- /dev/null +++ b/dist/components/Dialog/Dialog.Multiline.html @@ -0,0 +1,38 @@ + + + + +
      +
      +
      + +
      +

      Create account

      +
      +
      +
      + + + +
      +
      +
      +
      diff --git a/dist/components/Dialog/Dialog.css b/dist/components/Dialog/Dialog.css new file mode 100644 index 000000000..4bcc46e26 --- /dev/null +++ b/dist/components/Dialog/Dialog.css @@ -0,0 +1,693 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 300; + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.ms-Dialog::before { + vertical-align: middle; + display: inline-block; + content: ''; + height: 100%; + width: 0; +} + +.ms-Dialog .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; +} + +.ms-Dialog .ms-Overlay { + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dialog .ms-Overlay { + opacity: 0; + } +} + +.ms-Dialog-main { + vertical-align: middle; + display: inline-block; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: left; + outline: 3px solid transparent; +} + +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + right: 12px; + padding: 8px; + z-index: 10; +} + +.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x { + color: #666666; + font-size: 16px; +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Dialog-content { + position: relative; + width: 100%; +} + +.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog-subText { + margin: 0 0 20px 0; + padding-top: 8px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; +} + +.ms-Dialog-actions .ms-Button { + line-height: normal; +} + +.ms-Dialog-actionsRight { + text-align: right; + font-size: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action:first-child { + margin: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action { + margin: 0 0 0 16px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close { + display: block; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner { + padding: 0 20px 20px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header { + background-color: #0078d7; + padding: 26px 20px 28px; + margin-bottom: 8px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + font-size: 28px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #ffffff; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText { + font-size: 14px; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} diff --git a/dist/components/Dialog/Dialog.html b/dist/components/Dialog/Dialog.html new file mode 100644 index 000000000..118e52a6f --- /dev/null +++ b/dist/components/Dialog/Dialog.html @@ -0,0 +1,42 @@ + + + + +
      +
      +
      + +
      +

      All emails together

      +
      +
      +
      +

      Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

      +
      + + +
      +
      + + +
      +
      +
      +
      + + +
      +
      +
      +
      +
      diff --git a/dist/components/Dialog/Dialog.json b/dist/components/Dialog/Dialog.json new file mode 100644 index 000000000..a51926623 --- /dev/null +++ b/dist/components/Dialog/Dialog.json @@ -0,0 +1,67 @@ +{ + "name": "Dialog", + "notes": "", + "description": "A popup box component that animates in over an application. It is primarily used for confirmation tasks, light-weight creation/edit tasks, and simple management tasks. Dialog has several variants including closeable, large header, multiline button, and blocking. Blocking or modal dialogs do not allow for a light dismiss (clicking/tapping outside the dialog box) and should be used when a user's explicit answer is required for them to proceed such as confirming the deletion of data.", + "accessibilityNotes": + { + "role": "Dialog", + "narration": "Read all the elements in the dialog on open.", + "keyboard": "Use the TAB key to navigate between elements in the dialog. To exit, use ESC. Trap focus in the dialog until the user dismisses it. The user needs to return to the previous element on close." + }, + "class": "ms-Dialog", + "wrapBranches": true, + "fileOrder": [ + "Dialog.html", + "Dialog.Close.html", + "Dialog.LgHeader.html", + "Dialog.Multiline.html", + "Dialog.Blocking.html" + ], + "dependencies": [ + "Button", + "ChoiceField", + "Overlay" + ], + "branches": [ + { + "name": "Default", + "default": true, + "template": "Dialog.html", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Close button", + "class": "ms-Dialog--close" + } + ] + }, + { + "name": "Multiline Button", + "class": "ms-Dialog--multiline", + "template": "Dialog.Multiline.html", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Close button", + "class": "ms-Dialog--close" + } + ] + }, + { + "name": "Large Header", + "class": "ms-Dialog--lgHeader", + "template": "Dialog.LgHeader.html" + }, + { + "name": "Blocking", + "class": "ms-Dialog--blocking", + "template": "Dialog.Blocking.html" + } + ] +} diff --git a/dist/components/Dialog/Dialog.min.css b/dist/components/Dialog/Dialog.min.css new file mode 100644 index 000000000..2216bdf5f --- /dev/null +++ b/dist/components/Dialog/Dialog.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:3;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:1}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}} \ No newline at end of file diff --git a/dist/components/Dialog/Dialog.scss b/dist/components/Dialog/Dialog.scss new file mode 100644 index 000000000..db2cb5ce7 --- /dev/null +++ b/dist/components/Dialog/Dialog.scss @@ -0,0 +1,211 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Dialog styles + + +// Mixin for IE9 specific styles +@mixin dialogPositioningIE9Fallback { + vertical-align: middle; + display: inline-block; +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: $ms-zIndex-Dialog; + + // Fallback for IE9 + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + + // Flexbox for Modern Browsers + @include flexBox(); + @include alignItems(center); + + &::before { + @include dialogPositioningIE9Fallback(); + content: ""; + height: 100%; + width: 0; + } + + .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; + } + + .ms-Overlay { + z-index: $ms-zIndex-back; + + @media screen and (-ms-high-contrast: active) { + opacity: 0; + } + } +} + +// The actual dialog element +.ms-Dialog-main { + @include dialogPositioningIE9Fallback(); + @include drop-shadow(); + background-color: $ms-color-white; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: left; + outline: 3px solid transparent; +} + +// Close button, hidden by default +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + right: 12px; + padding: 8px; + z-index: $ms-zIndex-front; + + .ms-Icon.ms-Icon--x { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m + 2; + } +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: $ms-font-family-light; + font-size: $ms-font-size-xl; +} + +.ms-Dialog-content { + position: relative; + width: 100%; + + // Add margin bottom between compound buttons + .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; + } +} + +.ms-Dialog-subText { + margin: 0 0 20px 0; + padding-top: 8px; + font-family: $ms-font-family-semilight; + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-s; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; + + .ms-Button { + line-height: normal; + } +} + +.ms-Dialog-actionsRight { + text-align: right; + font-size: 0; + + // Reset spacing for first button + .ms-Dialog-action:first-child { + margin: 0; + } + + // Spacing between bottom buttons + .ms-Dialog-action + .ms-Dialog-action { + margin: 0 0 0 16px; + } +} + + +//= Modifier: Dialog with close button +// +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) { + // Push the right side over so the icon doesn't overlap the text + .ms-Dialog-title { + margin-right: 20px; + } + + // Show the close button + .ms-Dialog-button.ms-Dialog-button--close { + display: block; + } +} + + +//= Modifier: Multiline button dialog +// +.ms-Dialog.ms-Dialog--multiline { + .ms-Dialog-title { + font-size: $ms-font-size-xxl; + } + + .ms-Dialog-inner { + padding: 0 20px 20px; + } +} + + +//= Modifier: Large header dialog +// +.ms-Dialog.ms-Dialog--lgHeader { + .ms-Dialog-header { + background-color: $ms-color-themePrimary; + padding: 26px 20px 28px; + margin-bottom: 8px; + } + + .ms-Dialog-title { + font-size: $ms-font-size-xxl; + font-family: $ms-font-family-light; + color: $ms-color-white; + } + + .ms-Dialog-subText { + font-size: $ms-font-size-m; + } +} + + + +@media (min-width: $ms-screen-md-min) { + // Allow wider dialog on larger screens + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} diff --git a/dist/components/Dropdown/Dropdown.Disabled.html b/dist/components/Dropdown/Dropdown.Disabled.html new file mode 100644 index 000000000..cb892a4b9 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.Disabled.html @@ -0,0 +1,13 @@ + + +
      + + + +
      diff --git a/dist/components/Dropdown/Dropdown.css b/dist/components/Dropdown/Dropdown.css new file mode 100644 index 000000000..111afeece --- /dev/null +++ b/dist/components/Dropdown/Dropdown.css @@ -0,0 +1,329 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Dropdown { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: fixed; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + max-width: 268px; + z-index: 400; + top: 0; + right: 0; + bottom: 0; + overflow-y: scroll; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +@media (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} diff --git a/dist/components/Dropdown/Dropdown.html b/dist/components/Dropdown/Dropdown.html new file mode 100644 index 000000000..e57e63461 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.html @@ -0,0 +1,13 @@ + + +
      + + + +
      \ No newline at end of file diff --git a/dist/components/Dropdown/Dropdown.json b/dist/components/Dropdown/Dropdown.json new file mode 100644 index 000000000..e5ed89558 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.json @@ -0,0 +1,27 @@ +{ + "name": "Dropdown", + "notes": "", + "description": "The styling for a dropdown component and its disabled variant. This dropdown takes current items in a real HTML dropdown and creates a shimmed version that can be styled and selected.", + "template": "Dropdown.html", + "class": "ms-Dropdown", + "dependencies": [ + "Label" + ], + "fileOrder": [ + "Dropdown.html", + "Dropdown.Disabled.html" + ], + "dependencies": [ + "Label" + ], + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] +} diff --git a/dist/components/Dropdown/Dropdown.min.css b/dist/components/Dropdown/Dropdown.min.css new file mode 100644 index 000000000..cd404bc55 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}} \ No newline at end of file diff --git a/dist/components/Dropdown/Dropdown.scss b/dist/components/Dropdown/Dropdown.scss new file mode 100644 index 000000000..fefc88252 --- /dev/null +++ b/dist/components/Dropdown/Dropdown.scss @@ -0,0 +1,245 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Dropdown styles + +// Mixin for high contrast mode link states +@mixin highContrastListItemState { + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + border-color: $ms-color-contrastBlackSelected; + color: $ms-color-black; + + &:focus { + border-color: $ms-color-black; + } + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + border-color: $ms-color-contrastWhiteSelected; + color: $ms-color-white; + } +} + +.ms-Dropdown { + @include ms-font-m; + @include ms-u-normalize; + margin-bottom: 10px; + position: relative; + outline: 0; + + &:hover, + &:focus, + &:active { + .ms-Dropdown-title, + .ms-Dropdown-caretDown { + color: $ms-color-black; + } + } + + &:hover, + &:active { + .ms-Dropdown-title { + border-color: $ms-color-neutralSecondaryAlt; + } + } + + &:focus { + .ms-Dropdown-title { + border-color: $ms-color-themePrimary; + } + } + + .ms-Label { + display: inline-block; + margin-bottom: 8px; + } +} + +//== State: A disabled dropdown +.ms-Dropdown.is-disabled { + .ms-Dropdown-title { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + color: $ms-color-neutralTertiary; + cursor: default; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + color: $ms-color-contrastWhiteDisabled; + } + } + + .ms-Dropdown-caretDown { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } + } +} + +// When the dropdown is opened +// Note: .ms-Dropdown--open is deprecated and will be removed in a future version. +// Use .is-open for an open dropdown. +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: fixed; +} + +// Hide the original dropdown +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-l; + position: absolute; + right: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +// Style the new, replacement component +.ms-Dropdown-title { + @include ms-u-normalize; + background: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: hidden; +} + +// Container for the dropdown items, displayed as a panel on small screens. +.ms-Dropdown-items { + @include ms-u-normalize; + @include drop-shadow; + background-color: $ms-color-white; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + max-width: 268px; + z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back); + top: 0; + right: 0; + bottom: 0; + overflow-y: scroll; + + &:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid $ms-color-neutralLight; + } + + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-white; + } + + // Shorten the first and last items to maintain baseline alignment. + &:first-child, + &:last-child { + height: 39px; + } + + &:hover { + background-color: $ms-color-neutralLight; + color: $ms-color-black; + + @include highContrastListItemState; + } + + &:active { + background-color: $ms-color-neutralLight; + border-color: $ms-color-themePrimary; + color: $ms-color-black; + } + + &.is-disabled { + background: $ms-color-white; + color: $ms-color-neutralTertiary; + cursor: default; + line-height: 40px; + } +} + +//== State: A selected dropdown item +// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version. +// Use .is-selected instead. +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: $ms-color-themeLight; + color: $ms-color-black; + line-height: 40px; + + &:hover { + background-color: $ms-color-themeLight; + } + + @include highContrastListItemState; +} + +@media (min-width: $ms-screen-md-min) { + // On larger screens, display as a traditional dropdown. + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} diff --git a/dist/components/Facepile/Facepile.css b/dist/components/Facepile/Facepile.css new file mode 100644 index 000000000..4f9baf0f7 --- /dev/null +++ b/dist/components/Facepile/Facepile.css @@ -0,0 +1,2208 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width: 480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-left: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 48px; + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + left: auto; + width: 643px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + left: 428px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + left: auto; + width: 940px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; +} + +.ms-Panel.is-open .ms-Overlay { + display: block; + pointer-events: auto; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width: 480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width: 480px) and (-ms-high-contrast: active) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 250ms; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:before, +.ms-PeoplePicker-searchBox:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: left; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} + +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Facepile { + position: relative; + height: 32px; + width: auto; +} + +.ms-Facepile .ms-PersonaCard { + display: none; + position: absolute; + top: 40px; + height: 200px; +} + +.ms-Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-Facepile-itemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-Facepile-itemBtn .ms-Persona-presence, +.ms-Facepile-itemBtn .ms-Persona-details { + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover, +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus { + background-color: #005a9e; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active { + background-color: #004578; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active { + display: block; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover { + color: #212121; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled { + color: #c8c8c8; +} + +.ms-Facepile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-Facepile-overflowText { + font-size: 14px; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} diff --git a/dist/components/Facepile/Facepile.html b/dist/components/Facepile/Facepile.html new file mode 100644 index 000000000..a68cdf6ce --- /dev/null +++ b/dist/components/Facepile/Facepile.html @@ -0,0 +1,241 @@ + + +
      + +
      +
      +
      +
      +
      AL
      + Persona image +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      +
      +
      +
      +
      +
      +
      DF
      +
      +
      +
      +
      Douglas Fielder
      +
      Public Relations
      +
      +
      +
      +
      +
      +
      +
      ML
      +
      +
      +
      +
      Marcus Lauer
      +
      Technical Support
      +
      +
      +
      +
      + +
      + @@include('../PersonaCard/PersonaCard.html') +
      +
      + + +
      +
      +
      +
      + +
      +
      +

      Members

      +
      +
      + +
      + +
      +
      + Suggested contacts +
      +
        +
      • +
        +
        +
        +
        RM
        +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        DF
        +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        JF
        +
        +
        +
        +
        Jessica Fischer
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        MG
        +
        +
        +
        +
        Marcel Groce
        +
        Marketing
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        GS
        +
        +
        +
        +
        Grant Steel
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        HW
        +
        +
        +
        +
        Harvey Wallin
        +
        Delivery
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        ML
        +
        +
        +
        +
        Marcus Lauer
        +
        Marketing
        +
        +
        +
        +
        • +
      +
      +
      +
      + +
      +
      Search Contacts & Directory
      +
      +
      +
      + +
      +
      + 3 members +
      +
        +
      • +
        +
        +
        AL
        + Persona image +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        + +
        • +
      • +
        +
        +
        DF
        +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        + +
        • +
      • +
        +
        +
        ML
        +
        +
        +
        +
        Marcus Lauer
        +
        Technical Support
        +
        +
        + +
        • +
      +
      +
      + @@include('../PersonaCard/PersonaCard.html') +
      +
      +
      +
      +
      + + + + diff --git a/dist/components/Facepile/Facepile.json b/dist/components/Facepile/Facepile.json new file mode 100644 index 000000000..38863940d --- /dev/null +++ b/dist/components/Facepile/Facepile.json @@ -0,0 +1,15 @@ +{ + "name": "Facepile", + "notes": "", + "template": "Facepile.html", + "class": "ms-Facepile", + "dependencies": [ + "Overlay", + "Link", + "Panel", + "PeoplePicker", + "Persona", + "PersonaCard", + "Spinner" + ] +} diff --git a/dist/components/Facepile/Facepile.min.css b/dist/components/Facepile/Facepile.min.css new file mode 100644 index 000000000..d7194e5a2 --- /dev/null +++ b/dist/components/Facepile/Facepile.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:4}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-Facepile-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled{color:#c8c8c8}.ms-Facepile-addPersonIcon{position:relative;top:-1px}.ms-Facepile-overflowText{font-size:14px}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none} \ No newline at end of file diff --git a/dist/components/Facepile/Facepile.scss b/dist/components/Facepile/Facepile.scss new file mode 100644 index 000000000..1588cac08 --- /dev/null +++ b/dist/components/Facepile/Facepile.scss @@ -0,0 +1,110 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Facepile styles + + +.ms-Facepile { + position: relative; + height: 32px; + width: auto; + + .ms-PersonaCard { + display: none; + position: absolute; + top: 40px; + height: 200px; + + &.is-active { + display: block; + } + } +} + +.ms-Facepile-itemBtn { + @include button-reset(); + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; + + .ms-Persona-presence, + .ms-Persona-details { + display: none; + } +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-size: $ms-font-size-l - 1; + + &:hover, + &:focus { + background-color: $ms-color-themeDark; + } + + &:active { + background-color: $ms-color-themeDarker; + } + + &:disabled { + background-color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralSecondary; + display: none; + + &.is-active { + display: block; + } + + &:hover { + color: $ms-color-neutralDark; + } + + &:disabled { + color: $ms-color-neutralTertiaryAlt; + } +} + +.ms-Facepile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-Facepile-overflowText { + font-size: $ms-font-size-m; +} + +//== Panels +// Overflow panel - only show member list +.ms-Facepile-panel.ms-Facepile-panel--overflow { + .ms-Panel-headerText, + .ms-PeoplePicker-searchBox, + .ms-PeoplePicker-results, + .ms-PeoplePicker-resultAction { + display: none; + } + + .ms-PeoplePicker-selectedHeader { + font-family: $ms-font-family-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + line-height: 82px; + height: 74px; + text-transform: none; + } +} diff --git a/dist/components/Label/Label.Disabled.html b/dist/components/Label/Label.Disabled.html new file mode 100644 index 000000000..9102c26dd --- /dev/null +++ b/dist/components/Label/Label.Disabled.html @@ -0,0 +1,3 @@ + + + diff --git a/dist/components/Label/Label.Required.html b/dist/components/Label/Label.Required.html new file mode 100644 index 000000000..7a6950daa --- /dev/null +++ b/dist/components/Label/Label.Required.html @@ -0,0 +1,3 @@ + + + diff --git a/dist/components/Label/Label.css b/dist/components/Label/Label.css new file mode 100644 index 000000000..e1fc52b41 --- /dev/null +++ b/dist/components/Label/Label.css @@ -0,0 +1,59 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} diff --git a/dist/components/Label/Label.html b/dist/components/Label/Label.html new file mode 100644 index 000000000..d6da21faf --- /dev/null +++ b/dist/components/Label/Label.html @@ -0,0 +1,5 @@ + + + diff --git a/dist/components/Label/Label.json b/dist/components/Label/Label.json new file mode 100644 index 000000000..06abb0cb3 --- /dev/null +++ b/dist/components/Label/Label.json @@ -0,0 +1,27 @@ +{ + "name": "Label", + "notes": "A standard form label.", + "descripton": "Styling for form labels including the required and disabled variants.", + "template": "Label.html", + "class": "ms-Label", + "wrapBranches": true, + "fileOrder": [ + "Label.html", + "Label.Disabled.html", + "Label.Required.html" + ], + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] +} diff --git a/dist/components/Label/Label.min.css b/dist/components/Label/Label.min.css new file mode 100644 index 000000000..a1d91feee --- /dev/null +++ b/dist/components/Label/Label.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}} \ No newline at end of file diff --git a/dist/components/Label/Label.scss b/dist/components/Label/Label.scss new file mode 100644 index 000000000..75721859e --- /dev/null +++ b/dist/components/Label/Label.scss @@ -0,0 +1,48 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Form field label styles + +@mixin ms-Label-is-disabled { + color: $ms-color-neutralTertiary; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteDisabled; + } +} + +@mixin ms-Label-is-required { + &:after { + content: ' *'; + color: $ms-color-error; + } +} + + +.ms-Label { + @include ms-font-s; + @include ms-u-normalize; + box-sizing: border-box; + display: block; + padding: 5px 0; + + &.is-required { + @include ms-Label-is-required; + } + + &.is-disabled { + @include ms-Label-is-disabled; + } +} + +.is-disabled { + .ms-Label { + @include ms-Label-is-disabled; + } +} diff --git a/dist/components/Link/Link.css b/dist/components/Link/Link.css new file mode 100644 index 000000000..dd43a20f4 --- /dev/null +++ b/dist/components/Link/Link.css @@ -0,0 +1,35 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} diff --git a/dist/components/Link/Link.html b/dist/components/Link/Link.html new file mode 100644 index 000000000..c5bf39384 --- /dev/null +++ b/dist/components/Link/Link.html @@ -0,0 +1,6 @@ + + +

      You can add links to any text

      +

      + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisl sed dolor consectetur, vitae hendrerit nulla ullamcorper. Sed quis massa mi. Etiam sed ullamcorper est. Phasellus sodales tempus sapien et tristique. Praesent non mauris sem. Aliquam leo elit, molestie sed eros ac, sodales mattis metus. Cras imperdiet est vel quam faucibus posuere. Praesent quis felis mattis, dapibus nibh ut, porttitor dui. Curabitur in eleifend tortor, vel fermentum enim. Etiam blandit quam neque, quis pretium lorem finibus pharetra. Aliquam a placerat arcu. Sed at nibh et nulla ullamcorper pharetra ac ac tortor. Nullam arcu justo, vulputate et efficitur ut, finibus sit amet leo. Phasellus non sem id sapien gravida sodales et at leo. +

      diff --git a/dist/components/Link/Link.json b/dist/components/Link/Link.json new file mode 100644 index 000000000..c9b3aa17f --- /dev/null +++ b/dist/components/Link/Link.json @@ -0,0 +1,13 @@ +{ + "name": "Link", + "notes": "", + "description": "A component containing styles for links including two variants.", + "template": "Link.html", + "class": "ms-Link", + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/dist/components/Link/Link.min.css b/dist/components/Link/Link.min.css new file mode 100644 index 000000000..3037cf1ce --- /dev/null +++ b/dist/components/Link/Link.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}} \ No newline at end of file diff --git a/dist/components/Link/Link.scss b/dist/components/Link/Link.scss new file mode 100644 index 000000000..6cb1c1948 --- /dev/null +++ b/dist/components/Link/Link.scss @@ -0,0 +1,34 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Link (anchor) styles + + +@mixin ms-Link { + color: $ms-color-themePrimary; + text-decoration: none; + cursor: pointer; + + &:hover, + &:focus { + color: $ms-color-themeDarker; + } + + &:active { + color: $ms-color-themePrimary; + } + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackLink; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteLink; + } +} + +.ms-Link { + @include ms-Link; +} diff --git a/dist/components/List/List.Grid.html b/dist/components/List/List.Grid.html new file mode 100644 index 000000000..d7f17cfbb --- /dev/null +++ b/dist/components/List/List.Grid.html @@ -0,0 +1,106 @@ + diff --git a/dist/components/List/List.css b/dist/components/List/List.css new file mode 100644 index 000000000..682f359a2 --- /dev/null +++ b/dist/components/List/List.css @@ -0,0 +1,268 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} diff --git a/dist/components/List/List.html b/dist/components/List/List.html new file mode 100644 index 000000000..69116fe77 --- /dev/null +++ b/dist/components/List/List.html @@ -0,0 +1,108 @@ + + + diff --git a/dist/components/List/List.json b/dist/components/List/List.json new file mode 100644 index 000000000..2174dfd8f --- /dev/null +++ b/dist/components/List/List.json @@ -0,0 +1,25 @@ +{ + "name": "List", + "notes": "", + "description": "A component for displaying lists that need actions, icons, and additional descriptive information. There are two variants for List including the Default List and Grid List. Lists contain {0} ListItems {1} that have their own set of variants.", + "template": "List.html", + "class": "ms-List", + "wrapBranches": true, + "fileOrder": [ + "List.html", + "List.Grid.html" + ], + "dependencies": [ + "ListItem" + ], + "branches": [ + { + "name": "Basic", + "default": true + }, + { + "name": "Grid", + "class": "ms-List--grid" + } + ] +} diff --git a/dist/components/List/List.min.css b/dist/components/List/List.min.css new file mode 100644 index 000000000..80d4ad757 --- /dev/null +++ b/dist/components/List/List.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-List,.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-List{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}} \ No newline at end of file diff --git a/dist/components/List/List.scss b/dist/components/List/List.scss new file mode 100644 index 000000000..dfc9096b1 --- /dev/null +++ b/dist/components/List/List.scss @@ -0,0 +1,31 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// List and Grid styles + + +.ms-List { + @include ms-font-m; + @include ms-u-normalize; + list-style-type: none; +} + + +//== Modifier: List rendered as a grid +// +.ms-List.ms-List--grid { + @media (min-width: $ms-screen-md-min) { + .ms-ListItem { + @include ms-u-sm4; + float: left; + border-width: 0 1px 1px 0; + } + + // Remove the border from the last column. + .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } + } +} diff --git a/dist/components/ListItem/ListItem.Document.html b/dist/components/ListItem/ListItem.Document.html new file mode 100644 index 000000000..a4e5e0d5d --- /dev/null +++ b/dist/components/ListItem/ListItem.Document.html @@ -0,0 +1,9 @@ + + + diff --git a/dist/components/ListItem/ListItem.Image.html b/dist/components/ListItem/ListItem.Image.html new file mode 100644 index 000000000..109c11852 --- /dev/null +++ b/dist/components/ListItem/ListItem.Image.html @@ -0,0 +1,18 @@ + + + diff --git a/dist/components/ListItem/ListItem.Selectable.html b/dist/components/ListItem/ListItem.Selectable.html new file mode 100644 index 000000000..4f863b987 --- /dev/null +++ b/dist/components/ListItem/ListItem.Selectable.html @@ -0,0 +1,17 @@ + + + diff --git a/dist/components/ListItem/ListItem.Selected.html b/dist/components/ListItem/ListItem.Selected.html new file mode 100644 index 000000000..6df5653dc --- /dev/null +++ b/dist/components/ListItem/ListItem.Selected.html @@ -0,0 +1,17 @@ + + + diff --git a/dist/components/ListItem/ListItem.Unread.html b/dist/components/ListItem/ListItem.Unread.html new file mode 100644 index 000000000..d410974df --- /dev/null +++ b/dist/components/ListItem/ListItem.Unread.html @@ -0,0 +1,17 @@ + + + diff --git a/dist/components/ListItem/ListItem.Unseen.html b/dist/components/ListItem/ListItem.Unseen.html new file mode 100644 index 000000000..f93532ac5 --- /dev/null +++ b/dist/components/ListItem/ListItem.Unseen.html @@ -0,0 +1,17 @@ + + + diff --git a/dist/components/ListItem/ListItem.css b/dist/components/ListItem/ListItem.css new file mode 100644 index 000000000..ce9cefd5b --- /dev/null +++ b/dist/components/ListItem/ListItem.css @@ -0,0 +1,268 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} diff --git a/dist/components/ListItem/ListItem.html b/dist/components/ListItem/ListItem.html new file mode 100644 index 000000000..4fd7cd35c --- /dev/null +++ b/dist/components/ListItem/ListItem.html @@ -0,0 +1,17 @@ + + + diff --git a/dist/components/ListItem/ListItem.json b/dist/components/ListItem/ListItem.json new file mode 100644 index 000000000..d5c439e3e --- /dev/null +++ b/dist/components/ListItem/ListItem.json @@ -0,0 +1,46 @@ +{ + "name": "ListItem", + "notes": "", + "description": "List item variants that are placed inside of the {0} List {1} component. List variants support several states including Selectable, Selected, Unseen, Picture, Picture, and Document.", + "template": "ListItem.html", + "class": "ms-ListItem", + "fileOrder": [ + "ListItem.html", + "ListItem.Selectable.html", + "ListItem.Selected.html", + "ListItem.Unseen.html", + "ListItem.Unread.html", + "ListItem.Image.html", + "ListItem.Document.html" + ], + "dependencies": [ + "List" + ], + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "With image", + "template": "ListItem.Image.html" + }, + { + "name": "Unread", + "class": "is-unread" + }, + { + "name": "Unseen", + "class": "is-unseen" + }, + { + "name": "Selectable", + "class": "is-selectable" + }, + { + "name": "Document", + "template": "ListItem.Document.html", + "class": "ms-ListItem--document" + } + ] +} diff --git a/dist/components/ListItem/ListItem.min.css b/dist/components/ListItem/ListItem.min.css new file mode 100644 index 000000000..e8dca4dfb --- /dev/null +++ b/dist/components/ListItem/ListItem.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px} \ No newline at end of file diff --git a/dist/components/ListItem/ListItem.scss b/dist/components/ListItem/ListItem.scss new file mode 100644 index 000000000..d5b76a1a6 --- /dev/null +++ b/dist/components/ListItem/ListItem.scss @@ -0,0 +1,230 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// List item styles + + +.ms-ListItem { + @include ms-font-m; + @include ms-u-normalize; + @include ms-u-clearfix; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + @include noWrap; + display: block; +} + +.ms-ListItem-primaryText { + color: $ms-color-neutralDark; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-xl; + padding-right: 80px; // Prevent overlap with up to three actions. + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-m; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: $ms-color-neutralSecondaryAlt; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-m; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-xs; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; // Images sit closer to the edge than text. + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; // Up to three actions. + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: $ms-color-neutralTertiary; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; + + .ms-Icon { + vertical-align: top; + } + + &:hover { + color: $ms-color-neutralSecondary; + outline: 1px solid transparent; + } +} + + +//== State: Unread list item +// +.ms-ListItem.is-unread { + border-left: 3px solid $ms-color-themePrimary; + padding-left: 27px; // Reduce padding to allow room for border. + + .ms-ListItem-secondaryText, .ms-ListItem-metaText { + color: $ms-color-themePrimary; + font-family: $ms-font-family-semibold; + } +} + + +//== State: Unseen list item +// +.ms-ListItem.is-unseen { + &:after { + border-right: 10px solid transparent; + border-top: 10px solid $ms-color-themePrimary; + left: 0; + position: absolute; + top: 0; + } +} + + +//== State: Selectable list item +// +.ms-ListItem.is-selectable { + .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; + } + + .ms-ListItem-image { + margin-left: 0; + } + + &:hover { + background-color: $ms-color-neutralLight; + cursor: pointer; + outline: 1px solid transparent; + + // Insert the empty box. + &:before { + @include ms-Icon; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid $ms-color-neutralSecondaryAlt; + } + } +} + + +//== State: Selected list item +// +.ms-ListItem.is-selected { + // Insert the checkmark. + &:before { + border: 1px solid transparent; + } + + &:before, + &:hover:before { + @include ms-Icon; + content: '\e041'; + font-size: $ms-font-size-m-plus; + color: $ms-color-neutralSecondaryAlt; + position: absolute; + top: 12px; + left: 6px; + } + + &:hover { + background-color: $ms-color-themeLight; + outline: 1px solid transparent; + } +} + + +//== Modifier: Document list item +// +.ms-ListItem.ms-ListItem--document { + padding: 0; + + // The icon for a file or folder in the items list. This may + // be an .ms-Icon or a specific modifier that loads an image. + .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; + } + + // If the item icon is an .ms-Icon, position and color it appropriately. + .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: $ms-color-neutralSecondary; + } + + // Primary text, typically the name. + .ms-ListItem-primaryText { + @include noWrap; + font-size: $ms-font-size-m; + padding-top: 15px; + padding-right: 0; + position: static; + } + + // Secondary text, typically the modified date or some other metadata. + .ms-ListItem-secondaryText { + @include noWrap; + color: $ms-color-neutralSecondary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-xs; + padding-top: 6px; + } +} diff --git a/dist/components/MessageBanner/MessageBanner.css b/dist/components/MessageBanner/MessageBanner.css new file mode 100644 index 000000000..1798433f0 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.css @@ -0,0 +1,458 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-MessageBanner { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + -webkit-animation-name: fadeOut, slideUpOut20; + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: none; + background-color: transparent; +} + +.ms-MessageBanner-expand:focus, +.ms-MessageBanner-close:focus { + outline: 1px solid transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-expand { + display: inline-block; + } + + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px 0; + min-width: 240px; + } + + .ms-MessageBanner-expand { + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} diff --git a/dist/components/MessageBanner/MessageBanner.html b/dist/components/MessageBanner/MessageBanner.html new file mode 100644 index 000000000..ec90437e1 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.html @@ -0,0 +1,20 @@ + + +
      +
      +
      +
      + You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage. +
      +
      + +
      + +
      +
      + +
      diff --git a/dist/components/MessageBanner/MessageBanner.json b/dist/components/MessageBanner/MessageBanner.json new file mode 100644 index 000000000..45021a464 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.json @@ -0,0 +1,10 @@ +{ + "name": "MessageBanner", + "notes": "A component for displaying errors", + "description:": "A component for displaying errors to a user via a top-of-the-screen message surface.", + "template": "MessageBanner.html", + "class": "ms-MessageBanner", + "dependencies": [ + "Button" + ] +} diff --git a/dist/components/MessageBanner/MessageBanner.min.css b/dist/components/MessageBanner/MessageBanner.min.css new file mode 100644 index 000000000..e074f1a3e --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-MessageBanner{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-expand{display:inline-block}.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}} \ No newline at end of file diff --git a/dist/components/MessageBanner/MessageBanner.scss b/dist/components/MessageBanner/MessageBanner.scss new file mode 100644 index 000000000..d076ec313 --- /dev/null +++ b/dist/components/MessageBanner/MessageBanner.scss @@ -0,0 +1,133 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// MessageBanner Styles + +$MessageBanner-height: 52px; +$MessageBanner-iconSize: 40px; + +.ms-MessageBanner { + @include ms-font-s(); + position: relative; + border-bottom: 1px solid $ms-color-neutralSecondaryAlt; + background-color: $ms-color-themeLighterAlt; + min-width: 320px; + width: 100%; + height: $MessageBanner-height; + text-align: center; + overflow: hidden; + @include ms-u-slideDownIn20(); + + .ms-Icon { + font-size: 16px; + } +} + +.ms-MessageBanner { + &.hide { + @include ms-u-slideUpOut20(); + } + + &.is-hidden { + display: none; + } +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: $MessageBanner-height; + width: $MessageBanner-iconSize; + cursor: pointer; + border: none; + background-color: transparent; + + &:focus { + outline: 1px solid transparent; + } +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: $MessageBanner-height; + color: $ms-color-neutralSecondary; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; + + &.is-visible { + display: inline-block; + } +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; + + .ms-Button { + color: $ms-color-white; + } +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; + + .ms-MessageBanner-clipper { + white-space: normal; + } +} + + +@media screen and (max-width: 479px) { + .ms-MessageBanner-expand { + display: inline-block; + } + + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px 0; + min-width: 240px; + } + + .ms-MessageBanner-expand { + padding: 0; + margin-left: -5px; + width: 20px; + + .ms-Icon { + color: $ms-color-themePrimary; + } + } +} diff --git a/dist/components/NavBar/NavBar.css b/dist/components/NavBar/NavBar.css new file mode 100644 index 000000000..60f3ca959 --- /dev/null +++ b/dist/components/NavBar/NavBar.css @@ -0,0 +1,792 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-NavBar { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; +} + +.ms-NavBar .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + z-index: 0; +} + +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + right: 27px; + text-align: center; + width: 40px; + cursor: pointer; +} + +.ms-NavBar-items { + display: none; +} + +.ms-NavBar-item { + box-sizing: border-box; + display: block; + height: 40px; + line-height: 40px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + padding-left: 20px; + position: relative; +} + +.ms-NavBar-item:hover { + cursor: pointer; + background-color: #deecf9; + color: #000000; +} + +.ms-NavBar-item:hover .ms-Icon { + color: #333333; +} + +.ms-NavBar-item:active { + color: #0078d7; +} + +.ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-NavBar-item.is-disabled { + color: #a6a6a6; +} + +.ms-NavBar-item.is-disabled:hover { + cursor: default; + border: none; +} + +.ms-NavBar-link { + color: #333333; + text-decoration: none; +} + +.ms-NavBar-link:active { + color: #0078d7; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after { + color: #212121; +} + +.ms-NavBar-chevronDown { + color: #666666; + font-size: 22px; + position: absolute; + top: 10px; + right: 20px; +} + +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; +} + +.ms-NavBar-item.ms-NavBar-item--search:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #666666; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + right: 5px; + top: 0; +} + +.ms-NavBar-item.ms-NavBar-item--search .ms-TextField { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open { + width: 200px; + padding-right: 40px; + border: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField { + display: block; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field { + border: none; + background-color: transparent; +} + +@media (max-width: 479px) { + .ms-NavBar.is-open .ms-NavBar-items { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + bottom: 0; + display: block; + left: 50px; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + outline: 1px solid transparent; + z-index: 5; + } + + .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu { + position: relative; + } +} + +@media (min-width: 320px) and (max-width: 479px) { + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown { + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + } + + .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + } + + .ms-NavBar.is-open .ms-Overlay { + display: block; + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 480px) { + .ms-NavBar-openMenu { + display: none; + } + + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 7px 0 0; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + right: 0; + float: none; + position: relative; + } + + .ms-NavBar-item { + float: left; + margin-right: 18px; + font-size: 14px; + padding: 0; + } + + .ms-NavBar-item:hover { + border-bottom: 2px solid #0078d7; + background-color: transparent; + } + + .ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + border-bottom: 2px solid #0078d7; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu:after { + position: relative; + top: 3px; + padding-top: 0; + right: auto; + } + + .ms-NavBar-item.ms-NavBar-item--right { + float: right; + margin: 0; + } +} diff --git a/dist/components/NavBar/NavBar.html b/dist/components/NavBar/NavBar.html new file mode 100644 index 000000000..e25f0ecd3 --- /dev/null +++ b/dist/components/NavBar/NavBar.html @@ -0,0 +1,29 @@ + + +
      +
      + +
      +
      + +
      diff --git a/dist/components/NavBar/NavBar.json b/dist/components/NavBar/NavBar.json new file mode 100644 index 000000000..9afa11a0f --- /dev/null +++ b/dist/components/NavBar/NavBar.json @@ -0,0 +1,13 @@ +{ + "name": "NavBar", + "notes": "", + "description": "A navigational layout element that includes search, commanding, and contextual menus. On smaller screen sizes, it collapses into a hamburger menu that presents its elements in a {0} Panel {1}.", + "template": "NavBar.html", + "class": "ms-NavBar", + "dependencies": [ + "List", + "ListItem", + "ContextualMenu", + "Overlay" + ] +} diff --git a/dist/components/NavBar/NavBar.min.css b/dist/components/NavBar/NavBar.min.css new file mode 100644 index 000000000..65e0ab4ec --- /dev/null +++ b/dist/components/NavBar/NavBar.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:4}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:2}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}} \ No newline at end of file diff --git a/dist/components/NavBar/NavBar.scss b/dist/components/NavBar/NavBar.scss new file mode 100644 index 000000000..80cf188b3 --- /dev/null +++ b/dist/components/NavBar/NavBar.scss @@ -0,0 +1,279 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Nav Bar styles + + +// On small screens, the nav bar contains only the hamburger icon. +.ms-NavBar { + @include ms-font-m; + @include ms-u-normalize; + background-color: $ms-color-neutralLighter; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; + + .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity $ms-duration3 $ms-ease1; + z-index: $ms-zIndex-back; + } +} + +// The button to open the menu on small screens. +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + right: 27px; + text-align: center; + width: 40px; + cursor: pointer; +} + +// Hide the items by default. +.ms-NavBar-items { + display: none; +} + +// Individual item/button, with optional subitems. +.ms-NavBar-item { + @include ms-u-borderBox; + display: block; + height: 40px; + line-height: 40px; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-l; + padding-left: 20px; + position: relative; + + &:hover { + cursor: pointer; + background-color: $ms-color-themeLighter; + color: $ms-color-black; + + .ms-Icon { + color: $ms-color-neutralPrimary; + } + } + + &:active { + color: $ms-color-themePrimary; + } + + // The currently-selected item. + &.is-selected { + font-family: $ms-font-family-semibold; + } + + // Items can be disabled. + &.is-disabled { + color: $ms-color-neutralTertiary; + + &:hover { + cursor: default; + border: none; + } + } +} + +.ms-NavBar-link { + color: $ms-color-neutralPrimary; + text-decoration: none; + + &:active { + color: $ms-color-themePrimary; + } +} + + +// Items can contain subitems. +.ms-NavBar-item.ms-NavBar-item--hasMenu { + + // Hide submenus by default. + .ms-NavBar-items { + display: none; + } + + &:hover { + &:after { + color: $ms-color-neutralDark; + } + } +} + +// Add chevron icon. +.ms-NavBar-chevronDown { + color: $ms-color-neutralSecondary; + font-size: 22px; + position: absolute; + top: 10px; + right: 20px; +} + +// Search. +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; + + // Search icon. + &:after { + @include ms-Icon; + color: $ms-color-neutralSecondary; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + right: 5px; + top: 0; + } + + // The search box is hidden by default. + .ms-TextField { + display: none; + } + + // Opened state. + &.is-open { + width: 200px; + padding-right: 40px; + border: none; + + .ms-TextField { + display: block; + } + + .ms-TextField-field { + border: none; + background-color: transparent; + } + } +} + +// Show the nav items menu only on small screens +@media (max-width: $ms-screen-sm-max) { + // State: The navigation panel is open. + .ms-NavBar.is-open { + // Show the items. + .ms-NavBar-items { + @include drop-shadow; + background-color: $ms-color-white; + bottom: 0; + display: block; + left: 50px; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + outline: 1px solid transparent; + z-index: $ms-zIndex-middle; + } + + .ms-NavBar-item .ms-ContextualMenu { + position: relative; + } + } +} + +// On small screens, override the contextual menu styles. +@media (min-width: $ms-screen-sm-min) and (max-width: $ms-screen-sm-max) { + + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: $ms-font-family-semilight; + + // Flip the chevron around. + .ms-NavBar-chevronDown { + transform: scaleY(-1); + } + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + + .ms-ContextualMenu-link { + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-l; + } + } + + // When the navbar is opened, animate to full opacity + // and activate pointer events so can be clicked. + .ms-NavBar.is-open .ms-Overlay { + display: block; + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +// On medium screens and larger we display the menu items in the nav bar. +@media (min-width: $ms-screen-md-min) { + + // We don't need the button to open the menu. + .ms-NavBar-openMenu { + display: none; + } + + // Show the items list. + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 7px 0 0; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + right: 0; + float: none; + position: relative; + } + + // Position the items in a horizontal list. + .ms-NavBar-item { + float: left; + margin-right: 18px; + font-size: $ms-font-size-m; + padding: 0; + + &:hover { + border-bottom: 2px solid $ms-color-themePrimary; + background-color: transparent; + } + + // The currently-selected item. + &.is-selected { + font-family: $ms-font-family-semibold; + border-bottom: 2px solid $ms-color-themePrimary; + } + } + + // Modifier: Items can contain subitems. + .ms-NavBar-item.ms-NavBar-item--hasMenu { + // Add chevron icon. + &:after { + position: relative; + top: 3px; + padding-top: 0; + right: auto; + } + } + + // Modifier: Items can be positioned to the right on larger screens. + .ms-NavBar-item.ms-NavBar-item--right { + float: right; + margin: 0; + } +} diff --git a/dist/components/OrgChart/OrgChart.Square.html b/dist/components/OrgChart/OrgChart.Square.html new file mode 100644 index 000000000..7a4d842ac --- /dev/null +++ b/dist/components/OrgChart/OrgChart.Square.html @@ -0,0 +1,121 @@ +
      +
      +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      \ No newline at end of file diff --git a/dist/components/OrgChart/OrgChart.css b/dist/components/OrgChart/OrgChart.css new file mode 100644 index 000000000..21686e819 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.css @@ -0,0 +1,544 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} diff --git a/dist/components/OrgChart/OrgChart.html b/dist/components/OrgChart/OrgChart.html new file mode 100644 index 000000000..424361882 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.html @@ -0,0 +1,123 @@ + + +
      +
      +
        +
      • + +
        • +
      • + +
        • +
      +
      +
      +
      Manager
      +
        +
      • + +
        • +
      +
      +
      +
      Staff
      +
        +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      • + +
        • +
      +
      +
      \ No newline at end of file diff --git a/dist/components/OrgChart/OrgChart.json b/dist/components/OrgChart/OrgChart.json new file mode 100644 index 000000000..520b74a50 --- /dev/null +++ b/dist/components/OrgChart/OrgChart.json @@ -0,0 +1,26 @@ +{ + "name": "OrgChart", + "notes": "", + "description": "A component embedded within the {0} PersonaCard {1} component that displays hierarchical information about an individual within an organization.", + "template": "OrgChart.html", + "class": "ms-OrgChart", + "wrapBranches": true, + "dependencies": [ + "Persona" + ], + "fileOrder": [ + "OrgChart.html", + "OrgChart.Square.html" + ], + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Circles", + "notes": "Circle personas.", + "class": "ms-OrgChart--circles" + } + ] +} diff --git a/dist/components/OrgChart/OrgChart.min.css b/dist/components/OrgChart/OrgChart.min.css new file mode 100644 index 000000000..22ad942bd --- /dev/null +++ b/dist/components/OrgChart/OrgChart.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0;outline:transparent} \ No newline at end of file diff --git a/dist/components/OrgChart/OrgChart.scss b/dist/components/OrgChart/OrgChart.scss new file mode 100644 index 000000000..1a251addd --- /dev/null +++ b/dist/components/OrgChart/OrgChart.scss @@ -0,0 +1,43 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Org chart styles + + +.ms-OrgChart { + @include ms-font-m; + @include ms-u-normalize; +} + +.ms-OrgChart-groupTitle { + color: $ms-color-neutralSecondary; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + @include button-reset(); + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} diff --git a/dist/components/Overlay/Overlay.Dark.html b/dist/components/Overlay/Overlay.Dark.html new file mode 100644 index 000000000..22127c6ff --- /dev/null +++ b/dist/components/Overlay/Overlay.Dark.html @@ -0,0 +1,3 @@ + + +
      diff --git a/dist/components/Overlay/Overlay.None.html b/dist/components/Overlay/Overlay.None.html new file mode 100644 index 000000000..6bf8ab0e5 --- /dev/null +++ b/dist/components/Overlay/Overlay.None.html @@ -0,0 +1,3 @@ + + +
      diff --git a/dist/components/Overlay/Overlay.css b/dist/components/Overlay/Overlay.css new file mode 100644 index 000000000..bf8b93f39 --- /dev/null +++ b/dist/components/Overlay/Overlay.css @@ -0,0 +1,26 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} diff --git a/dist/components/Overlay/Overlay.html b/dist/components/Overlay/Overlay.html new file mode 100644 index 000000000..2d9d05796 --- /dev/null +++ b/dist/components/Overlay/Overlay.html @@ -0,0 +1,3 @@ + + +
      diff --git a/dist/components/Overlay/Overlay.json b/dist/components/Overlay/Overlay.json new file mode 100644 index 000000000..6b45c573b --- /dev/null +++ b/dist/components/Overlay/Overlay.json @@ -0,0 +1,28 @@ +{ + "name": "Overlay", + "notes": "", + "description": "An element that takes over the screen to help bring focus to an element for the user. Used in conjunction with the {0} Panel {1} and {2} Dialog {3} and available in clear and dark.", + "template": "Overlay.html", + "class": "ms-Overlay", + "wrapBranches": true, + "fileOrder": [ + "Overlay.html", + "Overlay.Dark.html", + "Overlay.None.html" + ], + "branches": [ + { + "name": "Light (default)", + "default": true + }, + { + "name": "Dark", + "class": "ms-Overlay--dark" + }, + { + "name": "None", + "notes": "A hidden overlay, used primarily as part of other components like the dialog.", + "class": "ms-Overlay--none" + } + ] +} diff --git a/dist/components/Overlay/Overlay.min.css b/dist/components/Overlay/Overlay.min.css new file mode 100644 index 000000000..01e2cb9cb --- /dev/null +++ b/dist/components/Overlay/Overlay.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden} \ No newline at end of file diff --git a/dist/components/Overlay/Overlay.scss b/dist/components/Overlay/Overlay.scss new file mode 100644 index 000000000..0d6831df0 --- /dev/null +++ b/dist/components/Overlay/Overlay.scss @@ -0,0 +1,32 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Modal overlay styles + + +.ms-Overlay { + background-color: $ms-color-whiteTranslucent40; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: $ms-zIndex-Overlay; +} + + +//== Modifier: Dark overlay +// +.ms-Overlay.ms-Overlay--dark { + background-color: $ms-color-blackTranslucent40; +} + + +//== Modifier: Hidden overlay +// +&.ms-Overlay--none { + visibility: hidden; +} + diff --git a/dist/components/Panel/Panel.ExtraLarge.html b/dist/components/Panel/Panel.ExtraLarge.html new file mode 100644 index 000000000..9e7c4e2bb --- /dev/null +++ b/dist/components/Panel/Panel.ExtraLarge.html @@ -0,0 +1,44 @@ + + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + Save +
      +
      +
      +
      +
      +
      + + Cancel +
      +
      +
      +
      +
      + +
      +
      +

      Panel

      +
      + Content goes here. +
      +
      +
      +
      diff --git a/dist/components/Panel/Panel.Large.Fixed.html b/dist/components/Panel/Panel.Large.Fixed.html new file mode 100644 index 000000000..5f2b5d705 --- /dev/null +++ b/dist/components/Panel/Panel.Large.Fixed.html @@ -0,0 +1,44 @@ + + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + Save +
      +
      +
      +
      +
      +
      + + Cancel +
      +
      +
      +
      +
      + +
      +
      +

      Panel

      +
      + Content goes here. +
      +
      +
      +
      diff --git a/dist/components/Panel/Panel.Large.html b/dist/components/Panel/Panel.Large.html new file mode 100644 index 000000000..79e6c487f --- /dev/null +++ b/dist/components/Panel/Panel.Large.html @@ -0,0 +1,44 @@ + + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + Save +
      +
      +
      +
      +
      +
      + + Cancel +
      +
      +
      +
      +
      + +
      +
      +

      Panel

      +
      + Content goes here. +
      +
      +
      +
      diff --git a/dist/components/Panel/Panel.Left.html b/dist/components/Panel/Panel.Left.html new file mode 100644 index 000000000..d7243f361 --- /dev/null +++ b/dist/components/Panel/Panel.Left.html @@ -0,0 +1,12 @@ + + + + +
      +
      +
      + +
      +
      diff --git a/dist/components/Panel/Panel.LightDismiss.html b/dist/components/Panel/Panel.LightDismiss.html new file mode 100644 index 000000000..73c6981dc --- /dev/null +++ b/dist/components/Panel/Panel.LightDismiss.html @@ -0,0 +1,12 @@ + + + + +
      +
      +
      + +
      +
      diff --git a/dist/components/Panel/Panel.Medium.html b/dist/components/Panel/Panel.Medium.html new file mode 100644 index 000000000..2301ccdb3 --- /dev/null +++ b/dist/components/Panel/Panel.Medium.html @@ -0,0 +1,44 @@ + + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + Save +
      +
      +
      +
      +
      +
      + + Cancel +
      +
      +
      +
      +
      + +
      +
      +

      Panel

      +
      + Content goes here. +
      +
      +
      +
      diff --git a/dist/components/Panel/Panel.css b/dist/components/Panel/Panel.css new file mode 100644 index 000000000..67ca72790 --- /dev/null +++ b/dist/components/Panel/Panel.css @@ -0,0 +1,1634 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: 58px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-mainArea { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-right: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem { + margin-right: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch { + border-right: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch { + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 8px 8px 0; + border: none; + border-left: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch-input { + border-left: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch-input { + border-left: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-right: 40px; + border-left-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-right: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0px 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + position: relative; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 40px; + margin-right: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus, +.ms-Pivot-link:active { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff !important; + background-color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7 !important; +} + +@media (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + } +} + +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width: 480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-left: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 48px; + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + left: auto; + width: 643px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + left: 428px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + left: auto; + width: 940px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; +} + +.ms-Panel.is-open .ms-Overlay { + display: block; + pointer-events: auto; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width: 480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width: 480px) and (-ms-high-contrast: active) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 250ms; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; + } +} diff --git a/dist/components/Panel/Panel.html b/dist/components/Panel/Panel.html new file mode 100644 index 000000000..21de4ba1b --- /dev/null +++ b/dist/components/Panel/Panel.html @@ -0,0 +1,68 @@ + + + + + + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + + Save +
      +
      +
      +
      +
      +
      + + Cancel +
      +
      +
      +
      +
      + +
      +
      +

      Panel

      +
      + Content goes here. +
      +
      +
      +
      diff --git a/dist/components/Panel/Panel.json b/dist/components/Panel/Panel.json new file mode 100644 index 000000000..6d5f2abbb --- /dev/null +++ b/dist/components/Panel/Panel.json @@ -0,0 +1,51 @@ +{ + "name": "Panel", + "notes": "", + "description": "Containers used in experiences that do not require explicit context for heavy-weight creation/edit/management tasks such as settings, multi-field forms, and permissions. For containers used for complex tasks that requires context, use a separate Pane alongside the existing experience such as a List/Details layout.", + "template": "Panel.html", + "class": "ms-Panel", + "dependencies": [ + "Button", + "CommandBar", + "Label", + "Overlay", + "Pivot" + ], + "wrapBranches": true, + "fileOrder": [ + "Panel.html" + ], + "branches": [ + { + "name": "Small", + "default": true, + "class": "ms-Panel--sm", + "branches": [ + { + "name": "Right", + "default": true + }, + { + "name": "Left", + "class": "ms-Panel--left" + } + ] + }, + { + "name": "Medium", + "class": "ms-Panel--md" + }, + { + "name": "Large", + "class": "ms-Panel--lg" + }, + { + "name": "Large Fixed", + "class": "ms-Panel--lg ms-Panel--fixed" + }, + { + "name": "Extra Large", + "class": "ms-Panel--xl" + } + ] +} diff --git a/dist/components/Panel/Panel.min.css b/dist/components/Panel/Panel.min.css new file mode 100644 index 000000000..537957cee --- /dev/null +++ b/dist/components/Panel/Panel.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:1}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:1}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:1;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}} \ No newline at end of file diff --git a/dist/components/Panel/Panel.scss b/dist/components/Panel/Panel.scss new file mode 100644 index 000000000..d9816f5e2 --- /dev/null +++ b/dist/components/Panel/Panel.scss @@ -0,0 +1,478 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Panel styles + +$Panel-width-lightDismiss: 272px; +$Panel-width-sm: 340px; +$Panel-width-md: 643px; +$Panel-width-lg: 940px; +$Panel-margin-md: 48px; +$Panel-margin-lg: 428px; +$Panel-margin-xl: 176px; +$CommandBarHeight: 40px; +$CommandButtonLightBlue: #b5d8f4; +$CommandButtonLighterBlue: #d7eaf9; +$CommandButtonDarkBlue: #07288b; +$CommandButtonBlue: #2488D8; + +// The panel covers the entire screen. +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: $ms-zIndex-Panel; + display: none; + pointer-events: none; + + // Overlay used within panel + .ms-Overlay { + z-index: $ms-zIndex-back; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity $ms-duration3 $ms-ease1; + } +} + +// The panel itself, where the content goes. +.ms-Panel-main { + background-color: $ms-color-white; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: $ms-zIndex-front; + width: 100%; + + // Medium screens and up - (anchored right, fixed width) + @media (min-width: $ms-screen-md-min) { + border-left: 1px solid $ms-color-neutralLight; + border-right: 1px solid $ms-color-neutralLight; + pointer-events: auto; + width: $Panel-width-sm; + @include drop-shadow(-30px, 0px, 30px, -30px, .2); + left: auto; + } + + .ms-CommandBar { + outline: 1px solid transparent; + + // The commandbar is not displayed by default on md+ screens + @media (min-width: $ms-screen-md-min) { + display: none; + } + } + + .ms-CommandBarItem { + margin-left: 8px; + + .ms-CommandBarItem-commandText { + display: inline-block; + } + } + + .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; + } +} + +//== Modifier: Light Dismiss on small screens (fixed width) +// Note: This panel should only be used for dropdown menus on small screens. +.ms-Panel.ms-Panel--lightDismiss { + .ms-Panel-main { + border-left: 1px solid $ms-color-neutralLight; + border-right: 1px solid $ms-color-neutralLight; + width: $Panel-width-lightDismiss; + @include drop-shadow(-30px, 0px, 30px, -30px, .2); + } + + // Commands and content inner are not displayed + // Note: Replace with a dropdown contextual menu. + .ms-Panel-commands, + .ms-Panel-contentInner { + display: none; + } + + // Animations -- Default (anchored right) + &.ms-Panel-animateIn { + .ms-Panel-main { + @include ms-u-slideLeftIn40; + } + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel-animateOut { + .ms-Panel-main { + @include ms-u-slideRightOut40; + } + .ms-Overlay { + @include ms-u-fadeOut200; + } + } +} + +//== Modifier: Left anchored panel (anchored left, fixed width) +// Note: This panel variant should only be used for left nav. +.ms-Panel.ms-Panel--left { + .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid $ms-color-neutralLight; + border-right: 1px solid $ms-color-neutralLight; + width: $Panel-width-lightDismiss; + @include drop-shadow(-30px, 0px, 30px, 30px, .2); + } + + // Commands and content inner are not displayed + // Note: Replace with a leftnav menu. + .ms-Panel-commands, + .ms-Panel-contentInner { + display: none; + } + + // Animations -- Default (anchored right) + &.ms-Panel-animateIn { + .ms-Panel-main { + @include ms-u-slideLeftIn40; + } + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel-animateOut { + .ms-Panel-main { + @include ms-u-slideRightOut40; + } + .ms-Overlay { + @include ms-u-fadeOut200; + } + } + + // Animations - Left panel (anchored left) + &.ms-Panel-animateIn { + .ms-Panel-main { + @include ms-u-slideRightIn40; + } + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel--left.ms-Panel-animateOut { + .ms-Panel-main { + @include ms-u-slideLeftOut40; + } + .ms-Overlay { + @include ms-u-fadeOut200; + } + } +} + +//== Modifier: Small panel (anchored right, fixed width) +// +.ms-Panel.ms-Panel--sm { + .ms-Panel-main { + width: 100%; + + @media (min-width: $ms-screen-md-min) { + width: $Panel-width-sm; + } + } +} + +//== Modifier: Medium, Large, Extra Largs panels (anchored right, fluid width) +// +.ms-Panel.ms-Panel--md, +.ms-Panel.ms-Panel--lg, +.ms-Panel.ms-Panel--xl { + .ms-Panel-main { + @media (min-width: $ms-screen-lg-min) { + left: $Panel-margin-md; + width: auto; + } + } +} + +//== Modifier: Medium panel (anchored right, fixed width) +// +.ms-Panel.ms-Panel--md { + .ms-Panel-main { + @media (min-width: $ms-screen-xl-min) { + left: auto; + width: $Panel-width-md; + } + } +} + +//== Modifier: Large panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--lg { + .ms-Panel-main { + @media (min-width: $ms-screen-xxl-min) { + left: $Panel-margin-lg; + } + } +} + +//== Modifier: Large fixed panel (anchored right, fixed width) +// +.ms-Panel.ms-Panel--lg.ms-Panel--fixed { + .ms-Panel-main { + @media (min-width: $ms-screen-xxl-min) { + left: auto; + width: $Panel-width-lg; + } + } +} + +//== Modifier: XLarge panel (anchored right, fluid width) +// +.ms-Panel.ms-Panel--xl { + .ms-Panel-main { + @media (min-width: $ms-screen-xxl-min) { + left: $Panel-margin-xl; + } + } +} + +//== State: When the panel is open. +// +.ms-Panel.is-open { + display: block; + + .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; + } + + .ms-Overlay { + display: block; + pointer-events: auto; + + @media screen and (-ms-high-contrast: active) { + opacity: 0; + } + } + + &.ms-Panel-animateIn { + .ms-Panel-main { + @include ms-u-fadeIn100; + } + } + + &.ms-Panel-animateOut { + .ms-Panel-main { + @include ms-u-fadeOut100; + } + + .ms-Overlay { + display: none; + } + } + + // Medium screens and up + @media (min-width: $ms-screen-md-min) { + // Animations -- Default (anchored right) + &.ms-Panel-animateIn { + .ms-Panel-main { + @include ms-u-slideLeftIn40; + } + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel-animateOut { + .ms-Panel-main { + @include ms-u-slideRightOut40; + } + .ms-Overlay { + @include ms-u-fadeOut200; + } + } + + // Animations - Left panel (anchored left) + &.ms-Panel--left.ms-Panel-animateIn { + .ms-Panel-main { + @include ms-u-slideRightIn40; + } + + .ms-Overlay { + @include ms-u-fadeIn200; + } + } + + &.ms-Panel--left.ms-Panel-animateOut { + .ms-Panel-main { + @include ms-u-slideLeftOut40; + } + .ms-Overlay { + @include ms-u-fadeOut200; + } + } + + // Animate overlay to full opacity, activate pointer events + .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } + + &.ms-Panel-animateIn, + &.ms-Panel--left.ms-Panel-animateIn { + .ms-Overlay { + @media screen and (-ms-high-contrast: active) { + opacity: 0; + animation-name: none; + } + } + } + } +} + +// The close button in the top right (x) +.ms-Panel-closeButton { + @include button-reset(); + position: absolute; + right: 8px; + top: 0; + height: $CommandBarHeight; + width: $CommandBarHeight; + line-height: $CommandBarHeight; + outline: 0; + padding: 0; + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m; + + &:hover { + color: $ms-color-neutralPrimary; + } +} + +// Scrollable content area +.ms-Panel-contentInner { + position: absolute; + top: $CommandBarHeight; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; + + @media (min-width: $ms-screen-lg-min) { + padding: 0 32px 20px; + } + + @media (min-width: $ms-screen-xxl-min) { + padding: 0 40px 20px; + } +} + +// Header text at the top of the panel. +.ms-Panel-headerText { + font-family: $ms-font-family-light; + font-size: $ms-font-size-xl; + color: $ms-color-neutralPrimary; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; + + @media (min-width: $ms-screen-xl-min) { + margin-top: 30px; + } +} + +//== Modifier: Deprecated Animated commandbar +// +.ms-Panel.ms-Panel--animatedCommands { + .ms-CommandBar { + @media (min-width: $ms-screen-md-min) { + display: block; + } + } + + .ms-CommandBarItem { + user-select: none; + + &:hover { + background-color: $CommandButtonLighterBlue; + } + + &:active { + background-color: $CommandButtonLightBlue; + + .ms-CommandBarItem-icon { + color: $CommandButtonDarkBlue;; + } + + .ms-CommandBarItem-commandText { + color: $ms-color-black; + } + } + } + + .ms-CommandBarItem:first-child { + background-color: $ms-color-themePrimary; + box-shadow: inset 0 1px 0 0 $CommandButtonBlue; + + .ms-CommandBarItem-icon { + color: $ms-color-white; + } + + .ms-CommandBarItem-commandText { + color: $ms-color-white; + } + + .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; + } + + &:hover { + background-color: $ms-color-themeDark; + box-shadow: none; + + .ms-CommandBarItem-icon { + color: $ms-color-white; + } + + .ms-CommandBarItem-commandText { + color: $ms-color-white; + } + } + } + + &.is-open { + .ms-CommandBar { + @include ms-u-slideDownIn20(); + animation-delay: 250ms; + } + + @media (min-width: $ms-screen-md-min) { + // Animate CommandBar in + .ms-CommandBar { + animation-delay: 500ms; + } + } + } +} diff --git a/dist/components/PeoplePicker/PeoplePicker.Compact.html b/dist/components/PeoplePicker/PeoplePicker.Compact.html new file mode 100644 index 000000000..e98eddfba --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.Compact.html @@ -0,0 +1,169 @@ + + +
      +
      + +
      +
      +
      +
      +
      Top results
      +
        +
      • +
        +
        +
        + +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        + +
        +
        • +
      +
      +
      +
      Other results
      +
        +
      • +
        +
        +
        + +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Grant Steel
        +
        Technical Support
        +
        +
        + +
        +
        +
          +
        • +
          +
          +
          + +
          +
          +
          +
          Jessica Fischer
          +
          Public Relations
          +
          +
          + +
          +
          • +
        • +
          +
          +
          + +
          +
          +
          +
          Grant Steel (bask)
          +
          Public Relations
          +
          +
          + +
          +
          • +
        +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Harvey Wallin
        +
        Delivery
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Marcus Lauer
        +
        Marketing
        +
        +
        + +
        +
        • +
      +
      +
      +
      +
      +
      + +
      +
      Showing top 5 results
      +
      Search Contacts & Directory
      +
      +
      +
      +
      diff --git a/dist/components/PeoplePicker/PeoplePicker.Disconnected.html b/dist/components/PeoplePicker/PeoplePicker.Disconnected.html new file mode 100644 index 000000000..7e023cb7d --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.Disconnected.html @@ -0,0 +1,168 @@ + + +
      +
      + +
      +
      +
      +
      +
      Top results
      +
        +
      • +
        +
        +
        + +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        + +
        +
        • +
      +
      +
      +
      Other results
      +
        +
      • +
        +
        +
        + +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Grant Steel
        +
        Technical Support
        +
        +
        + +
        +
        +
          +
        • +
          +
          +
          + +
          +
          +
          +
          Jessica Fischer
          +
          Public Relations
          +
          +
          + +
          +
          • +
        • +
          +
          +
          + +
          +
          +
          +
          Grant Steel (bask)
          +
          Public Relations
          +
          +
          + +
          +
          • +
        +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Harvey Wallin
        +
        Delivery
        +
        +
        + +
        +
        • +
      • +
        +
        +
        + +
        +
        +
        +
        Marcus Lauer
        +
        Marketing
        +
        +
        + +
        +
        • +
      +
      +
      +
      +
      +
      + +
      +
      We are having trouble connecting to the server.
      Please try again in a few minutes.
      +
      +
      +
      +
      diff --git a/dist/components/PeoplePicker/PeoplePicker.FacePile.html b/dist/components/PeoplePicker/PeoplePicker.FacePile.html new file mode 100644 index 000000000..6a9d0c434 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.FacePile.html @@ -0,0 +1,172 @@ + + +
      +
      + +
      + +
      +
      + Suggested contacts +
      +
        +
      • +
        +
        +
        +
        RM
        +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        DF
        +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        JF
        +
        +
        +
        +
        Jessica Fischer
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        MG
        +
        +
        +
        +
        Marcel Groce
        +
        Marketing
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        GS
        +
        +
        +
        +
        Grant Steel
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        HW
        +
        +
        +
        +
        Harvey Wallin
        +
        Delivery
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        ML
        +
        +
        +
        +
        Marcus Lauer
        +
        Marketing
        +
        +
        +
        +
        • +
      +
      +
      +
      + +
      +
      Search Contacts & Directory
      +
      +
      +
      + +
      +
      + 3 members +
      +
        +
      • +
        +
        +
        AL
        + Persona image +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        + +
        • +
      • +
        +
        +
        DF
        +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        + +
        • +
      • +
        +
        +
        ML
        +
        +
        +
        +
        Marcus Lauer
        +
        Technical Support
        +
        +
        + +
        • +
      +
      +
      + @@include('../PersonaCard/PersonaCard.html') +
      +
      \ No newline at end of file diff --git a/dist/components/PeoplePicker/PeoplePicker.MembersList.html b/dist/components/PeoplePicker/PeoplePicker.MembersList.html new file mode 100644 index 000000000..a44438071 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.MembersList.html @@ -0,0 +1,112 @@ + + +
      + +
      + +
      +
      +
      +
      +
        +
      • +
        +
        +
        +
        RM
        + +
        +
        +
        +
        Russel Miller
        +
        Sales
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        DF
        + +
        +
        +
        +
        Douglas Fielder
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        JF
        + +
        +
        +
        +
        Jessica Fischer
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        GS
        + +
        +
        +
        +
        Grant Steel (bask)
        +
        Public Relations
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        HW
        + +
        +
        +
        +
        Harvey Wallin
        +
        Delivery
        +
        +
        +
        +
        • +
      • +
        +
        +
        +
        ML
        + +
        +
        +
        +
        Marcus Lauer
        +
        Marketing
        +
        +
        +
        +
        • +
      +
      +
      +
      +
      +
      + newly added members +
      +
        +
        +
        \ No newline at end of file diff --git a/dist/components/PeoplePicker/PeoplePicker.Searching.png b/dist/components/PeoplePicker/PeoplePicker.Searching.png new file mode 100644 index 0000000000000000000000000000000000000000..147416f7713c45d5434a9d5b8c5570958e3e9b18 GIT binary patch literal 1601 zcmaJ?c~BE)91VyNV{MfNFFe+zQ$bBO8weqRh#}!fB@se|w5T;C3ki_jb+aKM9)JZw zv|4RPr)5+u+A0clC=go_VbCg`7@d~d60pM|)rvY)L#@~i0``y6o!R}4dGGzMH?!Ll z6tUA7a~U)mZJI1js-#xH{nEXuugPW`q?S2kw3RR#)u3E76=3ohYNAJEDFIg<)Wm<%0f*6V+vBlq$LbE zX~0mxt*A-E%%ljUGJREo5g(UDO`~n18U|T4I0Umf?vloUa{2#5jmB}biBux5^Zid@ zlPVWSASGhL%!HO2TzY^z6fTqyh=#-n6^3PxbumGYk(f!3;ebQ}1g02J9cD2Fjlkt{ zp$s*V8dQtOq#}?KU>giNVF)iIR3Z%ti&dG$J^KY8`3iW zcJ>;%KR3v8$atT|*r!O2v+UWqEfqH(g_`_IT#bh?yF*)ENK^YU)=MJtHU6pturC8cQ7fUKmV|%ro1ZOG3ZEHbn5!u{Mh87ql5HR`!36gvyL{h z*#oW=VT@Br|J6!*!;>zi zKK+7Ea^V)}Vo~+#lIq6tx%m9B3q58JsN-d)?ejle-ne(5XLx>AiKAaUdvRh{?W4{; z1#+o6vdB|qemA-wyi(a*XKwYhBz^Nq6f}QIB*V6EZA5Y33xcouD=cNH@9?}Y_RXVz z?c^@4?OlA^8D5siWEZdnIUC@BhuikfIo#IgT{|?LzsIlZKo4`xmD!5WCvP5A`KRyf z`>9F3!?SkR%1zzLhvMV0t1C%`w4;;utWXQRQ+2!j%*UwGx39VqpyojZMgsd literal 0 HcmV?d00001 diff --git a/dist/components/PeoplePicker/PeoplePicker.css b/dist/components/PeoplePicker/PeoplePicker.css new file mode 100644 index 000000000..54eac8c9f --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.css @@ -0,0 +1,1775 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:before, +.ms-PeoplePicker-searchBox:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: left; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} diff --git a/dist/components/PeoplePicker/PeoplePicker.html b/dist/components/PeoplePicker/PeoplePicker.html new file mode 100644 index 000000000..1419428cf --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.html @@ -0,0 +1,178 @@ + + +
        +
        + +
        +
        +
        +
        +
        Top results
        +
          +
        • +
          +
          +
          + + +
          +
          +
          +
          Russel Miller
          +
          Sales
          +
          +
          + +
          +
          • +
        • +
          +
          +
          + + +
          +
          +
          +
          Douglas Fielder
          +
          Public Relations
          +
          +
          + +
          +
          • +
        +
        +
        +
        Other results
        +
          +
        • +
          +
          +
          + + +
          +
          +
          +
          Russel Miller
          +
          Sales
          +
          +
          + +
          +
          • +
        • +
          +
          +
          + + +
          +
          +
          +
          Douglas Fielder
          +
          Public Relations
          +
          +
          + +
          +
          • +
        • +
          +
          +
          + + +
          +
          +
          +
          Grant Steel
          +
          Technical Support
          +
          +
          + +
          +
          +
            +
          • +
            +
            +
            + + +
            +
            +
            +
            Jessica Fischer
            +
            Public Relations
            +
            +
            + +
            +
            • +
          • +
            +
            +
            + + +
            +
            +
            +
            Grant Steel (bask)
            +
            Public Relations
            +
            +
            + +
            +
            • +
          +
          +
          • +
        • +
          +
          +
          + + +
          +
          +
          +
          Harvey Wallin
          +
          Delivery
          +
          +
          + +
          +
          • +
        • +
          +
          +
          + + +
          +
          +
          +
          Marcus Lauer
          +
          Marketing
          +
          +
          + +
          +
          • +
        +
        +
        +
        + +
        +
        +
        diff --git a/dist/components/PeoplePicker/PeoplePicker.json b/dist/components/PeoplePicker/PeoplePicker.json new file mode 100644 index 000000000..61d741acc --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.json @@ -0,0 +1,43 @@ +{ + "name": "PeoplePicker", + "notes": "", + "description": "A component used for searching for and picking a person (or people). There are several variants and modifications to the dropdown list of {0} Personas {1} that allow for removing selected people, compact visualizations, a disconnected state, and a 'tokenized' list of selected users.", + "template": "PeoplePicker.html", + "class": "ms-PeoplePicker", + "dependencies": [ + "Button", + "Label", + "Overlay", + "Persona", + "PersonaCard" + ], + "wrapBranches": true, + "fileOrder": [ + "PeoplePicker.html", + "PeoplePicker.Compact.html", + "PeoplePicker.Disconnected.html", + "PeoplePicker.MembersList.html", + "PeoplePicker.Facepile.html" + ], + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Compact", + "template": "PeoplePicker.Compact.html", + "class": "ms-PeoplePicker--compact" + }, + { + "name": "Disconnected", + "notes": "When the search can not be completed, an error message is shown.", + "template": "PeoplePicker.Disconnected.html" + }, + { + "name": "Facepile", + "template": "PeoplePicker.Facepile.html", + "class": "ms-PeoplePicker--Facepile" + } + ] +} diff --git a/dist/components/PeoplePicker/PeoplePicker.min.css b/dist/components/PeoplePicker/PeoplePicker.min.css new file mode 100644 index 000000000..2dd7b1b00 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:2}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative} \ No newline at end of file diff --git a/dist/components/PeoplePicker/PeoplePicker.scss b/dist/components/PeoplePicker/PeoplePicker.scss new file mode 100644 index 000000000..0fbf863b7 --- /dev/null +++ b/dist/components/PeoplePicker/PeoplePicker.scss @@ -0,0 +1,635 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// People Picker styles + +$personaItemHeight: 42px; + + +.ms-PeoplePicker { + @include ms-font-m; + @include ms-u-normalize; + background-color: $ms-color-white; + margin-bottom: 10px; +} + +// Box that contains the search field and selected people. +.ms-PeoplePicker-searchBox { + @include ms-u-clearfix; + border: 1px solid $ms-color-neutralTertiaryAlt; + box-sizing: border-box; + min-height: 40px; + width: 100%; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + } +} + +// Highlight the search box when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: $ms-color-themePrimary; +} + +// The search field. +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +// A selected persona, which appears within the search field. +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; + + //TODO: Avoid styling child components like this. + .ms-Persona { + background-color: $ms-color-neutralLighter; + float: left; + min-height: 30px; + } +} + +// The selected persona may be in an error state. +.ms-PeoplePicker-persona.has-error { + .ms-Persona-primaryText { + color: $ms-color-error; + } +} + +// Button to remove a selected person. +.ms-PeoplePicker-personaRemove { + @include button-reset(); + background-color: $ms-color-neutralLighter; + color: $ms-color-neutralSecondary; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; + + &:hover { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralPrimary; + cursor: pointer; + } + + &:focus { + background-color: $ms-color-neutralLight; + color: $ms-color-neutralPrimary; + border: 1px solid $ms-color-themePrimary; + outline: none; + } +} + +// Results area, hidden by default +.ms-PeoplePicker-results { + @include drop-shadow(); + background-color: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: ($ms-zIndex-PeoplePicker + $ms-zIndex-middle); +} + +// Show the results area when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + + +// One or more groups of results (ms-PeoplePicker-resultGroup) are contained in this scrollable area. +// This is limited to five results for both regular and compact sizes. +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +// A group of results +.ms-PeoplePicker-resultGroup { + border-top: 1px solid $ms-color-neutralLight; + + // The first result group needs to be bumped up 1px to account for border on ms-PeoplePicker-results + &:first-child { + border-top: 0; + } +} + +// Title for a group of results (optional) +.ms-PeoplePicker-resultGroupTitle { + color: $ms-color-themePrimary; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-s; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +// List of results +.ms-PeoplePicker-resultList { + @include ms-u-normalize; + margin-bottom: -1px; + list-style-type: none; // Browser default override. +} + +// A single result in the result list +.ms-PeoplePicker-result { + position: relative; + + .ms-Persona { + &:hover { + @extend .ms-Persona.ms-Persona--darkText; + cursor: pointer; + } + + // TODO: Active style is being blocked by the inner content on IE + // http://stackoverflow.com/questions/5594102/active-css-selector-not-working-for-ie8-and-ie9?rq=1 + &:active { + background-color: $ms-color-themeLight; + } + } + + // Ensure the width is 100%. + .ms-Persona-details { + width: 100%; + } +} + +// Result buttons +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + @include button-reset(); + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; + + @media (min-width: $ms-screen-md-min) { + height: 48px; + } + + &:hover { + background-color: $ms-color-neutralLight; + outline: 1px solid transparent; + } + + &:focus { + outline: 1; + } + + &.ms-PeoplePicker-resultBtn--compact { + height: 32px; + } +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; + + &:hover { + background-color: transparent; + } +} + +// Actionable icon on a result +.ms-PeoplePicker-resultAction { + @include button-reset(); + display: block; + height: 34px; + transition: background-color 0.367s $ms-ease1; + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; + + @media (min-width: $ms-screen-md-min) { + height: 48px; + } + + .ms-Icon { + color: $ms-color-neutralSecondary; + font-size: $ms-font-size-m-plus; + } + + &:hover { + background-color: $ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + + &:active { + background-color: $ms-color-themeTertiary; + } +} + +// A result can contain additional content (usually a ms-PeoplePicker-resultList of Persona components) that is hidden initially +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +// Use the .is-expanded state to reveal the additional content +.ms-PeoplePicker-result.is-expanded { + background-color: $ms-color-neutralLighter; + margin-bottom: 11px; + + // Switch the toggle icon + .ms-PeoplePicker-resultAction .ms-Icon { + transform: rotate(180deg); + } + + // Show the content + .ms-PeoplePicker-resultAdditionalContent { + display: block; + } +} + +// After the result groups we have an area to trigger additional searches +.ms-PeoplePicker-searchMore { + border-top: 1px solid $ms-color-neutralLight; + height: 69px; + position: relative; + overflow: hidden; + + .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; + + .ms-Spinner-circle { + background-color: $ms-color-themePrimary; + } + } +} + +// Searching state +.ms-PeoplePicker-searchMore.is-searching { + + .ms-Spinner { + display: block; + } + + .ms-PeoplePicker-searchMoreIcon { + .ms-Icon { + display: none; + } + } + + .ms-PeoplePicker-searchMorePrimary { + color: $ms-color-themePrimary; + } + + &:hover { + background-color: transparent; + cursor: default; + } +} + +.ms-PeoplePicker-searchMoreBtn { + @include button-reset(); + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; + + &:hover { + background-color: $ms-color-neutralLight; + cursor: pointer; + } + + // TODO: Works in Chrome, but not working in IE + &:focus, + &:active { + background-color: $ms-color-themeLight; + } +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +// Default search icon +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; + + .ms-Icon { + color: $ms-color-neutralPrimary; + font-size: $ms-font-size-m + 2; + position: absolute; + text-align: center; + top: 27px; + width: 100%; + } +} + +// Primary text +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: $ms-font-family-regular; +} + +// Secondary text +.ms-PeoplePicker-searchMoreSecondary { + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-xs; + color: $ms-color-neutralSecondary; +} + +// The search more area may be in a disconnected state. +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected { + + // Do nothing on hover + &:hover { + background-color: inherit; + cursor: default; + } + + // Alert icon + .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: $ms-color-neutralSecondary; + } + + // Primary text + .ms-PeoplePicker-searchMorePrimary { + color: $ms-color-neutralSecondary; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-xs; + line-height: 20px; + position: relative; + top: 12px; + } +} + +// Compact size +.ms-PeoplePicker.ms-PeoplePicker--compact { + + // Limit to 5 results before scrolling. + .ms-PeoplePicker-resultGroups { + max-height: 209px; + } + + .ms-PeoplePicker-resultAction { + height: 32px; + + .ms-Icon { + margin-top: -8px; + } + } + + .ms-PeoplePicker-searchMore { + height: 49px; + + .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; + } + + } + + .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; + } + + .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; + + .ms-Icon { + font-size: $ms-font-size-l; + top: 0; + margin-top: 0; + line-height: 50px; + } + } + + .ms-PeoplePicker-searchMorePrimary { + font-size: $ms-font-size-s; + line-height: 45px; + } + + .ms-PeoplePicker-searchMoreSecondary { + display: none; + } +} + + +//== Modifier: Facepile and Members list +// +.ms-PeoplePicker.ms-PeoplePicker--Facepile, +.ms-PeoplePicker.ms-PeoplePicker--membersList { + .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; + } + + .ms-PeoplePicker-searchField { + height: 28px; + } + + .ms-Persona { + cursor: pointer; + } +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; + + &.is-active { + display: block; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile { + //= State: Searching in peoplepicker search field + &.is-searching { + .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; + } + + .ms-PeoplePicker-peopleListHeader { + display: none; + } + } + + .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid $ms-color-neutralLight; + } + + // Personas are size xs on mobile, sm on md screens and above + .ms-PeoplePicker-results, + .ms-PeoplePicker-selectedPeople { + @media (max-width: $ms-screen-sm-max) { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-s; + line-height: 32px; + } + + .ms-Persona-presence { + left: 19px; + } + + .ms-Persona-details { + padding-left: 8px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 3px; + } + + .ms-Persona-secondaryText { + display: none; + } + } + + @media (min-width: $ms-screen-md-min) { + .ms-Persona .ms-Persona-secondaryText { + display: block; + } + } + } + + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + @media (min-width: $ms-screen-md-min) { + height: $personaItemHeight; + } + } + + .ms-PeoplePicker-resultAction { + @media (min-width: $ms-screen-md-min) { + height: $personaItemHeight; + } + } + + .ms-Persona.ms-Persona--selectable { + padding: 0; + } + + .ms-PeoplePicker-searchMore { + display: none; + + &.is-active { + display: block; + } + } + + .ms-PeoplePicker-searchMore, + .ms-PeoplePicker-searchMoreBtn, + .ms-PeoplePicker-searchMoreIcon { + height: 48px; + } + + .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; + } + + .ms-PeoplePicker-searchMoreIcon { + width: 48px; + } + + .ms-PeoplePicker-searchMorePrimary { + font-size: $ms-font-size-s; + line-height: 48px; + } + + .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; + } + + .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile { + .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; + + &.is-active { + display: block; + } + } +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: $ms-color-themePrimary; + font-size: $ms-font-size-s; + font-family: $ms-font-family-regular; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + @include ms-u-normalize; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} diff --git a/dist/components/Persona/Persona.ExtraLarge.html b/dist/components/Persona/Persona.ExtraLarge.html new file mode 100644 index 000000000..86acb1cc9 --- /dev/null +++ b/dist/components/Persona/Persona.ExtraLarge.html @@ -0,0 +1,15 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        In a meeting
        +
        Available at 4:00pm
        +
        +
        diff --git a/dist/components/Persona/Persona.ExtraSmall.html b/dist/components/Persona/Persona.ExtraSmall.html new file mode 100644 index 000000000..5a4ea6f19 --- /dev/null +++ b/dist/components/Persona/Persona.ExtraSmall.html @@ -0,0 +1,12 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        +
        diff --git a/dist/components/Persona/Persona.Initials.html b/dist/components/Persona/Persona.Initials.html new file mode 100644 index 000000000..176f41559 --- /dev/null +++ b/dist/components/Persona/Persona.Initials.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Large.html b/dist/components/Persona/Persona.Large.html new file mode 100644 index 000000000..4847b10e1 --- /dev/null +++ b/dist/components/Persona/Persona.Large.html @@ -0,0 +1,15 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        In a meeting
        +
        +
        + diff --git a/dist/components/Persona/Persona.Person.jpg b/dist/components/Persona/Persona.Person.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4d06e964d9edc210ad7646847e976009ebe99cc2 GIT binary patch literal 5650 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 literal 0 HcmV?d00001 diff --git a/dist/components/Persona/Persona.Person2.png b/dist/components/Persona/Persona.Person2.png new file mode 100644 index 0000000000000000000000000000000000000000..4ba5f7b0d6327863b6fdaa202eacb5af8ee240c9 GIT binary patch literal 15280 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⁣cGfU9~;J~5A*B%w$ib%n^BT(EVv3rE~gwkBh6pc9~jqkqSPCz}}R z*7ir4{~(sNHFjT+lM|wXV|u@#;#fVTFxhko-Hnn;bw@CPG@=1X!ET5phmYYdP)0gl zZGX?43#@{;j%6%qw*)pVQabfFG7#2uE;*1fXbtHni|m27PC8E2q_W}=r(+!P4p^J| z8QzHUQJ7#M*gQ}Wt)qsknEE>?=vyL5d{LE4yn4EoAX&fw?3pm$x6!&yP5>#mjE50G znP470hN=a*eK`j@Ph;T}u>rEsA9UP1i&;`B3oozGHiuT0Ig4?ES+^*uk1~QWqGFz; z@(vPt`K2AY@vA%WHsZ&7e0 z@Fx%5IH6?HeBPbWxs$;f( z2FEzGKK!X%^9#1;S>TG1t8IYBw9}VHDMVYkKM@Fk;sCd6J>LZLRrhF&G0FyjbI}JC z2xJblxvDT--I(eg%Ma!|S`2~Jmz^3Dx{NhGvQOpDR_aciXs9Tc5q*>_Ham#XSA8%@ zNkAIduCfqV*~FQnpP`{XQ>SICiLn>MEEYyrBw};dQp3unatKvvl%F71xHn!k$-D|B z&sqR}uov+DtE~-|L(y~)gKe;mXQE^#99MxHsaHTC2jUzmd_1@NYKQF%q)<4f( zcj<{EscNYzG#ObOvg$H70x#XqwK|@sel8DNy&u<~11P{4O%2-YSq?fvSKa2yHh zryQl;w0jm4)Jag_%8kX=%y!C5HkA(3n{6M2AllQ)KUGD4T5(aEmeV(EI%#I5+&-c9 zrUO=EGI(ptf2))&{LleUE2i8J`^LB_E+mA7b3*Djf5n96z&xMY`l|NQw(IhHUtfk4 zy1D7yxI+}qbmW)PQUC9x^;Ja+@3yHzt;1r>uu(jbiN4HYh7`_ zx)^Q;#Evy!1;Y*AgGGid6eWVv6UW{TmmeiNQP}BqHhl)!eLwxwH>>!hg0x`b)kx<5 z+gHJaNx`VOlkfTH_B$GzPy>a;k{?x0qRmif9YFP$VSfl%jlF9+n0oPthqabY+jAux zx%N5A6VId4WIvTJ6-U>6Z>}9+aK1MD+L+>By3;JLCPTh&pH%x@+n(>|uV-pgRpZ4eA zZjolCm8FThC}HLDM)OO8k<;7d*so;|=PJ(2>8x#Ns>MiUppnX(;m`Qn-?!}YMQ#LL zJ|k_0m2>l`Mr=+8!KQDM5q@Vcx6R3DWc_{H_PxFD)63I+m~*8@2R*mg(o^K@iN1b~ zTL9_pMa>FnU3(~*)ac_@2Hnpq9QLm>^`4@gUSIPh`dkitdGg-p{LW=4p>#QNca6mEp)b-@AN&rM}I2S4-Y^`LH{P~3R6dH$`G8D5|K4ZY50uj~EJRK7O$o}XEy z#R0Xc!<=4clX84r4eVN0<(HSb(9eYThR1J!!cHFitDQH4dkB6{JC?=UWjP4??KG6Y zAT?g^lj0qY?#<6?b5%afiz_G1Gt@pUc-xo`3IxEGo+X{=M0Vfu04-;lIhC(vfy8DH zbG@dDphL2(+uF9oO(7T`=ee3AF5;I?+q2!~`g&~dU1u)0$MIsdFW0n(p^-XgcH)Gf z`1aPi_pO)R)_U&8W$!aVkHh^kxB9mA4I|dG-#0>!_v8HIwePq1Ijy6|_}Xt5isJCj z?wS*bTazlM*P);0@@5X+b%2HNmaPt

        baB6ag z;I?~QyN#!h7REYQa^=btTdU~P3T)qLZ1MW`LKBWlV)&`a3KpsQMUSd#s@lE=#yFNe z7p*$R{5LZuU5XZ+3+#5bwpPfaxV~0-&|Cq~@wZtH_kEey@K*r7=1uT?zO-Yj#vN+` zisGk8BplL02g`?$zkMjTbRlT3KKdv+u~a=py7pLZatfdOJKao?dG7b4K8JY=q-4X@-&L2c6@j%yHBclx4KxSCm3U#d zN#)KAyqIArOk%zQk7Q}kW|0{QY|q{642bja%8u3B(ay_-(oa}TU++zVnp*Mft98Nv z2x%u0!6eMo1(7hkzhg;e(TW>Hrs!3uFXaSCsaIRJLh>9HYq2uoa*!WmHWAQR7PC)=U3`?P_u{rC&NUM`Mi?U64J6znJVsOW_7Rz<5>4BOlI`c{N3<) zoxR;vY)T9s4h0IK1~NA%rG-irge=wKaQ%T|<)uH#@Y>T>*h&csif3XL_Zo+l!PX>X zdP+!OO+&-nc@?)c9AdvB{Ol8AH3p~f#h7jubk}5Lh9#R|T;y-imp{_ELMT#tC)H(C z$$zprrazKnWlMc+S}qiIFBCqj08eGmjY9`|al5!XAnHlb{T^*zDDj5_)p&7c^C^s-~?I}eKViLikVqwzvgE zj3jfE{H2sRqbQA|c{=el>T*$#5s?9mC^41N60RPBi(?4H zPHjP8x77uPE<{fqHXOOdJjOI1YMFH@n|j;)x5?v~GWnh&Px5Bz<#KUH?>LPbEsE)y zT<*`l=vKD(PX?aerqn1gtyXM9DEk0pcSER8V5U(+M?yNzrLG8KXVH`lQaRe~17i_b zL=pxiUc4Bv<`SwGagJG^#N}wTWIub`TSx-;9`W#-wNY5I-r|JpZRY0ijQMBc%y3G6 zC|F*opk45anw|<~Rub;U9ODYQ1f}-&F^(R&?XZXewqD}BQC`vHWl}+ZManZH5;-kQMrMA7wdxIa z9K%IGYXRYCliWg8Q+75fVIbAtrDBKO2%e2LHr>PCWoADNTY-zB!opaozaR^+35r>u z)~-bK?Pl9$2&yYcIEX6=?linxi%{txqC6Lm1Hkg~5<`oEp~vmpiGc^@%Df&}iLz=y zF2G^NHlchy1G#@57KG-vW=7ke<1HVF{7(2XvuH7GPl4pRR&P&_?&saB>`wNY2^5OX zt(r;~M1g}6xp-(O)kFhJ)g3H#KA}I87GR+nCILo$^9@?OrW{9ggW~L8AGlbejxtUU z=`PjkLw&Dl@s}@-XX|^k(wC@S&-HFP*d8t3Bd_v24OAiBN43ungRZ4weMbI$_fN7u%R6wf; zBeY*_+YnjIjAO;)4YBm*)7{y4cwXml>dc=6rW574yb2AgWDo^K;RFNktJBvmw$If( z5CDwZ`1qziU%T%fd%|U|p8M6QFSCSZm?-<@t(Op+m@+joEIot+)RtX4cdb7P<_j-tm;N zeCib0r6;4FDTE&%5jgK&nkJP8o2+@KLmD1)Wh7RyDeub*9r70(lo#u9kL_wjtxT#vKWb|;*%riVkR(#}l_R_*HP zr{gF7x5Do|Zoe<#nMaC+FMAHm*pY=(Qb}d+;6Nl>`my~DZ$rD`(xwrIy z;FILBSTE14`t#3DY9+`g$t8yu+?g?>l3Y!3y-)PN|BP>__qCKArXI!Qd{pTpe4> zX^r<)! z6ax50MD1a&P~;m|^m{LFv`-jpNRPg}u6zBA4xFLkkgkT)Q8qRRPX^|17lQw8S7M3A zqZh}mgTbW9_639;D=C&50e<9p^EtdgMV}vlsoWk9iR}#W<%RUvluCK06;yd{LavzW zJ5YKIX3&)SEg3G%Uw@v}&**)vEg5#9hzP2p7J<}fFN3G2$&m-`kxDuSXOO9{M?H&6 z?uAcPf0}5$`2Li2w%X^IAUx;DQ3=`*nQEsVEk}_^)!}fGC9MYW9^^wnKDlwW3(V`+08g7#HV}gz{v5sTG!U6E2z7R zzu^r$x)HzWa>zgkGX}L*ASU{Wc1OEXcpF@>vIr^&(i(R-fD6zbF<2Lsi%NghQ{r$) zcoTFeSekf9nw6!pm*-ex&g`g>ug-C$&e?>KMMk?gu`zj(K&doQnaNhOGuxFKSXg8* zh?F6F{Jx1GNRDdsScog7qEq@ce}bh7V9W7%I?LRd6;)LdTcwxDky(gmv*KWOu#)1GrD2FvH!TqHfh-VVwhfEoqS{gMi_z$l z$IYMF`*JXy@j_4&^G2vm=2a5idY~jchIOKfSSl7c_QF4959*JrY=tVSb#-3j zW>7@`PBT$%UVdQcb=VpUdd|4}@%}`}4~pGgT+#Ft4x4mEvWQJ?QBid1SaNDUZ>^6p zI`>FAvB*qG6}j#D`u8ZTH8B;VZGVI@m}6RiwV{i`!m2;prky*0dn{DO9UK>)Kzb(L zQp+M19MV!Is;vmNEGp%^L|V36fE*mriY>ObTBN$fQ0@vyA7~(&Bk@|dqh%4%+FZU- zz=FaJ&&!f}GPy0s;^B|plrSA%dvm92gVKfg-1la4oJ2huSeEG3&X~(4dRctx;A>kU5MdW* zMOjAf3#fae+#0?--ezmZ^L%RJ;52w1 zI9l#!(&k)_J&v!1krl~#bq$Lal0tjqB3+vA*`c!G07Nyh`8ZnhA7xN|wR~9J0+z=1 z6HTACrad6<5=soNEWf_2hq<+!4jESq35zcpCWMW~5zC9fLDx_DO0_KC&cBFlj|4oz0}JTL(K|=1rYfZImUh$e zbZN*cv3G`|OgHQ-E25aK%v`(jJgP>U!xL8pA=OyA$X(LShl=<`WnA}F+_y5ZDE z6N+FfQYqDmDS5S zG6(YGt46{oeSysxBB{d#XQEAV7#^5$O*IdBC&mF(CWV&dVJB=1{Z--vx>Phn1z5KD~#%myhxR}A<@l)om5gO3NMRj;iyajgK=CrswG4dcrj zW==Srs#po0CP~mJSh5;LVy$Xwyi07NF|&p|;|t8W$5i)8`RnMb269f2`OY9I4wpdV z<@kX|Fn{!smEpIi9GUPdaifF=L!o&?%QxdW6UD$SCF8RtLtnJ?iikI8cvEHU48L3* zxXXk)EpX3PKhrD;0KmQLMSF-rZ*dN4%v|<~5%f^Jy{?uhMpEF;7V)?ZBIGT~s7mumO!}nzMq(E^E z_VWv#xU*)%X!=+7$DCQD;8Y>rU1>1fusv=Ut=%#v%`M|&#S(wtBN`memwp`MZK z<3S>-({&#wuP}7KRX=~Nec#1u_K-z^x->mcptDPJuV42c;~o`?aa?X2{H)G`I+}fg zCg4M~RVF}<;c1D-CPEDqXNc-~Yp(qsdhUs(oY-T5yr!xt4`FJQL8%9DNj7wMH|^wJ zUEy9_;@Q|<%8EIFC!kOig}NF?(9ZN#k4Un~{v`4Nht^v4G|WHfqvtUwIk5Uwu{b8h z{kE+C@tS=8Oi1f!v>Vm_dKi2I#T(JoFmxM)9fVGCAW6A-MKfF}YZOtqVT!0YbmyJ1=#kTHSaG5N}EZDm^2Kl@QqZRk4;}HgYe1< zsdlyKFzcaH#f#B`()wAD5}37m(bcaQM~y9)C^_xU{ISm7W9J-NMj}0II(IZV)6jnl zy~k~-6g7fUMhj9-h#C?YbeEC80a>Q1(YKS@6e2(&^pHywl@HaGWXgzzMr!Yy7_V$0 z=MWCn?awA#?~!6S9F*td*qna$Fy5S9a-Pi_3K@5?!Z&YeT zmOX?uIKL@M}iUOn)bmg2KpVHqQuoS%a*C zazc&(Ex+Dzg zLgLb#DEC-Nd#eJ>V3mZv^EtMW(NQ5;8Fg$~5kej0PtM}q2Xc3DqpF!OXus(XaoP#k z4L}DM97qOEj=~cK##lpDNS7Thbly~7BcwDQe^D~>_tZ6ORq5Z}3XJ6D)_zalxTuya zd3sKqV8<6~_$}j|Z?aZ3ZT^!e(nIRG`j1<80Harf3)<<6Mw~vJDT-p1#LPx6>B=MWrJ< zh2P^Olw#}tB!yQWB;V#TDyC?}!({eK@-=V0@ZPGFmd50F?Y>bw&9WDr+V$;sAc*cr z5!UQ-T`09N?aMj8FZUEoY==jtTubheG1&1RHs_Ride|5mR69t{^gmg1QJr(A&Md3r z^Jb0Vj0G9~%?|RCBhpxJ0e8HPaQ1QV50l%;D*mW)Eyh?-G>zR~=ltC+cblmhH3BR@ z@Uo<%XK;bGax4%{R6`JM3bi2p)uR!OU zajQ{L(?)iw{0iV1Ts`yRcRzSr>U1rf65Dlayw&5M64zX(6DBVopqExgK;nwS5VX!9 zu5z|8hem2s1D-&w(NV*pZ(CA>g^m~I8>=(Z&PjHeN|>P5Xql5&>v}t0+W7HlZB8#B zOKxdY7M1$!be+w9)$=<2+55WUd-9-ly{grUg!V}Kyia*AekpxRX((o0(&udMP?f&9}uI&o~QxZ zod3Xily3Tg;aNe|UW^nQ!h$y<+*|%Tm4^U969(eiB9=Y~XvklnozFwzMQpvVp9^3w zmH9!%c5UZ-;DvGYRvQv+Tw-q|3$;B-b%3O=spWAAvBTNyd4_YlF_WYH_YA=}m$$K} zY4bN13*0r@aw(FDnoB`!RivuZh+MV%Vb2dpjx}gAgsxFB7TgS&S zg73qnI(@7~ZtyH1EW==orjp`%Cnax!JLo}!8>$?I52xbX%XTV^yGWY?pz^~2sg6|1|YN2z2%1gzYQ z-}h3U|9kUw=RKPthjU4}rfy*;ut8GXoYhKTWjBJA?Y<%?0tv3jQfT_`X25YDf`0es zaPs*^<}-QFYN4)wStjyumL)Vo`E3Bs8W4$x)pOrewnCG|Ro!g)Ep?bUKU66KXG3%;qtI==+LHkMBB&rSBJ z$0sF3$>Y=vw3c*A68&6rdKyI91=o7`=Xn*5*W&@(V)x1gOV)ncUtd$jnHc=;*CFO? zzR%LVZx8LtIqGm2JnLkl%U)oZR;WeY4HqvB%?!q>*>4BI=V{eGpNSLK-4ElLi7Lel zeP#S0{*k|Pt=!o~0TIw5FW`Zs?!UWQJL;V;9*%?Dt{%chGN@rS_^wifm~ycROj(oD z=lF{0UrB2$4#)&T@nghV{Gv{<$WD=XSJyl_1gCh?Nwx`O-`^9%v_CJa_qw}%uQxGP zR^-6wt0V;(MYU#AG#oN0%8eTcFSud~j`>Dz%Loudcgfq^8kg)Co~2SRZ4r9Ew%8f; z*S?ZZa^CLjczupFDz~iGvP&%`l3{)udj>8qCb5he$$q%W4YQ) z)~HmjT|B>QV6G*dzXLym98u;nW=Ja7Vv^+lxGWAT1G53i*U6Bj@X{Xm{G98){KV1T zxCuPT_4IA_NpNNI=Su-(nYfbFMz!#u%{QrqA8vR&49-sf5TnTNWs|(C-q42A?>DH= zvi{|8aQAj>PiDdAlpzRBN*QX(gCRh`Nr^0=clpqw~6G0H>Os_<=SX-uTl%r6r@CJvzwMq_cGN zr+`e7bRGyiPq(&hdyxT&y)D?|CY3tyNF&t{H25@C%sa%uWstj@pZBwYyD_8g>tt>7 zdMS}XC@8@P!jfr{Au~*Cw=KQh#PG9SXpcTDN?@KY6OXwV|7z)DB zCdx9(G+SVP>cmASi+jHHc!k-R>6q{UqZ;$fOkGfoYD=DMD|2(JlsA+eh61+79ZTY@ zCHQkky*iefJUn@ut+pyN(R&^B9@b_i09!ij+rU=P7{Kq&o{?G6%i|!uZY`XPnaLsN zEdg1OcIa~LvZn$Q*(^SA0wohdBaX}8Z9FfaaySvnwsIy-n?ose%(;PoGi2uUS^WEX zrRVvqxUzx8IIY(df!@@SOh?f9pzlzezuWaONIQ|kNn|j=l4tv%IJ;-MRD<<56&oiZ z={Y|w4qgdYLsNoFMfFITkaEc{>MhsnLHiRv_dCWJ!a@Un>o5NZA?f2udynVQ5vc%N+!$YGlHvY*r#F#X9jN6{((I2hMun7^SV?=9ex{U zHU(QPM2U$rcqkYLsFq3bRw&%=ltnFe9R7i%cu2!&1P=~J)1&GkIy9)CpLtvnR9fzd z=(SEqSeU#d#u;IrT)ku3O{#wH)A*3}JH&gywHe|gX>-0ppG~sfY6=-8%w;0WR06Fk zKJ0WWPGs6^Z;fDfBcLhh3Rz$=|0!Cbk-Kt?X zs0GE6kZ1VgX(c_6wCU@zN2oGUvLiL;#Vt9)(dUX7YK(lV*6vftqlKhK##e{T=2*6G zBrnSr?w@?Wj+>tWyo)A18VWkBuKVpE)wb6@W;oK)9QrxdwzvCOAq@JnYAxg%ggL$bA|QGW>40f@$p z%z!KpE?J~i0rsgu%NIDZ4;?f>B}xAUstEu78>*D>c(Fa#+(>p18X)PgufZNznYeM5*Bi^hod9eW#VZmeI+HatIAd4U$S}Cs$iWGNgQTt&uQA55 z#8jRhfqfesizwaU!i(Js$r>a!C^o>rW>Ko8`PRLC$7$}og<<-O5H)}tgG9n4uE|pp z(*g*Q*WSWF>PDkS1a}C%#c}2&%HaoT8fN#C5jrJtQF6WR$ zUTWx;C8W(!N?`35@;d!qgT;u3RuRP~<>b$7_$T*J#?FH_S@%3*{2``Ibt-lQ*O6gB zbFR_l`jw#h_ZFNUD-gGH<^k1Z+ZFYXUxHnUt19qeI5&M#Kdq#u(dy6-2Mmcs2~-?_ z|Bl|xsH|I0N;6bX43{a3kwzIk{cB=kk@4!vXtx@3ft;s0Lsv1=)e;rM*Oh^7yo!|y7}(*vir8;D#j z@M>m{Gze^0+TdO1V1ipkc>(^FwQ}JM_js%%otpPS;a1@{0$DbDmc{#;Zq()Tyscer zteZtlaNX`|C%S3_qRZ5UHb0z&%G>9JcFPhYZp=u_hm9{&dTYTV7?nNb=@-}Ib#CAV zg1pM@b>%ek^+cfO{ho=@dppB^y`=(d2WlvhNlTbP)}fV*MwwCny+3cG)0cMZzVF4N zBgV}s)X762P(Vyj1oHwy$tag5D^|RnbLgr!3TSI!J^I)7!)sfan4E!f(M%Qev2`(5kzHlM5C z{n0RziIMX;UyZPR2?Pv=Dys~Xb)S+jW#+HHXU2RGRl0`Q0Rpi7O|UC29qewIrMn#k zVN~Aj+2XT5`G(Q^u#C|A`StuQ6SVEQ#eLo5_gNiDk1{0(V}q%2yo&UvOX3E%KBoT- z`%EPinZ@U7Y&P-_f!BW1oYrB;EIkj#S%*aaG`DHIX!L>MDzjxj%l9`JCJ@$U>abXK SH~l|%XeCAEL~4W#0{;( + +

        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Away.html b/dist/components/Persona/Persona.Presence.Away.html new file mode 100644 index 000000000..54c341ab9 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Away.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Blocked.html b/dist/components/Persona/Persona.Presence.Blocked.html new file mode 100644 index 000000000..5ea8249a9 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Blocked.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Busy.html b/dist/components/Persona/Persona.Presence.Busy.html new file mode 100644 index 000000000..75b2ae282 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Busy.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Dnd.html b/dist/components/Persona/Persona.Presence.Dnd.html new file mode 100644 index 000000000..ffec1605a --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Dnd.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Offline.html b/dist/components/Persona/Persona.Presence.Offline.html new file mode 100644 index 000000000..99007a1c6 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Offline.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Square.Available.html b/dist/components/Persona/Persona.Presence.Square.Available.html new file mode 100644 index 000000000..a3ede2609 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Available.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Square.Away.html b/dist/components/Persona/Persona.Presence.Square.Away.html new file mode 100644 index 000000000..69fc097ce --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Away.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Square.Blocked.html b/dist/components/Persona/Persona.Presence.Square.Blocked.html new file mode 100644 index 000000000..fa5a85ac9 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Blocked.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Square.Busy.html b/dist/components/Persona/Persona.Presence.Square.Busy.html new file mode 100644 index 000000000..b20903e98 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Busy.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Square.Dnd.html b/dist/components/Persona/Persona.Presence.Square.Dnd.html new file mode 100644 index 000000000..a75950758 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Dnd.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Presence.Square.Offline.html b/dist/components/Persona/Persona.Presence.Square.Offline.html new file mode 100644 index 000000000..dfd9a06d7 --- /dev/null +++ b/dist/components/Persona/Persona.Presence.Square.Offline.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Small.html b/dist/components/Persona/Persona.Small.html new file mode 100644 index 000000000..e98607ead --- /dev/null +++ b/dist/components/Persona/Persona.Small.html @@ -0,0 +1,14 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        + diff --git a/dist/components/Persona/Persona.Square.ExtraLarge.html b/dist/components/Persona/Persona.Square.ExtraLarge.html new file mode 100644 index 000000000..d256b8354 --- /dev/null +++ b/dist/components/Persona/Persona.Square.ExtraLarge.html @@ -0,0 +1,15 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        In a meeting
        +
        Available at 4:00pm
        +
        +
        diff --git a/dist/components/Persona/Persona.Square.ExtraSmall.html b/dist/components/Persona/Persona.Square.ExtraSmall.html new file mode 100644 index 000000000..221621a96 --- /dev/null +++ b/dist/components/Persona/Persona.Square.ExtraSmall.html @@ -0,0 +1,12 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        +
        diff --git a/dist/components/Persona/Persona.Square.Large.html b/dist/components/Persona/Persona.Square.Large.html new file mode 100644 index 000000000..c44203166 --- /dev/null +++ b/dist/components/Persona/Persona.Square.Large.html @@ -0,0 +1,14 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        In a meeting
        +
        +
        diff --git a/dist/components/Persona/Persona.Square.Small.html b/dist/components/Persona/Persona.Square.Small.html new file mode 100644 index 000000000..ebf9c829b --- /dev/null +++ b/dist/components/Persona/Persona.Square.Small.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Square.Tiny.html b/dist/components/Persona/Persona.Square.Tiny.html new file mode 100644 index 000000000..a1f455304 --- /dev/null +++ b/dist/components/Persona/Persona.Square.Tiny.html @@ -0,0 +1,8 @@ + + +
        +
        +
        +
        Alton Lafferty
        +
        +
        diff --git a/dist/components/Persona/Persona.Square.html b/dist/components/Persona/Persona.Square.html new file mode 100644 index 000000000..ea8eceef3 --- /dev/null +++ b/dist/components/Persona/Persona.Square.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.Tiny.html b/dist/components/Persona/Persona.Tiny.html new file mode 100644 index 000000000..65acaf3bd --- /dev/null +++ b/dist/components/Persona/Persona.Tiny.html @@ -0,0 +1,9 @@ + + +
        +
        +
        +
        Alton Lafferty
        +
        +
        + diff --git a/dist/components/Persona/Persona.css b/dist/components/Persona/Persona.css new file mode 100644 index 000000000..f49dabc36 --- /dev/null +++ b/dist/components/Persona/Persona.css @@ -0,0 +1,500 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} diff --git a/dist/components/Persona/Persona.html b/dist/components/Persona/Persona.html new file mode 100644 index 000000000..c7a9baaec --- /dev/null +++ b/dist/components/Persona/Persona.html @@ -0,0 +1,13 @@ + + +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Accountant
        +
        +
        diff --git a/dist/components/Persona/Persona.json b/dist/components/Persona/Persona.json new file mode 100644 index 000000000..0ed1a0160 --- /dev/null +++ b/dist/components/Persona/Persona.json @@ -0,0 +1,191 @@ +{ + "name": "Persona", + "notes": "The persona component is used to represent a person. A placeholder icon is included in every persona as a fallback for when there is no img src or the img hasn't been received yet from the server.", + "description": "The persona component is used to represent a person. Circular framing of the user's avatar is currently the default along with circular presence indicators. A placeholder icon is included in every persona as a fallback for when there is no img src or the img hasn't been received yet from the server.", + "template": "Persona.html", + "class": "ms-Persona", + "wrapBranches": true, + "fileOrder": [ + "Persona.Tiny.html", + "Persona.ExtraSmall.html", + "Persona.Small.html", + "Persona.html", + "Persona.Large.html", + "Persona.ExtraLarge.html", + "Persona.Square.Tiny.html", + "Persona.Square.ExtraSmall.html", + "Persona.Square.Small.html", + "Persona.Square.html", + "Persona.Square.Large.html", + "Persona.Square.ExtraLarge.html", + "Persona.Presence.Available.html", + "Persona.Presence.Away.html", + "Persona.Presence.Blocked.html", + "Persona.Presence.Busy.html", + "Persona.Presence.Dnd.html", + "Persona.Presence.Offline.html", + "Persona.Presence.Square.Available.html", + "Persona.Presence.Square.Away.html", + "Persona.Presence.Square.Blocked.html", + "Persona.Presence.Square.Busy.html", + "Persona.Presence.Square.Dnd.html", + "Persona.Presence.Square.Offline.html", + "Persona.Initials.html" + ], + "branches": [ + { + "name": "Sizes", + "default": true, + "branches": [ + { + "name": "Tiny/recipient", + "notes": "This one is usually used within a People Picker to represent a person in a minimal way.", + "class": "ms-Persona--tiny", + "branches": [ + { + "name": "Editable", + "default": true + }, + { + "name": "Read-only", + "class": "ms-Persona--readonly" + } + ] + }, + { + "name": "Extra small", + "class": "ms-Persona--xs", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Small", + "class": "ms-Persona--sm", + "notes": "This should be no smaller than...", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Medium", + "default": true, + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Large", + "class": "ms-Persona--lg", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Extra large", + "class": "ms-Persona--xl", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + } + ] + }, + { + "name": "Presence", + "notes": "An extra large Persona is shown here to better see the presence indicator. The same options and appearance apply to all sizes.", + "class": "ms-Persona--xl", + "branches": [ + { + "name": "Available", + "class": "ms-Persona--available", + "default": true + }, + { + "name": "Away", + "class": "ms-Persona--away" + }, + { + "name": "Blocked", + "class": "ms-Persona--blocked" + }, + { + "name": "Busy", + "class": "ms-Persona--busy" + }, + { + "name": "Do not disturb", + "class": "ms-Persona--dnd" + }, + { + "name": "Offline", + "class": "ms-Persona--offline" + }, + { + "name": "No presence", + "notes": "The presence indicator is not required.", + "template": "Persona.No-Presence.html" + } + ] + } + ] +} diff --git a/dist/components/Persona/Persona.min.css b/dist/components/Persona/Persona.min.css new file mode 100644 index 000000000..d63dca156 --- /dev/null +++ b/dist/components/Persona/Persona.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8} \ No newline at end of file diff --git a/dist/components/Persona/Persona.scss b/dist/components/Persona/Persona.scss new file mode 100644 index 000000000..eb152d317 --- /dev/null +++ b/dist/components/Persona/Persona.scss @@ -0,0 +1,595 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Persona styles + + +//= Colors used in the initials color block +$ms-color-initials-lightBlue: #6ba5e7; +$ms-color-initials-blue: #2d89ef; +$ms-color-initials-darkBlue: #2b5797; +$ms-color-initials-teal: #00aba9; +$ms-color-initials-lightGreen: #99b433; +$ms-color-initials-green: #00a300; +$ms-color-initials-darkGreen: #1e7145; +$ms-color-initials-lightPink: #e773bd; +$ms-color-initials-pink: #ff0097; +$ms-color-initials-magenta: #7e3878; +$ms-color-initials-purple: #603cba; +$ms-color-initials-black: #1d1d1d; +$ms-color-initials-orange: #da532c; +$ms-color-initials-red: #ee1111; +$ms-color-initials-darkRed: #b91d47; + + +.ms-Persona { + @include ms-font-m; + @include ms-u-normalize; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: $ms-zIndex-back; + + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } +} + +//= Note: The doughboy placeholder is being deprecated. +// The initials color block (.ms-Persona-initials) will be used going forward +// as a fallback when the persona does not have an image. +.ms-Persona-placeholder { + color: $ms-color-white; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: $ms-color-white; + font-size: $ms-font-size-l; + font-family: $ms-font-family-light; + line-height: 48px; + + &.ms-Persona-initials--lightBlue { + background-color: $ms-color-initials-lightBlue; + } + &.ms-Persona-initials--blue { + background-color: $ms-color-initials-blue; + } + &.ms-Persona-initials--darkBlue { + background-color: $ms-color-initials-darkBlue; + } + &.ms-Persona-initials--teal { + background-color: $ms-color-initials-teal; + } + &.ms-Persona-initials--lightGreen { + background-color: $ms-color-initials-lightGreen; + } + &.ms-Persona-initials--green { + background-color: $ms-color-initials-green; + } + &.ms-Persona-initials--darkGreen { + background-color: $ms-color-initials-darkGreen; + } + &.ms-Persona-initials--lightPink { + background-color: $ms-color-initials-lightPink; + } + &.ms-Persona-initials--pink { + background-color: $ms-color-initials-pink; + } + &.ms-Persona-initials--magenta { + background-color: $ms-color-initials-magenta; + } + &.ms-Persona-initials--purple { + background-color: $ms-color-initials-purple; + } + &.ms-Persona-initials--black { + background-color: $ms-color-initials-black; + } + &.ms-Persona-initials--orange { + background-color: $ms-color-initials-orange; + } + &.ms-Persona-initials--red { + background-color: $ms-color-initials-red; + } + &.ms-Persona-initials--darkRed { + background-color: $ms-color-initials-darkRed; + } +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=""] { + display: none; +} + +.ms-Persona-presence { + background-color: $ms-color-presence-available; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid $ms-color-white; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + @include noWrap(); + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-l; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: $ms-color-neutralSecondary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-s; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; // Hidden on default persona +} + + +//== Modifier: Persona with square images +// +.ms-Persona.ms-Persona--square { + .ms-Persona-imageArea { + background-color: $ms-color-neutralTertiary; + border-radius: 0; + } + + .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; + + @media screen and (-ms-high-contrast: active) { + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } + } +} + + +//== Modifier: Tiny Persona +// +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; + + .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; + } + + .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; + + @media screen and (-ms-high-contrast: active) { + top: 9px; + border: 1px solid $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border: 1px solid $ms-color-black; + } + } + + .ms-Persona-details { + padding-left: 20px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 9px; + } + + .ms-Persona-secondaryText { + display: none; + } +} + + +//== Modifier: Tiny Persona with read only state +// +// This variant includes a semicolon, and is +// most often presented within a People Picker. +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; + + .ms-Persona-primaryText:after { + content: ';'; + } +} + + +//== Modifier: Tiny Square Persona +// +.ms-Persona.ms-Persona--square.ms-Persona--tiny { + .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; + } +} + + +//== Modifier: Extra Small Persona +// +.ms-Persona.ms-Persona--xs { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-s; + line-height: 32px; + } + + .ms-Persona-presence { + left: 19px; + } + + .ms-Persona-details { + padding-left: 8px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + padding-top: 3px; + } + + .ms-Persona-secondaryText { + display: none; + } +} + + +//== Modifier: Extra Small Square Persona +// +.ms-Persona.ms-Persona--square.ms-Persona--xs { + .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; + } +} + + +//== Modifier: Small Persona +// +.ms-Persona.ms-Persona--sm { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 40px; + height: 40px; + } + + .ms-Persona-placeholder { + font-size: 38px; + top: 5px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-m; + line-height: 40px; + } + + .ms-Persona-presence { + left: 27px; + } + + .ms-Persona-details { + padding-left: 8px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-m; + } + + .ms-Persona-primaryText, + .ms-Persona-secondaryText { + padding-top: 1px; + } +} + + +//== Modifier: Small Square Persona +// +.ms-Persona.ms-Persona--square.ms-Persona--sm { + .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; + } +} + + +//== Modifier: Large Persona +// +.ms-Persona.ms-Persona--lg { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 72px; + height: 72px; + } + + .ms-Persona-placeholder { + font-size: 67px; + top: 10px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-xxl; + line-height: 72px; + } + + .ms-Persona-presence { + left: 49px; + } + + .ms-Persona-secondaryText { + padding-top: 3px; + } + + .ms-Persona-tertiaryText { + padding-top: 5px; + } + + .ms-Persona-tertiaryText { + display: block; // Show tertiary text + } +} + + +//== Modifier: Large Square Persona +// +.ms-Persona.ms-Persona--square.ms-Persona--lg { + .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; + } +} + + +//== Modifier: Extra Large Persona +// +.ms-Persona.ms-Persona--xl { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 100px; + height: 100px; + } + + .ms-Persona-placeholder { + font-size: 95px; + top: 12px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-su; + line-height: 100px; + } + + .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; + } + + .ms-Persona-details { + padding-left: 20px; + } + + .ms-Persona-primaryText { + font-size: $ms-font-size-xl; + font-family: $ms-font-family-semilight; + margin-top: 0; + } + + .ms-Persona-secondaryText { + padding-top: 2px; + } + + .ms-Persona-tertiaryText, + .ms-Persona-optionalText { + padding-top: 5px; + display: block; // Show tertiary and optional text + } +} + + +//== Modifier: Extra Large Square Persona +// +.ms-Persona.ms-Persona--square.ms-Persona--xl { + .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; + } +} + + +//== Modifier: Persona with darker text +// +// Note: Typically applied when the component has a colored background. +.ms-Persona.ms-Persona--darkText { + .ms-Persona-primaryText { + color: $ms-color-neutralDark; + } + + .ms-Persona-secondaryText, + .ms-Persona-tertiaryText, + .ms-Persona-optionalText { + color: $ms-color-neutralPrimary; + } +} + + +//== Modifier: Selectable Persona +// +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; + + &:not(.ms-Persona--xl) { + &:hover, + &:focus { + background-color: $ms-color-themeLighter; + outline: 1px solid transparent; + } + } +} + + +//== Presence indicator variants. + +//== Modifier: Persona with available presence +// +.ms-Persona.ms-Persona--available { + .ms-Persona-presence { + background-color: $ms-color-presence-available; + } +} + + +//== Modifier: Persona with away presence +// +.ms-Persona.ms-Persona--away { + .ms-Persona-presence { + background-color: $ms-color-presence-away; + } +} + + +//== Modifier: Persona with blocked presence +// +.ms-Persona.ms-Persona--blocked { + .ms-Persona-presence { + background-color: $ms-color-presence-blocked-background; + // Use a gradient to include the stripe on modern browsers. + background-image: linear-gradient( to bottom, $ms-color-presence-blocked-background 0%, $ms-color-presence-blocked-background 48%, $ms-color-presence-blocked-line 40%, $ms-color-presence-blocked-line 58%, $ms-color-presence-blocked-background 52%, $ms-color-presence-blocked-background 100% ); + } +} + + +//== Modifier: Persona with busy presence +// +.ms-Persona.ms-Persona--busy { + .ms-Persona-presence { + background-color: $ms-color-presence-busy-average; + // Replace solid background with stripes on modern browsers. + background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 1px, $ms-color-presence-busy-stripe-dark 0px, $ms-color-presence-busy-stripe-dark 2px ); + } +} + + +//== Modifier: Square Persona with busy presence +// +.ms-Persona.ms-Persona--busy.ms-Persona--square { + .ms-Persona-presence { + background-color: $ms-color-presence-busy-average; + // Replace solid background with stripes on modern browsers. + background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 3px, $ms-color-presence-busy-stripe-dark 3px, $ms-color-presence-busy-stripe-dark 6px ); + } +} + + +//== Modifier: Persona with do not disturb presence +// +.ms-Persona.ms-Persona--dnd { + .ms-Persona-presence { + background-color: $ms-color-presence-dnd-background; + // Use a gradient to include the stripe on modern browsers. + background-image: linear-gradient( to bottom, $ms-color-presence-dnd-background 0%, $ms-color-presence-dnd-background 48%, $ms-color-presence-dnd-line 48%, $ms-color-presence-dnd-line 52%, $ms-color-presence-dnd-background 52%, $ms-color-presence-dnd-background 100% ); + } +} + + +//== Modifier: Persona with offline presence +// +.ms-Persona.ms-Persona--offline { + .ms-Persona-presence { + background-color: $ms-color-presence-offline; + } +} diff --git a/dist/components/PersonaCard/PersonaCard.Square.html b/dist/components/PersonaCard/PersonaCard.Square.html new file mode 100644 index 000000000..9862fa807 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.Square.html @@ -0,0 +1,168 @@ +
        +
        +
        +
        + + +
        +
        +
        +
        Alton Lafferty
        +
        Interior Designer, Contoso
        +
        Office: 7/1234
        +
        Available - Video capable
        +
        +
        +
        +
          +
          • +
          • +
          • +
          • +
        • View profile
          • +
          • +
        +
        +
          +
        • +
          Lync: Start Lync call
          +
          • +
        • +
          Personal: 555.206.2443
          +
          Work: 555.929.8240
          +
          • +
        • +
          Skype: Start Skype call
          +
          • +
        • +
          Personal: alton.lafferty@outlook.com
          +
          Work: altonlafferty@contoso.com
          +
          • + +
        • +
          +
          +
            +
          • + +
            • +
          • + +
            • +
          +
          +
          +
          Manager
          +
            +
          • + +
            • +
          +
          +
          +
          Staff
          +
            +
          • + +
            • +
          • + +
            • +
          • + +
            • +
          • + +
            • +
          +
          +
          +
          • + +
        +
        +
        \ No newline at end of file diff --git a/dist/components/PersonaCard/PersonaCard.css b/dist/components/PersonaCard/PersonaCard.css new file mode 100644 index 000000000..6dca4a09d --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.css @@ -0,0 +1,859 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} diff --git a/dist/components/PersonaCard/PersonaCard.html b/dist/components/PersonaCard/PersonaCard.html new file mode 100644 index 000000000..b00b5e3f8 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.html @@ -0,0 +1,170 @@ + + +
        +
        +
        +
        +
        AL
        + +
        +
        +
        +
        Alton Lafferty
        +
        Interior Designer, Contoso
        +
        Office: 7/1234
        +
        Available - Video capable
        +
        +
        +
        +
          +
          • +
          • +
          • +
          • +
        • View profile
          • +
          • +
        +
        +
          +
        • +
          Lync: Start Lync call
          +
          • +
        • +
          Personal: 555.206.2443
          +
          Work: 555.929.8240
          +
          • +
        • +
          Skype: Start Skype call
          +
          • +
        • +
          Personal: alton.lafferty@outlook.com
          +
          Work: altonlafferty@contoso.com
          +
          • + +
        • +
          +
          +
            +
          • + +
            • +
          • + +
            • +
          +
          +
          +
          Manager
          +
            +
          • + +
            • +
          +
          +
          +
          Staff
          +
            +
          • + +
            • +
          • + +
            • +
          • + +
            • +
          • + +
            • +
          +
          +
          +
          • + +
        +
        +
        diff --git a/dist/components/PersonaCard/PersonaCard.json b/dist/components/PersonaCard/PersonaCard.json new file mode 100644 index 000000000..226b1c69d --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.json @@ -0,0 +1,28 @@ +{ + "name": "PersonaCard", + "notes": "", + "description": "The visualization of details of an individual including Skype contact details, email, location information, and organizational placement via the embedded {0} OrgChart {1}. PersonaCards are often invoked when a {2} Persona {3} is hovered over or tapped.", + "template": "PersonaCard.html", + "class": "ms-PersonaCard", + "wrapBranches": true, + "fileOrder": [ + "PersonaCard.html", + "PersonaCard.Square.html" + ], + "dependencies": [ + "Persona", + "OrgChart", + "Link" + ], + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Circles", + "notes": "This persona card uses circle personas and has the org chart built in.", + "class": "ms-PersonaCard--circles" + } + ] +} diff --git a/dist/components/PersonaCard/PersonaCard.min.css b/dist/components/PersonaCard/PersonaCard.min.css new file mode 100644 index 000000000..2257938f8 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0;outline:transparent}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}} \ No newline at end of file diff --git a/dist/components/PersonaCard/PersonaCard.scss b/dist/components/PersonaCard/PersonaCard.scss new file mode 100644 index 000000000..745d64a14 --- /dev/null +++ b/dist/components/PersonaCard/PersonaCard.scss @@ -0,0 +1,289 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Persona Card styles + + +// Small +// +// The persona card docks to the bottom of the viewport. +.ms-PersonaCard { + @include ms-font-m; + @include ms-u-slideUpIn10; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: $ms-color-neutralLighter; +} + +// Overrides for persona +.ms-PersonaCard-persona .ms-Persona { + .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; + } + + .ms-Persona-image { + width: 80px; + height: 80px; + } + + .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; + } + + .ms-Persona-initials { + font-size: $ms-font-size-xxl; + line-height: 80px; + } + + .ms-Persona-presence { + border-color: $ms-color-neutralLighter; + left: 77px; + bottom: 12px; + } + + .ms-Persona-tertiaryText, + .ms-Persona-optionalText { + display: block; // Show tertiary and optional text + } +} + +.ms-PersonaCard-actions { + @include ms-u-borderBox; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + background-color: $ms-color-white; + height: 48px; +} + +.ms-PersonaCard-action { + display: inline-block; + cursor: pointer; + font-size: $ms-font-size-l; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: $ms-color-neutralSecondary; + position: relative; + @include ms-u-borderBox; + + &:hover { + color: $ms-color-neutralDark; + } + + &:active { + color: $ms-color-themePrimary; + } + + // Currently-selected action + &.is-active { + color: $ms-color-themePrimary; + + // Arrow + &:after { + @include ms-u-borderBox; + @include rotate(45deg); + content: ""; + width: 10px; + height: 10px; + border: 1px solid $ms-color-neutralTertiaryAlt; + background-color: $ms-color-white; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; + } + } +} + +.ms-PersonaCard-overflow { + @extend .ms-PersonaCard-action; + font-size: $ms-font-size-m; + color: $ms-color-neutralPrimary; + float: right; + margin-top: -1px; + + &:hover { + color: $ms-color-themePrimary; + } +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: $ms-color-white; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: $ms-color-neutralSecondary; + padding: 9px 20px; + transition: max-height $ms-duration2 $ms-ease1 0.2s; + box-sizing: border-box; + + // State: Contents are collapsed to a single line. + &.is-collapsed { + height: 30px; + overflow: hidden; + + // Show the expander icon. + .ms-PersonaCard-detailExpander:after { + content: '\e088'; + } + } +} + +// Active detail items +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} +.ms-PersonaCard-detailMail { + margin-left: -300%; +} +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +// Inactive Items +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +// Icon to expand a collapsed actionDetails section. +.ms-PersonaCard-detailExpander { + color: $ms-color-neutralPrimary; + cursor: pointer; + font-size: $ms-font-size-m-plus; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; + + &:after { + @include ms-Icon; + content: '\e087'; + } +} + +.ms-PersonaCard-detailLine { + color: $ms-color-neutralPrimary; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: $ms-color-neutralSecondary; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart { + &:after { + display: none; // Hide arrow for orgchart action + } +} + + +//== Modifier: Persona card with square personas +// +.ms-PersonaCard.ms-PersonaCard--square { + .ms-PersonaCard-persona { + .ms-Persona-imageArea, + .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; + } + + .ms-Persona-presence { + left: 0; + } + } +} + + +@media (min-width: $ms-screen-md-min) { + // Undock the persona card and give it a shadow. + .ms-PersonaCard { + @include drop-shadow(); + max-width: 360px; + position: relative; + } +} diff --git a/dist/components/Pivot/Pivot.Large.html b/dist/components/Pivot/Pivot.Large.html new file mode 100644 index 000000000..6c0d955a7 --- /dev/null +++ b/dist/components/Pivot/Pivot.Large.html @@ -0,0 +1,10 @@ + + +
          +
        • My files
          • +
        • Recent
          • +
        • Shared with me
          • +
        • + +
          • +
        diff --git a/dist/components/Pivot/Pivot.Tabs.Large.html b/dist/components/Pivot/Pivot.Tabs.Large.html new file mode 100644 index 000000000..9c77826ca --- /dev/null +++ b/dist/components/Pivot/Pivot.Tabs.Large.html @@ -0,0 +1,10 @@ + + +
          +
        • My files
          • +
        • Recent
          • +
        • Shared with me
          • +
        • + +
          • +
        diff --git a/dist/components/Pivot/Pivot.Tabs.html b/dist/components/Pivot/Pivot.Tabs.html new file mode 100644 index 000000000..910aa420a --- /dev/null +++ b/dist/components/Pivot/Pivot.Tabs.html @@ -0,0 +1,10 @@ + + +
          +
        • My files
          • +
        • Recent
          • +
        • Shared with me
          • +
        • + +
          • +
        diff --git a/dist/components/Pivot/Pivot.css b/dist/components/Pivot/Pivot.css new file mode 100644 index 000000000..69f2f5ea6 --- /dev/null +++ b/dist/components/Pivot/Pivot.css @@ -0,0 +1,242 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + position: relative; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 40px; + margin-right: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus, +.ms-Pivot-link:active { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff !important; + background-color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7 !important; +} + +@media (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + } +} diff --git a/dist/components/Pivot/Pivot.html b/dist/components/Pivot/Pivot.html new file mode 100644 index 000000000..374ee99fd --- /dev/null +++ b/dist/components/Pivot/Pivot.html @@ -0,0 +1,10 @@ + + +
          +
        • My files
          • +
        • Recent
          • +
        • Shared with me
          • +
        • + +
          • +
        diff --git a/dist/components/Pivot/Pivot.json b/dist/components/Pivot/Pivot.json new file mode 100644 index 000000000..3ce252690 --- /dev/null +++ b/dist/components/Pivot/Pivot.json @@ -0,0 +1,45 @@ +{ + "name": "Pivot", + "notes": "", + "description": "A navigational, layout component that allows users to switch between different sets of content. Fabric provides a typography focused variant - Pivot - and a tabular variant - Tabs - along with two sizes for each. All variants include an overflow button that can be used in conjunction with {0} ContextualMenu {1} to present more options to the user.", + "template": "Pivot.html", + "class": "ms-Pivot", + "wrapBranches": true, + "fileOrder": [ + "Pivot.html", + "Pivot.Large.html", + "Pivot.Tabs.html", + "Pivot.Tabs.Large.html" + ], + "branches": [ + { + "name": "Pivots", + "default": true, + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Large", + "class": "ms-Pivot--large" + } + ] + }, + + { + "name": "Tabs", + "class": "ms-Pivot--tabs", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Large", + "class": "ms-Pivot--large" + } + ] + } + ] +} diff --git a/dist/components/Pivot/Pivot.min.css b/dist/components/Pivot/Pivot.min.css new file mode 100644 index 000000000..7bef270b7 --- /dev/null +++ b/dist/components/Pivot/Pivot.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}} \ No newline at end of file diff --git a/dist/components/Pivot/Pivot.scss b/dist/components/Pivot/Pivot.scss new file mode 100644 index 000000000..ae1464add --- /dev/null +++ b/dist/components/Pivot/Pivot.scss @@ -0,0 +1,242 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Pivot and tab styles + + +.ms-Pivot { + @include ms-font-m; + @include ms-u-normalize; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: $ms-color-neutralPrimary; + display: inline-block; + position: relative; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-m-plus; + line-height: 40px; + margin-right: 8px; + + &:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + } + } + + &:hover, + &:focus, + &:active { + color: $ms-color-black; + cursor: pointer; + + + .ms-Pivot-dropdownIcon { + color: $ms-color-neutralDark; + } + } + + &:active { + font-family: $ms-font-family-semibold; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteSelected; + } + + &:after { + display: block; + } + } + + //== State: Selected + &.is-selected { + color: $ms-color-black; + font-family: $ms-font-family-semibold; + + @media screen and (-ms-high-contrast: active) { + color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + color: $ms-color-contrastWhiteSelected; + } + + &:after { + display: block; + } + + + .ms-Pivot-dropdownIcon { + color: $ms-color-neutralDark; + } + } +} + +.ms-Pivot-dropdownIcon { + font-size: $ms-font-size-m-plus + 1; + position: relative; + top: 2px; +} + +// Overflow (ellipsis) +.ms-Pivot-link.ms-Pivot-link--overflow { + color: $ms-color-neutralSecondary; + + &.is-selected { + color: $ms-color-themePrimary; + } + + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + color: $ms-color-neutralDark; + } + + &:active { + &:after { + display: none; + } + } +} + +// Ellipsis icon +.ms-Pivot-ellipsis { + font-size: $ms-font-size-m-plus; + position: relative; + top: 0; +} + + +//== Modifier: Large Pivots +// +.ms-Pivot.ms-Pivot--large { + .ms-Pivot-link { + font-size: $ms-font-size-l; + + &:active { + font-family: $ms-font-family-regular; + } + + &.is-selected { + font-family: $ms-font-family-regular; + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &:after { + font-size: $ms-font-size-l; + } + } +} + + +//== Modifier: Tabs +// +.ms-Pivot.ms-Pivot--tabs { + height: 40px; + + .ms-Pivot-link { + height: 40px; + background-color: $ms-color-neutralLighter; + line-height: 40px; + margin-right: -2px; // Remove space next to inline-block element + padding: 0 10px; + font-family: $ms-font-family-semilight !important; + + &:hover:not(.is-selected):not(.ms-Pivot-link--overflow), + &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: $ms-color-black; + } + + &:active { + color: $ms-color-white !important; + background-color: $ms-color-themePrimary; + font-family: $ms-font-family-semilight; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + color: $ms-color-white; + } + } + + //== State: Selected + &.is-selected { + background-color: $ms-color-themePrimary; + color: $ms-color-white; + font-family: $ms-font-family-semilight; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-contrastBlackSelected; + color: $ms-color-black; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-contrastWhiteSelected; + color: $ms-color-white; + } + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &:hover:not(.is-selected), + &:focus:not(.is-selected) { + background-color: $ms-color-white; + } + + &:active { + background-color: $ms-color-themePrimary !important; + } + } +} + + + +@media (min-width: $ms-screen-lg-min) { + .ms-Pivot-link { + font-size: $ms-font-size-m; + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &:after { + font-size: $ms-font-size-m; + } + } +} + + + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs { + .ms-Pivot-link { + &.is-selected { + font-family: $ms-font-family-semibold; + } + } + } +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.css b/dist/components/ProgressIndicator/ProgressIndicator.css new file mode 100644 index 000000000..b42295cf3 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.css @@ -0,0 +1,63 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ProgressIndicator-itemName { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.html b/dist/components/ProgressIndicator/ProgressIndicator.html new file mode 100644 index 000000000..1f58dbf24 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.html @@ -0,0 +1,10 @@ + + +
        +
        Example.jpg
        +
        +
        +
        +
        +
        My Progress Description
        +
        diff --git a/dist/components/ProgressIndicator/ProgressIndicator.json b/dist/components/ProgressIndicator/ProgressIndicator.json new file mode 100644 index 000000000..944be9699 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.json @@ -0,0 +1,7 @@ +{ + "name": "ProgressIndicator", + "notes": "A component for outputting determinate progress", + "description": "A simple, determinate progress indicator that allows the user to see the status of activities. Unlike the {0} Spinner {1}, ProgressIndicator should accurately display the progress of the activity while the Spinner is used when the time is indeterminate.", + "template": "ProgressIndicator.html", + "class": "ms-ProgressIndicator" +} diff --git a/dist/components/ProgressIndicator/ProgressIndicator.min.css b/dist/components/ProgressIndicator/ProgressIndicator.min.css new file mode 100644 index 000000000..2a06031c6 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}} \ No newline at end of file diff --git a/dist/components/ProgressIndicator/ProgressIndicator.scss b/dist/components/ProgressIndicator/ProgressIndicator.scss new file mode 100644 index 000000000..96ce1b702 --- /dev/null +++ b/dist/components/ProgressIndicator/ProgressIndicator.scss @@ -0,0 +1,56 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// ProgressIndicator Styles + + +$ProgressIndicatorMarginBetweenText: 8px; +$ProgressIndicatorButtonsWidth: 218px; +$ProgressIndicatorTextHeight: 18px; + +.ms-ProgressIndicator-itemName { + @include ms-font-m(); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: $ProgressIndicatorMarginBetweenText / 2; + line-height: $ProgressIndicatorTextHeight + 2; +} + +.ms-ProgressIndicator-itemDescription { + @include ms-font-m(); + color: $ms-color-neutralSecondaryAlt; + font-size: 11px; + line-height: $ProgressIndicatorTextHeight; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: $ProgressIndicatorMarginBetweenText 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: $ms-color-neutralLight; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } +} diff --git a/dist/components/SearchBox/SearchBox.css b/dist/components/SearchBox/SearchBox.css new file mode 100644 index 000000000..b352e4399 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.css @@ -0,0 +1,178 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + margin-bottom: 10px; + display: inline-block; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #600000; + } +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox.is-active .ms-SearchBox-closeButton { + display: block; + outline: transparent 1px solid; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; + background-color: transparent; + z-index: 5; +} + +.ms-SearchBox-field.hovering { + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + height: 32px; + width: 32px; + background-color: #0078d7; + text-align: center; + display: none; + font-size: 17px; + color: #ffffff; + z-index: 10; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} diff --git a/dist/components/SearchBox/SearchBox.html b/dist/components/SearchBox/SearchBox.html new file mode 100644 index 000000000..984d3ecf1 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.html @@ -0,0 +1,7 @@ + + +
        + + + +
        diff --git a/dist/components/SearchBox/SearchBox.json b/dist/components/SearchBox/SearchBox.json new file mode 100644 index 000000000..5af246866 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.json @@ -0,0 +1,20 @@ +{ + "name": "SearchBox", + "notes": "", + "description": "A basic Office 365 search field that includes a standard selection state and cancel button.", + "template": "SearchBox.html", + "class": "ms-SearchBox", + "dependencies": [ + "Label" + ], + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] +} diff --git a/dist/components/SearchBox/SearchBox.min.css b/dist/components/SearchBox/SearchBox.min.css new file mode 100644 index 000000000..ed6123f2b --- /dev/null +++ b/dist/components/SearchBox/SearchBox.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:1}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:2}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676} \ No newline at end of file diff --git a/dist/components/SearchBox/SearchBox.scss b/dist/components/SearchBox/SearchBox.scss new file mode 100644 index 000000000..d79b4d2d2 --- /dev/null +++ b/dist/components/SearchBox/SearchBox.scss @@ -0,0 +1,109 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Search box styles + + +.ms-SearchBox { + @include ms-font-m; + @include ms-u-normalize; + position: relative; + margin-bottom: 10px; + display: inline-block; + + // State: Disabled searchbox + &.is-disabled { + .ms-SearchBox-label { + @include ms-Label-is-disabled; + } + .ms-SearchBox-icon { + color: $ms-color-neutralTertiaryAlt; + } + .ms-SearchBox-field { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + } + + // State: Active searchbox + &.is-active { + .ms-SearchBox-closeButton { + display: block; + outline: transparent 1px solid; + } + } +} + +.ms-SearchBox-field { + position: relative; + @include ms-u-normalize; + border: 1px solid $ms-color-themeTertiary; + outline: transparent 1px solid; + border-radius: 0; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-m; + color: $ms-color-black; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; + background-color: transparent; + z-index: $ms-zIndex-middle; + + &.hovering { + border-color: $ms-color-themePrimary; + background-color: $ms-color-themeLighter; + + & + .ms-SearchBox-label { + color: $ms-color-black; + + .ms-Icon { + color: $ms-color-neutralPrimary; + } + } + } + + &:focus { + padding: 6px 32px 7px 10px; + border-color: $ms-color-themePrimary; + background-color: $ms-color-themeLighter; + } + + &::-ms-clear { + display: none; + } +} + +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + height: 32px; + width: 32px; + background-color: $ms-color-themePrimary; + text-align: center; + display: none; + font-size: $ms-font-size-l; + color: $ms-color-white; + z-index: $ms-zIndex-front; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: $ms-color-neutralSecondary; +} + +.ms-SearchBox-icon { + margin-right: 7px; + font-size: $ms-font-size-l; + color: $ms-color-neutralSecondaryAlt; +} diff --git a/dist/components/Spinner/Spinner.Large.html b/dist/components/Spinner/Spinner.Large.html new file mode 100644 index 000000000..a0eed672c --- /dev/null +++ b/dist/components/Spinner/Spinner.Large.html @@ -0,0 +1,3 @@ + + +
        diff --git a/dist/components/Spinner/Spinner.Message.Large.html b/dist/components/Spinner/Spinner.Message.Large.html new file mode 100644 index 000000000..aa806a87b --- /dev/null +++ b/dist/components/Spinner/Spinner.Message.Large.html @@ -0,0 +1,5 @@ + + +
        +
        Loading...
        +
        diff --git a/dist/components/Spinner/Spinner.Message.html b/dist/components/Spinner/Spinner.Message.html new file mode 100644 index 000000000..669b9c15f --- /dev/null +++ b/dist/components/Spinner/Spinner.Message.html @@ -0,0 +1,5 @@ + + +
        +
        Loading...
        +
        diff --git a/dist/components/Spinner/Spinner.css b/dist/components/Spinner/Spinner.css new file mode 100644 index 000000000..3bbcd4412 --- /dev/null +++ b/dist/components/Spinner/Spinner.css @@ -0,0 +1,52 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: #0078d7; + left: 28px; + top: 2px; +} diff --git a/dist/components/Spinner/Spinner.html b/dist/components/Spinner/Spinner.html new file mode 100644 index 000000000..dbbe8f5ee --- /dev/null +++ b/dist/components/Spinner/Spinner.html @@ -0,0 +1,3 @@ + + +
        diff --git a/dist/components/Spinner/Spinner.json b/dist/components/Spinner/Spinner.json new file mode 100644 index 000000000..ff1c312e2 --- /dev/null +++ b/dist/components/Spinner/Spinner.json @@ -0,0 +1,32 @@ +{ + "name": "Spinner", + "notes": "An animating activity indicator.", + "description": "A progress/loading indicator that is ideally used when the length of time to completion for a task is indeterminate. If the length of time is known or can be determined, use the {0} ProgressIndicator {1}", + "template": "Spinner.html", + "class": "ms-Spinner", + "wrapBranches": true, + "fileOrder": [ + "Spinner.html", + "Spinner.Large.html", + "Spinner.Message.html", + "Spinner.Message.Large.html" + ], + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Large", + "class": "ms-Spinner--large" + }, + { + "name": "Standard with message ", + "class": "ms-Spinner" + }, + { + "name": "Large with message", + "class": "ms-Spinner--large" + } + ] +} diff --git a/dist/components/Spinner/Spinner.min.css b/dist/components/Spinner/Spinner.min.css new file mode 100644 index 000000000..bf6e346ce --- /dev/null +++ b/dist/components/Spinner/Spinner.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px} \ No newline at end of file diff --git a/dist/components/Spinner/Spinner.scss b/dist/components/Spinner/Spinner.scss new file mode 100644 index 000000000..b8fd8a60e --- /dev/null +++ b/dist/components/Spinner/Spinner.scss @@ -0,0 +1,44 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Spinner styles + + +.ms-Spinner { + position: relative; + height: 20px; + + &.ms-Spinner--large { + height: 28px; + + .ms-Spinner-label { + left: 34px; + top: 6px; + } + } +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: $ms-color-themePrimary; + opacity: 0; + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } +} + +.ms-Spinner-label { + position: relative; + @include ms-font-s(); + color: $ms-color-themePrimary; + left: 28px; + top: 2px; +} diff --git a/dist/components/Table/Table.Fixed.html b/dist/components/Table/Table.Fixed.html new file mode 100644 index 000000000..1ea3f65a4 --- /dev/null +++ b/dist/components/Table/Table.Fixed.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        File nameLocationModifiedType
        Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.Candy canes bear claw marzipan icing wafer.Chocolate chocolate bar donut.Candy canes cupcake macaroon toffee.
        File nameLocationModifiedType
        File nameLocationModifiedType
        File nameLocationModifiedType
        diff --git a/dist/components/Table/Table.css b/dist/components/Table/Table.css new file mode 100644 index 000000000..8c86e2e52 --- /dev/null +++ b/dist/components/Table/Table.css @@ -0,0 +1,140 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table tr:hover, +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:before, +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:after, +.ms-Table-row.is-selected .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table thead .ms-Table-rowCheck:after, +.ms-Table-head .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} diff --git a/dist/components/Table/Table.html b/dist/components/Table/Table.html new file mode 100644 index 000000000..865074097 --- /dev/null +++ b/dist/components/Table/Table.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        File nameLocationModifiedType
        Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.Candy canes bear claw marzipan icing wafer.Chocolate chocolate bar donut.Candy canes cupcake macaroon toffee.
        File nameLocationModifiedType
        File nameLocationModifiedType
        File nameLocationModifiedType
        \ No newline at end of file diff --git a/dist/components/Table/Table.json b/dist/components/Table/Table.json new file mode 100644 index 000000000..9ac6467a3 --- /dev/null +++ b/dist/components/Table/Table.json @@ -0,0 +1,22 @@ +{ + "name": "Table", + "notes": "", + "description": "The table component provides a div-based way to visualize data in columns and rows. Although the table is responsive by nature, we recommend keeping the number of columns small if the table is intended to be viewed on mobile devices.", + "template": "Table.html", + "wrapBranches": true, + "class": "ms-Table", + "fileOrder": [ + "Table.html", + "Table.Fixed.html" + ], + "branches": [ + { + "name": "Default", + "default": true + }, + { + "name": "Fixed", + "class": "ms-Table--fixed" + } + ] +} diff --git a/dist/components/Table/Table.min.css b/dist/components/Table/Table.min.css new file mode 100644 index 000000000..421affa73 --- /dev/null +++ b/dist/components/Table/Table.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}} \ No newline at end of file diff --git a/dist/components/Table/Table.scss b/dist/components/Table/Table.scss new file mode 100644 index 000000000..2e23759d1 --- /dev/null +++ b/dist/components/Table/Table.scss @@ -0,0 +1,132 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Data table styles + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +// makes the table cells not expand with the content, keeping the table cells at a fixed size +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-s; + color: $ms-color-neutralPrimary; + + &:hover { + background-color: $ms-color-neutralLighter; + cursor: pointer; + outline: 1px solid transparent; + } + + // Rows can be selected. + &.is-selected { + background-color: $ms-color-themeLight; + + // A checkmark in a selected row. + .ms-Table-rowCheck { + background-color: $ms-color-themePrimary; + + // Hide the checkbox. + &:before { + display: none; + } + + // But show the mark. + &:after { + @include ms-Icon; + content: '\e041'; + color: $ms-color-white; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; + } + } + } +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +// Style the first row as a header. +.ms-Table thead th, +.ms-Table-head { + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-xs; + color: $ms-color-neutralSecondary; +} + +.ms-Table thead, +.ms-Table-head { + td, + th, + .ms-Table-cell, + .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid $ms-color-neutralLight; + } + + .ms-Table-rowCheck:after { + @include ms-Icon; + content: '\e041'; + color: $ms-color-neutralTertiary; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; + } +} + +// On selectable tables, each row has a checkbox. +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; + + // Empty checkbox. + &:before { + border: 1px solid $ms-color-neutralTertiary; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; + } +} + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Table-row { + // Rows can be selected. + &.is-selected { + // A checkmark in a selected row. + .ms-Table-rowCheck { + background: none; + // Show the checkbox. + &:before { + display: block; + } + } + } + } +} diff --git a/dist/components/TextField/TextField.Multiline.html b/dist/components/TextField/TextField.Multiline.html new file mode 100644 index 000000000..9caf28a16 --- /dev/null +++ b/dist/components/TextField/TextField.Multiline.html @@ -0,0 +1,6 @@ + + +
        + + +
        diff --git a/dist/components/TextField/TextField.Placeholder.html b/dist/components/TextField/TextField.Placeholder.html new file mode 100644 index 000000000..f8f321255 --- /dev/null +++ b/dist/components/TextField/TextField.Placeholder.html @@ -0,0 +1,10 @@ + + +
        + + +
        +
        + + +
        diff --git a/dist/components/TextField/TextField.Underlined.html b/dist/components/TextField/TextField.Underlined.html new file mode 100644 index 000000000..01205526c --- /dev/null +++ b/dist/components/TextField/TextField.Underlined.html @@ -0,0 +1,6 @@ + + +
        + + +
        diff --git a/dist/components/TextField/TextField.css b/dist/components/TextField/TextField.css new file mode 100644 index 000000000..a84d5d106 --- /dev/null +++ b/dist/components/TextField/TextField.css @@ -0,0 +1,344 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} diff --git a/dist/components/TextField/TextField.html b/dist/components/TextField/TextField.html new file mode 100644 index 000000000..a43010aa8 --- /dev/null +++ b/dist/components/TextField/TextField.html @@ -0,0 +1,7 @@ + + +
        + + + This should be your first and last name. +
        diff --git a/dist/components/TextField/TextField.json b/dist/components/TextField/TextField.json new file mode 100644 index 000000000..20b24041a --- /dev/null +++ b/dist/components/TextField/TextField.json @@ -0,0 +1,108 @@ +{ + "name": "TextField", + "notes": "", + "description": "The table component provides a div-based way to visualize data in columns and rows. Although the table is responsive by nature, we recommend keeping the number of columns small if the table is intended to be viewed on mobile devices.", + "template": "TextField.html", + "class": "ms-TextField", + "fileOrder": [ + "TextField.html", + "TextField.Multiline.html", + "TextField.Placeholder.html", + "TextField.Underlined.html" + ], + "dependencies": [ + "Label" + ], + "branches": [ + { + "name": "Standard", + "default": true, + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + }, + { + "name": "Placeholder", + "class": "ms-TextField--placeholder", + "template": "TextField.Placeholder.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + }, + { + "name": "Underlined", + "class": "ms-TextField--underlined", + "template": "Textfield.Underlined.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Multiline", + "class": "ms-TextField--multiline", + "template": "Textfield.Multiline.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + }, + { + "name": "Ml Placeholder", + "class": "ms-TextField--multiline ms-TextField--placeholder", + "template": "Textfield.Multiline.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + } + ] +} diff --git a/dist/components/TextField/TextField.min.css b/dist/components/TextField/TextField.min.css new file mode 100644 index 000000000..fba85ea3f --- /dev/null +++ b/dist/components/TextField/TextField.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto} \ No newline at end of file diff --git a/dist/components/TextField/TextField.scss b/dist/components/TextField/TextField.scss new file mode 100644 index 000000000..9fd4f3658 --- /dev/null +++ b/dist/components/TextField/TextField.scss @@ -0,0 +1,204 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Single line (input) and multiline (textarea) form field styles + + +@import '../Label/Label.scss'; + + +.ms-TextField { + @include ms-font-m; + @include ms-u-normalize; + margin-bottom: 8px; +} + +//= State: A disabled textfield +.ms-TextField.is-disabled { + .ms-TextField-field { + background-color: $ms-color-neutralLighter; + border-color: $ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + + @include input-placeholder { + color: $ms-color-neutralTertiary; + } +} + +//= State: A required textfield +.ms-TextField.is-required { + .ms-Label { + @include ms-Label-is-required + } + + @include input-placeholder { + @include ms-Label-is-required + } +} + +//= State: An active textfield +.ms-TextField.is-active { + border-color: $ms-color-themePrimary; +} + +.ms-TextField-field { + @include ms-u-normalize; + border: 1px solid $ms-color-neutralTertiaryAlt; + border-radius: 0; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-s; + color: $ms-color-neutralPrimary; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + } + + &:focus { + border-color: $ms-color-themePrimary; + } + + &:hover, + &:focus { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + @include input-placeholder { + color: $ms-color-neutralSecondary; + } +} + +.ms-TextField-description { + color: $ms-color-neutralSecondaryAlt; + font-size: $ms-font-size-xs; +} + + +//== Modifier: Single line (default), placeholder label +// +.ms-TextField.ms-TextField--placeholder { + position: relative; + + .ms-Label { + position: absolute; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + padding: 7px 0 7px 10px; + } + + &.is-disabled { + color: $ms-color-neutralTertiary; + + .ms-Label { + @include ms-Label-is-disabled; + } + } +} + + +//== Modifier: Single line (default), underlined +// +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid $ms-color-neutralTertiaryAlt; + display: table; + width: 100%; + min-width: 180px; + + &:hover { + border-color: $ms-color-neutralSecondaryAlt; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } + + &:active, + &:focus { + border-color: $ms-color-themePrimary; + } + + .ms-Label { + font-size: $ms-font-size-s; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; + } + + .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; + + &:active, + &:focus, + &:hover { + outline: 0; + } + } + + &.is-disabled { + border-bottom-color: $ms-color-neutralLight; + + .ms-Label { + @include ms-Label-is-disabled; + } + + .ms-TextField-field { + background-color: transparent; + color: $ms-color-neutralTertiary; + } + } + + &.is-active { + border-color: $ms-color-themePrimary; + + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackSelected; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteSelected; + } + } +} + + +//== Modifier: Multiline textfield +// +.ms-TextField.ms-TextField--multiline { + .ms-TextField-field { + @include ms-font-s; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; + } +} diff --git a/dist/components/Toggle/Toggle.Disabled.html b/dist/components/Toggle/Toggle.Disabled.html new file mode 100644 index 000000000..ea2458df4 --- /dev/null +++ b/dist/components/Toggle/Toggle.Disabled.html @@ -0,0 +1,10 @@ + + +
        + Let apps use my location + + +
        \ No newline at end of file diff --git a/dist/components/Toggle/Toggle.TextLeft.html b/dist/components/Toggle/Toggle.TextLeft.html new file mode 100644 index 000000000..9c83bd306 --- /dev/null +++ b/dist/components/Toggle/Toggle.TextLeft.html @@ -0,0 +1,10 @@ + + +
        + Let apps use my location + + +
        diff --git a/dist/components/Toggle/Toggle.css b/dist/components/Toggle/Toggle.css new file mode 100644 index 000000000..c03ba8387 --- /dev/null +++ b/dist/components/Toggle/Toggle.css @@ -0,0 +1,286 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle:hover .ms-Label { + color: #000000; +} + +.ms-Toggle:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff !important; + border-color: #c8c8c8 !important; + pointer-events: none !important; + cursor: default !important; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8 !important; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.ms-Toggle-input { + position: absolute; + opacity: 0; + top: 0; +} + +.ms-Toggle-input + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input + .ms-Toggle-field:before { + right: auto; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #000000; + } +} + +.ms-Toggle-input:focus + .ms-Toggle-field, +.ms-Toggle-input:hover + .ms-Toggle-field { + background-color: #eaeaea; +} + +.ms-Toggle-input:focus:checked + .ms-Toggle-field, +.ms-Toggle-input:hover:checked + .ms-Toggle-field { + background-color: #005a9e; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} diff --git a/dist/components/Toggle/Toggle.html b/dist/components/Toggle/Toggle.html new file mode 100644 index 000000000..3d6030957 --- /dev/null +++ b/dist/components/Toggle/Toggle.html @@ -0,0 +1,10 @@ + + +
        + Let apps use my location + + +
        diff --git a/dist/components/Toggle/Toggle.json b/dist/components/Toggle/Toggle.json new file mode 100644 index 000000000..9d139876c --- /dev/null +++ b/dist/components/Toggle/Toggle.json @@ -0,0 +1,43 @@ +{ + "name": "Toggle", + "notes": "", + "description":"A boolean visualization that allows for users to select between two states, typically on and off. In Office 365, on/true is signified by a blue state while off/false is shown in grey. Also see {0} ChoiceField - checkbox {1} for a boolean visualization that is better suited to a long list of individual choices for the user.", + "template": "Toggle.html", + "class": "ms-Toggle", + "fileOrder": [ + "Toggle.html", + "Toggle.TextLeft.html", + "Toggle.Disabled.html" + ], + "branches": [ + { + "name": "Text above", + "class": "ms-Toggle--textAbove", + "default": true, + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Text left", + "class": "ms-Toggle--textLeft", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] +} diff --git a/dist/components/Toggle/Toggle.min.css b/dist/components/Toggle/Toggle.min.css new file mode 100644 index 000000000..f836c1b5d --- /dev/null +++ b/dist/components/Toggle/Toggle.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right} \ No newline at end of file diff --git a/dist/components/Toggle/Toggle.scss b/dist/components/Toggle/Toggle.scss new file mode 100644 index 000000000..1b16a4881 --- /dev/null +++ b/dist/components/Toggle/Toggle.scss @@ -0,0 +1,208 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Toggle styles + + +@import '../Label/Label.scss'; + + +// Toggle +.ms-Toggle { + @include ms-font-m; + @include ms-u-normalize; + position: relative; + display: block; + margin-bottom: 26px; + + // Action label (on/off) on the right of the toggle + .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: $ms-font-size-s; + } + + &:hover { + .ms-Label { + color: $ms-color-black; + } + } + + &:active { + .ms-Label { + color: $ms-color-neutralPrimary; + } + } + + // Disabled state + &.is-disabled { + .ms-Label { + @include ms-Label-is-disabled; + } + .ms-Toggle-field { + background-color: $ms-color-white !important; + border-color: $ms-color-neutralTertiaryAlt !important; + pointer-events: none !important; + cursor: default !important; + + &:before { + background-color: $ms-color-neutralTertiaryAlt !important; + } + } + + .ms-Toggle-field, + .ms-Toggle-field:before { + @media screen and (-ms-high-contrast: active) { + border-color: $ms-color-contrastBlackDisabled; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-contrastWhiteDisabled; + } + } + } +} + +// Description text +.ms-Toggle-description { + position: relative; + font-size: $ms-font-size-s; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +// Toggle input field +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px $ms-color-neutralTertiaryAlt solid; + cursor: pointer; +} + +// Slider mixin +@mixin ms-Toggle-slider($direction) { + // Slider pseudo element + &:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + #{$direction}: -2.5px; + width: 12px; + height: 20px; + background-color: $ms-color-neutralSecondaryAlt; + outline: 2px solid transparent; + + @media screen and (-ms-high-contrast: active) { + border: 2.5px solid $ms-color-white; + height: 15px; + outline: 0; + } + + @media screen and (-ms-high-contrast: black-on-white) { + border-color: $ms-color-black; + } + } + + @if $direction == left { + &:before { + right: auto; + border-right: 2.5px solid $ms-color-white; + } + } + + @if $direction == right { + &:before { + left: auto; + border-left: 2.5px solid $ms-color-white; + } + } + + &:active { + background-color: $ms-color-themePrimary; + } +} + +// On/Off slide states +.ms-Toggle-input { + position: absolute; + opacity: 0; + top: 0; + + // 'Off' state - slider on the left + & + .ms-Toggle-field { + background-color: $ms-color-neutralLighter; + + @include ms-Toggle-slider(left); + + // Show the off label / hide the on label + .ms-Label--off { + display: block; + } + + .ms-Label--on { + display: none; + } + } + + // 'On' state - slider on the right + &:checked + .ms-Toggle-field { + background-color: $ms-color-themePrimary; + + @include ms-Toggle-slider(right); + + // Show the on label / hide the off label + .ms-Label--off { + display: none; + } + + .ms-Label--on { + display: block; + } + + @media screen and (-ms-high-contrast: active) { + background-color: $ms-color-white; + } + + @media screen and (-ms-high-contrast: black-on-white) { + background-color: $ms-color-black; + } + } + + &:focus, + &:hover { + & + .ms-Toggle-field { + background-color: $ms-color-neutralLight; + } + + &:checked + .ms-Toggle-field { + background-color: $ms-color-themeDark; + } + } +} + + +//== Modifier: Toggle with description text left +// +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; + + .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; + } + + .ms-Toggle-field { + float: right; + } +} diff --git a/dist/css/fabric.components.css b/dist/css/fabric.components.css new file mode 100644 index 000000000..316824682 --- /dev/null +++ b/dist/css/fabric.components.css @@ -0,0 +1,6554 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + margin: 23px 0 1px 0; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + margin-right: -4px; + padding: 12px 8px 3px 8px; + cursor: pointer; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: white; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + content: ''; + position: absolute; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + height: 0; + width: 0; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before { + z-index: 0; + outline: 1px solid transparent; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:after { + z-index: 10; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + top: 40px; + display: none; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after { + border-top: 10px solid #ffffff; + border-right: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #ffffff; + left: -10px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + border-top: 10px solid transparent; + border-right: 10px solid #ffffff; + border-bottom: 10px solid #ffffff; + border-left: 10px solid transparent; + right: -10px; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + left: 0; + right: 0; + margin: 0 auto; + width: 0; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + border-top: 10px solid #ffffff; + border-right: 10px solid #ffffff; + border-bottom: 10px solid transparent; + border-left: 10px solid transparent; + top: -10px; +} + +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + border-top: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #ffffff; + border-left: 10px solid #ffffff; + bottom: -10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + border: 0; + width: 20px; + height: 20px; + background-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + background-color: #ffffff; + } +} + +.ms-Callout-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: 105; + padding: 18px 24px 12px; +} + +.ms-Callout-title { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-Link.ms-Link--hero { + position: relative; + left: -8px; +} + +.ms-Callout-action { + position: relative; + top: 4px; + left: -8px; + margin-left: 0 !important; +} + +.ms-Callout-action:hover .ms-Callout-actionIcon, +.ms-Callout-action:focus .ms-Callout-actionIcon { + color: #0078d7; +} + +.ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--close .ms-Callout-title { + margin-right: 20px; +} + +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after { + border-color: #0078d7; + background-color: transparent; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + margin-bottom: -8px; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after { + left: 40px; + right: auto; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after { + top: calc('50% - 10px'); +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +@media (min-width: 480px) { + .ms-Callout { + width: 300px; + margin: 16px; + } + + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after { + display: block; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: 58px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-mainArea { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-right: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem { + margin-right: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch { + border-right: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch { + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 8px 8px 0; + border: none; + border-left: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch-input { + border-left: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch-input { + border-left: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-right: 40px; + border-left-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-right: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0px 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-DatePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + -webkit-animation-name: fadeIn, slideDownIn10; + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #c7e0f4; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + text-align: center; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0px; + position: absolute; + top: 0px; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: normal; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: normal; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 300; + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.ms-Dialog::before { + vertical-align: middle; + display: inline-block; + content: ''; + height: 100%; + width: 0; +} + +.ms-Dialog .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; +} + +.ms-Dialog .ms-Overlay { + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dialog .ms-Overlay { + opacity: 0; + } +} + +.ms-Dialog-main { + vertical-align: middle; + display: inline-block; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: left; + outline: 3px solid transparent; +} + +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + right: 12px; + padding: 8px; + z-index: 10; +} + +.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x { + color: #666666; + font-size: 16px; +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Dialog-content { + position: relative; + width: 100%; +} + +.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog-subText { + margin: 0 0 20px 0; + padding-top: 8px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; +} + +.ms-Dialog-actions .ms-Button { + line-height: normal; +} + +.ms-Dialog-actionsRight { + text-align: right; + font-size: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action:first-child { + margin: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action { + margin: 0 0 0 16px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close { + display: block; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner { + padding: 0 20px 20px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header { + background-color: #0078d7; + padding: 26px 20px 28px; + margin-bottom: 8px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + font-size: 28px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #ffffff; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText { + font-size: 14px; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: fixed; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + max-width: 268px; + z-index: 400; + top: 0; + right: 0; + bottom: 0; + overflow-y: scroll; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +@media (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} + +.ms-Facepile { + position: relative; + height: 32px; + width: auto; +} + +.ms-Facepile .ms-PersonaCard { + display: none; + position: absolute; + top: 40px; + height: 200px; +} + +.ms-Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-Facepile-itemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-Facepile-itemBtn .ms-Persona-presence, +.ms-Facepile-itemBtn .ms-Persona-details { + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover, +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus { + background-color: #005a9e; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active { + background-color: #004578; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active { + display: block; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover { + color: #212121; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled { + color: #c8c8c8; +} + +.ms-Facepile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-Facepile-overflowText { + font-size: 14px; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + -webkit-animation-name: fadeOut, slideUpOut20; + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: none; + background-color: transparent; +} + +.ms-MessageBanner-expand:focus, +.ms-MessageBanner-close:focus { + outline: 1px solid transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-expand { + display: inline-block; + } + + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px 0; + min-width: 240px; + } + + .ms-MessageBanner-expand { + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-NavBar { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; +} + +.ms-NavBar .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + z-index: 0; +} + +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + right: 27px; + text-align: center; + width: 40px; + cursor: pointer; +} + +.ms-NavBar-items { + display: none; +} + +.ms-NavBar-item { + box-sizing: border-box; + display: block; + height: 40px; + line-height: 40px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + padding-left: 20px; + position: relative; +} + +.ms-NavBar-item:hover { + cursor: pointer; + background-color: #deecf9; + color: #000000; +} + +.ms-NavBar-item:hover .ms-Icon { + color: #333333; +} + +.ms-NavBar-item:active { + color: #0078d7; +} + +.ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-NavBar-item.is-disabled { + color: #a6a6a6; +} + +.ms-NavBar-item.is-disabled:hover { + cursor: default; + border: none; +} + +.ms-NavBar-link { + color: #333333; + text-decoration: none; +} + +.ms-NavBar-link:active { + color: #0078d7; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after { + color: #212121; +} + +.ms-NavBar-chevronDown { + color: #666666; + font-size: 22px; + position: absolute; + top: 10px; + right: 20px; +} + +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; +} + +.ms-NavBar-item.ms-NavBar-item--search:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #666666; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + right: 5px; + top: 0; +} + +.ms-NavBar-item.ms-NavBar-item--search .ms-TextField { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open { + width: 200px; + padding-right: 40px; + border: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField { + display: block; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field { + border: none; + background-color: transparent; +} + +@media (max-width: 479px) { + .ms-NavBar.is-open .ms-NavBar-items { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + bottom: 0; + display: block; + left: 50px; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + outline: 1px solid transparent; + z-index: 5; + } + + .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu { + position: relative; + } +} + +@media (min-width: 320px) and (max-width: 479px) { + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown { + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + } + + .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + } + + .ms-NavBar.is-open .ms-Overlay { + display: block; + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 480px) { + .ms-NavBar-openMenu { + display: none; + } + + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 7px 0 0; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + right: 0; + float: none; + position: relative; + } + + .ms-NavBar-item { + float: left; + margin-right: 18px; + font-size: 14px; + padding: 0; + } + + .ms-NavBar-item:hover { + border-bottom: 2px solid #0078d7; + background-color: transparent; + } + + .ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + border-bottom: 2px solid #0078d7; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu:after { + position: relative; + top: 3px; + padding-top: 0; + right: auto; + } + + .ms-NavBar-item.ms-NavBar-item--right { + float: right; + margin: 0; + } +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width: 480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-left: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 48px; + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + left: auto; + width: 643px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + left: 428px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + left: auto; + width: 940px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; +} + +.ms-Panel.is-open .ms-Overlay { + display: block; + pointer-events: auto; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width: 480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width: 480px) and (-ms-high-contrast: active) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 250ms; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:before, +.ms-PeoplePicker-searchBox:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: left; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} + +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + position: relative; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 40px; + margin-right: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus, +.ms-Pivot-link:active { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff !important; + background-color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7 !important; +} + +@media (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + } +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + margin-bottom: 10px; + display: inline-block; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #600000; + } +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox.is-active .ms-SearchBox-closeButton { + display: block; + outline: transparent 1px solid; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; + background-color: transparent; + z-index: 5; +} + +.ms-SearchBox-field.hovering { + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + height: 32px; + width: 32px; + background-color: #0078d7; + text-align: center; + display: none; + font-size: 17px; + color: #ffffff; + z-index: 10; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} + +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table tr:hover, +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:before, +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:after, +.ms-Table-row.is-selected .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table thead .ms-Table-rowCheck:after, +.ms-Table-head .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle:hover .ms-Label { + color: #000000; +} + +.ms-Toggle:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff !important; + border-color: #c8c8c8 !important; + pointer-events: none !important; + cursor: default !important; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8 !important; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.ms-Toggle-input { + position: absolute; + opacity: 0; + top: 0; +} + +.ms-Toggle-input + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input + .ms-Toggle-field:before { + right: auto; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #000000; + } +} + +.ms-Toggle-input:focus + .ms-Toggle-field, +.ms-Toggle-input:hover + .ms-Toggle-field { + background-color: #eaeaea; +} + +.ms-Toggle-input:focus:checked + .ms-Toggle-field, +.ms-Toggle-input:hover:checked + .ms-Toggle-field { + background-color: #005a9e; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} diff --git a/dist/css/fabric.components.min.css b/dist/css/fabric.components.min.css new file mode 100644 index 000000000..646e5d007 --- /dev/null +++ b/dist/css/fabric.components.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;line-height:40px;text-align:center;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-Facepile-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled{color:#c8c8c8}.ms-Facepile-addPersonIcon{position:relative;top:-1px}.ms-Facepile-overflowText{font-size:14px}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-expand{display:inline-block}.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right} \ No newline at end of file diff --git a/dist/css/fabric.components.rtl.css b/dist/css/fabric.components.rtl.css new file mode 100644 index 000000000..c97ec1e92 --- /dev/null +++ b/dist/css/fabric.components.rtl.css @@ -0,0 +1,6356 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ + +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ + +.ms-Breadcrumb { + margin: 23px 0 1px; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + margin-left: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + margin-left: -4px; + padding: 12px 8px 3px; + cursor: pointer; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + right: 0; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + top: -6px; + right: 6px; + content: ' '; + width: 16px; + height: 16px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + background-color: #ffffff; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: 1px solid #767676; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + color: #333333; + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; + font-weight: 400; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +@media screen and (max-width:639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width:479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.is-disabled, +.ms-Button:disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button.is-disabled .ms-Button-label, +.ms-Button:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.is-disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button:disabled:focus, +.ms-Button:disabled:hover { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-right: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; +} + +.ms-Button-description, +.ms-Button-icon { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary.is-disabled, +.ms-Button.ms-Button--primary:disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label, +.ms-Button.ms-Button--primary:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:focus .ms-Button-label, +.ms-Button.ms-Button--hero:hover .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label, +.ms-Button.ms-Button--hero:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; + position: relative; + text-align: right; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + position: relative; + text-align: right; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound.is-disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound:disabled:focus { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: right; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-left: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-Button.ms-Button--command:focus .ms-Button-icon, +.ms-Button.ms-Button--command:hover .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:focus .ms-Button-label, +.ms-Button.ms-Button--command:hover .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon, +.ms-Button.ms-Button--command:disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command.is-disabled .ms-Button-label, +.ms-Button.ms-Button--command:disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-right: 14px; +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowTop:before { + content: ''; + position: absolute; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + height: 0; + width: 0; +} + +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowTop:before { + z-index: 0; + outline: 1px solid transparent; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); +} + +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowTop:after { + z-index: 10; +} + +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowRight:before { + top: 40px; + display: none; +} + +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowLeft:before { + border-top: 10px solid #ffffff; + border-left: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 10px solid #ffffff; + right: -10px; +} + +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowRight:before { + border-top: 10px solid transparent; + border-left: 10px solid #ffffff; + border-bottom: 10px solid #ffffff; + border-right: 10px solid transparent; + left: -10px; +} + +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowTop:before { + right: 0; + left: 0; + margin: 0 auto; + width: 0; +} + +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowTop:before { + border-top: 10px solid #ffffff; + border-left: 10px solid #ffffff; + border-bottom: 10px solid transparent; + border-right: 10px solid transparent; + top: -10px; +} + +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowBottom:before { + border-top: 10px solid transparent; + border-left: 10px solid transparent; + border-bottom: 10px solid #ffffff; + border-right: 10px solid #ffffff; + bottom: -10px; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowTop:after, + .ms-Callout.ms-Callout--arrowTop:before { + border: 0; + width: 20px; + height: 20px; + background-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowTop:after, + .ms-Callout.ms-Callout--arrowTop:before { + background-color: #ffffff; + } +} + +.ms-Callout-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + left: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: 105; + padding: 18px 24px 12px; +} + +.ms-Callout-title { + font-size: 21px; +} + +.ms-Callout-subText, +.ms-Callout-title { + margin: 0; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-Callout-subText { + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-action, +.ms-Callout-actions .ms-Link.ms-Link--hero { + position: relative; + right: -8px; +} + +.ms-Callout-action { + top: 4px; + margin-right: 0!important; +} + +.ms-Callout-action:focus .ms-Callout-actionIcon, +.ms-Callout-action:hover .ms-Callout-actionIcon { + color: #0078d7; +} + +.ms-Callout-button { + margin-left: 12px; +} + +.ms-Callout.ms-Callout--close .ms-Callout-title { + margin-left: 20px; +} + +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before { + border-color: #0078d7; + background-color: transparent; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + margin-bottom: -8px; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before { + right: 40px; + left: auto; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before { + top: calc('50% - 10px'); +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +@media (min-width:480px) { + .ms-Callout { + width: 300px; + margin: 16px; + } + + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowRight:before { + display: block; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 26px 0 0; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px solid #c8c8c8; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: 400; + right: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + left: 0; + bottom: 0; + right: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type=checkbox] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type=checkbox]:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + right: 3px; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ChoiceField-input[type=checkbox]:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ChoiceField-input[type=checkbox]:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-right: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-right: 58px; +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar-mainArea { + padding-right: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: left; + text-align: left; + width: auto; + padding-left: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-left: 0; +} + +@media only screen and (min-width:640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + padding-left: 12px; + } +} + +@media only screen and (min-width:1024px) { + .ms-CommandBar-sideCommands { + padding-left: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-left: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CommandBarItem { + border-right: 1px solid #000000; + border-left: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CommandBarItem { + border-right: 1px solid #ffffff; + border-left: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CommandBarItem:hover { + border-right: 1px solid #ffffff; + border-left: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CommandBarItem:hover { + border-right: 1px solid #000000; + border-left: 1px solid #000000; + } +} + +@media only screen and (min-width:640px) { + .ms-CommandBarItem { + margin-left: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + right: 2px; + left: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: right; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width:1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast:active) { + .ms-CommandBarSearch { + border-left: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CommandBarSearch { + border-left: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CommandBarSearch:hover { + border-right: 1px solid #ffffff; + border-left: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CommandBarSearch:hover { + border-right: 1px solid #000000; + border-left: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-right: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 0 8px 8px; + border: none; + border-right: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-CommandBarSearch-input { + border-right: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-CommandBarSearch-input { + border-right: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder, +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-right: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconArrowWrapper, +.ms-CommandBarSearch-iconSearchWrapper { + top: 0; + padding-right: 8px; + padding-left: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + left: 0; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width:1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-left: 40px; + border-right-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-right-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-left: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-ContextualMenu { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus, +.ms-ContextualMenu-link:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon { + color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon { + color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + right: 178px; +} + +.ms-ContextualMenu-caretRight, +.ms-ContextualMenu-subMenuIcon { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + left: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header, +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + right: 10px; +} + +.ms-DatePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: right; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + left: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + -webkit-animation-name: fadeIn,slideDownIn10; + animation-name: fadeIn,slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-right: 15px; +} + +.ms-DatePicker-year { + margin-right: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 15px; + font-weight: 400; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #c7e0f4; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + left: 9px; + right: 9px; +} + +.ms-DatePicker-decadeComponents, +.ms-DatePicker-yearComponents { + position: absolute; + left: 10px; +} + +.ms-DatePicker-nextDecade, +.ms-DatePicker-nextMonth, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-prevMonth, +.ms-DatePicker-prevYear { + width: 40px; + height: 40px; + display: block; + float: left; + margin-right: 10px; + line-height: 40px; + text-align: center; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-nextDecade:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-prevYear:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + right: 0; + position: absolute; + top: 0; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentDecade, +.ms-DatePicker-currentYear { + display: block; + font-weight: 400; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-right: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 5px 30px 0; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: right; + margin: 0 0 10px 10px; + font-weight: 400; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + left: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width:460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-left: 1px solid #eaeaea; + width: 220px; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + right: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-right: 12px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + } + + .ms-DatePicker-nextDecade, + .ms-DatePicker-nextMonth, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-prevMonth, + .ms-DatePicker-prevYear { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentDecade, + .ms-DatePicker-currentYear { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 0 10px 10px; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + left: 10px; + text-align: left; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width:459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + right: 0; + z-index: 300; + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.ms-Dialog:before { + vertical-align: middle; + display: inline-block; + content: ''; + height: 100%; + width: 0; +} + +.ms-Dialog .ms-Button.ms-Button--compound { + display: block; + margin-right: 0; +} + +.ms-Dialog .ms-Overlay { + z-index: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dialog .ms-Overlay { + opacity: 0; + } +} + +.ms-Dialog-main { + vertical-align: middle; + display: inline-block; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: right; + outline: 3px solid transparent; +} + +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + left: 12px; + padding: 8px; + z-index: 10; +} + +.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x { + color: #666666; + font-size: 16px; +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; +} + +.ms-Dialog-content { + position: relative; + width: 100%; +} + +.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog-subText { + margin: 0 0 20px; + padding-top: 8px; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; +} + +.ms-Dialog-actions .ms-Button { + line-height: normal; +} + +.ms-Dialog-actionsRight { + text-align: left; + font-size: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action:first-child { + margin: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action { + margin: 0 16px 0 0; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-left: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close { + display: block; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner { + padding: 0 20px 20px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header { + background-color: #0078d7; + padding: 26px 20px 28px; + margin-bottom: 8px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + font-size: 28px; + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + color: #ffffff; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText { + font-size: 14px; +} + +@media (min-width:480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:active .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:hover .ms-Dropdown-title { + color: #000000; +} + +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.is-open .ms-Dropdown-items, +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items { + display: block; + position: fixed; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + left: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + padding: 0; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 10px 0 32px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-items, +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + box-shadow: none; +} + +.ms-Dropdown-items { + padding: 0; + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + max-width: 268px; + z-index: 400; + top: 0; + left: 0; + bottom: 0; + overflow-y: scroll; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + right: 0; + left: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +@media (min-width:480px) { + .ms-Dropdown-items { + top: auto; + left: auto; + bottom: auto; + right: auto; + max-width: 100%; + } + + .ms-Dropdown.is-open .ms-Dropdown-items, + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items { + position: absolute; + } +} + +.ms-Facepile { + position: relative; + height: 32px; + width: auto; +} + +.ms-Facepile .ms-PersonaCard { + display: none; + position: absolute; + top: 40px; + height: 200px; +} + +.ms-Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-Facepile-itemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: right; + padding: 0; + margin-left: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-Facepile-itemBtn .ms-Persona-details, +.ms-Facepile-itemBtn .ms-Persona-presence { + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus, +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover { + background-color: #005a9e; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active { + background-color: #004578; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active { + display: block; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover { + color: #212121; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled { + color: #c8c8c8; +} + +.ms-Facepile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-Facepile-overflowText { + font-size: 14px; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox { + display: none; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:focus, +.ms-Link:hover { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width:480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: right; + border-width: 0 0 1px 1px; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px; + } +} + +.ms-ListItem { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:after, +.ms-ListItem:before { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; + padding-left: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-left: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-left: 30px; +} + +.ms-ListItem-metaText, +.ms-ListItem-tertiaryText { + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-ListItem-metaText { + color: #333333; + font-size: 11px; + position: absolute; + left: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: right; + height: 70px; + margin-right: -8px; + margin-left: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + left: 30px; + text-align: left; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-right: 3px solid #0078d7; + padding-right: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-metaText, +.ms-ListItem.is-unread .ms-ListItem-secondaryText { + color: #0078d7; + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-left: 10px solid transparent; + border-top: 10px solid #0078d7; + right: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + right: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-right: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + right: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + right: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: right; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-left: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-size: 11px; + padding-top: 6px; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText, +.ms-MessageBanner { + overflow: hidden; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-MessageBanner { + color: #333333; + font-size: 12px; + font-weight: 400; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + -webkit-animation-name: fadeIn,slideDownIn20; + animation-name: fadeIn,slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + -webkit-animation-name: fadeOut,slideUpOut20; + animation-name: fadeOut,slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-close, +.ms-MessageBanner-expand { + height: 52px; + width: 40px; + cursor: pointer; + border: none; + background-color: transparent; +} + +.ms-MessageBanner-close:focus, +.ms-MessageBanner-expand:focus { + outline: 1px solid transparent; +} + +.ms-MessageBanner-close { + position: absolute; + left: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-right: 0; + max-width: 770px; + overflow: hidden; + text-align: right; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-right: 10px; + padding-left: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width:479px) { + .ms-MessageBanner-expand { + display: inline-block; + } + + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: left; + padding: 0 0 10px 10px; + } + + .ms-MessageBanner-text { + margin-right: -25px; + padding: 18px 0 10px; + min-width: 240px; + } + + .ms-MessageBanner-expand { + padding: 0; + margin-right: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-NavBar { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; +} + +.ms-NavBar .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + z-index: 0; +} + +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + left: 27px; + text-align: center; + width: 40px; + cursor: pointer; +} + +.ms-NavBar-items { + display: none; +} + +.ms-NavBar-item { + box-sizing: border-box; + display: block; + height: 40px; + line-height: 40px; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 17px; + padding-right: 20px; + position: relative; +} + +.ms-NavBar-item:hover { + cursor: pointer; + background-color: #deecf9; + color: #000000; +} + +.ms-NavBar-item:hover .ms-Icon { + color: #333333; +} + +.ms-NavBar-item:active { + color: #0078d7; +} + +.ms-NavBar-item.is-selected { + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-NavBar-item.is-disabled { + color: #a6a6a6; +} + +.ms-NavBar-item.is-disabled:hover { + cursor: default; + border: none; +} + +.ms-NavBar-link { + color: #333333; + text-decoration: none; +} + +.ms-NavBar-link:active { + color: #0078d7; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after { + color: #212121; +} + +.ms-NavBar-chevronDown { + color: #666666; + font-size: 22px; + position: absolute; + top: 10px; + left: 20px; +} + +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; +} + +.ms-NavBar-item.ms-NavBar-item--search:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + color: #666666; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + left: 5px; + top: 0; +} + +.ms-NavBar-item.ms-NavBar-item--search .ms-TextField { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open { + width: 200px; + padding-left: 40px; + border: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField { + display: block; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field { + border: none; + background-color: transparent; +} + +@media (max-width:479px) { + .ms-NavBar.is-open .ms-NavBar-items { + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + bottom: 0; + display: block; + right: 50px; + margin: 0; + padding: 0; + position: absolute; + left: 0; + top: 0; + outline: 1px solid transparent; + z-index: 5; + } + + .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu { + position: relative; + } +} + +@media (min-width:320px) and (max-width:479px) { + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown { + -webkit-transform: scaleY(-1); + transform: scaleY(-1); + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + } + + .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link { + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 17px; + } + + .ms-NavBar.is-open .ms-Overlay { + display: block; + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width:480px) { + .ms-NavBar-openMenu { + display: none; + } + + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 0 0 7px; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + left: 0; + float: none; + position: relative; + } + + .ms-NavBar-item { + float: right; + margin-left: 18px; + font-size: 14px; + padding: 0; + } + + .ms-NavBar-item:hover { + border-bottom: 2px solid #0078d7; + background-color: transparent; + } + + .ms-NavBar-item.is-selected { + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; + border-bottom: 2px solid #0078d7; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu:after { + position: relative; + top: 3px; + padding-top: 0; + left: auto; + } + + .ms-NavBar-item.ms-NavBar-item--right { + float: left; + margin: 0; + } +} + +.ms-OrgChart { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: right; + margin: 0; + padding: 0; + outline: transparent; +} + +.ms-Overlay { + background-color: hsla(0,0%,100%,0.4); + position: absolute; + bottom: 0; + right: 0; + left: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0,0,0,0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Panel { + bottom: 0; + right: 0; + position: fixed; + left: 0; + top: 0; + z-index: 300; +} + +.ms-Panel, +.ms-Panel .ms-Overlay { + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + left: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width:480px) { + .ms-Panel-main { + border-right: 1px solid #eaeaea; + border-left: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2); + right: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width:480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-right: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-right: 0; + margin-right: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-right: 1px solid #eaeaea; + border-left: 1px solid #eaeaea; + width: 272px; + box-shadow: 30px 0 30px -30px rgba(0,0,0,0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn,slideLeftIn40; + animation-name: fadeIn,slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut,slideRightOut40; + animation-name: fadeOut,slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + left: auto; + right: 0; + border-right: 1px solid #eaeaea; + border-left: 1px solid #eaeaea; + width: 272px; + box-shadow: 30px 0 30px 30px rgba(0,0,0,0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn,slideLeftIn40; + animation-name: fadeIn,slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut,slideRightOut40; + animation-name: fadeOut,slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn,slideRightIn40; + animation-name: fadeIn,slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut,slideLeftOut40; + animation-name: fadeOut,slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width:480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width:640px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + right: 48px; + width: auto; + } +} + +@media (min-width:1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + right: auto; + width: 643px; + } +} + +@media (min-width:1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + right: 428px; + } +} + +@media (min-width:1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + right: auto; + width: 940px; + } +} + +@media (min-width:1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + right: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; +} + +.ms-Panel.is-open .ms-Overlay, +.ms-Panel.is-open .ms-Panel-main { + pointer-events: auto; + display: block; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width:480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn,slideLeftIn40; + animation-name: fadeIn,slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut,slideRightOut40; + animation-name: fadeOut,slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn,slideRightIn40; + animation-name: fadeIn,slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut,slideLeftOut40; + animation-name: fadeOut,slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width:480px) and (-ms-high-contrast:active) { + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + left: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + right: 0; + left: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width:640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width:1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width:1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width:480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText, +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-right: 12px; + padding-left: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText, +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn,slideDownIn20; + animation-name: fadeIn,slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 0.25s; + animation-delay: 0.25s; +} + +@media (min-width:480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:after, +.ms-PeoplePicker-searchBox:before { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: right; + height: 38px; + outline: none; + padding-right: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: right; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: right; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: right; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + padding: 17px 12px 0 0; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-peopleListBtn, +.ms-PeoplePicker-resultBtn { + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: right; + margin: 0 0 10px; + padding: 0 9px 0 0; +} + +@media (min-width:480px) { + .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker-resultBtn { + height: 48px; + } +} + +.ms-PeoplePicker-peopleListBtn:hover, +.ms-PeoplePicker-resultBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-peopleListBtn:focus, +.ms-PeoplePicker-resultBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + left: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width:480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + right: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-right: 70px; + text-align: right; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:active, +.ms-PeoplePicker-searchMoreBtn:focus { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-right: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + right: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + right: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width:479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + right: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-right: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width:480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-right: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + right: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-peopleListHeader, +.ms-PeoplePicker-selectedHeader { + color: #0078d7; + font-size: 12px; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-peopleList, +.ms-PeoplePicker-selectedPeople { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + left: 0; + right: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-left: 10px; + position: absolute; + top: 0; + right: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + right: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-optionalText, +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText { + display: block; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-optionalText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText { + color: #666666; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-optionalText, +.ms-Persona-tertiaryText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + right: 0; + bottom: auto; + left: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + left: auto; + top: 10px; + right: 0; + border: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-right: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-image, +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + right: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-right: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + right: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-image, +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + right: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-right: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + right: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-image, +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + right: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + right: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-image, +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + right: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-right: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText, +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + right: 0; +} + +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(180deg,#c72d25 0,#c72d25 48%,#ffffff 0,#ffffff 52%,#c72d25 0,#c72d25); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + -webkit-animation-name: fadeIn,slideUpIn10; + animation-name: fadeIn,slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + animation-timing-function: cubic-bezier(0.1,0.25,0.75,0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + right: 0; + position: fixed; + left: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 20px 12px 0; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + right: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + right: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.is-active.ms-PersonaCard-overflow, +.ms-PersonaCard-action.is-active, +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.is-active.ms-PersonaCard-overflow:after, +.ms-PersonaCard-action.is-active:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-left: 0; + border-bottom: 0; + bottom: -4px; + right: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: left; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + left: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: right; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-right: 0; +} + +.ms-PersonaCard-detailPhone { + margin-right: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-right: -200%; +} + +.ms-PersonaCard-detailMail { + margin-right: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-right: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailMail .detail-4, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + left: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + right: 0; +} + +@media (min-width:480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); + max-width: 360px; + position: relative; + } +} + +.ms-Pivot { + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot, +.ms-Pivot-link { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-Pivot-link { + display: inline-block; + position: relative; + font-size: 15px; + line-height: 40px; + margin-left: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + right: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:active, +.ms-Pivot-link:focus, +.ms-Pivot-link:hover { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected, +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-left: -2px; + padding: 0 10px; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff!important; + background-color: #0078d7; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7!important; +} + +@media (min-width:640px) { + .ms-Pivot-link, + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast:active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif; + } +} + +.ms-ProgressIndicator-itemName { + color: #333333; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription, +.ms-ProgressIndicator-itemName { + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; +} + +.ms-ProgressIndicator-itemDescription { + color: #333333; + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + margin-bottom: 10px; + display: inline-block; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #600000; + } +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox.is-active .ms-SearchBox-closeButton { + display: block; + outline: 1px solid transparent; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: 1px solid transparent; + border-radius: 0; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 10px 7px 3px; + width: 180px; + background-color: transparent; + z-index: 5; +} + +.ms-SearchBox-field.hovering { + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 10px 7px 32px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + left: 0; + top: 0; + height: 32px; + width: 32px; + background-color: #0078d7; + text-align: center; + display: none; + font-size: 17px; + color: #ffffff; + z-index: 10; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + right: 0; + padding-right: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-icon { + margin-left: 7px; + font-size: 17px; + color: #767676; +} + +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + right: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + font-weight: 400; + color: #0078d7; + right: 28px; + top: 2px; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table-row, +.ms-Table tr { + display: table-row; + line-height: 30px; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table-row:hover, +.ms-Table tr:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table-row.is-selected, +.ms-Table tr.is-selected { + background-color: #c7e0f4; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck, +.ms-Table tr.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:before, +.ms-Table tr.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table-row.is-selected .ms-Table-rowCheck:after, +.ms-Table tr.is-selected .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + right: 4px; + top: 9px; +} + +.ms-Table-cell, +.ms-Table td, +.ms-Table th { + display: table-cell; + padding: 0 10px; +} + +.ms-Table-head, +.ms-Table thead th { + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table thead td, +.ms-Table thead th { + font-weight: 400; + text-align: right; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table-head .ms-Table-rowCheck:after, +.ms-Table thead .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: Office365Icons; + font-style: normal; + font-weight: 400; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + right: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + right: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} + +.ms-TextField { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled::-webkit-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required::-webkit-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField-field:focus, + .ms-TextField-field:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField-field:focus, + .ms-TextField-field:hover { + border-color: #37006e; + } +} + +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field::-webkit-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 10px 7px 0; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled, +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-left: 8px; + display: table-cell; + vertical-align: bottom; + padding-right: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: right; + display: table-cell; + text-align: right; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast:active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label, +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 12px; + font-weight: 400; +} + +.ms-Label { + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle { + color: #333333; + font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif; + font-size: 14px; + font-weight: 400; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 62px 0 0; + font-size: 12px; +} + +.ms-Toggle:hover .ms-Label { + color: #000000; +} + +.ms-Toggle:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff!important; + border-color: #c8c8c8!important; + pointer-events: none!important; + cursor: default!important; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8!important; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px solid #c8c8c8; + cursor: pointer; +} + +.ms-Toggle-input { + position: absolute; + opacity: 0; + top: 0; +} + +.ms-Toggle-input + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle-input + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle-input + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input + .ms-Toggle-field:before { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + right: auto; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast:active) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast:black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #000000; + } +} + +.ms-Toggle-input:focus + .ms-Toggle-field, +.ms-Toggle-input:hover + .ms-Toggle-field { + background-color: #eaeaea; +} + +.ms-Toggle-input:focus:checked + .ms-Toggle-field, +.ms-Toggle-input:hover:checked + .ms-Toggle-field { + background-color: #005a9e; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: left; +} diff --git a/dist/css/fabric.components.rtl.min.css b/dist/css/fabric.components.rtl.min.css new file mode 100644 index 000000000..1e11a8631 --- /dev/null +++ b/dist/css/fabric.components.rtl.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-left:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-left:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;right:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;right:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-right:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:right;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:right;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:right;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-left:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-right:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-left:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid #fff;right:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-left:10px solid #fff;border-bottom:10px solid #fff;border-right:10px solid transparent;left:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{right:0;left:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-left:10px solid #fff;border-bottom:10px solid transparent;border-right:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-left:10px solid transparent;border-bottom:10px solid #fff;border-right:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;left:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;right:-8px}.ms-Callout-action{top:4px;margin-right:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-left:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-left:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{right:40px;left:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 26px 0 0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;right:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;left:0;bottom:0;right:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;right:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-right:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-right:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-right:24px}}.ms-CommandBar-sideCommands{float:left;text-align:left;width:auto;padding-left:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-left:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-left:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-left:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-left:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-right:1px solid #000;border-left:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-right:1px solid #fff;border-left:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-right:1px solid #fff;border-left:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-right:1px solid #000;border-left:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-left:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;right:2px;left:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:right;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-left:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-left:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-right:1px solid #fff;border-left:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-right:1px solid #000;border-left:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-right:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 0 8px 8px;border:none;border-right:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-right:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-right:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-right:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-right:8px;padding-left:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;left:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-left:40px;border-right-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-right-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-left:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;right:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;left:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;right:10px}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:right;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;left:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-right:15px}.ms-DatePicker-year{margin-right:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;left:9px;right:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;left:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:left;margin-right:10px;line-height:40px;text-align:center;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;right:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;height:40px;line-height:42px;margin-right:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 5px 30px 0}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:right;margin:0 0 10px 10px;font-weight:400;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;left:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-left:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;right:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-right:12px}.ms-DatePicker-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 0 10px 10px}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;left:10px;text-align:left;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;right:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-right:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:right;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;left:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:left;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 16px 0 0}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-left:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;left:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 10px 0 32px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;left:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;right:0;left:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;left:auto;bottom:auto;right:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:right;padding:0;margin-left:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-Facepile-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled{color:#c8c8c8}.ms-Facepile-addPersonIcon{position:relative;top:-1px}.ms-Facepile-overflowText{font-size:14px}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:right;border-width:0 0 1px 1px}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-left:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-left:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-left:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;left:30px;top:39px}.ms-ListItem-image{float:right;height:70px;margin-right:-8px;margin-left:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;left:30px;text-align:left;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-right:3px solid #0078d7;padding-right:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-left:10px solid transparent;border-top:10px solid #0078d7;right:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;right:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-right:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;right:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;right:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:right;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-left:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid transparent}.ms-MessageBanner-close{position:absolute;left:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-right:0;max-width:770px;overflow:hidden;text-align:right}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-right:10px;padding-left:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-expand{display:inline-block}.ms-MessageBanner-action{margin:0;display:block;text-align:left;padding:0 0 10px 10px}.ms-MessageBanner-text{margin-right:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{padding:0;margin-right:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;left:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-right:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;left:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;left:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-left:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;right:50px;margin:0;padding:0;position:absolute;left:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 0 0 7px;padding:0}.ms-NavBar-chevronDown{top:3px;left:0;float:none;position:relative}.ms-NavBar-item{float:right;margin-left:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;left:auto}.ms-NavBar-item.ms-NavBar-item--right{float:left;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:right;margin:0;padding:0;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;right:0;left:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;right:0;position:fixed;left:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;left:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2);right:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-right:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-right:0;margin-right:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;width:272px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{left:auto;right:0;border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;width:272px;box-shadow:30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{right:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{right:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{right:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{right:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{right:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;left:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;right:0;left:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-right:12px;padding-left:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:right;height:38px;outline:none;padding-right:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:right;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:right;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:right;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 12px 0 0;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:right;margin:0 0 10px;padding:0 9px 0 0}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;left:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;right:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-right:70px;text-align:right}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-right:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;right:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;right:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{right:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-right:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-right:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;right:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;left:0;right:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-left:10px;position:absolute;top:0;right:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;right:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;right:0;bottom:auto;left:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{left:auto;top:10px;right:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-right:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{right:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-right:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;right:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{right:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-right:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;right:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{right:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;right:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;right:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-right:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;right:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;right:0;position:fixed;left:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 20px 12px 0}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;right:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;right:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-left:0;border-bottom:0;bottom:-4px;right:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:left;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;left:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:right;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-right:0}.ms-PersonaCard-detailPhone{margin-right:-100%}.ms-PersonaCard-detailVideo{margin-right:-200%}.ms-PersonaCard-detailMail{margin-right:-300%}.ms-PersonaCard-detailOrg{margin-right:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;left:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{right:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-left:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;right:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-left:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 10px 7px 3px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 10px 7px 32px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;left:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;right:0;padding-right:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-left:7px;font-size:17px;color:#767676}.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{right:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;right:28px;top:2px}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;right:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:right;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;right:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;right:2px;position:absolute;top:6px;width:14px}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 10px 7px 0}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-left:8px;display:table-cell;vertical-align:bottom;padding-right:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:right;display:table-cell;text-align:right;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 62px 0 0;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:left} \ No newline at end of file diff --git a/dist/css/fabric.css b/dist/css/fabric.css new file mode 100644 index 000000000..ac901a745 --- /dev/null +++ b/dist/css/fabric.css @@ -0,0 +1,5976 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox, +.ms-u-borderBox:before, +.ms-u-borderBox:after { + box-sizing: border-box; +} + +.ms-u-clearfix { + *zoom: 1; +} + +.ms-u-clearfix:before, +.ms-u-clearfix:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-u-clearfix:after { + clear: both; +} + +.ms-u-normalize { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-bgColor-themeDark, +.ms-bgColor-themeDark--hover:hover { + background-color: #005a9e; +} + +.ms-bgColor-themeDarkAlt, +.ms-bgColor-themeDarkAlt--hover:hover { + background-color: #106ebe; +} + +.ms-bgColor-themeDarker, +.ms-bgColor-themeDarker--hover:hover { + background-color: #004578; +} + +.ms-bgColor-themePrimary, +.ms-bgColor-themePrimary--hover:hover { + background-color: #0078d7; +} + +.ms-bgColor-themeSecondary, +.ms-bgColor-themeSecondary--hover:hover { + background-color: #2b88d8; +} + +.ms-bgColor-themeTertiary, +.ms-bgColor-themeTertiary--hover:hover { + background-color: #71afe5; +} + +.ms-bgColor-themeLight, +.ms-bgColor-themeLight--hover:hover { + background-color: #c7e0f4; +} + +.ms-bgColor-themeLighter, +.ms-bgColor-themeLighter--hover:hover { + background-color: #deecf9; +} + +.ms-bgColor-themeLighterAlt, +.ms-bgColor-themeLighterAlt--hover:hover { + background-color: #eff6fc; +} + +.ms-bgColor-black, +.ms-bgColor-black--hover:hover { + background-color: #000000; +} + +.ms-bgColor-neutralDark, +.ms-bgColor-neutralDark--hover:hover { + background-color: #212121; +} + +.ms-bgColor-neutralPrimary, +.ms-bgColor-neutralPrimary--hover:hover { + background-color: #333333; +} + +.ms-bgColor-neutralSecondary, +.ms-bgColor-neutralSecondary--hover:hover { + background-color: #666666; +} + +.ms-bgColor-neutralSecondaryAlt, +.ms-bgColor-neutralSecondaryAlt--hover:hover { + background-color: #767676; +} + +.ms-bgColor-neutralTertiary, +.ms-bgColor-neutralTertiary--hover:hover { + background-color: #a6a6a6; +} + +.ms-bgColor-neutralTertiaryAlt, +.ms-bgColor-neutralTertiaryAlt--hover:hover { + background-color: #c8c8c8; +} + +.ms-bgColor-neutralLight, +.ms-bgColor-neutralLight--hover:hover { + background-color: #eaeaea; +} + +.ms-bgColor-neutralLighter, +.ms-bgColor-neutralLighter--hover:hover { + background-color: #f4f4f4; +} + +.ms-bgColor-neutralLighterAlt, +.ms-bgColor-neutralLighterAlt--hover:hover { + background-color: #f8f8f8; +} + +.ms-bgColor-white, +.ms-bgColor-white--hover:hover { + background-color: #ffffff; +} + +.ms-bgColor-yellow { + background-color: #ffb900; +} + +.ms-bgColor-yellowLight { + background-color: #fff100; +} + +.ms-bgColor-orange { + background-color: #d83b01; +} + +.ms-bgColor-orangeLight { + background-color: #ea4300; +} + +.ms-bgColor-orangeLighter { + background-color: #ff8c00; +} + +.ms-bgColor-redDark { + background-color: #a80000; +} + +.ms-bgColor-red { + background-color: #e81123; +} + +.ms-bgColor-magentaDark { + background-color: #5c005c; +} + +.ms-bgColor-magenta { + background-color: #b4009e; +} + +.ms-bgColor-magentaLight { + background-color: #e3008c; +} + +.ms-bgColor-purpleDark { + background-color: #32145a; +} + +.ms-bgColor-purple { + background-color: #5c2d91; +} + +.ms-bgColor-purpleLight { + background-color: #b4a0ff; +} + +.ms-bgColor-blueDark { + background-color: #002050; +} + +.ms-bgColor-blueMid { + background-color: #00188f; +} + +.ms-bgColor-blue { + background-color: #0078d7; +} + +.ms-bgColor-blueLight { + background-color: #00bcf2; +} + +.ms-bgColor-tealDark { + background-color: #004b50; +} + +.ms-bgColor-teal { + background-color: #008272; +} + +.ms-bgColor-tealLight { + background-color: #00b294; +} + +.ms-bgColor-greenDark { + background-color: #004b1c; +} + +.ms-bgColor-green { + background-color: #107c10; +} + +.ms-bgColor-greenLight { + background-color: #bad80a; +} + +.ms-bgColor-info { + background-color: #f4f4f4; +} + +.ms-bgColor-success { + background-color: #dff6dd; +} + +.ms-bgColor-alert { + background-color: #f4f4f4; +} + +.ms-bgColor-error { + background-color: #fde7e9; +} + +.ms-borderColor-themeDark, +.ms-borderColor-themeDark--hover:hover { + border-color: #005a9e; +} + +.ms-borderColor-themeDarkAlt, +.ms-borderColor-themeDarkAlt--hover:hover { + border-color: #106ebe; +} + +.ms-borderColor-themeDarker, +.ms-borderColor-themeDarker--hover:hover { + border-color: #004578; +} + +.ms-borderColor-themePrimary, +.ms-borderColor-themePrimary--hover:hover { + border-color: #0078d7; +} + +.ms-borderColor-themeSecondary, +.ms-borderColor-themeSecondary--hover:hover { + border-color: #2b88d8; +} + +.ms-borderColor-themeTertiary, +.ms-borderColor-themeTertiary--hover:hover { + border-color: #71afe5; +} + +.ms-borderColor-themeLight, +.ms-borderColor-themeLight--hover:hover { + border-color: #c7e0f4; +} + +.ms-borderColor-themeLighter, +.ms-borderColor-themeLighter--hover:hover { + border-color: #deecf9; +} + +.ms-borderColor-themeLighterAlt, +.ms-borderColor-themeLighterAlt--hover:hover { + border-color: #eff6fc; +} + +.ms-borderColor-black, +.ms-borderColor-black--hover:hover { + border-color: #000000; +} + +.ms-borderColor-neutralDark, +.ms-borderColor-neutralDark--hover:hover { + border-color: #212121; +} + +.ms-borderColor-neutralPrimary, +.ms-borderColor-neutralPrimary--hover:hover { + border-color: #333333; +} + +.ms-borderColor-neutralSecondary, +.ms-borderColor-neutralSecondary--hover:hover { + border-color: #666666; +} + +.ms-borderColor-neutralSecondaryAlt, +.ms-borderColor-neutralSecondaryAlt--hover:hover { + border-color: #767676; +} + +.ms-borderColor-neutralTertiary, +.ms-borderColor-neutralTertiary--hover:hover { + border-color: #a6a6a6; +} + +.ms-borderColor-neutralTertiaryAlt, +.ms-borderColor-neutralTertiaryAlt--hover:hover { + border-color: #c8c8c8; +} + +.ms-borderColor-neutralLight, +.ms-borderColor-neutralLight--hover:hover { + border-color: #eaeaea; +} + +.ms-borderColor-neutralLighter, +.ms-borderColor-neutralLighter--hover:hover { + border-color: #f4f4f4; +} + +.ms-borderColor-neutralLighterAlt, +.ms-borderColor-neutralLighterAlt--hover:hover { + border-color: #f8f8f8; +} + +.ms-borderColor-white, +.ms-borderColor-white--hover:hover { + border-color: #ffffff; +} + +.ms-borderColor-yellow { + border-color: #ffb900; +} + +.ms-borderColor-yellowLight { + border-color: #fff100; +} + +.ms-borderColor-orange { + border-color: #d83b01; +} + +.ms-borderColor-orangeLight { + border-color: #ea4300; +} + +.ms-borderColor-orangeLighter { + border-color: #ff8c00; +} + +.ms-borderColor-redDark { + border-color: #a80000; +} + +.ms-borderColor-red { + border-color: #e81123; +} + +.ms-borderColor-magentaDark { + border-color: #5c005c; +} + +.ms-borderColor-magenta { + border-color: #b4009e; +} + +.ms-borderColor-magentaLight { + border-color: #e3008c; +} + +.ms-borderColor-purpleDark { + border-color: #32145a; +} + +.ms-borderColor-purple { + border-color: #5c2d91; +} + +.ms-borderColor-purpleLight { + border-color: #b4a0ff; +} + +.ms-borderColor-blueDark { + border-color: #002050; +} + +.ms-borderColor-blueMid { + border-color: #00188f; +} + +.ms-borderColor-blue { + border-color: #0078d7; +} + +.ms-borderColor-blueLight { + border-color: #00bcf2; +} + +.ms-borderColor-tealDark { + border-color: #004b50; +} + +.ms-borderColor-teal { + border-color: #008272; +} + +.ms-borderColor-tealLight { + border-color: #00b294; +} + +.ms-borderColor-greenDark { + border-color: #004b1c; +} + +.ms-borderColor-green { + border-color: #107c10; +} + +.ms-borderColor-greenLight { + border-color: #bad80a; +} + +.ms-borderColor-info { + border-color: #107c10; +} + +.ms-borderColor-success { + border-color: #107c10; +} + +.ms-borderColor-alert { + border-color: #d83b01; +} + +.ms-borderColor-error { + border-color: #a80000; +} + +.ms-borderColorTop-themePrimary, +.ms-borderColorTop-themePrimary--hover:hover { + border-top-color: #0078d7; +} + +.ms-font-su { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 42px; + font-weight: normal; +} + +.ms-font-xxl { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + font-weight: normal; +} + +.ms-font-xl { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; +} + +.ms-font-l { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + font-weight: normal; +} + +.ms-font-m-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; +} + +.ms-font-m { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; +} + +.ms-font-s-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + font-weight: normal; +} + +.ms-font-s { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; +} + +.ms-font-xs { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + font-weight: normal; +} + +.ms-font-mi { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 10px; + font-weight: normal; +} + +.ms-fontWeight-light, +.ms-fontWeight-light--hover:hover { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semilight, +.ms-fontWeight-semilight--hover:hover { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-regular, +.ms-fontWeight-regular--hover:hover { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semibold, +.ms-fontWeight-semibold--hover:hover { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontSize-su { + font-size: 42px; +} + +.ms-fontSize-xxl { + font-size: 28px; +} + +.ms-fontSize-xl { + font-size: 21px; +} + +.ms-fontSize-l { + font-size: 17px; +} + +.ms-fontSize-mPlus { + font-size: 15px; +} + +.ms-fontSize-m { + font-size: 14px; +} + +.ms-fontSize-sPlus { + font-size: 13px; +} + +.ms-fontSize-s { + font-size: 12px; +} + +.ms-fontSize-xs { + font-size: 11px; +} + +.ms-fontSize-mi { + font-size: 10px; +} + +.ms-fontColor-themeDarker, +.ms-fontColor-themeDarker--hover:hover { + color: #004578; +} + +.ms-fontColor-themeDark, +.ms-fontColor-themeDark--hover:hover { + color: #005a9e; +} + +.ms-fontColor-themeDarkAlt, +.ms-fontColor-themeDarkAlt--hover:hover { + color: #106ebe; +} + +.ms-fontColor-themePrimary, +.ms-fontColor-themePrimary--hover:hover { + color: #0078d7; +} + +.ms-fontColor-themeSecondary, +.ms-fontColor-themeSecondary--hover:hover { + color: #2b88d8; +} + +.ms-fontColor-themeTertiary, +.ms-fontColor-themeTertiary--hover:hover { + color: #71afe5; +} + +.ms-fontColor-themeLight, +.ms-fontColor-themeLight--hover:hover { + color: #c7e0f4; +} + +.ms-fontColor-themeLighter, +.ms-fontColor-themeLighter--hover:hover { + color: #deecf9; +} + +.ms-fontColor-themeLighterAlt, +.ms-fontColor-themeLighterAlt--hover:hover { + color: #eff6fc; +} + +.ms-fontColor-black, +.ms-fontColor-black--hover:hover { + color: #000000; +} + +.ms-fontColor-neutralDark, +.ms-fontColor-neutralDark--hover:hover { + color: #212121; +} + +.ms-fontColor-neutralPrimary, +.ms-fontColor-neutralPrimary--hover:hover { + color: #333333; +} + +.ms-fontColor-neutralSecondary, +.ms-fontColor-neutralSecondary--hover:hover { + color: #666666; +} + +.ms-fontColor-neutralSecondaryAlt, +.ms-fontColor-neutralSecondaryAlt--hover:hover { + color: #767676; +} + +.ms-fontColor-neutralTertiary, +.ms-fontColor-neutralTertiary--hover:hover { + color: #a6a6a6; +} + +.ms-fontColor-neutralTertiaryAlt, +.ms-fontColor-neutralTertiaryAlt--hover:hover { + color: #c8c8c8; +} + +.ms-fontColor-neutralLight, +.ms-fontColor-neutralLight--hover:hover { + color: #eaeaea; +} + +.ms-fontColor-neutralLighter, +.ms-fontColor-neutralLighter--hover:hover { + color: #f4f4f4; +} + +.ms-fontColor-neutralLighterAlt, +.ms-fontColor-neutralLighterAlt--hover:hover { + color: #f8f8f8; +} + +.ms-fontColor-white, +.ms-fontColor-white--hover:hover { + color: #ffffff; +} + +.ms-fontColor-yellow, +.ms-fontColor-yellow--hover:hover { + color: #ffb900; +} + +.ms-fontColor-yellowLight, +.ms-fontColor-yellowLight--hover:hover { + color: #fff100; +} + +.ms-fontColor-orange, +.ms-fontColor-orange--hover:hover { + color: #d83b01; +} + +.ms-fontColor-orangeLight, +.ms-fontColor-orangeLight--hover:hover { + color: #ea4300; +} + +.ms-fontColor-orangeLighter, +.ms-fontColor-orangeLighter--hover:hover { + color: #ff8c00; +} + +.ms-fontColor-redDark, +.ms-fontColor-redDark--hover:hover { + color: #a80000; +} + +.ms-fontColor-red, +.ms-fontColor-red--hover:hover { + color: #e81123; +} + +.ms-fontColor-magentaDark, +.ms-fontColor-magentaDark--hover:hover { + color: #5c005c; +} + +.ms-fontColor-magenta, +.ms-fontColor-magenta--hover:hover { + color: #b4009e; +} + +.ms-fontColor-magentaLight, +.ms-fontColor-magentaLight--hover:hover { + color: #e3008c; +} + +.ms-fontColor-purpleDark, +.ms-fontColor-purpleDark--hover:hover { + color: #32145a; +} + +.ms-fontColor-purple, +.ms-fontColor-purple--hover:hover { + color: #5c2d91; +} + +.ms-fontColor-purpleLight, +.ms-fontColor-purpleLight--hover:hover { + color: #b4a0ff; +} + +.ms-fontColor-blueDark, +.ms-fontColor-blueDark--hover:hover { + color: #002050; +} + +.ms-fontColor-blueMid, +.ms-fontColor-blueMid--hover:hover { + color: #00188f; +} + +.ms-fontColor-blue, +.ms-fontColor-blue--hover:hover { + color: #0078d7; +} + +.ms-fontColor-blueLight, +.ms-fontColor-blueLight--hover:hover { + color: #00bcf2; +} + +.ms-fontColor-tealDark, +.ms-fontColor-tealDark--hover:hover { + color: #004b50; +} + +.ms-fontColor-teal, +.ms-fontColor-teal--hover:hover { + color: #008272; +} + +.ms-fontColor-tealLight, +.ms-fontColor-tealLight--hover:hover { + color: #00b294; +} + +.ms-fontColor-greenDark, +.ms-fontColor-greenDark--hover:hover { + color: #004b1c; +} + +.ms-fontColor-green, +.ms-fontColor-green--hover:hover { + color: #107c10; +} + +.ms-fontColor-greenLight, +.ms-fontColor-greenLight--hover:hover { + color: #bad80a; +} + +.ms-fontColor-info, +.ms-fontColor-info--hover:hover { + color: #107c10; +} + +.ms-fontColor-success, +.ms-fontColor-success--hover:hover { + color: #107c10; +} + +.ms-fontColor-alert, +.ms-fontColor-alert--hover:hover { + color: #d83b01; +} + +.ms-fontColor-error, +.ms-fontColor-error--hover:hover { + color: #a80000; +} + +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +@font-face { + font-family: 'Leelawadee UI Bold'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Leelawadee UI'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Leelawadee UI Semilight'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Arabic'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Arabic'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Arabic'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Arabic'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Cyrillic'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Cyrillic'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Cyrillic'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Cyrillic'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light EastEuropean'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular EastEuropean'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold EastEuropean'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight EastEuropean'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Greek'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Greek'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Greek'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Greek'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Hebrew'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Hebrew'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Hebrew'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Hebrew'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Vietnamese'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Vietnamese'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Vietnamese'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Vietnamese'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light WestEuropean'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular WestEuropean'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold WestEuropean'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight WestEuropean'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +*[lang='ja-JP'] .ms-font-mi, +*[lang='ja-JP'] .ms-font-xs, +*[lang='ja-JP'] .ms-font-s, +*[lang='ja-JP'] .ms-font-s-plus, +*[lang='ja-JP'] .ms-font-m, +*[lang='ja-JP'] .ms-font-m-plus, +*[lang='ja-JP'] .ms-font-l, +*[lang='ja-JP'] .ms-font-xl, +*[lang='ja-JP'] .ms-font-xxl, +*[lang='ja-JP'] .ms-font-su, +*[lang='ja-JP'] .ms-fontWeight-light, +*[lang='ja-JP'] .ms-fontWeight-light-hover:hover, +*[lang='ja-JP'] .ms-fontWeight-semilight, +*[lang='ja-JP'] .ms-fontWeight-semilight-hover:hover, +*[lang='ja-JP'] .ms-fontWeight-regular, +*[lang='ja-JP'] .ms-fontWeight-regular-hover:hover, +*[lang='ja-JP'] .ms-fontWeight-semibold, +*[lang='ja-JP'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ko-KR'] .ms-font-mi, +*[lang='ko-KR'] .ms-font-xs, +*[lang='ko-KR'] .ms-font-s, +*[lang='ko-KR'] .ms-font-s-plus, +*[lang='ko-KR'] .ms-font-m, +*[lang='ko-KR'] .ms-font-m-plus, +*[lang='ko-KR'] .ms-font-l, +*[lang='ko-KR'] .ms-font-xl, +*[lang='ko-KR'] .ms-font-xxl, +*[lang='ko-KR'] .ms-font-su, +*[lang='ko-KR'] .ms-fontWeight-light, +*[lang='ko-KR'] .ms-fontWeight-light-hover:hover, +*[lang='ko-KR'] .ms-fontWeight-semilight, +*[lang='ko-KR'] .ms-fontWeight-semilight-hover:hover, +*[lang='ko-KR'] .ms-fontWeight-regular, +*[lang='ko-KR'] .ms-fontWeight-regular-hover:hover, +*[lang='ko-KR'] .ms-fontWeight-semibold, +*[lang='ko-KR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Malgun Gothic', Gulim, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ch-ZHS'] .ms-font-mi, +*[lang='ch-ZHS'] .ms-font-xs, +*[lang='ch-ZHS'] .ms-font-s, +*[lang='ch-ZHS'] .ms-font-s-plus, +*[lang='ch-ZHS'] .ms-font-m, +*[lang='ch-ZHS'] .ms-font-m-plus, +*[lang='ch-ZHS'] .ms-font-l, +*[lang='ch-ZHS'] .ms-font-xl, +*[lang='ch-ZHS'] .ms-font-xxl, +*[lang='ch-ZHS'] .ms-font-su, +*[lang='ch-ZHS'] .ms-fontWeight-light, +*[lang='ch-ZHS'] .ms-fontWeight-light-hover:hover, +*[lang='ch-ZHS'] .ms-fontWeight-semilight, +*[lang='ch-ZHS'] .ms-fontWeight-semilight-hover:hover, +*[lang='ch-ZHS'] .ms-fontWeight-regular, +*[lang='ch-ZHS'] .ms-fontWeight-regular-hover:hover, +*[lang='ch-ZHS'] .ms-fontWeight-semibold, +*[lang='ch-ZHS'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ch-ZHT'] .ms-font-mi, +*[lang='ch-ZHT'] .ms-font-xs, +*[lang='ch-ZHT'] .ms-font-s, +*[lang='ch-ZHT'] .ms-font-s-plus, +*[lang='ch-ZHT'] .ms-font-m, +*[lang='ch-ZHT'] .ms-font-m-plus, +*[lang='ch-ZHT'] .ms-font-l, +*[lang='ch-ZHT'] .ms-font-xl, +*[lang='ch-ZHT'] .ms-font-xxl, +*[lang='ch-ZHT'] .ms-font-su, +*[lang='ch-ZHT'] .ms-fontWeight-light, +*[lang='ch-ZHT'] .ms-fontWeight-light-hover:hover, +*[lang='ch-ZHT'] .ms-fontWeight-semilight, +*[lang='ch-ZHT'] .ms-fontWeight-semilight-hover:hover, +*[lang='ch-ZHT'] .ms-fontWeight-regular, +*[lang='ch-ZHT'] .ms-fontWeight-regular-hover:hover, +*[lang='ch-ZHT'] .ms-fontWeight-semibold, +*[lang='ch-ZHT'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Microsoft Jhenghei', Pmingliu, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hi-IN'] .ms-font-mi, +*[lang='hi-IN'] .ms-font-xs, +*[lang='hi-IN'] .ms-font-s, +*[lang='hi-IN'] .ms-font-s-plus, +*[lang='hi-IN'] .ms-font-m, +*[lang='hi-IN'] .ms-font-m-plus, +*[lang='hi-IN'] .ms-font-l, +*[lang='hi-IN'] .ms-font-xl, +*[lang='hi-IN'] .ms-font-xxl, +*[lang='hi-IN'] .ms-font-su, +*[lang='hi-IN'] .ms-fontWeight-light, +*[lang='hi-IN'] .ms-fontWeight-light-hover:hover, +*[lang='hi-IN'] .ms-fontWeight-semilight, +*[lang='hi-IN'] .ms-fontWeight-semilight-hover:hover, +*[lang='hi-IN'] .ms-fontWeight-regular, +*[lang='hi-IN'] .ms-fontWeight-regular-hover:hover, +*[lang='hi-IN'] .ms-fontWeight-semibold, +*[lang='hi-IN'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Nirmala UI', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-font-xl, +*[lang='th-TH'] .ms-font-xxl, +*[lang='th-TH'] .ms-fontWeight-light, +*[lang='th-TH'] .ms-fontWeight-light-hover:hover { + font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-font-l, +*[lang='th-TH'] .ms-font-su, +*[lang='th-TH'] .ms-fontWeight-semilight, +*[lang='th-TH'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-fontWeight-regular, +*[lang='th-TH'] .ms-fontweight-regular-hover:hover { + font-family: 'Leelawadee UI Regular', 'Kmer UI', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-font-mi, +*[lang='th-TH'] .ms-fontWeight-semibold, +*[lang='th-TH'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Leelawadee UI Bold', 'Kmer UI', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-font-xl, +*[lang='ar'] .ms-font-xxl, +*[lang='ar'] .ms-fontWeight-light, +*[lang='ar'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Arabic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-font-l, +*[lang='ar'] .ms-font-su, +*[lang='ar'] .ms-fontWeight-semilight, +*[lang='ar'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Arabic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-fontWeight-regular, +*[lang='ar'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Arabic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-font-mi, +*[lang='ar'] .ms-fontWeight-semibold, +*[lang='ar'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Arabic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-font-xl, +*[lang='bg-BG'] .ms-font-xxl, +*[lang='bg-BG'] .ms-fontWeight-light, +*[lang='bg-BG'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-font-l, +*[lang='bg-BG'] .ms-font-su, +*[lang='bg-BG'] .ms-fontWeight-semilight, +*[lang='bg-BG'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-fontWeight-regular, +*[lang='bg-BG'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-font-mi, +*[lang='bg-BG'] .ms-fontWeight-semibold, +*[lang='bg-BG'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-font-xl, +*[lang='ru-RU'] .ms-font-xxl, +*[lang='ru-RU'] .ms-fontWeight-light, +*[lang='ru-RU'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-font-l, +*[lang='ru-RU'] .ms-font-su, +*[lang='ru-RU'] .ms-fontWeight-semilight, +*[lang='ru-RU'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-fontWeight-regular, +*[lang='ru-RU'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-font-mi, +*[lang='ru-RU'] .ms-fontWeight-semibold, +*[lang='ru-RU'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-font-xl, +*[lang='uk-UA'] .ms-font-xxl, +*[lang='uk-UA'] .ms-fontWeight-light, +*[lang='uk-UA'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-font-l, +*[lang='uk-UA'] .ms-font-su, +*[lang='uk-UA'] .ms-fontWeight-semilight, +*[lang='uk-UA'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-fontWeight-regular, +*[lang='uk-UA'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-font-mi, +*[lang='uk-UA'] .ms-fontWeight-semibold, +*[lang='uk-UA'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-font-xl, +*[lang='cs-CZ'] .ms-font-xxl, +*[lang='cs-CZ'] .ms-fontWeight-light, +*[lang='cs-CZ'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-font-l, +*[lang='cs-CZ'] .ms-font-su, +*[lang='cs-CZ'] .ms-fontWeight-semilight, +*[lang='cs-CZ'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-fontWeight-regular, +*[lang='cs-CZ'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-font-mi, +*[lang='cs-CZ'] .ms-fontWeight-semibold, +*[lang='cs-CZ'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-font-xl, +*[lang='et-EE'] .ms-font-xxl, +*[lang='et-EE'] .ms-fontWeight-light, +*[lang='et-EE'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-font-l, +*[lang='et-EE'] .ms-font-su, +*[lang='et-EE'] .ms-fontWeight-semilight, +*[lang='et-EE'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-fontWeight-regular, +*[lang='et-EE'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-font-mi, +*[lang='et-EE'] .ms-fontWeight-semibold, +*[lang='et-EE'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-font-xl, +*[lang='hr-HR'] .ms-font-xxl, +*[lang='hr-HR'] .ms-fontWeight-light, +*[lang='hr-HR'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-font-l, +*[lang='hr-HR'] .ms-font-su, +*[lang='hr-HR'] .ms-fontWeight-semilight, +*[lang='hr-HR'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-fontWeight-regular, +*[lang='hr-HR'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-font-mi, +*[lang='hr-HR'] .ms-fontWeight-semibold, +*[lang='hr-HR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-font-xl, +*[lang='hu-HU'] .ms-font-xxl, +*[lang='hu-HU'] .ms-fontWeight-light, +*[lang='hu-HU'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-font-l, +*[lang='hu-HU'] .ms-font-su, +*[lang='hu-HU'] .ms-fontWeight-semilight, +*[lang='hu-HU'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-fontWeight-regular, +*[lang='hu-HU'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-font-mi, +*[lang='hu-HU'] .ms-fontWeight-semibold, +*[lang='hu-HU'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-font-xl, +*[lang='lt-LT'] .ms-font-xxl, +*[lang='lt-LT'] .ms-fontWeight-light, +*[lang='lt-LT'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-font-l, +*[lang='lt-LT'] .ms-font-su, +*[lang='lt-LT'] .ms-fontWeight-semilight, +*[lang='lt-LT'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-fontWeight-regular, +*[lang='lt-LT'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-font-mi, +*[lang='lt-LT'] .ms-fontWeight-semibold, +*[lang='lt-LT'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-font-xl, +*[lang='lv-LV'] .ms-font-xxl, +*[lang='lv-LV'] .ms-fontWeight-light, +*[lang='lv-LV'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-font-l, +*[lang='lv-LV'] .ms-font-su, +*[lang='lv-LV'] .ms-fontWeight-semilight, +*[lang='lv-LV'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-fontWeight-regular, +*[lang='lv-LV'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-font-mi, +*[lang='lv-LV'] .ms-fontWeight-semibold, +*[lang='lv-LV'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-font-xl, +*[lang='pl-PL'] .ms-font-xxl, +*[lang='pl-PL'] .ms-fontWeight-light, +*[lang='pl-PL'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-font-l, +*[lang='pl-PL'] .ms-font-su, +*[lang='pl-PL'] .ms-fontWeight-semilight, +*[lang='pl-PL'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-fontWeight-regular, +*[lang='pl-PL'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-font-mi, +*[lang='pl-PL'] .ms-fontWeight-semibold, +*[lang='pl-PL'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-font-xl, +*[lang='lt-sr-SP'] .ms-font-xxl, +*[lang='lt-sr-SP'] .ms-fontWeight-light, +*[lang='lt-sr-SP'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-font-l, +*[lang='lt-sr-SP'] .ms-font-su, +*[lang='lt-sr-SP'] .ms-fontWeight-semilight, +*[lang='lt-sr-SP'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-fontWeight-regular, +*[lang='lt-sr-SP'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-font-mi, +*[lang='lt-sr-SP'] .ms-fontWeight-semibold, +*[lang='lt-sr-SP'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-font-xl, +*[lang='tr-TR'] .ms-font-xxl, +*[lang='tr-TR'] .ms-fontWeight-light, +*[lang='tr-TR'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-font-l, +*[lang='tr-TR'] .ms-font-su, +*[lang='tr-TR'] .ms-fontWeight-semilight, +*[lang='tr-TR'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-fontWeight-regular, +*[lang='tr-TR'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-font-mi, +*[lang='tr-TR'] .ms-fontWeight-semibold, +*[lang='tr-TR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-font-xl, +*[lang='sk-SK'] .ms-font-xxl, +*[lang='sk-SK'] .ms-fontWeight-light, +*[lang='sk-SK'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-font-l, +*[lang='sk-SK'] .ms-font-su, +*[lang='sk-SK'] .ms-fontWeight-semilight, +*[lang='sk-SK'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-fontWeight-regular, +*[lang='sk-SK'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-font-mi, +*[lang='sk-SK'] .ms-fontWeight-semibold, +*[lang='sk-SK'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-font-xl, +*[lang='kk-KZ'] .ms-font-xxl, +*[lang='kk-KZ'] .ms-fontWeight-light, +*[lang='kk-KZ'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-font-l, +*[lang='kk-KZ'] .ms-font-su, +*[lang='kk-KZ'] .ms-fontWeight-semilight, +*[lang='kk-KZ'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-fontWeight-regular, +*[lang='kk-KZ'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-font-mi, +*[lang='kk-KZ'] .ms-fontWeight-semibold, +*[lang='kk-KZ'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-font-xl, +*[lang='el-GR'] .ms-font-xxl, +*[lang='el-GR'] .ms-fontWeight-light, +*[lang='el-GR'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Greek', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-font-l, +*[lang='el-GR'] .ms-font-su, +*[lang='el-GR'] .ms-fontWeight-semilight, +*[lang='el-GR'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Greek', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-fontWeight-regular, +*[lang='el-GR'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Greek', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-font-mi, +*[lang='el-GR'] .ms-fontWeight-semibold, +*[lang='el-GR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Greek', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-font-xl, +*[lang='he-IL'] .ms-font-xxl, +*[lang='he-IL'] .ms-fontWeight-light, +*[lang='he-IL'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Hebrew', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-font-l, +*[lang='he-IL'] .ms-font-su, +*[lang='he-IL'] .ms-fontWeight-semilight, +*[lang='he-IL'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Hebrew', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-fontWeight-regular, +*[lang='he-IL'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Hebrew', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-font-mi, +*[lang='he-IL'] .ms-fontWeight-semibold, +*[lang='he-IL'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Hebrew', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-font-xl, +*[lang='vi-VN'] .ms-font-xxl, +*[lang='vi-VN'] .ms-fontWeight-light, +*[lang='vi-VN'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Vietnamese', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-font-l, +*[lang='vi-VN'] .ms-font-su, +*[lang='vi-VN'] .ms-fontWeight-semilight, +*[lang='vi-VN'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Vietnamese', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-fontWeight-regular, +*[lang='vi-VN'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Vietnamese', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-font-mi, +*[lang='vi-VN'] .ms-fontWeight-semibold, +*[lang='vi-VN'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Vietnamese', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +@font-face { + font-family: 'Office365Icons'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?'); + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff?') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf?') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg?#office365icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +.ms-Icon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +.ms-Icon--circleEmpty:before { + content: '\e000'; +} + +.ms-Icon--circleFill:before { + content: '\e001'; +} + +.ms-Icon--placeholder:before { + content: '\e002'; +} + +.ms-Icon--star:before { + content: '\e003'; +} + +.ms-Icon--plus:before { + content: '\e004'; +} + +.ms-Icon--minus:before { + content: '\e005'; +} + +.ms-Icon--question:before { + content: '\e006'; +} + +.ms-Icon--exclamation:before { + content: '\e007'; +} + +.ms-Icon--person:before { + content: '\e008'; +} + +.ms-Icon--mail:before { + content: '\e009'; +} + +.ms-Icon--infoCircle:before { + content: '\e00a'; +} + +.ms-Icon--alert:before { + content: '\e00b'; +} + +.ms-Icon--xCircle:before { + content: '\e00c'; +} + +.ms-Icon--mailOpen:before { + content: '\e00d'; +} + +.ms-Icon--people:before { + content: '\e00e'; +} + +.ms-Icon--bell:before { + content: '\e010'; +} + +.ms-Icon--calendar:before { + content: '\e011'; +} + +.ms-Icon--scheduling:before { + content: '\e012'; +} + +.ms-Icon--event:before { + content: '\e013'; +} + +.ms-Icon--folder:before { + content: '\e014'; +} + +.ms-Icon--documents:before { + content: '\e015'; +} + +.ms-Icon--onedrive:before { + content: '\e016'; +} + +.ms-Icon--chat:before { + content: '\e017'; +} + +.ms-Icon--sites:before { + content: '\e018'; +} + +.ms-Icon--listBullets:before { + content: '\e019'; +} + +.ms-Icon--calendarWeek:before { + content: '\e01a'; +} + +.ms-Icon--calendarWorkWeek:before { + content: '\e01b'; +} + +.ms-Icon--calendarDay:before { + content: '\e01c'; +} + +.ms-Icon--folderMove:before { + content: '\e01d'; +} + +.ms-Icon--panel:before { + content: '\e01e'; +} + +.ms-Icon--popout:before { + content: '\e01f'; +} + +.ms-Icon--menu:before { + content: '\e020'; +} + +.ms-Icon--home:before { + content: '\e021'; +} + +.ms-Icon--favorites:before { + content: '\e022'; +} + +.ms-Icon--phone:before { + content: '\e023'; +} + +.ms-Icon--mailSend:before { + content: '\e024'; +} + +.ms-Icon--save:before { + content: '\e025'; +} + +.ms-Icon--trash:before { + content: '\e026'; +} + +.ms-Icon--pencil:before { + content: '\e027'; +} + +.ms-Icon--flag:before { + content: '\e028'; +} + +.ms-Icon--reply:before { + content: '\e029'; +} + +.ms-Icon--miniatures:before { + content: '\e02a'; +} + +.ms-Icon--voicemail:before { + content: '\e02b'; +} + +.ms-Icon--play:before { + content: '\e02c'; +} + +.ms-Icon--pause:before { + content: '\e02d'; +} + +.ms-Icon--onlineAdd:before { + content: '\e02e'; +} + +.ms-Icon--onlineJoin:before { + content: '\e02f'; +} + +.ms-Icon--replyAll:before { + content: '\e030'; +} + +.ms-Icon--attachment:before { + content: '\e031'; +} + +.ms-Icon--drm:before { + content: '\e032'; +} + +.ms-Icon--pinDown:before { + content: '\e033'; +} + +.ms-Icon--refresh:before { + content: '\e034'; +} + +.ms-Icon--gear:before { + content: '\e035'; +} + +.ms-Icon--smiley:before { + content: '\e036'; +} + +.ms-Icon--info:before { + content: '\e037'; +} + +.ms-Icon--lock:before { + content: '\e038'; +} + +.ms-Icon--search:before { + content: '\e039'; +} + +.ms-Icon--questionReverse:before { + content: '\e03a'; +} + +.ms-Icon--notRecurring:before { + content: '\e03b'; +} + +.ms-Icon--tasks:before { + content: '\e040'; +} + +.ms-Icon--check:before { + content: '\e041'; +} + +.ms-Icon--x:before { + content: '\e042'; +} + +.ms-Icon--ellipsis:before { + content: '\e045'; +} + +.ms-Icon--dot:before { + content: '\e046'; +} + +.ms-Icon--arrowUp:before { + content: '\e047'; +} + +.ms-Icon--arrowDown:before { + content: '\e048'; +} + +.ms-Icon--arrowLeft:before { + content: '\e049'; +} + +.ms-Icon--arrowRight:before { + content: '\e04a'; +} + +.ms-Icon--download:before { + content: '\e04b'; +} + +.ms-Icon--directions:before { + content: '\e04c'; +} + +.ms-Icon--microphone:before { + content: '\e04f'; +} + +.ms-Icon--caretUp:before { + content: '\e051'; +} + +.ms-Icon--caretDown:before { + content: '\e052'; +} + +.ms-Icon--caretLeft:before { + content: '\e053'; +} + +.ms-Icon--caretRight:before { + content: '\e054'; +} + +.ms-Icon--caretUpLeft:before { + content: '\e05a'; +} + +.ms-Icon--caretUpRight:before { + content: '\e05b'; +} + +.ms-Icon--caretDownRight:before { + content: '\e05c'; +} + +.ms-Icon--caretDownLeft:before { + content: '\e05d'; +} + +.ms-Icon--note:before { + content: '\e06a'; +} + +.ms-Icon--noteReply:before { + content: '\e06b'; +} + +.ms-Icon--noteForward:before { + content: '\e06c'; +} + +.ms-Icon--key:before { + content: '\e06f'; +} + +.ms-Icon--tile:before { + content: '\e070'; +} + +.ms-Icon--taskRecurring:before { + content: '\e071'; +} + +.ms-Icon--starEmpty:before { + content: '\e073'; +} + +.ms-Icon--upload:before { + content: '\e076'; +} + +.ms-Icon--wrench:before { + content: '\e077'; +} + +.ms-Icon--share:before { + content: '\e078'; +} + +.ms-Icon--documentReply:before { + content: '\e079'; +} + +.ms-Icon--documentForward:before { + content: '\e07a'; +} + +.ms-Icon--partner:before { + content: '\e080'; +} + +.ms-Icon--reactivate:before { + content: '\e084'; +} + +.ms-Icon--sort:before { + content: '\e085'; +} + +.ms-Icon--personAdd:before { + content: '\e086'; +} + +.ms-Icon--chevronUp:before { + content: '\e087'; +} + +.ms-Icon--chevronDown:before { + content: '\e088'; +} + +.ms-Icon--chevronLeft:before { + content: '\e089'; +} + +.ms-Icon--chevronRight:before { + content: '\e08a'; +} + +.ms-Icon--peopleAdd:before { + content: '\e08c'; +} + +.ms-Icon--newsfeed:before { + content: '\e08d'; +} + +.ms-Icon--notebook:before { + content: '\e08e'; +} + +.ms-Icon--link:before { + content: '\e08f'; +} + +.ms-Icon--chevronsUp:before { + content: '\e090'; +} + +.ms-Icon--chevronsDown:before { + content: '\e091'; +} + +.ms-Icon--chevronsLeft:before { + content: '\e092'; +} + +.ms-Icon--chevronsRight:before { + content: '\e093'; +} + +.ms-Icon--clutter:before { + content: '\e09a'; +} + +.ms-Icon--subscribe:before { + content: '\e09c'; +} + +.ms-Icon--unsubscribe:before { + content: '\e09d'; +} + +.ms-Icon--personRemove:before { + content: '\e09e'; +} + +.ms-Icon--receiptForward:before { + content: '\e0a0'; +} + +.ms-Icon--receiptReply:before { + content: '\e0a1'; +} + +.ms-Icon--receiptCheck:before { + content: '\e0a2'; +} + +.ms-Icon--peopleRemove:before { + content: '\e0a3'; +} + +.ms-Icon--merge:before { + content: '\e0a4'; +} + +.ms-Icon--split:before { + content: '\e0a5'; +} + +.ms-Icon--eventCancel:before { + content: '\e0a6'; +} + +.ms-Icon--eventShare:before { + content: '\e0a7'; +} + +.ms-Icon--today:before { + content: '\e0a9'; +} + +.ms-Icon--oofReply:before { + content: '\e0aa'; +} + +.ms-Icon--voicemailReply:before { + content: '\e0ac'; +} + +.ms-Icon--voicemailForward:before { + content: '\e0ad'; +} + +.ms-Icon--ribbon:before { + content: '\e0af'; +} + +.ms-Icon--contact:before { + content: '\e0b0'; +} + +.ms-Icon--eye:before { + content: '\e0b1'; +} + +.ms-Icon--glasses:before { + content: '\e0b2'; +} + +.ms-Icon--print:before { + content: '\e100'; +} + +.ms-Icon--room:before { + content: '\e101'; +} + +.ms-Icon--post:before { + content: '\e102'; +} + +.ms-Icon--toggle:before { + content: '\e103'; +} + +.ms-Icon--touch:before { + content: '\e104'; +} + +.ms-Icon--clock:before { + content: '\e105'; +} + +.ms-Icon--fax:before { + content: '\e106'; +} + +.ms-Icon--lightning:before { + content: '\e110'; +} + +.ms-Icon--dialpad:before { + content: '\e111'; +} + +.ms-Icon--phoneTransfer:before { + content: '\e112'; +} + +.ms-Icon--phoneAdd:before { + content: '\e113'; +} + +.ms-Icon--late:before { + content: '\e114'; +} + +.ms-Icon--chatAdd:before { + content: '\e115'; +} + +.ms-Icon--conflict:before { + content: '\e116'; +} + +.ms-Icon--navigate:before { + content: '\e117'; +} + +.ms-Icon--camera:before { + content: '\e119'; +} + +.ms-Icon--filter:before { + content: '\e11a'; +} + +.ms-Icon--fullscreen:before { + content: '\e11b'; +} + +.ms-Icon--new:before { + content: '\e11c'; +} + +.ms-Icon--mailEmpty:before { + content: '\e11d'; +} + +.ms-Icon--editBox:before { + content: '\e11e'; +} + +.ms-Icon--waffle:before { + content: '\e11f'; +} + +.ms-Icon--work:before { + content: '\e120'; +} + +.ms-Icon--eventRecurring:before { + content: '\e121'; +} + +.ms-Icon--cart:before { + content: '\e122'; +} + +.ms-Icon--socialListening:before { + content: '\e123'; +} + +.ms-Icon--mapMarker:before { + content: '\e124'; +} + +.ms-Icon--org:before { + content: '\e125'; +} + +.ms-Icon--replyAlt:before { + content: '\e150'; +} + +.ms-Icon--replyAllAlt:before { + content: '\e152'; +} + +.ms-Icon--eventInfo:before { + content: '\e154'; +} + +.ms-Icon--group:before { + content: '\e155'; +} + +.ms-Icon--money:before { + content: '\e161'; +} + +.ms-Icon--graph:before { + content: '\e162'; +} + +.ms-Icon--noteEdit:before { + content: '\e163'; +} + +.ms-Icon--dashboard:before { + content: '\e164'; +} + +.ms-Icon--mailEdit:before { + content: '\e165'; +} + +.ms-Icon--pinLeft:before { + content: '\e167'; +} + +.ms-Icon--heart:before { + content: '\e16a'; +} + +.ms-Icon--heartEmpty:before { + content: '\e16b'; +} + +.ms-Icon--picture:before { + content: '\e16c'; +} + +.ms-Icon--cake:before { + content: '\e16d'; +} + +.ms-Icon--books:before { + content: '\e16e'; +} + +.ms-Icon--chart:before { + content: '\e16f'; +} + +.ms-Icon--video:before { + content: '\e170'; +} + +.ms-Icon--soccer:before { + content: '\e171'; +} + +.ms-Icon--meal:before { + content: '\e172'; +} + +.ms-Icon--balloon:before { + content: '\e173'; +} + +.ms-Icon--cat:before { + content: '\e174'; +} + +.ms-Icon--dog:before { + content: '\e175'; +} + +.ms-Icon--bag:before { + content: '\e176'; +} + +.ms-Icon--music:before { + content: '\e177'; +} + +.ms-Icon--stopwatch:before { + content: '\e178'; +} + +.ms-Icon--coffee:before { + content: '\e179'; +} + +.ms-Icon--briefcase:before { + content: '\e17a'; +} + +.ms-Icon--pill:before { + content: '\e17b'; +} + +.ms-Icon--trophy:before { + content: '\e17c'; +} + +.ms-Icon--firstAid:before { + content: '\e17d'; +} + +.ms-Icon--plane:before { + content: '\e17e'; +} + +.ms-Icon--page:before { + content: '\e17f'; +} + +.ms-Icon--car:before { + content: '\e180'; +} + +.ms-Icon--dogAlt:before { + content: '\e181'; +} + +.ms-Icon--document:before { + content: '\e182'; +} + +.ms-Icon--metadata:before { + content: '\e183'; +} + +.ms-Icon--pointItem:before { + content: '\e184'; +} + +.ms-Icon--text:before { + content: '\e185'; +} + +.ms-Icon--fieldText:before { + content: '\e186'; +} + +.ms-Icon--fieldNumber:before { + content: '\e187'; +} + +.ms-Icon--dropdown:before { + content: '\e188'; +} + +.ms-Icon--radioButton:before { + content: '\e189'; +} + +.ms-Icon--checkbox:before { + content: '\e18a'; +} + +.ms-Icon--story:before { + content: '\e18b'; +} + +.ms-Icon--bold:before { + content: '\e18c'; +} + +.ms-Icon--italic:before { + content: '\e18d'; +} + +.ms-Icon--underline:before { + content: '\e18e'; +} + +.ms-Icon--quote:before { + content: '\e18f'; +} + +.ms-Icon--styleRemove:before { + content: '\e190'; +} + +.ms-Icon--pictureAdd:before { + content: '\e191'; +} + +.ms-Icon--pictureRemove:before { + content: '\e192'; +} + +.ms-Icon--desktop:before { + content: '\e193'; +} + +.ms-Icon--tablet:before { + content: '\e194'; +} + +.ms-Icon--mobile:before { + content: '\e195'; +} + +.ms-Icon--table:before { + content: '\e196'; +} + +.ms-Icon--hide:before { + content: '\e197'; +} + +.ms-Icon--shield:before { + content: '\e198'; +} + +.ms-Icon--header:before { + content: '\e19a'; +} + +.ms-Icon--paint:before { + content: '\e19b'; +} + +.ms-Icon--support:before { + content: '\e19c'; +} + +.ms-Icon--settings:before { + content: '\e19d'; +} + +.ms-Icon--creditCard:before { + content: '\e19e'; +} + +.ms-Icon--reload:before { + content: '\e19f'; +} + +.ms-Icon--peopleSecurity:before { + content: '\e200'; +} + +.ms-Icon--fieldTextBox:before { + content: '\e203'; +} + +.ms-Icon--multiChoice:before { + content: '\e204'; +} + +.ms-Icon--fieldMail:before { + content: '\e205'; +} + +.ms-Icon--contactForm:before { + content: '\e206'; +} + +.ms-Icon--circleHalfFilled:before { + content: '\e207'; +} + +.ms-Icon--documentPDF:before { + content: '\e208'; +} + +.ms-Icon--bookmark:before { + content: '\e209'; +} + +.ms-Icon--circleUnfilled:before { + content: '\e20b'; +} + +.ms-Icon--circleFilled:before { + content: '\e20c'; +} + +.ms-Icon--textBox:before { + content: '\e20e'; +} + +.ms-Icon--drop:before { + content: '\e20f'; +} + +.ms-Icon--sun:before { + content: '\e210'; +} + +.ms-Icon--lifesaver:before { + content: '\e211'; +} + +.ms-Icon--lifesaverLock:before { + content: '\e212'; +} + +.ms-Icon--mailUnread:before { + content: '\e213'; +} + +.ms-Icon--mailRead:before { + content: '\e214'; +} + +.ms-Icon--inboxCheck:before { + content: '\e215'; +} + +.ms-Icon--folderSearch:before { + content: '\e216'; +} + +.ms-Icon--collapse:before { + content: '\e217'; +} + +.ms-Icon--expand:before { + content: '\e218'; +} + +.ms-Icon--ascending:before { + content: '\e219'; +} + +.ms-Icon--descending:before { + content: '\e21a'; +} + +.ms-Icon--filterClear:before { + content: '\e21b'; +} + +.ms-Icon--checkboxEmpty:before { + content: '\e21c'; +} + +.ms-Icon--checkboxMixed:before { + content: '\e21d'; +} + +.ms-Icon--boards:before { + content: '\e21e'; +} + +.ms-Icon--checkboxCheck:before { + content: '\e21f'; +} + +.ms-Icon--frowny:before { + content: '\e220'; +} + +.ms-Icon--lightBulb:before { + content: '\e221'; +} + +.ms-Icon--globe:before { + content: '\e222'; +} + +.ms-Icon--deviceWipe:before { + content: '\e223'; +} + +.ms-Icon--listCheck:before { + content: '\e226'; +} + +.ms-Icon--listGroup:before { + content: '\e227'; +} + +.ms-Icon--timeline:before { + content: '\e228'; +} + +.ms-Icon--fontIncrease:before { + content: '\e229'; +} + +.ms-Icon--fontDecrease:before { + content: '\e22a'; +} + +.ms-Icon--fontColor:before { + content: '\e22b'; +} + +.ms-Icon--mailCheck:before { + content: '\e22c'; +} + +.ms-Icon--mailDown:before { + content: '\e22d'; +} + +.ms-Icon--listCheckbox:before { + content: '\e22e'; +} + +.ms-Icon--sunAdd:before { + content: '\e22f'; +} + +.ms-Icon--sunQuestion:before { + content: '\e230'; +} + +.ms-Icon--chevronThinUp:before { + content: '\e231'; +} + +.ms-Icon--chevronThinDown:before { + content: '\e232'; +} + +.ms-Icon--chevronThinLeft:before { + content: '\e233'; +} + +.ms-Icon--chevronThinRight:before { + content: '\e234'; +} + +.ms-Icon--chevronThickUp:before { + content: '\e235'; +} + +.ms-Icon--chevronThickDown:before { + content: '\e236'; +} + +.ms-Icon--chevronThickLeft:before { + content: '\e237'; +} + +.ms-Icon--chevronThickRight:before { + content: '\e238'; +} + +.ms-Icon--linkRemove:before { + content: '\e239'; +} + +.ms-Icon--alertOutline:before { + content: '\e23b'; +} + +.ms-Icon--documentLandscape:before { + content: '\e23c'; +} + +.ms-Icon--documentAdd:before { + content: '\e23d'; +} + +.ms-Icon--toggleMiddle:before { + content: '\e23e'; +} + +.ms-Icon--embed:before { + content: '\e23f'; +} + +.ms-Icon--listNumbered:before { + content: '\e240'; +} + +.ms-Icon--peopleCheck:before { + content: '\e242'; +} + +.ms-Icon--caretUpOutline:before { + content: '\e243'; +} + +.ms-Icon--caretDownOutline:before { + content: '\e244'; +} + +.ms-Icon--caretLeftOutline:before { + content: '\e245'; +} + +.ms-Icon--caretRightOutline:before { + content: '\e246'; +} + +.ms-Icon--mailSync:before { + content: '\e248'; +} + +.ms-Icon--mailError:before { + content: '\e249'; +} + +.ms-Icon--mailPause:before { + content: '\e24a'; +} + +.ms-Icon--peopleSync:before { + content: '\e24b'; +} + +.ms-Icon--peopleError:before { + content: '\e24c'; +} + +.ms-Icon--peoplePause:before { + content: '\e24d'; +} + +.ms-Icon--circleBall:before { + content: '\e24e'; +} + +.ms-Icon--circleBalloons:before { + content: '\e24f'; +} + +.ms-Icon--circleCar:before { + content: '\e250'; +} + +.ms-Icon--circleCat:before { + content: '\e251'; +} + +.ms-Icon--circleCoffee:before { + content: '\e252'; +} + +.ms-Icon--circleDog:before { + content: '\e253'; +} + +.ms-Icon--circleLightning:before { + content: '\e254'; +} + +.ms-Icon--circlePill:before { + content: '\e255'; +} + +.ms-Icon--circlePlane:before { + content: '\e256'; +} + +.ms-Icon--circlePoodle:before { + content: '\e257'; +} + +.ms-Icon--checkPeople:before { + content: '\e259'; +} + +.ms-Icon--documentSearch:before { + content: '\e25a'; +} + +.ms-Icon--sortLines:before { + content: '\e25c'; +} + +.ms-Icon--calendarPublic:before { + content: '\e25d'; +} + +.ms-Icon--contactPublic:before { + content: '\e25e'; +} + +.ms-Icon--classNotebook:before { + content: '\e25f'; +} + +.ms-Icon--triangleUp:before { + content: '\e260'; +} + +.ms-Icon--triangleRight:before { + content: '\e261'; +} + +.ms-Icon--triangleDown:before { + content: '\e262'; +} + +.ms-Icon--triangleLeft:before { + content: '\e263'; +} + +.ms-Icon--triangleEmptyUp:before { + content: '\e264'; +} + +.ms-Icon--triangleEmptyRight:before { + content: '\e265'; +} + +.ms-Icon--triangleEmptyDown:before { + content: '\e266'; +} + +.ms-Icon--triangleEmptyLeft:before { + content: '\e267'; +} + +.ms-Icon--filePDF:before { + content: '\e268'; +} + +.ms-Icon--fileImage:before { + content: '\e26c'; +} + +.ms-Icon--fileDocument:before { + content: '\e26d'; +} + +.ms-Icon--listGroup2:before { + content: '\e26e'; +} + +.ms-Icon--copy:before { + content: '\e26f'; +} + +.ms-Icon--creditCardOutline:before { + content: '\e270'; +} + +.ms-Icon--mailPublic:before { + content: '\e272'; +} + +.ms-Icon--folderPublic:before { + content: '\e273'; +} + +.ms-Icon--teamwork:before { + content: '\e274'; +} + +.ms-Icon--move:before { + content: '\e275'; +} + +.ms-Icon--classroom:before { + content: '\e276'; +} + +.ms-Icon--menu2:before { + content: '\e277'; +} + +.ms-Icon--plus2:before { + content: '\e278'; +} + +.ms-Icon--tag:before { + content: '\e279'; +} + +.ms-Icon--arrowUp2:before { + content: '\e27a'; +} + +.ms-Icon--arrowDown2:before { + content: '\e27b'; +} + +.ms-Icon--circlePlus:before { + content: '\e27c'; +} + +.ms-Icon--circleInfo:before { + content: '\e27d'; +} + +.ms-Icon--section:before { + content: '\e27e'; +} + +.ms-Icon--sections:before { + content: '\e27f'; +} + +.ms-Icon--at:before { + content: '\e282'; +} + +.ms-Icon--arrowUpRight:before { + content: '\e283'; +} + +.ms-Icon--arrowDownRight:before { + content: '\e284'; +} + +.ms-Icon--arrowDownLeft:before { + content: '\e285'; +} + +.ms-Icon--arrowUpLeft:before { + content: '\e286'; +} + +.ms-Icon--bundle:before { + content: '\e287'; +} + +.ms-Icon--pictureEdit:before { + content: '\e288'; +} + +.ms-Icon--protectionCenter:before { + content: '\e289'; +} + +.ms-Icon--alert2:before { + content: '\e28a'; +} + +.ms-Icon--circle { + position: relative; + display: inline-block; + font-size: 1rem; + width: 1em; + height: 1em; + margin: 0 0.5em 0 0; + padding: 0; + text-align: left; + -webkit-font-smoothing: antialiased; +} + +.ms-Icon--circle:before, +.ms-Icon--circle:after { + line-height: 1; + font-size: inherit; +} + +.ms-Icon--circle:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Icon--circle:after { + content: '\e000'; + position: absolute; + top: 0; + left: 0; + -webkit-transform: scale(2); + -ms-transform: scale(2); + transform: scale(2); + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + z-index: 0; +} + +.ms-Icon--circle.ms-Icon--star:before { + top: -2%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--person:before { + top: -2%; + left: -3%; +} + +.ms-Icon--circle.ms-Icon--alert:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--people:before { + top: -4%; + left: -7%; +} + +.ms-Icon--circle.ms-Icon--bell:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--scheduling:before { + top: -3%; + left: 6%; +} + +.ms-Icon--circle.ms-Icon--documents:before { + top: -1%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--listBullets:before { + top: -1%; + left: 5%; +} + +.ms-Icon--circle.ms-Icon--panel:before { + left: -2%; +} + +.ms-Icon--circle.ms-Icon--popout:before { + top: -2%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--home:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--favorites:before { + top: -2%; + left: 2%; +} + +.ms-Icon--circle.ms-Icon--phone:before { + top: -2%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--mailSend:before { + left: -10%; +} + +.ms-Icon--circle.ms-Icon--pencil:before { + top: -2%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--flag:before { + left: 3%; +} + +.ms-Icon--circle.ms-Icon--miniatures:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--voicemail:before { + top: 2%; + left: -7%; +} + +.ms-Icon--circle.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; +} + +.ms-Icon--circle.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--gear:before { + left: 2%; +} + +.ms-Icon--circle.ms-Icon--check:before { + top: 3%; +} + +.ms-Icon--circle.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; +} + +.ms-Icon--circle.ms-Icon--directions:before { + left: 10%; +} + +.ms-Icon--circle.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDown:before { + top: 5%; + left: 2%; +} + +.ms-Icon--circle.ms-Icon--caretLeft:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--caretRight:before { + left: 6%; +} + +.ms-Icon--circle.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; +} + +.ms-Icon--circle.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownRight:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownLeft:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--note:before { + top: 2%; + left: -3%; +} + +.ms-Icon--circle.ms-Icon--noteReply:before { + top: 6%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--key:before { + top: 5%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--tile:before { + top: -1%; + left: -18%; +} + +.ms-Icon--circle.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; +} + +.ms-Icon--circle.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--documentReply:before { + top: -2%; + left: 7%; +} + +.ms-Icon--circle.ms-Icon--documentForward:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--partner:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--reactivate:before { + top: -2%; + left: 6%; +} + +.ms-Icon--circle.ms-Icon--sort:before { + left: -19%; +} + +.ms-Icon--circle.ms-Icon--personAdd:before { + top: -2%; + left: 6%; +} + +.ms-Icon--circle.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--chevronLeft:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronRight:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; +} + +.ms-Icon--circle.ms-Icon--newsfeed:before { + left: -4%; +} + +.ms-Icon--circle.ms-Icon--notebook:before { + left: -4%; +} + +.ms-Icon--circle.ms-Icon--link:before { + top: 2%; + left: -18%; +} + +.ms-Icon--circle.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--chevronsLeft:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronsRight:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--personRemove:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--receiptForward:before { + left: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptReply:before { + left: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptCheck:before { + left: -20%; +} + +.ms-Icon--circle.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; +} + +.ms-Icon--circle.ms-Icon--merge:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--split:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--eventCancel:before { + left: -2%; +} + +.ms-Icon--circle.ms-Icon--today:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--oofReply:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; +} + +.ms-Icon--circle.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; +} + +.ms-Icon--circle.ms-Icon--eye:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--post:before { + top: -4%; + left: 4%; +} + +.ms-Icon--circle.ms-Icon--fax:before { + top: -3%; + left: -2%; +} + +.ms-Icon--circle.ms-Icon--lightning:before { + top: 2%; + left: 1%; +} + +.ms-Icon--circle.ms-Icon--filter:before { + top: 7%; +} + +.ms-Icon--circle.ms-Icon--cart:before { + left: 3%; +} + +.ms-Icon--circle.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--replyAllAlt:before { + left: -16%; +} + +.ms-Icon--circle.ms-Icon--group:before { + left: -33%; +} + +.ms-Icon--circle.ms-Icon--money:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--noteEdit:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; +} + +.ms-Icon--circle.ms-Icon--pinLeft:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--heart:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--cake:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--books:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--video:before { + top: -3%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--balloon:before { + top: 4%; + left: -1%; +} + +.ms-Icon--circle.ms-Icon--music:before { + top: -2%; + left: -5%; +} + +.ms-Icon--circle.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--coffee:before { + top: -3%; + left: 3%; +} + +.ms-Icon--circle.ms-Icon--plane:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--dogAlt:before { + left: -15%; +} + +.ms-Icon--circle.ms-Icon--metadata:before { + top: -4%; + left: 4%; +} + +.ms-Icon--circle.ms-Icon--text:before { + top: -4%; + left: 10%; +} + +.ms-Icon--circle.ms-Icon--fieldText:before { + left: -14%; +} + +.ms-Icon--circle.ms-Icon--fieldNumber:before { + left: -14%; +} + +.ms-Icon--circle.ms-Icon--dropdown:before { + left: -14%; +} + +.ms-Icon--circle.ms-Icon--story:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--bold:before { + left: 4%; +} + +.ms-Icon--circle.ms-Icon--underline:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--quote:before { + left: -4%; +} + +.ms-Icon--circle.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; +} + +.ms-Icon--circle.ms-Icon--pictureAdd:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--pictureRemove:before { + left: -6%; +} + +.ms-Icon--circle.ms-Icon--mobile:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--hide:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--header:before { + left: -9%; +} + +.ms-Icon--circle.ms-Icon--msn:before { + left: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--caretLeftOutline:before { + left: -5%; +} + +.ms-Icon--circle.ms-Icon--caretRightOutline:before { + left: 5%; +} + +.ms-Icon--circle.ms-Icon--sway:before { + left: -3%; +} + +.ms-Icon--circle.ms-Icon--mailSync:before { + left: 8%; + top: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleSync:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--peopleError:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--peoplePause:before { + left: -8%; +} + +.ms-Icon--circle.ms-Icon--documentSearch:before { + left: 8%; +} + +.ms-Icon--circle.ms-Icon--dynamicsMarketing:before { + left: -8%; +} + +.ms-u-slideRightIn10 { + -webkit-animation-name: fadeIn, slideRightIn10; + animation-name: fadeIn, slideRightIn10; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn10 { + from { + -webkit-transform: translate3d(-10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn10 { + from { + -webkit-transform: translate3d(-10px, 0px, 0px); + transform: translate3d(-10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn20 { + -webkit-animation-name: fadeIn, slideRightIn20; + animation-name: fadeIn, slideRightIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn20 { + from { + -webkit-transform: translate3d(-20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn20 { + from { + -webkit-transform: translate3d(-20px, 0px, 0px); + transform: translate3d(-20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn40 { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn40 { + from { + -webkit-transform: translate3d(-40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn40 { + from { + -webkit-transform: translate3d(-40px, 0px, 0px); + transform: translate3d(-40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn10 { + -webkit-animation-name: fadeIn, slideLeftIn10; + animation-name: fadeIn, slideLeftIn10; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftIn10 { + from { + -webkit-transform: translate3d(10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeftIn10 { + from { + -webkit-transform: translate3d(10px, 0px, 0px); + transform: translate3d(10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn20 { + -webkit-animation-name: fadeIn, slideLeftIn20; + animation-name: fadeIn, slideLeftIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftIn20 { + from { + -webkit-transform: translate3d(20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeftIn20 { + from { + -webkit-transform: translate3d(20px, 0px, 0px); + transform: translate3d(20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn40 { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftIn40 { + from { + -webkit-transform: translate3d(40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeftIn40 { + from { + -webkit-transform: translate3d(40px, 0px, 0px); + transform: translate3d(40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn400 { + -webkit-animation-name: fadeIn, slideRightIn400; + animation-name: fadeIn, slideRightIn400; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn400 { + from { + -webkit-transform: translate3d(-400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn400 { + from { + -webkit-transform: translate3d(-400px, 0px, 0px); + transform: translate3d(-400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn400 { + -webkit-animation-name: fadeIn, slideLeft400; + animation-name: fadeIn, slideLeft400; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeft400 { + from { + -webkit-transform: translate3d(400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeft400 { + from { + -webkit-transform: translate3d(400px, 0px, 0px); + transform: translate3d(400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn20 { + -webkit-animation-name: fadeIn, slideUpIn20; + animation-name: fadeIn, slideUpIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpIn20 { + from { + -webkit-transform: translate3d(0px, 20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUpIn20 { + from { + -webkit-transform: translate3d(0px, 20px, 0px); + transform: translate3d(0px, 20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn10 { + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpIn10 { + from { + -webkit-transform: translate3d(0px, 10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUpIn10 { + from { + -webkit-transform: translate3d(0px, 10px, 0px); + transform: translate3d(0px, 10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn20 { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownIn20 { + from { + -webkit-transform: translate3d(0px, -20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDownIn20 { + from { + -webkit-transform: translate3d(0px, -20px, 0px); + transform: translate3d(0px, -20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn10 { + -webkit-animation-name: fadeIn, slideDownIn10; + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownIn10 { + from { + -webkit-transform: translate3d(0px, -10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDownIn10 { + from { + -webkit-transform: translate3d(0px, -10px, 0px); + transform: translate3d(0px, -10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightOut40 { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightOut40 { + from { + -webkit-transform: translate3d(0px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(40px, 0px, 0px); + } +} + +@keyframes slideRightOut40 { + from { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(40px, 0px, 0px); + transform: translate3d(40px, 0px, 0px); + } +} + +.ms-u-slideLeftOut40 { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftOut40 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-40px, 0px, 0px); + } +} + +@keyframes slideLeftOut40 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-40px, 0px, 0px); + transform: translate3d(-40px, 0px, 0px); + } +} + +.ms-u-slideRightOut400 { + -webkit-animation-name: fadeOut, slideRightOut400; + animation-name: fadeOut, slideRightOut400; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(400px, 0px, 0px); + } +} + +@keyframes slideRightOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(400px, 0px, 0px); + transform: translate3d(400px, 0px, 0px); + } +} + +.ms-u-slideLeftOut400 { + -webkit-animation-name: fadeOut, slideLeftOut400; + animation-name: fadeOut, slideLeftOut400; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-400px, 0px, 0px); + } +} + +@keyframes slideLeftOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-400px, 0px, 0px); + transform: translate3d(-400px, 0px, 0px); + } +} + +.ms-u-slideUpOut20 { + -webkit-animation-name: fadeOut, slideUpOut20; + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -20px, 0px); + } +} + +@keyframes slideUpOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -20px, 0px); + transform: translate3d(0px, -20px, 0px); + } +} + +.ms-u-slideUpOut10 { + -webkit-animation-name: fadeOut, slideUpOut10; + animation-name: fadeOut, slideUpOut10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -10px, 0px); + } +} + +@keyframes slideUpOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -10px, 0px); + transform: translate3d(0px, -10px, 0px); + } +} + +.ms-u-slideDownOut20 { + -webkit-animation-name: fadeOut, slideDownOut20; + animation-name: fadeOut, slideDownOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 20px, 0px); + } +} + +@keyframes slideDownOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 20px, 0px); + transform: translate3d(0px, 20px, 0px); + } +} + +.ms-u-slideDownOut10 { + -webkit-animation-name: fadeOut, slideDownOut10; + animation-name: fadeOut, slideDownOut10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 10px, 0px); + } +} + +@keyframes slideDownOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 10px, 0px); + transform: translate3d(0px, 10px, 0px); + } +} + +.ms-u-scaleUpIn100 { + -webkit-animation-name: fadeIn, scaleUp100; + animation-name: fadeIn, scaleUp100; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleUp100 { + from { + -webkit-transform: scale3d(0.98, 0.98, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + } +} + +@keyframes scaleUp100 { + from { + -webkit-transform: scale3d(0.98, 0.98, 1); + transform: scale3d(0.98, 0.98, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleDownIn100 { + -webkit-animation-name: fadeIn, scaleDown100; + animation-name: fadeIn, scaleDown100; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleDown100 { + from { + -webkit-transform: scale3d(1.03, 1.03, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + } +} + +@keyframes scaleDown100 { + from { + -webkit-transform: scale3d(1.03, 1.03, 1); + transform: scale3d(1.03, 1.03, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleUpOut103 { + -webkit-animation-name: fadeOut, scaleUp103; + animation-name: fadeOut, scaleUp103; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleUp103 { + from { + -webkit-transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(1.03, 1.03, 1); + } +} + +@keyframes scaleUp103 { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(1.03, 1.03, 1); + transform: scale3d(1.03, 1.03, 1); + } +} + +.ms-u-scaleDownOut98 { + -webkit-animation-name: fadeOut, scaleDown98; + animation-name: fadeOut, scaleDown98; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleDown98 { + from { + -webkit-transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(0.98, 0.98, 1); + } +} + +@keyframes scaleDown98 { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(0.98, 0.98, 1); + transform: scale3d(0.98, 0.98, 1); + } +} + +.ms-u-fadeIn400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-fadeIn100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeIn200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-u-fadeIn500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.467s; + animation-duration: 0.467s; +} + +@-webkit-keyframes fadeIn { + from { + opacity: 0; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 1; + } +} + +.ms-u-fadeOut400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-fadeOut100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-u-fadeOut200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeOut500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.467s; + animation-duration: 0.467s; +} + +@-webkit-keyframes fadeOut { + from { + opacity: 1; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 0; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 0; + } +} + +.ms-u-rotate90deg { + -webkit-animation-name: rotate90; + animation-name: rotate90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes rotate90 { + from { + -webkit-transform: rotateZ(0deg); + } + + to { + -webkit-transform: rotateZ(90deg); + } +} + +@keyframes rotate90 { + from { + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + } + + to { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); + } +} + +.ms-u-rotateN90deg { + -webkit-animation-name: rotateN90; + animation-name: rotateN90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes rotateN90 { + from { + -webkit-transform: rotateZ(90deg); + } + + to { + -webkit-transform: rotateZ(0deg); + } +} + +@keyframes rotateN90 { + from { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); + } + + to { + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + } +} + +.ms-u-expandCollapse400 { + transition: height 0.367s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse200 { + transition: height 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse100 { + transition: height 0.1s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-delay100 { + -webkit-animation-delay: 0.167s; + animation-delay: 0.167s; +} + +.ms-u-delay200 { + -webkit-animation-delay: 0.267s; + animation-delay: 0.267s; +} + +@media (max-width: 479px) { + .ms-u-hiddenSm, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 480px) and (max-width: 639px) { + .ms-u-hiddenMd, + .ms-u-hiddenMdUp, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLg, + .ms-u-hiddenLgUp, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1024px) and (max-width: 1365px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXl, + .ms-u-hiddenXlUp, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1366px) and (max-width: 1919px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxl, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1920px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxxl { + display: none !important; + } +} + +.ms-u-sm12 { + width: 100%; +} + +.ms-u-sm11 { + width: 91.66666666666666%; +} + +.ms-u-sm10 { + width: 83.33333333333334%; +} + +.ms-u-sm9 { + width: 75%; +} + +.ms-u-sm8 { + width: 66.66666666666666%; +} + +.ms-u-sm7 { + width: 58.333333333333336%; +} + +.ms-u-sm6 { + width: 50%; +} + +.ms-u-sm5 { + width: 41.66666666666667%; +} + +.ms-u-sm4 { + width: 33.33333333333333%; +} + +.ms-u-sm3 { + width: 25%; +} + +.ms-u-sm2 { + width: 16.666666666666664%; +} + +.ms-u-sm1 { + width: 8.333333333333332%; +} + +.ms-u-smPull12 { + right: 100%; +} + +.ms-u-smPull11 { + right: 91.66666666666666%; +} + +.ms-u-smPull10 { + right: 83.33333333333334%; +} + +.ms-u-smPull9 { + right: 75%; +} + +.ms-u-smPull8 { + right: 66.66666666666666%; +} + +.ms-u-smPull7 { + right: 58.333333333333336%; +} + +.ms-u-smPull6 { + right: 50%; +} + +.ms-u-smPull5 { + right: 41.66666666666667%; +} + +.ms-u-smPull4 { + right: 33.33333333333333%; +} + +.ms-u-smPull3 { + right: 25%; +} + +.ms-u-smPull2 { + right: 16.666666666666664%; +} + +.ms-u-smPull1 { + right: 8.333333333333332%; +} + +.ms-u-smPull0 { + right: auto; +} + +.ms-u-smPush12 { + left: 100%; +} + +.ms-u-smPush11 { + left: 91.66666666666666%; +} + +.ms-u-smPush10 { + left: 83.33333333333334%; +} + +.ms-u-smPush9 { + left: 75%; +} + +.ms-u-smPush8 { + left: 66.66666666666666%; +} + +.ms-u-smPush7 { + left: 58.333333333333336%; +} + +.ms-u-smPush6 { + left: 50%; +} + +.ms-u-smPush5 { + left: 41.66666666666667%; +} + +.ms-u-smPush4 { + left: 33.33333333333333%; +} + +.ms-u-smPush3 { + left: 25%; +} + +.ms-u-smPush2 { + left: 16.666666666666664%; +} + +.ms-u-smPush1 { + left: 8.333333333333332%; +} + +.ms-u-smPush0 { + left: auto; +} + +.ms-u-smOffset11 { + margin-left: 91.66666666666666%; +} + +.ms-u-smOffset10 { + margin-left: 83.33333333333334%; +} + +.ms-u-smOffset9 { + margin-left: 75%; +} + +.ms-u-smOffset8 { + margin-left: 66.66666666666666%; +} + +.ms-u-smOffset7 { + margin-left: 58.333333333333336%; +} + +.ms-u-smOffset6 { + margin-left: 50%; +} + +.ms-u-smOffset5 { + margin-left: 41.66666666666667%; +} + +.ms-u-smOffset4 { + margin-left: 33.33333333333333%; +} + +.ms-u-smOffset3 { + margin-left: 25%; +} + +.ms-u-smOffset2 { + margin-left: 16.666666666666664%; +} + +.ms-u-smOffset1 { + margin-left: 8.333333333333332%; +} + +.ms-u-smOffset0 { + margin-left: 0; +} + +@media (min-width: 480px) { + .ms-u-md12 { + width: 100%; + } + + .ms-u-md11 { + width: 91.66666666666666%; + } + + .ms-u-md10 { + width: 83.33333333333334%; + } + + .ms-u-md9 { + width: 75%; + } + + .ms-u-md8 { + width: 66.66666666666666%; + } + + .ms-u-md7 { + width: 58.333333333333336%; + } + + .ms-u-md6 { + width: 50%; + } + + .ms-u-md5 { + width: 41.66666666666667%; + } + + .ms-u-md4 { + width: 33.33333333333333%; + } + + .ms-u-md3 { + width: 25%; + } + + .ms-u-md2 { + width: 16.666666666666664%; + } + + .ms-u-md1 { + width: 8.333333333333332%; + } + + .ms-u-mdPull12 { + right: 100%; + } + + .ms-u-mdPull11 { + right: 91.66666666666666%; + } + + .ms-u-mdPull10 { + right: 83.33333333333334%; + } + + .ms-u-mdPull9 { + right: 75%; + } + + .ms-u-mdPull8 { + right: 66.66666666666666%; + } + + .ms-u-mdPull7 { + right: 58.333333333333336%; + } + + .ms-u-mdPull6 { + right: 50%; + } + + .ms-u-mdPull5 { + right: 41.66666666666667%; + } + + .ms-u-mdPull4 { + right: 33.33333333333333%; + } + + .ms-u-mdPull3 { + right: 25%; + } + + .ms-u-mdPull2 { + right: 16.666666666666664%; + } + + .ms-u-mdPull1 { + right: 8.333333333333332%; + } + + .ms-u-mdPull0 { + right: auto; + } + + .ms-u-mdPush12 { + left: 100%; + } + + .ms-u-mdPush11 { + left: 91.66666666666666%; + } + + .ms-u-mdPush10 { + left: 83.33333333333334%; + } + + .ms-u-mdPush9 { + left: 75%; + } + + .ms-u-mdPush8 { + left: 66.66666666666666%; + } + + .ms-u-mdPush7 { + left: 58.333333333333336%; + } + + .ms-u-mdPush6 { + left: 50%; + } + + .ms-u-mdPush5 { + left: 41.66666666666667%; + } + + .ms-u-mdPush4 { + left: 33.33333333333333%; + } + + .ms-u-mdPush3 { + left: 25%; + } + + .ms-u-mdPush2 { + left: 16.666666666666664%; + } + + .ms-u-mdPush1 { + left: 8.333333333333332%; + } + + .ms-u-mdPush0 { + left: auto; + } + + .ms-u-mdOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-mdOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-mdOffset9 { + margin-left: 75%; + } + + .ms-u-mdOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-mdOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-mdOffset6 { + margin-left: 50%; + } + + .ms-u-mdOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-mdOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-mdOffset3 { + margin-left: 25%; + } + + .ms-u-mdOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-mdOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-mdOffset0 { + margin-left: 0; + } +} + +@media (min-width: 640px) { + .ms-u-lg12 { + width: 100%; + } + + .ms-u-lg11 { + width: 91.66666666666666%; + } + + .ms-u-lg10 { + width: 83.33333333333334%; + } + + .ms-u-lg9 { + width: 75%; + } + + .ms-u-lg8 { + width: 66.66666666666666%; + } + + .ms-u-lg7 { + width: 58.333333333333336%; + } + + .ms-u-lg6 { + width: 50%; + } + + .ms-u-lg5 { + width: 41.66666666666667%; + } + + .ms-u-lg4 { + width: 33.33333333333333%; + } + + .ms-u-lg3 { + width: 25%; + } + + .ms-u-lg2 { + width: 16.666666666666664%; + } + + .ms-u-lg1 { + width: 8.333333333333332%; + } + + .ms-u-lgPull12 { + right: 100%; + } + + .ms-u-lgPull11 { + right: 91.66666666666666%; + } + + .ms-u-lgPull10 { + right: 83.33333333333334%; + } + + .ms-u-lgPull9 { + right: 75%; + } + + .ms-u-lgPull8 { + right: 66.66666666666666%; + } + + .ms-u-lgPull7 { + right: 58.333333333333336%; + } + + .ms-u-lgPull6 { + right: 50%; + } + + .ms-u-lgPull5 { + right: 41.66666666666667%; + } + + .ms-u-lgPull4 { + right: 33.33333333333333%; + } + + .ms-u-lgPull3 { + right: 25%; + } + + .ms-u-lgPull2 { + right: 16.666666666666664%; + } + + .ms-u-lgPull1 { + right: 8.333333333333332%; + } + + .ms-u-lgPull0 { + right: auto; + } + + .ms-u-lgPush12 { + left: 100%; + } + + .ms-u-lgPush11 { + left: 91.66666666666666%; + } + + .ms-u-lgPush10 { + left: 83.33333333333334%; + } + + .ms-u-lgPush9 { + left: 75%; + } + + .ms-u-lgPush8 { + left: 66.66666666666666%; + } + + .ms-u-lgPush7 { + left: 58.333333333333336%; + } + + .ms-u-lgPush6 { + left: 50%; + } + + .ms-u-lgPush5 { + left: 41.66666666666667%; + } + + .ms-u-lgPush4 { + left: 33.33333333333333%; + } + + .ms-u-lgPush3 { + left: 25%; + } + + .ms-u-lgPush2 { + left: 16.666666666666664%; + } + + .ms-u-lgPush1 { + left: 8.333333333333332%; + } + + .ms-u-lgPush0 { + left: auto; + } + + .ms-u-lgOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-lgOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-lgOffset9 { + margin-left: 75%; + } + + .ms-u-lgOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-lgOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-lgOffset6 { + margin-left: 50%; + } + + .ms-u-lgOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-lgOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-lgOffset3 { + margin-left: 25%; + } + + .ms-u-lgOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-lgOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-lgOffset0 { + margin-left: 0; + } +} + +@media (min-width: 1024px) { + .ms-u-xl12 { + width: 100%; + } + + .ms-u-xl11 { + width: 91.66666666666666%; + } + + .ms-u-xl10 { + width: 83.33333333333334%; + } + + .ms-u-xl9 { + width: 75%; + } + + .ms-u-xl8 { + width: 66.66666666666666%; + } + + .ms-u-xl7 { + width: 58.333333333333336%; + } + + .ms-u-xl6 { + width: 50%; + } + + .ms-u-xl5 { + width: 41.66666666666667%; + } + + .ms-u-xl4 { + width: 33.33333333333333%; + } + + .ms-u-xl3 { + width: 25%; + } + + .ms-u-xl2 { + width: 16.666666666666664%; + } + + .ms-u-xl1 { + width: 8.333333333333332%; + } + + .ms-u-xlPull12 { + right: 100%; + } + + .ms-u-xlPull11 { + right: 91.66666666666666%; + } + + .ms-u-xlPull10 { + right: 83.33333333333334%; + } + + .ms-u-xlPull9 { + right: 75%; + } + + .ms-u-xlPull8 { + right: 66.66666666666666%; + } + + .ms-u-xlPull7 { + right: 58.333333333333336%; + } + + .ms-u-xlPull6 { + right: 50%; + } + + .ms-u-xlPull5 { + right: 41.66666666666667%; + } + + .ms-u-xlPull4 { + right: 33.33333333333333%; + } + + .ms-u-xlPull3 { + right: 25%; + } + + .ms-u-xlPull2 { + right: 16.666666666666664%; + } + + .ms-u-xlPull1 { + right: 8.333333333333332%; + } + + .ms-u-xlPull0 { + right: auto; + } + + .ms-u-xlPush12 { + left: 100%; + } + + .ms-u-xlPush11 { + left: 91.66666666666666%; + } + + .ms-u-xlPush10 { + left: 83.33333333333334%; + } + + .ms-u-xlPush9 { + left: 75%; + } + + .ms-u-xlPush8 { + left: 66.66666666666666%; + } + + .ms-u-xlPush7 { + left: 58.333333333333336%; + } + + .ms-u-xlPush6 { + left: 50%; + } + + .ms-u-xlPush5 { + left: 41.66666666666667%; + } + + .ms-u-xlPush4 { + left: 33.33333333333333%; + } + + .ms-u-xlPush3 { + left: 25%; + } + + .ms-u-xlPush2 { + left: 16.666666666666664%; + } + + .ms-u-xlPush1 { + left: 8.333333333333332%; + } + + .ms-u-xlPush0 { + left: auto; + } + + .ms-u-xlOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-xlOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-xlOffset9 { + margin-left: 75%; + } + + .ms-u-xlOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-xlOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-xlOffset6 { + margin-left: 50%; + } + + .ms-u-xlOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-xlOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-xlOffset3 { + margin-left: 25%; + } + + .ms-u-xlOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-xlOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-xlOffset0 { + margin-left: 0; + } +} + +@media (min-width: 1366px) { + .ms-u-xxl12 { + width: 100%; + } + + .ms-u-xxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxl9 { + width: 75%; + } + + .ms-u-xxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxl6 { + width: 50%; + } + + .ms-u-xxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxl3 { + width: 25%; + } + + .ms-u-xxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxlPull12 { + right: 100%; + } + + .ms-u-xxlPull11 { + right: 91.66666666666666%; + } + + .ms-u-xxlPull10 { + right: 83.33333333333334%; + } + + .ms-u-xxlPull9 { + right: 75%; + } + + .ms-u-xxlPull8 { + right: 66.66666666666666%; + } + + .ms-u-xxlPull7 { + right: 58.333333333333336%; + } + + .ms-u-xxlPull6 { + right: 50%; + } + + .ms-u-xxlPull5 { + right: 41.66666666666667%; + } + + .ms-u-xxlPull4 { + right: 33.33333333333333%; + } + + .ms-u-xxlPull3 { + right: 25%; + } + + .ms-u-xxlPull2 { + right: 16.666666666666664%; + } + + .ms-u-xxlPull1 { + right: 8.333333333333332%; + } + + .ms-u-xxlPull0 { + right: auto; + } + + .ms-u-xxlPush12 { + left: 100%; + } + + .ms-u-xxlPush11 { + left: 91.66666666666666%; + } + + .ms-u-xxlPush10 { + left: 83.33333333333334%; + } + + .ms-u-xxlPush9 { + left: 75%; + } + + .ms-u-xxlPush8 { + left: 66.66666666666666%; + } + + .ms-u-xxlPush7 { + left: 58.333333333333336%; + } + + .ms-u-xxlPush6 { + left: 50%; + } + + .ms-u-xxlPush5 { + left: 41.66666666666667%; + } + + .ms-u-xxlPush4 { + left: 33.33333333333333%; + } + + .ms-u-xxlPush3 { + left: 25%; + } + + .ms-u-xxlPush2 { + left: 16.666666666666664%; + } + + .ms-u-xxlPush1 { + left: 8.333333333333332%; + } + + .ms-u-xxlPush0 { + left: auto; + } + + .ms-u-xxlOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-xxlOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-xxlOffset9 { + margin-left: 75%; + } + + .ms-u-xxlOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-xxlOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-xxlOffset6 { + margin-left: 50%; + } + + .ms-u-xxlOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-xxlOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-xxlOffset3 { + margin-left: 25%; + } + + .ms-u-xxlOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-xxlOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-xxlOffset0 { + margin-left: 0; + } +} + +@media (min-width: 1920px) { + .ms-u-xxxl12 { + width: 100%; + } + + .ms-u-xxxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxxl9 { + width: 75%; + } + + .ms-u-xxxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxxl6 { + width: 50%; + } + + .ms-u-xxxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxxl3 { + width: 25%; + } + + .ms-u-xxxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxxlPull12 { + right: 100%; + } + + .ms-u-xxxlPull11 { + right: 91.66666666666666%; + } + + .ms-u-xxxlPull10 { + right: 83.33333333333334%; + } + + .ms-u-xxxlPull9 { + right: 75%; + } + + .ms-u-xxxlPull8 { + right: 66.66666666666666%; + } + + .ms-u-xxxlPull7 { + right: 58.333333333333336%; + } + + .ms-u-xxxlPull6 { + right: 50%; + } + + .ms-u-xxxlPull5 { + right: 41.66666666666667%; + } + + .ms-u-xxxlPull4 { + right: 33.33333333333333%; + } + + .ms-u-xxxlPull3 { + right: 25%; + } + + .ms-u-xxxlPull2 { + right: 16.666666666666664%; + } + + .ms-u-xxxlPull1 { + right: 8.333333333333332%; + } + + .ms-u-xxxlPull0 { + right: auto; + } + + .ms-u-xxxlPush12 { + left: 100%; + } + + .ms-u-xxxlPush11 { + left: 91.66666666666666%; + } + + .ms-u-xxxlPush10 { + left: 83.33333333333334%; + } + + .ms-u-xxxlPush9 { + left: 75%; + } + + .ms-u-xxxlPush8 { + left: 66.66666666666666%; + } + + .ms-u-xxxlPush7 { + left: 58.333333333333336%; + } + + .ms-u-xxxlPush6 { + left: 50%; + } + + .ms-u-xxxlPush5 { + left: 41.66666666666667%; + } + + .ms-u-xxxlPush4 { + left: 33.33333333333333%; + } + + .ms-u-xxxlPush3 { + left: 25%; + } + + .ms-u-xxxlPush2 { + left: 16.666666666666664%; + } + + .ms-u-xxxlPush1 { + left: 8.333333333333332%; + } + + .ms-u-xxxlPush0 { + left: auto; + } + + .ms-u-xxxlOffset11 { + margin-left: 91.66666666666666%; + } + + .ms-u-xxxlOffset10 { + margin-left: 83.33333333333334%; + } + + .ms-u-xxxlOffset9 { + margin-left: 75%; + } + + .ms-u-xxxlOffset8 { + margin-left: 66.66666666666666%; + } + + .ms-u-xxxlOffset7 { + margin-left: 58.333333333333336%; + } + + .ms-u-xxxlOffset6 { + margin-left: 50%; + } + + .ms-u-xxxlOffset5 { + margin-left: 41.66666666666667%; + } + + .ms-u-xxxlOffset4 { + margin-left: 33.33333333333333%; + } + + .ms-u-xxxlOffset3 { + margin-left: 25%; + } + + .ms-u-xxxlOffset2 { + margin-left: 16.666666666666664%; + } + + .ms-u-xxxlOffset1 { + margin-left: 8.333333333333332%; + } + + .ms-u-xxxlOffset0 { + margin-left: 0; + } +} + +.ms-Grid { + box-sizing: border-box; + *zoom: 1; + padding: 0 8px; +} + +.ms-Grid:before, +.ms-Grid:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-Grid:after { + clear: both; +} + +.ms-Grid-row { + margin: 0 -8px; + box-sizing: border-box; + *zoom: 1; +} + +.ms-Grid-row:before, +.ms-Grid-row:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-Grid-row:after { + clear: both; +} + +.ms-Grid-col { + position: relative; + min-height: 1px; + padding-left: 8px; + padding-right: 8px; + box-sizing: border-box; + float: left; +} + +.ms-Grid-col .ms-Grid { + padding: 0; +} diff --git a/dist/css/fabric.min.css b/dist/css/fabric.min.css new file mode 100644 index 000000000..dd3e404f4 --- /dev/null +++ b/dist/css/fabric.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-alert{background-color:#f4f4f4}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColor-info,.ms-borderColor-success{border-color:#107c10}.ms-borderColor-alert{border-color:#d83b01}.ms-borderColor-error{border-color:#a80000}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-xxl{font-size:28px}.ms-font-xl{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-font-l,.ms-font-xl{color:#333;font-weight:400}.ms-font-l{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px}.ms-font-mi,.ms-font-xs{color:#333;font-weight:400}.ms-font-mi{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:10px}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover,.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}@font-face{font-family:Leelawadee UI Bold;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI Semilight;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Arabic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Arabic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Arabic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Arabic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Cyrillic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Cyrillic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Cyrillic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Cyrillic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light EastEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular EastEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold EastEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight EastEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Greek;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Greek;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Greek;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Greek;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Hebrew;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Hebrew;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Hebrew;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Hebrew;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Vietnamese;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Vietnamese;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Vietnamese;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Vietnamese;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light WestEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular WestEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold WestEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight WestEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}[lang=ja-JP] .ms-font-l,[lang=ja-JP] .ms-font-m,[lang=ja-JP] .ms-font-m-plus,[lang=ja-JP] .ms-font-mi,[lang=ja-JP] .ms-font-s,[lang=ja-JP] .ms-font-s-plus,[lang=ja-JP] .ms-font-su,[lang=ja-JP] .ms-font-xl,[lang=ja-JP] .ms-font-xs,[lang=ja-JP] .ms-font-xxl,[lang=ja-JP] .ms-fontWeight-light,[lang=ja-JP] .ms-fontWeight-light-hover:hover,[lang=ja-JP] .ms-fontWeight-regular,[lang=ja-JP] .ms-fontWeight-regular-hover:hover,[lang=ja-JP] .ms-fontWeight-semibold,[lang=ja-JP] .ms-fontWeight-semibold-hover:hover,[lang=ja-JP] .ms-fontWeight-semilight,[lang=ja-JP] .ms-fontWeight-semilight-hover:hover{font-family:Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,Tahoma,Arial,sans-serif}[lang=ko-KR] .ms-font-l,[lang=ko-KR] .ms-font-m,[lang=ko-KR] .ms-font-m-plus,[lang=ko-KR] .ms-font-mi,[lang=ko-KR] .ms-font-s,[lang=ko-KR] .ms-font-s-plus,[lang=ko-KR] .ms-font-su,[lang=ko-KR] .ms-font-xl,[lang=ko-KR] .ms-font-xs,[lang=ko-KR] .ms-font-xxl,[lang=ko-KR] .ms-fontWeight-light,[lang=ko-KR] .ms-fontWeight-light-hover:hover,[lang=ko-KR] .ms-fontWeight-regular,[lang=ko-KR] .ms-fontWeight-regular-hover:hover,[lang=ko-KR] .ms-fontWeight-semibold,[lang=ko-KR] .ms-fontWeight-semibold-hover:hover,[lang=ko-KR] .ms-fontWeight-semilight,[lang=ko-KR] .ms-fontWeight-semilight-hover:hover{font-family:Malgun Gothic,Gulim,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHS] .ms-font-l,[lang=ch-ZHS] .ms-font-m,[lang=ch-ZHS] .ms-font-m-plus,[lang=ch-ZHS] .ms-font-mi,[lang=ch-ZHS] .ms-font-s,[lang=ch-ZHS] .ms-font-s-plus,[lang=ch-ZHS] .ms-font-su,[lang=ch-ZHS] .ms-font-xl,[lang=ch-ZHS] .ms-font-xs,[lang=ch-ZHS] .ms-font-xxl,[lang=ch-ZHS] .ms-fontWeight-light,[lang=ch-ZHS] .ms-fontWeight-light-hover:hover,[lang=ch-ZHS] .ms-fontWeight-regular,[lang=ch-ZHS] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semibold,[lang=ch-ZHS] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semilight,[lang=ch-ZHS] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Yahei,Verdana,Simsun,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHT] .ms-font-l,[lang=ch-ZHT] .ms-font-m,[lang=ch-ZHT] .ms-font-m-plus,[lang=ch-ZHT] .ms-font-mi,[lang=ch-ZHT] .ms-font-s,[lang=ch-ZHT] .ms-font-s-plus,[lang=ch-ZHT] .ms-font-su,[lang=ch-ZHT] .ms-font-xl,[lang=ch-ZHT] .ms-font-xs,[lang=ch-ZHT] .ms-font-xxl,[lang=ch-ZHT] .ms-fontWeight-light,[lang=ch-ZHT] .ms-fontWeight-light-hover:hover,[lang=ch-ZHT] .ms-fontWeight-regular,[lang=ch-ZHT] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semibold,[lang=ch-ZHT] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semilight,[lang=ch-ZHT] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Jhenghei,Pmingliu,Segoe UI,Tahoma,Arial,sans-serif}[lang=hi-IN] .ms-font-l,[lang=hi-IN] .ms-font-m,[lang=hi-IN] .ms-font-m-plus,[lang=hi-IN] .ms-font-mi,[lang=hi-IN] .ms-font-s,[lang=hi-IN] .ms-font-s-plus,[lang=hi-IN] .ms-font-su,[lang=hi-IN] .ms-font-xl,[lang=hi-IN] .ms-font-xs,[lang=hi-IN] .ms-font-xxl,[lang=hi-IN] .ms-fontWeight-light,[lang=hi-IN] .ms-fontWeight-light-hover:hover,[lang=hi-IN] .ms-fontWeight-regular,[lang=hi-IN] .ms-fontWeight-regular-hover:hover,[lang=hi-IN] .ms-fontWeight-semibold,[lang=hi-IN] .ms-fontWeight-semibold-hover:hover,[lang=hi-IN] .ms-fontWeight-semilight,[lang=hi-IN] .ms-fontWeight-semilight-hover:hover{font-family:Nirmala UI,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-l,[lang=th-TH] .ms-font-su,[lang=th-TH] .ms-font-xl,[lang=th-TH] .ms-font-xxl,[lang=th-TH] .ms-fontWeight-light,[lang=th-TH] .ms-fontWeight-light-hover:hover,[lang=th-TH] .ms-fontWeight-semilight,[lang=th-TH] .ms-fontWeight-semilight-hover:hover{font-family:Leelawadee UI Semilight,Kmer UI,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-fontWeight-regular,[lang=th-TH] .ms-fontweight-regular-hover:hover{font-family:Leelawadee UI Regular,Kmer UI,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-mi,[lang=th-TH] .ms-fontWeight-semibold,[lang=th-TH] .ms-fontWeight-semibold-hover:hover{font-family:Leelawadee UI Bold,Kmer UI,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-xl,[lang=ar] .ms-font-xxl,[lang=ar] .ms-fontWeight-light,[lang=ar] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Arabic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-l,[lang=ar] .ms-font-su,[lang=ar] .ms-fontWeight-semilight,[lang=ar] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Arabic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-fontWeight-regular,[lang=ar] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Arabic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-mi,[lang=ar] .ms-fontWeight-semibold,[lang=ar] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Arabic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-xl,[lang=bg-BG] .ms-font-xxl,[lang=bg-BG] .ms-fontWeight-light,[lang=bg-BG] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-l,[lang=bg-BG] .ms-font-su,[lang=bg-BG] .ms-fontWeight-semilight,[lang=bg-BG] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-fontWeight-regular,[lang=bg-BG] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-mi,[lang=bg-BG] .ms-fontWeight-semibold,[lang=bg-BG] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-xl,[lang=ru-RU] .ms-font-xxl,[lang=ru-RU] .ms-fontWeight-light,[lang=ru-RU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-l,[lang=ru-RU] .ms-font-su,[lang=ru-RU] .ms-fontWeight-semilight,[lang=ru-RU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-fontWeight-regular,[lang=ru-RU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-mi,[lang=ru-RU] .ms-fontWeight-semibold,[lang=ru-RU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-xl,[lang=uk-UA] .ms-font-xxl,[lang=uk-UA] .ms-fontWeight-light,[lang=uk-UA] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-l,[lang=uk-UA] .ms-font-su,[lang=uk-UA] .ms-fontWeight-semilight,[lang=uk-UA] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-fontWeight-regular,[lang=uk-UA] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-mi,[lang=uk-UA] .ms-fontWeight-semibold,[lang=uk-UA] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-xl,[lang=cs-CZ] .ms-font-xxl,[lang=cs-CZ] .ms-fontWeight-light,[lang=cs-CZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-l,[lang=cs-CZ] .ms-font-su,[lang=cs-CZ] .ms-fontWeight-semilight,[lang=cs-CZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-fontWeight-regular,[lang=cs-CZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-mi,[lang=cs-CZ] .ms-fontWeight-semibold,[lang=cs-CZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-xl,[lang=et-EE] .ms-font-xxl,[lang=et-EE] .ms-fontWeight-light,[lang=et-EE] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-l,[lang=et-EE] .ms-font-su,[lang=et-EE] .ms-fontWeight-semilight,[lang=et-EE] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-fontWeight-regular,[lang=et-EE] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-mi,[lang=et-EE] .ms-fontWeight-semibold,[lang=et-EE] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-xl,[lang=hr-HR] .ms-font-xxl,[lang=hr-HR] .ms-fontWeight-light,[lang=hr-HR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-l,[lang=hr-HR] .ms-font-su,[lang=hr-HR] .ms-fontWeight-semilight,[lang=hr-HR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-fontWeight-regular,[lang=hr-HR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-mi,[lang=hr-HR] .ms-fontWeight-semibold,[lang=hr-HR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-xl,[lang=hu-HU] .ms-font-xxl,[lang=hu-HU] .ms-fontWeight-light,[lang=hu-HU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-l,[lang=hu-HU] .ms-font-su,[lang=hu-HU] .ms-fontWeight-semilight,[lang=hu-HU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-fontWeight-regular,[lang=hu-HU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-mi,[lang=hu-HU] .ms-fontWeight-semibold,[lang=hu-HU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-xl,[lang=lt-LT] .ms-font-xxl,[lang=lt-LT] .ms-fontWeight-light,[lang=lt-LT] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-l,[lang=lt-LT] .ms-font-su,[lang=lt-LT] .ms-fontWeight-semilight,[lang=lt-LT] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-fontWeight-regular,[lang=lt-LT] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-mi,[lang=lt-LT] .ms-fontWeight-semibold,[lang=lt-LT] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-xl,[lang=lv-LV] .ms-font-xxl,[lang=lv-LV] .ms-fontWeight-light,[lang=lv-LV] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-l,[lang=lv-LV] .ms-font-su,[lang=lv-LV] .ms-fontWeight-semilight,[lang=lv-LV] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-fontWeight-regular,[lang=lv-LV] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-mi,[lang=lv-LV] .ms-fontWeight-semibold,[lang=lv-LV] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-xl,[lang=pl-PL] .ms-font-xxl,[lang=pl-PL] .ms-fontWeight-light,[lang=pl-PL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-l,[lang=pl-PL] .ms-font-su,[lang=pl-PL] .ms-fontWeight-semilight,[lang=pl-PL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-fontWeight-regular,[lang=pl-PL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-mi,[lang=pl-PL] .ms-fontWeight-semibold,[lang=pl-PL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-xl,[lang=lt-sr-SP] .ms-font-xxl,[lang=lt-sr-SP] .ms-fontWeight-light,[lang=lt-sr-SP] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-l,[lang=lt-sr-SP] .ms-font-su,[lang=lt-sr-SP] .ms-fontWeight-semilight,[lang=lt-sr-SP] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-fontWeight-regular,[lang=lt-sr-SP] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-mi,[lang=lt-sr-SP] .ms-fontWeight-semibold,[lang=lt-sr-SP] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-xl,[lang=tr-TR] .ms-font-xxl,[lang=tr-TR] .ms-fontWeight-light,[lang=tr-TR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-l,[lang=tr-TR] .ms-font-su,[lang=tr-TR] .ms-fontWeight-semilight,[lang=tr-TR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-fontWeight-regular,[lang=tr-TR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-mi,[lang=tr-TR] .ms-fontWeight-semibold,[lang=tr-TR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-xl,[lang=sk-SK] .ms-font-xxl,[lang=sk-SK] .ms-fontWeight-light,[lang=sk-SK] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-l,[lang=sk-SK] .ms-font-su,[lang=sk-SK] .ms-fontWeight-semilight,[lang=sk-SK] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-fontWeight-regular,[lang=sk-SK] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-mi,[lang=sk-SK] .ms-fontWeight-semibold,[lang=sk-SK] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-xl,[lang=kk-KZ] .ms-font-xxl,[lang=kk-KZ] .ms-fontWeight-light,[lang=kk-KZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-l,[lang=kk-KZ] .ms-font-su,[lang=kk-KZ] .ms-fontWeight-semilight,[lang=kk-KZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-fontWeight-regular,[lang=kk-KZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-mi,[lang=kk-KZ] .ms-fontWeight-semibold,[lang=kk-KZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-xl,[lang=el-GR] .ms-font-xxl,[lang=el-GR] .ms-fontWeight-light,[lang=el-GR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Greek,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-l,[lang=el-GR] .ms-font-su,[lang=el-GR] .ms-fontWeight-semilight,[lang=el-GR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Greek,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-fontWeight-regular,[lang=el-GR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Greek,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-mi,[lang=el-GR] .ms-fontWeight-semibold,[lang=el-GR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Greek,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-xl,[lang=he-IL] .ms-font-xxl,[lang=he-IL] .ms-fontWeight-light,[lang=he-IL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Hebrew,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-l,[lang=he-IL] .ms-font-su,[lang=he-IL] .ms-fontWeight-semilight,[lang=he-IL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Hebrew,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-fontWeight-regular,[lang=he-IL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Hebrew,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-mi,[lang=he-IL] .ms-fontWeight-semibold,[lang=he-IL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Hebrew,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-xl,[lang=vi-VN] .ms-font-xxl,[lang=vi-VN] .ms-fontWeight-light,[lang=vi-VN] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Vietnamese,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-l,[lang=vi-VN] .ms-font-su,[lang=vi-VN] .ms-fontWeight-semilight,[lang=vi-VN] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Vietnamese,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-fontWeight-regular,[lang=vi-VN] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Vietnamese,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-mi,[lang=vi-VN] .ms-fontWeight-semibold,[lang=vi-VN] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Vietnamese,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@font-face{font-family:Office365Icons;src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot);src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg#office365icons) format('svg');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none}.ms-Icon--circleEmpty:before{content:'\e000'}.ms-Icon--circleFill:before{content:'\e001'}.ms-Icon--placeholder:before{content:'\e002'}.ms-Icon--star:before{content:'\e003'}.ms-Icon--plus:before{content:'\e004'}.ms-Icon--minus:before{content:'\e005'}.ms-Icon--question:before{content:'\e006'}.ms-Icon--exclamation:before{content:'\e007'}.ms-Icon--person:before{content:'\e008'}.ms-Icon--mail:before{content:'\e009'}.ms-Icon--infoCircle:before{content:'\e00a'}.ms-Icon--alert:before{content:'\e00b'}.ms-Icon--xCircle:before{content:'\e00c'}.ms-Icon--mailOpen:before{content:'\e00d'}.ms-Icon--people:before{content:'\e00e'}.ms-Icon--bell:before{content:'\e010'}.ms-Icon--calendar:before{content:'\e011'}.ms-Icon--scheduling:before{content:'\e012'}.ms-Icon--event:before{content:'\e013'}.ms-Icon--folder:before{content:'\e014'}.ms-Icon--documents:before{content:'\e015'}.ms-Icon--onedrive:before{content:'\e016'}.ms-Icon--chat:before{content:'\e017'}.ms-Icon--sites:before{content:'\e018'}.ms-Icon--listBullets:before{content:'\e019'}.ms-Icon--calendarWeek:before{content:'\e01a'}.ms-Icon--calendarWorkWeek:before{content:'\e01b'}.ms-Icon--calendarDay:before{content:'\e01c'}.ms-Icon--folderMove:before{content:'\e01d'}.ms-Icon--panel:before{content:'\e01e'}.ms-Icon--popout:before{content:'\e01f'}.ms-Icon--menu:before{content:'\e020'}.ms-Icon--home:before{content:'\e021'}.ms-Icon--favorites:before{content:'\e022'}.ms-Icon--phone:before{content:'\e023'}.ms-Icon--mailSend:before{content:'\e024'}.ms-Icon--save:before{content:'\e025'}.ms-Icon--trash:before{content:'\e026'}.ms-Icon--pencil:before{content:'\e027'}.ms-Icon--flag:before{content:'\e028'}.ms-Icon--reply:before{content:'\e029'}.ms-Icon--miniatures:before{content:'\e02a'}.ms-Icon--voicemail:before{content:'\e02b'}.ms-Icon--play:before{content:'\e02c'}.ms-Icon--pause:before{content:'\e02d'}.ms-Icon--onlineAdd:before{content:'\e02e'}.ms-Icon--onlineJoin:before{content:'\e02f'}.ms-Icon--replyAll:before{content:'\e030'}.ms-Icon--attachment:before{content:'\e031'}.ms-Icon--drm:before{content:'\e032'}.ms-Icon--pinDown:before{content:'\e033'}.ms-Icon--refresh:before{content:'\e034'}.ms-Icon--gear:before{content:'\e035'}.ms-Icon--smiley:before{content:'\e036'}.ms-Icon--info:before{content:'\e037'}.ms-Icon--lock:before{content:'\e038'}.ms-Icon--search:before{content:'\e039'}.ms-Icon--questionReverse:before{content:'\e03a'}.ms-Icon--notRecurring:before{content:'\e03b'}.ms-Icon--tasks:before{content:'\e040'}.ms-Icon--check:before{content:'\e041'}.ms-Icon--x:before{content:'\e042'}.ms-Icon--ellipsis:before{content:'\e045'}.ms-Icon--dot:before{content:'\e046'}.ms-Icon--arrowUp:before{content:'\e047'}.ms-Icon--arrowDown:before{content:'\e048'}.ms-Icon--arrowLeft:before{content:'\e049'}.ms-Icon--arrowRight:before{content:'\e04a'}.ms-Icon--download:before{content:'\e04b'}.ms-Icon--directions:before{content:'\e04c'}.ms-Icon--microphone:before{content:'\e04f'}.ms-Icon--caretUp:before{content:'\e051'}.ms-Icon--caretDown:before{content:'\e052'}.ms-Icon--caretLeft:before{content:'\e053'}.ms-Icon--caretRight:before{content:'\e054'}.ms-Icon--caretUpLeft:before{content:'\e05a'}.ms-Icon--caretUpRight:before{content:'\e05b'}.ms-Icon--caretDownRight:before{content:'\e05c'}.ms-Icon--caretDownLeft:before{content:'\e05d'}.ms-Icon--note:before{content:'\e06a'}.ms-Icon--noteReply:before{content:'\e06b'}.ms-Icon--noteForward:before{content:'\e06c'}.ms-Icon--key:before{content:'\e06f'}.ms-Icon--tile:before{content:'\e070'}.ms-Icon--taskRecurring:before{content:'\e071'}.ms-Icon--starEmpty:before{content:'\e073'}.ms-Icon--upload:before{content:'\e076'}.ms-Icon--wrench:before{content:'\e077'}.ms-Icon--share:before{content:'\e078'}.ms-Icon--documentReply:before{content:'\e079'}.ms-Icon--documentForward:before{content:'\e07a'}.ms-Icon--partner:before{content:'\e080'}.ms-Icon--reactivate:before{content:'\e084'}.ms-Icon--sort:before{content:'\e085'}.ms-Icon--personAdd:before{content:'\e086'}.ms-Icon--chevronUp:before{content:'\e087'}.ms-Icon--chevronDown:before{content:'\e088'}.ms-Icon--chevronLeft:before{content:'\e089'}.ms-Icon--chevronRight:before{content:'\e08a'}.ms-Icon--peopleAdd:before{content:'\e08c'}.ms-Icon--newsfeed:before{content:'\e08d'}.ms-Icon--notebook:before{content:'\e08e'}.ms-Icon--link:before{content:'\e08f'}.ms-Icon--chevronsUp:before{content:'\e090'}.ms-Icon--chevronsDown:before{content:'\e091'}.ms-Icon--chevronsLeft:before{content:'\e092'}.ms-Icon--chevronsRight:before{content:'\e093'}.ms-Icon--clutter:before{content:'\e09a'}.ms-Icon--subscribe:before{content:'\e09c'}.ms-Icon--unsubscribe:before{content:'\e09d'}.ms-Icon--personRemove:before{content:'\e09e'}.ms-Icon--receiptForward:before{content:'\e0a0'}.ms-Icon--receiptReply:before{content:'\e0a1'}.ms-Icon--receiptCheck:before{content:'\e0a2'}.ms-Icon--peopleRemove:before{content:'\e0a3'}.ms-Icon--merge:before{content:'\e0a4'}.ms-Icon--split:before{content:'\e0a5'}.ms-Icon--eventCancel:before{content:'\e0a6'}.ms-Icon--eventShare:before{content:'\e0a7'}.ms-Icon--today:before{content:'\e0a9'}.ms-Icon--oofReply:before{content:'\e0aa'}.ms-Icon--voicemailReply:before{content:'\e0ac'}.ms-Icon--voicemailForward:before{content:'\e0ad'}.ms-Icon--ribbon:before{content:'\e0af'}.ms-Icon--contact:before{content:'\e0b0'}.ms-Icon--eye:before{content:'\e0b1'}.ms-Icon--glasses:before{content:'\e0b2'}.ms-Icon--print:before{content:'\e100'}.ms-Icon--room:before{content:'\e101'}.ms-Icon--post:before{content:'\e102'}.ms-Icon--toggle:before{content:'\e103'}.ms-Icon--touch:before{content:'\e104'}.ms-Icon--clock:before{content:'\e105'}.ms-Icon--fax:before{content:'\e106'}.ms-Icon--lightning:before{content:'\e110'}.ms-Icon--dialpad:before{content:'\e111'}.ms-Icon--phoneTransfer:before{content:'\e112'}.ms-Icon--phoneAdd:before{content:'\e113'}.ms-Icon--late:before{content:'\e114'}.ms-Icon--chatAdd:before{content:'\e115'}.ms-Icon--conflict:before{content:'\e116'}.ms-Icon--navigate:before{content:'\e117'}.ms-Icon--camera:before{content:'\e119'}.ms-Icon--filter:before{content:'\e11a'}.ms-Icon--fullscreen:before{content:'\e11b'}.ms-Icon--new:before{content:'\e11c'}.ms-Icon--mailEmpty:before{content:'\e11d'}.ms-Icon--editBox:before{content:'\e11e'}.ms-Icon--waffle:before{content:'\e11f'}.ms-Icon--work:before{content:'\e120'}.ms-Icon--eventRecurring:before{content:'\e121'}.ms-Icon--cart:before{content:'\e122'}.ms-Icon--socialListening:before{content:'\e123'}.ms-Icon--mapMarker:before{content:'\e124'}.ms-Icon--org:before{content:'\e125'}.ms-Icon--replyAlt:before{content:'\e150'}.ms-Icon--replyAllAlt:before{content:'\e152'}.ms-Icon--eventInfo:before{content:'\e154'}.ms-Icon--group:before{content:'\e155'}.ms-Icon--money:before{content:'\e161'}.ms-Icon--graph:before{content:'\e162'}.ms-Icon--noteEdit:before{content:'\e163'}.ms-Icon--dashboard:before{content:'\e164'}.ms-Icon--mailEdit:before{content:'\e165'}.ms-Icon--pinLeft:before{content:'\e167'}.ms-Icon--heart:before{content:'\e16a'}.ms-Icon--heartEmpty:before{content:'\e16b'}.ms-Icon--picture:before{content:'\e16c'}.ms-Icon--cake:before{content:'\e16d'}.ms-Icon--books:before{content:'\e16e'}.ms-Icon--chart:before{content:'\e16f'}.ms-Icon--video:before{content:'\e170'}.ms-Icon--soccer:before{content:'\e171'}.ms-Icon--meal:before{content:'\e172'}.ms-Icon--balloon:before{content:'\e173'}.ms-Icon--cat:before{content:'\e174'}.ms-Icon--dog:before{content:'\e175'}.ms-Icon--bag:before{content:'\e176'}.ms-Icon--music:before{content:'\e177'}.ms-Icon--stopwatch:before{content:'\e178'}.ms-Icon--coffee:before{content:'\e179'}.ms-Icon--briefcase:before{content:'\e17a'}.ms-Icon--pill:before{content:'\e17b'}.ms-Icon--trophy:before{content:'\e17c'}.ms-Icon--firstAid:before{content:'\e17d'}.ms-Icon--plane:before{content:'\e17e'}.ms-Icon--page:before{content:'\e17f'}.ms-Icon--car:before{content:'\e180'}.ms-Icon--dogAlt:before{content:'\e181'}.ms-Icon--document:before{content:'\e182'}.ms-Icon--metadata:before{content:'\e183'}.ms-Icon--pointItem:before{content:'\e184'}.ms-Icon--text:before{content:'\e185'}.ms-Icon--fieldText:before{content:'\e186'}.ms-Icon--fieldNumber:before{content:'\e187'}.ms-Icon--dropdown:before{content:'\e188'}.ms-Icon--radioButton:before{content:'\e189'}.ms-Icon--checkbox:before{content:'\e18a'}.ms-Icon--story:before{content:'\e18b'}.ms-Icon--bold:before{content:'\e18c'}.ms-Icon--italic:before{content:'\e18d'}.ms-Icon--underline:before{content:'\e18e'}.ms-Icon--quote:before{content:'\e18f'}.ms-Icon--styleRemove:before{content:'\e190'}.ms-Icon--pictureAdd:before{content:'\e191'}.ms-Icon--pictureRemove:before{content:'\e192'}.ms-Icon--desktop:before{content:'\e193'}.ms-Icon--tablet:before{content:'\e194'}.ms-Icon--mobile:before{content:'\e195'}.ms-Icon--table:before{content:'\e196'}.ms-Icon--hide:before{content:'\e197'}.ms-Icon--shield:before{content:'\e198'}.ms-Icon--header:before{content:'\e19a'}.ms-Icon--paint:before{content:'\e19b'}.ms-Icon--support:before{content:'\e19c'}.ms-Icon--settings:before{content:'\e19d'}.ms-Icon--creditCard:before{content:'\e19e'}.ms-Icon--reload:before{content:'\e19f'}.ms-Icon--peopleSecurity:before{content:'\e200'}.ms-Icon--fieldTextBox:before{content:'\e203'}.ms-Icon--multiChoice:before{content:'\e204'}.ms-Icon--fieldMail:before{content:'\e205'}.ms-Icon--contactForm:before{content:'\e206'}.ms-Icon--circleHalfFilled:before{content:'\e207'}.ms-Icon--documentPDF:before{content:'\e208'}.ms-Icon--bookmark:before{content:'\e209'}.ms-Icon--circleUnfilled:before{content:'\e20b'}.ms-Icon--circleFilled:before{content:'\e20c'}.ms-Icon--textBox:before{content:'\e20e'}.ms-Icon--drop:before{content:'\e20f'}.ms-Icon--sun:before{content:'\e210'}.ms-Icon--lifesaver:before{content:'\e211'}.ms-Icon--lifesaverLock:before{content:'\e212'}.ms-Icon--mailUnread:before{content:'\e213'}.ms-Icon--mailRead:before{content:'\e214'}.ms-Icon--inboxCheck:before{content:'\e215'}.ms-Icon--folderSearch:before{content:'\e216'}.ms-Icon--collapse:before{content:'\e217'}.ms-Icon--expand:before{content:'\e218'}.ms-Icon--ascending:before{content:'\e219'}.ms-Icon--descending:before{content:'\e21a'}.ms-Icon--filterClear:before{content:'\e21b'}.ms-Icon--checkboxEmpty:before{content:'\e21c'}.ms-Icon--checkboxMixed:before{content:'\e21d'}.ms-Icon--boards:before{content:'\e21e'}.ms-Icon--checkboxCheck:before{content:'\e21f'}.ms-Icon--frowny:before{content:'\e220'}.ms-Icon--lightBulb:before{content:'\e221'}.ms-Icon--globe:before{content:'\e222'}.ms-Icon--deviceWipe:before{content:'\e223'}.ms-Icon--listCheck:before{content:'\e226'}.ms-Icon--listGroup:before{content:'\e227'}.ms-Icon--timeline:before{content:'\e228'}.ms-Icon--fontIncrease:before{content:'\e229'}.ms-Icon--fontDecrease:before{content:'\e22a'}.ms-Icon--fontColor:before{content:'\e22b'}.ms-Icon--mailCheck:before{content:'\e22c'}.ms-Icon--mailDown:before{content:'\e22d'}.ms-Icon--listCheckbox:before{content:'\e22e'}.ms-Icon--sunAdd:before{content:'\e22f'}.ms-Icon--sunQuestion:before{content:'\e230'}.ms-Icon--chevronThinUp:before{content:'\e231'}.ms-Icon--chevronThinDown:before{content:'\e232'}.ms-Icon--chevronThinLeft:before{content:'\e233'}.ms-Icon--chevronThinRight:before{content:'\e234'}.ms-Icon--chevronThickUp:before{content:'\e235'}.ms-Icon--chevronThickDown:before{content:'\e236'}.ms-Icon--chevronThickLeft:before{content:'\e237'}.ms-Icon--chevronThickRight:before{content:'\e238'}.ms-Icon--linkRemove:before{content:'\e239'}.ms-Icon--alertOutline:before{content:'\e23b'}.ms-Icon--documentLandscape:before{content:'\e23c'}.ms-Icon--documentAdd:before{content:'\e23d'}.ms-Icon--toggleMiddle:before{content:'\e23e'}.ms-Icon--embed:before{content:'\e23f'}.ms-Icon--listNumbered:before{content:'\e240'}.ms-Icon--peopleCheck:before{content:'\e242'}.ms-Icon--caretUpOutline:before{content:'\e243'}.ms-Icon--caretDownOutline:before{content:'\e244'}.ms-Icon--caretLeftOutline:before{content:'\e245'}.ms-Icon--caretRightOutline:before{content:'\e246'}.ms-Icon--mailSync:before{content:'\e248'}.ms-Icon--mailError:before{content:'\e249'}.ms-Icon--mailPause:before{content:'\e24a'}.ms-Icon--peopleSync:before{content:'\e24b'}.ms-Icon--peopleError:before{content:'\e24c'}.ms-Icon--peoplePause:before{content:'\e24d'}.ms-Icon--circleBall:before{content:'\e24e'}.ms-Icon--circleBalloons:before{content:'\e24f'}.ms-Icon--circleCar:before{content:'\e250'}.ms-Icon--circleCat:before{content:'\e251'}.ms-Icon--circleCoffee:before{content:'\e252'}.ms-Icon--circleDog:before{content:'\e253'}.ms-Icon--circleLightning:before{content:'\e254'}.ms-Icon--circlePill:before{content:'\e255'}.ms-Icon--circlePlane:before{content:'\e256'}.ms-Icon--circlePoodle:before{content:'\e257'}.ms-Icon--checkPeople:before{content:'\e259'}.ms-Icon--documentSearch:before{content:'\e25a'}.ms-Icon--sortLines:before{content:'\e25c'}.ms-Icon--calendarPublic:before{content:'\e25d'}.ms-Icon--contactPublic:before{content:'\e25e'}.ms-Icon--classNotebook:before{content:'\e25f'}.ms-Icon--triangleUp:before{content:'\e260'}.ms-Icon--triangleRight:before{content:'\e261'}.ms-Icon--triangleDown:before{content:'\e262'}.ms-Icon--triangleLeft:before{content:'\e263'}.ms-Icon--triangleEmptyUp:before{content:'\e264'}.ms-Icon--triangleEmptyRight:before{content:'\e265'}.ms-Icon--triangleEmptyDown:before{content:'\e266'}.ms-Icon--triangleEmptyLeft:before{content:'\e267'}.ms-Icon--filePDF:before{content:'\e268'}.ms-Icon--fileImage:before{content:'\e26c'}.ms-Icon--fileDocument:before{content:'\e26d'}.ms-Icon--listGroup2:before{content:'\e26e'}.ms-Icon--copy:before{content:'\e26f'}.ms-Icon--creditCardOutline:before{content:'\e270'}.ms-Icon--mailPublic:before{content:'\e272'}.ms-Icon--folderPublic:before{content:'\e273'}.ms-Icon--teamwork:before{content:'\e274'}.ms-Icon--move:before{content:'\e275'}.ms-Icon--classroom:before{content:'\e276'}.ms-Icon--menu2:before{content:'\e277'}.ms-Icon--plus2:before{content:'\e278'}.ms-Icon--tag:before{content:'\e279'}.ms-Icon--arrowUp2:before{content:'\e27a'}.ms-Icon--arrowDown2:before{content:'\e27b'}.ms-Icon--circlePlus:before{content:'\e27c'}.ms-Icon--circleInfo:before{content:'\e27d'}.ms-Icon--section:before{content:'\e27e'}.ms-Icon--sections:before{content:'\e27f'}.ms-Icon--at:before{content:'\e282'}.ms-Icon--arrowUpRight:before{content:'\e283'}.ms-Icon--arrowDownRight:before{content:'\e284'}.ms-Icon--arrowDownLeft:before{content:'\e285'}.ms-Icon--arrowUpLeft:before{content:'\e286'}.ms-Icon--bundle:before{content:'\e287'}.ms-Icon--pictureEdit:before{content:'\e288'}.ms-Icon--protectionCenter:before{content:'\e289'}.ms-Icon--alert2:before{content:'\e28a'}.ms-Icon--circle{position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;margin:0 .5em 0 0;padding:0;text-align:left;-webkit-font-smoothing:antialiased}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;left:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;z-index:0}.ms-Icon--circle.ms-Icon--star:before{top:-2%;left:1%}.ms-Icon--circle.ms-Icon--person:before{top:-2%;left:-3%}.ms-Icon--circle.ms-Icon--alert:before{top:-4%}.ms-Icon--circle.ms-Icon--mailOpen:before{top:-5%}.ms-Icon--circle.ms-Icon--people:before{top:-4%;left:-7%}.ms-Icon--circle.ms-Icon--bell:before{top:-3%}.ms-Icon--circle.ms-Icon--scheduling:before{top:-3%;left:6%}.ms-Icon--circle.ms-Icon--documents:before{top:-1%;left:-2%}.ms-Icon--circle.ms-Icon--listBullets:before{top:-1%;left:5%}.ms-Icon--circle.ms-Icon--panel:before{left:-2%}.ms-Icon--circle.ms-Icon--popout:before{top:-2%;left:-2%}.ms-Icon--circle.ms-Icon--home:before{top:-4%}.ms-Icon--circle.ms-Icon--favorites:before{top:-2%;left:2%}.ms-Icon--circle.ms-Icon--phone:before{top:-2%;left:-2%}.ms-Icon--circle.ms-Icon--mailSend:before{left:-10%}.ms-Icon--circle.ms-Icon--pencil:before{top:-2%;left:3%}.ms-Icon--circle.ms-Icon--flag:before{left:3%}.ms-Icon--circle.ms-Icon--miniatures:before{left:-3%}.ms-Icon--circle.ms-Icon--voicemail:before{top:2%;left:-7%}.ms-Icon--circle.ms-Icon--onlineAdd:before{top:-1%;left:2%}.ms-Icon--circle.ms-Icon--pinDown:before{top:5%}.ms-Icon--circle.ms-Icon--gear:before{left:2%}.ms-Icon--circle.ms-Icon--check:before{top:3%}.ms-Icon--circle.ms-Icon--ellipsis:before{top:2%;left:-12%}.ms-Icon--circle.ms-Icon--directions:before{left:10%}.ms-Icon--circle.ms-Icon--microphone:before{top:-3%}.ms-Icon--circle.ms-Icon--caretDown:before{top:5%;left:2%}.ms-Icon--circle.ms-Icon--caretLeft:before{left:-6%}.ms-Icon--circle.ms-Icon--caretRight:before{left:6%}.ms-Icon--circle.ms-Icon--caretUpLeft:before{top:5%;left:5%}.ms-Icon--circle.ms-Icon--caretUpRight:before{top:5%;left:-3%}.ms-Icon--circle.ms-Icon--caretDownRight:before{left:-3%}.ms-Icon--circle.ms-Icon--caretDownLeft:before{left:4%}.ms-Icon--circle.ms-Icon--note:before{top:2%;left:-3%}.ms-Icon--circle.ms-Icon--noteReply:before{top:6%;left:3%}.ms-Icon--circle.ms-Icon--noteForward:before{top:6%}.ms-Icon--circle.ms-Icon--key:before{top:5%;left:1%}.ms-Icon--circle.ms-Icon--tile:before{top:-1%;left:-18%}.ms-Icon--circle.ms-Icon--taskRecurring:before{top:2%;left:-1%}.ms-Icon--circle.ms-Icon--starEmpty:before{top:-4%;left:1%}.ms-Icon--circle.ms-Icon--documentReply:before{top:-2%;left:7%}.ms-Icon--circle.ms-Icon--documentForward:before{left:5%}.ms-Icon--circle.ms-Icon--partner:before{top:-2%}.ms-Icon--circle.ms-Icon--reactivate:before{top:-2%;left:6%}.ms-Icon--circle.ms-Icon--sort:before{left:-19%}.ms-Icon--circle.ms-Icon--personAdd:before{top:-2%;left:6%}.ms-Icon--circle.ms-Icon--chevronDown:before{top:4%}.ms-Icon--circle.ms-Icon--chevronLeft:before{left:-5%}.ms-Icon--circle.ms-Icon--chevronRight:before{left:4%}.ms-Icon--circle.ms-Icon--peopleAdd:before{top:-5%;left:-12%}.ms-Icon--circle.ms-Icon--newsfeed:before,.ms-Icon--circle.ms-Icon--notebook:before{left:-4%}.ms-Icon--circle.ms-Icon--link:before{top:2%;left:-18%}.ms-Icon--circle.ms-Icon--chevronsDown:before{top:5%}.ms-Icon--circle.ms-Icon--chevronsLeft:before{left:-5%}.ms-Icon--circle.ms-Icon--chevronsRight:before{left:4%}.ms-Icon--circle.ms-Icon--personRemove:before{left:5%}.ms-Icon--circle.ms-Icon--receiptCheck:before,.ms-Icon--circle.ms-Icon--receiptForward:before,.ms-Icon--circle.ms-Icon--receiptReply:before{left:-20%}.ms-Icon--circle.ms-Icon--peopleRemove:before{top:-3%;left:-12%}.ms-Icon--circle.ms-Icon--merge:before,.ms-Icon--circle.ms-Icon--split:before{top:2%}.ms-Icon--circle.ms-Icon--eventCancel:before{left:-2%}.ms-Icon--circle.ms-Icon--today:before{top:-2%}.ms-Icon--circle.ms-Icon--oofReply:before{left:5%}.ms-Icon--circle.ms-Icon--voicemailReply:before{top:4%;left:-25%}.ms-Icon--circle.ms-Icon--voicemailForward:before{top:4%;left:-20%}.ms-Icon--circle.ms-Icon--eye:before{top:-4%}.ms-Icon--circle.ms-Icon--post:before{top:-4%;left:4%}.ms-Icon--circle.ms-Icon--fax:before{top:-3%;left:-2%}.ms-Icon--circle.ms-Icon--lightning:before{top:2%;left:1%}.ms-Icon--circle.ms-Icon--filter:before{top:7%}.ms-Icon--circle.ms-Icon--cart:before{left:3%}.ms-Icon--circle.ms-Icon--mapMarker:before,.ms-Icon--circle.ms-Icon--socialListening:before{top:2%}.ms-Icon--circle.ms-Icon--replyAllAlt:before{left:-16%}.ms-Icon--circle.ms-Icon--group:before{left:-33%}.ms-Icon--circle.ms-Icon--money:before{left:-8%}.ms-Icon--circle.ms-Icon--noteEdit:before{left:4%}.ms-Icon--circle.ms-Icon--mailEdit:before{top:3%;left:7%}.ms-Icon--circle.ms-Icon--pinLeft:before{left:-6%}.ms-Icon--circle.ms-Icon--heart:before,.ms-Icon--circle.ms-Icon--heartEmpty:before{top:5%}.ms-Icon--circle.ms-Icon--cake:before{top:-5%}.ms-Icon--circle.ms-Icon--books:before{left:-8%}.ms-Icon--circle.ms-Icon--video:before{top:-3%;left:3%}.ms-Icon--circle.ms-Icon--balloon:before{top:4%;left:-1%}.ms-Icon--circle.ms-Icon--music:before{top:-2%;left:-5%}.ms-Icon--circle.ms-Icon--coffee:before,.ms-Icon--circle.ms-Icon--stopwatch:before{top:-3%;left:3%}.ms-Icon--circle.ms-Icon--plane:before{left:4%}.ms-Icon--circle.ms-Icon--dogAlt:before{left:-15%}.ms-Icon--circle.ms-Icon--metadata:before{top:-4%;left:4%}.ms-Icon--circle.ms-Icon--text:before{top:-4%;left:10%}.ms-Icon--circle.ms-Icon--dropdown:before,.ms-Icon--circle.ms-Icon--fieldNumber:before,.ms-Icon--circle.ms-Icon--fieldText:before{left:-14%}.ms-Icon--circle.ms-Icon--story:before{left:-5%}.ms-Icon--circle.ms-Icon--bold:before{left:4%}.ms-Icon--circle.ms-Icon--underline:before{top:4%}.ms-Icon--circle.ms-Icon--quote:before{left:-4%}.ms-Icon--circle.ms-Icon--styleRemove:before{top:4%;left:5%}.ms-Icon--circle.ms-Icon--pictureAdd:before,.ms-Icon--circle.ms-Icon--pictureRemove:before{left:-6%}.ms-Icon--circle.ms-Icon--mobile:before{left:-3%}.ms-Icon--circle.ms-Icon--hide:before{top:-4%}.ms-Icon--circle.ms-Icon--header:before{left:-9%}.ms-Icon--circle.ms-Icon--msn:before{left:3%}.ms-Icon--circle.ms-Icon--peopleCheck:before{left:-7%;top:-3%}.ms-Icon--circle.ms-Icon--caretDownOutline:before{top:6%}.ms-Icon--circle.ms-Icon--caretLeftOutline:before{left:-5%}.ms-Icon--circle.ms-Icon--caretRightOutline:before{left:5%}.ms-Icon--circle.ms-Icon--sway:before{left:-3%}.ms-Icon--circle.ms-Icon--mailSync:before{left:8%;top:3%}.ms-Icon--circle.ms-Icon--peopleError:before,.ms-Icon--circle.ms-Icon--peoplePause:before,.ms-Icon--circle.ms-Icon--peopleSync:before{left:-8%}.ms-Icon--circle.ms-Icon--documentSearch:before{left:8%}.ms-Icon--circle.ms-Icon--dynamicsMarketing:before{left:-8%}.ms-u-slideRightIn10{-webkit-animation-name:y,a;animation-name:y,a;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes a{0%{-webkit-transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes a{0%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn20{-webkit-animation-name:y,b;animation-name:y,b;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes b{0%{-webkit-transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes b{0%{-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn40{-webkit-animation-name:y,c;animation-name:y,c;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes c{0%{-webkit-transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes c{0%{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn10{-webkit-animation-name:y,d;animation-name:y,d;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes d{0%{-webkit-transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes d{0%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn20{-webkit-animation-name:y,e;animation-name:y,e;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes e{0%{-webkit-transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes e{0%{-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn40{-webkit-animation-name:y,f;animation-name:y,f;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes f{0%{-webkit-transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes f{0%{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn400{-webkit-animation-name:y,g;animation-name:y,g;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes g{0%{-webkit-transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes g{0%{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn400{-webkit-animation-name:y,h;animation-name:y,h;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes h{0%{-webkit-transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes h{0%{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn20{-webkit-animation-name:y,i;animation-name:y,i;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes i{0%{-webkit-transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes i{0%{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn10{-webkit-animation-name:y,j;animation-name:y,j;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes j{0%{-webkit-transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes j{0%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn20{-webkit-animation-name:y,k;animation-name:y,k;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes k{0%{-webkit-transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes k{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn10{-webkit-animation-name:y,l;animation-name:y,l;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes l{0%{-webkit-transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes l{0%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightOut40{-webkit-animation-name:z,m;animation-name:z,m;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes m{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0)}}@keyframes m{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{-webkit-animation-name:z,n;animation-name:z,n;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes n{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0)}}@keyframes n{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{-webkit-animation-name:z,o;animation-name:z,o;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes o{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0)}}@keyframes o{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{-webkit-animation-name:z,p;animation-name:z,p;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes p{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0)}}@keyframes p{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{-webkit-animation-name:z,q;animation-name:z,q;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes q{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0)}}@keyframes q{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{-webkit-animation-name:z,r;animation-name:z,r;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes r{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0)}}@keyframes r{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{-webkit-animation-name:z,s;animation-name:z,s;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes s{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0)}}@keyframes s{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{-webkit-animation-name:z,t;animation-name:z,t;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes t{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0)}}@keyframes t{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{-webkit-animation-name:y,u;animation-name:y,u;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes u{0%{-webkit-transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1)}}@keyframes u{0%{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleDownIn100{-webkit-animation-name:y,v;animation-name:y,v;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1)}}@keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleUpOut103{-webkit-animation-name:z,w;animation-name:z,w;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes w{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1)}}@keyframes w{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{-webkit-animation-name:z,x;animation-name:z,x;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes x{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1)}}@keyframes x{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeIn100{-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeOut100{-webkit-animation-duration:.1s;animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{-webkit-animation-name:A;animation-name:A;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes A{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(90deg)}}@keyframes A{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.ms-u-rotateN90deg{-webkit-animation-name:B;animation-name:B;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes B{0%{-webkit-transform:rotate(90deg)}to{-webkit-transform:rotate(0deg)}}@keyframes B{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{-webkit-animation-delay:.167s;animation-delay:.167s}.ms-u-delay200{-webkit-animation-delay:.267s;animation-delay:.267s}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{right:100%}.ms-u-smPull11{right:91.66666666666666%}.ms-u-smPull10{right:83.33333333333334%}.ms-u-smPull9{right:75%}.ms-u-smPull8{right:66.66666666666666%}.ms-u-smPull7{right:58.333333333333336%}.ms-u-smPull6{right:50%}.ms-u-smPull5{right:41.66666666666667%}.ms-u-smPull4{right:33.33333333333333%}.ms-u-smPull3{right:25%}.ms-u-smPull2{right:16.666666666666664%}.ms-u-smPull1{right:8.333333333333332%}.ms-u-smPull0{right:auto}.ms-u-smPush12{left:100%}.ms-u-smPush11{left:91.66666666666666%}.ms-u-smPush10{left:83.33333333333334%}.ms-u-smPush9{left:75%}.ms-u-smPush8{left:66.66666666666666%}.ms-u-smPush7{left:58.333333333333336%}.ms-u-smPush6{left:50%}.ms-u-smPush5{left:41.66666666666667%}.ms-u-smPush4{left:33.33333333333333%}.ms-u-smPush3{left:25%}.ms-u-smPush2{left:16.666666666666664%}.ms-u-smPush1{left:8.333333333333332%}.ms-u-smPush0{left:auto}.ms-u-smOffset11{margin-left:91.66666666666666%}.ms-u-smOffset10{margin-left:83.33333333333334%}.ms-u-smOffset9{margin-left:75%}.ms-u-smOffset8{margin-left:66.66666666666666%}.ms-u-smOffset7{margin-left:58.333333333333336%}.ms-u-smOffset6{margin-left:50%}.ms-u-smOffset5{margin-left:41.66666666666667%}.ms-u-smOffset4{margin-left:33.33333333333333%}.ms-u-smOffset3{margin-left:25%}.ms-u-smOffset2{margin-left:16.666666666666664%}.ms-u-smOffset1{margin-left:8.333333333333332%}.ms-u-smOffset0{margin-left:0}@media (min-width:480px){.ms-u-md12{width:100%}.ms-u-md11{width:91.66666666666666%}.ms-u-md10{width:83.33333333333334%}.ms-u-md9{width:75%}.ms-u-md8{width:66.66666666666666%}.ms-u-md7{width:58.333333333333336%}.ms-u-md6{width:50%}.ms-u-md5{width:41.66666666666667%}.ms-u-md4{width:33.33333333333333%}.ms-u-md3{width:25%}.ms-u-md2{width:16.666666666666664%}.ms-u-md1{width:8.333333333333332%}.ms-u-mdPull12{right:100%}.ms-u-mdPull11{right:91.66666666666666%}.ms-u-mdPull10{right:83.33333333333334%}.ms-u-mdPull9{right:75%}.ms-u-mdPull8{right:66.66666666666666%}.ms-u-mdPull7{right:58.333333333333336%}.ms-u-mdPull6{right:50%}.ms-u-mdPull5{right:41.66666666666667%}.ms-u-mdPull4{right:33.33333333333333%}.ms-u-mdPull3{right:25%}.ms-u-mdPull2{right:16.666666666666664%}.ms-u-mdPull1{right:8.333333333333332%}.ms-u-mdPull0{right:auto}.ms-u-mdPush12{left:100%}.ms-u-mdPush11{left:91.66666666666666%}.ms-u-mdPush10{left:83.33333333333334%}.ms-u-mdPush9{left:75%}.ms-u-mdPush8{left:66.66666666666666%}.ms-u-mdPush7{left:58.333333333333336%}.ms-u-mdPush6{left:50%}.ms-u-mdPush5{left:41.66666666666667%}.ms-u-mdPush4{left:33.33333333333333%}.ms-u-mdPush3{left:25%}.ms-u-mdPush2{left:16.666666666666664%}.ms-u-mdPush1{left:8.333333333333332%}.ms-u-mdPush0{left:auto}.ms-u-mdOffset11{margin-left:91.66666666666666%}.ms-u-mdOffset10{margin-left:83.33333333333334%}.ms-u-mdOffset9{margin-left:75%}.ms-u-mdOffset8{margin-left:66.66666666666666%}.ms-u-mdOffset7{margin-left:58.333333333333336%}.ms-u-mdOffset6{margin-left:50%}.ms-u-mdOffset5{margin-left:41.66666666666667%}.ms-u-mdOffset4{margin-left:33.33333333333333%}.ms-u-mdOffset3{margin-left:25%}.ms-u-mdOffset2{margin-left:16.666666666666664%}.ms-u-mdOffset1{margin-left:8.333333333333332%}.ms-u-mdOffset0{margin-left:0}}@media (min-width:640px){.ms-u-lg12{width:100%}.ms-u-lg11{width:91.66666666666666%}.ms-u-lg10{width:83.33333333333334%}.ms-u-lg9{width:75%}.ms-u-lg8{width:66.66666666666666%}.ms-u-lg7{width:58.333333333333336%}.ms-u-lg6{width:50%}.ms-u-lg5{width:41.66666666666667%}.ms-u-lg4{width:33.33333333333333%}.ms-u-lg3{width:25%}.ms-u-lg2{width:16.666666666666664%}.ms-u-lg1{width:8.333333333333332%}.ms-u-lgPull12{right:100%}.ms-u-lgPull11{right:91.66666666666666%}.ms-u-lgPull10{right:83.33333333333334%}.ms-u-lgPull9{right:75%}.ms-u-lgPull8{right:66.66666666666666%}.ms-u-lgPull7{right:58.333333333333336%}.ms-u-lgPull6{right:50%}.ms-u-lgPull5{right:41.66666666666667%}.ms-u-lgPull4{right:33.33333333333333%}.ms-u-lgPull3{right:25%}.ms-u-lgPull2{right:16.666666666666664%}.ms-u-lgPull1{right:8.333333333333332%}.ms-u-lgPull0{right:auto}.ms-u-lgPush12{left:100%}.ms-u-lgPush11{left:91.66666666666666%}.ms-u-lgPush10{left:83.33333333333334%}.ms-u-lgPush9{left:75%}.ms-u-lgPush8{left:66.66666666666666%}.ms-u-lgPush7{left:58.333333333333336%}.ms-u-lgPush6{left:50%}.ms-u-lgPush5{left:41.66666666666667%}.ms-u-lgPush4{left:33.33333333333333%}.ms-u-lgPush3{left:25%}.ms-u-lgPush2{left:16.666666666666664%}.ms-u-lgPush1{left:8.333333333333332%}.ms-u-lgPush0{left:auto}.ms-u-lgOffset11{margin-left:91.66666666666666%}.ms-u-lgOffset10{margin-left:83.33333333333334%}.ms-u-lgOffset9{margin-left:75%}.ms-u-lgOffset8{margin-left:66.66666666666666%}.ms-u-lgOffset7{margin-left:58.333333333333336%}.ms-u-lgOffset6{margin-left:50%}.ms-u-lgOffset5{margin-left:41.66666666666667%}.ms-u-lgOffset4{margin-left:33.33333333333333%}.ms-u-lgOffset3{margin-left:25%}.ms-u-lgOffset2{margin-left:16.666666666666664%}.ms-u-lgOffset1{margin-left:8.333333333333332%}.ms-u-lgOffset0{margin-left:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}.ms-u-xl11{width:91.66666666666666%}.ms-u-xl10{width:83.33333333333334%}.ms-u-xl9{width:75%}.ms-u-xl8{width:66.66666666666666%}.ms-u-xl7{width:58.333333333333336%}.ms-u-xl6{width:50%}.ms-u-xl5{width:41.66666666666667%}.ms-u-xl4{width:33.33333333333333%}.ms-u-xl3{width:25%}.ms-u-xl2{width:16.666666666666664%}.ms-u-xl1{width:8.333333333333332%}.ms-u-xlPull12{right:100%}.ms-u-xlPull11{right:91.66666666666666%}.ms-u-xlPull10{right:83.33333333333334%}.ms-u-xlPull9{right:75%}.ms-u-xlPull8{right:66.66666666666666%}.ms-u-xlPull7{right:58.333333333333336%}.ms-u-xlPull6{right:50%}.ms-u-xlPull5{right:41.66666666666667%}.ms-u-xlPull4{right:33.33333333333333%}.ms-u-xlPull3{right:25%}.ms-u-xlPull2{right:16.666666666666664%}.ms-u-xlPull1{right:8.333333333333332%}.ms-u-xlPull0{right:auto}.ms-u-xlPush12{left:100%}.ms-u-xlPush11{left:91.66666666666666%}.ms-u-xlPush10{left:83.33333333333334%}.ms-u-xlPush9{left:75%}.ms-u-xlPush8{left:66.66666666666666%}.ms-u-xlPush7{left:58.333333333333336%}.ms-u-xlPush6{left:50%}.ms-u-xlPush5{left:41.66666666666667%}.ms-u-xlPush4{left:33.33333333333333%}.ms-u-xlPush3{left:25%}.ms-u-xlPush2{left:16.666666666666664%}.ms-u-xlPush1{left:8.333333333333332%}.ms-u-xlPush0{left:auto}.ms-u-xlOffset11{margin-left:91.66666666666666%}.ms-u-xlOffset10{margin-left:83.33333333333334%}.ms-u-xlOffset9{margin-left:75%}.ms-u-xlOffset8{margin-left:66.66666666666666%}.ms-u-xlOffset7{margin-left:58.333333333333336%}.ms-u-xlOffset6{margin-left:50%}.ms-u-xlOffset5{margin-left:41.66666666666667%}.ms-u-xlOffset4{margin-left:33.33333333333333%}.ms-u-xlOffset3{margin-left:25%}.ms-u-xlOffset2{margin-left:16.666666666666664%}.ms-u-xlOffset1{margin-left:8.333333333333332%}.ms-u-xlOffset0{margin-left:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}.ms-u-xxl11{width:91.66666666666666%}.ms-u-xxl10{width:83.33333333333334%}.ms-u-xxl9{width:75%}.ms-u-xxl8{width:66.66666666666666%}.ms-u-xxl7{width:58.333333333333336%}.ms-u-xxl6{width:50%}.ms-u-xxl5{width:41.66666666666667%}.ms-u-xxl4{width:33.33333333333333%}.ms-u-xxl3{width:25%}.ms-u-xxl2{width:16.666666666666664%}.ms-u-xxl1{width:8.333333333333332%}.ms-u-xxlPull12{right:100%}.ms-u-xxlPull11{right:91.66666666666666%}.ms-u-xxlPull10{right:83.33333333333334%}.ms-u-xxlPull9{right:75%}.ms-u-xxlPull8{right:66.66666666666666%}.ms-u-xxlPull7{right:58.333333333333336%}.ms-u-xxlPull6{right:50%}.ms-u-xxlPull5{right:41.66666666666667%}.ms-u-xxlPull4{right:33.33333333333333%}.ms-u-xxlPull3{right:25%}.ms-u-xxlPull2{right:16.666666666666664%}.ms-u-xxlPull1{right:8.333333333333332%}.ms-u-xxlPull0{right:auto}.ms-u-xxlPush12{left:100%}.ms-u-xxlPush11{left:91.66666666666666%}.ms-u-xxlPush10{left:83.33333333333334%}.ms-u-xxlPush9{left:75%}.ms-u-xxlPush8{left:66.66666666666666%}.ms-u-xxlPush7{left:58.333333333333336%}.ms-u-xxlPush6{left:50%}.ms-u-xxlPush5{left:41.66666666666667%}.ms-u-xxlPush4{left:33.33333333333333%}.ms-u-xxlPush3{left:25%}.ms-u-xxlPush2{left:16.666666666666664%}.ms-u-xxlPush1{left:8.333333333333332%}.ms-u-xxlPush0{left:auto}.ms-u-xxlOffset11{margin-left:91.66666666666666%}.ms-u-xxlOffset10{margin-left:83.33333333333334%}.ms-u-xxlOffset9{margin-left:75%}.ms-u-xxlOffset8{margin-left:66.66666666666666%}.ms-u-xxlOffset7{margin-left:58.333333333333336%}.ms-u-xxlOffset6{margin-left:50%}.ms-u-xxlOffset5{margin-left:41.66666666666667%}.ms-u-xxlOffset4{margin-left:33.33333333333333%}.ms-u-xxlOffset3{margin-left:25%}.ms-u-xxlOffset2{margin-left:16.666666666666664%}.ms-u-xxlOffset1{margin-left:8.333333333333332%}.ms-u-xxlOffset0{margin-left:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}.ms-u-xxxl11{width:91.66666666666666%}.ms-u-xxxl10{width:83.33333333333334%}.ms-u-xxxl9{width:75%}.ms-u-xxxl8{width:66.66666666666666%}.ms-u-xxxl7{width:58.333333333333336%}.ms-u-xxxl6{width:50%}.ms-u-xxxl5{width:41.66666666666667%}.ms-u-xxxl4{width:33.33333333333333%}.ms-u-xxxl3{width:25%}.ms-u-xxxl2{width:16.666666666666664%}.ms-u-xxxl1{width:8.333333333333332%}.ms-u-xxxlPull12{right:100%}.ms-u-xxxlPull11{right:91.66666666666666%}.ms-u-xxxlPull10{right:83.33333333333334%}.ms-u-xxxlPull9{right:75%}.ms-u-xxxlPull8{right:66.66666666666666%}.ms-u-xxxlPull7{right:58.333333333333336%}.ms-u-xxxlPull6{right:50%}.ms-u-xxxlPull5{right:41.66666666666667%}.ms-u-xxxlPull4{right:33.33333333333333%}.ms-u-xxxlPull3{right:25%}.ms-u-xxxlPull2{right:16.666666666666664%}.ms-u-xxxlPull1{right:8.333333333333332%}.ms-u-xxxlPull0{right:auto}.ms-u-xxxlPush12{left:100%}.ms-u-xxxlPush11{left:91.66666666666666%}.ms-u-xxxlPush10{left:83.33333333333334%}.ms-u-xxxlPush9{left:75%}.ms-u-xxxlPush8{left:66.66666666666666%}.ms-u-xxxlPush7{left:58.333333333333336%}.ms-u-xxxlPush6{left:50%}.ms-u-xxxlPush5{left:41.66666666666667%}.ms-u-xxxlPush4{left:33.33333333333333%}.ms-u-xxxlPush3{left:25%}.ms-u-xxxlPush2{left:16.666666666666664%}.ms-u-xxxlPush1{left:8.333333333333332%}.ms-u-xxxlPush0{left:auto}.ms-u-xxxlOffset11{margin-left:91.66666666666666%}.ms-u-xxxlOffset10{margin-left:83.33333333333334%}.ms-u-xxxlOffset9{margin-left:75%}.ms-u-xxxlOffset8{margin-left:66.66666666666666%}.ms-u-xxxlOffset7{margin-left:58.333333333333336%}.ms-u-xxxlOffset6{margin-left:50%}.ms-u-xxxlOffset5{margin-left:41.66666666666667%}.ms-u-xxxlOffset4{margin-left:33.33333333333333%}.ms-u-xxxlOffset3{margin-left:25%}.ms-u-xxxlOffset2{margin-left:16.666666666666664%}.ms-u-xxxlOffset1{margin-left:8.333333333333332%}.ms-u-xxxlOffset0{margin-left:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;box-sizing:border-box;float:left}.ms-Grid-col .ms-Grid{padding:0} \ No newline at end of file diff --git a/dist/css/fabric.rtl.css b/dist/css/fabric.rtl.css new file mode 100644 index 000000000..467533c19 --- /dev/null +++ b/dist/css/fabric.rtl.css @@ -0,0 +1,6265 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ + +.ms-u-borderBox, +.ms-u-borderBox:before, +.ms-u-borderBox:after { + box-sizing: border-box; +} + +.ms-u-clearfix { + *zoom: 1; +} + +.ms-u-clearfix:before, +.ms-u-clearfix:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-u-clearfix:after { + clear: both; +} + +.ms-u-normalize { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-bgColor-themeDark, +.ms-bgColor-themeDark--hover:hover { + background-color: #005a9e; +} + +.ms-bgColor-themeDarkAlt, +.ms-bgColor-themeDarkAlt--hover:hover { + background-color: #106ebe; +} + +.ms-bgColor-themeDarker, +.ms-bgColor-themeDarker--hover:hover { + background-color: #004578; +} + +.ms-bgColor-themePrimary, +.ms-bgColor-themePrimary--hover:hover { + background-color: #0078d7; +} + +.ms-bgColor-themeSecondary, +.ms-bgColor-themeSecondary--hover:hover { + background-color: #2b88d8; +} + +.ms-bgColor-themeTertiary, +.ms-bgColor-themeTertiary--hover:hover { + background-color: #71afe5; +} + +.ms-bgColor-themeLight, +.ms-bgColor-themeLight--hover:hover { + background-color: #c7e0f4; +} + +.ms-bgColor-themeLighter, +.ms-bgColor-themeLighter--hover:hover { + background-color: #deecf9; +} + +.ms-bgColor-themeLighterAlt, +.ms-bgColor-themeLighterAlt--hover:hover { + background-color: #eff6fc; +} + +.ms-bgColor-black, +.ms-bgColor-black--hover:hover { + background-color: #000000; +} + +.ms-bgColor-neutralDark, +.ms-bgColor-neutralDark--hover:hover { + background-color: #212121; +} + +.ms-bgColor-neutralPrimary, +.ms-bgColor-neutralPrimary--hover:hover { + background-color: #333333; +} + +.ms-bgColor-neutralSecondary, +.ms-bgColor-neutralSecondary--hover:hover { + background-color: #666666; +} + +.ms-bgColor-neutralSecondaryAlt, +.ms-bgColor-neutralSecondaryAlt--hover:hover { + background-color: #767676; +} + +.ms-bgColor-neutralTertiary, +.ms-bgColor-neutralTertiary--hover:hover { + background-color: #a6a6a6; +} + +.ms-bgColor-neutralTertiaryAlt, +.ms-bgColor-neutralTertiaryAlt--hover:hover { + background-color: #c8c8c8; +} + +.ms-bgColor-neutralLight, +.ms-bgColor-neutralLight--hover:hover { + background-color: #eaeaea; +} + +.ms-bgColor-neutralLighter, +.ms-bgColor-neutralLighter--hover:hover { + background-color: #f4f4f4; +} + +.ms-bgColor-neutralLighterAlt, +.ms-bgColor-neutralLighterAlt--hover:hover { + background-color: #f8f8f8; +} + +.ms-bgColor-white, +.ms-bgColor-white--hover:hover { + background-color: #ffffff; +} + +.ms-bgColor-yellow { + background-color: #ffb900; +} + +.ms-bgColor-yellowLight { + background-color: #fff100; +} + +.ms-bgColor-orange { + background-color: #d83b01; +} + +.ms-bgColor-orangeLight { + background-color: #ea4300; +} + +.ms-bgColor-orangeLighter { + background-color: #ff8c00; +} + +.ms-bgColor-redDark { + background-color: #a80000; +} + +.ms-bgColor-red { + background-color: #e81123; +} + +.ms-bgColor-magentaDark { + background-color: #5c005c; +} + +.ms-bgColor-magenta { + background-color: #b4009e; +} + +.ms-bgColor-magentaLight { + background-color: #e3008c; +} + +.ms-bgColor-purpleDark { + background-color: #32145a; +} + +.ms-bgColor-purple { + background-color: #5c2d91; +} + +.ms-bgColor-purpleLight { + background-color: #b4a0ff; +} + +.ms-bgColor-blueDark { + background-color: #002050; +} + +.ms-bgColor-blueMid { + background-color: #00188f; +} + +.ms-bgColor-blue { + background-color: #0078d7; +} + +.ms-bgColor-blueLight { + background-color: #00bcf2; +} + +.ms-bgColor-tealDark { + background-color: #004b50; +} + +.ms-bgColor-teal { + background-color: #008272; +} + +.ms-bgColor-tealLight { + background-color: #00b294; +} + +.ms-bgColor-greenDark { + background-color: #004b1c; +} + +.ms-bgColor-green { + background-color: #107c10; +} + +.ms-bgColor-greenLight { + background-color: #bad80a; +} + +.ms-bgColor-info { + background-color: #f4f4f4; +} + +.ms-bgColor-success { + background-color: #dff6dd; +} + +.ms-bgColor-alert { + background-color: #f4f4f4; +} + +.ms-bgColor-error { + background-color: #fde7e9; +} + +.ms-borderColor-themeDark, +.ms-borderColor-themeDark--hover:hover { + border-color: #005a9e; +} + +.ms-borderColor-themeDarkAlt, +.ms-borderColor-themeDarkAlt--hover:hover { + border-color: #106ebe; +} + +.ms-borderColor-themeDarker, +.ms-borderColor-themeDarker--hover:hover { + border-color: #004578; +} + +.ms-borderColor-themePrimary, +.ms-borderColor-themePrimary--hover:hover { + border-color: #0078d7; +} + +.ms-borderColor-themeSecondary, +.ms-borderColor-themeSecondary--hover:hover { + border-color: #2b88d8; +} + +.ms-borderColor-themeTertiary, +.ms-borderColor-themeTertiary--hover:hover { + border-color: #71afe5; +} + +.ms-borderColor-themeLight, +.ms-borderColor-themeLight--hover:hover { + border-color: #c7e0f4; +} + +.ms-borderColor-themeLighter, +.ms-borderColor-themeLighter--hover:hover { + border-color: #deecf9; +} + +.ms-borderColor-themeLighterAlt, +.ms-borderColor-themeLighterAlt--hover:hover { + border-color: #eff6fc; +} + +.ms-borderColor-black, +.ms-borderColor-black--hover:hover { + border-color: #000000; +} + +.ms-borderColor-neutralDark, +.ms-borderColor-neutralDark--hover:hover { + border-color: #212121; +} + +.ms-borderColor-neutralPrimary, +.ms-borderColor-neutralPrimary--hover:hover { + border-color: #333333; +} + +.ms-borderColor-neutralSecondary, +.ms-borderColor-neutralSecondary--hover:hover { + border-color: #666666; +} + +.ms-borderColor-neutralSecondaryAlt, +.ms-borderColor-neutralSecondaryAlt--hover:hover { + border-color: #767676; +} + +.ms-borderColor-neutralTertiary, +.ms-borderColor-neutralTertiary--hover:hover { + border-color: #a6a6a6; +} + +.ms-borderColor-neutralTertiaryAlt, +.ms-borderColor-neutralTertiaryAlt--hover:hover { + border-color: #c8c8c8; +} + +.ms-borderColor-neutralLight, +.ms-borderColor-neutralLight--hover:hover { + border-color: #eaeaea; +} + +.ms-borderColor-neutralLighter, +.ms-borderColor-neutralLighter--hover:hover { + border-color: #f4f4f4; +} + +.ms-borderColor-neutralLighterAlt, +.ms-borderColor-neutralLighterAlt--hover:hover { + border-color: #f8f8f8; +} + +.ms-borderColor-white, +.ms-borderColor-white--hover:hover { + border-color: #ffffff; +} + +.ms-borderColor-yellow { + border-color: #ffb900; +} + +.ms-borderColor-yellowLight { + border-color: #fff100; +} + +.ms-borderColor-orange { + border-color: #d83b01; +} + +.ms-borderColor-orangeLight { + border-color: #ea4300; +} + +.ms-borderColor-orangeLighter { + border-color: #ff8c00; +} + +.ms-borderColor-redDark { + border-color: #a80000; +} + +.ms-borderColor-red { + border-color: #e81123; +} + +.ms-borderColor-magentaDark { + border-color: #5c005c; +} + +.ms-borderColor-magenta { + border-color: #b4009e; +} + +.ms-borderColor-magentaLight { + border-color: #e3008c; +} + +.ms-borderColor-purpleDark { + border-color: #32145a; +} + +.ms-borderColor-purple { + border-color: #5c2d91; +} + +.ms-borderColor-purpleLight { + border-color: #b4a0ff; +} + +.ms-borderColor-blueDark { + border-color: #002050; +} + +.ms-borderColor-blueMid { + border-color: #00188f; +} + +.ms-borderColor-blue { + border-color: #0078d7; +} + +.ms-borderColor-blueLight { + border-color: #00bcf2; +} + +.ms-borderColor-tealDark { + border-color: #004b50; +} + +.ms-borderColor-teal { + border-color: #008272; +} + +.ms-borderColor-tealLight { + border-color: #00b294; +} + +.ms-borderColor-greenDark { + border-color: #004b1c; +} + +.ms-borderColor-green { + border-color: #107c10; +} + +.ms-borderColor-greenLight { + border-color: #bad80a; +} + +.ms-borderColor-info { + border-color: #107c10; +} + +.ms-borderColor-success { + border-color: #107c10; +} + +.ms-borderColor-alert { + border-color: #d83b01; +} + +.ms-borderColor-error { + border-color: #a80000; +} + +.ms-borderColorTop-themePrimary, +.ms-borderColorTop-themePrimary--hover:hover { + border-top-color: #0078d7; +} + +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ + +@font-face { + font-family: 'Leelawadee UI Bold'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Leelawadee UI'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Leelawadee UI Semilight'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Arabic'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Arabic'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Arabic'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Arabic'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Cyrillic'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Cyrillic'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Cyrillic'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Cyrillic'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light EastEuropean'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular EastEuropean'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold EastEuropean'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight EastEuropean'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Greek'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Greek'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Greek'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Greek'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Hebrew'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Hebrew'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Hebrew'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Hebrew'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light Vietnamese'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular Vietnamese'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold Vietnamese'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight Vietnamese'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Light WestEuropean'; + src: local('Segoe UI Light'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Regular WestEuropean'; + src: local('Segoe UI'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semibold WestEuropean'; + src: local('Segoe UI Semibold'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Segoe UI Semilight WestEuropean'; + src: local('Segoe UI Semilight'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2') format('woff2'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +.ms-font-su { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 42px; + font-weight: normal; +} + +.ms-font-xxl { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + font-weight: normal; +} + +.ms-font-xl { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; +} + +.ms-font-l { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + font-weight: normal; +} + +.ms-font-m-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; +} + +.ms-font-m { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; +} + +.ms-font-s-plus { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + font-weight: normal; +} + +.ms-font-s { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; +} + +.ms-font-xs { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + font-weight: normal; +} + +.ms-font-mi { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 10px; + font-weight: normal; +} + +.ms-fontWeight-light, +.ms-fontWeight-light--hover:hover { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semilight, +.ms-fontWeight-semilight--hover:hover { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-regular, +.ms-fontWeight-regular--hover:hover { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontWeight-semibold, +.ms-fontWeight-semibold--hover:hover { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-fontSize-su { + font-size: 42px; +} + +.ms-fontSize-xxl { + font-size: 28px; +} + +.ms-fontSize-xl { + font-size: 21px; +} + +.ms-fontSize-l { + font-size: 17px; +} + +.ms-fontSize-mPlus { + font-size: 15px; +} + +.ms-fontSize-m { + font-size: 14px; +} + +.ms-fontSize-sPlus { + font-size: 13px; +} + +.ms-fontSize-s { + font-size: 12px; +} + +.ms-fontSize-xs { + font-size: 11px; +} + +.ms-fontSize-mi { + font-size: 10px; +} + +.ms-fontColor-themeDarker, +.ms-fontColor-themeDarker--hover:hover { + color: #004578; +} + +.ms-fontColor-themeDark, +.ms-fontColor-themeDark--hover:hover { + color: #005a9e; +} + +.ms-fontColor-themeDarkAlt, +.ms-fontColor-themeDarkAlt--hover:hover { + color: #106ebe; +} + +.ms-fontColor-themePrimary, +.ms-fontColor-themePrimary--hover:hover { + color: #0078d7; +} + +.ms-fontColor-themeSecondary, +.ms-fontColor-themeSecondary--hover:hover { + color: #2b88d8; +} + +.ms-fontColor-themeTertiary, +.ms-fontColor-themeTertiary--hover:hover { + color: #71afe5; +} + +.ms-fontColor-themeLight, +.ms-fontColor-themeLight--hover:hover { + color: #c7e0f4; +} + +.ms-fontColor-themeLighter, +.ms-fontColor-themeLighter--hover:hover { + color: #deecf9; +} + +.ms-fontColor-themeLighterAlt, +.ms-fontColor-themeLighterAlt--hover:hover { + color: #eff6fc; +} + +.ms-fontColor-black, +.ms-fontColor-black--hover:hover { + color: #000000; +} + +.ms-fontColor-neutralDark, +.ms-fontColor-neutralDark--hover:hover { + color: #212121; +} + +.ms-fontColor-neutralPrimary, +.ms-fontColor-neutralPrimary--hover:hover { + color: #333333; +} + +.ms-fontColor-neutralSecondary, +.ms-fontColor-neutralSecondary--hover:hover { + color: #666666; +} + +.ms-fontColor-neutralSecondaryAlt, +.ms-fontColor-neutralSecondaryAlt--hover:hover { + color: #767676; +} + +.ms-fontColor-neutralTertiary, +.ms-fontColor-neutralTertiary--hover:hover { + color: #a6a6a6; +} + +.ms-fontColor-neutralTertiaryAlt, +.ms-fontColor-neutralTertiaryAlt--hover:hover { + color: #c8c8c8; +} + +.ms-fontColor-neutralLight, +.ms-fontColor-neutralLight--hover:hover { + color: #eaeaea; +} + +.ms-fontColor-neutralLighter, +.ms-fontColor-neutralLighter--hover:hover { + color: #f4f4f4; +} + +.ms-fontColor-neutralLighterAlt, +.ms-fontColor-neutralLighterAlt--hover:hover { + color: #f8f8f8; +} + +.ms-fontColor-white, +.ms-fontColor-white--hover:hover { + color: #ffffff; +} + +.ms-fontColor-yellow, +.ms-fontColor-yellow--hover:hover { + color: #ffb900; +} + +.ms-fontColor-yellowLight, +.ms-fontColor-yellowLight--hover:hover { + color: #fff100; +} + +.ms-fontColor-orange, +.ms-fontColor-orange--hover:hover { + color: #d83b01; +} + +.ms-fontColor-orangeLight, +.ms-fontColor-orangeLight--hover:hover { + color: #ea4300; +} + +.ms-fontColor-orangeLighter, +.ms-fontColor-orangeLighter--hover:hover { + color: #ff8c00; +} + +.ms-fontColor-redDark, +.ms-fontColor-redDark--hover:hover { + color: #a80000; +} + +.ms-fontColor-red, +.ms-fontColor-red--hover:hover { + color: #e81123; +} + +.ms-fontColor-magentaDark, +.ms-fontColor-magentaDark--hover:hover { + color: #5c005c; +} + +.ms-fontColor-magenta, +.ms-fontColor-magenta--hover:hover { + color: #b4009e; +} + +.ms-fontColor-magentaLight, +.ms-fontColor-magentaLight--hover:hover { + color: #e3008c; +} + +.ms-fontColor-purpleDark, +.ms-fontColor-purpleDark--hover:hover { + color: #32145a; +} + +.ms-fontColor-purple, +.ms-fontColor-purple--hover:hover { + color: #5c2d91; +} + +.ms-fontColor-purpleLight, +.ms-fontColor-purpleLight--hover:hover { + color: #b4a0ff; +} + +.ms-fontColor-blueDark, +.ms-fontColor-blueDark--hover:hover { + color: #002050; +} + +.ms-fontColor-blueMid, +.ms-fontColor-blueMid--hover:hover { + color: #00188f; +} + +.ms-fontColor-blue, +.ms-fontColor-blue--hover:hover { + color: #0078d7; +} + +.ms-fontColor-blueLight, +.ms-fontColor-blueLight--hover:hover { + color: #00bcf2; +} + +.ms-fontColor-tealDark, +.ms-fontColor-tealDark--hover:hover { + color: #004b50; +} + +.ms-fontColor-teal, +.ms-fontColor-teal--hover:hover { + color: #008272; +} + +.ms-fontColor-tealLight, +.ms-fontColor-tealLight--hover:hover { + color: #00b294; +} + +.ms-fontColor-greenDark, +.ms-fontColor-greenDark--hover:hover { + color: #004b1c; +} + +.ms-fontColor-green, +.ms-fontColor-green--hover:hover { + color: #107c10; +} + +.ms-fontColor-greenLight, +.ms-fontColor-greenLight--hover:hover { + color: #bad80a; +} + +.ms-fontColor-info, +.ms-fontColor-info--hover:hover { + color: #107c10; +} + +.ms-fontColor-success, +.ms-fontColor-success--hover:hover { + color: #107c10; +} + +.ms-fontColor-alert, +.ms-fontColor-alert--hover:hover { + color: #d83b01; +} + +.ms-fontColor-error, +.ms-fontColor-error--hover:hover { + color: #a80000; +} + +*[lang='ja-JP'] .ms-font-mi, +*[lang='ja-JP'] .ms-font-xs, +*[lang='ja-JP'] .ms-font-s, +*[lang='ja-JP'] .ms-font-s-plus, +*[lang='ja-JP'] .ms-font-m, +*[lang='ja-JP'] .ms-font-m-plus, +*[lang='ja-JP'] .ms-font-l, +*[lang='ja-JP'] .ms-font-xl, +*[lang='ja-JP'] .ms-font-xxl, +*[lang='ja-JP'] .ms-font-su, +*[lang='ja-JP'] .ms-fontWeight-light, +*[lang='ja-JP'] .ms-fontWeight-light-hover:hover, +*[lang='ja-JP'] .ms-fontWeight-semilight, +*[lang='ja-JP'] .ms-fontWeight-semilight-hover:hover, +*[lang='ja-JP'] .ms-fontWeight-regular, +*[lang='ja-JP'] .ms-fontWeight-regular-hover:hover, +*[lang='ja-JP'] .ms-fontWeight-semibold, +*[lang='ja-JP'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ko-KR'] .ms-font-mi, +*[lang='ko-KR'] .ms-font-xs, +*[lang='ko-KR'] .ms-font-s, +*[lang='ko-KR'] .ms-font-s-plus, +*[lang='ko-KR'] .ms-font-m, +*[lang='ko-KR'] .ms-font-m-plus, +*[lang='ko-KR'] .ms-font-l, +*[lang='ko-KR'] .ms-font-xl, +*[lang='ko-KR'] .ms-font-xxl, +*[lang='ko-KR'] .ms-font-su, +*[lang='ko-KR'] .ms-fontWeight-light, +*[lang='ko-KR'] .ms-fontWeight-light-hover:hover, +*[lang='ko-KR'] .ms-fontWeight-semilight, +*[lang='ko-KR'] .ms-fontWeight-semilight-hover:hover, +*[lang='ko-KR'] .ms-fontWeight-regular, +*[lang='ko-KR'] .ms-fontWeight-regular-hover:hover, +*[lang='ko-KR'] .ms-fontWeight-semibold, +*[lang='ko-KR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Malgun Gothic', Gulim, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ch-ZHS'] .ms-font-mi, +*[lang='ch-ZHS'] .ms-font-xs, +*[lang='ch-ZHS'] .ms-font-s, +*[lang='ch-ZHS'] .ms-font-s-plus, +*[lang='ch-ZHS'] .ms-font-m, +*[lang='ch-ZHS'] .ms-font-m-plus, +*[lang='ch-ZHS'] .ms-font-l, +*[lang='ch-ZHS'] .ms-font-xl, +*[lang='ch-ZHS'] .ms-font-xxl, +*[lang='ch-ZHS'] .ms-font-su, +*[lang='ch-ZHS'] .ms-fontWeight-light, +*[lang='ch-ZHS'] .ms-fontWeight-light-hover:hover, +*[lang='ch-ZHS'] .ms-fontWeight-semilight, +*[lang='ch-ZHS'] .ms-fontWeight-semilight-hover:hover, +*[lang='ch-ZHS'] .ms-fontWeight-regular, +*[lang='ch-ZHS'] .ms-fontWeight-regular-hover:hover, +*[lang='ch-ZHS'] .ms-fontWeight-semibold, +*[lang='ch-ZHS'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ch-ZHT'] .ms-font-mi, +*[lang='ch-ZHT'] .ms-font-xs, +*[lang='ch-ZHT'] .ms-font-s, +*[lang='ch-ZHT'] .ms-font-s-plus, +*[lang='ch-ZHT'] .ms-font-m, +*[lang='ch-ZHT'] .ms-font-m-plus, +*[lang='ch-ZHT'] .ms-font-l, +*[lang='ch-ZHT'] .ms-font-xl, +*[lang='ch-ZHT'] .ms-font-xxl, +*[lang='ch-ZHT'] .ms-font-su, +*[lang='ch-ZHT'] .ms-fontWeight-light, +*[lang='ch-ZHT'] .ms-fontWeight-light-hover:hover, +*[lang='ch-ZHT'] .ms-fontWeight-semilight, +*[lang='ch-ZHT'] .ms-fontWeight-semilight-hover:hover, +*[lang='ch-ZHT'] .ms-fontWeight-regular, +*[lang='ch-ZHT'] .ms-fontWeight-regular-hover:hover, +*[lang='ch-ZHT'] .ms-fontWeight-semibold, +*[lang='ch-ZHT'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Microsoft Jhenghei', Pmingliu, 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hi-IN'] .ms-font-mi, +*[lang='hi-IN'] .ms-font-xs, +*[lang='hi-IN'] .ms-font-s, +*[lang='hi-IN'] .ms-font-s-plus, +*[lang='hi-IN'] .ms-font-m, +*[lang='hi-IN'] .ms-font-m-plus, +*[lang='hi-IN'] .ms-font-l, +*[lang='hi-IN'] .ms-font-xl, +*[lang='hi-IN'] .ms-font-xxl, +*[lang='hi-IN'] .ms-font-su, +*[lang='hi-IN'] .ms-fontWeight-light, +*[lang='hi-IN'] .ms-fontWeight-light-hover:hover, +*[lang='hi-IN'] .ms-fontWeight-semilight, +*[lang='hi-IN'] .ms-fontWeight-semilight-hover:hover, +*[lang='hi-IN'] .ms-fontWeight-regular, +*[lang='hi-IN'] .ms-fontWeight-regular-hover:hover, +*[lang='hi-IN'] .ms-fontWeight-semibold, +*[lang='hi-IN'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Nirmala UI', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-font-xl, +*[lang='th-TH'] .ms-font-xxl, +*[lang='th-TH'] .ms-fontWeight-light, +*[lang='th-TH'] .ms-fontWeight-light-hover:hover { + font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-font-l, +*[lang='th-TH'] .ms-font-su, +*[lang='th-TH'] .ms-fontWeight-semilight, +*[lang='th-TH'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Leelawadee UI Semilight', 'Kmer UI', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-fontWeight-regular, +*[lang='th-TH'] .ms-fontweight-regular-hover:hover { + font-family: 'Leelawadee UI Regular', 'Kmer UI', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='th-TH'] .ms-font-mi, +*[lang='th-TH'] .ms-fontWeight-semibold, +*[lang='th-TH'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Leelawadee UI Bold', 'Kmer UI', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-font-xl, +*[lang='ar'] .ms-font-xxl, +*[lang='ar'] .ms-fontWeight-light, +*[lang='ar'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Arabic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-font-l, +*[lang='ar'] .ms-font-su, +*[lang='ar'] .ms-fontWeight-semilight, +*[lang='ar'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Arabic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-fontWeight-regular, +*[lang='ar'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Arabic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ar'] .ms-font-mi, +*[lang='ar'] .ms-fontWeight-semibold, +*[lang='ar'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Arabic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-font-xl, +*[lang='bg-BG'] .ms-font-xxl, +*[lang='bg-BG'] .ms-fontWeight-light, +*[lang='bg-BG'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-font-l, +*[lang='bg-BG'] .ms-font-su, +*[lang='bg-BG'] .ms-fontWeight-semilight, +*[lang='bg-BG'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-fontWeight-regular, +*[lang='bg-BG'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='bg-BG'] .ms-font-mi, +*[lang='bg-BG'] .ms-fontWeight-semibold, +*[lang='bg-BG'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-font-xl, +*[lang='ru-RU'] .ms-font-xxl, +*[lang='ru-RU'] .ms-fontWeight-light, +*[lang='ru-RU'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-font-l, +*[lang='ru-RU'] .ms-font-su, +*[lang='ru-RU'] .ms-fontWeight-semilight, +*[lang='ru-RU'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-fontWeight-regular, +*[lang='ru-RU'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='ru-RU'] .ms-font-mi, +*[lang='ru-RU'] .ms-fontWeight-semibold, +*[lang='ru-RU'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-font-xl, +*[lang='uk-UA'] .ms-font-xxl, +*[lang='uk-UA'] .ms-fontWeight-light, +*[lang='uk-UA'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Cyrillic', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-font-l, +*[lang='uk-UA'] .ms-font-su, +*[lang='uk-UA'] .ms-fontWeight-semilight, +*[lang='uk-UA'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Cyrillic', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-fontWeight-regular, +*[lang='uk-UA'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Cyrillic', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='uk-UA'] .ms-font-mi, +*[lang='uk-UA'] .ms-fontWeight-semibold, +*[lang='uk-UA'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Cyrillic', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-font-xl, +*[lang='cs-CZ'] .ms-font-xxl, +*[lang='cs-CZ'] .ms-fontWeight-light, +*[lang='cs-CZ'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-font-l, +*[lang='cs-CZ'] .ms-font-su, +*[lang='cs-CZ'] .ms-fontWeight-semilight, +*[lang='cs-CZ'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-fontWeight-regular, +*[lang='cs-CZ'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='cs-CZ'] .ms-font-mi, +*[lang='cs-CZ'] .ms-fontWeight-semibold, +*[lang='cs-CZ'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-font-xl, +*[lang='et-EE'] .ms-font-xxl, +*[lang='et-EE'] .ms-fontWeight-light, +*[lang='et-EE'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-font-l, +*[lang='et-EE'] .ms-font-su, +*[lang='et-EE'] .ms-fontWeight-semilight, +*[lang='et-EE'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-fontWeight-regular, +*[lang='et-EE'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='et-EE'] .ms-font-mi, +*[lang='et-EE'] .ms-fontWeight-semibold, +*[lang='et-EE'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-font-xl, +*[lang='hr-HR'] .ms-font-xxl, +*[lang='hr-HR'] .ms-fontWeight-light, +*[lang='hr-HR'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-font-l, +*[lang='hr-HR'] .ms-font-su, +*[lang='hr-HR'] .ms-fontWeight-semilight, +*[lang='hr-HR'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-fontWeight-regular, +*[lang='hr-HR'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hr-HR'] .ms-font-mi, +*[lang='hr-HR'] .ms-fontWeight-semibold, +*[lang='hr-HR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-font-xl, +*[lang='hu-HU'] .ms-font-xxl, +*[lang='hu-HU'] .ms-fontWeight-light, +*[lang='hu-HU'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-font-l, +*[lang='hu-HU'] .ms-font-su, +*[lang='hu-HU'] .ms-fontWeight-semilight, +*[lang='hu-HU'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-fontWeight-regular, +*[lang='hu-HU'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='hu-HU'] .ms-font-mi, +*[lang='hu-HU'] .ms-fontWeight-semibold, +*[lang='hu-HU'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-font-xl, +*[lang='lt-LT'] .ms-font-xxl, +*[lang='lt-LT'] .ms-fontWeight-light, +*[lang='lt-LT'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-font-l, +*[lang='lt-LT'] .ms-font-su, +*[lang='lt-LT'] .ms-fontWeight-semilight, +*[lang='lt-LT'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-fontWeight-regular, +*[lang='lt-LT'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-LT'] .ms-font-mi, +*[lang='lt-LT'] .ms-fontWeight-semibold, +*[lang='lt-LT'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-font-xl, +*[lang='lv-LV'] .ms-font-xxl, +*[lang='lv-LV'] .ms-fontWeight-light, +*[lang='lv-LV'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-font-l, +*[lang='lv-LV'] .ms-font-su, +*[lang='lv-LV'] .ms-fontWeight-semilight, +*[lang='lv-LV'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-fontWeight-regular, +*[lang='lv-LV'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lv-LV'] .ms-font-mi, +*[lang='lv-LV'] .ms-fontWeight-semibold, +*[lang='lv-LV'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-font-xl, +*[lang='pl-PL'] .ms-font-xxl, +*[lang='pl-PL'] .ms-fontWeight-light, +*[lang='pl-PL'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-font-l, +*[lang='pl-PL'] .ms-font-su, +*[lang='pl-PL'] .ms-fontWeight-semilight, +*[lang='pl-PL'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-fontWeight-regular, +*[lang='pl-PL'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='pl-PL'] .ms-font-mi, +*[lang='pl-PL'] .ms-fontWeight-semibold, +*[lang='pl-PL'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-font-xl, +*[lang='lt-sr-SP'] .ms-font-xxl, +*[lang='lt-sr-SP'] .ms-fontWeight-light, +*[lang='lt-sr-SP'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-font-l, +*[lang='lt-sr-SP'] .ms-font-su, +*[lang='lt-sr-SP'] .ms-fontWeight-semilight, +*[lang='lt-sr-SP'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-fontWeight-regular, +*[lang='lt-sr-SP'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='lt-sr-SP'] .ms-font-mi, +*[lang='lt-sr-SP'] .ms-fontWeight-semibold, +*[lang='lt-sr-SP'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-font-xl, +*[lang='tr-TR'] .ms-font-xxl, +*[lang='tr-TR'] .ms-fontWeight-light, +*[lang='tr-TR'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-font-l, +*[lang='tr-TR'] .ms-font-su, +*[lang='tr-TR'] .ms-fontWeight-semilight, +*[lang='tr-TR'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-fontWeight-regular, +*[lang='tr-TR'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='tr-TR'] .ms-font-mi, +*[lang='tr-TR'] .ms-fontWeight-semibold, +*[lang='tr-TR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-font-xl, +*[lang='sk-SK'] .ms-font-xxl, +*[lang='sk-SK'] .ms-fontWeight-light, +*[lang='sk-SK'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-font-l, +*[lang='sk-SK'] .ms-font-su, +*[lang='sk-SK'] .ms-fontWeight-semilight, +*[lang='sk-SK'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-fontWeight-regular, +*[lang='sk-SK'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='sk-SK'] .ms-font-mi, +*[lang='sk-SK'] .ms-fontWeight-semibold, +*[lang='sk-SK'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-font-xl, +*[lang='kk-KZ'] .ms-font-xxl, +*[lang='kk-KZ'] .ms-fontWeight-light, +*[lang='kk-KZ'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light EastEuropean', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-font-l, +*[lang='kk-KZ'] .ms-font-su, +*[lang='kk-KZ'] .ms-fontWeight-semilight, +*[lang='kk-KZ'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight EastEuropean', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-fontWeight-regular, +*[lang='kk-KZ'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular EastEuropean', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='kk-KZ'] .ms-font-mi, +*[lang='kk-KZ'] .ms-fontWeight-semibold, +*[lang='kk-KZ'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold EastEuropean', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-font-xl, +*[lang='el-GR'] .ms-font-xxl, +*[lang='el-GR'] .ms-fontWeight-light, +*[lang='el-GR'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Greek', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-font-l, +*[lang='el-GR'] .ms-font-su, +*[lang='el-GR'] .ms-fontWeight-semilight, +*[lang='el-GR'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Greek', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-fontWeight-regular, +*[lang='el-GR'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Greek', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='el-GR'] .ms-font-mi, +*[lang='el-GR'] .ms-fontWeight-semibold, +*[lang='el-GR'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Greek', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-font-xl, +*[lang='he-IL'] .ms-font-xxl, +*[lang='he-IL'] .ms-fontWeight-light, +*[lang='he-IL'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Hebrew', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-font-l, +*[lang='he-IL'] .ms-font-su, +*[lang='he-IL'] .ms-fontWeight-semilight, +*[lang='he-IL'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Hebrew', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-fontWeight-regular, +*[lang='he-IL'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Hebrew', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='he-IL'] .ms-font-mi, +*[lang='he-IL'] .ms-fontWeight-semibold, +*[lang='he-IL'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Hebrew', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-font-xl, +*[lang='vi-VN'] .ms-font-xxl, +*[lang='vi-VN'] .ms-fontWeight-light, +*[lang='vi-VN'] .ms-fontWeight-light-hover:hover { + font-family: 'Segoe UI Light Vietnamese', 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-font-l, +*[lang='vi-VN'] .ms-font-su, +*[lang='vi-VN'] .ms-fontWeight-semilight, +*[lang='vi-VN'] .ms-fontWeight-semilight-hover:hover { + font-family: 'Segoe UI Semilight Vietnamese', 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-fontWeight-regular, +*[lang='vi-VN'] .ms-fontweight-regular-hover:hover { + font-family: 'Segoe UI Regular Vietnamese', 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +*[lang='vi-VN'] .ms-font-mi, +*[lang='vi-VN'] .ms-fontWeight-semibold, +*[lang='vi-VN'] .ms-fontWeight-semibold-hover:hover { + font-family: 'Segoe UI Semibold Vietnamese', 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ + +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ + +@font-face { + font-family: 'Office365Icons'; + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?'); + src: url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot?#iefix') format('embedded-opentype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff?') format('woff'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf?') format('truetype'), url('https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg?#office365icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +.ms-Icon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +.ms-Icon--circleEmpty:before { + content: '\e000'; +} + +.ms-Icon--circleFill:before { + content: '\e001'; +} + +.ms-Icon--placeholder:before { + content: '\e002'; +} + +.ms-Icon--star:before { + content: '\e003'; +} + +.ms-Icon--plus:before { + content: '\e004'; +} + +.ms-Icon--minus:before { + content: '\e005'; +} + +.ms-Icon--question:before { + content: '\e006'; +} + +.ms-Icon--exclamation:before { + content: '\e007'; +} + +.ms-Icon--person:before { + content: '\e008'; +} + +.ms-Icon--mail:before { + content: '\e009'; +} + +.ms-Icon--infoCircle:before { + content: '\e00a'; +} + +.ms-Icon--alert:before { + content: '\e00b'; +} + +.ms-Icon--xCircle:before { + content: '\e00c'; +} + +.ms-Icon--mailOpen:before { + content: '\e00d'; +} + +.ms-Icon--people:before { + content: '\e00e'; +} + +.ms-Icon--bell:before { + content: '\e010'; +} + +.ms-Icon--calendar:before { + content: '\e011'; +} + +.ms-Icon--scheduling:before { + content: '\e012'; +} + +.ms-Icon--event:before { + content: '\e013'; +} + +.ms-Icon--folder:before { + content: '\e014'; +} + +.ms-Icon--documents:before { + content: '\e015'; +} + +.ms-Icon--onedrive:before { + content: '\e016'; +} + +.ms-Icon--chat:before { + content: '\e017'; +} + +.ms-Icon--sites:before { + content: '\e018'; +} + +.ms-Icon--listBullets:before { + content: '\e019'; +} + +.ms-Icon--calendarWeek:before { + content: '\e01a'; +} + +.ms-Icon--calendarWorkWeek:before { + content: '\e01b'; +} + +.ms-Icon--calendarDay:before { + content: '\e01c'; +} + +.ms-Icon--folderMove:before { + content: '\e01d'; +} + +.ms-Icon--panel:before { + content: '\e01e'; +} + +.ms-Icon--popout:before { + content: '\e01f'; +} + +.ms-Icon--menu:before { + content: '\e020'; +} + +.ms-Icon--home:before { + content: '\e021'; +} + +.ms-Icon--favorites:before { + content: '\e022'; +} + +.ms-Icon--phone:before { + content: '\e023'; +} + +.ms-Icon--mailSend:before { + content: '\e024'; +} + +.ms-Icon--save:before { + content: '\e025'; +} + +.ms-Icon--trash:before { + content: '\e026'; +} + +.ms-Icon--pencil:before { + content: '\e027'; +} + +.ms-Icon--flag:before { + content: '\e028'; +} + +.ms-Icon--reply:before { + content: '\e029'; +} + +.ms-Icon--miniatures:before { + content: '\e02a'; +} + +.ms-Icon--voicemail:before { + content: '\e02b'; +} + +.ms-Icon--play:before { + content: '\e02c'; +} + +.ms-Icon--pause:before { + content: '\e02d'; +} + +.ms-Icon--onlineAdd:before { + content: '\e02e'; +} + +.ms-Icon--onlineJoin:before { + content: '\e02f'; +} + +.ms-Icon--replyAll:before { + content: '\e030'; +} + +.ms-Icon--attachment:before { + content: '\e031'; +} + +.ms-Icon--drm:before { + content: '\e032'; +} + +.ms-Icon--pinDown:before { + content: '\e033'; +} + +.ms-Icon--refresh:before { + content: '\e034'; +} + +.ms-Icon--gear:before { + content: '\e035'; +} + +.ms-Icon--smiley:before { + content: '\e036'; +} + +.ms-Icon--info:before { + content: '\e037'; +} + +.ms-Icon--lock:before { + content: '\e038'; +} + +.ms-Icon--search:before { + content: '\e039'; +} + +.ms-Icon--questionReverse:before { + content: '\e03a'; +} + +.ms-Icon--notRecurring:before { + content: '\e03b'; +} + +.ms-Icon--tasks:before { + content: '\e040'; +} + +.ms-Icon--check:before { + content: '\e041'; +} + +.ms-Icon--x:before { + content: '\e042'; +} + +.ms-Icon--ellipsis:before { + content: '\e045'; +} + +.ms-Icon--dot:before { + content: '\e046'; +} + +.ms-Icon--arrowUp:before { + content: '\e047'; +} + +.ms-Icon--arrowDown:before { + content: '\e048'; +} + +.ms-Icon--arrowLeft:before { + content: '\e049'; +} + +.ms-Icon--arrowRight:before { + content: '\e04a'; +} + +.ms-Icon--download:before { + content: '\e04b'; +} + +.ms-Icon--directions:before { + content: '\e04c'; +} + +.ms-Icon--microphone:before { + content: '\e04f'; +} + +.ms-Icon--caretUp:before { + content: '\e051'; +} + +.ms-Icon--caretDown:before { + content: '\e052'; +} + +.ms-Icon--caretLeft:before { + content: '\e053'; +} + +.ms-Icon--caretRight:before { + content: '\e054'; +} + +.ms-Icon--caretUpLeft:before { + content: '\e05a'; +} + +.ms-Icon--caretUpRight:before { + content: '\e05b'; +} + +.ms-Icon--caretDownRight:before { + content: '\e05c'; +} + +.ms-Icon--caretDownLeft:before { + content: '\e05d'; +} + +.ms-Icon--note:before { + content: '\e06a'; +} + +.ms-Icon--noteReply:before { + content: '\e06b'; +} + +.ms-Icon--noteForward:before { + content: '\e06c'; +} + +.ms-Icon--key:before { + content: '\e06f'; +} + +.ms-Icon--tile:before { + content: '\e070'; +} + +.ms-Icon--taskRecurring:before { + content: '\e071'; +} + +.ms-Icon--starEmpty:before { + content: '\e073'; +} + +.ms-Icon--upload:before { + content: '\e076'; +} + +.ms-Icon--wrench:before { + content: '\e077'; +} + +.ms-Icon--share:before { + content: '\e078'; +} + +.ms-Icon--documentReply:before { + content: '\e079'; +} + +.ms-Icon--documentForward:before { + content: '\e07a'; +} + +.ms-Icon--partner:before { + content: '\e080'; +} + +.ms-Icon--reactivate:before { + content: '\e084'; +} + +.ms-Icon--sort:before { + content: '\e085'; +} + +.ms-Icon--personAdd:before { + content: '\e086'; +} + +.ms-Icon--chevronUp:before { + content: '\e087'; +} + +.ms-Icon--chevronDown:before { + content: '\e088'; +} + +.ms-Icon--chevronLeft:before { + content: '\e089'; +} + +.ms-Icon--chevronRight:before { + content: '\e08a'; +} + +.ms-Icon--peopleAdd:before { + content: '\e08c'; +} + +.ms-Icon--newsfeed:before { + content: '\e08d'; +} + +.ms-Icon--notebook:before { + content: '\e08e'; +} + +.ms-Icon--link:before { + content: '\e08f'; +} + +.ms-Icon--chevronsUp:before { + content: '\e090'; +} + +.ms-Icon--chevronsDown:before { + content: '\e091'; +} + +.ms-Icon--chevronsLeft:before { + content: '\e092'; +} + +.ms-Icon--chevronsRight:before { + content: '\e093'; +} + +.ms-Icon--clutter:before { + content: '\e09a'; +} + +.ms-Icon--subscribe:before { + content: '\e09c'; +} + +.ms-Icon--unsubscribe:before { + content: '\e09d'; +} + +.ms-Icon--personRemove:before { + content: '\e09e'; +} + +.ms-Icon--receiptForward:before { + content: '\e0a0'; +} + +.ms-Icon--receiptReply:before { + content: '\e0a1'; +} + +.ms-Icon--receiptCheck:before { + content: '\e0a2'; +} + +.ms-Icon--peopleRemove:before { + content: '\e0a3'; +} + +.ms-Icon--merge:before { + content: '\e0a4'; +} + +.ms-Icon--split:before { + content: '\e0a5'; +} + +.ms-Icon--eventCancel:before { + content: '\e0a6'; +} + +.ms-Icon--eventShare:before { + content: '\e0a7'; +} + +.ms-Icon--today:before { + content: '\e0a9'; +} + +.ms-Icon--oofReply:before { + content: '\e0aa'; +} + +.ms-Icon--voicemailReply:before { + content: '\e0ac'; +} + +.ms-Icon--voicemailForward:before { + content: '\e0ad'; +} + +.ms-Icon--ribbon:before { + content: '\e0af'; +} + +.ms-Icon--contact:before { + content: '\e0b0'; +} + +.ms-Icon--eye:before { + content: '\e0b1'; +} + +.ms-Icon--glasses:before { + content: '\e0b2'; +} + +.ms-Icon--print:before { + content: '\e100'; +} + +.ms-Icon--room:before { + content: '\e101'; +} + +.ms-Icon--post:before { + content: '\e102'; +} + +.ms-Icon--toggle:before { + content: '\e103'; +} + +.ms-Icon--touch:before { + content: '\e104'; +} + +.ms-Icon--clock:before { + content: '\e105'; +} + +.ms-Icon--fax:before { + content: '\e106'; +} + +.ms-Icon--lightning:before { + content: '\e110'; +} + +.ms-Icon--dialpad:before { + content: '\e111'; +} + +.ms-Icon--phoneTransfer:before { + content: '\e112'; +} + +.ms-Icon--phoneAdd:before { + content: '\e113'; +} + +.ms-Icon--late:before { + content: '\e114'; +} + +.ms-Icon--chatAdd:before { + content: '\e115'; +} + +.ms-Icon--conflict:before { + content: '\e116'; +} + +.ms-Icon--navigate:before { + content: '\e117'; +} + +.ms-Icon--camera:before { + content: '\e119'; +} + +.ms-Icon--filter:before { + content: '\e11a'; +} + +.ms-Icon--fullscreen:before { + content: '\e11b'; +} + +.ms-Icon--new:before { + content: '\e11c'; +} + +.ms-Icon--mailEmpty:before { + content: '\e11d'; +} + +.ms-Icon--editBox:before { + content: '\e11e'; +} + +.ms-Icon--waffle:before { + content: '\e11f'; +} + +.ms-Icon--work:before { + content: '\e120'; +} + +.ms-Icon--eventRecurring:before { + content: '\e121'; +} + +.ms-Icon--cart:before { + content: '\e122'; +} + +.ms-Icon--socialListening:before { + content: '\e123'; +} + +.ms-Icon--mapMarker:before { + content: '\e124'; +} + +.ms-Icon--org:before { + content: '\e125'; +} + +.ms-Icon--replyAlt:before { + content: '\e150'; +} + +.ms-Icon--replyAllAlt:before { + content: '\e152'; +} + +.ms-Icon--eventInfo:before { + content: '\e154'; +} + +.ms-Icon--group:before { + content: '\e155'; +} + +.ms-Icon--money:before { + content: '\e161'; +} + +.ms-Icon--graph:before { + content: '\e162'; +} + +.ms-Icon--noteEdit:before { + content: '\e163'; +} + +.ms-Icon--dashboard:before { + content: '\e164'; +} + +.ms-Icon--mailEdit:before { + content: '\e165'; +} + +.ms-Icon--pinLeft:before { + content: '\e167'; +} + +.ms-Icon--heart:before { + content: '\e16a'; +} + +.ms-Icon--heartEmpty:before { + content: '\e16b'; +} + +.ms-Icon--picture:before { + content: '\e16c'; +} + +.ms-Icon--cake:before { + content: '\e16d'; +} + +.ms-Icon--books:before { + content: '\e16e'; +} + +.ms-Icon--chart:before { + content: '\e16f'; +} + +.ms-Icon--video:before { + content: '\e170'; +} + +.ms-Icon--soccer:before { + content: '\e171'; +} + +.ms-Icon--meal:before { + content: '\e172'; +} + +.ms-Icon--balloon:before { + content: '\e173'; +} + +.ms-Icon--cat:before { + content: '\e174'; +} + +.ms-Icon--dog:before { + content: '\e175'; +} + +.ms-Icon--bag:before { + content: '\e176'; +} + +.ms-Icon--music:before { + content: '\e177'; +} + +.ms-Icon--stopwatch:before { + content: '\e178'; +} + +.ms-Icon--coffee:before { + content: '\e179'; +} + +.ms-Icon--briefcase:before { + content: '\e17a'; +} + +.ms-Icon--pill:before { + content: '\e17b'; +} + +.ms-Icon--trophy:before { + content: '\e17c'; +} + +.ms-Icon--firstAid:before { + content: '\e17d'; +} + +.ms-Icon--plane:before { + content: '\e17e'; +} + +.ms-Icon--page:before { + content: '\e17f'; +} + +.ms-Icon--car:before { + content: '\e180'; +} + +.ms-Icon--dogAlt:before { + content: '\e181'; +} + +.ms-Icon--document:before { + content: '\e182'; +} + +.ms-Icon--metadata:before { + content: '\e183'; +} + +.ms-Icon--pointItem:before { + content: '\e184'; +} + +.ms-Icon--text:before { + content: '\e185'; +} + +.ms-Icon--fieldText:before { + content: '\e186'; +} + +.ms-Icon--fieldNumber:before { + content: '\e187'; +} + +.ms-Icon--dropdown:before { + content: '\e188'; +} + +.ms-Icon--radioButton:before { + content: '\e189'; +} + +.ms-Icon--checkbox:before { + content: '\e18a'; +} + +.ms-Icon--story:before { + content: '\e18b'; +} + +.ms-Icon--bold:before { + content: '\e18c'; +} + +.ms-Icon--italic:before { + content: '\e18d'; +} + +.ms-Icon--underline:before { + content: '\e18e'; +} + +.ms-Icon--quote:before { + content: '\e18f'; +} + +.ms-Icon--styleRemove:before { + content: '\e190'; +} + +.ms-Icon--pictureAdd:before { + content: '\e191'; +} + +.ms-Icon--pictureRemove:before { + content: '\e192'; +} + +.ms-Icon--desktop:before { + content: '\e193'; +} + +.ms-Icon--tablet:before { + content: '\e194'; +} + +.ms-Icon--mobile:before { + content: '\e195'; +} + +.ms-Icon--table:before { + content: '\e196'; +} + +.ms-Icon--hide:before { + content: '\e197'; +} + +.ms-Icon--shield:before { + content: '\e198'; +} + +.ms-Icon--header:before { + content: '\e19a'; +} + +.ms-Icon--paint:before { + content: '\e19b'; +} + +.ms-Icon--support:before { + content: '\e19c'; +} + +.ms-Icon--settings:before { + content: '\e19d'; +} + +.ms-Icon--creditCard:before { + content: '\e19e'; +} + +.ms-Icon--reload:before { + content: '\e19f'; +} + +.ms-Icon--peopleSecurity:before { + content: '\e200'; +} + +.ms-Icon--fieldTextBox:before { + content: '\e203'; +} + +.ms-Icon--multiChoice:before { + content: '\e204'; +} + +.ms-Icon--fieldMail:before { + content: '\e205'; +} + +.ms-Icon--contactForm:before { + content: '\e206'; +} + +.ms-Icon--circleHalfFilled:before { + content: '\e207'; +} + +.ms-Icon--documentPDF:before { + content: '\e208'; +} + +.ms-Icon--bookmark:before { + content: '\e209'; +} + +.ms-Icon--circleUnfilled:before { + content: '\e20b'; +} + +.ms-Icon--circleFilled:before { + content: '\e20c'; +} + +.ms-Icon--textBox:before { + content: '\e20e'; +} + +.ms-Icon--drop:before { + content: '\e20f'; +} + +.ms-Icon--sun:before { + content: '\e210'; +} + +.ms-Icon--lifesaver:before { + content: '\e211'; +} + +.ms-Icon--lifesaverLock:before { + content: '\e212'; +} + +.ms-Icon--mailUnread:before { + content: '\e213'; +} + +.ms-Icon--mailRead:before { + content: '\e214'; +} + +.ms-Icon--inboxCheck:before { + content: '\e215'; +} + +.ms-Icon--folderSearch:before { + content: '\e216'; +} + +.ms-Icon--collapse:before { + content: '\e217'; +} + +.ms-Icon--expand:before { + content: '\e218'; +} + +.ms-Icon--ascending:before { + content: '\e219'; +} + +.ms-Icon--descending:before { + content: '\e21a'; +} + +.ms-Icon--filterClear:before { + content: '\e21b'; +} + +.ms-Icon--checkboxEmpty:before { + content: '\e21c'; +} + +.ms-Icon--checkboxMixed:before { + content: '\e21d'; +} + +.ms-Icon--boards:before { + content: '\e21e'; +} + +.ms-Icon--checkboxCheck:before { + content: '\e21f'; +} + +.ms-Icon--frowny:before { + content: '\e220'; +} + +.ms-Icon--lightBulb:before { + content: '\e221'; +} + +.ms-Icon--globe:before { + content: '\e222'; +} + +.ms-Icon--deviceWipe:before { + content: '\e223'; +} + +.ms-Icon--listCheck:before { + content: '\e226'; +} + +.ms-Icon--listGroup:before { + content: '\e227'; +} + +.ms-Icon--timeline:before { + content: '\e228'; +} + +.ms-Icon--fontIncrease:before { + content: '\e229'; +} + +.ms-Icon--fontDecrease:before { + content: '\e22a'; +} + +.ms-Icon--fontColor:before { + content: '\e22b'; +} + +.ms-Icon--mailCheck:before { + content: '\e22c'; +} + +.ms-Icon--mailDown:before { + content: '\e22d'; +} + +.ms-Icon--listCheckbox:before { + content: '\e22e'; +} + +.ms-Icon--sunAdd:before { + content: '\e22f'; +} + +.ms-Icon--sunQuestion:before { + content: '\e230'; +} + +.ms-Icon--chevronThinUp:before { + content: '\e231'; +} + +.ms-Icon--chevronThinDown:before { + content: '\e232'; +} + +.ms-Icon--chevronThinLeft:before { + content: '\e233'; +} + +.ms-Icon--chevronThinRight:before { + content: '\e234'; +} + +.ms-Icon--chevronThickUp:before { + content: '\e235'; +} + +.ms-Icon--chevronThickDown:before { + content: '\e236'; +} + +.ms-Icon--chevronThickLeft:before { + content: '\e237'; +} + +.ms-Icon--chevronThickRight:before { + content: '\e238'; +} + +.ms-Icon--linkRemove:before { + content: '\e239'; +} + +.ms-Icon--alertOutline:before { + content: '\e23b'; +} + +.ms-Icon--documentLandscape:before { + content: '\e23c'; +} + +.ms-Icon--documentAdd:before { + content: '\e23d'; +} + +.ms-Icon--toggleMiddle:before { + content: '\e23e'; +} + +.ms-Icon--embed:before { + content: '\e23f'; +} + +.ms-Icon--listNumbered:before { + content: '\e240'; +} + +.ms-Icon--peopleCheck:before { + content: '\e242'; +} + +.ms-Icon--caretUpOutline:before { + content: '\e243'; +} + +.ms-Icon--caretDownOutline:before { + content: '\e244'; +} + +.ms-Icon--caretLeftOutline:before { + content: '\e245'; +} + +.ms-Icon--caretRightOutline:before { + content: '\e246'; +} + +.ms-Icon--mailSync:before { + content: '\e248'; +} + +.ms-Icon--mailError:before { + content: '\e249'; +} + +.ms-Icon--mailPause:before { + content: '\e24a'; +} + +.ms-Icon--peopleSync:before { + content: '\e24b'; +} + +.ms-Icon--peopleError:before { + content: '\e24c'; +} + +.ms-Icon--peoplePause:before { + content: '\e24d'; +} + +.ms-Icon--circleBall:before { + content: '\e24e'; +} + +.ms-Icon--circleBalloons:before { + content: '\e24f'; +} + +.ms-Icon--circleCar:before { + content: '\e250'; +} + +.ms-Icon--circleCat:before { + content: '\e251'; +} + +.ms-Icon--circleCoffee:before { + content: '\e252'; +} + +.ms-Icon--circleDog:before { + content: '\e253'; +} + +.ms-Icon--circleLightning:before { + content: '\e254'; +} + +.ms-Icon--circlePill:before { + content: '\e255'; +} + +.ms-Icon--circlePlane:before { + content: '\e256'; +} + +.ms-Icon--circlePoodle:before { + content: '\e257'; +} + +.ms-Icon--checkPeople:before { + content: '\e259'; +} + +.ms-Icon--documentSearch:before { + content: '\e25a'; +} + +.ms-Icon--sortLines:before { + content: '\e25c'; +} + +.ms-Icon--calendarPublic:before { + content: '\e25d'; +} + +.ms-Icon--contactPublic:before { + content: '\e25e'; +} + +.ms-Icon--classNotebook:before { + content: '\e25f'; +} + +.ms-Icon--triangleUp:before { + content: '\e260'; +} + +.ms-Icon--triangleRight:before { + content: '\e261'; +} + +.ms-Icon--triangleDown:before { + content: '\e262'; +} + +.ms-Icon--triangleLeft:before { + content: '\e263'; +} + +.ms-Icon--triangleEmptyUp:before { + content: '\e264'; +} + +.ms-Icon--triangleEmptyRight:before { + content: '\e265'; +} + +.ms-Icon--triangleEmptyDown:before { + content: '\e266'; +} + +.ms-Icon--triangleEmptyLeft:before { + content: '\e267'; +} + +.ms-Icon--filePDF:before { + content: '\e268'; +} + +.ms-Icon--fileImage:before { + content: '\e26c'; +} + +.ms-Icon--fileDocument:before { + content: '\e26d'; +} + +.ms-Icon--listGroup2:before { + content: '\e26e'; +} + +.ms-Icon--copy:before { + content: '\e26f'; +} + +.ms-Icon--creditCardOutline:before { + content: '\e270'; +} + +.ms-Icon--mailPublic:before { + content: '\e272'; +} + +.ms-Icon--folderPublic:before { + content: '\e273'; +} + +.ms-Icon--teamwork:before { + content: '\e274'; +} + +.ms-Icon--move:before { + content: '\e275'; +} + +.ms-Icon--classroom:before { + content: '\e276'; +} + +.ms-Icon--menu2:before { + content: '\e277'; +} + +.ms-Icon--plus2:before { + content: '\e278'; +} + +.ms-Icon--tag:before { + content: '\e279'; +} + +.ms-Icon--arrowUp2:before { + content: '\e27a'; +} + +.ms-Icon--arrowDown2:before { + content: '\e27b'; +} + +.ms-Icon--circlePlus:before { + content: '\e27c'; +} + +.ms-Icon--circleInfo:before { + content: '\e27d'; +} + +.ms-Icon--section:before { + content: '\e27e'; +} + +.ms-Icon--sections:before { + content: '\e27f'; +} + +.ms-Icon--at:before { + content: '\e282'; +} + +.ms-Icon--arrowUpRight:before { + content: '\e283'; +} + +.ms-Icon--arrowDownRight:before { + content: '\e284'; +} + +.ms-Icon--arrowDownLeft:before { + content: '\e285'; +} + +.ms-Icon--arrowUpLeft:before { + content: '\e286'; +} + +.ms-Icon--bundle:before { + content: '\e287'; +} + +.ms-Icon--pictureEdit:before { + content: '\e288'; +} + +.ms-Icon--protectionCenter:before { + content: '\e289'; +} + +.ms-Icon--alert2:before { + content: '\e28a'; +} + +.ms-Icon--circle { + position: relative; + display: inline-block; + font-size: 1rem; + width: 1em; + height: 1em; + margin: 0 0 0 0.5em; + padding: 0; + text-align: right; + -webkit-font-smoothing: antialiased; +} + +.ms-Icon--circle:before, +.ms-Icon--circle:after { + line-height: 1; + font-size: inherit; +} + +.ms-Icon--circle:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; +} + +.ms-Icon--circle:after { + content: '\e000'; + position: absolute; + top: 0; + right: 0; + -webkit-transform: scale(2); + -ms-transform: scale(2); + transform: scale(2); + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + z-index: 0; +} + +.ms-Icon--circle.ms-Icon--star:before { + top: -2%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--person:before { + top: -2%; + right: -3%; +} + +.ms-Icon--circle.ms-Icon--alert:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--mailOpen:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--people:before { + top: -4%; + right: -7%; +} + +.ms-Icon--circle.ms-Icon--bell:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--scheduling:before { + top: -3%; + right: 6%; +} + +.ms-Icon--circle.ms-Icon--documents:before { + top: -1%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--listBullets:before { + top: -1%; + right: 5%; +} + +.ms-Icon--circle.ms-Icon--panel:before { + right: -2%; +} + +.ms-Icon--circle.ms-Icon--popout:before { + top: -2%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--home:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--favorites:before { + top: -2%; + right: 2%; +} + +.ms-Icon--circle.ms-Icon--phone:before { + top: -2%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--mailSend:before { + right: -10%; +} + +.ms-Icon--circle.ms-Icon--pencil:before { + top: -2%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--flag:before { + right: 3%; +} + +.ms-Icon--circle.ms-Icon--miniatures:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--voicemail:before { + top: 2%; + right: -7%; +} + +.ms-Icon--circle.ms-Icon--onlineAdd:before { + top: -1%; + right: 2%; +} + +.ms-Icon--circle.ms-Icon--pinDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--gear:before { + right: 2%; +} + +.ms-Icon--circle.ms-Icon--check:before { + top: 3%; +} + +.ms-Icon--circle.ms-Icon--ellipsis:before { + top: 2%; + right: -12%; +} + +.ms-Icon--circle.ms-Icon--directions:before { + right: 10%; +} + +.ms-Icon--circle.ms-Icon--microphone:before { + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDown:before { + top: 5%; + right: 2%; +} + +.ms-Icon--circle.ms-Icon--caretLeft:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--caretRight:before { + right: 6%; +} + +.ms-Icon--circle.ms-Icon--caretUpLeft:before { + top: 5%; + right: 5%; +} + +.ms-Icon--circle.ms-Icon--caretUpRight:before { + top: 5%; + right: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownRight:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownLeft:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--note:before { + top: 2%; + right: -3%; +} + +.ms-Icon--circle.ms-Icon--noteReply:before { + top: 6%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--noteForward:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--key:before { + top: 5%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--tile:before { + top: -1%; + right: -18%; +} + +.ms-Icon--circle.ms-Icon--taskRecurring:before { + top: 2%; + right: -1%; +} + +.ms-Icon--circle.ms-Icon--starEmpty:before { + top: -4%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--documentReply:before { + top: -2%; + right: 7%; +} + +.ms-Icon--circle.ms-Icon--documentForward:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--partner:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--reactivate:before { + top: -2%; + right: 6%; +} + +.ms-Icon--circle.ms-Icon--sort:before { + right: -19%; +} + +.ms-Icon--circle.ms-Icon--personAdd:before { + top: -2%; + right: 6%; +} + +.ms-Icon--circle.ms-Icon--chevronDown:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--chevronLeft:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronRight:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--peopleAdd:before { + top: -5%; + right: -12%; +} + +.ms-Icon--circle.ms-Icon--newsfeed:before { + right: -4%; +} + +.ms-Icon--circle.ms-Icon--notebook:before { + right: -4%; +} + +.ms-Icon--circle.ms-Icon--link:before { + top: 2%; + right: -18%; +} + +.ms-Icon--circle.ms-Icon--chevronsDown:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--chevronsLeft:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--chevronsRight:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--personRemove:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--receiptForward:before { + right: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptReply:before { + right: -20%; +} + +.ms-Icon--circle.ms-Icon--receiptCheck:before { + right: -20%; +} + +.ms-Icon--circle.ms-Icon--peopleRemove:before { + top: -3%; + right: -12%; +} + +.ms-Icon--circle.ms-Icon--merge:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--split:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--eventCancel:before { + right: -2%; +} + +.ms-Icon--circle.ms-Icon--today:before { + top: -2%; +} + +.ms-Icon--circle.ms-Icon--oofReply:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--voicemailReply:before { + top: 4%; + right: -25%; +} + +.ms-Icon--circle.ms-Icon--voicemailForward:before { + top: 4%; + right: -20%; +} + +.ms-Icon--circle.ms-Icon--eye:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--post:before { + top: -4%; + right: 4%; +} + +.ms-Icon--circle.ms-Icon--fax:before { + top: -3%; + right: -2%; +} + +.ms-Icon--circle.ms-Icon--lightning:before { + top: 2%; + right: 1%; +} + +.ms-Icon--circle.ms-Icon--filter:before { + top: 7%; +} + +.ms-Icon--circle.ms-Icon--cart:before { + right: 3%; +} + +.ms-Icon--circle.ms-Icon--socialListening:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--mapMarker:before { + top: 2%; +} + +.ms-Icon--circle.ms-Icon--replyAllAlt:before { + right: -16%; +} + +.ms-Icon--circle.ms-Icon--group:before { + right: -33%; +} + +.ms-Icon--circle.ms-Icon--money:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--noteEdit:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--mailEdit:before { + top: 3%; + right: 7%; +} + +.ms-Icon--circle.ms-Icon--pinLeft:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--heart:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--heartEmpty:before { + top: 5%; +} + +.ms-Icon--circle.ms-Icon--cake:before { + top: -5%; +} + +.ms-Icon--circle.ms-Icon--books:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--video:before { + top: -3%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--balloon:before { + top: 4%; + right: -1%; +} + +.ms-Icon--circle.ms-Icon--music:before { + top: -2%; + right: -5%; +} + +.ms-Icon--circle.ms-Icon--stopwatch:before { + top: -3%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--coffee:before { + top: -3%; + right: 3%; +} + +.ms-Icon--circle.ms-Icon--plane:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--dogAlt:before { + right: -15%; +} + +.ms-Icon--circle.ms-Icon--metadata:before { + top: -4%; + right: 4%; +} + +.ms-Icon--circle.ms-Icon--text:before { + top: -4%; + right: 10%; +} + +.ms-Icon--circle.ms-Icon--fieldText:before { + right: -14%; +} + +.ms-Icon--circle.ms-Icon--fieldNumber:before { + right: -14%; +} + +.ms-Icon--circle.ms-Icon--dropdown:before { + right: -14%; +} + +.ms-Icon--circle.ms-Icon--story:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--bold:before { + right: 4%; +} + +.ms-Icon--circle.ms-Icon--underline:before { + top: 4%; +} + +.ms-Icon--circle.ms-Icon--quote:before { + right: -4%; +} + +.ms-Icon--circle.ms-Icon--styleRemove:before { + top: 4%; + right: 5%; +} + +.ms-Icon--circle.ms-Icon--pictureAdd:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--pictureRemove:before { + right: -6%; +} + +.ms-Icon--circle.ms-Icon--mobile:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--hide:before { + top: -4%; +} + +.ms-Icon--circle.ms-Icon--header:before { + right: -9%; +} + +.ms-Icon--circle.ms-Icon--msn:before { + right: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleCheck:before { + right: -7%; + top: -3%; +} + +.ms-Icon--circle.ms-Icon--caretDownOutline:before { + top: 6%; +} + +.ms-Icon--circle.ms-Icon--caretLeftOutline:before { + right: -5%; +} + +.ms-Icon--circle.ms-Icon--caretRightOutline:before { + right: 5%; +} + +.ms-Icon--circle.ms-Icon--sway:before { + right: -3%; +} + +.ms-Icon--circle.ms-Icon--mailSync:before { + right: 8%; + top: 3%; +} + +.ms-Icon--circle.ms-Icon--peopleSync:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--peopleError:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--peoplePause:before { + right: -8%; +} + +.ms-Icon--circle.ms-Icon--documentSearch:before { + right: 8%; +} + +.ms-Icon--circle.ms-Icon--dynamicsMarketing:before { + right: -8%; +} + +.ms-Icon--question, +.ms-Icon--calendar, +.ms-Icon--folder, +.ms-Icon--chat, +.ms-Icon--listBullets, +.ms-Icon--folderMove, +.ms-Icon--mailSend, +.ms-Icon--reply, +.ms-Icon--play, +.ms-Icon--replyAll, +.ms-Icon--refresh, +.ms-Icon--questionReverse, +.ms-Icon--notRecurring, +.ms-Icon--tasks, +.ms-Icon--check, +.ms-Icon--arrowLeft, +.ms-Icon--arrowRight, +.ms-Icon--directions, +.ms-Icon--caretLeft, +.ms-Icon--caretRight, +.ms-Icon--caretUpLeft, +.ms-Icon--caretUpRight, +.ms-Icon--caretDownRight, +.ms-Icon--caretDownLeft, +.ms-Icon--note, +.ms-Icon--noteReply, +.ms-Icon--noteForward, +.ms-Icon--taskRecurring, +.ms-Icon--documentReply, +.ms-Icon--documentForward, +.ms-Icon--reactivate, +.ms-Icon--chevronLeft, +.ms-Icon--chevronRight, +.ms-Icon--notebook, +.ms-Icon--chevronsLeft, +.ms-Icon--chevronsRight, +.ms-Icon--receiptForward, +.ms-Icon--receiptReply, +.ms-Icon--receiptCheck, +.ms-Icon--eventShare, +.ms-Icon--oofReply, +.ms-Icon--voicemailReply, +.ms-Icon--voicemailForward, +.ms-Icon--post, +.ms-Icon--toggle, +.ms-Icon--late, +.ms-Icon--eventRecurring, +.ms-Icon--cart, +.ms-Icon--socialListening, +.ms-Icon--replyAlt, +.ms-Icon--replyAllAlt, +.ms-Icon--graph, +.ms-Icon--pinLeft, +.ms-Icon--chart, +.ms-Icon--page, +.ms-Icon--document, +.ms-Icon--metadata, +.ms-Icon--pointItem, +.ms-Icon--dropdown, +.ms-Icon--checkbox, +.ms-Icon--reload, +.ms-Icon--multiChoice, +.ms-Icon--contactForm, +.ms-Icon--inboxCheck, +.ms-Icon--checkboxCheck, +.ms-Icon--folderSearch, +.ms-Icon--listCheck, +.ms-Icon--listGroup, +.ms-Icon--timeline +.ms-Icon--mailCheck, +.ms-Icon--listCheckbox, +.ms-Icon--sunQuestion, +.ms-Icon--chevronThinLeft, +.ms-Icon--chevronThinRight, +.ms-Icon--chevronThickLeft, +.ms-Icon--chevronThickRight, +.ms-Icon--documentLandscape, +.ms-Icon--peopleCheck, +.ms-Icon--caretLeftOutline, +.ms-Icon--caretRightOutline, +.ms-Icon--mailSync, +.ms-Icon--peopleSync, +.ms-Icon--checkPeople, +.ms-Icon--sortLines, +.ms-Icon--triangleRight:before, +.ms-Icon--triangleLeft:before, +.ms-Icon--contactPublic:before, +.ms-Icon--triangleEmptyRight:before, +.ms-Icon--triangleEmptyLeft:before, +.ms-Icon--fileDocument:before, +.ms-Icon--listGroup2:before, +.ms-Icon--copy:before, +.ms-Icon--sections:before, +.ms-Icon--arrowUpRight:before, +.ms-Icon--arrowDownRight:before, +.ms-Icon--arrowDownLeft:before, +.ms-Icon--arrowUpLeft:before, +.ms-Icon--bundle:before { + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); +} + +.ms-u-slideRightIn10 { + -webkit-animation-name: fadeIn, slideRightIn10; + animation-name: fadeIn, slideRightIn10; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn10 { + from { + -webkit-transform: translate3d(-10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn10 { + from { + -webkit-transform: translate3d(-10px, 0px, 0px); + transform: translate3d(-10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn20 { + -webkit-animation-name: fadeIn, slideRightIn20; + animation-name: fadeIn, slideRightIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn20 { + from { + -webkit-transform: translate3d(-20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn20 { + from { + -webkit-transform: translate3d(-20px, 0px, 0px); + transform: translate3d(-20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn40 { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn40 { + from { + -webkit-transform: translate3d(-40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn40 { + from { + -webkit-transform: translate3d(-40px, 0px, 0px); + transform: translate3d(-40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn10 { + -webkit-animation-name: fadeIn, slideLeftIn10; + animation-name: fadeIn, slideLeftIn10; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftIn10 { + from { + -webkit-transform: translate3d(10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeftIn10 { + from { + -webkit-transform: translate3d(10px, 0px, 0px); + transform: translate3d(10px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn20 { + -webkit-animation-name: fadeIn, slideLeftIn20; + animation-name: fadeIn, slideLeftIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftIn20 { + from { + -webkit-transform: translate3d(20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeftIn20 { + from { + -webkit-transform: translate3d(20px, 0px, 0px); + transform: translate3d(20px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn40 { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftIn40 { + from { + -webkit-transform: translate3d(40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeftIn40 { + from { + -webkit-transform: translate3d(40px, 0px, 0px); + transform: translate3d(40px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightIn400 { + -webkit-animation-name: fadeIn, slideRightIn400; + animation-name: fadeIn, slideRightIn400; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightIn400 { + from { + -webkit-transform: translate3d(-400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideRightIn400 { + from { + -webkit-transform: translate3d(-400px, 0px, 0px); + transform: translate3d(-400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideLeftIn400 { + -webkit-animation-name: fadeIn, slideLeft400; + animation-name: fadeIn, slideLeft400; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeft400 { + from { + -webkit-transform: translate3d(400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideLeft400 { + from { + -webkit-transform: translate3d(400px, 0px, 0px); + transform: translate3d(400px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn20 { + -webkit-animation-name: fadeIn, slideUpIn20; + animation-name: fadeIn, slideUpIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpIn20 { + from { + -webkit-transform: translate3d(0px, 20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUpIn20 { + from { + -webkit-transform: translate3d(0px, 20px, 0px); + transform: translate3d(0px, 20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideUpIn10 { + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpIn10 { + from { + -webkit-transform: translate3d(0px, 10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideUpIn10 { + from { + -webkit-transform: translate3d(0px, 10px, 0px); + transform: translate3d(0px, 10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn20 { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownIn20 { + from { + -webkit-transform: translate3d(0px, -20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDownIn20 { + from { + -webkit-transform: translate3d(0px, -20px, 0px); + transform: translate3d(0px, -20px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideDownIn10 { + -webkit-animation-name: fadeIn, slideDownIn10; + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownIn10 { + from { + -webkit-transform: translate3d(0px, -10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + } +} + +@keyframes slideDownIn10 { + from { + -webkit-transform: translate3d(0px, -10px, 0px); + transform: translate3d(0px, -10px, 0px); + } + + to { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } +} + +.ms-u-slideRightOut40 { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightOut40 { + from { + -webkit-transform: translate3d(0px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(40px, 0px, 0px); + } +} + +@keyframes slideRightOut40 { + from { + -webkit-transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); + } + + to { + -webkit-transform: translate3d(40px, 0px, 0px); + transform: translate3d(40px, 0px, 0px); + } +} + +.ms-u-slideLeftOut40 { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftOut40 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-40px, 0px, 0px); + } +} + +@keyframes slideLeftOut40 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-40px, 0px, 0px); + transform: translate3d(-40px, 0px, 0px); + } +} + +.ms-u-slideRightOut400 { + -webkit-animation-name: fadeOut, slideRightOut400; + animation-name: fadeOut, slideRightOut400; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideRightOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(400px, 0px, 0px); + } +} + +@keyframes slideRightOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(400px, 0px, 0px); + transform: translate3d(400px, 0px, 0px); + } +} + +.ms-u-slideLeftOut400 { + -webkit-animation-name: fadeOut, slideLeftOut400; + animation-name: fadeOut, slideLeftOut400; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideLeftOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-400px, 0px, 0px); + } +} + +@keyframes slideLeftOut400 { + from { + -webkit-transform: translate3d(0, 0px, 0px); + transform: translate3d(0, 0px, 0px); + } + + to { + -webkit-transform: translate3d(-400px, 0px, 0px); + transform: translate3d(-400px, 0px, 0px); + } +} + +.ms-u-slideUpOut20 { + -webkit-animation-name: fadeOut, slideUpOut20; + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -20px, 0px); + } +} + +@keyframes slideUpOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -20px, 0px); + transform: translate3d(0px, -20px, 0px); + } +} + +.ms-u-slideUpOut10 { + -webkit-animation-name: fadeOut, slideUpOut10; + animation-name: fadeOut, slideUpOut10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideUpOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -10px, 0px); + } +} + +@keyframes slideUpOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, -10px, 0px); + transform: translate3d(0px, -10px, 0px); + } +} + +.ms-u-slideDownOut20 { + -webkit-animation-name: fadeOut, slideDownOut20; + animation-name: fadeOut, slideDownOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 20px, 0px); + } +} + +@keyframes slideDownOut20 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 20px, 0px); + transform: translate3d(0px, 20px, 0px); + } +} + +.ms-u-slideDownOut10 { + -webkit-animation-name: fadeOut, slideDownOut10; + animation-name: fadeOut, slideDownOut10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes slideDownOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 10px, 0px); + } +} + +@keyframes slideDownOut10 { + from { + -webkit-transform: translate3d(0px, 0, 0px); + transform: translate3d(0px, 0, 0px); + } + + to { + -webkit-transform: translate3d(0px, 10px, 0px); + transform: translate3d(0px, 10px, 0px); + } +} + +.ms-u-scaleUpIn100 { + -webkit-animation-name: fadeIn, scaleUp100; + animation-name: fadeIn, scaleUp100; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleUp100 { + from { + -webkit-transform: scale3d(0.98, 0.98, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + } +} + +@keyframes scaleUp100 { + from { + -webkit-transform: scale3d(0.98, 0.98, 1); + transform: scale3d(0.98, 0.98, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleDownIn100 { + -webkit-animation-name: fadeIn, scaleDown100; + animation-name: fadeIn, scaleDown100; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleDown100 { + from { + -webkit-transform: scale3d(1.03, 1.03, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + } +} + +@keyframes scaleDown100 { + from { + -webkit-transform: scale3d(1.03, 1.03, 1); + transform: scale3d(1.03, 1.03, 1); + } + + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.ms-u-scaleUpOut103 { + -webkit-animation-name: fadeOut, scaleUp103; + animation-name: fadeOut, scaleUp103; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleUp103 { + from { + -webkit-transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(1.03, 1.03, 1); + } +} + +@keyframes scaleUp103 { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(1.03, 1.03, 1); + transform: scale3d(1.03, 1.03, 1); + } +} + +.ms-u-scaleDownOut98 { + -webkit-animation-name: fadeOut, scaleDown98; + animation-name: fadeOut, scaleDown98; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes scaleDown98 { + from { + -webkit-transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(0.98, 0.98, 1); + } +} + +@keyframes scaleDown98 { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + to { + -webkit-transform: scale3d(0.98, 0.98, 1); + transform: scale3d(0.98, 0.98, 1); + } +} + +.ms-u-fadeIn400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-fadeIn100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeIn200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-u-fadeIn500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.467s; + animation-duration: 0.467s; +} + +@-webkit-keyframes fadeIn { + from { + opacity: 0; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 1; + } +} + +.ms-u-fadeOut400 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-fadeOut100 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-u-fadeOut200 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-u-fadeOut500 { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.467s; + animation-duration: 0.467s; +} + +@-webkit-keyframes fadeOut { + from { + opacity: 1; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 0; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + } + + to { + opacity: 0; + } +} + +.ms-u-rotate90deg { + -webkit-animation-name: rotate90; + animation-name: rotate90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes rotate90 { + from { + -webkit-transform: rotateZ(0deg); + } + + to { + -webkit-transform: rotateZ(90deg); + } +} + +@keyframes rotate90 { + from { + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + } + + to { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); + } +} + +.ms-u-rotateN90deg { + -webkit-animation-name: rotateN90; + animation-name: rotateN90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes rotateN90 { + from { + -webkit-transform: rotateZ(90deg); + } + + to { + -webkit-transform: rotateZ(0deg); + } +} + +@keyframes rotateN90 { + from { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); + } + + to { + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + } +} + +.ms-u-expandCollapse400 { + transition: height 0.367s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse200 { + transition: height 0.167s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-expandCollapse100 { + transition: height 0.1s cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.ms-u-delay100 { + -webkit-animation-delay: 0.167s; + animation-delay: 0.167s; +} + +.ms-u-delay200 { + -webkit-animation-delay: 0.267s; + animation-delay: 0.267s; +} + +.ms-u-slideRightIn10 { + -webkit-animation-name: fadeIn, slideLeft10; + animation-name: fadeIn, slideLeft10; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideRightIn20 { + -webkit-animation-name: fadeIn, slideLeft20; + animation-name: fadeIn, slideLeft20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideRightIn40 { + -webkit-animation-name: fadeIn, slideLeft40; + animation-name: fadeIn, slideLeft40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideLeftIn10 { + -webkit-animation-name: fadeIn, slideRight10; + animation-name: fadeIn, slideRight10; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideLeftIn20 { + -webkit-animation-name: fadeIn, slideRight20; + animation-name: fadeIn, slideRight20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideLeftIn40 { + -webkit-animation-name: fadeIn, slideRight40; + animation-name: fadeIn, slideRight40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideRightIn400 { + -webkit-animation-name: fadeIn, slideLeft400; + animation-name: fadeIn, slideLeft400; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideLeftIn400 { + -webkit-animation-name: fadeIn, slideRight400; + animation-name: fadeIn, slideRight400; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideRightOut40 { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideLeftOut40 { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideRightOut400 { + -webkit-animation-name: fadeOut, slideLeftOut400; + animation-name: fadeOut, slideLeftOut400; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-slideLeftOut400 { + -webkit-animation-name: fadeOut, slideRightOut400; + animation-name: fadeOut, slideRightOut400; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-rotate90deg { + -webkit-animation-name: rotateN90; + animation-name: rotateN90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-u-rotateN90deg { + -webkit-animation-name: rotate90; + animation-name: rotate90; + -webkit-animation-duration: 0.1s; + -moz-animation-duration: 0.1s; + -ms-animation-duration: 0.1s; + -o-animation-duration: 0.1s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@media (max-width: 479px) { + .ms-u-hiddenSm, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 480px) and (max-width: 639px) { + .ms-u-hiddenMd, + .ms-u-hiddenMdUp, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 640px) and (max-width: 1023px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLg, + .ms-u-hiddenLgUp, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1024px) and (max-width: 1365px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXl, + .ms-u-hiddenXlUp, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1366px) and (max-width: 1919px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxl, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +@media (min-width: 1920px) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxxl { + display: none !important; + } +} + +.ms-u-sm12 { + width: 100%; +} + +.ms-u-sm11 { + width: 91.66666666666666%; +} + +.ms-u-sm10 { + width: 83.33333333333334%; +} + +.ms-u-sm9 { + width: 75%; +} + +.ms-u-sm8 { + width: 66.66666666666666%; +} + +.ms-u-sm7 { + width: 58.333333333333336%; +} + +.ms-u-sm6 { + width: 50%; +} + +.ms-u-sm5 { + width: 41.66666666666667%; +} + +.ms-u-sm4 { + width: 33.33333333333333%; +} + +.ms-u-sm3 { + width: 25%; +} + +.ms-u-sm2 { + width: 16.666666666666664%; +} + +.ms-u-sm1 { + width: 8.333333333333332%; +} + +.ms-u-smPull12 { + left: 100%; +} + +.ms-u-smPull11 { + left: 91.66666666666666%; +} + +.ms-u-smPull10 { + left: 83.33333333333334%; +} + +.ms-u-smPull9 { + left: 75%; +} + +.ms-u-smPull8 { + left: 66.66666666666666%; +} + +.ms-u-smPull7 { + left: 58.333333333333336%; +} + +.ms-u-smPull6 { + left: 50%; +} + +.ms-u-smPull5 { + left: 41.66666666666667%; +} + +.ms-u-smPull4 { + left: 33.33333333333333%; +} + +.ms-u-smPull3 { + left: 25%; +} + +.ms-u-smPull2 { + left: 16.666666666666664%; +} + +.ms-u-smPull1 { + left: 8.333333333333332%; +} + +.ms-u-smPull0 { + left: auto; +} + +.ms-u-smPush12 { + right: 100%; +} + +.ms-u-smPush11 { + right: 91.66666666666666%; +} + +.ms-u-smPush10 { + right: 83.33333333333334%; +} + +.ms-u-smPush9 { + right: 75%; +} + +.ms-u-smPush8 { + right: 66.66666666666666%; +} + +.ms-u-smPush7 { + right: 58.333333333333336%; +} + +.ms-u-smPush6 { + right: 50%; +} + +.ms-u-smPush5 { + right: 41.66666666666667%; +} + +.ms-u-smPush4 { + right: 33.33333333333333%; +} + +.ms-u-smPush3 { + right: 25%; +} + +.ms-u-smPush2 { + right: 16.666666666666664%; +} + +.ms-u-smPush1 { + right: 8.333333333333332%; +} + +.ms-u-smPush0 { + right: auto; +} + +.ms-u-smOffset11 { + margin-right: 91.66666666666666%; +} + +.ms-u-smOffset10 { + margin-right: 83.33333333333334%; +} + +.ms-u-smOffset9 { + margin-right: 75%; +} + +.ms-u-smOffset8 { + margin-right: 66.66666666666666%; +} + +.ms-u-smOffset7 { + margin-right: 58.333333333333336%; +} + +.ms-u-smOffset6 { + margin-right: 50%; +} + +.ms-u-smOffset5 { + margin-right: 41.66666666666667%; +} + +.ms-u-smOffset4 { + margin-right: 33.33333333333333%; +} + +.ms-u-smOffset3 { + margin-right: 25%; +} + +.ms-u-smOffset2 { + margin-right: 16.666666666666664%; +} + +.ms-u-smOffset1 { + margin-right: 8.333333333333332%; +} + +.ms-u-smOffset0 { + margin-right: 0; +} + +@media (min-width: 480px) { + .ms-u-md12 { + width: 100%; + } + + .ms-u-md11 { + width: 91.66666666666666%; + } + + .ms-u-md10 { + width: 83.33333333333334%; + } + + .ms-u-md9 { + width: 75%; + } + + .ms-u-md8 { + width: 66.66666666666666%; + } + + .ms-u-md7 { + width: 58.333333333333336%; + } + + .ms-u-md6 { + width: 50%; + } + + .ms-u-md5 { + width: 41.66666666666667%; + } + + .ms-u-md4 { + width: 33.33333333333333%; + } + + .ms-u-md3 { + width: 25%; + } + + .ms-u-md2 { + width: 16.666666666666664%; + } + + .ms-u-md1 { + width: 8.333333333333332%; + } + + .ms-u-mdPull12 { + left: 100%; + } + + .ms-u-mdPull11 { + left: 91.66666666666666%; + } + + .ms-u-mdPull10 { + left: 83.33333333333334%; + } + + .ms-u-mdPull9 { + left: 75%; + } + + .ms-u-mdPull8 { + left: 66.66666666666666%; + } + + .ms-u-mdPull7 { + left: 58.333333333333336%; + } + + .ms-u-mdPull6 { + left: 50%; + } + + .ms-u-mdPull5 { + left: 41.66666666666667%; + } + + .ms-u-mdPull4 { + left: 33.33333333333333%; + } + + .ms-u-mdPull3 { + left: 25%; + } + + .ms-u-mdPull2 { + left: 16.666666666666664%; + } + + .ms-u-mdPull1 { + left: 8.333333333333332%; + } + + .ms-u-mdPull0 { + left: auto; + } + + .ms-u-mdPush12 { + right: 100%; + } + + .ms-u-mdPush11 { + right: 91.66666666666666%; + } + + .ms-u-mdPush10 { + right: 83.33333333333334%; + } + + .ms-u-mdPush9 { + right: 75%; + } + + .ms-u-mdPush8 { + right: 66.66666666666666%; + } + + .ms-u-mdPush7 { + right: 58.333333333333336%; + } + + .ms-u-mdPush6 { + right: 50%; + } + + .ms-u-mdPush5 { + right: 41.66666666666667%; + } + + .ms-u-mdPush4 { + right: 33.33333333333333%; + } + + .ms-u-mdPush3 { + right: 25%; + } + + .ms-u-mdPush2 { + right: 16.666666666666664%; + } + + .ms-u-mdPush1 { + right: 8.333333333333332%; + } + + .ms-u-mdPush0 { + right: auto; + } + + .ms-u-mdOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-mdOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-mdOffset9 { + margin-right: 75%; + } + + .ms-u-mdOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-mdOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-mdOffset6 { + margin-right: 50%; + } + + .ms-u-mdOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-mdOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-mdOffset3 { + margin-right: 25%; + } + + .ms-u-mdOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-mdOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-mdOffset0 { + margin-right: 0; + } +} + +@media (min-width: 640px) { + .ms-u-lg12 { + width: 100%; + } + + .ms-u-lg11 { + width: 91.66666666666666%; + } + + .ms-u-lg10 { + width: 83.33333333333334%; + } + + .ms-u-lg9 { + width: 75%; + } + + .ms-u-lg8 { + width: 66.66666666666666%; + } + + .ms-u-lg7 { + width: 58.333333333333336%; + } + + .ms-u-lg6 { + width: 50%; + } + + .ms-u-lg5 { + width: 41.66666666666667%; + } + + .ms-u-lg4 { + width: 33.33333333333333%; + } + + .ms-u-lg3 { + width: 25%; + } + + .ms-u-lg2 { + width: 16.666666666666664%; + } + + .ms-u-lg1 { + width: 8.333333333333332%; + } + + .ms-u-lgPull12 { + left: 100%; + } + + .ms-u-lgPull11 { + left: 91.66666666666666%; + } + + .ms-u-lgPull10 { + left: 83.33333333333334%; + } + + .ms-u-lgPull9 { + left: 75%; + } + + .ms-u-lgPull8 { + left: 66.66666666666666%; + } + + .ms-u-lgPull7 { + left: 58.333333333333336%; + } + + .ms-u-lgPull6 { + left: 50%; + } + + .ms-u-lgPull5 { + left: 41.66666666666667%; + } + + .ms-u-lgPull4 { + left: 33.33333333333333%; + } + + .ms-u-lgPull3 { + left: 25%; + } + + .ms-u-lgPull2 { + left: 16.666666666666664%; + } + + .ms-u-lgPull1 { + left: 8.333333333333332%; + } + + .ms-u-lgPull0 { + left: auto; + } + + .ms-u-lgPush12 { + right: 100%; + } + + .ms-u-lgPush11 { + right: 91.66666666666666%; + } + + .ms-u-lgPush10 { + right: 83.33333333333334%; + } + + .ms-u-lgPush9 { + right: 75%; + } + + .ms-u-lgPush8 { + right: 66.66666666666666%; + } + + .ms-u-lgPush7 { + right: 58.333333333333336%; + } + + .ms-u-lgPush6 { + right: 50%; + } + + .ms-u-lgPush5 { + right: 41.66666666666667%; + } + + .ms-u-lgPush4 { + right: 33.33333333333333%; + } + + .ms-u-lgPush3 { + right: 25%; + } + + .ms-u-lgPush2 { + right: 16.666666666666664%; + } + + .ms-u-lgPush1 { + right: 8.333333333333332%; + } + + .ms-u-lgPush0 { + right: auto; + } + + .ms-u-lgOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-lgOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-lgOffset9 { + margin-right: 75%; + } + + .ms-u-lgOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-lgOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-lgOffset6 { + margin-right: 50%; + } + + .ms-u-lgOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-lgOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-lgOffset3 { + margin-right: 25%; + } + + .ms-u-lgOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-lgOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-lgOffset0 { + margin-right: 0; + } +} + +@media (min-width: 1024px) { + .ms-u-xl12 { + width: 100%; + } + + .ms-u-xl11 { + width: 91.66666666666666%; + } + + .ms-u-xl10 { + width: 83.33333333333334%; + } + + .ms-u-xl9 { + width: 75%; + } + + .ms-u-xl8 { + width: 66.66666666666666%; + } + + .ms-u-xl7 { + width: 58.333333333333336%; + } + + .ms-u-xl6 { + width: 50%; + } + + .ms-u-xl5 { + width: 41.66666666666667%; + } + + .ms-u-xl4 { + width: 33.33333333333333%; + } + + .ms-u-xl3 { + width: 25%; + } + + .ms-u-xl2 { + width: 16.666666666666664%; + } + + .ms-u-xl1 { + width: 8.333333333333332%; + } + + .ms-u-xlPull12 { + left: 100%; + } + + .ms-u-xlPull11 { + left: 91.66666666666666%; + } + + .ms-u-xlPull10 { + left: 83.33333333333334%; + } + + .ms-u-xlPull9 { + left: 75%; + } + + .ms-u-xlPull8 { + left: 66.66666666666666%; + } + + .ms-u-xlPull7 { + left: 58.333333333333336%; + } + + .ms-u-xlPull6 { + left: 50%; + } + + .ms-u-xlPull5 { + left: 41.66666666666667%; + } + + .ms-u-xlPull4 { + left: 33.33333333333333%; + } + + .ms-u-xlPull3 { + left: 25%; + } + + .ms-u-xlPull2 { + left: 16.666666666666664%; + } + + .ms-u-xlPull1 { + left: 8.333333333333332%; + } + + .ms-u-xlPull0 { + left: auto; + } + + .ms-u-xlPush12 { + right: 100%; + } + + .ms-u-xlPush11 { + right: 91.66666666666666%; + } + + .ms-u-xlPush10 { + right: 83.33333333333334%; + } + + .ms-u-xlPush9 { + right: 75%; + } + + .ms-u-xlPush8 { + right: 66.66666666666666%; + } + + .ms-u-xlPush7 { + right: 58.333333333333336%; + } + + .ms-u-xlPush6 { + right: 50%; + } + + .ms-u-xlPush5 { + right: 41.66666666666667%; + } + + .ms-u-xlPush4 { + right: 33.33333333333333%; + } + + .ms-u-xlPush3 { + right: 25%; + } + + .ms-u-xlPush2 { + right: 16.666666666666664%; + } + + .ms-u-xlPush1 { + right: 8.333333333333332%; + } + + .ms-u-xlPush0 { + right: auto; + } + + .ms-u-xlOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-xlOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-xlOffset9 { + margin-right: 75%; + } + + .ms-u-xlOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-xlOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-xlOffset6 { + margin-right: 50%; + } + + .ms-u-xlOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-xlOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-xlOffset3 { + margin-right: 25%; + } + + .ms-u-xlOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-xlOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-xlOffset0 { + margin-right: 0; + } +} + +@media (min-width: 1366px) { + .ms-u-xxl12 { + width: 100%; + } + + .ms-u-xxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxl9 { + width: 75%; + } + + .ms-u-xxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxl6 { + width: 50%; + } + + .ms-u-xxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxl3 { + width: 25%; + } + + .ms-u-xxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxlPull12 { + left: 100%; + } + + .ms-u-xxlPull11 { + left: 91.66666666666666%; + } + + .ms-u-xxlPull10 { + left: 83.33333333333334%; + } + + .ms-u-xxlPull9 { + left: 75%; + } + + .ms-u-xxlPull8 { + left: 66.66666666666666%; + } + + .ms-u-xxlPull7 { + left: 58.333333333333336%; + } + + .ms-u-xxlPull6 { + left: 50%; + } + + .ms-u-xxlPull5 { + left: 41.66666666666667%; + } + + .ms-u-xxlPull4 { + left: 33.33333333333333%; + } + + .ms-u-xxlPull3 { + left: 25%; + } + + .ms-u-xxlPull2 { + left: 16.666666666666664%; + } + + .ms-u-xxlPull1 { + left: 8.333333333333332%; + } + + .ms-u-xxlPull0 { + left: auto; + } + + .ms-u-xxlPush12 { + right: 100%; + } + + .ms-u-xxlPush11 { + right: 91.66666666666666%; + } + + .ms-u-xxlPush10 { + right: 83.33333333333334%; + } + + .ms-u-xxlPush9 { + right: 75%; + } + + .ms-u-xxlPush8 { + right: 66.66666666666666%; + } + + .ms-u-xxlPush7 { + right: 58.333333333333336%; + } + + .ms-u-xxlPush6 { + right: 50%; + } + + .ms-u-xxlPush5 { + right: 41.66666666666667%; + } + + .ms-u-xxlPush4 { + right: 33.33333333333333%; + } + + .ms-u-xxlPush3 { + right: 25%; + } + + .ms-u-xxlPush2 { + right: 16.666666666666664%; + } + + .ms-u-xxlPush1 { + right: 8.333333333333332%; + } + + .ms-u-xxlPush0 { + right: auto; + } + + .ms-u-xxlOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-xxlOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-xxlOffset9 { + margin-right: 75%; + } + + .ms-u-xxlOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-xxlOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-xxlOffset6 { + margin-right: 50%; + } + + .ms-u-xxlOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-xxlOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-xxlOffset3 { + margin-right: 25%; + } + + .ms-u-xxlOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-xxlOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-xxlOffset0 { + margin-right: 0; + } +} + +@media (min-width: 1920px) { + .ms-u-xxxl12 { + width: 100%; + } + + .ms-u-xxxl11 { + width: 91.66666666666666%; + } + + .ms-u-xxxl10 { + width: 83.33333333333334%; + } + + .ms-u-xxxl9 { + width: 75%; + } + + .ms-u-xxxl8 { + width: 66.66666666666666%; + } + + .ms-u-xxxl7 { + width: 58.333333333333336%; + } + + .ms-u-xxxl6 { + width: 50%; + } + + .ms-u-xxxl5 { + width: 41.66666666666667%; + } + + .ms-u-xxxl4 { + width: 33.33333333333333%; + } + + .ms-u-xxxl3 { + width: 25%; + } + + .ms-u-xxxl2 { + width: 16.666666666666664%; + } + + .ms-u-xxxl1 { + width: 8.333333333333332%; + } + + .ms-u-xxxlPull12 { + left: 100%; + } + + .ms-u-xxxlPull11 { + left: 91.66666666666666%; + } + + .ms-u-xxxlPull10 { + left: 83.33333333333334%; + } + + .ms-u-xxxlPull9 { + left: 75%; + } + + .ms-u-xxxlPull8 { + left: 66.66666666666666%; + } + + .ms-u-xxxlPull7 { + left: 58.333333333333336%; + } + + .ms-u-xxxlPull6 { + left: 50%; + } + + .ms-u-xxxlPull5 { + left: 41.66666666666667%; + } + + .ms-u-xxxlPull4 { + left: 33.33333333333333%; + } + + .ms-u-xxxlPull3 { + left: 25%; + } + + .ms-u-xxxlPull2 { + left: 16.666666666666664%; + } + + .ms-u-xxxlPull1 { + left: 8.333333333333332%; + } + + .ms-u-xxxlPull0 { + left: auto; + } + + .ms-u-xxxlPush12 { + right: 100%; + } + + .ms-u-xxxlPush11 { + right: 91.66666666666666%; + } + + .ms-u-xxxlPush10 { + right: 83.33333333333334%; + } + + .ms-u-xxxlPush9 { + right: 75%; + } + + .ms-u-xxxlPush8 { + right: 66.66666666666666%; + } + + .ms-u-xxxlPush7 { + right: 58.333333333333336%; + } + + .ms-u-xxxlPush6 { + right: 50%; + } + + .ms-u-xxxlPush5 { + right: 41.66666666666667%; + } + + .ms-u-xxxlPush4 { + right: 33.33333333333333%; + } + + .ms-u-xxxlPush3 { + right: 25%; + } + + .ms-u-xxxlPush2 { + right: 16.666666666666664%; + } + + .ms-u-xxxlPush1 { + right: 8.333333333333332%; + } + + .ms-u-xxxlPush0 { + right: auto; + } + + .ms-u-xxxlOffset11 { + margin-right: 91.66666666666666%; + } + + .ms-u-xxxlOffset10 { + margin-right: 83.33333333333334%; + } + + .ms-u-xxxlOffset9 { + margin-right: 75%; + } + + .ms-u-xxxlOffset8 { + margin-right: 66.66666666666666%; + } + + .ms-u-xxxlOffset7 { + margin-right: 58.333333333333336%; + } + + .ms-u-xxxlOffset6 { + margin-right: 50%; + } + + .ms-u-xxxlOffset5 { + margin-right: 41.66666666666667%; + } + + .ms-u-xxxlOffset4 { + margin-right: 33.33333333333333%; + } + + .ms-u-xxxlOffset3 { + margin-right: 25%; + } + + .ms-u-xxxlOffset2 { + margin-right: 16.666666666666664%; + } + + .ms-u-xxxlOffset1 { + margin-right: 8.333333333333332%; + } + + .ms-u-xxxlOffset0 { + margin-right: 0; + } +} + +.ms-Grid { + box-sizing: border-box; + *zoom: 1; + padding: 0 8px; +} + +.ms-Grid:before, +.ms-Grid:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-Grid:after { + clear: both; +} + +.ms-Grid-row { + margin: 0 -8px; + box-sizing: border-box; + *zoom: 1; +} + +.ms-Grid-row:before, +.ms-Grid-row:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-Grid-row:after { + clear: both; +} + +.ms-Grid-col { + position: relative; + min-height: 1px; + padding-right: 8px; + padding-left: 8px; + box-sizing: border-box; + float: right; +} + +.ms-Grid-col .ms-Grid { + padding: 0; +} diff --git a/dist/css/fabric.rtl.min.css b/dist/css/fabric.rtl.min.css new file mode 100644 index 000000000..48b4bcabd --- /dev/null +++ b/dist/css/fabric.rtl.min.css @@ -0,0 +1,6 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +.ms-u-borderBox,.ms-u-borderBox:after,.ms-u-borderBox:before{box-sizing:border-box}.ms-u-clearfix{*zoom:1}.ms-u-clearfix:after,.ms-u-clearfix:before{display:table;content:'';line-height:0}.ms-u-clearfix:after{clear:both}.ms-u-normalize{box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d7}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#212121}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#333}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#666}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#767676}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a6a6a6}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c8c8}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#eaeaea}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f4f4f4}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#f8f8f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-yellow{background-color:#ffb900}.ms-bgColor-yellowLight{background-color:#fff100}.ms-bgColor-orange{background-color:#d83b01}.ms-bgColor-orangeLight{background-color:#ea4300}.ms-bgColor-orangeLighter{background-color:#ff8c00}.ms-bgColor-redDark{background-color:#a80000}.ms-bgColor-red{background-color:#e81123}.ms-bgColor-magentaDark{background-color:#5c005c}.ms-bgColor-magenta{background-color:#b4009e}.ms-bgColor-magentaLight{background-color:#e3008c}.ms-bgColor-purpleDark{background-color:#32145a}.ms-bgColor-purple{background-color:#5c2d91}.ms-bgColor-purpleLight{background-color:#b4a0ff}.ms-bgColor-blueDark{background-color:#002050}.ms-bgColor-blueMid{background-color:#00188f}.ms-bgColor-blue{background-color:#0078d7}.ms-bgColor-blueLight{background-color:#00bcf2}.ms-bgColor-tealDark{background-color:#004b50}.ms-bgColor-teal{background-color:#008272}.ms-bgColor-tealLight{background-color:#00b294}.ms-bgColor-greenDark{background-color:#004b1c}.ms-bgColor-green{background-color:#107c10}.ms-bgColor-greenLight{background-color:#bad80a}.ms-bgColor-info{background-color:#f4f4f4}.ms-bgColor-success{background-color:#dff6dd}.ms-bgColor-alert{background-color:#f4f4f4}.ms-bgColor-error{background-color:#fde7e9}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d7}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#212121}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#333}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#666}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#767676}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a6a6a6}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c8c8}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#eaeaea}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f4f4f4}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#f8f8f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-yellow{border-color:#ffb900}.ms-borderColor-yellowLight{border-color:#fff100}.ms-borderColor-orange{border-color:#d83b01}.ms-borderColor-orangeLight{border-color:#ea4300}.ms-borderColor-orangeLighter{border-color:#ff8c00}.ms-borderColor-redDark{border-color:#a80000}.ms-borderColor-red{border-color:#e81123}.ms-borderColor-magentaDark{border-color:#5c005c}.ms-borderColor-magenta{border-color:#b4009e}.ms-borderColor-magentaLight{border-color:#e3008c}.ms-borderColor-purpleDark{border-color:#32145a}.ms-borderColor-purple{border-color:#5c2d91}.ms-borderColor-purpleLight{border-color:#b4a0ff}.ms-borderColor-blueDark{border-color:#002050}.ms-borderColor-blueMid{border-color:#00188f}.ms-borderColor-blue{border-color:#0078d7}.ms-borderColor-blueLight{border-color:#00bcf2}.ms-borderColor-tealDark{border-color:#004b50}.ms-borderColor-teal{border-color:#008272}.ms-borderColor-tealLight{border-color:#00b294}.ms-borderColor-greenDark{border-color:#004b1c}.ms-borderColor-green{border-color:#107c10}.ms-borderColor-greenLight{border-color:#bad80a}.ms-borderColor-info,.ms-borderColor-success{border-color:#107c10}.ms-borderColor-alert{border-color:#d83b01}.ms-borderColor-error{border-color:#a80000}.ms-borderColorTop-themePrimary,.ms-borderColorTop-themePrimary--hover:hover{border-top-color:#0078d7}@font-face{font-family:Leelawadee UI Bold;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI Semilight;src:url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight) format('svg');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Arabic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Arabic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Arabic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Arabic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Arabic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Cyrillic;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Cyrillic;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Cyrillic;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Cyrillic;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Cyrillic/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light EastEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular EastEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold EastEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight EastEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-EastEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Greek;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Greek;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Greek;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Greek;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Greek/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Hebrew;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Hebrew;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Hebrew;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Hebrew;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Hebrew/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light Vietnamese;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular Vietnamese;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold Vietnamese;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight Vietnamese;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-Vietnamese/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Light WestEuropean;src:local('Segoe UI Light'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Light.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Regular WestEuropean;src:local('Segoe UI'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semibold WestEuropean;src:local('Segoe UI Semibold'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semibold.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:Segoe UI Semilight WestEuropean;src:local('Segoe UI Semilight'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff2) format('woff2'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/SegoeUI-WestEuropean/SegoeUI-Semilight.ttf) format('truetype');font-weight:400;font-style:normal}.ms-font-su{font-size:42px}.ms-font-su,.ms-font-xxl{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-xxl{font-size:28px}.ms-font-xl{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-font-l,.ms-font-xl{color:#333;font-weight:400}.ms-font-l{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-font-m-plus{font-size:15px}.ms-font-m,.ms-font-m-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-m{font-size:14px}.ms-font-s-plus{font-size:13px}.ms-font-s,.ms-font-s-plus{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-font-s{font-size:12px}.ms-font-xs{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px}.ms-font-mi,.ms-font-xs{color:#333;font-weight:400}.ms-font-mi{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:10px}.ms-fontWeight-light,.ms-fontWeight-light--hover:hover{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semilight,.ms-fontWeight-semilight--hover:hover{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-regular,.ms-fontWeight-regular--hover:hover{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontWeight-semibold,.ms-fontWeight-semibold--hover:hover{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d7}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#212121}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#333}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#666}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#767676}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a6a6a6}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c8c8}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#eaeaea}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f4f4f4}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#f8f8f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d7}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-fontColor-info,.ms-fontColor-info--hover:hover,.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}[lang=ja-JP] .ms-font-l,[lang=ja-JP] .ms-font-m,[lang=ja-JP] .ms-font-m-plus,[lang=ja-JP] .ms-font-mi,[lang=ja-JP] .ms-font-s,[lang=ja-JP] .ms-font-s-plus,[lang=ja-JP] .ms-font-su,[lang=ja-JP] .ms-font-xl,[lang=ja-JP] .ms-font-xs,[lang=ja-JP] .ms-font-xxl,[lang=ja-JP] .ms-fontWeight-light,[lang=ja-JP] .ms-fontWeight-light-hover:hover,[lang=ja-JP] .ms-fontWeight-regular,[lang=ja-JP] .ms-fontWeight-regular-hover:hover,[lang=ja-JP] .ms-fontWeight-semibold,[lang=ja-JP] .ms-fontWeight-semibold-hover:hover,[lang=ja-JP] .ms-fontWeight-semilight,[lang=ja-JP] .ms-fontWeight-semilight-hover:hover{font-family:Yu Gothic,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,Tahoma,Arial,sans-serif}[lang=ko-KR] .ms-font-l,[lang=ko-KR] .ms-font-m,[lang=ko-KR] .ms-font-m-plus,[lang=ko-KR] .ms-font-mi,[lang=ko-KR] .ms-font-s,[lang=ko-KR] .ms-font-s-plus,[lang=ko-KR] .ms-font-su,[lang=ko-KR] .ms-font-xl,[lang=ko-KR] .ms-font-xs,[lang=ko-KR] .ms-font-xxl,[lang=ko-KR] .ms-fontWeight-light,[lang=ko-KR] .ms-fontWeight-light-hover:hover,[lang=ko-KR] .ms-fontWeight-regular,[lang=ko-KR] .ms-fontWeight-regular-hover:hover,[lang=ko-KR] .ms-fontWeight-semibold,[lang=ko-KR] .ms-fontWeight-semibold-hover:hover,[lang=ko-KR] .ms-fontWeight-semilight,[lang=ko-KR] .ms-fontWeight-semilight-hover:hover{font-family:Malgun Gothic,Gulim,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHS] .ms-font-l,[lang=ch-ZHS] .ms-font-m,[lang=ch-ZHS] .ms-font-m-plus,[lang=ch-ZHS] .ms-font-mi,[lang=ch-ZHS] .ms-font-s,[lang=ch-ZHS] .ms-font-s-plus,[lang=ch-ZHS] .ms-font-su,[lang=ch-ZHS] .ms-font-xl,[lang=ch-ZHS] .ms-font-xs,[lang=ch-ZHS] .ms-font-xxl,[lang=ch-ZHS] .ms-fontWeight-light,[lang=ch-ZHS] .ms-fontWeight-light-hover:hover,[lang=ch-ZHS] .ms-fontWeight-regular,[lang=ch-ZHS] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semibold,[lang=ch-ZHS] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHS] .ms-fontWeight-semilight,[lang=ch-ZHS] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Yahei,Verdana,Simsun,Segoe UI,Tahoma,Arial,sans-serif}[lang=ch-ZHT] .ms-font-l,[lang=ch-ZHT] .ms-font-m,[lang=ch-ZHT] .ms-font-m-plus,[lang=ch-ZHT] .ms-font-mi,[lang=ch-ZHT] .ms-font-s,[lang=ch-ZHT] .ms-font-s-plus,[lang=ch-ZHT] .ms-font-su,[lang=ch-ZHT] .ms-font-xl,[lang=ch-ZHT] .ms-font-xs,[lang=ch-ZHT] .ms-font-xxl,[lang=ch-ZHT] .ms-fontWeight-light,[lang=ch-ZHT] .ms-fontWeight-light-hover:hover,[lang=ch-ZHT] .ms-fontWeight-regular,[lang=ch-ZHT] .ms-fontWeight-regular-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semibold,[lang=ch-ZHT] .ms-fontWeight-semibold-hover:hover,[lang=ch-ZHT] .ms-fontWeight-semilight,[lang=ch-ZHT] .ms-fontWeight-semilight-hover:hover{font-family:Microsoft Jhenghei,Pmingliu,Segoe UI,Tahoma,Arial,sans-serif}[lang=hi-IN] .ms-font-l,[lang=hi-IN] .ms-font-m,[lang=hi-IN] .ms-font-m-plus,[lang=hi-IN] .ms-font-mi,[lang=hi-IN] .ms-font-s,[lang=hi-IN] .ms-font-s-plus,[lang=hi-IN] .ms-font-su,[lang=hi-IN] .ms-font-xl,[lang=hi-IN] .ms-font-xs,[lang=hi-IN] .ms-font-xxl,[lang=hi-IN] .ms-fontWeight-light,[lang=hi-IN] .ms-fontWeight-light-hover:hover,[lang=hi-IN] .ms-fontWeight-regular,[lang=hi-IN] .ms-fontWeight-regular-hover:hover,[lang=hi-IN] .ms-fontWeight-semibold,[lang=hi-IN] .ms-fontWeight-semibold-hover:hover,[lang=hi-IN] .ms-fontWeight-semilight,[lang=hi-IN] .ms-fontWeight-semilight-hover:hover{font-family:Nirmala UI,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-l,[lang=th-TH] .ms-font-su,[lang=th-TH] .ms-font-xl,[lang=th-TH] .ms-font-xxl,[lang=th-TH] .ms-fontWeight-light,[lang=th-TH] .ms-fontWeight-light-hover:hover,[lang=th-TH] .ms-fontWeight-semilight,[lang=th-TH] .ms-fontWeight-semilight-hover:hover{font-family:Leelawadee UI Semilight,Kmer UI,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-fontWeight-regular,[lang=th-TH] .ms-fontweight-regular-hover:hover{font-family:Leelawadee UI Regular,Kmer UI,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=th-TH] .ms-font-mi,[lang=th-TH] .ms-fontWeight-semibold,[lang=th-TH] .ms-fontWeight-semibold-hover:hover{font-family:Leelawadee UI Bold,Kmer UI,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-xl,[lang=ar] .ms-font-xxl,[lang=ar] .ms-fontWeight-light,[lang=ar] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Arabic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-l,[lang=ar] .ms-font-su,[lang=ar] .ms-fontWeight-semilight,[lang=ar] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Arabic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-fontWeight-regular,[lang=ar] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Arabic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ar] .ms-font-mi,[lang=ar] .ms-fontWeight-semibold,[lang=ar] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Arabic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-xl,[lang=bg-BG] .ms-font-xxl,[lang=bg-BG] .ms-fontWeight-light,[lang=bg-BG] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-l,[lang=bg-BG] .ms-font-su,[lang=bg-BG] .ms-fontWeight-semilight,[lang=bg-BG] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-fontWeight-regular,[lang=bg-BG] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=bg-BG] .ms-font-mi,[lang=bg-BG] .ms-fontWeight-semibold,[lang=bg-BG] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-xl,[lang=ru-RU] .ms-font-xxl,[lang=ru-RU] .ms-fontWeight-light,[lang=ru-RU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-l,[lang=ru-RU] .ms-font-su,[lang=ru-RU] .ms-fontWeight-semilight,[lang=ru-RU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-fontWeight-regular,[lang=ru-RU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=ru-RU] .ms-font-mi,[lang=ru-RU] .ms-fontWeight-semibold,[lang=ru-RU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-xl,[lang=uk-UA] .ms-font-xxl,[lang=uk-UA] .ms-fontWeight-light,[lang=uk-UA] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Cyrillic,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-l,[lang=uk-UA] .ms-font-su,[lang=uk-UA] .ms-fontWeight-semilight,[lang=uk-UA] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Cyrillic,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-fontWeight-regular,[lang=uk-UA] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Cyrillic,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=uk-UA] .ms-font-mi,[lang=uk-UA] .ms-fontWeight-semibold,[lang=uk-UA] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Cyrillic,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-xl,[lang=cs-CZ] .ms-font-xxl,[lang=cs-CZ] .ms-fontWeight-light,[lang=cs-CZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-l,[lang=cs-CZ] .ms-font-su,[lang=cs-CZ] .ms-fontWeight-semilight,[lang=cs-CZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-fontWeight-regular,[lang=cs-CZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=cs-CZ] .ms-font-mi,[lang=cs-CZ] .ms-fontWeight-semibold,[lang=cs-CZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-xl,[lang=et-EE] .ms-font-xxl,[lang=et-EE] .ms-fontWeight-light,[lang=et-EE] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-l,[lang=et-EE] .ms-font-su,[lang=et-EE] .ms-fontWeight-semilight,[lang=et-EE] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-fontWeight-regular,[lang=et-EE] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=et-EE] .ms-font-mi,[lang=et-EE] .ms-fontWeight-semibold,[lang=et-EE] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-xl,[lang=hr-HR] .ms-font-xxl,[lang=hr-HR] .ms-fontWeight-light,[lang=hr-HR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-l,[lang=hr-HR] .ms-font-su,[lang=hr-HR] .ms-fontWeight-semilight,[lang=hr-HR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-fontWeight-regular,[lang=hr-HR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hr-HR] .ms-font-mi,[lang=hr-HR] .ms-fontWeight-semibold,[lang=hr-HR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-xl,[lang=hu-HU] .ms-font-xxl,[lang=hu-HU] .ms-fontWeight-light,[lang=hu-HU] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-l,[lang=hu-HU] .ms-font-su,[lang=hu-HU] .ms-fontWeight-semilight,[lang=hu-HU] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-fontWeight-regular,[lang=hu-HU] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=hu-HU] .ms-font-mi,[lang=hu-HU] .ms-fontWeight-semibold,[lang=hu-HU] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-xl,[lang=lt-LT] .ms-font-xxl,[lang=lt-LT] .ms-fontWeight-light,[lang=lt-LT] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-l,[lang=lt-LT] .ms-font-su,[lang=lt-LT] .ms-fontWeight-semilight,[lang=lt-LT] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-fontWeight-regular,[lang=lt-LT] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-LT] .ms-font-mi,[lang=lt-LT] .ms-fontWeight-semibold,[lang=lt-LT] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-xl,[lang=lv-LV] .ms-font-xxl,[lang=lv-LV] .ms-fontWeight-light,[lang=lv-LV] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-l,[lang=lv-LV] .ms-font-su,[lang=lv-LV] .ms-fontWeight-semilight,[lang=lv-LV] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-fontWeight-regular,[lang=lv-LV] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lv-LV] .ms-font-mi,[lang=lv-LV] .ms-fontWeight-semibold,[lang=lv-LV] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-xl,[lang=pl-PL] .ms-font-xxl,[lang=pl-PL] .ms-fontWeight-light,[lang=pl-PL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-l,[lang=pl-PL] .ms-font-su,[lang=pl-PL] .ms-fontWeight-semilight,[lang=pl-PL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-fontWeight-regular,[lang=pl-PL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=pl-PL] .ms-font-mi,[lang=pl-PL] .ms-fontWeight-semibold,[lang=pl-PL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-xl,[lang=lt-sr-SP] .ms-font-xxl,[lang=lt-sr-SP] .ms-fontWeight-light,[lang=lt-sr-SP] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-l,[lang=lt-sr-SP] .ms-font-su,[lang=lt-sr-SP] .ms-fontWeight-semilight,[lang=lt-sr-SP] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-fontWeight-regular,[lang=lt-sr-SP] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=lt-sr-SP] .ms-font-mi,[lang=lt-sr-SP] .ms-fontWeight-semibold,[lang=lt-sr-SP] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-xl,[lang=tr-TR] .ms-font-xxl,[lang=tr-TR] .ms-fontWeight-light,[lang=tr-TR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-l,[lang=tr-TR] .ms-font-su,[lang=tr-TR] .ms-fontWeight-semilight,[lang=tr-TR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-fontWeight-regular,[lang=tr-TR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=tr-TR] .ms-font-mi,[lang=tr-TR] .ms-fontWeight-semibold,[lang=tr-TR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-xl,[lang=sk-SK] .ms-font-xxl,[lang=sk-SK] .ms-fontWeight-light,[lang=sk-SK] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-l,[lang=sk-SK] .ms-font-su,[lang=sk-SK] .ms-fontWeight-semilight,[lang=sk-SK] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-fontWeight-regular,[lang=sk-SK] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=sk-SK] .ms-font-mi,[lang=sk-SK] .ms-fontWeight-semibold,[lang=sk-SK] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-xl,[lang=kk-KZ] .ms-font-xxl,[lang=kk-KZ] .ms-fontWeight-light,[lang=kk-KZ] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light EastEuropean,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-l,[lang=kk-KZ] .ms-font-su,[lang=kk-KZ] .ms-fontWeight-semilight,[lang=kk-KZ] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight EastEuropean,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-fontWeight-regular,[lang=kk-KZ] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular EastEuropean,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=kk-KZ] .ms-font-mi,[lang=kk-KZ] .ms-fontWeight-semibold,[lang=kk-KZ] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold EastEuropean,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-xl,[lang=el-GR] .ms-font-xxl,[lang=el-GR] .ms-fontWeight-light,[lang=el-GR] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Greek,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-l,[lang=el-GR] .ms-font-su,[lang=el-GR] .ms-fontWeight-semilight,[lang=el-GR] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Greek,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-fontWeight-regular,[lang=el-GR] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Greek,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=el-GR] .ms-font-mi,[lang=el-GR] .ms-fontWeight-semibold,[lang=el-GR] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Greek,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-xl,[lang=he-IL] .ms-font-xxl,[lang=he-IL] .ms-fontWeight-light,[lang=he-IL] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Hebrew,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-l,[lang=he-IL] .ms-font-su,[lang=he-IL] .ms-fontWeight-semilight,[lang=he-IL] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Hebrew,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-fontWeight-regular,[lang=he-IL] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Hebrew,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=he-IL] .ms-font-mi,[lang=he-IL] .ms-fontWeight-semibold,[lang=he-IL] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Hebrew,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-xl,[lang=vi-VN] .ms-font-xxl,[lang=vi-VN] .ms-fontWeight-light,[lang=vi-VN] .ms-fontWeight-light-hover:hover{font-family:Segoe UI Light Vietnamese,Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-l,[lang=vi-VN] .ms-font-su,[lang=vi-VN] .ms-fontWeight-semilight,[lang=vi-VN] .ms-fontWeight-semilight-hover:hover{font-family:Segoe UI Semilight Vietnamese,Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-fontWeight-regular,[lang=vi-VN] .ms-fontweight-regular-hover:hover{font-family:Segoe UI Regular Vietnamese,Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}[lang=vi-VN] .ms-font-mi,[lang=vi-VN] .ms-fontWeight-semibold,[lang=vi-VN] .ms-fontWeight-semibold-hover:hover{font-family:Segoe UI Semibold Vietnamese,Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@font-face{font-family:Office365Icons;src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot);src:url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.eot#iefix) format('embedded-opentype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.woff) format('woff'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.ttf) format('truetype'),url(https://appsforoffice.microsoft.com/fabric/fonts/icons/office365icons.svg#office365icons) format('svg');font-weight:400;font-style:normal}.ms-Icon{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none}.ms-Icon--circleEmpty:before{content:'\e000'}.ms-Icon--circleFill:before{content:'\e001'}.ms-Icon--placeholder:before{content:'\e002'}.ms-Icon--star:before{content:'\e003'}.ms-Icon--plus:before{content:'\e004'}.ms-Icon--minus:before{content:'\e005'}.ms-Icon--question:before{content:'\e006'}.ms-Icon--exclamation:before{content:'\e007'}.ms-Icon--person:before{content:'\e008'}.ms-Icon--mail:before{content:'\e009'}.ms-Icon--infoCircle:before{content:'\e00a'}.ms-Icon--alert:before{content:'\e00b'}.ms-Icon--xCircle:before{content:'\e00c'}.ms-Icon--mailOpen:before{content:'\e00d'}.ms-Icon--people:before{content:'\e00e'}.ms-Icon--bell:before{content:'\e010'}.ms-Icon--calendar:before{content:'\e011'}.ms-Icon--scheduling:before{content:'\e012'}.ms-Icon--event:before{content:'\e013'}.ms-Icon--folder:before{content:'\e014'}.ms-Icon--documents:before{content:'\e015'}.ms-Icon--onedrive:before{content:'\e016'}.ms-Icon--chat:before{content:'\e017'}.ms-Icon--sites:before{content:'\e018'}.ms-Icon--listBullets:before{content:'\e019'}.ms-Icon--calendarWeek:before{content:'\e01a'}.ms-Icon--calendarWorkWeek:before{content:'\e01b'}.ms-Icon--calendarDay:before{content:'\e01c'}.ms-Icon--folderMove:before{content:'\e01d'}.ms-Icon--panel:before{content:'\e01e'}.ms-Icon--popout:before{content:'\e01f'}.ms-Icon--menu:before{content:'\e020'}.ms-Icon--home:before{content:'\e021'}.ms-Icon--favorites:before{content:'\e022'}.ms-Icon--phone:before{content:'\e023'}.ms-Icon--mailSend:before{content:'\e024'}.ms-Icon--save:before{content:'\e025'}.ms-Icon--trash:before{content:'\e026'}.ms-Icon--pencil:before{content:'\e027'}.ms-Icon--flag:before{content:'\e028'}.ms-Icon--reply:before{content:'\e029'}.ms-Icon--miniatures:before{content:'\e02a'}.ms-Icon--voicemail:before{content:'\e02b'}.ms-Icon--play:before{content:'\e02c'}.ms-Icon--pause:before{content:'\e02d'}.ms-Icon--onlineAdd:before{content:'\e02e'}.ms-Icon--onlineJoin:before{content:'\e02f'}.ms-Icon--replyAll:before{content:'\e030'}.ms-Icon--attachment:before{content:'\e031'}.ms-Icon--drm:before{content:'\e032'}.ms-Icon--pinDown:before{content:'\e033'}.ms-Icon--refresh:before{content:'\e034'}.ms-Icon--gear:before{content:'\e035'}.ms-Icon--smiley:before{content:'\e036'}.ms-Icon--info:before{content:'\e037'}.ms-Icon--lock:before{content:'\e038'}.ms-Icon--search:before{content:'\e039'}.ms-Icon--questionReverse:before{content:'\e03a'}.ms-Icon--notRecurring:before{content:'\e03b'}.ms-Icon--tasks:before{content:'\e040'}.ms-Icon--check:before{content:'\e041'}.ms-Icon--x:before{content:'\e042'}.ms-Icon--ellipsis:before{content:'\e045'}.ms-Icon--dot:before{content:'\e046'}.ms-Icon--arrowUp:before{content:'\e047'}.ms-Icon--arrowDown:before{content:'\e048'}.ms-Icon--arrowLeft:before{content:'\e049'}.ms-Icon--arrowRight:before{content:'\e04a'}.ms-Icon--download:before{content:'\e04b'}.ms-Icon--directions:before{content:'\e04c'}.ms-Icon--microphone:before{content:'\e04f'}.ms-Icon--caretUp:before{content:'\e051'}.ms-Icon--caretDown:before{content:'\e052'}.ms-Icon--caretLeft:before{content:'\e053'}.ms-Icon--caretRight:before{content:'\e054'}.ms-Icon--caretUpLeft:before{content:'\e05a'}.ms-Icon--caretUpRight:before{content:'\e05b'}.ms-Icon--caretDownRight:before{content:'\e05c'}.ms-Icon--caretDownLeft:before{content:'\e05d'}.ms-Icon--note:before{content:'\e06a'}.ms-Icon--noteReply:before{content:'\e06b'}.ms-Icon--noteForward:before{content:'\e06c'}.ms-Icon--key:before{content:'\e06f'}.ms-Icon--tile:before{content:'\e070'}.ms-Icon--taskRecurring:before{content:'\e071'}.ms-Icon--starEmpty:before{content:'\e073'}.ms-Icon--upload:before{content:'\e076'}.ms-Icon--wrench:before{content:'\e077'}.ms-Icon--share:before{content:'\e078'}.ms-Icon--documentReply:before{content:'\e079'}.ms-Icon--documentForward:before{content:'\e07a'}.ms-Icon--partner:before{content:'\e080'}.ms-Icon--reactivate:before{content:'\e084'}.ms-Icon--sort:before{content:'\e085'}.ms-Icon--personAdd:before{content:'\e086'}.ms-Icon--chevronUp:before{content:'\e087'}.ms-Icon--chevronDown:before{content:'\e088'}.ms-Icon--chevronLeft:before{content:'\e089'}.ms-Icon--chevronRight:before{content:'\e08a'}.ms-Icon--peopleAdd:before{content:'\e08c'}.ms-Icon--newsfeed:before{content:'\e08d'}.ms-Icon--notebook:before{content:'\e08e'}.ms-Icon--link:before{content:'\e08f'}.ms-Icon--chevronsUp:before{content:'\e090'}.ms-Icon--chevronsDown:before{content:'\e091'}.ms-Icon--chevronsLeft:before{content:'\e092'}.ms-Icon--chevronsRight:before{content:'\e093'}.ms-Icon--clutter:before{content:'\e09a'}.ms-Icon--subscribe:before{content:'\e09c'}.ms-Icon--unsubscribe:before{content:'\e09d'}.ms-Icon--personRemove:before{content:'\e09e'}.ms-Icon--receiptForward:before{content:'\e0a0'}.ms-Icon--receiptReply:before{content:'\e0a1'}.ms-Icon--receiptCheck:before{content:'\e0a2'}.ms-Icon--peopleRemove:before{content:'\e0a3'}.ms-Icon--merge:before{content:'\e0a4'}.ms-Icon--split:before{content:'\e0a5'}.ms-Icon--eventCancel:before{content:'\e0a6'}.ms-Icon--eventShare:before{content:'\e0a7'}.ms-Icon--today:before{content:'\e0a9'}.ms-Icon--oofReply:before{content:'\e0aa'}.ms-Icon--voicemailReply:before{content:'\e0ac'}.ms-Icon--voicemailForward:before{content:'\e0ad'}.ms-Icon--ribbon:before{content:'\e0af'}.ms-Icon--contact:before{content:'\e0b0'}.ms-Icon--eye:before{content:'\e0b1'}.ms-Icon--glasses:before{content:'\e0b2'}.ms-Icon--print:before{content:'\e100'}.ms-Icon--room:before{content:'\e101'}.ms-Icon--post:before{content:'\e102'}.ms-Icon--toggle:before{content:'\e103'}.ms-Icon--touch:before{content:'\e104'}.ms-Icon--clock:before{content:'\e105'}.ms-Icon--fax:before{content:'\e106'}.ms-Icon--lightning:before{content:'\e110'}.ms-Icon--dialpad:before{content:'\e111'}.ms-Icon--phoneTransfer:before{content:'\e112'}.ms-Icon--phoneAdd:before{content:'\e113'}.ms-Icon--late:before{content:'\e114'}.ms-Icon--chatAdd:before{content:'\e115'}.ms-Icon--conflict:before{content:'\e116'}.ms-Icon--navigate:before{content:'\e117'}.ms-Icon--camera:before{content:'\e119'}.ms-Icon--filter:before{content:'\e11a'}.ms-Icon--fullscreen:before{content:'\e11b'}.ms-Icon--new:before{content:'\e11c'}.ms-Icon--mailEmpty:before{content:'\e11d'}.ms-Icon--editBox:before{content:'\e11e'}.ms-Icon--waffle:before{content:'\e11f'}.ms-Icon--work:before{content:'\e120'}.ms-Icon--eventRecurring:before{content:'\e121'}.ms-Icon--cart:before{content:'\e122'}.ms-Icon--socialListening:before{content:'\e123'}.ms-Icon--mapMarker:before{content:'\e124'}.ms-Icon--org:before{content:'\e125'}.ms-Icon--replyAlt:before{content:'\e150'}.ms-Icon--replyAllAlt:before{content:'\e152'}.ms-Icon--eventInfo:before{content:'\e154'}.ms-Icon--group:before{content:'\e155'}.ms-Icon--money:before{content:'\e161'}.ms-Icon--graph:before{content:'\e162'}.ms-Icon--noteEdit:before{content:'\e163'}.ms-Icon--dashboard:before{content:'\e164'}.ms-Icon--mailEdit:before{content:'\e165'}.ms-Icon--pinLeft:before{content:'\e167'}.ms-Icon--heart:before{content:'\e16a'}.ms-Icon--heartEmpty:before{content:'\e16b'}.ms-Icon--picture:before{content:'\e16c'}.ms-Icon--cake:before{content:'\e16d'}.ms-Icon--books:before{content:'\e16e'}.ms-Icon--chart:before{content:'\e16f'}.ms-Icon--video:before{content:'\e170'}.ms-Icon--soccer:before{content:'\e171'}.ms-Icon--meal:before{content:'\e172'}.ms-Icon--balloon:before{content:'\e173'}.ms-Icon--cat:before{content:'\e174'}.ms-Icon--dog:before{content:'\e175'}.ms-Icon--bag:before{content:'\e176'}.ms-Icon--music:before{content:'\e177'}.ms-Icon--stopwatch:before{content:'\e178'}.ms-Icon--coffee:before{content:'\e179'}.ms-Icon--briefcase:before{content:'\e17a'}.ms-Icon--pill:before{content:'\e17b'}.ms-Icon--trophy:before{content:'\e17c'}.ms-Icon--firstAid:before{content:'\e17d'}.ms-Icon--plane:before{content:'\e17e'}.ms-Icon--page:before{content:'\e17f'}.ms-Icon--car:before{content:'\e180'}.ms-Icon--dogAlt:before{content:'\e181'}.ms-Icon--document:before{content:'\e182'}.ms-Icon--metadata:before{content:'\e183'}.ms-Icon--pointItem:before{content:'\e184'}.ms-Icon--text:before{content:'\e185'}.ms-Icon--fieldText:before{content:'\e186'}.ms-Icon--fieldNumber:before{content:'\e187'}.ms-Icon--dropdown:before{content:'\e188'}.ms-Icon--radioButton:before{content:'\e189'}.ms-Icon--checkbox:before{content:'\e18a'}.ms-Icon--story:before{content:'\e18b'}.ms-Icon--bold:before{content:'\e18c'}.ms-Icon--italic:before{content:'\e18d'}.ms-Icon--underline:before{content:'\e18e'}.ms-Icon--quote:before{content:'\e18f'}.ms-Icon--styleRemove:before{content:'\e190'}.ms-Icon--pictureAdd:before{content:'\e191'}.ms-Icon--pictureRemove:before{content:'\e192'}.ms-Icon--desktop:before{content:'\e193'}.ms-Icon--tablet:before{content:'\e194'}.ms-Icon--mobile:before{content:'\e195'}.ms-Icon--table:before{content:'\e196'}.ms-Icon--hide:before{content:'\e197'}.ms-Icon--shield:before{content:'\e198'}.ms-Icon--header:before{content:'\e19a'}.ms-Icon--paint:before{content:'\e19b'}.ms-Icon--support:before{content:'\e19c'}.ms-Icon--settings:before{content:'\e19d'}.ms-Icon--creditCard:before{content:'\e19e'}.ms-Icon--reload:before{content:'\e19f'}.ms-Icon--peopleSecurity:before{content:'\e200'}.ms-Icon--fieldTextBox:before{content:'\e203'}.ms-Icon--multiChoice:before{content:'\e204'}.ms-Icon--fieldMail:before{content:'\e205'}.ms-Icon--contactForm:before{content:'\e206'}.ms-Icon--circleHalfFilled:before{content:'\e207'}.ms-Icon--documentPDF:before{content:'\e208'}.ms-Icon--bookmark:before{content:'\e209'}.ms-Icon--circleUnfilled:before{content:'\e20b'}.ms-Icon--circleFilled:before{content:'\e20c'}.ms-Icon--textBox:before{content:'\e20e'}.ms-Icon--drop:before{content:'\e20f'}.ms-Icon--sun:before{content:'\e210'}.ms-Icon--lifesaver:before{content:'\e211'}.ms-Icon--lifesaverLock:before{content:'\e212'}.ms-Icon--mailUnread:before{content:'\e213'}.ms-Icon--mailRead:before{content:'\e214'}.ms-Icon--inboxCheck:before{content:'\e215'}.ms-Icon--folderSearch:before{content:'\e216'}.ms-Icon--collapse:before{content:'\e217'}.ms-Icon--expand:before{content:'\e218'}.ms-Icon--ascending:before{content:'\e219'}.ms-Icon--descending:before{content:'\e21a'}.ms-Icon--filterClear:before{content:'\e21b'}.ms-Icon--checkboxEmpty:before{content:'\e21c'}.ms-Icon--checkboxMixed:before{content:'\e21d'}.ms-Icon--boards:before{content:'\e21e'}.ms-Icon--checkboxCheck:before{content:'\e21f'}.ms-Icon--frowny:before{content:'\e220'}.ms-Icon--lightBulb:before{content:'\e221'}.ms-Icon--globe:before{content:'\e222'}.ms-Icon--deviceWipe:before{content:'\e223'}.ms-Icon--listCheck:before{content:'\e226'}.ms-Icon--listGroup:before{content:'\e227'}.ms-Icon--timeline:before{content:'\e228'}.ms-Icon--fontIncrease:before{content:'\e229'}.ms-Icon--fontDecrease:before{content:'\e22a'}.ms-Icon--fontColor:before{content:'\e22b'}.ms-Icon--mailCheck:before{content:'\e22c'}.ms-Icon--mailDown:before{content:'\e22d'}.ms-Icon--listCheckbox:before{content:'\e22e'}.ms-Icon--sunAdd:before{content:'\e22f'}.ms-Icon--sunQuestion:before{content:'\e230'}.ms-Icon--chevronThinUp:before{content:'\e231'}.ms-Icon--chevronThinDown:before{content:'\e232'}.ms-Icon--chevronThinLeft:before{content:'\e233'}.ms-Icon--chevronThinRight:before{content:'\e234'}.ms-Icon--chevronThickUp:before{content:'\e235'}.ms-Icon--chevronThickDown:before{content:'\e236'}.ms-Icon--chevronThickLeft:before{content:'\e237'}.ms-Icon--chevronThickRight:before{content:'\e238'}.ms-Icon--linkRemove:before{content:'\e239'}.ms-Icon--alertOutline:before{content:'\e23b'}.ms-Icon--documentLandscape:before{content:'\e23c'}.ms-Icon--documentAdd:before{content:'\e23d'}.ms-Icon--toggleMiddle:before{content:'\e23e'}.ms-Icon--embed:before{content:'\e23f'}.ms-Icon--listNumbered:before{content:'\e240'}.ms-Icon--peopleCheck:before{content:'\e242'}.ms-Icon--caretUpOutline:before{content:'\e243'}.ms-Icon--caretDownOutline:before{content:'\e244'}.ms-Icon--caretLeftOutline:before{content:'\e245'}.ms-Icon--caretRightOutline:before{content:'\e246'}.ms-Icon--mailSync:before{content:'\e248'}.ms-Icon--mailError:before{content:'\e249'}.ms-Icon--mailPause:before{content:'\e24a'}.ms-Icon--peopleSync:before{content:'\e24b'}.ms-Icon--peopleError:before{content:'\e24c'}.ms-Icon--peoplePause:before{content:'\e24d'}.ms-Icon--circleBall:before{content:'\e24e'}.ms-Icon--circleBalloons:before{content:'\e24f'}.ms-Icon--circleCar:before{content:'\e250'}.ms-Icon--circleCat:before{content:'\e251'}.ms-Icon--circleCoffee:before{content:'\e252'}.ms-Icon--circleDog:before{content:'\e253'}.ms-Icon--circleLightning:before{content:'\e254'}.ms-Icon--circlePill:before{content:'\e255'}.ms-Icon--circlePlane:before{content:'\e256'}.ms-Icon--circlePoodle:before{content:'\e257'}.ms-Icon--checkPeople:before{content:'\e259'}.ms-Icon--documentSearch:before{content:'\e25a'}.ms-Icon--sortLines:before{content:'\e25c'}.ms-Icon--calendarPublic:before{content:'\e25d'}.ms-Icon--contactPublic:before{content:'\e25e'}.ms-Icon--classNotebook:before{content:'\e25f'}.ms-Icon--triangleUp:before{content:'\e260'}.ms-Icon--triangleRight:before{content:'\e261'}.ms-Icon--triangleDown:before{content:'\e262'}.ms-Icon--triangleLeft:before{content:'\e263'}.ms-Icon--triangleEmptyUp:before{content:'\e264'}.ms-Icon--triangleEmptyRight:before{content:'\e265'}.ms-Icon--triangleEmptyDown:before{content:'\e266'}.ms-Icon--triangleEmptyLeft:before{content:'\e267'}.ms-Icon--filePDF:before{content:'\e268'}.ms-Icon--fileImage:before{content:'\e26c'}.ms-Icon--fileDocument:before{content:'\e26d'}.ms-Icon--listGroup2:before{content:'\e26e'}.ms-Icon--copy:before{content:'\e26f'}.ms-Icon--creditCardOutline:before{content:'\e270'}.ms-Icon--mailPublic:before{content:'\e272'}.ms-Icon--folderPublic:before{content:'\e273'}.ms-Icon--teamwork:before{content:'\e274'}.ms-Icon--move:before{content:'\e275'}.ms-Icon--classroom:before{content:'\e276'}.ms-Icon--menu2:before{content:'\e277'}.ms-Icon--plus2:before{content:'\e278'}.ms-Icon--tag:before{content:'\e279'}.ms-Icon--arrowUp2:before{content:'\e27a'}.ms-Icon--arrowDown2:before{content:'\e27b'}.ms-Icon--circlePlus:before{content:'\e27c'}.ms-Icon--circleInfo:before{content:'\e27d'}.ms-Icon--section:before{content:'\e27e'}.ms-Icon--sections:before{content:'\e27f'}.ms-Icon--at:before{content:'\e282'}.ms-Icon--arrowUpRight:before{content:'\e283'}.ms-Icon--arrowDownRight:before{content:'\e284'}.ms-Icon--arrowDownLeft:before{content:'\e285'}.ms-Icon--arrowUpLeft:before{content:'\e286'}.ms-Icon--bundle:before{content:'\e287'}.ms-Icon--pictureEdit:before{content:'\e288'}.ms-Icon--protectionCenter:before{content:'\e289'}.ms-Icon--alert2:before{content:'\e28a'}.ms-Icon--circle{position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;margin:0 0 0 .5em;padding:0;text-align:right;-webkit-font-smoothing:antialiased}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;vertical-align:top;position:absolute}.ms-Icon--circle:after{content:'\e000';position:absolute;top:0;right:0;-webkit-transform:scale(2);transform:scale(2);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;z-index:0}.ms-Icon--circle.ms-Icon--star:before{top:-2%;right:1%}.ms-Icon--circle.ms-Icon--person:before{top:-2%;right:-3%}.ms-Icon--circle.ms-Icon--alert:before{top:-4%}.ms-Icon--circle.ms-Icon--mailOpen:before{top:-5%}.ms-Icon--circle.ms-Icon--people:before{top:-4%;right:-7%}.ms-Icon--circle.ms-Icon--bell:before{top:-3%}.ms-Icon--circle.ms-Icon--scheduling:before{top:-3%;right:6%}.ms-Icon--circle.ms-Icon--documents:before{top:-1%;right:-2%}.ms-Icon--circle.ms-Icon--listBullets:before{top:-1%;right:5%}.ms-Icon--circle.ms-Icon--panel:before{right:-2%}.ms-Icon--circle.ms-Icon--popout:before{top:-2%;right:-2%}.ms-Icon--circle.ms-Icon--home:before{top:-4%}.ms-Icon--circle.ms-Icon--favorites:before{top:-2%;right:2%}.ms-Icon--circle.ms-Icon--phone:before{top:-2%;right:-2%}.ms-Icon--circle.ms-Icon--mailSend:before{right:-10%}.ms-Icon--circle.ms-Icon--pencil:before{top:-2%;right:3%}.ms-Icon--circle.ms-Icon--flag:before{right:3%}.ms-Icon--circle.ms-Icon--miniatures:before{right:-3%}.ms-Icon--circle.ms-Icon--voicemail:before{top:2%;right:-7%}.ms-Icon--circle.ms-Icon--onlineAdd:before{top:-1%;right:2%}.ms-Icon--circle.ms-Icon--pinDown:before{top:5%}.ms-Icon--circle.ms-Icon--gear:before{right:2%}.ms-Icon--circle.ms-Icon--check:before{top:3%}.ms-Icon--circle.ms-Icon--ellipsis:before{top:2%;right:-12%}.ms-Icon--circle.ms-Icon--directions:before{right:10%}.ms-Icon--circle.ms-Icon--microphone:before{top:-3%}.ms-Icon--circle.ms-Icon--caretDown:before{top:5%;right:2%}.ms-Icon--circle.ms-Icon--caretLeft:before{right:-6%}.ms-Icon--circle.ms-Icon--caretRight:before{right:6%}.ms-Icon--circle.ms-Icon--caretUpLeft:before{top:5%;right:5%}.ms-Icon--circle.ms-Icon--caretUpRight:before{top:5%;right:-3%}.ms-Icon--circle.ms-Icon--caretDownRight:before{right:-3%}.ms-Icon--circle.ms-Icon--caretDownLeft:before{right:4%}.ms-Icon--circle.ms-Icon--note:before{top:2%;right:-3%}.ms-Icon--circle.ms-Icon--noteReply:before{top:6%;right:3%}.ms-Icon--circle.ms-Icon--noteForward:before{top:6%}.ms-Icon--circle.ms-Icon--key:before{top:5%;right:1%}.ms-Icon--circle.ms-Icon--tile:before{top:-1%;right:-18%}.ms-Icon--circle.ms-Icon--taskRecurring:before{top:2%;right:-1%}.ms-Icon--circle.ms-Icon--starEmpty:before{top:-4%;right:1%}.ms-Icon--circle.ms-Icon--documentReply:before{top:-2%;right:7%}.ms-Icon--circle.ms-Icon--documentForward:before{right:5%}.ms-Icon--circle.ms-Icon--partner:before{top:-2%}.ms-Icon--circle.ms-Icon--reactivate:before{top:-2%;right:6%}.ms-Icon--circle.ms-Icon--sort:before{right:-19%}.ms-Icon--circle.ms-Icon--personAdd:before{top:-2%;right:6%}.ms-Icon--circle.ms-Icon--chevronDown:before{top:4%}.ms-Icon--circle.ms-Icon--chevronLeft:before{right:-5%}.ms-Icon--circle.ms-Icon--chevronRight:before{right:4%}.ms-Icon--circle.ms-Icon--peopleAdd:before{top:-5%;right:-12%}.ms-Icon--circle.ms-Icon--newsfeed:before,.ms-Icon--circle.ms-Icon--notebook:before{right:-4%}.ms-Icon--circle.ms-Icon--link:before{top:2%;right:-18%}.ms-Icon--circle.ms-Icon--chevronsDown:before{top:5%}.ms-Icon--circle.ms-Icon--chevronsLeft:before{right:-5%}.ms-Icon--circle.ms-Icon--chevronsRight:before{right:4%}.ms-Icon--circle.ms-Icon--personRemove:before{right:5%}.ms-Icon--circle.ms-Icon--receiptCheck:before,.ms-Icon--circle.ms-Icon--receiptForward:before,.ms-Icon--circle.ms-Icon--receiptReply:before{right:-20%}.ms-Icon--circle.ms-Icon--peopleRemove:before{top:-3%;right:-12%}.ms-Icon--circle.ms-Icon--merge:before,.ms-Icon--circle.ms-Icon--split:before{top:2%}.ms-Icon--circle.ms-Icon--eventCancel:before{right:-2%}.ms-Icon--circle.ms-Icon--today:before{top:-2%}.ms-Icon--circle.ms-Icon--oofReply:before{right:5%}.ms-Icon--circle.ms-Icon--voicemailReply:before{top:4%;right:-25%}.ms-Icon--circle.ms-Icon--voicemailForward:before{top:4%;right:-20%}.ms-Icon--circle.ms-Icon--eye:before{top:-4%}.ms-Icon--circle.ms-Icon--post:before{top:-4%;right:4%}.ms-Icon--circle.ms-Icon--fax:before{top:-3%;right:-2%}.ms-Icon--circle.ms-Icon--lightning:before{top:2%;right:1%}.ms-Icon--circle.ms-Icon--filter:before{top:7%}.ms-Icon--circle.ms-Icon--cart:before{right:3%}.ms-Icon--circle.ms-Icon--mapMarker:before,.ms-Icon--circle.ms-Icon--socialListening:before{top:2%}.ms-Icon--circle.ms-Icon--replyAllAlt:before{right:-16%}.ms-Icon--circle.ms-Icon--group:before{right:-33%}.ms-Icon--circle.ms-Icon--money:before{right:-8%}.ms-Icon--circle.ms-Icon--noteEdit:before{right:4%}.ms-Icon--circle.ms-Icon--mailEdit:before{top:3%;right:7%}.ms-Icon--circle.ms-Icon--pinLeft:before{right:-6%}.ms-Icon--circle.ms-Icon--heart:before,.ms-Icon--circle.ms-Icon--heartEmpty:before{top:5%}.ms-Icon--circle.ms-Icon--cake:before{top:-5%}.ms-Icon--circle.ms-Icon--books:before{right:-8%}.ms-Icon--circle.ms-Icon--video:before{top:-3%;right:3%}.ms-Icon--circle.ms-Icon--balloon:before{top:4%;right:-1%}.ms-Icon--circle.ms-Icon--music:before{top:-2%;right:-5%}.ms-Icon--circle.ms-Icon--coffee:before,.ms-Icon--circle.ms-Icon--stopwatch:before{top:-3%;right:3%}.ms-Icon--circle.ms-Icon--plane:before{right:4%}.ms-Icon--circle.ms-Icon--dogAlt:before{right:-15%}.ms-Icon--circle.ms-Icon--metadata:before{top:-4%;right:4%}.ms-Icon--circle.ms-Icon--text:before{top:-4%;right:10%}.ms-Icon--circle.ms-Icon--dropdown:before,.ms-Icon--circle.ms-Icon--fieldNumber:before,.ms-Icon--circle.ms-Icon--fieldText:before{right:-14%}.ms-Icon--circle.ms-Icon--story:before{right:-5%}.ms-Icon--circle.ms-Icon--bold:before{right:4%}.ms-Icon--circle.ms-Icon--underline:before{top:4%}.ms-Icon--circle.ms-Icon--quote:before{right:-4%}.ms-Icon--circle.ms-Icon--styleRemove:before{top:4%;right:5%}.ms-Icon--circle.ms-Icon--pictureAdd:before,.ms-Icon--circle.ms-Icon--pictureRemove:before{right:-6%}.ms-Icon--circle.ms-Icon--mobile:before{right:-3%}.ms-Icon--circle.ms-Icon--hide:before{top:-4%}.ms-Icon--circle.ms-Icon--header:before{right:-9%}.ms-Icon--circle.ms-Icon--msn:before{right:3%}.ms-Icon--circle.ms-Icon--peopleCheck:before{right:-7%;top:-3%}.ms-Icon--circle.ms-Icon--caretDownOutline:before{top:6%}.ms-Icon--circle.ms-Icon--caretLeftOutline:before{right:-5%}.ms-Icon--circle.ms-Icon--caretRightOutline:before{right:5%}.ms-Icon--circle.ms-Icon--sway:before{right:-3%}.ms-Icon--circle.ms-Icon--mailSync:before{right:8%;top:3%}.ms-Icon--circle.ms-Icon--peopleError:before,.ms-Icon--circle.ms-Icon--peoplePause:before,.ms-Icon--circle.ms-Icon--peopleSync:before{right:-8%}.ms-Icon--circle.ms-Icon--documentSearch:before{right:8%}.ms-Icon--circle.ms-Icon--dynamicsMarketing:before{right:-8%}.ms-Icon--arrowDownLeft:before,.ms-Icon--arrowDownRight:before,.ms-Icon--arrowLeft,.ms-Icon--arrowRight,.ms-Icon--arrowUpLeft:before,.ms-Icon--arrowUpRight:before,.ms-Icon--bundle:before,.ms-Icon--calendar,.ms-Icon--caretDownLeft,.ms-Icon--caretDownRight,.ms-Icon--caretLeft,.ms-Icon--caretLeftOutline,.ms-Icon--caretRight,.ms-Icon--caretRightOutline,.ms-Icon--caretUpLeft,.ms-Icon--caretUpRight,.ms-Icon--cart,.ms-Icon--chart,.ms-Icon--chat,.ms-Icon--check,.ms-Icon--checkbox,.ms-Icon--checkboxCheck,.ms-Icon--checkPeople,.ms-Icon--chevronLeft,.ms-Icon--chevronRight,.ms-Icon--chevronsLeft,.ms-Icon--chevronsRight,.ms-Icon--chevronThickLeft,.ms-Icon--chevronThickRight,.ms-Icon--chevronThinLeft,.ms-Icon--chevronThinRight,.ms-Icon--contactForm,.ms-Icon--contactPublic:before,.ms-Icon--copy:before,.ms-Icon--directions,.ms-Icon--document,.ms-Icon--documentForward,.ms-Icon--documentLandscape,.ms-Icon--documentReply,.ms-Icon--dropdown,.ms-Icon--eventRecurring,.ms-Icon--eventShare,.ms-Icon--fileDocument:before,.ms-Icon--folder,.ms-Icon--folderMove,.ms-Icon--folderSearch,.ms-Icon--graph,.ms-Icon--inboxCheck,.ms-Icon--late,.ms-Icon--listBullets,.ms-Icon--listCheck,.ms-Icon--listCheckbox,.ms-Icon--listGroup,.ms-Icon--listGroup2:before,.ms-Icon--mailSend,.ms-Icon--mailSync,.ms-Icon--metadata,.ms-Icon--multiChoice,.ms-Icon--note,.ms-Icon--notebook,.ms-Icon--noteForward,.ms-Icon--noteReply,.ms-Icon--notRecurring,.ms-Icon--oofReply,.ms-Icon--page,.ms-Icon--peopleCheck,.ms-Icon--peopleSync,.ms-Icon--pinLeft,.ms-Icon--play,.ms-Icon--pointItem,.ms-Icon--post,.ms-Icon--question,.ms-Icon--questionReverse,.ms-Icon--reactivate,.ms-Icon--receiptCheck,.ms-Icon--receiptForward,.ms-Icon--receiptReply,.ms-Icon--refresh,.ms-Icon--reload,.ms-Icon--reply,.ms-Icon--replyAll,.ms-Icon--replyAllAlt,.ms-Icon--replyAlt,.ms-Icon--sections:before,.ms-Icon--socialListening,.ms-Icon--sortLines,.ms-Icon--sunQuestion,.ms-Icon--taskRecurring,.ms-Icon--tasks,.ms-Icon--timeline .ms-Icon--mailCheck,.ms-Icon--toggle,.ms-Icon--triangleEmptyLeft:before,.ms-Icon--triangleEmptyRight:before,.ms-Icon--triangleLeft:before,.ms-Icon--triangleRight:before,.ms-Icon--voicemailForward,.ms-Icon--voicemailReply{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.ms-u-slideRightIn10{-webkit-animation-name:y,a;animation-name:y,a;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes a{0%{-webkit-transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes a{0%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn20{-webkit-animation-name:y,b;animation-name:y,b;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes b{0%{-webkit-transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes b{0%{-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn40{-webkit-animation-name:y,c;animation-name:y,c;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes c{0%{-webkit-transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes c{0%{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn10{-webkit-animation-name:y,d;animation-name:y,d;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes d{0%{-webkit-transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes d{0%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn20{-webkit-animation-name:y,e;animation-name:y,e;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes e{0%{-webkit-transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes e{0%{-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn40{-webkit-animation-name:y,f;animation-name:y,f;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes f{0%{-webkit-transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes f{0%{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightIn400{-webkit-animation-name:y,g;animation-name:y,g;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes g{0%{-webkit-transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes g{0%{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideLeftIn400{-webkit-animation-name:y,h;animation-name:y,h;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes h{0%{-webkit-transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0)}}@keyframes h{0%{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn20{-webkit-animation-name:y,i;animation-name:y,i;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes i{0%{-webkit-transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes i{0%{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideUpIn10{-webkit-animation-name:y,j;animation-name:y,j;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes j{0%{-webkit-transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes j{0%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn20{-webkit-animation-name:y,k;animation-name:y,k;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes k{0%{-webkit-transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0)}}@keyframes k{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideDownIn10{-webkit-animation-name:y,l;animation-name:y,l;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes l{0%{-webkit-transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0)}}@keyframes l{0%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.ms-u-slideRightOut40{-webkit-animation-name:z,m;animation-name:z,m;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes m{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0)}}@keyframes m{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(40px,0,0);transform:translate3d(40px,0,0)}}.ms-u-slideLeftOut40{-webkit-animation-name:z,n;animation-name:z,n;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes n{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0)}}@keyframes n{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-40px,0,0);transform:translate3d(-40px,0,0)}}.ms-u-slideRightOut400{-webkit-animation-name:z,o;animation-name:z,o;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes o{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0)}}@keyframes o{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}}.ms-u-slideLeftOut400{-webkit-animation-name:z,p;animation-name:z,p;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes p{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0)}}@keyframes p{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}}.ms-u-slideUpOut20{-webkit-animation-name:z,q;animation-name:z,q;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes q{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0)}}@keyframes q{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}}.ms-u-slideUpOut10{-webkit-animation-name:z,r;animation-name:z,r;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes r{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0)}}@keyframes r{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}}.ms-u-slideDownOut20{-webkit-animation-name:z,s;animation-name:z,s;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes s{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0)}}@keyframes s{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}}.ms-u-slideDownOut10{-webkit-animation-name:z,t;animation-name:z,t;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes t{0%{-webkit-transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0)}}@keyframes t{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.ms-u-scaleUpIn100{-webkit-animation-name:y,u;animation-name:y,u;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes u{0%{-webkit-transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1)}}@keyframes u{0%{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleDownIn100{-webkit-animation-name:y,v;animation-name:y,v;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1)}}@keyframes v{0%{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.ms-u-scaleUpOut103{-webkit-animation-name:z,w;animation-name:z,w;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes w{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1)}}@keyframes w{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(1.03,1.03,1);transform:scale3d(1.03,1.03,1)}}.ms-u-scaleDownOut98{-webkit-animation-name:z,x;animation-name:z,x;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes x{0%{-webkit-transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1)}}@keyframes x{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}to{-webkit-transform:scale3d(.98,.98,1);transform:scale3d(.98,.98,1)}}.ms-u-fadeIn100,.ms-u-fadeIn400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeIn100{-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeIn200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-u-fadeIn500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:y;animation-name:y;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes y{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}.ms-u-fadeOut100,.ms-u-fadeOut400{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-fadeOut100{-webkit-animation-duration:.1s;animation-duration:.1s}.ms-u-fadeOut200{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-u-fadeOut500{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:z;animation-name:z;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.467s;animation-duration:.467s}@-webkit-keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes z{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}.ms-u-rotate90deg{-webkit-animation-name:A;animation-name:A;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes A{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(90deg)}}@keyframes A{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.ms-u-rotateN90deg{-webkit-animation-name:B;animation-name:B;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes B{0%{-webkit-transform:rotate(90deg)}to{-webkit-transform:rotate(0deg)}}@keyframes B{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.ms-u-expandCollapse400{transition:height .367s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse200{transition:height .167s cubic-bezier(.1,.25,.75,.9)}.ms-u-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}.ms-u-delay100{-webkit-animation-delay:.167s;animation-delay:.167s}.ms-u-delay200{-webkit-animation-delay:.267s;animation-delay:.267s}.ms-u-slideRightIn10{-webkit-animation-name:y,slideLeft10;animation-name:y,slideLeft10;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightIn10,.ms-u-slideRightIn20{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideRightIn20{-webkit-animation-name:y,slideLeft20;animation-name:y,slideLeft20;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightIn40{-webkit-animation-name:y,slideLeft40;animation-name:y,slideLeft40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftIn10,.ms-u-slideRightIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn10{-webkit-animation-name:y,slideRight10;animation-name:y,slideRight10;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftIn20{-webkit-animation-name:y,slideRight20;animation-name:y,slideRight20;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftIn20,.ms-u-slideLeftIn40{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn40{-webkit-animation-name:y,slideRight40;animation-name:y,slideRight40;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightIn400{-webkit-animation-name:y,h;animation-name:y,h;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftIn400,.ms-u-slideRightIn400{-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s}.ms-u-slideLeftIn400{-webkit-animation-name:y,slideRight400;animation-name:y,slideRight400;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightOut40{-webkit-animation-name:z,n;animation-name:z,n;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftOut40,.ms-u-slideRightOut40{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut40{-webkit-animation-name:z,m;animation-name:z,m;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideRightOut400{-webkit-animation-name:z,p;animation-name:z,p;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-slideLeftOut400,.ms-u-slideRightOut400{-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s}.ms-u-slideLeftOut400{-webkit-animation-name:z,o;animation-name:z,o;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-rotate90deg{-webkit-animation-name:B;animation-name:B;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-u-rotate90deg,.ms-u-rotateN90deg{-webkit-animation-duration:.1s;-moz-animation-duration:.1s;-ms-animation-duration:.1s;-o-animation-duration:.1s}.ms-u-rotateN90deg{-webkit-animation-name:A;animation-name:A;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (max-width:479px){.ms-u-hiddenLgDown,.ms-u-hiddenMdDown,.ms-u-hiddenSm,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:480px) and (max-width:639px){.ms-u-hiddenLgDown,.ms-u-hiddenMd,.ms-u-hiddenMdDown,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:640px) and (max-width:1023px){.ms-u-hiddenLg,.ms-u-hiddenLgDown,.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlDown,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1024px) and (max-width:1365px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXl,.ms-u-hiddenXlDown,.ms-u-hiddenXlUp,.ms-u-hiddenXxlDown{display:none!important}}@media (min-width:1366px) and (max-width:1919px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxl,.ms-u-hiddenXxlDown,.ms-u-hiddenXxlUp{display:none!important}}@media (min-width:1920px){.ms-u-hiddenLgUp,.ms-u-hiddenMdUp,.ms-u-hiddenXlUp,.ms-u-hiddenXxlUp,.ms-u-hiddenXxxl{display:none!important}}.ms-u-sm12{width:100%}.ms-u-sm11{width:91.66666666666666%}.ms-u-sm10{width:83.33333333333334%}.ms-u-sm9{width:75%}.ms-u-sm8{width:66.66666666666666%}.ms-u-sm7{width:58.333333333333336%}.ms-u-sm6{width:50%}.ms-u-sm5{width:41.66666666666667%}.ms-u-sm4{width:33.33333333333333%}.ms-u-sm3{width:25%}.ms-u-sm2{width:16.666666666666664%}.ms-u-sm1{width:8.333333333333332%}.ms-u-smPull12{left:100%}.ms-u-smPull11{left:91.66666666666666%}.ms-u-smPull10{left:83.33333333333334%}.ms-u-smPull9{left:75%}.ms-u-smPull8{left:66.66666666666666%}.ms-u-smPull7{left:58.333333333333336%}.ms-u-smPull6{left:50%}.ms-u-smPull5{left:41.66666666666667%}.ms-u-smPull4{left:33.33333333333333%}.ms-u-smPull3{left:25%}.ms-u-smPull2{left:16.666666666666664%}.ms-u-smPull1{left:8.333333333333332%}.ms-u-smPull0{left:auto}.ms-u-smPush12{right:100%}.ms-u-smPush11{right:91.66666666666666%}.ms-u-smPush10{right:83.33333333333334%}.ms-u-smPush9{right:75%}.ms-u-smPush8{right:66.66666666666666%}.ms-u-smPush7{right:58.333333333333336%}.ms-u-smPush6{right:50%}.ms-u-smPush5{right:41.66666666666667%}.ms-u-smPush4{right:33.33333333333333%}.ms-u-smPush3{right:25%}.ms-u-smPush2{right:16.666666666666664%}.ms-u-smPush1{right:8.333333333333332%}.ms-u-smPush0{right:auto}.ms-u-smOffset11{margin-right:91.66666666666666%}.ms-u-smOffset10{margin-right:83.33333333333334%}.ms-u-smOffset9{margin-right:75%}.ms-u-smOffset8{margin-right:66.66666666666666%}.ms-u-smOffset7{margin-right:58.333333333333336%}.ms-u-smOffset6{margin-right:50%}.ms-u-smOffset5{margin-right:41.66666666666667%}.ms-u-smOffset4{margin-right:33.33333333333333%}.ms-u-smOffset3{margin-right:25%}.ms-u-smOffset2{margin-right:16.666666666666664%}.ms-u-smOffset1{margin-right:8.333333333333332%}.ms-u-smOffset0{margin-right:0}@media (min-width:480px){.ms-u-md12{width:100%}.ms-u-md11{width:91.66666666666666%}.ms-u-md10{width:83.33333333333334%}.ms-u-md9{width:75%}.ms-u-md8{width:66.66666666666666%}.ms-u-md7{width:58.333333333333336%}.ms-u-md6{width:50%}.ms-u-md5{width:41.66666666666667%}.ms-u-md4{width:33.33333333333333%}.ms-u-md3{width:25%}.ms-u-md2{width:16.666666666666664%}.ms-u-md1{width:8.333333333333332%}.ms-u-mdPull12{left:100%}.ms-u-mdPull11{left:91.66666666666666%}.ms-u-mdPull10{left:83.33333333333334%}.ms-u-mdPull9{left:75%}.ms-u-mdPull8{left:66.66666666666666%}.ms-u-mdPull7{left:58.333333333333336%}.ms-u-mdPull6{left:50%}.ms-u-mdPull5{left:41.66666666666667%}.ms-u-mdPull4{left:33.33333333333333%}.ms-u-mdPull3{left:25%}.ms-u-mdPull2{left:16.666666666666664%}.ms-u-mdPull1{left:8.333333333333332%}.ms-u-mdPull0{left:auto}.ms-u-mdPush12{right:100%}.ms-u-mdPush11{right:91.66666666666666%}.ms-u-mdPush10{right:83.33333333333334%}.ms-u-mdPush9{right:75%}.ms-u-mdPush8{right:66.66666666666666%}.ms-u-mdPush7{right:58.333333333333336%}.ms-u-mdPush6{right:50%}.ms-u-mdPush5{right:41.66666666666667%}.ms-u-mdPush4{right:33.33333333333333%}.ms-u-mdPush3{right:25%}.ms-u-mdPush2{right:16.666666666666664%}.ms-u-mdPush1{right:8.333333333333332%}.ms-u-mdPush0{right:auto}.ms-u-mdOffset11{margin-right:91.66666666666666%}.ms-u-mdOffset10{margin-right:83.33333333333334%}.ms-u-mdOffset9{margin-right:75%}.ms-u-mdOffset8{margin-right:66.66666666666666%}.ms-u-mdOffset7{margin-right:58.333333333333336%}.ms-u-mdOffset6{margin-right:50%}.ms-u-mdOffset5{margin-right:41.66666666666667%}.ms-u-mdOffset4{margin-right:33.33333333333333%}.ms-u-mdOffset3{margin-right:25%}.ms-u-mdOffset2{margin-right:16.666666666666664%}.ms-u-mdOffset1{margin-right:8.333333333333332%}.ms-u-mdOffset0{margin-right:0}}@media (min-width:640px){.ms-u-lg12{width:100%}.ms-u-lg11{width:91.66666666666666%}.ms-u-lg10{width:83.33333333333334%}.ms-u-lg9{width:75%}.ms-u-lg8{width:66.66666666666666%}.ms-u-lg7{width:58.333333333333336%}.ms-u-lg6{width:50%}.ms-u-lg5{width:41.66666666666667%}.ms-u-lg4{width:33.33333333333333%}.ms-u-lg3{width:25%}.ms-u-lg2{width:16.666666666666664%}.ms-u-lg1{width:8.333333333333332%}.ms-u-lgPull12{left:100%}.ms-u-lgPull11{left:91.66666666666666%}.ms-u-lgPull10{left:83.33333333333334%}.ms-u-lgPull9{left:75%}.ms-u-lgPull8{left:66.66666666666666%}.ms-u-lgPull7{left:58.333333333333336%}.ms-u-lgPull6{left:50%}.ms-u-lgPull5{left:41.66666666666667%}.ms-u-lgPull4{left:33.33333333333333%}.ms-u-lgPull3{left:25%}.ms-u-lgPull2{left:16.666666666666664%}.ms-u-lgPull1{left:8.333333333333332%}.ms-u-lgPull0{left:auto}.ms-u-lgPush12{right:100%}.ms-u-lgPush11{right:91.66666666666666%}.ms-u-lgPush10{right:83.33333333333334%}.ms-u-lgPush9{right:75%}.ms-u-lgPush8{right:66.66666666666666%}.ms-u-lgPush7{right:58.333333333333336%}.ms-u-lgPush6{right:50%}.ms-u-lgPush5{right:41.66666666666667%}.ms-u-lgPush4{right:33.33333333333333%}.ms-u-lgPush3{right:25%}.ms-u-lgPush2{right:16.666666666666664%}.ms-u-lgPush1{right:8.333333333333332%}.ms-u-lgPush0{right:auto}.ms-u-lgOffset11{margin-right:91.66666666666666%}.ms-u-lgOffset10{margin-right:83.33333333333334%}.ms-u-lgOffset9{margin-right:75%}.ms-u-lgOffset8{margin-right:66.66666666666666%}.ms-u-lgOffset7{margin-right:58.333333333333336%}.ms-u-lgOffset6{margin-right:50%}.ms-u-lgOffset5{margin-right:41.66666666666667%}.ms-u-lgOffset4{margin-right:33.33333333333333%}.ms-u-lgOffset3{margin-right:25%}.ms-u-lgOffset2{margin-right:16.666666666666664%}.ms-u-lgOffset1{margin-right:8.333333333333332%}.ms-u-lgOffset0{margin-right:0}}@media (min-width:1024px){.ms-u-xl12{width:100%}.ms-u-xl11{width:91.66666666666666%}.ms-u-xl10{width:83.33333333333334%}.ms-u-xl9{width:75%}.ms-u-xl8{width:66.66666666666666%}.ms-u-xl7{width:58.333333333333336%}.ms-u-xl6{width:50%}.ms-u-xl5{width:41.66666666666667%}.ms-u-xl4{width:33.33333333333333%}.ms-u-xl3{width:25%}.ms-u-xl2{width:16.666666666666664%}.ms-u-xl1{width:8.333333333333332%}.ms-u-xlPull12{left:100%}.ms-u-xlPull11{left:91.66666666666666%}.ms-u-xlPull10{left:83.33333333333334%}.ms-u-xlPull9{left:75%}.ms-u-xlPull8{left:66.66666666666666%}.ms-u-xlPull7{left:58.333333333333336%}.ms-u-xlPull6{left:50%}.ms-u-xlPull5{left:41.66666666666667%}.ms-u-xlPull4{left:33.33333333333333%}.ms-u-xlPull3{left:25%}.ms-u-xlPull2{left:16.666666666666664%}.ms-u-xlPull1{left:8.333333333333332%}.ms-u-xlPull0{left:auto}.ms-u-xlPush12{right:100%}.ms-u-xlPush11{right:91.66666666666666%}.ms-u-xlPush10{right:83.33333333333334%}.ms-u-xlPush9{right:75%}.ms-u-xlPush8{right:66.66666666666666%}.ms-u-xlPush7{right:58.333333333333336%}.ms-u-xlPush6{right:50%}.ms-u-xlPush5{right:41.66666666666667%}.ms-u-xlPush4{right:33.33333333333333%}.ms-u-xlPush3{right:25%}.ms-u-xlPush2{right:16.666666666666664%}.ms-u-xlPush1{right:8.333333333333332%}.ms-u-xlPush0{right:auto}.ms-u-xlOffset11{margin-right:91.66666666666666%}.ms-u-xlOffset10{margin-right:83.33333333333334%}.ms-u-xlOffset9{margin-right:75%}.ms-u-xlOffset8{margin-right:66.66666666666666%}.ms-u-xlOffset7{margin-right:58.333333333333336%}.ms-u-xlOffset6{margin-right:50%}.ms-u-xlOffset5{margin-right:41.66666666666667%}.ms-u-xlOffset4{margin-right:33.33333333333333%}.ms-u-xlOffset3{margin-right:25%}.ms-u-xlOffset2{margin-right:16.666666666666664%}.ms-u-xlOffset1{margin-right:8.333333333333332%}.ms-u-xlOffset0{margin-right:0}}@media (min-width:1366px){.ms-u-xxl12{width:100%}.ms-u-xxl11{width:91.66666666666666%}.ms-u-xxl10{width:83.33333333333334%}.ms-u-xxl9{width:75%}.ms-u-xxl8{width:66.66666666666666%}.ms-u-xxl7{width:58.333333333333336%}.ms-u-xxl6{width:50%}.ms-u-xxl5{width:41.66666666666667%}.ms-u-xxl4{width:33.33333333333333%}.ms-u-xxl3{width:25%}.ms-u-xxl2{width:16.666666666666664%}.ms-u-xxl1{width:8.333333333333332%}.ms-u-xxlPull12{left:100%}.ms-u-xxlPull11{left:91.66666666666666%}.ms-u-xxlPull10{left:83.33333333333334%}.ms-u-xxlPull9{left:75%}.ms-u-xxlPull8{left:66.66666666666666%}.ms-u-xxlPull7{left:58.333333333333336%}.ms-u-xxlPull6{left:50%}.ms-u-xxlPull5{left:41.66666666666667%}.ms-u-xxlPull4{left:33.33333333333333%}.ms-u-xxlPull3{left:25%}.ms-u-xxlPull2{left:16.666666666666664%}.ms-u-xxlPull1{left:8.333333333333332%}.ms-u-xxlPull0{left:auto}.ms-u-xxlPush12{right:100%}.ms-u-xxlPush11{right:91.66666666666666%}.ms-u-xxlPush10{right:83.33333333333334%}.ms-u-xxlPush9{right:75%}.ms-u-xxlPush8{right:66.66666666666666%}.ms-u-xxlPush7{right:58.333333333333336%}.ms-u-xxlPush6{right:50%}.ms-u-xxlPush5{right:41.66666666666667%}.ms-u-xxlPush4{right:33.33333333333333%}.ms-u-xxlPush3{right:25%}.ms-u-xxlPush2{right:16.666666666666664%}.ms-u-xxlPush1{right:8.333333333333332%}.ms-u-xxlPush0{right:auto}.ms-u-xxlOffset11{margin-right:91.66666666666666%}.ms-u-xxlOffset10{margin-right:83.33333333333334%}.ms-u-xxlOffset9{margin-right:75%}.ms-u-xxlOffset8{margin-right:66.66666666666666%}.ms-u-xxlOffset7{margin-right:58.333333333333336%}.ms-u-xxlOffset6{margin-right:50%}.ms-u-xxlOffset5{margin-right:41.66666666666667%}.ms-u-xxlOffset4{margin-right:33.33333333333333%}.ms-u-xxlOffset3{margin-right:25%}.ms-u-xxlOffset2{margin-right:16.666666666666664%}.ms-u-xxlOffset1{margin-right:8.333333333333332%}.ms-u-xxlOffset0{margin-right:0}}@media (min-width:1920px){.ms-u-xxxl12{width:100%}.ms-u-xxxl11{width:91.66666666666666%}.ms-u-xxxl10{width:83.33333333333334%}.ms-u-xxxl9{width:75%}.ms-u-xxxl8{width:66.66666666666666%}.ms-u-xxxl7{width:58.333333333333336%}.ms-u-xxxl6{width:50%}.ms-u-xxxl5{width:41.66666666666667%}.ms-u-xxxl4{width:33.33333333333333%}.ms-u-xxxl3{width:25%}.ms-u-xxxl2{width:16.666666666666664%}.ms-u-xxxl1{width:8.333333333333332%}.ms-u-xxxlPull12{left:100%}.ms-u-xxxlPull11{left:91.66666666666666%}.ms-u-xxxlPull10{left:83.33333333333334%}.ms-u-xxxlPull9{left:75%}.ms-u-xxxlPull8{left:66.66666666666666%}.ms-u-xxxlPull7{left:58.333333333333336%}.ms-u-xxxlPull6{left:50%}.ms-u-xxxlPull5{left:41.66666666666667%}.ms-u-xxxlPull4{left:33.33333333333333%}.ms-u-xxxlPull3{left:25%}.ms-u-xxxlPull2{left:16.666666666666664%}.ms-u-xxxlPull1{left:8.333333333333332%}.ms-u-xxxlPull0{left:auto}.ms-u-xxxlPush12{right:100%}.ms-u-xxxlPush11{right:91.66666666666666%}.ms-u-xxxlPush10{right:83.33333333333334%}.ms-u-xxxlPush9{right:75%}.ms-u-xxxlPush8{right:66.66666666666666%}.ms-u-xxxlPush7{right:58.333333333333336%}.ms-u-xxxlPush6{right:50%}.ms-u-xxxlPush5{right:41.66666666666667%}.ms-u-xxxlPush4{right:33.33333333333333%}.ms-u-xxxlPush3{right:25%}.ms-u-xxxlPush2{right:16.666666666666664%}.ms-u-xxxlPush1{right:8.333333333333332%}.ms-u-xxxlPush0{right:auto}.ms-u-xxxlOffset11{margin-right:91.66666666666666%}.ms-u-xxxlOffset10{margin-right:83.33333333333334%}.ms-u-xxxlOffset9{margin-right:75%}.ms-u-xxxlOffset8{margin-right:66.66666666666666%}.ms-u-xxxlOffset7{margin-right:58.333333333333336%}.ms-u-xxxlOffset6{margin-right:50%}.ms-u-xxxlOffset5{margin-right:41.66666666666667%}.ms-u-xxxlOffset4{margin-right:33.33333333333333%}.ms-u-xxxlOffset3{margin-right:25%}.ms-u-xxxlOffset2{margin-right:16.666666666666664%}.ms-u-xxxlOffset1{margin-right:8.333333333333332%}.ms-u-xxxlOffset0{margin-right:0}}.ms-Grid{box-sizing:border-box;*zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:'';line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;*zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:'';line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-right:8px;padding-left:8px;box-sizing:border-box;float:right}.ms-Grid-col .ms-Grid{padding:0} \ No newline at end of file diff --git a/dist/js/jquery.fabric.js b/dist/js/jquery.fabric.js new file mode 100644 index 000000000..c9e266d69 --- /dev/null +++ b/dist/js/jquery.fabric.js @@ -0,0 +1,2451 @@ +//Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Breadcrumb component + * + * Shows the user's current location in a hierarchy and provides a means of navigating upward. + * + */ + +/** + * @namespace fabric + */ +var fabric = fabric || {}; +/** + * + * @param {HTMLElement} container - the target container for an instance of Breadcrumb + * @constructor + * + * If dynamically populating a list run the constructor after the list has been populated + * in the DOM. + */ +fabric.Breadcrumb = function(container) { + this.breadcrumb = container; + this.breadcrumbList = container.querySelector('.ms-Breadcrumb-list'); + this.listItems = container.querySelectorAll('.ms-Breadcrumb-listItem'); + this.contextMenu = container.querySelector('.ms-ContextualMenu'); + this.overflowButton = container.querySelector('.ms-Breadcrumb-overflowButton'); + this.overflowMenu = container.querySelector('.ms-Breadcrumb-overflowMenu'); + this.itemCollection = []; + this.currentMaxItems = 0; + this.init(); + +}; + +fabric.Breadcrumb.prototype = (function() { + + //medium breakpoint + var MEDIUM = 639; + + /** + * initializes component + */ + var init = function() { + _setListeners.call(this); + _createItemCollection.call(this); + _onResize.call(this, null); + }; + + /** + * Adds a breadcrumb item to a breadcrumb + * @param itemLabel {String} the item's text label + * @param itemLink {String} the item's href link + * @param tabIndex {number} the item's tabIndex + */ + var addItem = function(itemLabel, itemLink, tabIndex) { + this.itemCollection.push({text: itemLabel, link: itemLink, tabIndex: tabIndex}); + _updateBreadcrumbs.call(this); + }; + + /** + * Removes a breadcrumb item by item label in the breadcrumbs list + * @param itemLabel {String} the item's text label + */ + var removeItemByLabel = function(itemLabel) { + var i = this.itemCollection.length; + while (i--) { + if (this.itemCollection[i].text === itemLabel) { + this.itemCollection.splice(i, 1); + } + } + _updateBreadcrumbs.call(this); + }; + + /** + * removes a breadcrumb item by position in the breadcrumbs list + * index starts at 0 + * @param itemLabel {String} the item's text label + * @param itemLink {String} the item's href link + * @param tabIndex {number} the item's tabIndex + */ + var removeItemByPosition = function(value) { + this.itemCollection.splice(value, 1); + _updateBreadcrumbs.call(this); + }; + + /** + * create internal model of list items from DOM + */ + var _createItemCollection = function() { + var length = this.listItems.length; + var i = 0; + var item; + var text; + var link; + var tabIndex; + + for (i; i < length; i++) { + item = this.listItems[i].querySelector('.ms-Breadcrumb-itemLink'); + text = item.textContent; + link = item.getAttribute('href'); + tabIndex = parseInt(item.getAttribute('tabindex'), 10); + this.itemCollection.push({text: text, link: link, tabIndex: tabIndex}); + } + }; + + /** + * Re-render lists on resize + * + */ + var _onResize = function() { + _closeOverflow.call(this, null); + _renderListOnResize.call(this); + }; + + /** + * render breadcrumbs and overflow menus on resize + */ + var _renderListOnResize = function() { + var maxItems = window.innerWidth > MEDIUM ? 4 : 2; + if (maxItems !== this.currentMaxItems) { + _updateBreadcrumbs.call(this); + } + + this.currentMaxItems = maxItems; + }; + + /** + * creates the overflow menu + */ + var _addItemsToOverflow = function(maxItems) { + _resetList.call(this, this.contextMenu); + var end = this.itemCollection.length - maxItems; + var overflowItems = this.itemCollection.slice(0, end); + var contextMenu = this.contextMenu; + overflowItems.forEach(function(item) { + var li = document.createElement('li'); + li.className = 'ms-ContextualMenu-item'; + if(!isNaN(item.tabIndex)) { + li.setAttribute('tabindex', item.tabIndex); + } + var a = document.createElement('a'); + a.className = 'ms-ContextualMenu-link'; + if (item.link !== null) { + a.setAttribute('href', item.link); + } + a.textContent = item.text; + li.appendChild(a); + contextMenu.appendChild(li); + }); + }; + + /** + * creates the breadcrumbs + */ + var _addBreadcrumbItems = function(maxItems) { + _resetList.call(this, this.breadcrumbList); + var i = this.itemCollection.length - maxItems; + i = i < 0 ? 0 : i; + if (i >= 0) { + for (i; i < this.itemCollection.length; i++) { + var listItem = document.createElement('li'); + var item = this.itemCollection[i]; + var a = document.createElement('a'); + var chevron = document.createElement('i'); + listItem.className = 'ms-Breadcrumb-listItem'; + a.className = 'ms-Breadcrumb-itemLink'; + if (item.link !== null) { + a.setAttribute('href', item.link); + } + if (!isNaN(item.tabIndex)) { + a.setAttribute('tabindex', item.tabIndex); + } + a.textContent = item.text; + chevron.className = 'ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight'; + listItem.appendChild(a); + listItem.appendChild(chevron); + this.breadcrumbList.appendChild(listItem); + } + } + }; + + /** + * resets a list by removing its children + */ + var _resetList = function(list) { + while (list.firstChild) { + list.removeChild(list.firstChild); + } + }; + + /** + * opens the overflow menu + */ + var _openOverflow = function(event) { + if (this.overflowMenu.className.indexOf(' is-open') === -1) { + this.overflowMenu.className += ' is-open'; + removeOutlinesOnClick.call(this, event); + // force focus rect onto overflow button + this.overflowButton.focus(); + } + }; + + var _overflowKeyPress = function(event) { + if (event.keyCode === 13) { + _openOverflow.call(this, event); + } + }; + + /** + * closes the overflow menu + */ + var _closeOverflow = function(event) { + if (!event || event.target !== this.overflowButton) { + _removeClass.call(this, this.overflowMenu, ' is-open'); + } + }; + + /** + * utility that removes a class from an element + */ + var _removeClass = function (element, value) { + var index = element.className.indexOf(value); + if (index > -1) { + element.className = element.className.substring(0, index); + } + }; + + /** + * sets handlers for resize and button click events + */ + var _setListeners = function() { + window.addEventListener('resize', _onResize.bind(this), false); + document.addEventListener('click', _closeOverflow.bind(this), false); + this.overflowButton.addEventListener('click', _openOverflow.bind(this), false); + this.overflowButton.addEventListener('keypress', _overflowKeyPress.bind(this), false); + this.breadcrumbList.addEventListener('click', removeOutlinesOnClick.bind(this), false); + }; + + /** + * removes focus outlines so they don't linger after click + */ + var removeOutlinesOnClick = function(event) { + event.target.blur(); + }; + + /** + * updates the breadcrumbs and overflow menu + */ + var _updateBreadcrumbs = function() { + var maxItems = window.innerWidth > MEDIUM ? 4 : 2; + if (this.itemCollection.length > maxItems) { + this.breadcrumb.className += ' is-overflow'; + } else { + _removeClass.call(this, this.breadcrumb, ' is-overflow'); + } + + _addBreadcrumbItems.call(this, maxItems); + _addItemsToOverflow.call(this, maxItems); + }; + + return { + init: init, + addItem: addItem, + removeItemByLabel: removeItemByLabel, + removeItemByPosition: removeItemByPosition + }; + +}()); + + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Command Bar Plugin + */ + +(function ($) { + $.fn.CommandBar = function () { + + var createMenuItem = function(text) { + var item = '
      • '; + item += text; + item += '
        • '; + + return item; + }; + + var saveCommands = function($commands, $commandWidth, $commandarea) { + var commands = []; + $commands.each(function() { + var $Item = $(this); + var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10 + commands.push({ jquery: $Item, rightOffset: $rightOffset}); + }); + + return commands; + }; + + var processCommands = function(commands, width, overflowwidth) { + var overFlowCommands = []; + + for(var i=0; i < commands.length; i++) { + var $Item = commands[i].jquery; + var rightOffset = commands[i].rightOffset; + + // If the command is outside the right boundaries add to overflow items + if(!$Item.hasClass('ms-CommandBarItem-overflow')) { + if((rightOffset + overflowwidth) > width) { + overFlowCommands.push($Item); + } else { + // Make sure item is displayed + $Item.removeClass('is-hidden'); + } + } + } + return overFlowCommands; + }; + + var processOverflow = function(overFlowCommands, $oCommand, $menu) { + var overflowStrings = ''; + + if(overFlowCommands.length > 0) { + $oCommand.addClass("is-visible"); + // Empty menu + $menu.html(''); + + // Add overflowed commands to ContextualMenu + for(var i = 0; i < overFlowCommands.length; i++) { + var $Item = $(overFlowCommands[i]); + // Hide Element in CommandBar + $Item.addClass('is-hidden'); + var commandBarItemText = $Item.find('.ms-CommandBarItem-commandText').text(); + overflowStrings += createMenuItem(commandBarItemText); + } + $menu.html(overflowStrings); + } else { + $oCommand.removeClass("is-visible"); + } + }; + + /** Go through each CommandBar we've been given. */ + return this.each(function () { + var $CommandBar = $(this); + var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea'); + var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow'); + var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow'); + var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth(); + var $OverflowMenu = $CommandBar.find('.ms-CommandBar-overflowMenu'); + var $SearchBox = $CommandBar.find('.ms-CommandBarSearch'); + var mobileSwitch = false; + var overFlowCommands; + var allCommands; + + // Go through process and save commands + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + + // Initiate process commands and add commands to overflow on load + overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + // Set Search Behavior + if($(window).width() < 640) { + + $('.ms-CommandBarSearch-iconSearchWrapper').click(function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + } + + // Add resize event handler on commandBar + $(window).resize(function() { + var overFlowCommands; + + if($(window).width() < 640 && mobileSwitch === false) { + // Go through process and save commands + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + + mobileSwitch = true; + + // Search Behavior + $('.ms-CommandBarSearch-iconSearchWrapper').unbind(); + $('.ms-CommandBarSearch-iconSearchWrapper').click(function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + } else if($(window).width() > 639 && mobileSwitch === true) { + // Go through process and save commands + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + + mobileSwitch = false; + $('.ms-CommandBarSearch').unbind(); + + } + + // Initiate process commands and add commands to overflow on load + overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + }); + + // Hook up contextual menu + $OverflowCommand.click(function() { + $OverflowMenu.toggleClass('is-open'); + }); + + $OverflowCommand.focusout(function() { + $OverflowMenu.removeClass('is-open'); + }); + + $SearchBox.find('.ms-CommandBarSearch-input').click(function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + $SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + // When clicking the x clear the SearchBox and put state back to normal + $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() { + var $input = $(this).parent().find('.ms-CommandBarSearch-input'); + $input.val(''); + $input.parent().removeClass('is-active'); + }); + + $SearchBox.parent().find('.ms-CommandBarSearch-input').blur(function() { + var $input = $(this); + $input.val(''); + $input.parent().removeClass('is-active'); + }); + + }); + }; +})(jQuery); +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Contextual Menu Plugin + */ +(function ($) { + $.fn.ContextualMenu = function () { + + /** Go through each nav bar we've been given. */ + return this.each(function () { + + var $contextualMenu = $(this); + + + // Set selected states. + $contextualMenu.on('click', '.ms-ContextualMenu-link:not(.is-disabled)', function(event) { + event.preventDefault(); + + // Check if multiselect - set selected states + if ( $contextualMenu.hasClass('ms-ContextualMenu--multiselect') ) { + + // If already selected, remove selection; if not, add selection + if ( $(this).hasClass('is-selected') ) { + $(this).removeClass('is-selected'); + } + else { + $(this).addClass('is-selected'); + } + + } + // All other contextual menu variants + else { + + // Deselect all of the items and close any menus. + $('.ms-ContextualMenu-link') + .removeClass('is-selected') + .siblings('.ms-ContextualMenu') + .removeClass('is-open'); + + // Select this item. + $(this).addClass('is-selected'); + + // If this item has a menu, open it. + if ($(this).hasClass('ms-ContextualMenu-link--hasMenu')) { + $(this).siblings('.ms-ContextualMenu:first').addClass('is-open'); + + // Open the menu without bubbling up the click event, + // which can cause the menu to close. + event.stopPropagation(); + } + + } + + + }); + + }); + }; +})(jQuery); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +(function ($) { + + /** + * DatePicker Plugin + */ + + $.fn.DatePicker = function (options) { + + return this.each(function () { + + /** Set up variables and run the Pickadate plugin. */ + var $datePicker = $(this); + var $dateField = $datePicker.find('.ms-TextField-field').pickadate($.extend({ + // Strings and translations. + weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], + + // Don't render the buttons + today: '', + clear: '', + close: '', + + // Events + onStart: function() { + initCustomView($datePicker); + }, + + // Classes + klass: { + + // The element states + input: 'ms-DatePicker-input', + active: 'ms-DatePicker-input--active', + + // The root picker and states + picker: 'ms-DatePicker-picker', + opened: 'ms-DatePicker-picker--opened', + focused: 'ms-DatePicker-picker--focused', + + // The picker holder + holder: 'ms-DatePicker-holder', + + // The picker frame, wrapper, and box + frame: 'ms-DatePicker-frame', + wrap: 'ms-DatePicker-wrap', + box: 'ms-DatePicker-dayPicker', + + // The picker header + header: 'ms-DatePicker-header', + + // Month & year labels + month: 'ms-DatePicker-month', + year: 'ms-DatePicker-year', + + // Table of dates + table: 'ms-DatePicker-table', + + // Weekday labels + weekdays: 'ms-DatePicker-weekday', + + // Day states + day: 'ms-DatePicker-day', + disabled: 'ms-DatePicker-day--disabled', + selected: 'ms-DatePicker-day--selected', + highlighted: 'ms-DatePicker-day--highlighted', + now: 'ms-DatePicker-day--today', + infocus: 'ms-DatePicker-day--infocus', + outfocus: 'ms-DatePicker-day--outfocus', + + } + },options||{})); + var $picker = $dateField.pickadate('picker'); + + /** Respond to built-in picker events. */ + $picker.on({ + render: function() { + updateCustomView($datePicker); + }, + open: function() { + scrollUp($datePicker); + } + }); + + }); + }; + + /** + * After the Pickadate plugin starts, this function + * adds additional controls to the picker view. + */ + function initCustomView($datePicker) { + + /** Get some variables ready. */ + var $monthControls = $datePicker.find('.ms-DatePicker-monthComponents'); + var $goToday = $datePicker.find('.ms-DatePicker-goToday'); + var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker'); + var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker'); + var $pickerWrapper = $datePicker.find('.ms-DatePicker-wrap'); + var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker'); + + /** Move the month picker into position. */ + $monthControls.appendTo($pickerWrapper); + $goToday.appendTo($pickerWrapper); + $monthPicker.appendTo($pickerWrapper); + $yearPicker.appendTo($pickerWrapper); + + /** Update the custom view. */ + updateCustomView($datePicker); + + /** Move back one month. */ + $monthControls.on('click', '.js-prevMonth', function(event) { + event.preventDefault(); + var newMonth = $picker.get('highlight').month - 1; + changeHighlightedDate($picker, null, newMonth, null); + }); + + /** Move ahead one month. */ + $monthControls.on('click', '.js-nextMonth', function(event) { + event.preventDefault(); + var newMonth = $picker.get('highlight').month + 1; + changeHighlightedDate($picker, null, newMonth, null); + }); + + /** Move back one year. */ + $monthPicker.on('click', '.js-prevYear', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year - 1; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Move ahead one year. */ + $monthPicker.on('click', '.js-nextYear', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year + 1; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Move back one decade. */ + $yearPicker.on('click', '.js-prevDecade', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year - 10; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Move ahead one decade. */ + $yearPicker.on('click', '.js-nextDecade', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year + 10; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Go to the current date, shown in the day picking view. */ + $goToday.click(function(event) { + event.preventDefault(); + + /** Select the current date, while keeping the picker open. */ + var now = new Date(); + $picker.set('select', [now.getFullYear(), now.getMonth(), now.getDate()]); + + /** Switch to the default (calendar) view. */ + $datePicker.removeClass('is-pickingMonths').removeClass('is-pickingYears'); + + }); + + /** Change the highlighted month. */ + $monthPicker.on('click', '.js-changeDate', function(event) { + event.preventDefault(); + + /** Get the requested date from the data attributes. */ + var newYear = $(this).attr('data-year'); + var newMonth = $(this).attr('data-month'); + var newDay = $(this).attr('data-day'); + + /** Update the date. */ + changeHighlightedDate($picker, newYear, newMonth, newDay); + + /** If we've been in the "picking months" state on mobile, remove that state so we show the calendar again. */ + if ($datePicker.hasClass('is-pickingMonths')) { + $datePicker.removeClass('is-pickingMonths'); + } + }); + + /** Change the highlighted year. */ + $yearPicker.on('click', '.js-changeDate', function(event) { + event.preventDefault(); + + /** Get the requested date from the data attributes. */ + var newYear = $(this).attr('data-year'); + var newMonth = $(this).attr('data-month'); + var newDay = $(this).attr('data-day'); + + /** Update the date. */ + changeHighlightedDate($picker, newYear, newMonth, newDay); + + /** If we've been in the "picking years" state on mobile, remove that state so we show the calendar again. */ + if ($datePicker.hasClass('is-pickingYears')) { + $datePicker.removeClass('is-pickingYears'); + } + }); + + /** Switch to the default state. */ + $monthPicker.on('click', '.js-showDayPicker', function() { + $datePicker.removeClass('is-pickingMonths'); + $datePicker.removeClass('is-pickingYears'); + }); + + /** Switch to the is-pickingMonths state. */ + $monthControls.on('click', '.js-showMonthPicker', function() { + $datePicker.toggleClass('is-pickingMonths'); + }); + + /** Switch to the is-pickingYears state. */ + $monthPicker.on('click', '.js-showYearPicker', function() { + $datePicker.toggleClass('is-pickingYears'); + }); + + } + + /** Change the highlighted date. */ + function changeHighlightedDate($picker, newYear, newMonth, newDay) { + + /** All letiables are optional. If not provided, default to the current value. */ + if (typeof newYear === "undefined" || newYear === null) { + newYear = $picker.get("highlight").year; + } + if (typeof newMonth === "undefined" || newMonth === null) { + newMonth = $picker.get("highlight").month; + } + if (typeof newDay === "undefined" || newDay === null) { + newDay = $picker.get("highlight").date; + } + + /** Update it. */ + $picker.set('highlight', [newYear, newMonth, newDay]); + + } + + + /** Whenever the picker renders, do our own rendering on the custom controls. */ + function updateCustomView($datePicker) { + + /** Get some variables ready. */ + var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker'); + var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker'); + var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker'); + + /** Set the correct year. */ + $monthPicker.find('.ms-DatePicker-currentYear').text($picker.get('view').year); + + /** Highlight the current month. */ + $monthPicker.find('.ms-DatePicker-monthOption').removeClass('is-highlighted'); + $monthPicker.find('.ms-DatePicker-monthOption[data-month="' + $picker.get('highlight').month + '"]').addClass('is-highlighted'); + + /** Generate the grid of years for the year picker view. */ + + // Start by removing any existing generated output. */ + $yearPicker.find('.ms-DatePicker-currentDecade').remove(); + $yearPicker.find('.ms-DatePicker-optionGrid').remove(); + + // Generate the output by going through the years. + var startingYear = $picker.get('highlight').year - 11; + var decadeText = startingYear + " - " + (startingYear + 11); + var output = '
        ' + decadeText + '
        '; + output += '
        '; + for (var year = startingYear; year < (startingYear + 12); year++) { + output += '' + year +''; + } + output += '
        '; + + // Output the title and grid of years generated above. + $yearPicker.append(output); + + /** Highlight the current year. */ + $yearPicker.find('.ms-DatePicker-yearOption').removeClass('is-highlighted'); + $yearPicker.find('.ms-DatePicker-yearOption[data-year="' + $picker.get('highlight').year + '"]').addClass('is-highlighted'); + } + + /** Scroll the page up so that the field the date picker is attached to is at the top. */ + function scrollUp($datePicker) { + $('html, body').animate({ + scrollTop: $datePicker.offset().top + }, 367); + } + +})(jQuery); + +!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a('")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('
        ').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('
        ').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+""):""},lead:function(a){return(10>a?"0":"")+a},trigger:function(a,b,c){return"function"==typeof a?a.apply(b,c||[]):a},digits:function(a){return/\d/.test(a[1])?2:1},isDate:function(a){return{}.toString.call(a).indexOf("Date")>-1&&this.isInteger(a.getUTCDate())},isInteger:function(a){return{}.toString.call(a).indexOf("Number")>-1&&a%1===0},ariaAttr:g},b.extend=function(c,d){a.fn[c]=function(e,f){var g=this.data(c);return"picker"==e?g:g&&"string"==typeof e?b._.trigger(g[e],g,[f]):this.each(function(){var f=a(this);f.data(c)||new b(this,c,d,e)})},a.fn[c].defaults=d.defaults},b}),function(a){"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):a(Picker,jQuery)}(function(a,b){function c(a,b){var c=this,d=a.$node[0],e=d.value,f=a.$node.data("value"),g=f||e,h=f?b.formatSubmit:b.format,i=function(){return d.currentStyle?"rtl"==d.currentStyle.direction:"rtl"==getComputedStyle(a.$root[0]).direction};c.settings=b,c.$node=a.$node,c.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},c.item={},c.item.clear=null,c.item.disable=(b.disable||[]).slice(0),c.item.enable=-function(a){return a[0]===!0?a.shift():-1}(c.item.disable),c.set("min",b.min).set("max",b.max).set("now"),g?c.set("select",g,{format:h}):c.set("select",null).set("highlight",c.item.now),c.key={40:7,38:-7,39:function(){return i()?-1:1},37:function(){return i()?1:-1},go:function(a){var b=c.item.highlight,d=new Date(Date.UTC(b.year,b.month,b.date+a));c.set("highlight",d,{interval:a}),this.render()}},a.on("render",function(){a.$root.find("."+b.klass.selectMonth).on("change",function(){var c=this.value;c&&(a.set("highlight",[a.get("view").year,c,a.get("highlight").date]),a.$root.find("."+b.klass.selectMonth).trigger("focus"))}),a.$root.find("."+b.klass.selectYear).on("change",function(){var c=this.value;c&&(a.set("highlight",[c,a.get("view").month,a.get("highlight").date]),a.$root.find("."+b.klass.selectYear).trigger("focus"))})},1).on("open",function(){var d="";c.disabled(c.get("now"))&&(d=":not(."+b.klass.buttonToday+")"),a.$root.find("button"+d+", select").attr("disabled",!1)},1).on("close",function(){a.$root.find("button, select").attr("disabled",!0)},1)}var d=7,e=6,f=a._;c.prototype.set=function(a,b,c){var d=this,e=d.item;return null===b?("clear"==a&&(a="select"),e[a]=b,d):(e["enable"==a?"disable":"flip"==a?"enable":a]=d.queue[a].split(" ").map(function(e){return b=d[e](a,b,c)}).pop(),"select"==a?d.set("highlight",e.select,c):"highlight"==a?d.set("view",e.highlight,c):a.match(/^(flip|min|max|disable|enable)$/)&&(e.select&&d.disabled(e.select)&&d.set("select",e.select,c),e.highlight&&d.disabled(e.highlight)&&d.set("highlight",e.highlight,c)),d)},c.prototype.get=function(a){return this.item[a]},c.prototype.create=function(a,c,d){var e,g=this;return c=void 0===c?a:c,c==-1/0||1/0==c?e=c:b.isPlainObject(c)&&f.isInteger(c.pick)?c=c.obj:b.isArray(c)?(c=new Date(Date.UTC(c[0],c[1],c[2])),c=f.isDate(c)?c:g.create().obj):c=f.isInteger(c)?g.normalize(new Date(c),d):f.isDate(c)?g.normalize(c,d):g.now(a,c,d),{year:e||c.getUTCFullYear(),month:e||c.getUTCMonth(),date:e||c.getUTCDate(),day:e||c.getUTCDay(),obj:e||c,pick:e||c.getTime()}},c.prototype.createRange=function(a,c){var d=this,e=function(a){return a===!0||b.isArray(a)||f.isDate(a)?d.create(a):a};return f.isInteger(a)||(a=e(a)),f.isInteger(c)||(c=e(c)),f.isInteger(a)&&b.isPlainObject(c)?a=[c.year,c.month,c.date+a]:f.isInteger(c)&&b.isPlainObject(a)&&(c=[a.year,a.month,a.date+c]),{from:e(a),to:e(c)}},c.prototype.withinRange=function(a,b){return a=this.createRange(a.from,a.to),b.pick>=a.from.pick&&b.pick<=a.to.pick},c.prototype.overlapRanges=function(a,b){var c=this;return a=c.createRange(a.from,a.to),b=c.createRange(b.from,b.to),c.withinRange(a,b.from)||c.withinRange(a,b.to)||c.withinRange(b,a.from)||c.withinRange(b,a.to)},c.prototype.now=function(a,b,c){return b=new Date,c&&c.rel&&b.setUTCDate(b.getUTCDate()+c.rel),this.normalize(b,c)},c.prototype.navigate=function(a,c,d){var e,f,g,h,i=b.isArray(c),j=b.isPlainObject(c),k=this.item.view;if(i||j){for(j?(f=c.year,g=c.month,h=c.date):(f=+c[0],g=+c[1],h=+c[2]),d&&d.nav&&k&&k.month!==g&&(f=k.year,g=k.month),e=new Date(Date.UTC(f,g+(d&&d.nav?d.nav:0),1)),f=e.getUTCFullYear(),g=e.getUTCMonth();new Date(Date.UTC(f,g,h)).getUTCMonth()!==g;)h-=1;c=[f,g,h]}return c},c.prototype.normalize=function(a){return a.setUTCHours(0,0,0,0),a},c.prototype.measure=function(a,b){var c=this;return b?"string"==typeof b?b=c.parse(a,b):f.isInteger(b)&&(b=c.now(a,b,{rel:b})):b="min"==a?-1/0:1/0,b},c.prototype.viewset=function(a,b){return this.create([b.year,b.month,1])},c.prototype.validate=function(a,c,d){var e,g,h,i,j=this,k=c,l=d&&d.interval?d.interval:1,m=-1===j.item.enable,n=j.item.min,o=j.item.max,p=m&&j.item.disable.filter(function(a){if(b.isArray(a)){var d=j.create(a).pick;dc.pick&&(g=!0)}return f.isInteger(a)}).length;if((!d||!d.nav)&&(!m&&j.disabled(c)||m&&j.disabled(c)&&(p||e||g)||!m&&(c.pick<=n.pick||c.pick>=o.pick)))for(m&&!p&&(!g&&l>0||!e&&0>l)&&(l*=-1);j.disabled(c)&&(Math.abs(l)>1&&(c.monthk.month)&&(c=k,l=l>0?1:-1),c.pick<=n.pick?(h=!0,l=1,c=j.create([n.year,n.month,n.date+(c.pick===n.pick?0:-1)])):c.pick>=o.pick&&(i=!0,l=-1,c=j.create([o.year,o.month,o.date+(c.pick===o.pick?0:1)])),!h||!i);)c=j.create([c.year,c.month,c.date+l]);return c},c.prototype.disabled=function(a){var c=this,d=c.item.disable.filter(function(d){return f.isInteger(d)?a.day===(c.settings.firstDay?d:d-1)%7:b.isArray(d)||f.isDate(d)?a.pick===c.create(d).pick:b.isPlainObject(d)?c.withinRange(d,a):void 0});return d=d.length&&!d.filter(function(a){return b.isArray(a)&&"inverted"==a[3]||b.isPlainObject(a)&&a.inverted}).length,-1===c.item.enable?!d:d||a.pickc.item.max.pick},c.prototype.parse=function(a,b,c){var d=this,e={};return b&&"string"==typeof b?(c&&c.format||(c=c||{},c.format=d.settings.format),d.formats.toArray(c.format).map(function(a){var c=d.formats[a],g=c?f.trigger(c,d,[b,e]):a.replace(/^!/,"").length;c&&(e[a]=b.substr(0,g)),b=b.substr(g)}),[e.yyyy||e.yy,+(e.mm||e.m)-1,e.dd||e.d]):b},c.prototype.formats=function(){function a(a,b,c){var d=a.match(/\w+/)[0];return c.mm||c.m||(c.m=b.indexOf(d)+1),d.length}function b(a){return a.match(/\w+/)[0].length}return{d:function(a,b){return a?f.digits(a):b.date},dd:function(a,b){return a?2:f.lead(b.date)},ddd:function(a,c){return a?b(a):this.settings.weekdaysShort[c.day]},dddd:function(a,c){return a?b(a):this.settings.weekdaysFull[c.day]},m:function(a,b){return a?f.digits(a):b.month+1},mm:function(a,b){return a?2:f.lead(b.month+1)},mmm:function(b,c){var d=this.settings.monthsShort;return b?a(b,d,c):d[c.month]},mmmm:function(b,c){var d=this.settings.monthsFull;return b?a(b,d,c):d[c.month]},yy:function(a,b){return a?2:(""+b.year).slice(2)},yyyy:function(a,b){return a?4:b.year},toArray:function(a){return a.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(a,b){var c=this;return c.formats.toArray(a).map(function(a){return f.trigger(c.formats[a],c,[0,b])||a.replace(/^!/,"")}).join("")}}}(),c.prototype.isDateExact=function(a,c){var d=this;return f.isInteger(a)&&f.isInteger(c)||"boolean"==typeof a&&"boolean"==typeof c?a===c:(f.isDate(a)||b.isArray(a))&&(f.isDate(c)||b.isArray(c))?d.create(a).pick===d.create(c).pick:b.isPlainObject(a)&&b.isPlainObject(c)?d.isDateExact(a.from,c.from)&&d.isDateExact(a.to,c.to):!1},c.prototype.isDateOverlap=function(a,c){var d=this,e=d.settings.firstDay?1:0;return f.isInteger(a)&&(f.isDate(c)||b.isArray(c))?(a=a%7+e,a===d.create(c).day+1):f.isInteger(c)&&(f.isDate(a)||b.isArray(a))?(c=c%7+e,c===d.create(a).day+1):b.isPlainObject(a)&&b.isPlainObject(c)?d.overlapRanges(a,c):!1},c.prototype.flipEnable=function(a){var b=this.item;b.enable=a||(-1==b.enable?1:-1)},c.prototype.deactivate=function(a,c){var d=this,e=d.item.disable.slice(0);return"flip"==c?d.flipEnable():c===!1?(d.flipEnable(1),e=[]):c===!0?(d.flipEnable(-1),e=[]):c.map(function(a){for(var c,g=0;gi;i+=1){if(h=e[i],d.isDateExact(h,a)){c=e[i]=null,j=!0;break}if(d.isDateOverlap(h,a)){b.isPlainObject(a)?(a.inverted=!0,c=a):b.isArray(a)?(c=a,c[3]||c.push("inverted")):f.isDate(a)&&(c=[a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),"inverted"]);break}}if(c)for(i=0;g>i;i+=1)if(d.isDateExact(e[i],a)){e[i]=null;break}if(j)for(i=0;g>i;i+=1)if(d.isDateOverlap(e[i],a)){e[i]=null;break}c&&e.push(c)}),e.filter(function(a){return null!=a})},c.prototype.nodes=function(a){var b=this,c=b.settings,g=b.item,h=g.now,i=g.select,j=g.highlight,k=g.view,l=g.disable,m=g.min,n=g.max,o=function(a,b){return c.firstDay&&(a.push(a.shift()),b.push(b.shift())),f.node("thead",f.node("tr",f.group({min:0,max:d-1,i:1,node:"th",item:function(d){return[a[d],c.klass.weekdays,'scope=col title="'+b[d]+'"']}})))}((c.showWeekdaysFull?c.weekdaysFull:c.weekdaysShort).slice(0),c.weekdaysFull.slice(0)),p=function(a){return f.node("div"," ",c.klass["nav"+(a?"Next":"Prev")]+(a&&k.year>=n.year&&k.month>=n.month||!a&&k.year<=m.year&&k.month<=m.month?" "+c.klass.navDisabled:""),"data-nav="+(a||-1)+" "+f.ariaAttr({role:"button",components:b.$node[0].id+"_table"})+' title="'+(a?c.labelMonthNext:c.labelMonthPrev)+'"')},q=function(){var d=c.showMonthsShort?c.monthsShort:c.monthsFull;return c.selectMonths?f.node("select",f.group({min:0,max:11,i:1,node:"option",item:function(a){return[d[a],0,"value="+a+(k.month==a?" selected":"")+(k.year==m.year&&an.month?" disabled":"")]}}),c.klass.selectMonth,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelMonthSelect+'"'):f.node("div",d[k.month],c.klass.month)},r=function(){var d=k.year,e=c.selectYears===!0?5:~~(c.selectYears/2);if(e){var g=m.year,h=n.year,i=d-e,j=d+e;if(g>i&&(j+=g-i,i=g),j>h){var l=i-g,o=j-h;i-=l>o?o:l,j=h}return f.node("select",f.group({min:i,max:j,i:1,node:"option",item:function(a){return[a,0,"value="+a+(d==a?" selected":"")]}}),c.klass.selectYear,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelYearSelect+'"')}return f.node("div",d,c.klass.year)};return f.node("div",(c.selectYears?r()+q():q()+r())+p()+p(1),c.klass.header)+f.node("table",o+f.node("tbody",f.group({min:0,max:e-1,i:1,node:"tr",item:function(a){var e=c.firstDay&&0===b.create([k.year,k.month,1]).day?-7:0;return[f.group({min:d*a-k.day+e+1,max:function(){return this.min+d-1},i:1,node:"td",item:function(a){a=b.create([k.year,k.month,a+(c.firstDay?1:0)]);var d=i&&i.pick==a.pick,e=j&&j.pick==a.pick,g=l&&b.disabled(a)||a.pickn.pick;return[f.node("div",a.date,function(b){return b.push(k.month==a.month?c.klass.infocus:c.klass.outfocus),h.pick==a.pick&&b.push(c.klass.now),d&&b.push(c.klass.selected),e&&b.push(c.klass.highlighted),g&&b.push(c.klass.disabled),b.join(" ")}([c.klass.day]),"data-pick="+a.pick+" "+f.ariaAttr({role:"gridcell",selected:d&&b.$node.val()===f.trigger(b.formats.toString,b,[c.format,a])?!0:null,activedescendant:e?!0:null,disabled:g?!0:null})),"",f.ariaAttr({role:"presentation"})]}})]}})),c.klass.table,'id="'+b.$node[0].id+'_table" '+f.ariaAttr({role:"grid",components:b.$node[0].id,readonly:!0}))+f.node("div",f.node("button",c.today,c.klass.buttonToday,"type=button data-pick="+h.pick+(a&&!b.disabled(h)?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.clear,c.klass.buttonClear,"type=button data-clear=1"+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.close,c.klass.buttonClose,"type=button data-close=true "+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id})),c.klass.footer)},c.defaults=function(a){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:a+"table",header:a+"header",navPrev:a+"nav--prev",navNext:a+"nav--next",navDisabled:a+"nav--disabled",month:a+"month",year:a+"year",selectMonth:a+"select--month",selectYear:a+"select--year",weekdays:a+"weekday",day:a+"day",disabled:a+"day--disabled",selected:a+"day--selected",highlighted:a+"day--highlighted",now:a+"day--today",infocus:a+"day--infocus",outfocus:a+"day--outfocus",footer:a+"footer",buttonClear:a+"button--clear",buttonToday:a+"button--today",buttonClose:a+"button--close"}}}(a.klasses().picker+"__"),a.extend("pickadate",c)}); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Dialog Plugin + * + * Adds basic demonstration functionality to .ms-Dialog components. + * + * @param {jQuery Object} One or more .ms-Dialog components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.Dialog = function () { + + /** Iterate through the sample buttons, which can be used to open the Dialogs. */ + $(".js-DialogAction--open").each(function () { + /** Open the associated dialog on click. */ + $(this).on('click', function () { + var target = $(this).data("target"); + $(target).show(); + }); + }); + + + return this.each(function () { + var dialog = this; + + /** Have the dialogs hidden for their initial state */ + $(dialog).hide(); + + /** Have the close buttons close the Dialog. */ + $(dialog).find(".js-DialogAction--close").each(function() { + $(this).on('click', function () { + $(dialog).hide(); + }); + }); + + /** Have the action buttons close the Dialog, though you would usually do some specific action per button. */ + $(dialog).find(".ms-Dialog-action").on('click', function () { + $(dialog).hide(); + }); + + }); + }; +})(jQuery); + +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Dropdown Plugin + * + * Given .ms-Dropdown containers with generic ")[0],y.on("change."+g.id,function(){b._hidden.value=a.value?b.get("select",k.formatSubmit):""}).after(b._hidden)}function p(e){e.stopPropagation(),"focus"==e.type&&b.$root.addClass(P.focused),b.open()}if(!a)return t;var v=!1,g={id:a.id||"P"+Math.abs(~~(Math.random()*new Date))},k=r?e.extend(!0,{},r.defaults,d):d||{},P=e.extend({},t.klasses(),k.klass),y=e(a),C=function(){return this.start()},b=C.prototype={constructor:C,$node:y,start:function(){return g&&g.start?b:(g.methods={},g.start=!0,g.open=!1,g.type=a.type,a.autofocus=a==document.activeElement,a.readOnly=!k.editable,a.id=a.id||g.id,"text"!=a.type&&(a.type="text"),b.component=new r(b,k),b.$root=e(t._.node("div",m(),P.picker,'id="'+a.id+'_root"')),h(),k.formatSubmit&&f(),u(),k.container?e(k.container).append(b.$root):y.after(b.$root),b.on({start:b.component.onStart,render:b.component.onRender,stop:b.component.onStop,open:b.component.onOpen,close:b.component.onClose,set:b.component.onSet}).on({start:k.onStart,render:k.onRender,stop:k.onStop,open:k.onOpen,close:k.onClose,set:k.onSet}),v=i(b.$root.children()[0]),a.autofocus&&b.open(),b.trigger("start").trigger("render"))},render:function(e){return e?b.$root.html(m()):b.$root.find("."+P.box).html(b.component.nodes(g.open)),b.trigger("render")},stop:function(){return g.start?(b.close(),b._hidden&&b._hidden.parentNode.removeChild(b._hidden),b.$root.remove(),y.removeClass(P.input).removeData(o),setTimeout(function(){y.off("."+g.id)},0),a.type=g.type,a.readOnly=!1,b.trigger("stop"),g.methods={},g.start=!1,b):b},open:function(i){return g.open?b:(y.addClass(P.active),s(a,"expanded",!0),setTimeout(function(){b.$root.addClass(P.opened),s(b.$root[0],"hidden",!1)},0),i!==!1&&(g.open=!0,v&&c.css("overflow","hidden").css("padding-right","+="+n()),y.trigger("focus"),l.on("click."+g.id+" focusin."+g.id,function(e){var t=e.target;t!=a&&t!=document&&3!=e.which&&b.close(t===b.$root.children()[0])}).on("keydown."+g.id,function(i){var n=i.keyCode,s=b.component.key[n],o=i.target;27==n?b.close(!0):o!=a||!s&&13!=n?e.contains(b.$root[0],o)&&13==n&&(i.preventDefault(),o.click()):(i.preventDefault(),s?t._.trigger(b.component.key.go,b,[t._.trigger(s)]):b.$root.find("."+P.highlighted).hasClass(P.disabled)||b.set("select",b.component.item.highlight).close())})),b.trigger("open"))},close:function(e){return e&&(y.off("focus."+g.id).trigger("focus"),setTimeout(function(){y.on("focus."+g.id,p)},0)),y.removeClass(P.active),s(a,"expanded",!1),setTimeout(function(){b.$root.removeClass(P.opened+" "+P.focused),s(b.$root[0],"hidden",!0)},0),g.open?(g.open=!1,v&&c.css("overflow","").css("padding-right","-="+n()),l.off("."+g.id),b.trigger("close")):b},clear:function(e){return b.set("clear",null,e)},set:function(t,i,n){var s,a,o=e.isPlainObject(t),r=o?t:{};if(n=o&&e.isPlainObject(i)?i:n||{},t){o||(r[t]=i);for(s in r)a=r[s],s in b.component.item&&(void 0===a&&(a=null),b.component.set(s,a,n)),("select"==s||"clear"==s)&&y.val("clear"==s?"":b.get(s,k.format)).trigger("change");b.render()}return n.muted?b:b.trigger("set",r)},get:function(e,i){if(e=e||"value",null!=g[e])return g[e];if("value"==e)return a.value;if(e in b.component.item){if("string"==typeof i){var n=b.component.get(e);return n?t._.trigger(b.component.formats.toString,b.component,[i,n]):""}return b.component.get(e)}},on:function(t,i,n){var s,a,o=e.isPlainObject(t),r=o?t:{};if(t){o||(r[t]=i);for(s in r)a=r[s],n&&(s="_"+s),g.methods[s]=g.methods[s]||[],g.methods[s].push(a)}return b},off:function(){var e,t,i=arguments;for(e=0,namesCount=i.length;namesCount>e;e+=1)t=i[e],t in g.methods&&delete g.methods[t];return b},trigger:function(e,i){var n=function(e){var n=g.methods[e];n&&n.map(function(e){t._.trigger(e,b,[i])})};return n("_"+e),n(e),b}};return new C}function i(e){var t,i="position";return e.currentStyle?t=e.currentStyle[i]:window.getComputedStyle&&(t=getComputedStyle(e)[i]),"fixed"==t}function n(){if(c.height()<=r.height())return 0;var t=e('
        ').appendTo("body"),i=t[0].offsetWidth;t.css("overflow","scroll");var n=e('
        ').appendTo(t),s=n[0].offsetWidth;return t.remove(),i-s}function s(t,i,n){if(e.isPlainObject(i))for(var s in i)a(t,s,i[s]);else a(t,i,n)}function a(e,t,i){e.setAttribute(("role"==t?"":"aria-")+t,i)}function o(t,i){e.isPlainObject(t)||(t={attribute:i}),i="";for(var n in t){var s=("role"==n?"":"aria-")+n,a=t[n];i+=null==a?"":s+'="'+t[n]+'"'}return i}var r=e(window),l=e(document),c=e(document.documentElement);return t.klasses=function(e){return e=e||"picker",{picker:e,opened:e+"--opened",focused:e+"--focused",input:e+"__input",active:e+"__input--active",holder:e+"__holder",frame:e+"__frame",wrap:e+"__wrap",box:e+"__box"}},t._={group:function(e){for(var i,n="",s=t._.trigger(e.min,e);s<=t._.trigger(e.max,e,[s]);s+=e.i)i=t._.trigger(e.item,e,[s]),n+=t._.node(e.node,i[0],i[1],i[2]);return n},node:function(t,i,n,s){return i?(i=e.isArray(i)?i.join(""):i,n=n?' class="'+n+'"':"",s=s?" "+s:"","<"+t+n+s+">"+i+""):""},lead:function(e){return(10>e?"0":"")+e},trigger:function(e,t,i){return"function"==typeof e?e.apply(t,i||[]):e},digits:function(e){return/\d/.test(e[1])?2:1},isDate:function(e){return{}.toString.call(e).indexOf("Date")>-1&&this.isInteger(e.getUTCDate())},isInteger:function(e){return{}.toString.call(e).indexOf("Number")>-1&&e%1===0},ariaAttr:o},t.extend=function(i,n){e.fn[i]=function(s,a){var o=this.data(i);return"picker"==s?o:o&&"string"==typeof s?t._.trigger(o[s],o,[a]):this.each(function(){var a=e(this);a.data(i)||new t(this,i,n,s)})},e.fn[i].defaults=n.defaults},t}),function(e){"function"==typeof define&&define.amd?define(["picker","jquery"],e):"object"==typeof exports?module.exports=e(require("./picker.js"),require("jquery")):e(Picker,jQuery)}(function(e,t){function i(e,t){var i=this,n=e.$node[0],s=n.value,a=e.$node.data("value"),o=a||s,r=a?t.formatSubmit:t.format,l=function(){return n.currentStyle?"rtl"==n.currentStyle.direction:"rtl"==getComputedStyle(e.$root[0]).direction};i.settings=t,i.$node=e.$node,i.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},i.item={},i.item.clear=null,i.item.disable=(t.disable||[]).slice(0),i.item.enable=-function(e){return e[0]===!0?e.shift():-1}(i.item.disable),i.set("min",t.min).set("max",t.max).set("now"),o?i.set("select",o,{format:r}):i.set("select",null).set("highlight",i.item.now),i.key={40:7,38:-7,39:function(){return l()?-1:1},37:function(){return l()?1:-1},go:function(e){var t=i.item.highlight,n=new Date(Date.UTC(t.year,t.month,t.date+e));i.set("highlight",n,{interval:e}),this.render()}},e.on("render",function(){e.$root.find("."+t.klass.selectMonth).on("change",function(){var i=this.value;i&&(e.set("highlight",[e.get("view").year,i,e.get("highlight").date]),e.$root.find("."+t.klass.selectMonth).trigger("focus"))}),e.$root.find("."+t.klass.selectYear).on("change",function(){var i=this.value;i&&(e.set("highlight",[i,e.get("view").month,e.get("highlight").date]),e.$root.find("."+t.klass.selectYear).trigger("focus"))})},1).on("open",function(){var n="";i.disabled(i.get("now"))&&(n=":not(."+t.klass.buttonToday+")"),e.$root.find("button"+n+", select").attr("disabled",!1)},1).on("close",function(){e.$root.find("button, select").attr("disabled",!0)},1)}var n=7,s=6,a=e._;i.prototype.set=function(e,t,i){var n=this,s=n.item;return null===t?("clear"==e&&(e="select"),s[e]=t,n):(s["enable"==e?"disable":"flip"==e?"enable":e]=n.queue[e].split(" ").map(function(s){return t=n[s](e,t,i)}).pop(),"select"==e?n.set("highlight",s.select,i):"highlight"==e?n.set("view",s.highlight,i):e.match(/^(flip|min|max|disable|enable)$/)&&(s.select&&n.disabled(s.select)&&n.set("select",s.select,i),s.highlight&&n.disabled(s.highlight)&&n.set("highlight",s.highlight,i)),n)},i.prototype.get=function(e){return this.item[e]},i.prototype.create=function(e,i,n){var s,o=this;return i=void 0===i?e:i,i==-1/0||1/0==i?s=i:t.isPlainObject(i)&&a.isInteger(i.pick)?i=i.obj:t.isArray(i)?(i=new Date(Date.UTC(i[0],i[1],i[2])),i=a.isDate(i)?i:o.create().obj):i=a.isInteger(i)?o.normalize(new Date(i),n):a.isDate(i)?o.normalize(i,n):o.now(e,i,n),{year:s||i.getUTCFullYear(),month:s||i.getUTCMonth(),date:s||i.getUTCDate(),day:s||i.getUTCDay(),obj:s||i,pick:s||i.getTime()}},i.prototype.createRange=function(e,i){var n=this,s=function(e){return e===!0||t.isArray(e)||a.isDate(e)?n.create(e):e};return a.isInteger(e)||(e=s(e)),a.isInteger(i)||(i=s(i)),a.isInteger(e)&&t.isPlainObject(i)?e=[i.year,i.month,i.date+e]:a.isInteger(i)&&t.isPlainObject(e)&&(i=[e.year,e.month,e.date+i]),{from:s(e),to:s(i)}},i.prototype.withinRange=function(e,t){return e=this.createRange(e.from,e.to),t.pick>=e.from.pick&&t.pick<=e.to.pick},i.prototype.overlapRanges=function(e,t){var i=this;return e=i.createRange(e.from,e.to),t=i.createRange(t.from,t.to),i.withinRange(e,t.from)||i.withinRange(e,t.to)||i.withinRange(t,e.from)||i.withinRange(t,e.to)},i.prototype.now=function(e,t,i){return t=new Date,i&&i.rel&&t.setUTCDate(t.getUTCDate()+i.rel),this.normalize(t,i)},i.prototype.navigate=function(e,i,n){var s,a,o,r,l=t.isArray(i),c=t.isPlainObject(i),d=this.item.view;if(l||c){for(c?(a=i.year,o=i.month,r=i.date):(a=+i[0],o=+i[1],r=+i[2]),n&&n.nav&&d&&d.month!==o&&(a=d.year,o=d.month),s=new Date(Date.UTC(a,o+(n&&n.nav?n.nav:0),1)),a=s.getUTCFullYear(),o=s.getUTCMonth();new Date(Date.UTC(a,o,r)).getUTCMonth()!==o;)r-=1;i=[a,o,r]}return i},i.prototype.normalize=function(e){return e.setUTCHours(0,0,0,0),e},i.prototype.measure=function(e,t){var i=this;return t?"string"==typeof t?t=i.parse(e,t):a.isInteger(t)&&(t=i.now(e,t,{rel:t})):t="min"==e?-1/0:1/0,t},i.prototype.viewset=function(e,t){return this.create([t.year,t.month,1])},i.prototype.validate=function(e,i,n){var s,o,r,l,c=this,d=i,m=n&&n.interval?n.interval:1,u=-1===c.item.enable,h=c.item.min,f=c.item.max,p=u&&c.item.disable.filter(function(e){if(t.isArray(e)){var n=c.create(e).pick;ni.pick&&(o=!0)}return a.isInteger(e)}).length;if((!n||!n.nav)&&(!u&&c.disabled(i)||u&&c.disabled(i)&&(p||s||o)||!u&&(i.pick<=h.pick||i.pick>=f.pick)))for(u&&!p&&(!o&&m>0||!s&&0>m)&&(m*=-1);c.disabled(i)&&(Math.abs(m)>1&&(i.monthd.month)&&(i=d,m=m>0?1:-1),i.pick<=h.pick?(r=!0,m=1,i=c.create([h.year,h.month,h.date+(i.pick===h.pick?0:-1)])):i.pick>=f.pick&&(l=!0,m=-1,i=c.create([f.year,f.month,f.date+(i.pick===f.pick?0:1)])),!r||!l);)i=c.create([i.year,i.month,i.date+m]);return i},i.prototype.disabled=function(e){var i=this,n=i.item.disable.filter(function(n){return a.isInteger(n)?e.day===(i.settings.firstDay?n:n-1)%7:t.isArray(n)||a.isDate(n)?e.pick===i.create(n).pick:t.isPlainObject(n)?i.withinRange(n,e):void 0});return n=n.length&&!n.filter(function(e){return t.isArray(e)&&"inverted"==e[3]||t.isPlainObject(e)&&e.inverted}).length,-1===i.item.enable?!n:n||e.picki.item.max.pick},i.prototype.parse=function(e,t,i){var n=this,s={};return t&&"string"==typeof t?(i&&i.format||(i=i||{},i.format=n.settings.format),n.formats.toArray(i.format).map(function(e){var i=n.formats[e],o=i?a.trigger(i,n,[t,s]):e.replace(/^!/,"").length;i&&(s[e]=t.substr(0,o)),t=t.substr(o)}),[s.yyyy||s.yy,+(s.mm||s.m)-1,s.dd||s.d]):t},i.prototype.formats=function(){function e(e,t,i){var n=e.match(/\w+/)[0];return i.mm||i.m||(i.m=t.indexOf(n)+1),n.length}function t(e){return e.match(/\w+/)[0].length}return{d:function(e,t){return e?a.digits(e):t.date},dd:function(e,t){return e?2:a.lead(t.date)},ddd:function(e,i){return e?t(e):this.settings.weekdaysShort[i.day]},dddd:function(e,i){return e?t(e):this.settings.weekdaysFull[i.day]},m:function(e,t){return e?a.digits(e):t.month+1},mm:function(e,t){return e?2:a.lead(t.month+1)},mmm:function(t,i){var n=this.settings.monthsShort;return t?e(t,n,i):n[i.month]},mmmm:function(t,i){var n=this.settings.monthsFull;return t?e(t,n,i):n[i.month]},yy:function(e,t){return e?2:(""+t.year).slice(2)},yyyy:function(e,t){return e?4:t.year},toArray:function(e){return e.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(e,t){var i=this;return i.formats.toArray(e).map(function(e){return a.trigger(i.formats[e],i,[0,t])||e.replace(/^!/,"")}).join("")}}}(),i.prototype.isDateExact=function(e,i){var n=this;return a.isInteger(e)&&a.isInteger(i)||"boolean"==typeof e&&"boolean"==typeof i?e===i:(a.isDate(e)||t.isArray(e))&&(a.isDate(i)||t.isArray(i))?n.create(e).pick===n.create(i).pick:t.isPlainObject(e)&&t.isPlainObject(i)?n.isDateExact(e.from,i.from)&&n.isDateExact(e.to,i.to):!1},i.prototype.isDateOverlap=function(e,i){var n=this,s=n.settings.firstDay?1:0;return a.isInteger(e)&&(a.isDate(i)||t.isArray(i))?(e=e%7+s,e===n.create(i).day+1):a.isInteger(i)&&(a.isDate(e)||t.isArray(e))?(i=i%7+s,i===n.create(e).day+1):t.isPlainObject(e)&&t.isPlainObject(i)?n.overlapRanges(e,i):!1},i.prototype.flipEnable=function(e){var t=this.item;t.enable=e||(-1==t.enable?1:-1)},i.prototype.deactivate=function(e,i){var n=this,s=n.item.disable.slice(0);return"flip"==i?n.flipEnable():i===!1?(n.flipEnable(1),s=[]):i===!0?(n.flipEnable(-1),s=[]):i.map(function(e){for(var i,o=0;ol;l+=1){if(r=s[l],n.isDateExact(r,e)){i=s[l]=null,c=!0;break}if(n.isDateOverlap(r,e)){t.isPlainObject(e)?(e.inverted=!0,i=e):t.isArray(e)?(i=e,i[3]||i.push("inverted")):a.isDate(e)&&(i=[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate(),"inverted"]);break}}if(i)for(l=0;o>l;l+=1)if(n.isDateExact(s[l],e)){s[l]=null;break}if(c)for(l=0;o>l;l+=1)if(n.isDateOverlap(s[l],e)){s[l]=null;break}i&&s.push(i)}),s.filter(function(e){return null!=e})},i.prototype.nodes=function(e){var t=this,i=t.settings,o=t.item,r=o.now,l=o.select,c=o.highlight,d=o.view,m=o.disable,u=o.min,h=o.max,f=function(e,t){return i.firstDay&&(e.push(e.shift()),t.push(t.shift())),a.node("thead",a.node("tr",a.group({min:0,max:n-1,i:1,node:"th",item:function(n){return[e[n],i.klass.weekdays,'scope=col title="'+t[n]+'"']}})))}((i.showWeekdaysFull?i.weekdaysFull:i.weekdaysShort).slice(0),i.weekdaysFull.slice(0)),p=function(e){return a.node("div"," ",i.klass["nav"+(e?"Next":"Prev")]+(e&&d.year>=h.year&&d.month>=h.month||!e&&d.year<=u.year&&d.month<=u.month?" "+i.klass.navDisabled:""),"data-nav="+(e||-1)+" "+a.ariaAttr({role:"button",components:t.$node[0].id+"_table"})+' title="'+(e?i.labelMonthNext:i.labelMonthPrev)+'"')},v=function(){var n=i.showMonthsShort?i.monthsShort:i.monthsFull;return i.selectMonths?a.node("select",a.group({min:0,max:11,i:1,node:"option",item:function(e){return[n[e],0,"value="+e+(d.month==e?" selected":"")+(d.year==u.year&&eh.month?" disabled":"")]}}),i.klass.selectMonth,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+i.labelMonthSelect+'"'):a.node("div",n[d.month],i.klass.month)},g=function(){var n=d.year,s=i.selectYears===!0?5:~~(i.selectYears/2);if(s){var o=u.year,r=h.year,l=n-s,c=n+s;if(o>l&&(c+=o-l,l=o),c>r){var m=l-o,f=c-r;l-=m>f?f:m,c=r}return a.node("select",a.group({min:l,max:c,i:1,node:"option",item:function(e){return[e,0,"value="+e+(n==e?" selected":"")]}}),i.klass.selectYear,(e?"":"disabled")+" "+a.ariaAttr({components:t.$node[0].id+"_table"})+' title="'+i.labelYearSelect+'"')}return a.node("div",n,i.klass.year)};return a.node("div",(i.selectYears?g()+v():v()+g())+p()+p(1),i.klass.header)+a.node("table",f+a.node("tbody",a.group({min:0,max:s-1,i:1,node:"tr",item:function(e){var s=i.firstDay&&0===t.create([d.year,d.month,1]).day?-7:0;return[a.group({min:n*e-d.day+s+1,max:function(){return this.min+n-1},i:1,node:"td",item:function(e){e=t.create([d.year,d.month,e+(i.firstDay?1:0)]);var n=l&&l.pick==e.pick,s=c&&c.pick==e.pick,o=m&&t.disabled(e)||e.pickh.pick;return[a.node("div",e.date,function(t){return t.push(d.month==e.month?i.klass.infocus:i.klass.outfocus),r.pick==e.pick&&t.push(i.klass.now),n&&t.push(i.klass.selected),s&&t.push(i.klass.highlighted),o&&t.push(i.klass.disabled),t.join(" ")}([i.klass.day]),"data-pick="+e.pick+" "+a.ariaAttr({role:"gridcell",selected:n&&t.$node.val()===a.trigger(t.formats.toString,t,[i.format,e])?!0:null,activedescendant:s?!0:null,disabled:o?!0:null})),"",a.ariaAttr({role:"presentation"})]}})]}})),i.klass.table,'id="'+t.$node[0].id+'_table" '+a.ariaAttr({role:"grid",components:t.$node[0].id,readonly:!0}))+a.node("div",a.node("button",i.today,i.klass.buttonToday,"type=button data-pick="+r.pick+(e&&!t.disabled(r)?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",i.clear,i.klass.buttonClear,"type=button data-clear=1"+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id}))+a.node("button",i.close,i.klass.buttonClose,"type=button data-close=true "+(e?"":" disabled")+" "+a.ariaAttr({components:t.$node[0].id})),i.klass.footer)},i.defaults=function(e){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:e+"table",header:e+"header",navPrev:e+"nav--prev",navNext:e+"nav--next",navDisabled:e+"nav--disabled",month:e+"month",year:e+"year",selectMonth:e+"select--month",selectYear:e+"select--year",weekdays:e+"weekday",day:e+"day",disabled:e+"day--disabled",selected:e+"day--selected",highlighted:e+"day--highlighted",now:e+"day--today",infocus:e+"day--infocus",outfocus:e+"day--outfocus",footer:e+"footer",buttonClear:e+"button--clear",buttonToday:e+"button--today",buttonClose:e+"button--close"}}}(e.klasses().picker+"__"),e.extend("pickadate",i)}),function(e){e.fn.Dialog=function(){return e(".js-DialogAction--open").each(function(){e(this).on("click",function(){var t=e(this).data("target");e(t).show()})}),this.each(function(){var t=this;e(t).hide(),e(t).find(".js-DialogAction--close").each(function(){e(this).on("click",function(){e(t).hide()})}),e(t).find(".ms-Dialog-action").on("click",function(){e(t).hide()})})}}(jQuery),function(e){e.fn.Dropdown=function(){return this.each(function(){function t(t){if(!i.hasClass("is-disabled")){i.find(".is-open").removeClass("is-open"),t.stopPropagation();var n=e(this).parents(".ms-Dropdown").width();e(this).next(".ms-Dropdown-items").css("width",n+"px"),i.toggleClass("is-open"),e(".ms-Dropdown").each(function(){e(this)[0]!==i[0]&&e(this).removeClass("is-open")}),e(document).bind("click.dropdown",function(){i.removeClass("is-open"),e(document).unbind("click.dropdown")})}}var i=e(this),n=i.children(".ms-Dropdown-select"),s=n.children("option"),a="",o="",r="";s.each(function(e,t){t.selected&&(a=t.text),o+='
      • "+t.text+"
        • "}),r=''+a+'
          '+o+"
        ",i.append(r),i.on("click",".ms-Dropdown-title",function(e){t(e)}),i.on("keyup",function(s){var a=s.keyCode||s.which;if(e(this).hasClass("is-open")){if(e(this).hasClass("is-open")&&(38===a&&e(this).find(".ms-Dropdown-item.is-selected").prev().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").prev().addClass("is-selected"), +40===a&&e(this).find(".ms-Dropdown-item.is-selected").next().siblings().size()>0&&e(this).find(".ms-Dropdown-item.is-selected").removeClass("is-selected").next().addClass("is-selected"),13===a&&!i.hasClass("is-disabled"))){var o=e(this).find(".ms-Dropdown-item.is-selected").text();e(this).find(".ms-Dropdown-title").html(o),n.find("option").each(function(t,i){i.text===o?e(this).prop("selected",!0):e(this).prop("selected",!1)}),n.change(),e(this).removeClass("is-open")}}else 13!==a&&38!==a&&40!==a||(t(s),e(this).find(".ms-Dropdown-item").hasClass("is-selected")||e(this).find(".ms-Dropdown-item:first").addClass("is-selected"));27===a&&e(this).removeClass("is-open")}),i.on("click",".ms-Dropdown-item",function(){if(!i.hasClass("is-disabled")&&!e(this).hasClass("is-disabled")){e(this).siblings(".ms-Dropdown-item").removeClass("is-selected"),e(this).addClass("is-selected"),e(this).parents().siblings(".ms-Dropdown-title").html(e(this).text());var t=e(this).text();n.find("option").each(function(i,n){n.text===t?e(this).prop("selected",!0):e(this).prop("selected",!1)}),n.change()}})})}}(jQuery),function(e){e.fn.Facepile=function(){return this.each(function(){e(".ms-PeoplePicker").PeoplePicker(),e(".ms-Panel").Panel();var t=e(this),i=e(".ms-Facepile-members"),n=e(".ms-Facepile-members > .ms-Facepile-itemBtn").length,s=e(".ms-Facepile-panel.ms-Panel"),a=s.find(".ms-Panel-main"),o=e(".ms-PeoplePicker.ms-PeoplePicker--Facepile"),r=o.find(".ms-PeoplePicker-selectedPeople"),l=e(".ms-Facepile").find(".ms-PersonaCard"),c=function(){if(n+=1,e(".ms-Facepile-members").children(":gt(4)").hide(),n>5){e(".ms-Facepile-itemBtn--overflow").addClass("is-active");var t=n-5;e(".ms-Facepile-overflowText").text("+"+t)}};t.on("click",".js-addPerson",function(){a.css({display:"block"}),s.toggleClass("is-open").addClass("ms-Panel-animateIn").removeClass("ms-Facepile-panel--overflow ms-Panel--right").addClass("ms-Facepile-panel--addPerson"),l.removeClass("is-active").hide()}),s.on("click",".js-togglePanel",function(){s.toggleClass("is-open").addClass("ms-Panel-animateIn")}),t.on("click",".js-overflowPanel",function(){a.css({display:"block"}),s.toggleClass("is-open").addClass("ms-Panel-animateIn").removeClass("ms-Facepile-panel--addPerson").addClass("ms-Facepile-panel--overflow ms-Panel--right")}),e(document).ready(function(){e(".ms-Facepile-overflowText").text("+"+n)}),e(".ms-PeoplePicker-result").on("click",function(){var t=e(this),n=t.find(".ms-Persona-primaryText").html(),s=t.find(".ms-Persona-secondaryText").html(),a=function(){for(var e=n.split(" "),t="",i=0;i'}return""}(),l='";i.prepend(l),c()}),r.on("click",".js-selectedRemove",function(){var t=e(this).parent().find(".ms-Persona-primaryText").text(),s=i.find(".ms-Persona-primaryText:contains("+t+")").first();if(s)if(s.parent().closest(".ms-Facepile-itemBtn").remove(),n-=1,e(".ms-Facepile-members").children(":lt(5)").show(),5>=n)e(".ms-Facepile-itemBtn--overflow").removeClass("is-active");else{var a=n-5;e(".ms-Facepile-overflowText").text("+"+a)}}),i.on("click",".ms-Facepile-itemBtn",function(){var t=e(this).find(".ms-Persona-primaryText").html(),i=e(this).find(".ms-Persona-secondaryText").html(),n=function(){for(var e=t.split(" "),i="",n=0;n480){var u=e(this).offset().left,h=u-26;l.css({left:h})}else l.css({left:0,top:"auto",position:"fixed"})}),e(document).on("click",function(t){var i=e(".ms-Facepile-itemBtn--member");i.is(t.target)||0!==i.has(t.target).length||l.is(t.target)||0!==l.has(t.target).length?l.addClass("is-active"):(l.removeClass("is-active"),l.removeAttr("style"))})})}}(jQuery);var fabric=fabric||{};fabric.MessageBanner=function(e){this.container=e,this.init()},fabric.MessageBanner.prototype=function(){var e,t,i,n,s,a,o,r,l,c=700,d=88,m=35,u=480,h=function(){i=o.offsetWidth,window.innerWidth>=u?f():p()},f=function(){i-t>s&&c>s?(n="auto",a.className="ms-MessageBanner-expand",k()):(n=Math.min(i-t,c)+"px",-1===a.className.indexOf("is-visible")&&(a.className+=" is-visible")),e.style.width=n},p=function(){i-(m+l.offsetWidth)>s?(n="auto",k()):n=i-(m+l.offsetWidth)+"px",e.style.width=n},v=function(i){o=i.container,e=i.container.querySelector(".ms-MessageBanner-clipper"),a=i.container.querySelector(".ms-MessageBanner-expand"),r=i.container.querySelector(".ms-MessageBanner-action"),t=r.offsetWidth+d,l=i.container.querySelector(".ms-MessageBanner-close")},g=function(){var e=a.querySelector(".ms-Icon");o.className+=" is-expanded",e.className="ms-Icon ms-Icon--chevronsUp"},k=function(){var e=a.querySelector(".ms-Icon");o.className="ms-MessageBanner",e.className="ms-Icon ms-Icon--chevronsDown"},P=function(){o.className.indexOf("is-expanded")>-1?k():g()},y=function(){-1===o.className.indexOf("hide")&&(o.className+=" hide",setTimeout(function(){o.className="ms-MessageBanner is-hidden"},500))},C=function(){o.className="ms-MessageBanner"},b=function(){window.addEventListener("resize",h,!1),a.addEventListener("click",P,!1),l.addEventListener("click",y,!1)},x=function(){v(this),b(),i=o.offsetWidth,s=e.offsetWidth,h(null)};return{init:x,showBanner:C}}(),function(e){e.fn.ListItem=function(){return this.each(function(){var t=e(this);t.on("click",".js-toggleSelection",function(){e(this).parents(".ms-ListItem").toggleClass("is-selected")})})}}(jQuery),function(e){e.fn.NavBar=function(){return this.each(function(){var t=e(this);t.on("click",".js-openMenu",function(e){e.stopPropagation(),t.toggleClass("is-open")}),t.click(function(){t.hasClass("is-open")&&t.removeClass("is-open")}),t.on("click",".ms-NavBar-item:not(.is-disabled)",function(i){var n=t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field");i.stopPropagation(),0===e(this).children(".ms-NavBar-link").length&&i.preventDefault(),e(this).siblings(".ms-NavBar-item").removeClass("is-selected"),n.length>0&&0===n.val().length&&e(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur(),e(this).hasClass("ms-NavBar-item--hasMenu")?(e(this).siblings(".ms-NavBar-item--hasMenu").children(".ms-ContextualMenu:first").removeClass("is-open"),e(this).children(".ms-ContextualMenu:first").toggleClass("is-open"),e(this).toggleClass("is-selected")):(e(this).addClass("is-selected"),t.removeClass("is-open").find(".ms-ContextualMenu").removeClass("is-open")),e(this).hasClass("ms-NavBar-item--search")&&(e(this).addClass("is-open"),e(this).find(".ms-TextField-field").focus(),t.find(".ms-ContextualMenu:first").removeClass("is-open"))}),t.on("click",".ms-NavBar-item .ms-ContextualMenu",function(i){i.stopPropagation(),e(this).removeClass("is-open"),t.removeClass("is-open").find(".ms-NavBar-item--hasMenu").removeClass("is-selected")}),e(document).on("click","html",function(){var e=t.find(".ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field");t.find(".ms-NavBar-item").removeClass("is-selected").find(".ms-ContextualMenu").removeClass("is-open"),e.length>0&&0===e.val().length&&t.find(".ms-NavBar-item.ms-NavBar-item--search").removeClass("is-open").find(".ms-TextField-field").blur()})})}}(jQuery),function(e){e.fn.Panel=function(){function t(e,t,n){for(var s=0;s-1&&(i.removeClass("is-open"),i.removeClass("ms-Panel-animateIn ms-Panel-animateOut"))}),e(".panelVariant-item").on("click",function(){var t=e(this).find("span").attr("class");switch(e(".panelVariant-item").removeClass("is-selected"),e(this).addClass("is-selected"),t){case"is-default":e(".ms-Panel").removeClass().addClass("ms-Panel");break;case"is-left":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--left");break;case"is-lightDismiss":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--lightDismiss");break;case"is-md":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--md");break;case"is-lgFixed":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--lg ms-Panel--fixed");break;case"is-lg":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--lg");break;case"is-xl":e(".ms-Panel").removeClass().addClass("ms-Panel ms-Panel--xl")}})})}}(jQuery);var fabric=fabric||{};!function(e){function t(e){var t=e.find(".ms-PeoplePicker-searchBox"),i=t.position().left,n=t.outerWidth(),s=i+n,a=t.find(".ms-PeoplePicker-persona:last"),o=a.offset().left,r=a.outerWidth(),l=o+r,c=s-l-7;100>c&&(c="100%"),e.find(".ms-PeoplePicker-searchField").outerWidth(c)}e.fn.PeoplePicker=function(){return this.each(function(){function i(t){e("html, body").animate({scrollTop:s.offset().top},367),s.hasClass("is-active")&&s.removeClass("is-active"),s.hasClass("ms-PeoplePicker--Facepile")&&""===a.val()&&d.children(":gt(4)").hide(),s.hasClass("ms-PeoplePicker--Facepile")&&(l.addClass("ms-u-slideDownIn20"),setTimeout(function(){o.removeClass("ms-u-slideDownIn20"),l.removeClass("ms-u-slideDownIn20")},1e3)),m=!0,t.stopPropagation(),s.hasClass("ms-PeoplePicker--Facepile")||o.width(s.width()-2),s.addClass("is-active"),e(document).bind("click.peoplepicker",function(){s.removeClass("is-active"),s.hasClass("ms-PeoplePicker--Facepile")&&(s.removeClass("is-searching"),e(".ms-PeoplePicker-selected").show(),e(".ms-PeoplePicker-searchMore").removeClass("is-active"),a.val("")),e(document).unbind("click.peoplepicker"),m=!1})}var n,s=e(this),a=s.find(".ms-PeoplePicker-searchField"),o=s.find(".ms-PeoplePicker-results"),r=s.find(".ms-PeoplePicker-selected"),l=s.find(".ms-PeoplePicker-selectedPeople"),c=s.find(".ms-PeoplePicker-selectedCount"),d=s.find(".ms-PeoplePicker-peopleList"),m=!1,u=e(".ms-PeoplePicker").find(".ms-PersonaCard");s.on("focus",".ms-PeoplePicker-searchField",function(e){i(e)}),s.on("click",".ms-PeoplePicker-searchField",function(e){i(e)}),e(this).click(function(e){e.stopPropagation()}),o.on("click",".ms-PeoplePicker-result",function(){var i=e(this),n=i.find(".ms-Persona-primaryText").html(),o=i.find(".ms-Persona-secondaryText").html(),m=function(){for(var e=n.split(" "),t="",i=0;i'}return""}(),f='
        '+m+"
        "+h+'
        '+n+'
        ',p='
      • '+m+"
        "+h+'
        '+n+'
        '+o+'
        • ';if(s.hasClass("ms-PeoplePicker--Facepile")||s.hasClass("ms-PeoplePicker--membersList")){r.hasClass("is-active")||r.addClass("is-active"),l.prepend(p),s.removeClass("is-active");var v=s.find(".ms-PeoplePicker-selectedPerson").length;c.html(v),d.children().show(),d.children(":gt(4)").hide(),e(".ms-PeoplePicker-searchMore").removeClass("is-active"),a.val("")}else a.before(f),s.removeClass("is-active"),t(s)}),s.on("click",".ms-PeoplePicker-personaRemove",function(){e(this).parents(".ms-PeoplePicker-persona").remove(),0===e(".ms-PeoplePicker-persona").length?s.find(".ms-PeoplePicker-searchField").outerWidth("100%"):t(s)}),o.on("click",".js-searchMore",function(){var t=e(this),i=t.find(".ms-PeoplePicker-searchMorePrimary"),o=i.html(),r=a.val();t.addClass("is-searching"),i.html("Searching for "+r),n?n.start():n=new fabric.Spinner(t.get(0)),s.hasClass("ms-PeoplePicker--Facepile")&&setTimeout(function(){d.children().show()},1500),setTimeout(function(){t.removeClass("is-searching"),i.html(o),n.stop()},1500)}),o.on("click",".js-resultRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").remove()}),o.on("click",".js-resultExpand",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded")}),l.on("click",".js-selectedRemove",function(t){t.stopPropagation(),e(this).parent(".ms-PeoplePicker-selectedPerson").remove();var i=s.find(".ms-PeoplePicker-selectedPerson").length;c.html(i),0===s.find(".ms-PeoplePicker-selectedPerson").length&&r.removeClass("is-active")});var h=function(t,i,n){return t.find(".ms-Persona-primaryText").filter(function(){return n?e(this).text().toLowerCase()===i:e(this).text().toLowerCase()!==i}).parents(".ms-PeoplePicker-peopleListItem")};s.on("keyup",".ms-PeoplePicker-searchField",function(t){var i=[],n=[],a=o.find(".ms-Persona-primaryText");s.addClass("is-searching"),r.hide(),d.children(":lt(5)").show(),e(".ms-PeoplePicker-searchMore").addClass("is-active"),a.each(function(){i.push(e(this).text())});for(var c=0;c-1?(m=i[c].toLowerCase(),n.push(i[c]),h(o,m,!0).show()):h(o,m,!1).hide()}""===e(this).val()&&(s.removeClass("is-searching"),r.show(),e(".ms-PeoplePicker-searchMore").removeClass("is-active"),l.addClass("ms-u-slideDownIn20"),setTimeout(function(){l.removeClass("ms-u-slideDownIn20")},1e3),d.children(":gt(4)").hide())}),l.on("click",".ms-Persona",function(){var t=e(this).find(".ms-Persona-primaryText").html(),i=e(this).find(".ms-Persona-secondaryText").html(),n=function(){for(var e=t.split(" "),i="",n=0;n480){var m=e(this).offset().top,h=m+10;u.css({top:h,left:0})}else u.css({top:"auto"})}),e(document).on("click",function(t){var i=e(".ms-PeoplePicker-selectedPerson").find(".ms-Persona");i.is(t.target)||u.is(t.target)||0!==u.has(t.target).length?u.addClass("is-active"):(u.removeClass("is-active"),setTimeout(function(){u.removeAttr("style")},300))})})}}(jQuery),function(e){e.fn.PersonaCard=function(){return this.each(function(){var t=e(this);t.on("click",".ms-PersonaCard-action",function(){t.find(".ms-PersonaCard-action").removeClass("is-active"),e(this).addClass("is-active");var i=function(e,t){var i=e.className+"",n=t.charAt(0).toUpperCase()+t.slice(1),s="ms-PersonaCard-detail"+n;i!==s&&(e.classList.remove(i),e.classList.add(s))},n=e(this).attr("id");i(e(this).parent().next().find("#detailList")[0],n);var s=e(this).attr("id");t.find(".ms-PersonaCard-actionDetails").removeClass("is-active"),t.find("#"+s+".ms-PersonaCard-actionDetails").addClass("is-active")}),t.on("click",".ms-PersonaCard-detailExpander",function(){e(this).parent(".ms-PersonaCard-actionDetails").toggleClass("is-collapsed")})})}}(jQuery);var fabric=fabric||{};fabric.ProgressIndicator=function(e){this.container=e,this.cacheDOM()},fabric.ProgressIndicator.prototype=function(){var e,t,i,n,s,a,o=function(e){a.style.width=Math.round(t*e)+"px"},r=function(t){e=t;var i=e/n;this.setProgressPercent(i)},l=function(e){n=e},c=function(e){i.innerHTML=e},d=function(e){s.innerHTML=e},m=function(){i=this.container.querySelector(".ms-ProgressIndicator-itemName")||null,s=this.container.querySelector(".ms-ProgressIndicator-itemDescription")||null,a=this.container.querySelector(".ms-ProgressIndicator-progressBar"),t=this.container.querySelector(".ms-ProgressIndicator-itemProgress").offsetWidth};return{setProgressPercent:o,setName:c,setDescription:d,setProgress:r,setTotal:l,cacheDOM:m}}(),function(e){e.fn.Pivot=function(){return this.each(function(){var t=e(this);t.on("click",".ms-Pivot-link",function(t){t.preventDefault();var i=e(this).find(".ms-Pivot-ellipsis");0===i.length&&(e(this).siblings(".ms-Pivot-link").removeClass("is-selected"),e(this).addClass("is-selected"))})})}}(jQuery),function(e){e.fn.SearchBox=function(){return this.each(function(){var t=!1,i=e(this).find(".ms-SearchBox-field");i.on("focus",function(){e(this).siblings(".ms-SearchBox-label").hide(),e(this).parent(".ms-SearchBox").addClass("is-active")}),i.on("mouseover",function(){i.addClass("hovering")}),i.on("mouseout",function(){i.removeClass("hovering")}),e(this).find(".ms-SearchBox-closeButton").on("mousedown",function(){t=!0}),e(this).find(".ms-SearchBox-field").on("blur",function(){t&&(e(this).val(""),i.addClass("hovering"));var n=e(this).parent(".ms-SearchBox");setTimeout(function(){n.removeClass("is-active")},10),0===e(this).val().length&&e(this).siblings(".ms-SearchBox-label").show(),t=!1})})}}(jQuery);var fabric=fabric||{};fabric.Spinner=function(e){function t(){i(),u=setInterval(function(){for(var e=k.length;e--;)a(k[e])},P)}function i(){clearInterval(u)}function n(){m(),d(),c(),s(),t()}function s(){var e,t=0,i=1;for(y=1/f,t;f>t;t++){var n=k[t];e=y*i++,r(n.element,e)}}function a(e){var t=o(e.element)-y;0>=t&&(t=1),r(e.element,t)}function o(e){return parseFloat(window.getComputedStyle(e).getPropertyValue("opacity"))}function r(e,t){e.style.opacity=t}function l(){var e=document.createElement("div");return e.className="ms-Spinner-circle",e.style.width=e.style.height=C*p+"px",e}function c(){for(var e,t=0,i=C*p,n=2*Math.PI/f,s=f,a=.5*(C-i);s--;){var o=l(),r=Math.round(.5*C+a*Math.cos(t)-.5*o.clientWidth)-.5*i,c=Math.round(.5*C+a*Math.sin(t)-.5*o.clientHeight)-.5*i;h.appendChild(o),o.style.left=r+"px",o.style.top=c+"px",t+=n,e={element:o,j:s},k.push(e)}}function d(){h.className.indexOf("large")>-1&&(C=28,g=.179),p=g,f=8}function m(){-1===v.className.indexOf("ms-Spinner")?(h=document.createElement("div"),h.className="ms-Spinner",v.appendChild(h)):h=v}var u,h,f,p,v=e,g=.2,k=[],P=90,y=0,C=20;return n(),{start:t,stop:i}},function(e){e.fn.TextField=function(){return this.each(function(){e(this).hasClass("ms-TextField--placeholder")&&(e(this).on("click",function(){e(this).find(".ms-Label").hide()}),e(this).find(".ms-TextField-field").on("focus",function(){e(this).siblings(".ms-Label").hide()}),e(this).find(".ms-TextField-field").on("blur",function(){0===e(this).val().length&&e(this).siblings(".ms-Label").show()})),e(this).hasClass("ms-TextField--underlined")&&(e(this).find(".ms-TextField-field").on("focus",function(){e(this).parent(".ms-TextField--underlined").addClass("is-active")}),e(this).find(".ms-TextField-field").on("blur",function(){e(this).parent(".ms-TextField--underlined").removeClass("is-active")}))})}}(jQuery); \ No newline at end of file diff --git a/dist/packages/OfficeUIFabric.2.4.0.nupkg b/dist/packages/OfficeUIFabric.2.4.0.nupkg new file mode 100644 index 0000000000000000000000000000000000000000..885efb4b1917a203c204440dceb779c0bbd1b442 GIT binary patch literal 190288 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 z zS6SN!-^x#4*Zx&y2CAb_vt_la!PI}tL)4?I5o)LmSqGq^REf*g(9G1%E3mXQv}hZ( ztPHIe*DPBHI|q9gBg#q9S=Ga<)N~Vd3)`jK6+Idss4k=T-v5ohH;Fj4{10V9=cnHM zxBf-{31<5*wdP+dOj3fZ{10&=KMNnXm6p|tWS>h?Jx%^i-8fWJuaUDPT78;fWW zLm+%|9>{Nzl`4IL=iwjByJ5XvRdzh8!qJ}4otq4+#1!jAYsCPWZ5LENrFr0w`~jr! zd*8i}9mq{vh#ZCSC!}1O zS{DzvER<1|SRqoJAjIAXrVu?AyeK4~%vDkTg&Q|}FjNPbf~bPR6Tp{4-zvLRB<3fD zkHOlKp%`Q9a|4IvOhkp8Q(r_A;hmqX2G4EHtUZqI{GD*tQ6j31s-+}>ojKOhfN;Uf z6PDJIOG%2JQf+ir9+w3j3{QkHd`=A3X9~JAy-naZC8(iU(x6L#XUJ>=U-iI)ZL$8J zxr)gA32Um9Cv}F%3Pq~+$5A3lENFqTGd|B~!!^10`k};iS|1}?H0)o^FFsl{Y&VgI zZqvb~%Z?6P51{`FPKo{<(6ju5UW`Zo|KV%?XTtvrVe=nfg#Qg+{Gm@o{&)fU{G6k} ztOv?UA@}nZ(bJAM>8^D4*{tv5p_*r&P-$0@xV0yKJWJIbjKsuJgewaZ;7xnyuxv-s zQcCWGq)Z1?u|tuaqTv0aYB@+t@7Esc;rm0NkpB`>&bcv<0v%3W5`hY(fE^UtF5hE$ zkAsJ}`*n5nR6VSn8~j@j>I=UJ3gj4yiLRsGr|Q}M9pmYclGBEu0d)-$&G z7Q6rvs#-vbM8qK7j#`FYmIwbYT7+)4dFy~J?E9`~uoR%2r=pwQ^ykfPWfjm-7YBNw zXZmOl{sTxa@>}>Oa>GL}PCUSmacaP%D%b2)TM1SaOGRBLlf=B!Y8X(o(yQ|5FJO^x zlg0*{f)*DQ3dd7HZ*W9VF*o9Ob*AY;9&z?LB(P(=v43M(<^ z{_ruFL6%>tGj>U4goABFRxFLrWbCy&M^^1db0$OFT>)x!MK|*%1i3ZO08_c+y6QKJ zkvX!@HhEnZdA71bvZ*L-D;V;S8P3?wZ)L8v>ZB_NTmY79rWqh=%zZX{pbZT7`rIU+B8@AD^ds#Ro0y@x&{Tj_U_b5y$6Ep_=(aT`X*p+hlgZ%H7lqoioMy zZwJp!9-A-IYbf)A*V`bktUmVh64Nn{|;KbpM`8gy`9WP?^Jk9GOqvnkuiZpaX_9Es_ zFq-J}-KktODwiJ&$6^JaEn*%y=%u{$1#exYcsq54R5$J_zWQS^GrDXIcVko zf4zhLmoo8xkwf_BAf!?4TK<3y;WK97o1sk&h^o#ToG?jPTMF8(nC{TI?5#IL1_?i= zvkv)bCj9&JgLu_spTtUy7HNDBvztAe-Dh+aQzvpU@~@^|pMy8hGfT2ictd6{s<8nu z6bV)0bn3)T%+LrbnZhjyX(DIe=Or*hGfyBW(Z;6UG(XLeKx_05$2-CSQYj2ci7>+i zcljIj@85vwe>4E6rY7jUWt6i3e7F1TOeig^(F@qWS8UvZ%uz=X2AHKJk%K^#$4Ylq zLgvkM1qHiTEhSq=RRo-YMJ%WPK#EJ5LwJO9(h8xB0P^S8F-;m#Y-T>^R z_{xkOw&!%&6?S*MFAoBmO?CxjKdE(rA|K@4V>9>G#IUZ7E+uf8vs*i{}HPGOd?u|eFg{~uAT*Tbp%bfIER=Af7`(VcBv#$I~mR4eaGTg6rO_6s~ZDH-=$GXs)&*R<7bRTX|oxG5DR)+0QE1 z_Taft2t0b8MSOXSSN~nVYS$Fg^3@{9zFhHW)NUxJ0(mbLk>olO7;&;SxiW{xiDrXc2w!yzsGkTSk1Iv+ET%EdSSWFaFr zVrW@dskHp|JDc%-kB3G{XBgW*MC3=g1gS)xfn)|mFpT31)7ycJ0x0Mf11xCOA*_nR zEi9@+GJs=|vuU)9ylS&)k?;QO-aN0<;2rWa1nen|r>ZS-UIy^@LzpMewaeVqzO%Lm z>8PW3TX?jq`Ff6RXw9?$NE~PEW-h3)j8l)}s zE~O#h6H#}wvua%`aRlAJ5Xh&PER5<&aM z>7q#>0i1Kk0iL_y2}?TuH{H@*sNzhjpAwag{Xdum{g)E;Pd)0?l(oZVN9e@9@l6$; zB@rOm#s&FxMo|LD$x2mxnY4y0Y27*wI@(wW_IkZLER|2{G=dTUGg8N4hj;7{a`5Z7 z3n+WtIz^Wbrn_#ZKerxb>0w{gZXm)A>^}lSu^O?4W7O8HOEb-^R1DNX?d#wOhVC%T zBB@(jGJMlyJ=%8Hi67w9|ERM-mo^z#HRoWNwO9|Qpr@d#t6zb3)1#pQ=-cihXHe_C z_Rhk8yEli*lBYztQ0ocyFLx~VBpO}LQMvD#fmYP-xq}WZh-Uu| z_A#u!^jvcrzYGi%i$$wrCEn~`9*3?$gea}rCFj2S#%Wx^9vtZ0gH_IOgWJay8UVzE zjS4E*?$7LlIN)1reR?9tUt(>bqwkCHy`S|-HZakz%tey1$`P)%o8i)2PZisJPAnyT zQ`F|W8>PKxF151>X8AB(Ja6R4vF85qu#7(vg&qCqUYnw<{DJMv%S~v%0H<^sP(fr$ zE8?GWC-K;jQ~c4$zk##bVz;OF{LPg$S>ohfj9A|1+_1o4+`2U{$y+`Kf=3@a@EwZ z|4oBxB>ih;wVnh;a4BuB7JML9UcsvUc4WQx6PU91R7ORitvMxDj+Ygy0tFDc30b1W z3;QriYINcD(x&&7`(L}K-sb>}f4l&N|0nJ8f2leD+AbHyD_Z>sLJV(%cK7qbZ1gmh zJ6Tikg>fJ_2QJngujs8uHBd@YwaIt?&8l~CAmFC3`FlSM@hjKE?FrPrH1}bKfJ4V+F8s3_`eq%PY5wO_CnI|r#9mzyY19D5ePU`IQQ z4B#s;cqB6*=??q;+D4>&Xhvv6Et(s9w#@LdDg32Lk7

        mU<8RU$b~yW@l0PlSQGQ zKKQ@&()`aJ`2Umi_>YO6lC0Ibz|Vu@10M`uN|}bcbqt-o7gTryCG*2?@oFU9wUO9W zz49{tduz4|M)IZ*$p5JG)%{*^)4Eg-1 zBWK5r%5ppaz4l8Hl{}aKpf7*v1!;VtJCKbk1cm@7FfHyV=t(H8(S9pG%f_&S22x#7 zlQF&_n^C(8qqb?>4UM!a29b(4NPN-VE;u_$@|z15fDOeP5%P2Vv)d1>G7rL;%#C6g zYm`H3d%5;;C|GYou1hufk-o>6JRfuyWT{i9u-BR1f5u`wFv;=nT3tk4g6#;_L~_?+ zJ}s60JjLO7S}X0YEh|XQ7}Oye$FzT0fpx+h08H>ynKGoJDw;ax!Ua*AMxQksQ8Esi zrUqm)q<7~WZ8%19>?G-N-Fqk0-|ZEqP_kvYu!MAmTX z&R%$Ojm~|g99=AgDhB?$7V0SHHTJQa9PcLIf6e-?>AIA`Pu3lOvd;AXYH742ZB0zw z>HhV;O^TD34`jdyy_SB$-3kQf1$aL$%qE)(GHD@IhTr0HH*_f^wMkp&>(mVgQz&NJ z?YZas@UfFZ5TFZ6Ci#|M&rXqO2uMgE z95y0`%W7&*%QzVbnXaqs&RXr2P_2ySkk5v-YyvIdNtJpH%i%BPbq-}EjB@yMvSn5M ziqA(;N>HeInjFhXM@5Y?c~@e}znSA_iK;nAiw)eu+TmWxig*PjBbZLL!h@%~?GuXY zI!gW@^Hyp5O&;Q~beeUdqCU)+hfL(YBRcss9>k9_Me(Lo+aRy$oV7>)R%<=r9SatI z@-_BTYyVr_9esH-GYex=y8q40|F?7{$l4V!{G3WAz2S=)!MB6+3BCN%dK7?6B5K?e zZueq;`r|IlP$#MO`h4!sB3m|RISd5(?qPn!+H@^kwbq$Dt_r^W3h$n%LtRid6oQC>DGSZ6WK}9{5nSd%dIf6SR z>Sq(9Exns+j%^7~E13P&dkdzqkWm1iSQ;gxs1}JR&zQ)7h$0T@Dg`n!^7iD_(Y{A~ z*Ah>bJb8hPlnmNDhG`YpwFg4faT+Xdu_0bGQ^F2b<`3mS(bK7Go;GVYq+r}tX2}`I zx^3Csh_LUaqm#W?zlq-vTu?RqW|N--YD{ZYm~bQh_ECx2OW9f($ikbh#MJ3xY}ewK z7Z#%Re2|}007|IaKB51`a^ALBR1ON!(pJ=Ozf{Y zU`RPw{HCNmWBg+=PSNJRJEiC0qLQGQz%oVgSB~;+un-)h0G6) zdo z>y0GRO;+X9dkh?&w-BH&Ge}c^yzx)&pDyQtUb?5z2P=={alieLWjGxE+;PbU z=jZpmyGU7{4lt6tMjyY^&8`YC)vO9|XiW^><^4z}Ezi$n}`xrb3~p{eT#K(FUXQy1ifI~p}*^vAlFtkKgU9j~BY=U9k)UG`uaFBgqJ>gB+s zjZ{f&kxAYYWJuJvwF}Ic3@;mhL?2~J17-L1z27@FpZ5kUvCY-KS5=zu_v1YqqtcYS zOM1c>O*Bw1Q)LP*0^ClgfpbRo3B$*yfFw;qSuR2 z;UUv7Cdi~09`~0BT@p3w&YRBa7}Fmu@b%#^vMU$Bt*ts54Z(<4-T|Slj9Sqi_%P2_ z@lo7UQFU+N{>ywognItlIE%ho|9Bop@yhkBzD%8cLwJB&5f;LiU;nVa3=_=0868G# zUeNIIqyJ2lPv1`X1QK1BT$!d4n3Def&|ORKvqi7cPuT4`RdW{H5q;ptP!k6FJoA3J)ROS7=`P-35YW@H!j5Ja;PA2j@D7+Fn!fz!3&;T=w z9+Vrbcb!U~Fy&By`GjyHh0Zlp5~y0a$25tbePoYPZOV6&x+m8M75x6uc?^^dZYs7O zrtl9N@}IljG8VjuJ|S0w@SFriK3H45>STrtb{5oI#u0v#R)dIY-o}VmFT27>Q@)T> zK3}^fP11s6f@OXXcBdX9{dCyy6tv(38eyta5jBWms7MV}b>f}f_Aet{U1z%*=|F+N zfK)i18nCl%t|D_n;kn4wwzL46sVA zT(N632YVWEz>*1lHaGkv)AbUXv9dpFU8XWndu9sx(lti$s`d}DEcMRG?xgSK4uhsl zy2q9Cl2I_I3u4D~1-*9&5Ku#XJZWI{Ou%(X#%x$nbI|*yoWjt(XQArJp21AXW>-lS zl`O5Ji}9ba58Dbd@8Jc-p96%m+feb5K42yeE|JK7Zwk2p+wgD?lKo0kBGAP$?L$c$ zbEU^%(~Lk8_t7w+uTq`jI)`30(D>DUlVazpTbBfGr+y^ru)qfORK9%rF1(Go7_vcf zATsuURkw-!Z}lm?i`PM}izJ(#dRztc0WH9ipK&@NXHq}5%uq|^Ke@QGl2yNyQW<=b zpbJ}gRj%l9FE?ncA;fi~a`y=)N$s(ZtiWHfY??>KzOon97Eq(09tu(eVeh=+0GIjW z(WWhKbQvJJ5Osw-D$h2t;X2LIhRW8-Iigd@ICPNZo0h5ISCE-YOcKOaz!x)=;42b;Z3O5X$`f zR{+b(13}KYw|v|vYv@PZllU8irlcZcL7<_QEkXvGwRx@amuUt~HmCBm?r5G{I&+b9 zC9^~Opg{R9#e%a`-@M&E zpanXO$kEvk+sDiDJ-o#6IKJiU!CbG{+)E67Cf?T!10iu+F;~2vK@Lu0Is?5)!B%rp z*I@=KI11v&r^a|z`yGY8=c#3CbQo3QWrf{6l;JcSA|kWU>67|odNk~SoGEYPOsh*HixZZ zNdVsmhE6dWKHQWoqa#hhr*cgr_|a@!+H>a$ob6DZp}6Yp8Dz>(i=r0B=`sZ22r*_2 zi79lAt^zHlO5#JJ9GwFlv-LI}y`!x(9a)I1(63|pv4ihx%q0QIC?rw9R~h0QWuXp1 zkhSV4-wLk(j&S_?V>0pqcYfEU~Imqu!5`#3pp290|+>P;odrK11niTWD*5D35> zpx>@QCc|%tXXi78aozA$&aOEV>&?6+(EZ`3G-p1z!1t%smt9T(ayT|Ux2^QLf-Y*? z#-D!AhgzC>OwbBMu7Z1IEn&YT#cdd^v=6>%;esy)r5-gri4_it#Uq;}oq>cDj>v%T z_l3j9#Dil4w6^mAxpO$)HM~37-ECl?T3o`ZO-4gYmKlCghnzqpi)1{%F5WZ58L4I& zJi5vZso!-9fj&DL&!W_$qOL$n63fjWM7){mNyOgmle z%T1UuMp?hCKeQ8use=x#!CK~u=p^AH^)I_9tv5G}++*Xo(cZdTf=V4!gQtCCG>rns zXkndP!VFXYtF)PjXgDO}pa}tVNzt}~@mfwwj+?9^+KMY=zpAZrU@r_j&@1EF}`^vO$*CA{4a!SnjgZQCo18T~R<8{%a1|GyX>W zHTB*eSN=7O)nmfdN5O-{J#KH&_rdWAh>#SbxD;;Oz!XCboI9%b{ShpfMI5bonN$P_ zCry>XU+JM_rhW(0X3#gOiH4+kJAq$=mTZ@Ybc{+3R++xC-1$@UXy{fXAdHs@NB`72*T#<#ZO1X7W?vprL- zk$gTX>X)ue>}{XqM&~r8kb$y8@DR*dO-7j38qx*ZmfX~3mnz&ew>9qY!YB1STb9hvSBE?$LVZ7-ZZWx%5{jPHfM0;2CgOZD5N5wqRh}PeXQH z%2XaKBjAy1ICC0*9G)9suMRCplas3G^}O6DNl!tKoS|7USFkVACHPdui*DNwXLdzX z!uL*Q7D#nY9&OnV0IV%;t&x-R310rI7de(TMjVNT;P#tlz-=UH<&`}o!v_&rRelHC<=v!<+$iMXYhqg=jZ9l%{*iNV8ocx&0Rn7#P#DHFw*_> zI2^5xL0L?)A`|#xP2?GVj?6D#i`vg{kY>(Pwq%-bFU>CaCFr!&+Mx%LNw1pS<|)8} z)335jnWFU2UlqifVH}eR6*w?CSz2|!XP1%_v*wLfA0l3jI@g%?`6sQvAr1iY;ATsa zz4oqhAVm+-w&@*f{eo|4VbZ+)ayP5S51QRDlPWV&H01yP)XnW=4hmK4}2Rjjd_J^;_mlB)jiFCFwuHxLoujZypet2cUCqF+O zo0}TJMdySFG{TwKap`>lq$l_70YETBX|V z*s9LsrK&&8IgM~U+0!wr z;p}PVohOP5AW(QlG-|FjtkHx`=ypDL5 zHpnT$=mrMZ{_8SCn~*x8&q1~%L&8n2=bp1@a(}n3AV4HT5;JzNOaBm8AA7kS-J*B7u!he0d01hRqM;GQn1jt zDVNmN3RCh+=}0k3W@V(+5c1Gbsfb(g*w;!}JrCcd$Nr`5kia_FWD3O_|2`cOrC4 zQ|pn&;lbuK1_0&cC$|U@igEZ@A_3itQEuL-MfZ}c0$t2pva(xri-++H=mnB=LErD1+($k17yUS9R#G{H>@XL6-%vW6}}C`|dT`uj^WmWor9 zw5APoMbtf7au`#TORD9+fIoR<-|ERMmtZruS~FY~On?AaU}}M^EVw>xW+6&9v6x{q zhtEz>*UJ#RmN+ex35m-{ox?X|d)bz;o%f zryM6yh{S&+*s*-#ndM24WZ9x=Q?o~ixv3795E~?4!CHT#bL5w3=J<6paX3=bRa?TT z+AC09!4=Wj2<_G)5O(VV#O>YswIo!Y$noMVp<`eX=m#}K`04LVp{7A;#MW@O8QINe z)LA{r5YdR+S#d^RXpb*7*idUdU$dt_USuO?+^Z<)u92bANGZ;sb0m!}N?-{D|J~xK+Q&@YGU)tr9 z=^;SHbv^R`-4+XT1KQp_eR940oApIAJ0PvBSIAY#m9YT3T(UM}>tk&at8k|{})PS{(iF?lVJCFW| zi)`N3Y(=B7s*@By7?eVZEO8TwUGM>FIlO~C*kRlrKVbA9vz9M5sEAa@1oy zy~@EUd&EisFLUFBIf2QIEm+bxyZg2EAS zux8h}TqUP8wQLbiV)WB<^>I&6Xz?rWyCP2yzd;qIhUH}jFN9N}P`|iy0hpeZurjS( zkJFbU0nBs?S;)Mm(^=a&B%;G}Rix#4TKo3S5U8`n<(pZ6w32ToxiM91+w z->1pm--F3v$Qq2Oq*acCb1Es7+bb=71rE_7e4%a&9x2mP+J%6uL;cPYZjg1+HK9EG&at=-{H}ha9-zoBeBd}|Am z+9x1L?fOGAd0)lQO!cjx;_UM&!Vl=0=W3!<2R`+h7!SdOA1FuA!v|g1EUj^@ks*xZhnOJ_D*!GC5iI<2p*0;F`>095 zFldZYx2MFNn-}i7OKgH$xeLtW4|rC#j}9^tsFupgd)|+C(jg#nmM)n`?9&I2-?sTm zw&ylvtB)IM>0heOM^b||9o=&i)F<$Y!=o(1Q`(<(tUqHFR8h0t(y4BusB;&;J?8>H zXgLN>nU+v!c4q>jv*d=En8M$-F-I3)vWjbsvhp6Dw@H|-nYfA8w=M_*IVb)5BYnwC z6Pw(CxC-4{K(UX7&@^9%tMMWjJg_?cfv7m?*V|};3LVbih3;okhZ}xdZMy8ffr{C3 z*jqFSv}dsnL`X!S-S=DISzf|`o4n?-q%-mu{;oZR3=LZu z9?#CS57W5Zs}=i!Ug)jn2)J_4u>%rppJNcF7i-W*f4)vt*}P_2WwD3;2M(F;!%ZY9 z0McT?F9A-M4Ri{En+<0d98^H@O$VNE`n~71dJFb8#8Z!gul28v2>_mn9EPp)V^w`! zAi>yjx<6<|(kRt$1$V$cJ8M)vN=OJkyDA003hdJW>8x1D60S(P=2q+$i$yBKT=Bz@ z2r(ZGojnJiD8QxqQ)AwP^J2mF`SABb;FKj!Q9o}CR_W^k|1gUWPGiiJy?Ll9z)fD# z9yW$v-=D)=h--?GQ;dzxGQ^304xZlJd^>-;zHjOmyoVZetCU|+a3P9(9)<4OJFj)_ z(Xwn(bh+Wc(v1_HyLNwq>1}QmH8($}YQW>2n1Gy^7u=up2HNh4`0WkIszlE#TL%mE z*ERN{0$zzJHiYlt41FIFmEJg}4eo3y!eoL5Fie9z#~8EdjK4l$bqjY>6W}YI(H3AMg9jg6~8$G)G(L*yQ z?Gnw%7Nf5qjB%Hl+m*o4aE;%>9%DPG&DuP zwgp6^KEt15!%5$W&w*Ko6^nEP#mruHRP_LlR2{w~FFIShXmv|^u}t`L;|~gGrOXzG zczD4O7bn5Uj#zUMK;|O{_P`u?ybbBMy{(KgY6;kf=z9pL(y8I+I&gTU0TB0krcE(n zGljEuPxNhpXu!pF5#S)fd}bPh6H)@sZRI<8lHqOch+Mq5nKaltT<_vEGW@xTnKlF_ zt5C)+Wouoju^g4(bbf*GS9hHS^H;w(uJ(0R8GT_4rC@e;HAjy5mhyF%euFO1@MWg+ z81jPzv+A%^aH{IfBMg#~zA=wJBt!zOx z060a&a8-aNu&F^OGV&pgS^|V+Am|fg*Zi4LiH;Xia<#p2E^;7gJb-lU#TQ0N>&Hg$ zr63n%>VSgRBiV5$D=2%{|6VM-mi|*k`m3?}kP06numwvmlZ+`EC+KF9tm`DQM-{Zq z;|8z(V{cIbH9)`M%S$fpD!(fKTCpQU5m)^7P=UB4+fts4J7TJQ*Yr31!i`wFpS3;a zwzwdh#;}U#PJkAldyR=gu{yBAdA+xbqS+!s4brqB)IddV7?p??hUAAIWL$+h>8vvc z9vcKUMex}%X-Up*rxxn4#2Vpz3I_SW4uHf-Ek-AuFXr97L<)s4$*bryRn-k6ER(`` zomS5aAh(DJ3HJ=z4SQ)PTzRJ)%Aiwz%ajj1o*zw^`Gbz`r%SqXqkfz-n#laDLFGyk zK7pIRqe=dGyu#m&VWRdq??-ChsJPlJsY9Zo3(0#<+rQzQ+uPo^AUT8XQkkF-@)7g) z<@ zv6$e1st2{Lv19?vZGOCMB#uJmN26l?T-ilv+S&$#Gh^f6pE1eN^n5`;$|qP*lH2l< z#>(EMK&M*y2m+A$S709nzeNc|W4(ZZj%uZ}(!j0=!4|4YLA3z-#%>&SB1gAIw$+(tj$^=3Z`~Wh;c8mq+xF6R85+JsPbqU z0y5xM#uvlM>1c4XIRP6m8%`cPu*;;;X*$TrVgoO90?yzCc9p&ao1&V5silz zXF2#r_{(N4U<(Wf1V=ET$7s?FY5C1yLhK8om;q%Jn+}KImx&(2cbIEyijUNfPQ!4( zhIC$sMKp$Et2~TOuKKLTz*ZFW%lfl5Oc)TaR-Pxv5h- zJ_EKmCm%yGlik7wG~E2|oV1lwP-22v`!+ntHBAd|hWd}&+p}}yEg#)FR-=fDcsw3h zv4bQAe1{;~Nxf9md@?+W>9XY~R{A^vAX?+Bi0a5@nCJQ5^sgG-diXcV3w^0M%MbafvjQ7gKR~z*L zor25SPfV5m1%iZf`$Z^AC-P>t*Q@I(sH36z02&>L)98UKa7PVJ8G40brlI{18bdt6 z2`xT=JRS~5H6|eRkjvloFLD%x-RR-)LVcGL<>*9)et3naLa4)#4)&z$GX^YNP+BgPcy00R5gMFxty0 zN}v%6$PkzAdtr2dMeE9wuBd8HWDNHWZ&W(nAl)D_!|+5Rm?459BAE|WW0}zy7-TR2 z+4)I&K=K}BKfccoIuwq9HyBBg^EllgunQOfad=x?z;|gNM)5oCS6_Y+zI9a7U4#&Z zKI?>pw_KmN;V*+E7W1j75jq!N7Os>hI=)Wrqu=c`efSt%rJ8~hlbC8J;8}uuuSbR=l!-wI)2;Suw zcsocB!iR_W0HbiI$YL-FGLN0qJwAGroQ6js#q1KVpr(1i#XYNC3E2KH@2A(;EmTO+ z0KjC$q*zs+1`q#tCYDGN3{akaGdSMFMTN03PwAVD($IXHMG~nCdO}(;jvn>End56d zs^{}n&Lah)_qR7sI1fI;2E?m<+xUg<3l^;;e>nyl?PwF@Bt~&Em>>^wkglFoB*T*a zcn-q8ehPL0i-gILu%$q2Dw#yiJT%%S128ikbI0_CCTJu~;GCpY z>{$dw+g#WBv05=AN`PwXQy7$1FrfE*Y4cbe8E&6qOt%XjDU(iHx_zAASRw*7@)Tgx?^X zH;@j8z2n29+gtbtpXI|8tPa~-#uSX&9u_GQrzwbTFubU| z@-@KsaHY59%Akjf0I3i~JSU-=JgiQTAfYYLhy)-}+JgXKXzK*a`Fj_75ocMrkS%Luv3egVbp$D=s$mmhK4W}je|IC@2iZaLxN6tl0E z`4mZ1)w5w_OpOC7BFwIOI+EZw+Y}akgXH4m(qgEKm-yY#Wy1LVPzlFAssxOQ7q_?X zICk^yv^yROCdE}q=CX?+Gb*UP@$i5I)C504MqS|NHyD&b@eNo$cmPcCo-5uP;<63Y zc`qS~7Z{^-B_DL+pex~=(!T@n5RP$n4RcovP1Hjne@?tGt)qFis?Tvk4zB4yW7hAqf;mHFgiu1CvS~v8De4-QK&l= zQhO8wTGPR31OE7ENNx~nf7Dn5_&*+*SP5s(F9|d`&^@!)<$^frTd!svAi%D9uDX9i4uv$E{oTQ!|_n?-U3^I2{wIn#0ddMkERH3 z`ZW+SIxi*6{UrsRl`<8*O52$)Q*%n^nhcBqX!;tk?$*JhJ{{By*3oG;$bdF~`9U)m zGu>{X`l8!XDZ)c~ZQD&9DhD5h`4~7W^GzbPmQhcn2M@wx4jO(% zYih~ax94nX*_I1lp2Ee{Y>8=}8_}QBdl@e0bI%^8YRZdwz|SA0YW91~4HA{@PT!3( z@fjKwpwv{Nw%}i+Vt{EZCVYJrud#nM4G@Y}FJNnQa#gPucQn>cGM{SBy8T%hT4(Fn_C)>^qL zjQDZPU$KC3wDcLulk0PWaTg$H+b9^b-8x8u?BE#6H&)R4C`w0Id}b_*>9eH9jL(pv z&edj00_8J|9%N@ike(B~-2q}px4^r;ZthMu#NZTdN*00SZz8PGT<5z1m*2!qmz$t75rkHP~j+rH))kT!Em}gAxF`Y)IoXFx}20 z6o0lb09h*6DmR-=H!@~0Yl>$dl62MRGyA<=D}aGpZ$@Pa45TkTg6MP}rl;s`r{E;i z{v80S3R=jG5vG)2r8=xc!P=Rch96J; zcW8wH#Am#W<1Sn%r}Jba*Lo7r3upw$2W(As-bnVbnSEC+J&|@^-S8@ly9Rg z)0G@aO7_7E>L-tilLASL?%l;OKP%2-lf)NsLiEK~yej#wrnNR8Vt$MAE>%yvwE>H+ zNjglTfj$(JMG~iE|E5gw+Axl^uxlO0bD|lE6-zZUDdHL)I4j%(>_QqjlukeH%M_yS4W(CNTUTx+5jGfT+XHcnD5Y-P#_c9#c8h7qY8UNqf2A=Ha$u zo!R&R5}V=FSe|8Qa2~~>*l&7}9CQWAX*pBf3Beg_T^^pH8lL3gOpcy>CC4{;G*?5W zR&fyua;)NUt#dIl4wO)Z-ND;)xb&gnLu6@e1_lFXXQIRP#N$xdCSJNjD5Bc=Fx8gi zD^`5p5B}@Fy2kUvZz7Bk<}wwH$p*qqgv*Ly*2_VVWe1dw58@aE(7S`-q*tJ%i{f{W zF1YS=So9_s2kl*)6usf}QF&SpP`6!dtXb*hjDk4h-5!jQSX_~L_`x%hbfnnl8b}1L zjicRj9!`Z2`HI@=o>s^lrBhJF2Y-M81OFeu_vm2J#s81%&hcF}(SZ{5gk)US4=B&u zHyv|R_%A&q=hS6g3*iFvNJTIO)4i{w@o3AR_I^;##+lJ@_I1*GPv(Apa7;)v>{y1v z2N@1e0cD5{$;`?hhV>%yR{pxez`b$MIm=yu(nq@oX}r~R=&0UmO4pv->=daFJgIv8*HxEtZBiy?e;@q$i zT;R=n^A(*I05cxN37Io$+VQq@u~Xa>6dfTbf=)xvo0YqE_R0~oc3^Ol{Glv_KHW#8 zP|^~k;*d7*@{>Rx7G@nXd+uqheG!pd4DKKpbv$d-C}+t+jjmnxpvHNc$84W{Vk~gO zxs3%r^I-wchj`O{@UfVv7RP0|!h?-)X-8&MdlJtryNzsAKD{uEO%sj{*P>ik?)%pw zEms^$pBN=-1*H|Zrah6hWj8nr|7S8^Cri*5;ZON!DZakIo1@|L@nTs_={G+8pX+%} zA5;AGcs*HHxO4M$z5pRTqD=3X>8j*!zm%8q;nO_jujjFDVp7}OE;q>y>dkR$+!(jS zZ7_TW4Nwi&;w*f<20=jGD8-jI>%8J`zvtOpet&bZUW%_j!7QaOuM-#`{8~em*uExw zULd0(KnBKO7y?&^ntT~!NHa4OJ5|Fcydjl$35QQa4kBm#hFO3C>^Q(6av1ZKh&O!Q zTXG;(ytup$9`Ls?2LFPX1RlZH9$k7tPl>JMQ@jU)o+=MTzNu3hIj0Jq3m&5MEBMJA zqnXC|kbm}iqHJxy=r6gZx@r#Ii0>gKWWjI#uHj@{2&btE`AS)Qv8KM%TkRR=u*(-K z9tWvjC$<}FB3XYcFwo?YSr>T$W9UhJ z){8is1ou2q%BwgKCR9hVhLoN8=et~1-kJVWlI9D%6r;W@ot{6&ThvBLRir_d&*(gw zgg5O8Iho*oMm!S`k2F+JYU$fop#F7{ER$If-0;4SfFov`Ab2^?13+y#2ZD4tUjY%kA&aSMnHB?Fx8RQJ!$U``z#2 z&~H8x@>O0grnx)}xUc`z?;R0^lX*VHQut|HHbBP*Yn_qz>*713%#0*`^>b0Js930z zzbD>?P|;V5b{jWW3mzGR*+bvp$JM-EmNsB6uoDEVW7MMOT5mnIUclhe!LU?RB*4oW zy&1d>8*gHC$!`DdDO{Y!>HQ1Q+xleM`h-sdjueOd&;bT8U@|>PmYGWh7-Su&Dk)AF zHttK9gS$nS@bWOgl)zD<`*1JHtHTT6&Oq)Q4)8c8>z0W^0;oGy`+)j|2WD%Gzi4fA zP1hgQfCGzZ4u*99lnD&<-C~+tqh*wQDAu#}3=e(%9zY|(OlVDrUID}(8pN!1)4U@zPZqiMPy!syJS;Ct)(OB+4G`k<=hmTm3K%&@5Bc3b;~ zbsP_%FAFb?(TwJM!S^R^jmtLQ(9v6bYr?>t*EO-PbUOeyV7 zB8h;0q+$@_H3-mkX5!F)145upY})F6lkr#$f^ak~0nkQARZM*Su7ptBSsz9^W$;g< zyAl!N2-@eq;>Pj5j$o=sG*Hm^jFe7G%RV@YCLNbk$poR3zDpuL3xFU62~e5SLX#rS z!NlV3Y;8V>0oEH7v~-4yiAx>aGH9P>9Q@cR{)3JY(KSAtq7DOjA+^s=oG3?cmyZ1- zaHGaW`>|g$8#j-H6rhIa$3q?QROxA%WcnD?hak{#W!K#XQtvFh3?bNpsn{UIoJZp^6?6DJM>B$Q^(2$XAO`@ ziUh^jJ&M0Ev|`jqwI}QfnuDMlY`sE&@5p<#=%|QJ<1ox{9<_`CSt3nsVdaiAwH>lK z?Yv&5ZI}yajCQq5tr1pK>^v-H6YVYm13(x+O+MA$X&Vo+50dF>7>X(ZS9xSI$|j&A zWN!S8ckFSthRvk2oax}u&7kjk)y_i^d8~V4+j4=|zGLwcs`V%67fo(?HG+w^ef@*% zx<sPD1x0XDhTgKtySrk=3vodOH&T{X*B zNip>kuC2jZ%s$dbuBF#auuOSN&{#ybfopo>e-2NXNwo_!@Q<$I$}&1Z3;7a5Gg9l3 zjRcC$qvQf37=VX7(y_SuBykPX24~Z7mn?U($?!yQzw)hp65B%h8I3N6;emUuTN6CV za9b5Lw<#`)k+&c6Nv~ax^Q|+Byb8&cFv{>`3^mVxZHjHg=@x*k zCN4?y)QHX6VOXcAWJvtJO@sLAD<*6JV6dPcgvK3BP-;SY0Z6(v)n=-F=7^QozM;#K z!L~63kO5i_0*gI;RvGacMQgJhJ#q>v#x}~zr_IInt~HlZAsTBcxHXXO8n4DCr@It$ zWwlN!?_txyjX65T9b;-}@D{G)qa)84O^b;+@^nFSMoSTNa~t0DmFM%y4X?}7Gy8OM zDWLKw`0j5<9*Kzx;*~fJR-4}HuCQr7UO948Tz{EoT1^8`FZkxKwxOd_f`Wh@gxwjq z&^Elz#($c?^XU0zs7Ig*SLFh}b?}k})Qs}fTYN?b({_xwW3!$HQ)pIHl}A;R*41uY zl`*=8z@0bNmAk<%R_^E|yX$$DtK4xd*n4$-ywoWdhucTNg9jRDJRrV)CzKjpihG0w z?-`_Z!00cV0olg$j*ZFi$er&l> zP(;jNs2LzAka2Z-MIyq}=(UcvG-a z70>##0hl~RTdq@;7uYhVR7b z*X266D%VqxKh+xM)-~Q6PWO3Ni##pHARGiJkeC8oD`nI)?{U3wrw%uEcL$OCXBE23 zazQsWT4ML#K)uXa9Lf^v&a8?TT9O!FmJ5MZ1a;L_3E z&(P5V#5T2)N$6-5@B z-h6o{!SD7o=JYP=Z&IVu)r*TTW3;oHP-NUwO-Mx{v1m{ga+dvDY38UY?62|;%)b$s z-oXTi*_6`TpIs95TYyfqjuj3(fXD6_Hn=*O6_A3p1 zDQ9m)_AbGVzx!2`-ndUNNV-~eWjwX!g3TX0i0fJ(^aFN65V`I{{ zBdd*6vIm-uUWrA+o>7;GJ|Alc;-%2i3yr~{!hACn*&`O|IHlz{cPd^EaWTX{bOIP; zy(h*FRJDwfsEQ8yiCbyY)EA5?kiZhXS(SvgOe-n;6!mfd-EBTC^gGoh3nLg@4eF{c zs=YhGY0v>0)*02E06abTH^NmTT0_#h#w$tF;*rZjo5;&m&p{6?`OcMTjt<%`ITWYAMO#;v z?&g;(FQc(nYB#5DDC=m0)`=RXiyVcYaNQ;jrunKP4IULHlPy&2kE8O$Fprn%yc7@t zI+1SVxtyLKJM_>I#2X@o;R(i2KzF@yy39h}&^n(;M}v*BcWam*h`X(cSxBTQU4GAEU~~z7Q%^@t@o)`902AGQn>Xo&=OmXPchE?&|$pBvdm&s8(H z#NRPPDR&%iqCryQ9|!k{FlR^S!M&lY`|-AfCSh;WwvoG=DsKF*JOWexA)(*o;Mgyd zCE1$=Mla`LS_mDX!e%r8SE!@qY=Ajj+g(P;4Q4$&Shh`XE%Y`bzlEJ@39vC=(E(%+ z_}+xmQCZIknU0A}WA%;ig*6b4QYNw!R}yC*5;-&BLziPy%$Rg7R*lAmLkDN&(bQ%} zm=g!wOJ!S!n2o9IjyLJ(~>N~+d_L(eOJC5?a0Eyl&ByqmnPLJ=Ch$unI{|h z8Y`+!fgCyh7W<+<`Sx%2lke<^?!M#Lgm}F$W*T}{m!vh@(k&YAcBliQXeTlw!Zqw> zoSVeo*7=El6rR=u_+Fz0T=d&Qun1p7R$=-D@04xg4M}EmP+Li-vn?bnnobzLm>9??C9R1CvYnxMu&poy~AAhge;I}8FDN&oGG zAh7rXgYb+5C|C~+o($Jr#oSiXe+o}U!@NTOnQMDDH%L+hezS z<1%p4*gHd5%UY}hc1Cdz5xqr4Ddpqs(`OOupF*79S&Z){zV9x!+k!3LmfFPg7T}gh zs#pB~Au?a+_yw}FJ}UVI!4Q;>N`LV{*?DF2qY_|L!!0Q=_L`>H|J%5rx$9ykEn`k= z1nPa7vIGnJ6^<+ECyH(GbU;lZw$|8-L<*+6Ifa9+tTb^AvT^gVB~3f}Afe4{1#dmN z!A?)Wum30s3cnZV&l!EYG)`qS#3^uqEcdu~2`aR(H1JPIxz@7g20Ll-nLak|noV zstw7nhroiXdh<7hk1Mra!cpY_tebVUWdLBxF>i4Mj;=h_%*3dDRERaI98YQcvHXDC zAsVS2SPi=M6VK7Ynk1ajBKWDur&(`|{~9!C9{aisPy|mPBYTbyyc3C2Vn_VASW*mq z4D)ghG7h&%&1t5>6z^NZCYdhXT1I!l*gR!qy4IK)h#RK1SOZ{z>k3QL z;MAzO&6qY?l)D(RU^HE`d=q0af?+H$DImzoyqb4b!3E{C!SL8rQsXX(@rW~&wHI`t zW^3m0u1wOnD=*SJ z;nOI$o3T&~j+g)&6e&7SR~I>qC~l#^#2rp3_oB6ff#G*11mmdL!JHBYRmm9x%1P#V z>}`BE2i8zf)p~^O@IDinT9GPh`naZ5&1h4{9FtwR!=6dcD-H^nvgDLa0~m_+!dyMm z%F%3XkipIKOv(jEqIl@*;cYk6>WU9S*4>1AXzv1RCVUfxcb|og27pv|HUqG}8|5fR zM9#KvOU!I9!yxc5$sO%AQxTQZX|fRf%~n?slJ66e5sfxklPcUwx}CYdL5%JYoU#Yy z?|29u@&ykC<^I<5w^p(Kj0x#W$drV7h#K}Pbuhr>I9UJVe|%26Ojir7VB6QE?jn2s zq&CbQX#45R8I2FMFaIb`@Qb{vl1ct!GN02S8zRn9$BF7^sN==?WI?`MVq}LaSF-e> z4*6ekw|2Ei(mWU^qh*nb5;!&Z0eaK?<@PqXL5hjGdRXb^?{8lG{EYMeH+718(4+o} zeLVGJ>~k{5eFCdwo>E4S(M1NGQow7SuF9priV^9Xgfi zG2sD8>7`xUd5FDu<9m@_=L@gNk+Smxr1W#E7_61{cTH` z*E4kFhQYVrYXx7wc>MFvZ-4yt+2enI`|9QMU*150@BVglqQ!8;Wd0g=EmyqzgG?ou zl0akm_E2lQoc~Ji8jmv7$qa>bx`@5RI!#$DiapA}J5Y*iJ{o%PcLMlt8PQ+!$$FYt zg323`7Zr$JKDoB>Qim&voz_6YU{QR?rvcr>wJ3}E%10>!wMKHGPUspm>*;KcX&WXp zqOP!>JZzW(F1Zx113n>ch7PUu0F%G_lwK|lU%(`DV;cAJ4`4TCE(l>^?J^uXLUc{` zteCgbBW~>L0hn&X^DrWP+dKAWCpHo10H_maP%I>TC%^6AOP{6-9;UkE z0NTTsCcsNoz0D7eN?N_FWH?T@Oq_wF>Q7(3uobqw$f-+Tp|H^;wH3GC8(*>hA86F^ z`bxQEThSB+qO#!(nbYNNa9PBdV0D#xH>eE3gj&lO97DYgoh6W4Je*|GQ8Ck9X$b%n za{lShbg4{R6?ba`KLAe~)~b(zxPGG$pz}ad>VPHmJlH=^ZCdI&-<6Wwc5WyRY|PO% z2sjX*y`I3M`fU-ml17RQi#T}I5K{>3;CY(x3AT*{l2E=Zi9A~Nj#R?jRF_U{@KO-+ z8ID55C$_X`0xzD1>Quvt65pda_mbfZYXqyXE)6#ei#|L?gk)1gR=NyOS9K$3IzCSwJnbuF~%77S$LI?-WMyp;$T+(Cw{zmjsKSTPk3HW z99kS17atTvey-pz=xxrEvn$O0IKUWK49>uGI!e;_+SE}ePA>Sw$ptw1fRj3Ka$y}f zNx8aE;B0|gJ_8Y3qkFzr<992G$)IfrcwI7|?-<9C3DZ9tWMr zvdw4ntbHXBCljwGDm)F7uLH#IXx6T7RMjhTnOZM37*JmG6MX8CuqAz{qSyKU83a{~AXe{pZq$2kM~4N#U(5bWs`_(6SI-=M`i(3{`)`cm_Pjs5R1 zHH}&m6R+XR=^d1|L8h;M|E7M}zHxn~s$yT~$(M0eyFwDhZ73?Y)eENiK2Q55PxGG7 z-MgpPYQjxjxw;QXs^naON+spRue*S&Ygn*~>M@yvG-tuvGG11TLQ5}byX@4u`?l@E zQwD`*#;4{J=GnzKCf&c``hmz~E$geP8l@9hHQD)2(Oq}KC zt8!rgYqZ$d`0N@sQbjGjDHj842-E@Q09TXjaq#V5f3TbrIIeTB#lxEs4Cz8LQRp63hC zg!c9Y&-*TLKaLqv7u&Rq?X7|L;Jt18a2@RU^kHp-ow!t4NGLiUg7VwZ!c~Q6)492O zqEQKX&;$q`1H#6Ax83%R&`&PEQU2WWOE8AT!Io|(Pw!QCVYrdJyEOn>b+4jAk z&2y;GUU#%Px3qnR8;|$A^Z27~J^l>$9)Gc$kDJeH@!x)IX*%ZyWO>HwdysoLQLIyQ zXc?FB!L1#1^0$4}tq~ibq766hnt!|9dTjix{#Yl=d?)C4z8Se4(5JjA+4PE?aDjDYQJuI50tF?mkk}V4@o=0u0?l->A4ZyHvxEAb5};yZwN3mB0u1`6x+dI zPvtGpTgu9=p4c+rXL)kX7CE4u&tu(g&=APPTDvmEPEw(o?F_CN;{Jlb1Mahm1OD4r zC`c^#Z0J)8h<1p3iixfGeJW|Oy)Dme?xsz8m*)1Zv48n?iN%IKXW9hLW$7^NTcy*^ zqDSH{ZY!yuDH8<4T$byTprwar&!|{wDX(d-$nO!M)5?-qca3?;TO)U?r`=!eM#!x| z#E61=UCo@bt;oGY>i8!%M%4|O;UCM8x52%;k#HDwzh!j8+88u``&w<{-C%Q)F|##!+-o;X82~7Z#gCdMqE6zhyJEvHr;3 zI5p$z)vxTt2x4LCCT(OFXH?O_T~-c7k0Z*oMF#1?_Y90Nm?HzsGW|dsV)VNy)}swg zf$0qxa<3N+WfL!w_wu|1j70)OH}eh4J()roT6WV9YvHhsS+;=>%$25wQ0cC#Qg(>* z(}Y*I23MPJAQstvJQzGB&48QsMwInj;yh_`b)sO zD?te2mQ6J+>68u1D`uFPXH~Wp72~es*2USz`CErsqkg$wi4E-C4x+vFT&F!0Pcuur zSr(HC#$U6n;Iy1Ttt@z$LlBp;ZD6#L9U`0WDxJ;S(k<_6Gu%yB5l#@>n?ENbPUo(x zv?r`!iC0`Vv|-8vZ(nJ!#i7J{b8aA$!&r*`@*rbpaob_mCv>7ND?mwX60X(?mexCC zjZM`u`r;xRzED@>_qU*aeAgEL!GH(T-+KEVQA!y0?L8o?!U|E4+oGrRSx%=OaF*7mT- zPJ8}z`r9UspOyUV)HG4-n)T?F3v=*n0yL?pM2u#@3v${e#k7xgC#l0PT-|e*g(7On zP*aTwZK0v08oK$6_fV^D!ptI>Dx7mV@H4rDuXwKMKHX)&U$(pY$%N*v-W|r-UTNDt z;FdSw(KfmV{Y6M&1=~CvfPbIGz~9llcheH~Ytws{nC>F(WWDLreOa3sxnB` zmc3uty;7}cKdX53A9(o1vkxG1D+58XA|q#vyRM`KuPDQx=Uj0gDP8#N+_KHU6sc)Y`AXbpY?<$HTJFd!hSk)N4CQ9&m>Qn;ddXx&%j}bp z8rPLnCeQcE;PE78*}my?)%_lQQ{~Tk0BY8^2w7T*wC(O|Q;f)L3BxAIa+zFHtV9i- z;2pCk+R)gSn+7*^<^Ez_T{!oa*mqIrN%tVAmI4d9%o~$JF^^9iN=}=~=mB43X)>}u zX`sfYIdg#IKTl1$tTL=CV*Y@+-?pJHNgujFa@FS}{rckal3i*WLZLyv3GCFSMZMvM zlR6ye+qz~}H)kr3s9xQzVJM95{Wdj0H?a6ZIesa-2V~yW?B*fc=XQB!o1FN_a9CeV zKe7Tj8;t@OMHS?;g>@ULe&q1>?CCud2y5x%q1dMhVttO>=1-BYe5ZtS@x{r}!$Fo& zwiI_*SUIcp`U-n_k|C@Rc)Ph<>!;Spik$|g?`7R55zLzg)(C8CBG|rZV0$Kk?UDj^ zrv$M5(!Z?auf0;gti-Q|v@hpy@I4a0d}&`T09!M$$f8QE-9+Z5A*ZNhN&LQp)#cPz zY}f$6U_w6#jX#>8)P(c`kaTOR%~W&4fabyMy0mbtIz`4d5o<;AvMk7w6|E;4lE?rp z2Z1doeO?(`(iN@Ea`eb4s2JNQE1xzOH+JAQmQw1%nhI_Wq`StevB~KTc5ox9nskq) zKundkG$V{P!ERgv0f@(523^~h&5mtU0?EhfAv7n(HDH`96IB4AvRnltL!&<>zy zmIU_@3mO0l`9Ols5wtpZB)-AfjBU!sHx z8Ydhc2EX(D4}5^dWNKw4oF6aYkD-kzl+CFQ}(Dd|a%=zRDS&un^EC2>lwD zd45G~E%EmZZO@NzFZe;nm2WSEXs8y>WSj|;le>^ zp7e{gcqD~6UPn2=kpB&C8aGhZ z5Fh%6cLqx4F`2|*kgm0U9rfqDa>&!+pScarp{DZ=^Qp_qPgMr1m~0gYJK|N(Jm+36 z^FP)Uz!%x=Te`gSOnu4??l@sxsQ-*R2W;dHnq*Mj+O|3GCfD)hk9uau-J~H`=G=~a zxnm;bcJkR*O3KsL|8Kdp`qi?WK#SFLzHGDHc4rsD1k-A<=F>2M>iKe3%yG$ZAwYfg zxo_`!T3mkA1zt{{ziPk4%cW7vMP6I3@#5F=*luJD<03Doscn~e(UIzs@+a!al{%A~ z@7n?qhq|kNLOJLt4C{2?lp zi=6G$e(J9H9sPq!AxHWiMt!KHca9ys^#LIwR zc?C&glqS=3J!Ko2H@b)##r&PH(WJH@_eVc!x@JJ$nXr+7f$frDJT3WXSh^ZWZeE~+ zd5%yQ9W#tWNmWlDG>#IGmDtk9z`6{F?sQt>jn`csazIp7*DlxD>@arDfN4V|D*Yx$ zs=#Y%XCo|z)Wkz5)FAbn2xg3{j}`_I#50!)lya=`yW06F$9brgJ=8f}%s!X;-MY3D ze6s1qn_0-E;M)iCRoZ9biK2cI>ckTTeI&HF-zFlp?oyCvhekdsSJQ4K-q*Bf>mi-s zAr3cQ(b^Fz63k?kb9k(aR0~yJrQ6Wzor|eh%TkEW_2YPzoZ_qM#CHC<6kNODj2x`Q z*vF%*$wVD%tql`-t-R5P%#y8cSN6TK>T3&G-i>N zPJ+WjB&vif@WyChx!~x7pDZ7Nfd<8kh~7#wKAJSWBQ6>QWd**KBKfYJlTSO5bFGGC z7W3i^SBwoj&tg>=hiM?c)Q>fy4Xod>(~!|Z{hGwjKz$Q0Bu5U^H)R(-$}0ap}kJ7 zhU%KS1lyOci(TjI?R%VmMmn(0e-s!vnV`n*CjAIBze}nTU3t+2n<&LeYxZe<+z-43 z6UMKy`$Ba)o)j!3ri*YLN>jeNb6AIj2x$BIYsqH^>}Yj8=Yq*_!3yO+5Ok6)YvP$8jx>jX}#L5AtMH}tt}X==VNQA zib_SxVw}Hoa%ZRn*$8y_+H$StM;pg$_gQtKx-)nxXk%~GTocEVHjJ-2I8#iN30}xS z%lFefxs;n$Xv+DHt81B`geTsX-WKj|C!E;BTAPb%9xIG%Sd{5YknFW~EvK~O=4|fB zTn(Gr+y&_N`DadXaUV*>2OF~ZB_DJm)(u&f;bLA@$}5!cZ-)(X^*tz-tPrBHGU@K2 z3NGvJ5R0V59Q}bQCtu5SLCz@BLF#+JoM znM8HCN)`)VLjyK{FLVCvQ$$VBp71-q?;(Wt9fZ7paKYl~DIb(!+9$N%J5S%^bQOCD zi$cVFAS#zUV4ni4J^IC%fwRtNyE! znRGq^kexnhkpY;Kzta|K*((q@f2?yEAS4)^#`$t=9o8TVh}mwoWLi$n_I^nwO4C|B z7r(Zg>WdpMjG^%#V{`?wG4B?=p8rN;Bx%kSpM-md%Rqt?`9UNuL6DvGN(XbMgjAHkBuL32Y_>#x;BaAvv=_9 z*m_nHh->YsJr$3GLvtc)MRBW8A+`wBMZ7zNYSSfz1z zm>$;#*Z0-+umYaPE%OlBnLQ4LYxLeu+MC8JD2yH$L`0WG!g}aCQJ`+<*hJmr&AmGB z>9N)cg|~)@uu?%7SNTu404nxB;PEx6h{0^iUgK(|s*P{Ngt?}TvfWT%5k@U|R1O|B z_J)}$?%U-h(waynM|&F3XQ}6gOL~rLIAV7}pUX>;(8-ER!>r;8&Nb^ovi10N=vFY7 zc8!M@q_T14vsQgyYl>4}>orD)q3qUmLqM6K6;}TfB7-eN7>j1ytm4%w$6YJkZ-TFR z`TEuK$QCGid6Zj?FLlWSD}u(4`rjMVj(y%Ls71Wfz)Z&n9P>;CwMe`(SYn)n#j zwY1Xpw1WbFYZcIzm1Hb$9HLc#=VV^drcI2tfHgQOF!*B4S)EK@syfPm*342t@D0B6fprK(npnqf2 zAZQa+HSO2#gCp8jmnL>`?(x7%#n^PdvHd<{i3@O_I0J>p1De zgW=%tAF@8f^ukvWj^H}J#r^ZC%;pa(uR# zXQz3~lVXmemSslkP327|pSCgGN1K1EQLjz=HhW&fU@e>P`ZR4|%?9qnDrq+7j8}w~ zRfTt1TKl-y(W5s#dD1`}*|AV65$I5A4JYnZKvh|za zz?39cqfnwl4+PrKd3>{F%e=*Be=BQc#*&Mmo*ap=xx%_ez-mhsIy6dgmD7v$J*udL%EEbv=Msif)ddjaqD)%mn)sH&K9#n<~ zIvxrKEZ^!qN3ToUr)|`=GECG36=*G;ol_AA+ji&eBltMgTAiEXzQ@^Q7YdN6BOdVv zaDKLq4rND;G*a2iHS@8^)F>*P=q?zS8fHF28TF-+Z?*#&NfB3e1`Zx~kCA*0YqDEW z=oGzZT2bnjzNnKB<1HHCI#5=p8k0eqf7~|qCz~~cpCJ!Z8>A1e_tO_o7c0C+`GySf z>#!>_c*b$P+ria$<_f47ncosF?6O}W4RzPxl8N6@gMfkB^ zwAC=7v0lVd%{m)qia@v>2IAgzBCrCKfzr2O>qa(IyTw-+sbY>G;@V98Yn=twqtkD( z>Jh<9ju-)QzMqc(PQBMb^#4ehAjGt-upTQ9ptxEU6#cSfR=Sh!|z*Tp$) z$|%{9ta^YmEpzc63c0Mo7Ls#OW6|#x{)aZ2iZI%ne73*tGnS;bG*hkrwW#fc<$5H6uc|G0LXKP@#3PglPByYG#_dT!ezsOt|$G|Zy% z8y<3!R$Qupog{Aq($Lr^qbCJXe|UAq@oj;Y?fW=x;_1mfNWX?a;>-~R&}!I$X>Ff0 zTBd+YIWFQ=IwBA*x|)`ARI!&VK#Zz^n;%(cM9;df?6jJmFP3!7o5uDlthMsVJ?=qc zHl*M+bX0ALb?;^dCsd&AFe zd_`*9kxsuaZ4{tz{%Bu58~oD-=p66g8+OUwA3m3f>7L%*CC*F3ns;|?yj?I~(g}Pp zV-VcR1n_~H{kGH%^bBi91Kd1lc)Gq(qnP;<$0hbsh$;A=>6b^h5j&qaIMUqxesnJ& zKoqSFT7Im>L+774bPS!9hb>7|*rH{r_{;r*9bN{wL#DXTIJeq?c7VRXGVh_`Bu-FTC}gCnMI5$1SQfX-dg%=>B7~30o5;2 z(p#p0eUU_G37kYL{1CZJrBO|O9M{K>#Dk}rfIm;b+&D-0xiL6n$X0~3nh}rSTx-#4 zM#JCgTmqebdrx^e8_lzulsc@HoVGyYw7ED`v|l>;Z?B)e6qU+S+P&bPFW?bW;eVzB zkjjyT@B%JMLJ|c$)0Dg;TmRy89<1kLvTiu zk!xJUUf0hLbF?kq+8hvl{?X6Uc}0bGUSnPR7H#SR{wj{lSw-QHOwGomXC@x00Za4p zawj%WVL%-&eM?CDd4)BzFM$(0pKs$(wR*k?#6SUYAFs>EB5BB`f{k0cL{0Q@3d)^l z{Hh2`A`PgP+k0p0MhV^x4Id5J3N`$i?CDcNFaSUtl-HPbGe=$JiA2&LJ49gzvk)`A zo|lGn!ih$fL5pqkDkz>PSg$?%%d*O07YCE|nFb2p$^5gD<;%l&`;=A=yFIQ$SefCN&qwf__VsgR`!9%GhA_(D9V2U2k$Su?! z)bR)S2vi8I#2ye-W6y}qzAdJr`ff#hzlgY8!{Y+_r-GeTN9X8o;9gdFPMuF*Z3v`TDhd`u&M+)X2#m# zL!fE1&Sd>yY2o~iDPn-`FULlQFZfTmu1~bB*H7%q(Gs^%s&docT%0r5Q&;z1*q&Zg zT~1!3=%)$3R~KZl=ZGcGUe4?fZmG>4mcH{uqpzVrSEZ}KG?50m;%ps=E61@jB(%a| zsNmgDhYt{{Fa=V^P&S6)>#!#nXf@pbln;&ORd$B`2Pr4**q;o5D8weGxe~|3VJ&o0 z3;^pqq?CdWV~JuXa(~AXC4{5&wet239lNeRVq)<@{n3%W>{1If3qX{(8zUCWUv3z? zlnOVJneciu9 zh|*zQ1(@0!i!IU)UyMiqvuYFZ0LPMreRl8IiQE{<@GkO18QS08R4))9M?!n!8E~?T zLQAm5;;70pnGb9ZvlnwD?3hPB(r+ZK+~I4ilpRzK_SF%~C$}M8hcH-+-;{%Ml$GMK zX7&lEGX77>1N!t>paZp7vL)hnva%_AOZBZ!@MjmssqlgGX7V4@sb~X2ELFQ%Ss3@a zY06ALfBhO9RG|Z5>7}d|S9T!7)c$<-P&d8uO4>iPQh!2x_03mOaWe2qI9{M5b=6sM zdBVv1W65P;(5HTW$@T=OEm$pr1^MvUmd>N#sv{0@%hB4@_u<=XewoCZ^q^*7IE&YR z1W>}P4Q6+}yk(fnVOcUw{98iDSCoTG0Y;U;Z!37kU_@Ga#%K3M(5~=op&aAvhTH-Q z{sZ^@3H<%3^7)DM<%O4bid8L$pGu?OXjQ4on+|I&oRDs|yB)G5;L#R9aFR&pS*RubfcSe!YOUcGBaX{tVq7)$RAdeCb|9h6PxjPfc4&q|^_SXfe2W|$P66}DCVo7RaVr}RJ&(R-A zG5@uPh;6YrFfa`3iVG}u4XQ2FHu^I3nz|xbP8P3NvoYXBd4t+^2l03_o48--9IWDg zg?Oj|c!L&dOcWLf#O*ida9tmpTx z*X8eTtzK%>($b?3k*U#{YclKNHaU`~h8GAw*YWG6A^Y1ivn9jd>D6c?DFZ4c`|`00 zga8CagM#u=1m|IiUIvtRl*+l_FZGlGf~I#DIxSz;FWU-q<(Wz&b z1sLlDbC{4bI4(k-JupP~So^VL3e*R*Cl}yZ5Iq(pr^0KPOQ^su2b1*ExsOd8KHhxE zU?W_R)B8uc`Ni}rEM|9d$hkD#vb4abGz)RAI?puxO5T|rIpndAOYSXQ%~m7R>@Q7g zx>X|4g1P|(_+v=0=aHu-|0a0BoH;m1nepQEnx%0^`m$lI;!@;7Z06e6DUdn&FlY3r z*Mw}hXX%NoA)xx{*m5uSm0db1^KtaMp}Ml~y<8}B@x z+Ww-#nlSr}i`y>&AqcVkD z6Yftz{LK#oCV!$_rAzKh!pKuk0ln%7#I@ojT`VG+a4Jbt%S;d|UKW+bujjY@?@5+q zoeN07Q3SDN_WA|G9B5s!oyZ?2nYpo>s0z8Fy5MChw?dl#0{DpB-&RSmD2{P(Xh{Yn#z13hdNfg7zVbLKO<3R6=#|@ajgPo0BkpX%y>{ zFtN@c*dHoTkf!LTf(rdDH-LiGCb1G|kte=jc?&@fK(IiObgc64#Kj-zNms_h?_m$P zK%lBqXK{q_6n$rlOJIF}KqvH?5C~X&lS*oQjQL1Fljnzna!K{Jm5_D-3IuHeV?99y zPnrI#*GDqoT>!K9%KQ!O!VG~uo1!xruW5DDEXv*u1Q)NfLRx+@*HJ*DC47+N@79ql zzDk#hH3*&6cp*c`gK!f98P9|N2}Dq;V|JdefbQ?tuwpd~8ogmg?&=l@I7k5N5fDI4g_sD%|n)P{taf5!sNU0IT?sjWX^htFxOF$fk|507g_N!w4?^$$*z;C6PQ zPQoQ!%mQQ$ow-8mgK-A$Cg)KzGm%~jpTG`7NtV7q zK48$V@=}md>qV*INEl#bkrlmGv5grQ%kbT4*Y>L>`f(qNkezj?C+uUs!Vb@m8s9Tu zaC32mW7Smgg&EMTfy?z~E{*j^cwR8*6HIUe{-A+x*NL*Gp z%p4fC33ARAG9mWqm%tVgrubW(3Mh;d1qzMH-^MaH<y`VNss|@G zf&;=~E;0MAe({I~cZfE{_)-NX{P1ekJ@ghjS5*LhH5L^2Qiwvd_2#{&i@WCF!#f-* z@ceT;I=Py`O&-*!=j##+kx_UgFOR#RknF`RCh?SqL&_}X@BqbkQwdSZ@93-aYdxA6 z_#_x$?dQ@*b;H_(Q6mCh-&@IPQ&NJDX%-~Eh)Cg1qDdNuSw=*SPd1d=dx}6nEH1of z81c>BW8FHF9UnY+_{%*?N2Az{L?OzTN;n37fkBoiC+Fn;J<*_A+M2#5 z!ul314Nfl50L}vqYbyj;?u-Gb%6?=7<3IMlOjOz5X5M(x!1b#Rba}--1d(2{9qc1t zwbut5cR$`Fx>YcHk(4vm}y^@6BN`L`d$CyZ&? zm2Habi9mg4v?`wK~|Lw|V#%{U?vB z2owPgvk~-6V=AQ%PODn`7_;(Ew3go-~e?LeOe8S4kP#2Yvm)?FOQR31Q&m9_{kB$uE18v+@ zLIi~;wSt#X`|PfH zXq;fU!Xc_8G@?LFkRj{%eMs^Z()GfM*Vp6wv_jHApB`H*?y2WJpU5+KT9-j&8+lxc z(-geUS~M#;iFxX=ao&;mjEd6aS;i4u$41r;Nh zSh!T1HC6FQ4q-}##s9W4#^ra3QBWa3EApLF@EWd2bi*O?cYJCM*4TbKAS%jVk9M{F8!;T zToq`u6cb!w1}|*_o*x)`g@3zs4t{H>BRr~C$p!g9JXKf{-q^j`c1V)RenTf7 zR>Y%frn-0wO1==zHe+D1GN zAQnTaO-gC?(B(O}OTT<_&t-yc?)O;4;VzK!HW0zK`9@7y!ngf~FdSrKd~-DVmjV=G zX&3Qg7Lty2)ytu7D=hnB69hIv+{9HW?*XeENfTgYK<_4W!ttuPL0W8~cj>JF$q+mF zQLc4Bd0JHQG+77kN1%lY5&xOF)%Z!k?8v~Fh#{??bKs81VRSVTG{U288Dr_LVW4st zb#`#NFor>7Zy9pQfVnO}2$(l{_tR#cS5!r?r?Qx|0|S_FCg|9iZcTu z7MPW26&wH@tM5i`?zoU`Iz($(#%%7kBLT*DlRE{@qT^UPBiz4%(2TfQV=UqsDBj z^k*I74p3#V#Mm6~E8>(gCi2r1>IaZ+&8B{0eqA#3Yl5q#aH8&yw3=`v|)jU_VF`kOz2e~c|g8} zsl?Z42C=xcBcWU>1Uj+wWO`zqjH+OSCUietf6y8v>Cp&$T+<83z%Mg_ZI+Aqoo^BC*{FLQn{OC3Q7JkVsY>R?r4M zhbruM-5PF^;?u|9-h7Z<5vikN64 zrr;{H`lK(>_uZyfalU$)`avdHEhJD(Mj<%1?9T zV>3adwpwxdg9pY?pF#xd+>{&g?aLTQ7YCOZbLZ$vxQC)F;3C!z+*-auNp;8Yiatv48eA+wd6k@msT?CRgQJTM*=FJ!KK zd^68P)h0{;YL}~0^$t4o$3-n8Wceq5_m;NV38G+a9!&_wZ)x-$+r+krW!#kyn`{Er+|9Z(UttbXQi!8&&Q-yug(NLYQh4VL z8=MQO8*0ZcF>;GGZaN^-PX4n~N(G|@7BBgxXqxu|>?_8n0fB#9AELC`n9BrQqW&tN zp(C}*2{?pE3;Mf8M_PJAe22;&xVc$FzAbr1(ZywN=qO_6%t4N^7Dqqs zla=P1@xN|CFX5zqOSvCA2e9} zc@r&yWTR-8>Y$DO1ULe3PS8JGzVnDqnrCEts|j&J#*u zwWKc?>92=m!>qF&AoQvBC!tC>K8+&wo2^m{&E$Kkku8e2j%p*OM4@;yNM%dXQmeDU z)nTZ5`A%Lw-utms1D5g7y==n)cbK@P>6xY|s(<642+tt#rsK`%8zj74Mu z$qESL+B?%n69h6b*_-p%va9QX6!(Ay8VH8;oi1Y+YEf>xMOlm|YbguSp9B;YSD=nX zZ}{E(@zC|w$NW$cgT)|f=Ah{1uQlJ!-KoZMWALL|Lr{HT`&0G4D$zvF%B_LAn)}OT$R?+0{1flGGo)0hIs(DB>7S%BP}Q`0YeIz+fgL*YX*{mo z<}a;EE}cGt8IW$sy9ZW`5O2JXDD;1OJ2s; z>LaYD zx8BJ>8zt;j-NubF3;{ zlOWHjpI_&Z`rxm2+{Om8a?z>Ule|^@goVHLtWf<{~jM4Tkoh!uqt-LFUaWfwER#}1l zWj!z*S_&9rnjPx+$GH?Y(Lrb#L4KOFxNHB=0&g2gh;r#LSN0ohA}T`Kx)a>g(xdk*Omy^GYgnGai|nQp90^SsI#Y*btQu_3f2n zP)cqTQooZNgx#?@zSJMg$=e`M6U$R|c*Tu?<8kJi{W0UT5wT#|{thpotLP`d?JPZP6_=&IS8Zk0JSZ&jQwB*5{U?X#5ae_T4$j@i}^P-f=nE z+@Fzg{Q@5Lfac-Zqp=YD@#y4GfueU8{NXWbjg6T>>P&)vMW*MCCLu5kN>q~M$MXUWtPmL6mKzF=qve$A;ml-{K_$Rdx7;j zIQ5rBW`T3WfoQR>1v^WY%$<1dl-d`SGiyDZyM#$|_Q=_htv_>$LE$iUV>*@47i=Qm zI+dDFjM!y!g=o~Z8p~fKcB4HE#$4!FrV<@31N53Ze!K!25+!xS70AQP6<_9sLFXoV zr1cmp;JG`@lWm8Fjumq`-gNlM?4D$7o%tB^XipC%xg%VxDB_ebYN_#>3bSn~hm9SZ zeU$vhNALKkGF~Ms9s6Pv3%>1`S%8@$DI1_jn8S5%gm%;hL7*Lp`o=-u`_dZssiET~%o=12+ zPhvTFH>=j*irrrR8Kp!I8{*Qq-LgIV0;j1>dkBlGcJ{YAVQYYP%UB$=rXJWb&SC01 zJ&HxT!JQKPyh3(j1s;nT1uu1tvY5Z((6!6-1;Z)#Ivg3y*)Gb413x^76_VGX*!?qa zJ~UgWCFR?ZUkktmyZVKe_d9#yPz9RF={QdW!O)mi>+DKCZcpF{I-OI9xC^#P z%RdxYeC&r#Y7its{g6iU7EBW3vVSUZ;!Qo|ciW-Yv}I=wWx}X5Gu=%1E`5K=(+%&I zVN&w;qI<*x-*>12{v{iEj@WzcXLlGLdbbeyTqUC#`Uy0}ENcq52UU$y6l@-N5&ku= zvf`6MQY3$lM^FukS`~v|eyPaqt^~a}6CijDf8>M7=bZ!6K1RdQvHakvc#w4$ z+dVvwq(s1|tBfdj%*dy2w=k=nTOf-H(nbUK;OD?LH-7}(Ui zb|qoCY~)SM*y!SC|Il}$T@nnIj9vLu>;It6m7>WsOgHHr68y%7PiOlIE*1Z-zVBi= z-1fY~6d#&sr%rl7^taLYb+HS zteHyS_JsAl+UG!B%87>@3q6#szB!w|Al+L|Sjc(K)yD3w!_EG3 zm*(9Kh%0NoHIHC-BRFIH<{HDXV5qO)F9-8dKTvErJ@k&B32q|GXk>-hx+e~0psZOS zc&l>dH!G!7TtOMOWT}xaYK9892+)@myeYuqfc&ao(J$;CE|aBJ}lmx$q}UUJPJIvR?&60Wf%!M}+f`u{@+oD}oC8K@~U zZ?<||Xoy2kl-h7Y-RihT61fL2>$*QRQAR6wDC?+8QF!R_UTMtNRkvvo8m|ryTVe?! zWn@RRtbWdq%%mug6^UotHNt(73r{IoHy79;O~jaHp(u{Bh6@(z z^kIK5OXf8dgy`L{t@OV4b1eeV%irb*UM!q(>R#qhQ6GLEcm-UdZ;##h=m7Pnov!$} zpwKksJ3dzP7Uj8Te)&q}X1IN30RbA^)q1YTVtIIJ04`6$qoH|=MCe-l4(e=qo<6FZ) zU^;I!Touzkjpm%A%-oTG)s3e6?xFO2C|(i&w3NVczECN(HRwc*XG%$bQ z|LoI{cHCzgVm->;b2TDeuJc&h)J=C1PH?$Bu~Z9hXX3*K>#-J8O&b>(aT?F(y3{53 z+$Xku68@OY)|e$bvA%krUDEJbq$Pjpq4(~e(u2P!TH{?aqITU~2r-E;KhJyNidW~m zV09D=)TAqSp5(Xg&1>>vx{<&DBkxb;#T?#r{_o| zY3t^Cp1Vb_NfpYbGA7MXUE#XRv}imCTvRf*Xe)u=MHGA>sTO@bX6O0#tLXL3~{ zx?Y{l-C+w#v!iTfLO(p!gfgV5zmCF~MtzoEs6uBR5QmD`qlSxjCws*ahLQ9d#BH#> zA8FT75cU@4yLiYnLaKK$fgHJCpJwkD=At!HJe-g&am$(oa9IDFyt^st;Yo5P1(S4u ze-@P<&j4baF}}oIm(MEDFkW?N8qfVm8aN!i9QWV>23M8VGmzge{amz$@~Cw^Bj`E` zlj{7x>_@;*%~a+WcZZk1Rg`C<$=k6__s)#C{)8`4cjZ8tfP9m6HV@I= z9BoQ@(`h$trc1AXwsPv(CZdCP@9tc+Z22o&5YfTAVLEV&@K~th-Jh8)_Zp*^SBD=r z+!~pB#_c9It4@LEvSO9>3zsc>i2z&|(i|}kV!9`P+DX?c?S$c&)3I!3ZJk#$O9dYk zeD1{RlL?m6#kmKtK_V2h@Db2@SbCCa?D^}re2RuyJ0Z8QwW1DhHc5_sOKw(OijwB!uE%FNpTL-4)(cFcAu-)YbQJ>+@A^F5`of9R-4DL@hPJj zTUgA`YPA|{in04`bo@gj93vm;s_FLGM&L??(Z)G2QC{rX|gp1lh!|#$22$HddM>cc;Xib@Lys@KU+I(ewQ(y>gjKMYiRD3phcm} zSh#~g(g>Wp8(m(>JE^+x3e!Ki!&j@3H9dLcHO*+!Inn#Lw_8s4V=AxjodL12fqtMq zb2~S*_C3B=1sSkR=;$p4l!0XO;$BI7IS<_ss?O%#Ev8TQX*?Ns=t!OkI5OU5y|Gy% zwrZt;JCgX2vDrp8HRwXu6c-`s%XZ-GSB*J6o(3&Q;UgG6&i2)`LsDE|q=LjG8twLr^5mFdwZzDs; z=L!@L_7}92`+*Oo!JwKSIqsf2)~CylX1Pu9&x4bQeW1`P3ypNW6kUu+TxcHu7=7d6 z3v;hzIa*zX_*^5UAiQ3oZRPXmdYx}CCcXL*-!E~M>-u)7jK{BPt)7o~mmct~#J_TK zoVFggro9k2CA7Q-tm}D6LNpviN%c zn}xR4eq|nil3OXh#G4mdKUo?uS}M}~=BtH_eZ;1d4j!gUFEmyhz;oUl!mo>1A~M~( z2=ea4rz*vvF7@spod@z*q?5UFHHpjdCG>xAi_jiap_c0HE#g)c0&AWQ?xnbUxqNH*2@i6x;ExoJu$$T-k zVwLPnsIMMi z?`LPfL%d0dhoT?n=%RXWDm22h{;jHxJ`MlAGaZ7#wd5UWvVYB;n!QZ(wE~H-? zIy*9WoJO*Qe_g9H9J zGpzjqRkK{OlRObBV+-zYi5}u|0+``=^qhZl?9^U_LFNjgg+l*9BM@5JUw-Q`ykB=3 zCi9#{qA^V!)eBUxNyoP>QA? zEKh_TiGd4k2s#5^wV>^av?Yh&d!v?=GQ9&6S=2X9N3sYLq1lOJdTe>cptoE3C<5eW z5$=PqSLz&rWxprj%qi=lUtaRzQcSE%(diqoCisy*Qtzzf@;Qazb>M&U2P8t^ky0;0 zL=!#sc1)``d53PhvzhyzbCP?GYx(o_YG%1gy^XD zQu(u?dr+!58xvBxG?IC?W~EDWa+Wp)irsQj^!lsS4*vgecai9B zQdo-IM=S3fB(!r&=c%VsMgO^9KC60`APnS)Zp0SrLd`as>d@Ct`Ez@%KBm~6DIxN# zhb(QrU8g&J=xP#o=%KGi7_Efp;^(6sCFstSH&!9&NV$~b0z-I+`_TO;Ldx7{S=9hm zM?qvPmJO{zHzPOSl6^btaT&k4Ki#6Z;<8>zBRaQn0F0Slp@lwf`wlQQe;YLM2Jn6< z{IgN`w(W;vC97#|oM6AyqGdXUojIyn0G(#6D+Bd}o+Yja2j+1Tsf^(pra70Wl+hr- z6|{Yw+wq{xh69H0RE&M#uq759_NsB=;KiEEXZH5(yUprtQMhkMX>^uTc$1dWqC(Hm zDi|a#L}ZJ)G7D1mFE@yW;_ag+z5l1f=;Jzhw)&{SQ_-YDB)6rvkiwL`;X@cAq#E*y zksBz;yAQyeH(q;zMk6RKW1Ky)W#y2v^wdEr?5rOJ_OC0`Q8&0b-K@iJAgW3_3IN~y zY0y~hPv{g1iH@z_K#T@gsPBGPV~*PK>2oGLi-jN^=19yu{sx;#{3%H6Ss9*}xt=g?$! zJ=sACrw(wrR^!#XfL-LgRa@l^vviyZ$mstf* z$EWqW%%k4|PpxV$D`h)6Ycj5Sk#4g>6IMq*bbP_1$+S)8n_bJLZi><2F$Y<-^6XrW zvAIxHpS`-UtS6X z6cqprfCQB4{uOurx57C7)85Ao3;>|~j9Nl=w$3KD&U(ro_9jj`wC*<6MF|47f%J$X z&m6&rHlSoW&I&*pgI*UEjwV#3{oLCzH4+ZVbv# zap+I#*JJmAanbp`Nj4%UgB&5hAf`P?U?r;=;B+6-vBdCry#uex$g^?(5nzxcT7*=& ziORi3sQI1`c1Dl=QtQvI;-EQ|P}h)KaN7}S>j)i3PvDy0(F6!YCl1^1nOfMX`mPxVw!h8Jv-`8$@HOWE!vu-a? z008Z0?Q*837Dgs25~2o%juu9=wk}TgCPqohQnu^#h?~c#AT^r3zb+pF^W`y6WuYOs;<=IZc`gQrE~cW{CGiH@DkEEhoUL=SeztY*~-Ip(t#zjwD7-qCbH5 zr${WA-T_R~!Dh2;U;RPIQqhHUg!;rnI5{WOV`2vcdXM z!f5>~eX5?T6P$9dhjh zlp0VKClf7i4x)C+1bVM1%~ zWMgb(Z=*D+_!FAl_o!SPzY|c%=L3vPC8a_s@+JT_H4%-n%ypz{R0fXwgsl&c?g^5v z^cE$&t6SG*&-0XgUX@ht{9V99xp6?-%5^R%abNu5xF+{HimS*|BHh2q*Kn<#xbIk-?Qt4D^j9t6j? z8o|Myjr}vMAXAk*x7;mLG7s7aLnA9P(k(!jbnlxtPBg`^QO4o-b|jT66xyw#`lZP! z)%;*@t7DXP!;qeNO$Z(#m>|mrC9fS;G>^>e4+vdQ7kUF4mR~QbwpX+i`vY6lFeEoq z`a))DU9}!XIChdG0JbGa!wR`JP?LKIE)1GbodHc41FnUQTzn3aH%Pi;gd=Pu9YPSt zN_AruWM@)F+Fv4zULB+noC+E!^?mn{0RXc}oPy>FDrR!%OZ{itq$k8THa_pvF+{%n zDw;pA#jy*DVXf!0l`ek2h$w`lTTSRn{a5k^l$My~pK(G1eSBeAVm-J9`t_f5p?{i# zn{!2?Y7e&0DL!7fCN*nJt{K`BD@Z@Q$8Q`XDjn3&%!&M2LpK!=Hul(ZBC}g~8+unn z{`c$anFwLo@=$j$6^iI*`^~NJdh~b?&zni2f5Goq`>J8$qYt5H5-6%+MJuAi^)w7Sa>F^*qyFc2Ky@4)E3 zfd3w*$t_|K5I_LH>CgSsfd|lYG_iJ~qy3L(QoM}i06k*x&(1&7jmJ?()3GvD9j8KA z2oZM>PlKf)s3_$1ULGeXNYU7kk@I|uH-Ei-nWjxIyuak13|8>&Fpqyrt(g69@J0M? z6bqug@BkkuUvnlxojulS%N)H@ybX@YJx_Nqs@9~^-+nxIKjfetBym1;7+>8=*?#s^ zncS>KxM3!FmKLmGrAXE00Kq@{AbS0`^lLfT)2!F0ssJk zI52?p$7BC_5&YL^^q&co?!OW#o#}sO6C*ntdpp~o%<4pI{%=xqIef+gNJU@-Wx zHvGq0n*V0)eaHVR?Ehl1*X(TQ0UZFa1q=+p`ft!VPyajg|KFjpL-jW=Q~*$btU{*0tjQiuJ#^?#aZJQvLsHO=MY;Mu%kcC{2+vRZ!GDATf#|AVNp)x#x zjr0J%SD3DgruliRb9gqs`EEpPMh_O9gt$;PCS2m%SmZ2qO2P`UT;zYnuBT^H)9@9^ z_zDC{TUP8(uNqnScWhbVd9_hkD*@bvdwz0&+Z&$z>wNH1N!-c{$^-A5lSe_mfbM}# zY}8FYISb`N7BW$Wc>FsZmh}Bmgrqo$?hN~Js`VA8uW(d8M>C%KiSy#&_Ap#0X;e^J z+RdO1f5OM-*=5vVS@hb4HEyv~RGKYbjLM!z#%x0lWE+|E?t=v&#)7DD)Mdri{fbXy(Y$eUGYg@-8U%Wl#!|U^U-M~r z-8r{QHdk>)uTZ#ASUI`#N;|CBVhCA6S;^=!Z6(L%*zQ61E983Z5~R-${P*OSO|=M- zgwjomf5&^%COHc28d!W_J<`yC&!QEY|C!G>rJKv+8gowop8=Ilr6TtGOF#I+(5kE) z16J1C5*Cl@!SRY1rLQ?}znZ7B$UkRi*S!Jx?ifOFM`_E7Jfh~wPM`rn(`=M2ggui=m8_%bLa4W%p$}Hl1akNC=f2^Fx z4X{WzF;f%GTjSfPsjRy882YY_*O#oZ$p$t;iZLr7cv4anlWK1j{?id7u5+^34EC0Mpmf=$QuKby<$B_Hu#mctw=dhz^O|MR4eA>0Ww& ze069ksP&hRFMTn%+O`RE-sUi(2uEF3Y@aZv3S>3END^IcIkjYm$1YU}+Viy}at4HXEc0okzL(Bgk;pxrm fhcQ9(-ba?cqnTCN;V8<4q~dpYI3dj)xT45k>gQnK literal 0 HcmV?d00001 diff --git a/dist/samples/Components/Breadcrumb/Breadcrumb.css b/dist/samples/Components/Breadcrumb/Breadcrumb.css new file mode 100644 index 000000000..852a22130 --- /dev/null +++ b/dist/samples/Components/Breadcrumb/Breadcrumb.css @@ -0,0 +1,429 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-Breadcrumb { + margin: 23px 0 1px 0; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + margin-right: -4px; + padding: 12px 8px 3px 8px; + cursor: pointer; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: white; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} diff --git a/dist/samples/Components/Breadcrumb/Breadcrumb.js b/dist/samples/Components/Breadcrumb/Breadcrumb.js new file mode 100644 index 000000000..703554415 --- /dev/null +++ b/dist/samples/Components/Breadcrumb/Breadcrumb.js @@ -0,0 +1,269 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Breadcrumb component + * + * Shows the user's current location in a hierarchy and provides a means of navigating upward. + * + */ + +/** + * @namespace fabric + */ +var fabric = fabric || {}; +/** + * + * @param {HTMLElement} container - the target container for an instance of Breadcrumb + * @constructor + * + * If dynamically populating a list run the constructor after the list has been populated + * in the DOM. + */ +fabric.Breadcrumb = function(container) { + this.breadcrumb = container; + this.breadcrumbList = container.querySelector('.ms-Breadcrumb-list'); + this.listItems = container.querySelectorAll('.ms-Breadcrumb-listItem'); + this.contextMenu = container.querySelector('.ms-ContextualMenu'); + this.overflowButton = container.querySelector('.ms-Breadcrumb-overflowButton'); + this.overflowMenu = container.querySelector('.ms-Breadcrumb-overflowMenu'); + this.itemCollection = []; + this.currentMaxItems = 0; + this.init(); + +}; + +fabric.Breadcrumb.prototype = (function() { + + //medium breakpoint + var MEDIUM = 639; + + /** + * initializes component + */ + var init = function() { + _setListeners.call(this); + _createItemCollection.call(this); + _onResize.call(this, null); + }; + + /** + * Adds a breadcrumb item to a breadcrumb + * @param itemLabel {String} the item's text label + * @param itemLink {String} the item's href link + * @param tabIndex {number} the item's tabIndex + */ + var addItem = function(itemLabel, itemLink, tabIndex) { + this.itemCollection.push({text: itemLabel, link: itemLink, tabIndex: tabIndex}); + _updateBreadcrumbs.call(this); + }; + + /** + * Removes a breadcrumb item by item label in the breadcrumbs list + * @param itemLabel {String} the item's text label + */ + var removeItemByLabel = function(itemLabel) { + var i = this.itemCollection.length; + while (i--) { + if (this.itemCollection[i].text === itemLabel) { + this.itemCollection.splice(i, 1); + } + } + _updateBreadcrumbs.call(this); + }; + + /** + * removes a breadcrumb item by position in the breadcrumbs list + * index starts at 0 + * @param itemLabel {String} the item's text label + * @param itemLink {String} the item's href link + * @param tabIndex {number} the item's tabIndex + */ + var removeItemByPosition = function(value) { + this.itemCollection.splice(value, 1); + _updateBreadcrumbs.call(this); + }; + + /** + * create internal model of list items from DOM + */ + var _createItemCollection = function() { + var length = this.listItems.length; + var i = 0; + var item; + var text; + var link; + var tabIndex; + + for (i; i < length; i++) { + item = this.listItems[i].querySelector('.ms-Breadcrumb-itemLink'); + text = item.textContent; + link = item.getAttribute('href'); + tabIndex = parseInt(item.getAttribute('tabindex'), 10); + this.itemCollection.push({text: text, link: link, tabIndex: tabIndex}); + } + }; + + /** + * Re-render lists on resize + * + */ + var _onResize = function() { + _closeOverflow.call(this, null); + _renderListOnResize.call(this); + }; + + /** + * render breadcrumbs and overflow menus on resize + */ + var _renderListOnResize = function() { + var maxItems = window.innerWidth > MEDIUM ? 4 : 2; + if (maxItems !== this.currentMaxItems) { + _updateBreadcrumbs.call(this); + } + + this.currentMaxItems = maxItems; + }; + + /** + * creates the overflow menu + */ + var _addItemsToOverflow = function(maxItems) { + _resetList.call(this, this.contextMenu); + var end = this.itemCollection.length - maxItems; + var overflowItems = this.itemCollection.slice(0, end); + var contextMenu = this.contextMenu; + overflowItems.forEach(function(item) { + var li = document.createElement('li'); + li.className = 'ms-ContextualMenu-item'; + if(!isNaN(item.tabIndex)) { + li.setAttribute('tabindex', item.tabIndex); + } + var a = document.createElement('a'); + a.className = 'ms-ContextualMenu-link'; + if (item.link !== null) { + a.setAttribute('href', item.link); + } + a.textContent = item.text; + li.appendChild(a); + contextMenu.appendChild(li); + }); + }; + + /** + * creates the breadcrumbs + */ + var _addBreadcrumbItems = function(maxItems) { + _resetList.call(this, this.breadcrumbList); + var i = this.itemCollection.length - maxItems; + i = i < 0 ? 0 : i; + if (i >= 0) { + for (i; i < this.itemCollection.length; i++) { + var listItem = document.createElement('li'); + var item = this.itemCollection[i]; + var a = document.createElement('a'); + var chevron = document.createElement('i'); + listItem.className = 'ms-Breadcrumb-listItem'; + a.className = 'ms-Breadcrumb-itemLink'; + if (item.link !== null) { + a.setAttribute('href', item.link); + } + if (!isNaN(item.tabIndex)) { + a.setAttribute('tabindex', item.tabIndex); + } + a.textContent = item.text; + chevron.className = 'ms-Breadcrumb-chevron ms-Icon ms-Icon--chevronRight'; + listItem.appendChild(a); + listItem.appendChild(chevron); + this.breadcrumbList.appendChild(listItem); + } + } + }; + + /** + * resets a list by removing its children + */ + var _resetList = function(list) { + while (list.firstChild) { + list.removeChild(list.firstChild); + } + }; + + /** + * opens the overflow menu + */ + var _openOverflow = function(event) { + if (this.overflowMenu.className.indexOf(' is-open') === -1) { + this.overflowMenu.className += ' is-open'; + removeOutlinesOnClick.call(this, event); + // force focus rect onto overflow button + this.overflowButton.focus(); + } + }; + + var _overflowKeyPress = function(event) { + if (event.keyCode === 13) { + _openOverflow.call(this, event); + } + }; + + /** + * closes the overflow menu + */ + var _closeOverflow = function(event) { + if (!event || event.target !== this.overflowButton) { + _removeClass.call(this, this.overflowMenu, ' is-open'); + } + }; + + /** + * utility that removes a class from an element + */ + var _removeClass = function (element, value) { + var index = element.className.indexOf(value); + if (index > -1) { + element.className = element.className.substring(0, index); + } + }; + + /** + * sets handlers for resize and button click events + */ + var _setListeners = function() { + window.addEventListener('resize', _onResize.bind(this), false); + document.addEventListener('click', _closeOverflow.bind(this), false); + this.overflowButton.addEventListener('click', _openOverflow.bind(this), false); + this.overflowButton.addEventListener('keypress', _overflowKeyPress.bind(this), false); + this.breadcrumbList.addEventListener('click', removeOutlinesOnClick.bind(this), false); + }; + + /** + * removes focus outlines so they don't linger after click + */ + var removeOutlinesOnClick = function(event) { + event.target.blur(); + }; + + /** + * updates the breadcrumbs and overflow menu + */ + var _updateBreadcrumbs = function() { + var maxItems = window.innerWidth > MEDIUM ? 4 : 2; + if (this.itemCollection.length > maxItems) { + this.breadcrumb.className += ' is-overflow'; + } else { + _removeClass.call(this, this.breadcrumb, ' is-overflow'); + } + + _addBreadcrumbItems.call(this, maxItems); + _addItemsToOverflow.call(this, maxItems); + }; + + return { + init: init, + addItem: addItem, + removeItemByLabel: removeItemByLabel, + removeItemByPosition: removeItemByPosition + }; + +}()); + diff --git a/dist/samples/Components/Breadcrumb/Breadcrumb.min.css b/dist/samples/Components/Breadcrumb/Breadcrumb.min.css new file mode 100644 index 000000000..c368e982c --- /dev/null +++ b/dist/samples/Components/Breadcrumb/Breadcrumb.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:2}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}} \ No newline at end of file diff --git a/dist/samples/Components/Breadcrumb/index.html b/dist/samples/Components/Breadcrumb/index.html new file mode 100644 index 000000000..44f1f25ef --- /dev/null +++ b/dist/samples/Components/Breadcrumb/index.html @@ -0,0 +1,143 @@ + + + + + + + + Component Breadcrumb + + + + + + + + + + + + + + + + +

        Breadcrumb

        +
        + + +
        +
        +
        + +
        +
          +
          +
          +           +
          + +
          + + \ No newline at end of file diff --git a/dist/samples/Components/Button/Button.css b/dist/samples/Components/Button/Button.css new file mode 100644 index 000000000..0c474b100 --- /dev/null +++ b/dist/samples/Components/Button/Button.css @@ -0,0 +1,315 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} diff --git a/dist/samples/Components/Button/Button.min.css b/dist/samples/Components/Button/Button.min.css new file mode 100644 index 000000000..3063585db --- /dev/null +++ b/dist/samples/Components/Button/Button.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px} \ No newline at end of file diff --git a/dist/samples/Components/Button/index.html b/dist/samples/Components/Button/index.html new file mode 100644 index 000000000..ebb474613 --- /dev/null +++ b/dist/samples/Components/Button/index.html @@ -0,0 +1,144 @@ + + + + + + + + Component Button + + + + + + + + + + + + + + + +

          Button

          +
          +
          + + +
          +
          + + +
          +
          + + +
          +
          + + +
          +
          + + +
          +
          + + \ No newline at end of file diff --git a/dist/samples/Components/Callout/Callout.css b/dist/samples/Components/Callout/Callout.css new file mode 100644 index 000000000..ab58cf8d6 --- /dev/null +++ b/dist/samples/Components/Callout/Callout.css @@ -0,0 +1,677 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + content: ''; + position: absolute; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + height: 0; + width: 0; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before { + z-index: 0; + outline: 1px solid transparent; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:after { + z-index: 10; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + top: 40px; + display: none; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after { + border-top: 10px solid #ffffff; + border-right: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #ffffff; + left: -10px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + border-top: 10px solid transparent; + border-right: 10px solid #ffffff; + border-bottom: 10px solid #ffffff; + border-left: 10px solid transparent; + right: -10px; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + left: 0; + right: 0; + margin: 0 auto; + width: 0; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + border-top: 10px solid #ffffff; + border-right: 10px solid #ffffff; + border-bottom: 10px solid transparent; + border-left: 10px solid transparent; + top: -10px; +} + +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + border-top: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #ffffff; + border-left: 10px solid #ffffff; + bottom: -10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + border: 0; + width: 20px; + height: 20px; + background-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + background-color: #ffffff; + } +} + +.ms-Callout-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: 105; + padding: 18px 24px 12px; +} + +.ms-Callout-title { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-Link.ms-Link--hero { + position: relative; + left: -8px; +} + +.ms-Callout-action { + position: relative; + top: 4px; + left: -8px; + margin-left: 0 !important; +} + +.ms-Callout-action:hover .ms-Callout-actionIcon, +.ms-Callout-action:focus .ms-Callout-actionIcon { + color: #0078d7; +} + +.ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--close .ms-Callout-title { + margin-right: 20px; +} + +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after { + border-color: #0078d7; + background-color: transparent; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + margin-bottom: -8px; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after { + left: 40px; + right: auto; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after { + top: calc('50% - 10px'); +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +@media (min-width: 480px) { + .ms-Callout { + width: 300px; + margin: 16px; + } + + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after { + display: block; + } +} diff --git a/dist/samples/Components/Callout/Callout.min.css b/dist/samples/Components/Callout/Callout.min.css new file mode 100644 index 000000000..b382fe0a8 --- /dev/null +++ b/dist/samples/Components/Callout/Callout.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Callout{z-index:3;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:2}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:1;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:5}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:4;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}} \ No newline at end of file diff --git a/dist/samples/Components/Callout/index.html b/dist/samples/Components/Callout/index.html new file mode 100644 index 000000000..32c7a56c3 --- /dev/null +++ b/dist/samples/Components/Callout/index.html @@ -0,0 +1,210 @@ + + + + + + + + Component Callout + + + + + + + + + + + + + + + +

          Callout

          +
          + + +
          +
          +
          +

          All of your favorite people

          +
          +
          +
          +

          Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

          +
          +
          + Learn more +
          +
          +
          +
          + + + +
          +
          +
          +

          All of your favorite people

          +
          + +
          +
          +

          Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

          +
          +
          + Learn more +
          +
          +
          +
          + + + +
          +
          +
          +

          All of your favorite people

          +
          +
          +
          +

          People automatically puts together all of the people you care most about in one place.

          +
          +
          + + +
          +
          +
          +
          + + + +
          +
          +
          +

          All of your favorite people

          +
          +
          +
          +

          People automatically puts together all of the people you care most about in one place.

          +
          +
          + + +
          +
          +
          +
          + + + +
          +
          +
          +

          Uploaded 2 items to Alton's OneDrive

          +
          +
          +
          + +
          +
          +
          +
          +
          + + \ No newline at end of file diff --git a/dist/samples/Components/ChoiceField/ChoiceField.css b/dist/samples/Components/ChoiceField/ChoiceField.css new file mode 100644 index 000000000..67bbd040f --- /dev/null +++ b/dist/samples/Components/ChoiceField/ChoiceField.css @@ -0,0 +1,242 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} diff --git a/dist/samples/Components/ChoiceField/ChoiceField.min.css b/dist/samples/Components/ChoiceField/ChoiceField.min.css new file mode 100644 index 000000000..1105dfb27 --- /dev/null +++ b/dist/samples/Components/ChoiceField/ChoiceField.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px} \ No newline at end of file diff --git a/dist/samples/Components/ChoiceField/index.html b/dist/samples/Components/ChoiceField/index.html new file mode 100644 index 000000000..f50fc29fb --- /dev/null +++ b/dist/samples/Components/ChoiceField/index.html @@ -0,0 +1,170 @@ + + + + + + + + Component ChoiceField + + + + + + + + + + + + + + + +

          ChoiceField

          +
          + + +
          + + +
          + + + +
          + + +
          + + + +
          + + +
          + + + +
          + + +
          + + + +
          + + +
          + + + +
          + + +
          + + + +
          +
          + +
          +
          + + +
          +
          + + +
          +
          + + +
          +
          + + +
          +
          + +
          + + \ No newline at end of file diff --git a/dist/samples/Components/CommandBar/CommandBar.css b/dist/samples/Components/CommandBar/CommandBar.css new file mode 100644 index 000000000..781de3c3f --- /dev/null +++ b/dist/samples/Components/CommandBar/CommandBar.css @@ -0,0 +1,664 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: 58px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-mainArea { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-right: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem { + margin-right: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch { + border-right: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch { + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 8px 8px 0; + border: none; + border-left: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch-input { + border-left: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch-input { + border-left: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-right: 40px; + border-left-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-right: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0px 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} diff --git a/dist/samples/Components/CommandBar/CommandBar.min.css b/dist/samples/Components/CommandBar/CommandBar.min.css new file mode 100644 index 000000000..77fb1149b --- /dev/null +++ b/dist/samples/Components/CommandBar/CommandBar.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:2}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:2}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:2;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7} \ No newline at end of file diff --git a/dist/samples/Components/CommandBar/Jquery.CommandBar.js b/dist/samples/Components/CommandBar/Jquery.CommandBar.js new file mode 100644 index 000000000..5a63d9281 --- /dev/null +++ b/dist/samples/Components/CommandBar/Jquery.CommandBar.js @@ -0,0 +1,163 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Command Bar Plugin + */ + +(function ($) { + $.fn.CommandBar = function () { + + var createMenuItem = function(text) { + var item = '
        • '; + item += text; + item += '
          • '; + + return item; + }; + + var saveCommands = function($commands, $commandWidth, $commandarea) { + var commands = []; + $commands.each(function() { + var $Item = $(this); + var $rightOffset = ($Item.position().left + $Item.outerWidth() + $commandWidth + 10) - $commandarea.position().left; // Added padding of 10 + commands.push({ jquery: $Item, rightOffset: $rightOffset}); + }); + + return commands; + }; + + var processCommands = function(commands, width, overflowwidth) { + var overFlowCommands = []; + + for(var i=0; i < commands.length; i++) { + var $Item = commands[i].jquery; + var rightOffset = commands[i].rightOffset; + + // If the command is outside the right boundaries add to overflow items + if(!$Item.hasClass('ms-CommandBarItem-overflow')) { + if((rightOffset + overflowwidth) > width) { + overFlowCommands.push($Item); + } else { + // Make sure item is displayed + $Item.removeClass('is-hidden'); + } + } + } + return overFlowCommands; + }; + + var processOverflow = function(overFlowCommands, $oCommand, $menu) { + var overflowStrings = ''; + + if(overFlowCommands.length > 0) { + $oCommand.addClass("is-visible"); + // Empty menu + $menu.html(''); + + // Add overflowed commands to ContextualMenu + for(var i = 0; i < overFlowCommands.length; i++) { + var $Item = $(overFlowCommands[i]); + // Hide Element in CommandBar + $Item.addClass('is-hidden'); + var commandBarItemText = $Item.find('.ms-CommandBarItem-commandText').text(); + overflowStrings += createMenuItem(commandBarItemText); + } + $menu.html(overflowStrings); + } else { + $oCommand.removeClass("is-visible"); + } + }; + + /** Go through each CommandBar we've been given. */ + return this.each(function () { + var $CommandBar = $(this); + var $CommandMainArea = $CommandBar.find('.ms-CommandBar-mainArea'); + var $CommandBarItems = $CommandMainArea.find('.ms-CommandBarItem').not('.ms-CommandBarItem-overflow'); + var $OverflowCommand = $CommandBar.find('.ms-CommandBarItem-overflow'); + var $OverflowCommandWidth = $CommandBar.find('.ms-CommandBarItem-overflow').outerWidth(); + var $OverflowMenu = $CommandBar.find('.ms-CommandBar-overflowMenu'); + var $SearchBox = $CommandBar.find('.ms-CommandBarSearch'); + var mobileSwitch = false; + var overFlowCommands; + var allCommands; + + // Go through process and save commands + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + + // Initiate process commands and add commands to overflow on load + overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + // Set Search Behavior + if($(window).width() < 640) { + + $('.ms-CommandBarSearch-iconSearchWrapper').click(function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + } + + // Add resize event handler on commandBar + $(window).resize(function() { + var overFlowCommands; + + if($(window).width() < 640 && mobileSwitch === false) { + // Go through process and save commands + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + + mobileSwitch = true; + + // Search Behavior + $('.ms-CommandBarSearch-iconSearchWrapper').unbind(); + $('.ms-CommandBarSearch-iconSearchWrapper').click(function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + } else if($(window).width() > 639 && mobileSwitch === true) { + // Go through process and save commands + allCommands = saveCommands($CommandBarItems, $OverflowCommandWidth, $CommandMainArea); + + mobileSwitch = false; + $('.ms-CommandBarSearch').unbind(); + + } + + // Initiate process commands and add commands to overflow on load + overFlowCommands = processCommands(allCommands, $CommandMainArea.innerWidth(), $OverflowCommandWidth); + processOverflow(overFlowCommands, $OverflowCommand, $OverflowMenu); + + }); + + // Hook up contextual menu + $OverflowCommand.click(function() { + $OverflowMenu.toggleClass('is-open'); + }); + + $OverflowCommand.focusout(function() { + $OverflowMenu.removeClass('is-open'); + }); + + $SearchBox.find('.ms-CommandBarSearch-input').click(function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + $SearchBox.find('.ms-CommandBarSearch-input').on('focus', function() { + $(this).closest('.ms-CommandBarSearch').addClass('is-active'); + }); + + // When clicking the x clear the SearchBox and put state back to normal + $SearchBox.find('.ms-CommandBarSearch-iconClearWrapper').click(function() { + var $input = $(this).parent().find('.ms-CommandBarSearch-input'); + $input.val(''); + $input.parent().removeClass('is-active'); + }); + + $SearchBox.parent().find('.ms-CommandBarSearch-input').blur(function() { + var $input = $(this); + $input.val(''); + $input.parent().removeClass('is-active'); + }); + + }); + }; +})(jQuery); \ No newline at end of file diff --git a/dist/samples/Components/CommandBar/index.html b/dist/samples/Components/CommandBar/index.html new file mode 100644 index 000000000..e023cb4b2 --- /dev/null +++ b/dist/samples/Components/CommandBar/index.html @@ -0,0 +1,192 @@ + + + + + + + + Component CommandBar + + + + + + + + + + + + + + + + +

          CommandBar

          +
          + + +
          +
          + +
          + +
          +
          + +
          +
          +
          +
          +
          + + + Undo + + +
          +
          +
          +
          +
          +
          + + + New + + +
          +
          +
          +
          + + + Delete + +
          +
          +
          +
          + + + Archive + +
          +
          +
          +
          + + Junk + +
          +
          +
          +
          + + Move To + + +
          +
          +
          +
          + + Categories + + +
          +
          + +
          +
          + + + Ellipsis + + +
          +
            +
            + +
            +
            + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/ContextualMenu/ContextualMenu.css b/dist/samples/Components/ContextualMenu/ContextualMenu.css new file mode 100644 index 000000000..2c226d7f9 --- /dev/null +++ b/dist/samples/Components/ContextualMenu/ContextualMenu.css @@ -0,0 +1,267 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} diff --git a/dist/samples/Components/ContextualMenu/ContextualMenu.min.css b/dist/samples/Components/ContextualMenu/ContextualMenu.min.css new file mode 100644 index 000000000..5a7e8a565 --- /dev/null +++ b/dist/samples/Components/ContextualMenu/ContextualMenu.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:2}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px} \ No newline at end of file diff --git a/dist/samples/Components/ContextualMenu/Jquery.ContextualMenu.js b/dist/samples/Components/ContextualMenu/Jquery.ContextualMenu.js new file mode 100644 index 000000000..2a27de244 --- /dev/null +++ b/dist/samples/Components/ContextualMenu/Jquery.ContextualMenu.js @@ -0,0 +1,59 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Contextual Menu Plugin + */ +(function ($) { + $.fn.ContextualMenu = function () { + + /** Go through each nav bar we've been given. */ + return this.each(function () { + + var $contextualMenu = $(this); + + + // Set selected states. + $contextualMenu.on('click', '.ms-ContextualMenu-link:not(.is-disabled)', function(event) { + event.preventDefault(); + + // Check if multiselect - set selected states + if ( $contextualMenu.hasClass('ms-ContextualMenu--multiselect') ) { + + // If already selected, remove selection; if not, add selection + if ( $(this).hasClass('is-selected') ) { + $(this).removeClass('is-selected'); + } + else { + $(this).addClass('is-selected'); + } + + } + // All other contextual menu variants + else { + + // Deselect all of the items and close any menus. + $('.ms-ContextualMenu-link') + .removeClass('is-selected') + .siblings('.ms-ContextualMenu') + .removeClass('is-open'); + + // Select this item. + $(this).addClass('is-selected'); + + // If this item has a menu, open it. + if ($(this).hasClass('ms-ContextualMenu-link--hasMenu')) { + $(this).siblings('.ms-ContextualMenu:first').addClass('is-open'); + + // Open the menu without bubbling up the click event, + // which can cause the menu to close. + event.stopPropagation(); + } + + } + + + }); + + }); + }; +})(jQuery); diff --git a/dist/samples/Components/ContextualMenu/index.html b/dist/samples/Components/ContextualMenu/index.html new file mode 100644 index 000000000..73a6e9887 --- /dev/null +++ b/dist/samples/Components/ContextualMenu/index.html @@ -0,0 +1,176 @@ + + + + + + + + Component ContextualMenu + + + + + + + + + + + + + + + + +

            ContextualMenu

            +
            + + + + + + + + + + + + + + + + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/DatePicker/DatePicker.css b/dist/samples/Components/DatePicker/DatePicker.css new file mode 100644 index 000000000..1a83264a3 --- /dev/null +++ b/dist/samples/Components/DatePicker/DatePicker.css @@ -0,0 +1,831 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-DatePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + -webkit-animation-name: fadeIn, slideDownIn10; + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #c7e0f4; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + text-align: center; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0px; + position: absolute; + top: 0px; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: normal; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: normal; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} diff --git a/dist/samples/Components/DatePicker/DatePicker.min.css b/dist/samples/Components/DatePicker/DatePicker.min.css new file mode 100644 index 000000000..e9eb34d35 --- /dev/null +++ b/dist/samples/Components/DatePicker/DatePicker.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:3}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:1}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:2}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;line-height:40px;text-align:center;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:1;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}} \ No newline at end of file diff --git a/dist/samples/Components/DatePicker/Jquery.DatePicker.js b/dist/samples/Components/DatePicker/Jquery.DatePicker.js new file mode 100644 index 000000000..74b4b6746 --- /dev/null +++ b/dist/samples/Components/DatePicker/Jquery.DatePicker.js @@ -0,0 +1,286 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +(function ($) { + + /** + * DatePicker Plugin + */ + + $.fn.DatePicker = function (options) { + + return this.each(function () { + + /** Set up variables and run the Pickadate plugin. */ + var $datePicker = $(this); + var $dateField = $datePicker.find('.ms-TextField-field').pickadate($.extend({ + // Strings and translations. + weekdaysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], + + // Don't render the buttons + today: '', + clear: '', + close: '', + + // Events + onStart: function() { + initCustomView($datePicker); + }, + + // Classes + klass: { + + // The element states + input: 'ms-DatePicker-input', + active: 'ms-DatePicker-input--active', + + // The root picker and states + picker: 'ms-DatePicker-picker', + opened: 'ms-DatePicker-picker--opened', + focused: 'ms-DatePicker-picker--focused', + + // The picker holder + holder: 'ms-DatePicker-holder', + + // The picker frame, wrapper, and box + frame: 'ms-DatePicker-frame', + wrap: 'ms-DatePicker-wrap', + box: 'ms-DatePicker-dayPicker', + + // The picker header + header: 'ms-DatePicker-header', + + // Month & year labels + month: 'ms-DatePicker-month', + year: 'ms-DatePicker-year', + + // Table of dates + table: 'ms-DatePicker-table', + + // Weekday labels + weekdays: 'ms-DatePicker-weekday', + + // Day states + day: 'ms-DatePicker-day', + disabled: 'ms-DatePicker-day--disabled', + selected: 'ms-DatePicker-day--selected', + highlighted: 'ms-DatePicker-day--highlighted', + now: 'ms-DatePicker-day--today', + infocus: 'ms-DatePicker-day--infocus', + outfocus: 'ms-DatePicker-day--outfocus', + + } + },options||{})); + var $picker = $dateField.pickadate('picker'); + + /** Respond to built-in picker events. */ + $picker.on({ + render: function() { + updateCustomView($datePicker); + }, + open: function() { + scrollUp($datePicker); + } + }); + + }); + }; + + /** + * After the Pickadate plugin starts, this function + * adds additional controls to the picker view. + */ + function initCustomView($datePicker) { + + /** Get some variables ready. */ + var $monthControls = $datePicker.find('.ms-DatePicker-monthComponents'); + var $goToday = $datePicker.find('.ms-DatePicker-goToday'); + var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker'); + var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker'); + var $pickerWrapper = $datePicker.find('.ms-DatePicker-wrap'); + var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker'); + + /** Move the month picker into position. */ + $monthControls.appendTo($pickerWrapper); + $goToday.appendTo($pickerWrapper); + $monthPicker.appendTo($pickerWrapper); + $yearPicker.appendTo($pickerWrapper); + + /** Update the custom view. */ + updateCustomView($datePicker); + + /** Move back one month. */ + $monthControls.on('click', '.js-prevMonth', function(event) { + event.preventDefault(); + var newMonth = $picker.get('highlight').month - 1; + changeHighlightedDate($picker, null, newMonth, null); + }); + + /** Move ahead one month. */ + $monthControls.on('click', '.js-nextMonth', function(event) { + event.preventDefault(); + var newMonth = $picker.get('highlight').month + 1; + changeHighlightedDate($picker, null, newMonth, null); + }); + + /** Move back one year. */ + $monthPicker.on('click', '.js-prevYear', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year - 1; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Move ahead one year. */ + $monthPicker.on('click', '.js-nextYear', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year + 1; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Move back one decade. */ + $yearPicker.on('click', '.js-prevDecade', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year - 10; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Move ahead one decade. */ + $yearPicker.on('click', '.js-nextDecade', function(event) { + event.preventDefault(); + var newYear = $picker.get('highlight').year + 10; + changeHighlightedDate($picker, newYear, null, null); + }); + + /** Go to the current date, shown in the day picking view. */ + $goToday.click(function(event) { + event.preventDefault(); + + /** Select the current date, while keeping the picker open. */ + var now = new Date(); + $picker.set('select', [now.getFullYear(), now.getMonth(), now.getDate()]); + + /** Switch to the default (calendar) view. */ + $datePicker.removeClass('is-pickingMonths').removeClass('is-pickingYears'); + + }); + + /** Change the highlighted month. */ + $monthPicker.on('click', '.js-changeDate', function(event) { + event.preventDefault(); + + /** Get the requested date from the data attributes. */ + var newYear = $(this).attr('data-year'); + var newMonth = $(this).attr('data-month'); + var newDay = $(this).attr('data-day'); + + /** Update the date. */ + changeHighlightedDate($picker, newYear, newMonth, newDay); + + /** If we've been in the "picking months" state on mobile, remove that state so we show the calendar again. */ + if ($datePicker.hasClass('is-pickingMonths')) { + $datePicker.removeClass('is-pickingMonths'); + } + }); + + /** Change the highlighted year. */ + $yearPicker.on('click', '.js-changeDate', function(event) { + event.preventDefault(); + + /** Get the requested date from the data attributes. */ + var newYear = $(this).attr('data-year'); + var newMonth = $(this).attr('data-month'); + var newDay = $(this).attr('data-day'); + + /** Update the date. */ + changeHighlightedDate($picker, newYear, newMonth, newDay); + + /** If we've been in the "picking years" state on mobile, remove that state so we show the calendar again. */ + if ($datePicker.hasClass('is-pickingYears')) { + $datePicker.removeClass('is-pickingYears'); + } + }); + + /** Switch to the default state. */ + $monthPicker.on('click', '.js-showDayPicker', function() { + $datePicker.removeClass('is-pickingMonths'); + $datePicker.removeClass('is-pickingYears'); + }); + + /** Switch to the is-pickingMonths state. */ + $monthControls.on('click', '.js-showMonthPicker', function() { + $datePicker.toggleClass('is-pickingMonths'); + }); + + /** Switch to the is-pickingYears state. */ + $monthPicker.on('click', '.js-showYearPicker', function() { + $datePicker.toggleClass('is-pickingYears'); + }); + + } + + /** Change the highlighted date. */ + function changeHighlightedDate($picker, newYear, newMonth, newDay) { + + /** All letiables are optional. If not provided, default to the current value. */ + if (typeof newYear === "undefined" || newYear === null) { + newYear = $picker.get("highlight").year; + } + if (typeof newMonth === "undefined" || newMonth === null) { + newMonth = $picker.get("highlight").month; + } + if (typeof newDay === "undefined" || newDay === null) { + newDay = $picker.get("highlight").date; + } + + /** Update it. */ + $picker.set('highlight', [newYear, newMonth, newDay]); + + } + + + /** Whenever the picker renders, do our own rendering on the custom controls. */ + function updateCustomView($datePicker) { + + /** Get some variables ready. */ + var $monthPicker = $datePicker.find('.ms-DatePicker-monthPicker'); + var $yearPicker = $datePicker.find('.ms-DatePicker-yearPicker'); + var $picker = $datePicker.find('.ms-TextField-field').pickadate('picker'); + + /** Set the correct year. */ + $monthPicker.find('.ms-DatePicker-currentYear').text($picker.get('view').year); + + /** Highlight the current month. */ + $monthPicker.find('.ms-DatePicker-monthOption').removeClass('is-highlighted'); + $monthPicker.find('.ms-DatePicker-monthOption[data-month="' + $picker.get('highlight').month + '"]').addClass('is-highlighted'); + + /** Generate the grid of years for the year picker view. */ + + // Start by removing any existing generated output. */ + $yearPicker.find('.ms-DatePicker-currentDecade').remove(); + $yearPicker.find('.ms-DatePicker-optionGrid').remove(); + + // Generate the output by going through the years. + var startingYear = $picker.get('highlight').year - 11; + var decadeText = startingYear + " - " + (startingYear + 11); + var output = '
            ' + decadeText + '
            '; + output += '
            '; + for (var year = startingYear; year < (startingYear + 12); year++) { + output += '' + year +''; + } + output += '
            '; + + // Output the title and grid of years generated above. + $yearPicker.append(output); + + /** Highlight the current year. */ + $yearPicker.find('.ms-DatePicker-yearOption').removeClass('is-highlighted'); + $yearPicker.find('.ms-DatePicker-yearOption[data-year="' + $picker.get('highlight').year + '"]').addClass('is-highlighted'); + } + + /** Scroll the page up so that the field the date picker is attached to is at the top. */ + function scrollUp($datePicker) { + $('html, body').animate({ + scrollTop: $datePicker.offset().top + }, 367); + } + +})(jQuery); diff --git a/dist/samples/Components/DatePicker/PickaDate.js b/dist/samples/Components/DatePicker/PickaDate.js new file mode 100644 index 000000000..d539613f7 --- /dev/null +++ b/dist/samples/Components/DatePicker/PickaDate.js @@ -0,0 +1 @@ +!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a('")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('
            ').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('
            ').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+""):""},lead:function(a){return(10>a?"0":"")+a},trigger:function(a,b,c){return"function"==typeof a?a.apply(b,c||[]):a},digits:function(a){return/\d/.test(a[1])?2:1},isDate:function(a){return{}.toString.call(a).indexOf("Date")>-1&&this.isInteger(a.getUTCDate())},isInteger:function(a){return{}.toString.call(a).indexOf("Number")>-1&&a%1===0},ariaAttr:g},b.extend=function(c,d){a.fn[c]=function(e,f){var g=this.data(c);return"picker"==e?g:g&&"string"==typeof e?b._.trigger(g[e],g,[f]):this.each(function(){var f=a(this);f.data(c)||new b(this,c,d,e)})},a.fn[c].defaults=d.defaults},b}),function(a){"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):a(Picker,jQuery)}(function(a,b){function c(a,b){var c=this,d=a.$node[0],e=d.value,f=a.$node.data("value"),g=f||e,h=f?b.formatSubmit:b.format,i=function(){return d.currentStyle?"rtl"==d.currentStyle.direction:"rtl"==getComputedStyle(a.$root[0]).direction};c.settings=b,c.$node=a.$node,c.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},c.item={},c.item.clear=null,c.item.disable=(b.disable||[]).slice(0),c.item.enable=-function(a){return a[0]===!0?a.shift():-1}(c.item.disable),c.set("min",b.min).set("max",b.max).set("now"),g?c.set("select",g,{format:h}):c.set("select",null).set("highlight",c.item.now),c.key={40:7,38:-7,39:function(){return i()?-1:1},37:function(){return i()?1:-1},go:function(a){var b=c.item.highlight,d=new Date(Date.UTC(b.year,b.month,b.date+a));c.set("highlight",d,{interval:a}),this.render()}},a.on("render",function(){a.$root.find("."+b.klass.selectMonth).on("change",function(){var c=this.value;c&&(a.set("highlight",[a.get("view").year,c,a.get("highlight").date]),a.$root.find("."+b.klass.selectMonth).trigger("focus"))}),a.$root.find("."+b.klass.selectYear).on("change",function(){var c=this.value;c&&(a.set("highlight",[c,a.get("view").month,a.get("highlight").date]),a.$root.find("."+b.klass.selectYear).trigger("focus"))})},1).on("open",function(){var d="";c.disabled(c.get("now"))&&(d=":not(."+b.klass.buttonToday+")"),a.$root.find("button"+d+", select").attr("disabled",!1)},1).on("close",function(){a.$root.find("button, select").attr("disabled",!0)},1)}var d=7,e=6,f=a._;c.prototype.set=function(a,b,c){var d=this,e=d.item;return null===b?("clear"==a&&(a="select"),e[a]=b,d):(e["enable"==a?"disable":"flip"==a?"enable":a]=d.queue[a].split(" ").map(function(e){return b=d[e](a,b,c)}).pop(),"select"==a?d.set("highlight",e.select,c):"highlight"==a?d.set("view",e.highlight,c):a.match(/^(flip|min|max|disable|enable)$/)&&(e.select&&d.disabled(e.select)&&d.set("select",e.select,c),e.highlight&&d.disabled(e.highlight)&&d.set("highlight",e.highlight,c)),d)},c.prototype.get=function(a){return this.item[a]},c.prototype.create=function(a,c,d){var e,g=this;return c=void 0===c?a:c,c==-1/0||1/0==c?e=c:b.isPlainObject(c)&&f.isInteger(c.pick)?c=c.obj:b.isArray(c)?(c=new Date(Date.UTC(c[0],c[1],c[2])),c=f.isDate(c)?c:g.create().obj):c=f.isInteger(c)?g.normalize(new Date(c),d):f.isDate(c)?g.normalize(c,d):g.now(a,c,d),{year:e||c.getUTCFullYear(),month:e||c.getUTCMonth(),date:e||c.getUTCDate(),day:e||c.getUTCDay(),obj:e||c,pick:e||c.getTime()}},c.prototype.createRange=function(a,c){var d=this,e=function(a){return a===!0||b.isArray(a)||f.isDate(a)?d.create(a):a};return f.isInteger(a)||(a=e(a)),f.isInteger(c)||(c=e(c)),f.isInteger(a)&&b.isPlainObject(c)?a=[c.year,c.month,c.date+a]:f.isInteger(c)&&b.isPlainObject(a)&&(c=[a.year,a.month,a.date+c]),{from:e(a),to:e(c)}},c.prototype.withinRange=function(a,b){return a=this.createRange(a.from,a.to),b.pick>=a.from.pick&&b.pick<=a.to.pick},c.prototype.overlapRanges=function(a,b){var c=this;return a=c.createRange(a.from,a.to),b=c.createRange(b.from,b.to),c.withinRange(a,b.from)||c.withinRange(a,b.to)||c.withinRange(b,a.from)||c.withinRange(b,a.to)},c.prototype.now=function(a,b,c){return b=new Date,c&&c.rel&&b.setUTCDate(b.getUTCDate()+c.rel),this.normalize(b,c)},c.prototype.navigate=function(a,c,d){var e,f,g,h,i=b.isArray(c),j=b.isPlainObject(c),k=this.item.view;if(i||j){for(j?(f=c.year,g=c.month,h=c.date):(f=+c[0],g=+c[1],h=+c[2]),d&&d.nav&&k&&k.month!==g&&(f=k.year,g=k.month),e=new Date(Date.UTC(f,g+(d&&d.nav?d.nav:0),1)),f=e.getUTCFullYear(),g=e.getUTCMonth();new Date(Date.UTC(f,g,h)).getUTCMonth()!==g;)h-=1;c=[f,g,h]}return c},c.prototype.normalize=function(a){return a.setUTCHours(0,0,0,0),a},c.prototype.measure=function(a,b){var c=this;return b?"string"==typeof b?b=c.parse(a,b):f.isInteger(b)&&(b=c.now(a,b,{rel:b})):b="min"==a?-1/0:1/0,b},c.prototype.viewset=function(a,b){return this.create([b.year,b.month,1])},c.prototype.validate=function(a,c,d){var e,g,h,i,j=this,k=c,l=d&&d.interval?d.interval:1,m=-1===j.item.enable,n=j.item.min,o=j.item.max,p=m&&j.item.disable.filter(function(a){if(b.isArray(a)){var d=j.create(a).pick;dc.pick&&(g=!0)}return f.isInteger(a)}).length;if((!d||!d.nav)&&(!m&&j.disabled(c)||m&&j.disabled(c)&&(p||e||g)||!m&&(c.pick<=n.pick||c.pick>=o.pick)))for(m&&!p&&(!g&&l>0||!e&&0>l)&&(l*=-1);j.disabled(c)&&(Math.abs(l)>1&&(c.monthk.month)&&(c=k,l=l>0?1:-1),c.pick<=n.pick?(h=!0,l=1,c=j.create([n.year,n.month,n.date+(c.pick===n.pick?0:-1)])):c.pick>=o.pick&&(i=!0,l=-1,c=j.create([o.year,o.month,o.date+(c.pick===o.pick?0:1)])),!h||!i);)c=j.create([c.year,c.month,c.date+l]);return c},c.prototype.disabled=function(a){var c=this,d=c.item.disable.filter(function(d){return f.isInteger(d)?a.day===(c.settings.firstDay?d:d-1)%7:b.isArray(d)||f.isDate(d)?a.pick===c.create(d).pick:b.isPlainObject(d)?c.withinRange(d,a):void 0});return d=d.length&&!d.filter(function(a){return b.isArray(a)&&"inverted"==a[3]||b.isPlainObject(a)&&a.inverted}).length,-1===c.item.enable?!d:d||a.pickc.item.max.pick},c.prototype.parse=function(a,b,c){var d=this,e={};return b&&"string"==typeof b?(c&&c.format||(c=c||{},c.format=d.settings.format),d.formats.toArray(c.format).map(function(a){var c=d.formats[a],g=c?f.trigger(c,d,[b,e]):a.replace(/^!/,"").length;c&&(e[a]=b.substr(0,g)),b=b.substr(g)}),[e.yyyy||e.yy,+(e.mm||e.m)-1,e.dd||e.d]):b},c.prototype.formats=function(){function a(a,b,c){var d=a.match(/\w+/)[0];return c.mm||c.m||(c.m=b.indexOf(d)+1),d.length}function b(a){return a.match(/\w+/)[0].length}return{d:function(a,b){return a?f.digits(a):b.date},dd:function(a,b){return a?2:f.lead(b.date)},ddd:function(a,c){return a?b(a):this.settings.weekdaysShort[c.day]},dddd:function(a,c){return a?b(a):this.settings.weekdaysFull[c.day]},m:function(a,b){return a?f.digits(a):b.month+1},mm:function(a,b){return a?2:f.lead(b.month+1)},mmm:function(b,c){var d=this.settings.monthsShort;return b?a(b,d,c):d[c.month]},mmmm:function(b,c){var d=this.settings.monthsFull;return b?a(b,d,c):d[c.month]},yy:function(a,b){return a?2:(""+b.year).slice(2)},yyyy:function(a,b){return a?4:b.year},toArray:function(a){return a.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(a,b){var c=this;return c.formats.toArray(a).map(function(a){return f.trigger(c.formats[a],c,[0,b])||a.replace(/^!/,"")}).join("")}}}(),c.prototype.isDateExact=function(a,c){var d=this;return f.isInteger(a)&&f.isInteger(c)||"boolean"==typeof a&&"boolean"==typeof c?a===c:(f.isDate(a)||b.isArray(a))&&(f.isDate(c)||b.isArray(c))?d.create(a).pick===d.create(c).pick:b.isPlainObject(a)&&b.isPlainObject(c)?d.isDateExact(a.from,c.from)&&d.isDateExact(a.to,c.to):!1},c.prototype.isDateOverlap=function(a,c){var d=this,e=d.settings.firstDay?1:0;return f.isInteger(a)&&(f.isDate(c)||b.isArray(c))?(a=a%7+e,a===d.create(c).day+1):f.isInteger(c)&&(f.isDate(a)||b.isArray(a))?(c=c%7+e,c===d.create(a).day+1):b.isPlainObject(a)&&b.isPlainObject(c)?d.overlapRanges(a,c):!1},c.prototype.flipEnable=function(a){var b=this.item;b.enable=a||(-1==b.enable?1:-1)},c.prototype.deactivate=function(a,c){var d=this,e=d.item.disable.slice(0);return"flip"==c?d.flipEnable():c===!1?(d.flipEnable(1),e=[]):c===!0?(d.flipEnable(-1),e=[]):c.map(function(a){for(var c,g=0;gi;i+=1){if(h=e[i],d.isDateExact(h,a)){c=e[i]=null,j=!0;break}if(d.isDateOverlap(h,a)){b.isPlainObject(a)?(a.inverted=!0,c=a):b.isArray(a)?(c=a,c[3]||c.push("inverted")):f.isDate(a)&&(c=[a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),"inverted"]);break}}if(c)for(i=0;g>i;i+=1)if(d.isDateExact(e[i],a)){e[i]=null;break}if(j)for(i=0;g>i;i+=1)if(d.isDateOverlap(e[i],a)){e[i]=null;break}c&&e.push(c)}),e.filter(function(a){return null!=a})},c.prototype.nodes=function(a){var b=this,c=b.settings,g=b.item,h=g.now,i=g.select,j=g.highlight,k=g.view,l=g.disable,m=g.min,n=g.max,o=function(a,b){return c.firstDay&&(a.push(a.shift()),b.push(b.shift())),f.node("thead",f.node("tr",f.group({min:0,max:d-1,i:1,node:"th",item:function(d){return[a[d],c.klass.weekdays,'scope=col title="'+b[d]+'"']}})))}((c.showWeekdaysFull?c.weekdaysFull:c.weekdaysShort).slice(0),c.weekdaysFull.slice(0)),p=function(a){return f.node("div"," ",c.klass["nav"+(a?"Next":"Prev")]+(a&&k.year>=n.year&&k.month>=n.month||!a&&k.year<=m.year&&k.month<=m.month?" "+c.klass.navDisabled:""),"data-nav="+(a||-1)+" "+f.ariaAttr({role:"button",components:b.$node[0].id+"_table"})+' title="'+(a?c.labelMonthNext:c.labelMonthPrev)+'"')},q=function(){var d=c.showMonthsShort?c.monthsShort:c.monthsFull;return c.selectMonths?f.node("select",f.group({min:0,max:11,i:1,node:"option",item:function(a){return[d[a],0,"value="+a+(k.month==a?" selected":"")+(k.year==m.year&&an.month?" disabled":"")]}}),c.klass.selectMonth,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelMonthSelect+'"'):f.node("div",d[k.month],c.klass.month)},r=function(){var d=k.year,e=c.selectYears===!0?5:~~(c.selectYears/2);if(e){var g=m.year,h=n.year,i=d-e,j=d+e;if(g>i&&(j+=g-i,i=g),j>h){var l=i-g,o=j-h;i-=l>o?o:l,j=h}return f.node("select",f.group({min:i,max:j,i:1,node:"option",item:function(a){return[a,0,"value="+a+(d==a?" selected":"")]}}),c.klass.selectYear,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelYearSelect+'"')}return f.node("div",d,c.klass.year)};return f.node("div",(c.selectYears?r()+q():q()+r())+p()+p(1),c.klass.header)+f.node("table",o+f.node("tbody",f.group({min:0,max:e-1,i:1,node:"tr",item:function(a){var e=c.firstDay&&0===b.create([k.year,k.month,1]).day?-7:0;return[f.group({min:d*a-k.day+e+1,max:function(){return this.min+d-1},i:1,node:"td",item:function(a){a=b.create([k.year,k.month,a+(c.firstDay?1:0)]);var d=i&&i.pick==a.pick,e=j&&j.pick==a.pick,g=l&&b.disabled(a)||a.pickn.pick;return[f.node("div",a.date,function(b){return b.push(k.month==a.month?c.klass.infocus:c.klass.outfocus),h.pick==a.pick&&b.push(c.klass.now),d&&b.push(c.klass.selected),e&&b.push(c.klass.highlighted),g&&b.push(c.klass.disabled),b.join(" ")}([c.klass.day]),"data-pick="+a.pick+" "+f.ariaAttr({role:"gridcell",selected:d&&b.$node.val()===f.trigger(b.formats.toString,b,[c.format,a])?!0:null,activedescendant:e?!0:null,disabled:g?!0:null})),"",f.ariaAttr({role:"presentation"})]}})]}})),c.klass.table,'id="'+b.$node[0].id+'_table" '+f.ariaAttr({role:"grid",components:b.$node[0].id,readonly:!0}))+f.node("div",f.node("button",c.today,c.klass.buttonToday,"type=button data-pick="+h.pick+(a&&!b.disabled(h)?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.clear,c.klass.buttonClear,"type=button data-clear=1"+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.close,c.klass.buttonClose,"type=button data-close=true "+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id})),c.klass.footer)},c.defaults=function(a){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:a+"table",header:a+"header",navPrev:a+"nav--prev",navNext:a+"nav--next",navDisabled:a+"nav--disabled",month:a+"month",year:a+"year",selectMonth:a+"select--month",selectYear:a+"select--year",weekdays:a+"weekday",day:a+"day",disabled:a+"day--disabled",selected:a+"day--selected",highlighted:a+"day--highlighted",now:a+"day--today",infocus:a+"day--infocus",outfocus:a+"day--outfocus",footer:a+"footer",buttonClear:a+"button--clear",buttonToday:a+"button--today",buttonClose:a+"button--close"}}}(a.klasses().picker+"__"),a.extend("pickadate",c)}); diff --git a/dist/samples/Components/DatePicker/index.html b/dist/samples/Components/DatePicker/index.html new file mode 100644 index 000000000..98d138dac --- /dev/null +++ b/dist/samples/Components/DatePicker/index.html @@ -0,0 +1,152 @@ + + + + + + + + Component DatePicker + + + + + + + + + + + + + + + + + +

            DatePicker

            +
            + + + +
            +
            + + + +
            +
            + + +
            +
            + Go to today +
            +
            +
            + + +
            +
            +
            +
            + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
            +
            +
            +
            + + +
            +
            +
            + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/Dialog/Dialog.css b/dist/samples/Components/Dialog/Dialog.css new file mode 100644 index 000000000..4bcc46e26 --- /dev/null +++ b/dist/samples/Components/Dialog/Dialog.css @@ -0,0 +1,693 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 300; + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.ms-Dialog::before { + vertical-align: middle; + display: inline-block; + content: ''; + height: 100%; + width: 0; +} + +.ms-Dialog .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; +} + +.ms-Dialog .ms-Overlay { + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dialog .ms-Overlay { + opacity: 0; + } +} + +.ms-Dialog-main { + vertical-align: middle; + display: inline-block; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: left; + outline: 3px solid transparent; +} + +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + right: 12px; + padding: 8px; + z-index: 10; +} + +.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x { + color: #666666; + font-size: 16px; +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Dialog-content { + position: relative; + width: 100%; +} + +.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog-subText { + margin: 0 0 20px 0; + padding-top: 8px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; +} + +.ms-Dialog-actions .ms-Button { + line-height: normal; +} + +.ms-Dialog-actionsRight { + text-align: right; + font-size: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action:first-child { + margin: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action { + margin: 0 0 0 16px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close { + display: block; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner { + padding: 0 20px 20px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header { + background-color: #0078d7; + padding: 26px 20px 28px; + margin-bottom: 8px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + font-size: 28px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #ffffff; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText { + font-size: 14px; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} diff --git a/dist/samples/Components/Dialog/Dialog.min.css b/dist/samples/Components/Dialog/Dialog.min.css new file mode 100644 index 000000000..2216bdf5f --- /dev/null +++ b/dist/samples/Components/Dialog/Dialog.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:3;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:1}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}} \ No newline at end of file diff --git a/dist/samples/Components/Dialog/index.html b/dist/samples/Components/Dialog/index.html new file mode 100644 index 000000000..59842caef --- /dev/null +++ b/dist/samples/Components/Dialog/index.html @@ -0,0 +1,300 @@ + + + + + + + + Component Dialog + + + + + + + + + + + + + + + + +

            Dialog

            +
            +
            + + + +
            +
            +
            + +
            +

            All emails together

            +
            +
            +
            +

            Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

            +
            + + +
            +
            + + +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            +
            + + + +
            +
            +
            + +
            +

            All emails together

            +
            +
            +
            +

            Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

            +
            + + +
            +
            + + +
            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            +
            + + + +
            +
            +
            + +
            +

            All emails together now

            +
            +
            +
            +

            Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            +
            + + + +
            +
            +
            + +
            +

            Create account

            +
            +
            +
            + + + +
            +
            +
            +
            +
            +
            + + + +
            +
            +
            + +
            +

            Unsaved changes

            +
            +
            +
            +

            Are you sure you want to discard these changes?

            +
            +
            +
            + + +
            +
            +
            +
            +
            +
            +
            + + \ No newline at end of file diff --git a/dist/samples/Components/Dialog/jquery.Dialog.js b/dist/samples/Components/Dialog/jquery.Dialog.js new file mode 100644 index 000000000..0d647332f --- /dev/null +++ b/dist/samples/Components/Dialog/jquery.Dialog.js @@ -0,0 +1,44 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Dialog Plugin + * + * Adds basic demonstration functionality to .ms-Dialog components. + * + * @param {jQuery Object} One or more .ms-Dialog components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.Dialog = function () { + + /** Iterate through the sample buttons, which can be used to open the Dialogs. */ + $(".js-DialogAction--open").each(function () { + /** Open the associated dialog on click. */ + $(this).on('click', function () { + var target = $(this).data("target"); + $(target).show(); + }); + }); + + + return this.each(function () { + var dialog = this; + + /** Have the dialogs hidden for their initial state */ + $(dialog).hide(); + + /** Have the close buttons close the Dialog. */ + $(dialog).find(".js-DialogAction--close").each(function() { + $(this).on('click', function () { + $(dialog).hide(); + }); + }); + + /** Have the action buttons close the Dialog, though you would usually do some specific action per button. */ + $(dialog).find(".ms-Dialog-action").on('click', function () { + $(dialog).hide(); + }); + + }); + }; +})(jQuery); diff --git a/dist/samples/Components/Dropdown/Dropdown.css b/dist/samples/Components/Dropdown/Dropdown.css new file mode 100644 index 000000000..111afeece --- /dev/null +++ b/dist/samples/Components/Dropdown/Dropdown.css @@ -0,0 +1,329 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Dropdown { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: fixed; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + max-width: 268px; + z-index: 400; + top: 0; + right: 0; + bottom: 0; + overflow-y: scroll; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +@media (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} diff --git a/dist/samples/Components/Dropdown/Dropdown.min.css b/dist/samples/Components/Dropdown/Dropdown.min.css new file mode 100644 index 000000000..cd404bc55 --- /dev/null +++ b/dist/samples/Components/Dropdown/Dropdown.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}} \ No newline at end of file diff --git a/dist/samples/Components/Dropdown/Jquery.Dropdown.js b/dist/samples/Components/Dropdown/Jquery.Dropdown.js new file mode 100644 index 000000000..30b806c56 --- /dev/null +++ b/dist/samples/Components/Dropdown/Jquery.Dropdown.js @@ -0,0 +1,157 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Dropdown Plugin + * + * Given .ms-Dropdown containers with generic + + + + + + +
            + + +
            + + + +
            + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/Facepile/Facepile.css b/dist/samples/Components/Facepile/Facepile.css new file mode 100644 index 000000000..4f9baf0f7 --- /dev/null +++ b/dist/samples/Components/Facepile/Facepile.css @@ -0,0 +1,2208 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width: 480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-left: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 48px; + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + left: auto; + width: 643px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + left: 428px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + left: auto; + width: 940px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; +} + +.ms-Panel.is-open .ms-Overlay { + display: block; + pointer-events: auto; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width: 480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width: 480px) and (-ms-high-contrast: active) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 250ms; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:before, +.ms-PeoplePicker-searchBox:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: left; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} + +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Facepile { + position: relative; + height: 32px; + width: auto; +} + +.ms-Facepile .ms-PersonaCard { + display: none; + position: absolute; + top: 40px; + height: 200px; +} + +.ms-Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-Facepile-itemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-Facepile-itemBtn .ms-Persona-presence, +.ms-Facepile-itemBtn .ms-Persona-details { + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover, +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus { + background-color: #005a9e; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active { + background-color: #004578; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active { + display: block; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover { + color: #212121; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled { + color: #c8c8c8; +} + +.ms-Facepile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-Facepile-overflowText { + font-size: 14px; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} diff --git a/dist/samples/Components/Facepile/Facepile.min.css b/dist/samples/Components/Facepile/Facepile.min.css new file mode 100644 index 000000000..d7194e5a2 --- /dev/null +++ b/dist/samples/Components/Facepile/Facepile.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:4}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-Facepile-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled{color:#c8c8c8}.ms-Facepile-addPersonIcon{position:relative;top:-1px}.ms-Facepile-overflowText{font-size:14px}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none} \ No newline at end of file diff --git a/dist/samples/Components/Facepile/Jquery.Facepile.js b/dist/samples/Components/Facepile/Jquery.Facepile.js new file mode 100644 index 000000000..376905402 --- /dev/null +++ b/dist/samples/Components/Facepile/Jquery.Facepile.js @@ -0,0 +1,207 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Facepile Plugin + * + * Adds basic demonstration functionality to .ms-Facepile components. + * + * @param {jQuery Object} One or more .ms-Facepile components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.Facepile = function () { + + /** Iterate through each Facepile provided. */ + return this.each(function () { + $('.ms-PeoplePicker').PeoplePicker(); + $('.ms-Panel').Panel(); + + var $Facepile = $(this); + var $membersList = $(".ms-Facepile-members"); + var $membersCount = $(".ms-Facepile-members > .ms-Facepile-itemBtn").length; + var $panel = $('.ms-Facepile-panel.ms-Panel'); + var $panelMain = $panel.find(".ms-Panel-main"); + var $picker = $('.ms-PeoplePicker.ms-PeoplePicker--Facepile'); + var $pickerMembers = $picker.find('.ms-PeoplePicker-selectedPeople'); + var $personaCard = $('.ms-Facepile').find('.ms-PersonaCard'); + + + /** Increment member count and show/hide overflow text */ + var incrementMembers = function() { + /** Increment person count by one */ + $membersCount += 1; + + /** Display a maxiumum of 5 people */ + $(".ms-Facepile-members").children(":gt(4)").hide(); + + /** Display counter after 5 people are present */ + if ($membersCount > 5) { + $(".ms-Facepile-itemBtn--overflow").addClass("is-active"); + + var remainingMembers = $membersCount - 5; + $(".ms-Facepile-overflowText").text("+" + remainingMembers); + } + }; + + /** Open panel with people picker */ + $Facepile.on("click", ".js-addPerson", function() { + $panelMain.css({display: "block"}); + $panel.toggleClass("is-open") + .addClass("ms-Panel-animateIn") + .removeClass('ms-Facepile-panel--overflow ms-Panel--right') + .addClass('ms-Facepile-panel--addPerson'); + + /** Close any open persona cards */ + $personaCard.removeClass('is-active').hide(); + }); + + $panel.on("click", ".js-togglePanel", function() { + $panel.toggleClass("is-open") + .addClass("ms-Panel-animateIn"); + }); + + /** Open oveflow panel with list of members */ + $Facepile.on("click", ".js-overflowPanel", function() { + $panelMain.css({display: "block"}); + $panel.toggleClass("is-open") + .addClass("ms-Panel-animateIn") + .removeClass('ms-Facepile-panel--addPerson') + .addClass('ms-Facepile-panel--overflow ms-Panel--right'); + }); + + /** Display person count on page load */ + $(document).ready(function() { + $(".ms-Facepile-overflowText").text("+" + $membersCount); + }); + + /** Show selected members from PeoplePicker in the Facepile */ + $('.ms-PeoplePicker-result').on('click', function() { + var $this = $(this); + var name = $this.find(".ms-Persona-primaryText").html(); + var title = $this.find(".ms-Persona-secondaryText").html(); + var selectedInitials = (function() { + var nameArray = name.split(' '); + var nameInitials = ''; + for (var i = 0; i < nameArray.length; i++) { + nameInitials += nameArray[i].charAt(0); + } + + return nameInitials.substring(0,2); + })(); + var selectedClasses = $this.find('.ms-Persona-initials').attr('class'); + var selectedImage = (function() { + if ($this.find('.ms-Persona-image').length) { + var selectedImageSrc = $this.find('.ms-Persona-image').attr('src'); + return 'Persona image'; + } else { + return ''; + } + })(); + + var FacepileItem = + ''; + + /** Add new item to members list in Facepile */ + $membersList.prepend(FacepileItem); + + /** Increment member count */ + incrementMembers(); + }); + + /** Remove members in panel people picker */ + $pickerMembers.on('click', '.js-selectedRemove', function() { + var memberText = $(this).parent().find('.ms-Persona-primaryText').text(); + + var $FacepileMember = $membersList.find(".ms-Persona-primaryText:contains(" + memberText + ")").first(); + + if ($FacepileMember) { + $FacepileMember.parent().closest('.ms-Facepile-itemBtn').remove(); + + $membersCount -= 1; + + /** Display a maxiumum of 5 people */ + $(".ms-Facepile-members").children(":lt(5)").show(); + + /** Display counter after 5 people are present */ + if ($membersCount <= 5) { + $(".ms-Facepile-itemBtn--overflow").removeClass("is-active"); + } else { + var remainingMembers = $membersCount - 5; + $(".ms-Facepile-overflowText").text("+" + remainingMembers); + } + } + }); + + /** Show persona card when selecting a Facepile item */ + $membersList.on('click', '.ms-Facepile-itemBtn', function() { + var selectedName = $(this).find(".ms-Persona-primaryText").html(); + var selectedTitle = $(this).find(".ms-Persona-secondaryText").html(); + var selectedInitials = (function() { + var name = selectedName.split(' '); + var nameInitials = ''; + for (var i = 0; i < name.length; i++) { + nameInitials += name[i].charAt(0); + } + + return nameInitials.substring(0,2); + })(); + var selectedClasses = $(this).find('.ms-Persona-initials').attr('class'); + var selectedImage = $(this).find('.ms-Persona-image').attr('src'); + var $card = $('.ms-PersonaCard'); + var $cardName = $card.find('.ms-Persona-primaryText'); + var $cardTitle = $card.find('.ms-Persona-secondaryText'); + var $cardInitials = $card.find('.ms-Persona-initials'); + var $cardImage = $card.find('.ms-Persona-image'); + + /** Close any open persona cards */ + $personaCard.removeClass('is-active'); + + /** Add data to persona card */ + $cardName.text(selectedName); + $cardTitle.text(selectedTitle); + $cardInitials.text(selectedInitials); + $cardInitials.removeClass(); + $cardInitials.addClass(selectedClasses); + $cardImage.attr('src', selectedImage); + + /** Show persona card */ + setTimeout(function() { $personaCard.addClass('is-active'); }, 100); + + /** Align persona card on md and above screens */ + if ($(window).width() > 480) { + var itemPosition = $(this).offset().left; + var correctedPosition = itemPosition - 26; + + $personaCard.css({'left': correctedPosition}); + } else { + $personaCard.css({'left': 0, 'top': 'auto', 'position': 'fixed'}); + } + }); + + /** Dismiss persona card when clicking on the document */ + $(document).on('click', function(e) { + var $memberBtn = $('.ms-Facepile-itemBtn--member'); + + if (!$memberBtn.is(e.target) && $memberBtn.has(e.target).length === 0 && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) { + $personaCard.removeClass('is-active'); + $personaCard.removeAttr('style'); + } else { + $personaCard.addClass('is-active'); + } + }); + + }); + }; +})(jQuery); \ No newline at end of file diff --git a/dist/samples/Components/Facepile/index.html b/dist/samples/Components/Facepile/index.html new file mode 100644 index 000000000..44376468d --- /dev/null +++ b/dist/samples/Components/Facepile/index.html @@ -0,0 +1,687 @@ + + + + + + + + Component Facepile + + + + + + + + + + + + + + + + +

            Facepile

            +
            + + +
            + +
            +
            +
            +
            +
            AL
            + Persona image +
            +
            +
            +
            Alton Lafferty
            +
            Accountant
            +
            +
            +
            +
            +
            +
            +
            DF
            +
            +
            +
            +
            Douglas Fielder
            +
            Public Relations
            +
            +
            +
            +
            +
            +
            +
            ML
            +
            +
            +
            +
            Marcus Lauer
            +
            Technical Support
            +
            +
            +
            +
            + +
            + + +
            +
            +
            +
            +
            AL
            + +
            +
            +
            +
            Alton Lafferty
            +
            Interior Designer, Contoso
            +
            Office: 7/1234
            +
            Available - Video capable
            +
            +
            +
            +
              +
              • +
              • +
              • +
              • +
            • View profile
              • +
              • +
            +
            +
              +
            • +
              Lync: Start Lync call
              +
              • +
            • +
              Personal: 555.206.2443
              +
              Work: 555.929.8240
              +
              • +
            • +
              Skype: Start Skype call
              +
              • +
            • +
              Personal: alton.lafferty@outlook.com
              +
              Work: altonlafferty@contoso.com
              +
              • + +
            • +
              +
              +
                +
              • + +
                • +
              • + +
                • +
              +
              +
              +
              Manager
              +
                +
              • + +
                • +
              +
              +
              +
              Staff
              +
                +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              +
              +
              +
              • + +
            +
            +
            + +
            +
            + + +
            +
            +
            +
            + +
            +
            +

            Members

            +
            +
            + +
            + +
            +
            + Suggested contacts +
            +
              +
            • +
              +
              +
              +
              RM
              +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              DF
              +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              JF
              +
              +
              +
              +
              Jessica Fischer
              +
              Public Relations
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              MG
              +
              +
              +
              +
              Marcel Groce
              +
              Marketing
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              GS
              +
              +
              +
              +
              Grant Steel
              +
              Public Relations
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              HW
              +
              +
              +
              +
              Harvey Wallin
              +
              Delivery
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              ML
              +
              +
              +
              +
              Marcus Lauer
              +
              Marketing
              +
              +
              +
              +
              • +
            +
            +
            +
            + +
            +
            Search Contacts & Directory
            +
            +
            +
            + +
            +
            + 3 members +
            +
              +
            • +
              +
              +
              AL
              + Persona image +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              + +
              • +
            • +
              +
              +
              DF
              +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              + +
              • +
            • +
              +
              +
              ML
              +
              +
              +
              +
              Marcus Lauer
              +
              Technical Support
              +
              +
              + +
              • +
            +
            +
            + + +
            +
            +
            +
            +
            AL
            + +
            +
            +
            +
            Alton Lafferty
            +
            Interior Designer, Contoso
            +
            Office: 7/1234
            +
            Available - Video capable
            +
            +
            +
            +
              +
              • +
              • +
              • +
              • +
            • View profile
              • +
              • +
            +
            +
              +
            • +
              Lync: Start Lync call
              +
              • +
            • +
              Personal: 555.206.2443
              +
              Work: 555.929.8240
              +
              • +
            • +
              Skype: Start Skype call
              +
              • +
            • +
              Personal: alton.lafferty@outlook.com
              +
              Work: altonlafferty@contoso.com
              +
              • + +
            • +
              +
              +
                +
              • + +
                • +
              • + +
                • +
              +
              +
              +
              Manager
              +
                +
              • + +
                • +
              +
              +
              +
              Staff
              +
                +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              • + +
                • +
              +
              +
              +
              • + +
            +
            +
            + +
            +
            +
            +
            +
            + + + + + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/Label/Label.css b/dist/samples/Components/Label/Label.css new file mode 100644 index 000000000..e1fc52b41 --- /dev/null +++ b/dist/samples/Components/Label/Label.css @@ -0,0 +1,59 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} diff --git a/dist/samples/Components/Label/Label.min.css b/dist/samples/Components/Label/Label.min.css new file mode 100644 index 000000000..a1d91feee --- /dev/null +++ b/dist/samples/Components/Label/Label.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}} \ No newline at end of file diff --git a/dist/samples/Components/Label/index.html b/dist/samples/Components/Label/index.html new file mode 100644 index 000000000..f0b6a5427 --- /dev/null +++ b/dist/samples/Components/Label/index.html @@ -0,0 +1,118 @@ + + + + + + + + Component Label + + + + + + + + + + + + + + + +

            Label

            +
            +
            + + +
            +
            + + +
            +
            + + +
            +
            + + \ No newline at end of file diff --git a/dist/samples/Components/Link/Link.css b/dist/samples/Components/Link/Link.css new file mode 100644 index 000000000..dd43a20f4 --- /dev/null +++ b/dist/samples/Components/Link/Link.css @@ -0,0 +1,35 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} diff --git a/dist/samples/Components/Link/Link.min.css b/dist/samples/Components/Link/Link.min.css new file mode 100644 index 000000000..3037cf1ce --- /dev/null +++ b/dist/samples/Components/Link/Link.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}} \ No newline at end of file diff --git a/dist/samples/Components/Link/index.html b/dist/samples/Components/Link/index.html new file mode 100644 index 000000000..4e558a332 --- /dev/null +++ b/dist/samples/Components/Link/index.html @@ -0,0 +1,111 @@ + + + + + + + + Component Link + + + + + + + + + + + + + + + +

            Link

            +
            + + +

            You can add links to any text

            +

            + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisl sed dolor consectetur, vitae hendrerit nulla ullamcorper. Sed quis massa mi. Etiam sed ullamcorper est. Phasellus sodales tempus sapien et tristique. Praesent non mauris sem. Aliquam leo elit, molestie sed eros ac, sodales mattis metus. Cras imperdiet est vel quam faucibus posuere. Praesent quis felis mattis, dapibus nibh ut, porttitor dui. Curabitur in eleifend tortor, vel fermentum enim. Etiam blandit quam neque, quis pretium lorem finibus pharetra. Aliquam a placerat arcu. Sed at nibh et nulla ullamcorper pharetra ac ac tortor. Nullam arcu justo, vulputate et efficitur ut, finibus sit amet leo. Phasellus non sem id sapien gravida sodales et at leo. +

            + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/List/List.css b/dist/samples/Components/List/List.css new file mode 100644 index 000000000..682f359a2 --- /dev/null +++ b/dist/samples/Components/List/List.css @@ -0,0 +1,268 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} diff --git a/dist/samples/Components/List/List.min.css b/dist/samples/Components/List/List.min.css new file mode 100644 index 000000000..80d4ad757 --- /dev/null +++ b/dist/samples/Components/List/List.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-List,.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-List{color:#333;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}} \ No newline at end of file diff --git a/dist/samples/Components/List/index.html b/dist/samples/Components/List/index.html new file mode 100644 index 000000000..e0aa0395a --- /dev/null +++ b/dist/samples/Components/List/index.html @@ -0,0 +1,320 @@ + + + + + + + + Component List + + + + + + + + + + + + + + + +

            List

            +
            +
            + +
              +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            +
            +
              +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            +
            +
            + + \ No newline at end of file diff --git a/dist/samples/Components/ListItem/Jquery.ListItem.js b/dist/samples/Components/ListItem/Jquery.ListItem.js new file mode 100644 index 000000000..8248bfc28 --- /dev/null +++ b/dist/samples/Components/ListItem/Jquery.ListItem.js @@ -0,0 +1,27 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * List Item Plugin + * + * Adds basic demonstration functionality to .ms-ListItem components. + * + * @param {jQuery Object} One or more .ms-ListItem components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.ListItem = function () { + + /** Go through each panel we've been given. */ + return this.each(function () { + + var $listItem = $(this); + + /** Detect clicks on selectable list items. */ + $listItem.on('click', '.js-toggleSelection', function() { + $(this).parents('.ms-ListItem').toggleClass('is-selected'); + }); + + }); + + }; +})(jQuery); diff --git a/dist/samples/Components/ListItem/ListItem.css b/dist/samples/Components/ListItem/ListItem.css new file mode 100644 index 000000000..ce9cefd5b --- /dev/null +++ b/dist/samples/Components/ListItem/ListItem.css @@ -0,0 +1,268 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} diff --git a/dist/samples/Components/ListItem/ListItem.min.css b/dist/samples/Components/ListItem/ListItem.min.css new file mode 100644 index 000000000..e8dca4dfb --- /dev/null +++ b/dist/samples/Components/ListItem/ListItem.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px} \ No newline at end of file diff --git a/dist/samples/Components/ListItem/index.html b/dist/samples/Components/ListItem/index.html new file mode 100644 index 000000000..094a1af1e --- /dev/null +++ b/dist/samples/Components/ListItem/index.html @@ -0,0 +1,224 @@ + + + + + + + + Component ListItem + + + + + + + + + + + + + + + + +

            ListItem

            +
            + + +
              +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            + + + +
              +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            + + + +
              +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            + + + +
              +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            + + + +
              +
            • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            + + + +
              +
            • +
               
              + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
              +
              +
              +
              +
              +
              +
              +
              • +
            + + + +
              +
            • +
              + Perdivn Pitch.mp3 + 08/11/14 12:32p +
              • +
            + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/MessageBanner/MessageBanner.css b/dist/samples/Components/MessageBanner/MessageBanner.css new file mode 100644 index 000000000..1798433f0 --- /dev/null +++ b/dist/samples/Components/MessageBanner/MessageBanner.css @@ -0,0 +1,458 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-MessageBanner { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + -webkit-animation-name: fadeOut, slideUpOut20; + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: none; + background-color: transparent; +} + +.ms-MessageBanner-expand:focus, +.ms-MessageBanner-close:focus { + outline: 1px solid transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-expand { + display: inline-block; + } + + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px 0; + min-width: 240px; + } + + .ms-MessageBanner-expand { + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} diff --git a/dist/samples/Components/MessageBanner/MessageBanner.js b/dist/samples/Components/MessageBanner/MessageBanner.js new file mode 100644 index 000000000..71edf9771 --- /dev/null +++ b/dist/samples/Components/MessageBanner/MessageBanner.js @@ -0,0 +1,162 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * MessageBanner component + * + * A component to display error messages + * + */ + +/** + * @namespace fabric + */ +var fabric = fabric || {}; +/** + * + * @param {HTMLElement} container - the target container for an instance of MessageBanner + * @constructor + */ +fabric.MessageBanner = function(container) { + this.container = container; + this.init(); +}; + +fabric.MessageBanner.prototype = (function() { + + var _clipper; + var _bufferSize; + var _textContainerMaxWidth = 700; + var _clientWidth; + var _textWidth; + var _initTextWidth; + var _chevronButton; + var _errorBanner; + var _actionButton; + var _closeButton; + var _bufferElementsWidth = 88; + var _bufferElementsWidthSmall = 35; + var SMALL_BREAK_POINT = 480; + + /** + * sets styles on resize + */ + var _onResize = function() { + _clientWidth = _errorBanner.offsetWidth; + if(window.innerWidth >= SMALL_BREAK_POINT ) { + _resizeRegular(); + } else { + _resizeSmall(); + } + }; + + /** + * resize above 480 pixel breakpoint + */ + var _resizeRegular = function() { + if ((_clientWidth - _bufferSize) > _initTextWidth && _initTextWidth < _textContainerMaxWidth) { + _textWidth = "auto"; + _chevronButton.className = "ms-MessageBanner-expand"; + _collapse(); + } else { + _textWidth = Math.min((_clientWidth - _bufferSize), _textContainerMaxWidth) + "px"; + if(_chevronButton.className.indexOf("is-visible") === -1) { + _chevronButton.className += " is-visible"; + } + } + _clipper.style.width = _textWidth; + }; + + /** + * resize below 480 pixel breakpoint + */ + var _resizeSmall = function() { + if (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth) > _initTextWidth) { + _textWidth = "auto"; + _collapse(); + } else { + _textWidth = (_clientWidth - (_bufferElementsWidthSmall + _closeButton.offsetWidth)) + "px"; + } + _clipper.style.width = _textWidth; + }; + /** + * caches elements and values of the component + */ + var _cacheDOM = function(context) { + _errorBanner = context.container; + _clipper = context.container.querySelector('.ms-MessageBanner-clipper'); + _chevronButton = context.container.querySelector('.ms-MessageBanner-expand'); + _actionButton = context.container.querySelector('.ms-MessageBanner-action'); + _bufferSize = _actionButton.offsetWidth + _bufferElementsWidth; + _closeButton = context.container.querySelector('.ms-MessageBanner-close'); + }; + + /** + * expands component to show full error message + */ + var _expand = function() { + var icon = _chevronButton.querySelector('.ms-Icon'); + _errorBanner.className += " is-expanded"; + icon.className = "ms-Icon ms-Icon--chevronsUp"; + }; + + /** + * collapses component to only show truncated message + */ + var _collapse = function() { + var icon = _chevronButton.querySelector('.ms-Icon'); + _errorBanner.className = "ms-MessageBanner"; + icon.className = "ms-Icon ms-Icon--chevronsDown"; + }; + + var _toggleExpansion = function() { + if (_errorBanner.className.indexOf("is-expanded") > -1) { + _collapse(); + } else { + _expand(); + } + }; + + /** + * hides banner when close button is clicked + */ + var _hideBanner = function() { + if(_errorBanner.className.indexOf("hide") === -1) { + _errorBanner.className += " hide"; + setTimeout(function() { + _errorBanner.className = "ms-MessageBanner is-hidden"; + }, 500); + } + }; + + /** + * shows banner if the banner is hidden + */ + var _showBanner = function() { + _errorBanner.className = "ms-MessageBanner"; + }; + + /** + * sets handlers for resize and button click events + */ + var _setListeners = function() { + window.addEventListener('resize', _onResize, false); + _chevronButton.addEventListener("click", _toggleExpansion, false); + _closeButton.addEventListener("click", _hideBanner, false); + }; + + /** + * initializes component + */ + var init = function() { + _cacheDOM(this); + _setListeners(); + _clientWidth = _errorBanner.offsetWidth; + _initTextWidth = _clipper.offsetWidth; + _onResize(null); + }; + + return { + init: init, + showBanner: _showBanner + }; +}()); diff --git a/dist/samples/Components/MessageBanner/MessageBanner.min.css b/dist/samples/Components/MessageBanner/MessageBanner.min.css new file mode 100644 index 000000000..e074f1a3e --- /dev/null +++ b/dist/samples/Components/MessageBanner/MessageBanner.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-MessageBanner{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;overflow:hidden;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-expand{display:inline-block}.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}} \ No newline at end of file diff --git a/dist/samples/Components/MessageBanner/index.html b/dist/samples/Components/MessageBanner/index.html new file mode 100644 index 000000000..2efb62442 --- /dev/null +++ b/dist/samples/Components/MessageBanner/index.html @@ -0,0 +1,126 @@ + + + + + + + + Component MessageBanner + + + + + + + + + + + + + + + + +

            MessageBanner

            +
            + + +
            +
            +
            +
            + You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage. +
            +
            + +
            + +
            +
            + +
            + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/NavBar/Jquery.NavBar.js b/dist/samples/Components/NavBar/Jquery.NavBar.js new file mode 100644 index 000000000..10202242a --- /dev/null +++ b/dist/samples/Components/NavBar/Jquery.NavBar.js @@ -0,0 +1,95 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Nav Bar Plugin + */ +(function ($) { + $.fn.NavBar = function () { + + /** Go through each nav bar we've been given. */ + return this.each(function () { + + var $navBar = $(this); + + // Open the nav bar on mobile. + $navBar.on('click', '.js-openMenu', function(event) { + event.stopPropagation(); + $navBar.toggleClass('is-open'); + }); + + // Close the nav bar on mobile. + $navBar.click(function() { + if ($navBar.hasClass('is-open')) { + $navBar.removeClass('is-open'); + } + }); + + // Set selected states and open/close menus. + $navBar.on('click', '.ms-NavBar-item:not(.is-disabled)', function(event) { + var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field'); + event.stopPropagation(); + + // Prevent default actions from firing if links are not found. + if ($(this).children('.ms-NavBar-link').length === 0) { + event.preventDefault(); + } + + // Deselect all of the items. + $(this).siblings('.ms-NavBar-item').removeClass('is-selected'); + + // Close and blur the search box if it doesn't have text. + if ($searchBox.length > 0 && $searchBox.val().length === 0) { + $('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur(); + } + + // Does the selected item have a menu? + if ($(this).hasClass('ms-NavBar-item--hasMenu')) { + + // First, close any neighboring menus. + $(this).siblings('.ms-NavBar-item--hasMenu').children('.ms-ContextualMenu:first').removeClass('is-open'); + + // Toggle 'is-open' to open or close it. + $(this).children('.ms-ContextualMenu:first').toggleClass('is-open'); + + // Toggle 'is-selected' to indicate whether it is active. + $(this).toggleClass('is-selected'); + } else { + // Doesn't have a menu, so just select the item. + $(this).addClass('is-selected'); + + // Close the submenu and any open contextual menus. + $navBar.removeClass('is-open').find('.ms-ContextualMenu').removeClass('is-open'); + } + + // Is this the search box? Open it up and focus on the search field. + if ($(this).hasClass('ms-NavBar-item--search')) { + $(this).addClass('is-open'); + $(this).find('.ms-TextField-field').focus(); + + // Close any open menus. + $navBar.find('.ms-ContextualMenu:first').removeClass('is-open'); + } + }); + + // Prevent contextual menus from being hidden when clicking on them. + $navBar.on('click', '.ms-NavBar-item .ms-ContextualMenu', function(event) { + event.stopPropagation(); + + // Collapse the mobile "panel" for nav items. + $(this).removeClass('is-open'); + $navBar.removeClass('is-open').find('.ms-NavBar-item--hasMenu').removeClass('is-selected'); + }); + + // Hide any menus and close the search box when clicking anywhere in the document. + $(document).on('click', 'html', function() { + var $searchBox = $navBar.find('.ms-NavBar-item.ms-NavBar-item--search .ms-TextField-field'); + $navBar.find('.ms-NavBar-item').removeClass('is-selected').find('.ms-ContextualMenu').removeClass('is-open'); + + // Close and blur the search box if it doesn't have text. + if ($searchBox.length > 0 && $searchBox.val().length === 0) { + $navBar.find('.ms-NavBar-item.ms-NavBar-item--search').removeClass('is-open').find('.ms-TextField-field').blur(); + } + }); + }); + }; +})(jQuery); diff --git a/dist/samples/Components/NavBar/NavBar.css b/dist/samples/Components/NavBar/NavBar.css new file mode 100644 index 000000000..60f3ca959 --- /dev/null +++ b/dist/samples/Components/NavBar/NavBar.css @@ -0,0 +1,792 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-NavBar { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; +} + +.ms-NavBar .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + z-index: 0; +} + +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + right: 27px; + text-align: center; + width: 40px; + cursor: pointer; +} + +.ms-NavBar-items { + display: none; +} + +.ms-NavBar-item { + box-sizing: border-box; + display: block; + height: 40px; + line-height: 40px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + padding-left: 20px; + position: relative; +} + +.ms-NavBar-item:hover { + cursor: pointer; + background-color: #deecf9; + color: #000000; +} + +.ms-NavBar-item:hover .ms-Icon { + color: #333333; +} + +.ms-NavBar-item:active { + color: #0078d7; +} + +.ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-NavBar-item.is-disabled { + color: #a6a6a6; +} + +.ms-NavBar-item.is-disabled:hover { + cursor: default; + border: none; +} + +.ms-NavBar-link { + color: #333333; + text-decoration: none; +} + +.ms-NavBar-link:active { + color: #0078d7; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after { + color: #212121; +} + +.ms-NavBar-chevronDown { + color: #666666; + font-size: 22px; + position: absolute; + top: 10px; + right: 20px; +} + +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; +} + +.ms-NavBar-item.ms-NavBar-item--search:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #666666; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + right: 5px; + top: 0; +} + +.ms-NavBar-item.ms-NavBar-item--search .ms-TextField { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open { + width: 200px; + padding-right: 40px; + border: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField { + display: block; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field { + border: none; + background-color: transparent; +} + +@media (max-width: 479px) { + .ms-NavBar.is-open .ms-NavBar-items { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + bottom: 0; + display: block; + left: 50px; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + outline: 1px solid transparent; + z-index: 5; + } + + .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu { + position: relative; + } +} + +@media (min-width: 320px) and (max-width: 479px) { + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown { + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + } + + .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + } + + .ms-NavBar.is-open .ms-Overlay { + display: block; + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 480px) { + .ms-NavBar-openMenu { + display: none; + } + + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 7px 0 0; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + right: 0; + float: none; + position: relative; + } + + .ms-NavBar-item { + float: left; + margin-right: 18px; + font-size: 14px; + padding: 0; + } + + .ms-NavBar-item:hover { + border-bottom: 2px solid #0078d7; + background-color: transparent; + } + + .ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + border-bottom: 2px solid #0078d7; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu:after { + position: relative; + top: 3px; + padding-top: 0; + right: auto; + } + + .ms-NavBar-item.ms-NavBar-item--right { + float: right; + margin: 0; + } +} diff --git a/dist/samples/Components/NavBar/NavBar.min.css b/dist/samples/Components/NavBar/NavBar.min.css new file mode 100644 index 000000000..65e0ab4ec --- /dev/null +++ b/dist/samples/Components/NavBar/NavBar.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;padding-top:6px}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:3}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:4}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:2}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}} \ No newline at end of file diff --git a/dist/samples/Components/NavBar/index.html b/dist/samples/Components/NavBar/index.html new file mode 100644 index 000000000..e5c004b6c --- /dev/null +++ b/dist/samples/Components/NavBar/index.html @@ -0,0 +1,135 @@ + + + + + + + + Component NavBar + + + + + + + + + + + + + + + + +

            NavBar

            +
            + + +
            +
            + +
            +
            + +
            + +
            + + \ No newline at end of file diff --git a/dist/samples/Components/OrgChart/OrgChart.css b/dist/samples/Components/OrgChart/OrgChart.css new file mode 100644 index 000000000..21686e819 --- /dev/null +++ b/dist/samples/Components/OrgChart/OrgChart.css @@ -0,0 +1,544 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} diff --git a/dist/samples/Components/OrgChart/OrgChart.min.css b/dist/samples/Components/OrgChart/OrgChart.min.css new file mode 100644 index 000000000..22ad942bd --- /dev/null +++ b/dist/samples/Components/OrgChart/OrgChart.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0;outline:transparent} \ No newline at end of file diff --git a/dist/samples/Components/OrgChart/index.html b/dist/samples/Components/OrgChart/index.html new file mode 100644 index 000000000..fa8b0d8d3 --- /dev/null +++ b/dist/samples/Components/OrgChart/index.html @@ -0,0 +1,348 @@ + + + + + + + + Component OrgChart + + + + + + + + + + + + + + + +

            OrgChart

            +
            +
            + +
            +
            +
              +
            • + +
              • +
            • + +
              • +
            +
            +
            +
            Manager
            +
              +
            • + +
              • +
            +
            +
            +
            Staff
            +
              +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            +
            +
            +
            +
            +
              +
            • + +
              • +
            • + +
              • +
            +
            +
            +
            Manager
            +
              +
            • + +
              • +
            +
            +
            +
            Staff
            +
              +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            +
            +
            +
            + + \ No newline at end of file diff --git a/dist/samples/Components/Overlay/Overlay.css b/dist/samples/Components/Overlay/Overlay.css new file mode 100644 index 000000000..bf8b93f39 --- /dev/null +++ b/dist/samples/Components/Overlay/Overlay.css @@ -0,0 +1,26 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} diff --git a/dist/samples/Components/Overlay/Overlay.min.css b/dist/samples/Components/Overlay/Overlay.min.css new file mode 100644 index 000000000..01e2cb9cb --- /dev/null +++ b/dist/samples/Components/Overlay/Overlay.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden} \ No newline at end of file diff --git a/dist/samples/Components/Overlay/index.html b/dist/samples/Components/Overlay/index.html new file mode 100644 index 000000000..333a76f06 --- /dev/null +++ b/dist/samples/Components/Overlay/index.html @@ -0,0 +1,116 @@ + + + + + + + + Component Overlay + + + + + + + + + + + + + + + +

            Overlay

            +
            +
            + +
            +
            +
            + +
            +
            +
            + +
            +
            +
            + + \ No newline at end of file diff --git a/dist/samples/Components/Panel/Jquery.Panel.js b/dist/samples/Components/Panel/Jquery.Panel.js new file mode 100644 index 000000000..b43c205da --- /dev/null +++ b/dist/samples/Components/Panel/Jquery.Panel.js @@ -0,0 +1,94 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Panel Plugin + * + * Adds basic demonstration functionality to .ms-Panel components. + * + * @param {jQuery Object} One or more .ms-Panel components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.Panel = function () { + + var pfx = ["webkit", "moz", "MS", "o", ""]; + + // Prefix function + function prefixedEvent(element, type, callback) { + for (var p = 0; p < pfx.length; p++) { + if (!pfx[p]) { type = type.toLowerCase(); } + element.addEventListener(pfx[p]+type, callback, false); + } + } + + /** Go through each panel we've been given. */ + return this.each(function () { + + var $panel = $(this); + var $panelMain = $panel.find(".ms-Panel-main"); + + /** Hook to open the panel. */ + $(".ms-PanelAction-close").on("click", function() { + + // Display Panel first, to allow animations + $panel.addClass("ms-Panel-animateOut"); + + }); + + $(".ms-PanelAction-open").on("click", function() { + + // Display Panel first, to allow animations + $panel.addClass("is-open"); + + // Add animation class + $panel.addClass("ms-Panel-animateIn"); + + }); + + prefixedEvent($panelMain[0], 'AnimationEnd', function(event) { + if (event.animationName.indexOf('Out') > -1) { + + // Hide and Prevent ms-Panel-main from being interactive + $panel.removeClass('is-open'); + + // Remove animating classes for the next time we open panel + $panel.removeClass('ms-Panel-animateIn ms-Panel-animateOut'); + + } + }); + + // Pivots for sample page to show variant panel sizes + $(".panelVariant-item").on("click", function() { + var className = $(this).find('span').attr('class'); + + $(".panelVariant-item").removeClass('is-selected'); + $(this).addClass('is-selected'); + + switch (className) { + case 'is-default': + $('.ms-Panel').removeClass().addClass('ms-Panel'); + break; + case 'is-left': + $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--left'); + break; + case 'is-lightDismiss': + $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lightDismiss'); + break; + case 'is-md': + $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--md'); + break; + case 'is-lgFixed': + $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg ms-Panel--fixed'); + break; + case 'is-lg': + $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--lg'); + break; + case 'is-xl': + $('.ms-Panel').removeClass().addClass('ms-Panel ms-Panel--xl'); + break; + } + }); + }); + + }; +})(jQuery); diff --git a/dist/samples/Components/Panel/Panel.css b/dist/samples/Components/Panel/Panel.css new file mode 100644 index 000000000..67ca72790 --- /dev/null +++ b/dist/samples/Components/Panel/Panel.css @@ -0,0 +1,1634 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: 58px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-mainArea { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-right: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem { + margin-right: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch { + border-right: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch { + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 8px 8px 0; + border: none; + border-left: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch-input { + border-left: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch-input { + border-left: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-right: 40px; + border-left-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-right: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0px 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + position: relative; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 40px; + margin-right: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus, +.ms-Pivot-link:active { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff !important; + background-color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7 !important; +} + +@media (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + } +} + +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width: 480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-left: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 48px; + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + left: auto; + width: 643px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + left: 428px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + left: auto; + width: 940px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; +} + +.ms-Panel.is-open .ms-Overlay { + display: block; + pointer-events: auto; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width: 480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width: 480px) and (-ms-high-contrast: active) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 250ms; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; + } +} diff --git a/dist/samples/Components/Panel/Panel.min.css b/dist/samples/Components/Panel/Panel.min.css new file mode 100644 index 000000000..537957cee --- /dev/null +++ b/dist/samples/Components/Panel/Panel.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:1}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:1}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:1;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:2}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:3}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:1;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}} \ No newline at end of file diff --git a/dist/samples/Components/Panel/index.html b/dist/samples/Components/Panel/index.html new file mode 100644 index 000000000..f7e820057 --- /dev/null +++ b/dist/samples/Components/Panel/index.html @@ -0,0 +1,174 @@ + + + + + + + + Component Panel + + + + + + + + + + + + + + + + +

            Panel

            +
            +
            + +
              +
            • + Small, right-aligned, fixed +
              • +
            • + Small, left-aligned, fixed +
              • +
            • + Small, light dismiss, fixed +
              • +
            • + Medium, fixed +
              • +
            • + Large, fixed +
              • +
            • + Large, fluid +
              • +
            • + Extra Large, fluid +
              • +
            + + + +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            +
            + + Save +
            +
            +
            +
            +
            +
            + + Cancel +
            +
            +
            +
            +
            + +
            +
            +

            Panel

            +
            + Content goes here. +
            +
            +
            +
            +
            +
            + + \ No newline at end of file diff --git a/dist/samples/Components/PeoplePicker/Jquery.PeoplePicker.js b/dist/samples/Components/PeoplePicker/Jquery.PeoplePicker.js new file mode 100644 index 000000000..5382cd635 --- /dev/null +++ b/dist/samples/Components/PeoplePicker/Jquery.PeoplePicker.js @@ -0,0 +1,398 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +var fabric = fabric || {}; + +/** + * People Picker Plugin + * + * Adds basic demonstration functionality to .ms-PeoplePicker components. + * + * @param {jQuery Object} One or more .ms-PeoplePicker components + * @return {jQuery Object} The same components (allows for chaining) + */ + +(function ($) { + $.fn.PeoplePicker = function () { + + /** Iterate through each people picker provided. */ + return this.each(function () { + + var $peoplePicker = $(this); + var $searchField = $peoplePicker.find(".ms-PeoplePicker-searchField"); + var $results = $peoplePicker.find(".ms-PeoplePicker-results"); + var $selected = $peoplePicker.find('.ms-PeoplePicker-selected'); + var $selectedPeople = $peoplePicker.find(".ms-PeoplePicker-selectedPeople"); + var $selectedCount = $peoplePicker.find(".ms-PeoplePicker-selectedCount"); + var $peopleList = $peoplePicker.find(".ms-PeoplePicker-peopleList"); + var isActive = false; + var spinner; + var $personaCard = $('.ms-PeoplePicker').find('.ms-PersonaCard'); + + // Run when focused or clicked + function peoplePickerActive(event) { + /** Scroll the view so that the people picker is at the top. */ + $('html, body').animate({ + scrollTop: $peoplePicker.offset().top + }, 367); + + /** Start by closing any open people pickers. */ + if ( $peoplePicker.hasClass('is-active') ) { + $peoplePicker.removeClass("is-active"); + } + + /** Display a maxiumum of 5 people in Facepile variant */ + if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile') && $searchField.val() === "") { + $peopleList.children(":gt(4)").hide(); + } + + /** Animate results and members in Facepile variant. */ + if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) { + // $results.addClass('ms-u-slideDownIn20'); + $selectedPeople.addClass('ms-u-slideDownIn20'); + setTimeout(function() { $results.removeClass('ms-u-slideDownIn20'); $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000); + } + + isActive = true; + + /** Stop the click event from propagating, which would just close the dropdown immediately. */ + event.stopPropagation(); + + /** Before opening, size the results panel to match the people picker. */ + if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile')) { + $results.width($peoplePicker.width() - 2); + } + + /** Show the $results by setting the people picker to active. */ + $peoplePicker.addClass("is-active"); + + /** Temporarily bind an event to the document that will close the people picker when clicking anywhere. */ + $(document).bind("click.peoplepicker", function() { + $peoplePicker.removeClass('is-active'); + if ($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) { + $peoplePicker.removeClass('is-searching'); + $('.ms-PeoplePicker-selected').show(); + $('.ms-PeoplePicker-searchMore').removeClass('is-active'); + $searchField.val(""); + } + $(document).unbind('click.peoplepicker'); + isActive = false; + }); + } + + /** Set to active when focusing on the input. */ + $peoplePicker.on('focus', '.ms-PeoplePicker-searchField', function(event) { + peoplePickerActive(event); + }); + + /** Set to active when clicking on the input. */ + $peoplePicker.on('click', '.ms-PeoplePicker-searchField', function(event) { + peoplePickerActive(event); + }); + + /** Keep the people picker active when clicking within it. */ + $(this).click(function (event) { + event.stopPropagation(); + }); + + /** Add the selected person to the text field or selected list and close the people picker. */ + $results.on('click', '.ms-PeoplePicker-result', function () { + var $this = $(this); + var selectedName = $this.find(".ms-Persona-primaryText").html(); + var selectedTitle = $this.find(".ms-Persona-secondaryText").html(); + var selectedInitials = (function() { + var name = selectedName.split(' '); + var nameInitials = ''; + + for (var i = 0; i < name.length; i++) { + nameInitials += name[i].charAt(0); + } + + return nameInitials.substring(0,2); + })(); + var selectedClasses = $this.find('.ms-Persona-initials').attr('class'); + var selectedImage = (function() { + if ($this.find('.ms-Persona-image').length) { + var selectedImageSrc = $this.find('.ms-Persona-image').attr('src'); + return 'Persona image'; + } else { + return ''; + } + })(); + + /** Token html */ + var personaHTML = '
            ' + + '
            ' + + '
            ' + + '
            ' + selectedInitials + '
            ' + + selectedImage + + '
            ' + + '
            ' + + '
            ' + + '
            ' + selectedName + '
            ' + + '
            ' + + '
            ' + + '' + + '
            '; + /** List item html */ + var personaListItem = '
          • ' + + '
            ' + + '
            ' + + '
            ' + selectedInitials + '
            ' + + selectedImage + + '
            ' + + '
            ' + + '
            ' + + '
            ' + selectedName + '
            ' + + '
            ' + selectedTitle + '
            ' + + '
            ' + + '
            ' + + '' + + '
            • '; + /** Tokenize selected persona if not Facepile or memberslist variants */ + if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile') && !$peoplePicker.hasClass('ms-PeoplePicker--membersList') ) { + $searchField.before(personaHTML); + $peoplePicker.removeClass("is-active"); + resizeSearchField($peoplePicker); + } + /** Add selected persona to a list if Facepile or memberslist variants */ + else { + if (!$selected.hasClass('is-active')) { + $selected.addClass('is-active'); + } + /** Prepend persona list item html to selected people list */ + $selectedPeople.prepend(personaListItem); + /** Close the picker */ + $peoplePicker.removeClass("is-active"); + /** Get the total amount of selected personas and display that number */ + var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length; + $selectedCount.html(count); + /** Return picker back to default state: + - Show only the first five results in the people list for when the picker is reopened + - Make searchMore inactive + - Clear any search field text + */ + $peopleList.children().show(); + $peopleList.children(":gt(4)").hide(); + + $('.ms-PeoplePicker-searchMore').removeClass('is-active'); + $searchField.val(""); + } + }); + + /** Remove the persona when clicking the personaRemove button. */ + $peoplePicker.on('click', '.ms-PeoplePicker-personaRemove', function() { + $(this).parents('.ms-PeoplePicker-persona').remove(); + + /** Make the search field 100% width if all personas have been removed */ + if ( $('.ms-PeoplePicker-persona').length === 0 ) { + $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth('100%'); + } else { + resizeSearchField($peoplePicker); + } + }); + + /** Trigger additional searching when clicking the search more area. */ + $results.on('click', '.js-searchMore', function() { + var $searchMore = $(this); + var primaryLabel = $searchMore.find(".ms-PeoplePicker-searchMorePrimary"); + var originalPrimaryLabelText = primaryLabel.html(); + var searchFieldText = $searchField.val(); + + /** Change to searching state. */ + $searchMore.addClass("is-searching"); + primaryLabel.html("Searching for " + searchFieldText); + + /** Attach Spinner */ + if (!spinner) { + spinner = new fabric.Spinner($searchMore.get(0)); + } else { + spinner.start(); + } + + /** Show all results in Facepile variant */ + if($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) { + setTimeout(function() {$peopleList.children().show();}, 1500); + } + + /** Return the original state. */ + setTimeout(function() { + $searchMore.removeClass("is-searching"); + primaryLabel.html(originalPrimaryLabelText); + spinner.stop(); + }, 1500); + }); + + /** Remove a result using the action icon. */ + $results.on('click', '.js-resultRemove', function(event) { + event.stopPropagation(); + $(this).parent(".ms-PeoplePicker-result").remove(); + }); + + /** Expand a result if more details are available. */ + $results.on('click', '.js-resultExpand', function(event) { + event.stopPropagation(); + $(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded"); + }); + + /** Remove a selected person using the action icon. */ + $selectedPeople.on('click', '.js-selectedRemove', function(event) { + event.stopPropagation(); + $(this).parent(".ms-PeoplePicker-selectedPerson").remove(); + var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length; + $selectedCount.html(count); + if ($peoplePicker.find('.ms-PeoplePicker-selectedPerson').length === 0) { + $selected.removeClass('is-active'); + } + }); + + var filterResults = function(results, currentSuggestion, currentValueExists) { + return results.find('.ms-Persona-primaryText').filter(function() { + if (currentValueExists) { + return $(this).text().toLowerCase() === currentSuggestion; + } else { + return $(this).text().toLowerCase() !== currentSuggestion; + } + }).parents('.ms-PeoplePicker-peopleListItem'); + }; + + /** Search people picker items */ + $peoplePicker.on('keyup', '.ms-PeoplePicker-searchField', function(evt) { + var suggested = []; + var newSuggestions = []; + var $pickerResult = $results.find('.ms-Persona-primaryText'); + + $peoplePicker.addClass('is-searching'); + + /** Hide members */ + $selected.hide(); + + /** Show 5 results */ + $peopleList.children(":lt(5)").show(); + + /** Show searchMore button */ + $('.ms-PeoplePicker-searchMore').addClass('is-active'); + + /** Get array of suggested people */ + $pickerResult.each(function() { suggested.push($(this).text()); }); + + /** Iterate over array to find matches and show matching items */ + for (var i = 0; i < suggested.length; i++) { + var currentPersona = suggested[i].toLowerCase(); + var currentValue = evt.target.value.toLowerCase(); + var currentSuggestion; + + if (currentPersona.indexOf(currentValue) > -1) { + currentSuggestion = suggested[i].toLowerCase(); + + newSuggestions.push(suggested[i]); + + filterResults($results, currentSuggestion, true).show(); + } else { + filterResults($results, currentSuggestion, false).hide(); + } + } + + /** Show members and hide searchmore when field is empty */ + if ($(this).val() === "") { + $peoplePicker.removeClass('is-searching'); + $selected.show(); + $('.ms-PeoplePicker-searchMore').removeClass('is-active'); + $selectedPeople.addClass('ms-u-slideDownIn20'); + setTimeout(function() { $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000); + $peopleList.children(":gt(4)").hide(); + } + }); + + /** Show persona card when clicking a persona in the members list */ + $selectedPeople.on('click', '.ms-Persona', function() { + var selectedName = $(this).find(".ms-Persona-primaryText").html(); + var selectedTitle = $(this).find(".ms-Persona-secondaryText").html(); + var selectedInitials = (function() { + var name = selectedName.split(' '); + var nameInitials = ''; + + for (var i = 0; i < name.length; i++) { + nameInitials += name[i].charAt(0); + } + + return nameInitials.substring(0,2); + })(); + var selectedClasses = $(this).find('.ms-Persona-initials').attr('class'); + var selectedImage = $(this).find('.ms-Persona-image').attr('src'); + var $card = $('.ms-PersonaCard'); + var $cardName = $card.find('.ms-Persona-primaryText'); + var $cardTitle = $card.find('.ms-Persona-secondaryText'); + var $cardInitials = $card.find('.ms-Persona-initials'); + var $cardImage = $card.find('.ms-Persona-image'); + + /** Close any open persona cards */ + $personaCard.removeClass('is-active'); + + /** Add data to persona card */ + $cardName.text(selectedName); + $cardTitle.text(selectedTitle); + $cardInitials.text(selectedInitials); + $cardInitials.removeClass(); + $cardInitials.addClass(selectedClasses); + $cardImage.attr('src', selectedImage); + + /** Show persona card */ + setTimeout(function() { + $personaCard.addClass('is-active'); + setTimeout(function(){$personaCard.css({'animation-name': 'none'});}, 300); + }, 100); + + /** Align persona card on md and above screens */ + if ($(window).width() > 480) { + var itemPositionTop = $(this).offset().top; + var correctedPositionTop = itemPositionTop + 10; + + $personaCard.css({'top': correctedPositionTop, 'left': 0}); + } else { + $personaCard.css({'top': 'auto'}); + } + }); + + /** Dismiss persona card when clicking on the document */ + $(document).on('click', function(e) { + var $memberBtn = $('.ms-PeoplePicker-selectedPerson').find('.ms-Persona'); + + if (!$memberBtn.is(e.target) && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) { + $personaCard.removeClass('is-active'); + setTimeout(function(){$personaCard.removeAttr('style');}, 300); + } else { + $personaCard.addClass('is-active'); + } + }); + }); + }; + + /** Resize the search field to match the search box */ + function resizeSearchField($peoplePicker) { + var $searchBox = $peoplePicker.find('.ms-PeoplePicker-searchBox'); + + // Where is the right edge of the search box? + var searchBoxLeftEdge = $searchBox.position().left; + var searchBoxWidth = $searchBox.outerWidth(); + var searchBoxRightEdge = searchBoxLeftEdge + searchBoxWidth; + + // Where is the right edge of the last persona component? + var $lastPersona = $searchBox.find('.ms-PeoplePicker-persona:last'); + var lastPersonaLeftEdge = $lastPersona.offset().left; + var lastPersonaWidth = $lastPersona.outerWidth(); + var lastPersonaRightEdge = lastPersonaLeftEdge + lastPersonaWidth; + + // Adjust the width of the field to fit the remaining space. + var newFieldWidth = searchBoxRightEdge - lastPersonaRightEdge - 7; + + // Don't let the field get too tiny. + if (newFieldWidth < 100) { + newFieldWidth = "100%"; + } + + // Set the width of the search field + $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth(newFieldWidth); + } +})(jQuery); diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png b/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png new file mode 100644 index 0000000000000000000000000000000000000000..147416f7713c45d5434a9d5b8c5570958e3e9b18 GIT binary patch literal 1601 zcmaJ?c~BE)91VyNV{MfNFFe+zQ$bBO8weqRh#}!fB@se|w5T;C3ki_jb+aKM9)JZw zv|4RPr)5+u+A0clC=go_VbCg`7@d~d60pM|)rvY)L#@~i0``y6o!R}4dGGzMH?!Ll z6tUA7a~U)mZJI1js-#xH{nEXuugPW`q?S2kw3RR#)u3E76=3ohYNAJEDFIg<)Wm<%0f*6V+vBlq$LbE zX~0mxt*A-E%%ljUGJREo5g(UDO`~n18U|T4I0Umf?vloUa{2#5jmB}biBux5^Zid@ zlPVWSASGhL%!HO2TzY^z6fTqyh=#-n6^3PxbumGYk(f!3;ebQ}1g02J9cD2Fjlkt{ zp$s*V8dQtOq#}?KU>giNVF)iIR3Z%ti&dG$J^KY8`3iW zcJ>;%KR3v8$atT|*r!O2v+UWqEfqH(g_`_IT#bh?yF*)ENK^YU)=MJtHU6pturC8cQ7fUKmV|%ro1ZOG3ZEHbn5!u{Mh87ql5HR`!36gvyL{h z*#oW=VT@Br|J6!*!;>zi zKK+7Ea^V)}Vo~+#lIq6tx%m9B3q58JsN-d)?ejle-ne(5XLx>AiKAaUdvRh{?W4{; z1#+o6vdB|qemA-wyi(a*XKwYhBz^Nq6f}QIB*V6EZA5Y33xcouD=cNH@9?}Y_RXVz z?c^@4?OlA^8D5siWEZdnIUC@BhuikfIo#IgT{|?LzsIlZKo4`xmD!5WCvP5A`KRyf z`>9F3!?SkR%1zzLhvMV0t1C%`w4;;utWXQRQ+2!j%*UwGx39VqpyojZMgsd literal 0 HcmV?d00001 diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.css b/dist/samples/Components/PeoplePicker/PeoplePicker.css new file mode 100644 index 000000000..54eac8c9f --- /dev/null +++ b/dist/samples/Components/PeoplePicker/PeoplePicker.css @@ -0,0 +1,1775 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:before, +.ms-PeoplePicker-searchBox:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: left; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.min.css b/dist/samples/Components/PeoplePicker/PeoplePicker.min.css new file mode 100644 index 000000000..2dd7b1b00 --- /dev/null +++ b/dist/samples/Components/PeoplePicker/PeoplePicker.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:1}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:2}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative} \ No newline at end of file diff --git a/dist/samples/Components/PeoplePicker/index.html b/dist/samples/Components/PeoplePicker/index.html new file mode 100644 index 000000000..6c9050bbd --- /dev/null +++ b/dist/samples/Components/PeoplePicker/index.html @@ -0,0 +1,1077 @@ + + + + + + + + Component PeoplePicker + + + + + + + + + + + + + + + + +

            PeoplePicker

            +
            +
            + +
            +
            + +
            +
            +
            +
            +
            Top results
            +
              +
            • +
              +
              +
              + + +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + + +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              + +
              +
              • +
            +
            +
            +
            Other results
            +
              +
            • +
              +
              +
              + + +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + + +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + + +
              +
              +
              +
              Grant Steel
              +
              Technical Support
              +
              +
              + +
              +
              +
                +
              • +
                +
                +
                + + +
                +
                +
                +
                Jessica Fischer
                +
                Public Relations
                +
                +
                + +
                +
                • +
              • +
                +
                +
                + + +
                +
                +
                +
                Grant Steel (bask)
                +
                Public Relations
                +
                +
                + +
                +
                • +
              +
              +
              • +
            • +
              +
              +
              + + +
              +
              +
              +
              Harvey Wallin
              +
              Delivery
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + + +
              +
              +
              +
              Marcus Lauer
              +
              Marketing
              +
              +
              + +
              +
              • +
            +
            +
            +
            + +
            +
            +
            +
            +
            + +
            +
            + +
            +
            +
            +
            +
            Top results
            +
              +
            • +
              +
              +
              + +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              + +
              +
              • +
            +
            +
            +
            Other results
            +
              +
            • +
              +
              +
              + +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Grant Steel
              +
              Technical Support
              +
              +
              + +
              +
              +
                +
              • +
                +
                +
                + +
                +
                +
                +
                Jessica Fischer
                +
                Public Relations
                +
                +
                + +
                +
                • +
              • +
                +
                +
                + +
                +
                +
                +
                Grant Steel (bask)
                +
                Public Relations
                +
                +
                + +
                +
                • +
              +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Harvey Wallin
              +
              Delivery
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Marcus Lauer
              +
              Marketing
              +
              +
              + +
              +
              • +
            +
            +
            +
            +
            +
            + +
            +
            Showing top 5 results
            +
            Search Contacts & Directory
            +
            +
            +
            +
            +
            +
            + +
            +
            + +
            +
            +
            +
            +
            Top results
            +
              +
            • +
              +
              +
              + +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              + +
              +
              • +
            +
            +
            +
            Other results
            +
              +
            • +
              +
              +
              + +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Grant Steel
              +
              Technical Support
              +
              +
              + +
              +
              +
                +
              • +
                +
                +
                + +
                +
                +
                +
                Jessica Fischer
                +
                Public Relations
                +
                +
                + +
                +
                • +
              • +
                +
                +
                + +
                +
                +
                +
                Grant Steel (bask)
                +
                Public Relations
                +
                +
                + +
                +
                • +
              +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Harvey Wallin
              +
              Delivery
              +
              +
              + +
              +
              • +
            • +
              +
              +
              + +
              +
              +
              +
              Marcus Lauer
              +
              Marketing
              +
              +
              + +
              +
              • +
            +
            +
            +
            +
            +
            + +
            +
            We are having trouble connecting to the server.
            Please try again in a few minutes.
            +
            +
            +
            +
            +
            +
            + +
            + +
            + +
            +
            +
            +
            +
              +
            • +
              +
              +
              +
              RM
              + +
              +
              +
              +
              Russel Miller
              +
              Sales
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              DF
              + +
              +
              +
              +
              Douglas Fielder
              +
              Public Relations
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              JF
              + +
              +
              +
              +
              Jessica Fischer
              +
              Public Relations
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              GS
              + +
              +
              +
              +
              Grant Steel (bask)
              +
              Public Relations
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              HW
              + +
              +
              +
              +
              Harvey Wallin
              +
              Delivery
              +
              +
              +
              +
              • +
            • +
              +
              +
              +
              ML
              + +
              +
              +
              +
              Marcus Lauer
              +
              Marketing
              +
              +
              +
              +
              • +
            +
            +
            +
            +
            +
            + newly added members +
            +
              +
              +
              +
              + +
              +
              + +
              + +
              +
              + Suggested contacts +
              +
                +
              • +
                +
                +
                +
                RM
                +
                +
                +
                +
                Russel Miller
                +
                Sales
                +
                +
                +
                +
                • +
              • +
                +
                +
                +
                DF
                +
                +
                +
                +
                Douglas Fielder
                +
                Public Relations
                +
                +
                +
                +
                • +
              • +
                +
                +
                +
                JF
                +
                +
                +
                +
                Jessica Fischer
                +
                Public Relations
                +
                +
                +
                +
                • +
              • +
                +
                +
                +
                MG
                +
                +
                +
                +
                Marcel Groce
                +
                Marketing
                +
                +
                +
                +
                • +
              • +
                +
                +
                +
                GS
                +
                +
                +
                +
                Grant Steel
                +
                Public Relations
                +
                +
                +
                +
                • +
              • +
                +
                +
                +
                HW
                +
                +
                +
                +
                Harvey Wallin
                +
                Delivery
                +
                +
                +
                +
                • +
              • +
                +
                +
                +
                ML
                +
                +
                +
                +
                Marcus Lauer
                +
                Marketing
                +
                +
                +
                +
                • +
              +
              +
              +
              + +
              +
              Search Contacts & Directory
              +
              +
              +
              + +
              +
              + 3 members +
              +
                +
              • +
                +
                +
                AL
                + Persona image +
                +
                +
                +
                Alton Lafferty
                +
                Accountant
                +
                +
                + +
                • +
              • +
                +
                +
                DF
                +
                +
                +
                +
                Douglas Fielder
                +
                Public Relations
                +
                +
                + +
                • +
              • +
                +
                +
                ML
                +
                +
                +
                +
                Marcus Lauer
                +
                Technical Support
                +
                +
                + +
                • +
              +
              +
              + + +
              +
              +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Interior Designer, Contoso
              +
              Office: 7/1234
              +
              Available - Video capable
              +
              +
              +
              +
                +
                • +
                • +
                • +
                • +
              • View profile
                • +
                • +
              +
              +
                +
              • +
                Lync: Start Lync call
                +
                • +
              • +
                Personal: 555.206.2443
                +
                Work: 555.929.8240
                +
                • +
              • +
                Skype: Start Skype call
                +
                • +
              • +
                Personal: alton.lafferty@outlook.com
                +
                Work: altonlafferty@contoso.com
                +
                • + +
              • +
                +
                +
                  +
                • + +
                  • +
                • + +
                  • +
                +
                +
                +
                Manager
                +
                  +
                • + +
                  • +
                +
                +
                +
                Staff
                +
                  +
                • + +
                  • +
                • + +
                  • +
                • + +
                  • +
                • + +
                  • +
                +
                +
                +
                • + +
              +
              +
              + +
              +
              +
              + + \ No newline at end of file diff --git a/dist/samples/Components/Persona/Persona.Person.jpg b/dist/samples/Components/Persona/Persona.Person.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4d06e964d9edc210ad7646847e976009ebe99cc2 GIT binary patch literal 5650 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 literal 0 HcmV?d00001 diff --git a/dist/samples/Components/Persona/Persona.Person2.png b/dist/samples/Components/Persona/Persona.Person2.png new file mode 100644 index 0000000000000000000000000000000000000000..4ba5f7b0d6327863b6fdaa202eacb5af8ee240c9 GIT binary patch literal 15280 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⁣cGfU9~;J~5A*B%w$ib%n^BT(EVv3rE~gwkBh6pc9~jqkqSPCz}}R z*7ir4{~(sNHFjT+lM|wXV|u@#;#fVTFxhko-Hnn;bw@CPG@=1X!ET5phmYYdP)0gl zZGX?43#@{;j%6%qw*)pVQabfFG7#2uE;*1fXbtHni|m27PC8E2q_W}=r(+!P4p^J| z8QzHUQJ7#M*gQ}Wt)qsknEE>?=vyL5d{LE4yn4EoAX&fw?3pm$x6!&yP5>#mjE50G znP470hN=a*eK`j@Ph;T}u>rEsA9UP1i&;`B3oozGHiuT0Ig4?ES+^*uk1~QWqGFz; z@(vPt`K2AY@vA%WHsZ&7e0 z@Fx%5IH6?HeBPbWxs$;f( z2FEzGKK!X%^9#1;S>TG1t8IYBw9}VHDMVYkKM@Fk;sCd6J>LZLRrhF&G0FyjbI}JC z2xJblxvDT--I(eg%Ma!|S`2~Jmz^3Dx{NhGvQOpDR_aciXs9Tc5q*>_Ham#XSA8%@ zNkAIduCfqV*~FQnpP`{XQ>SICiLn>MEEYyrBw};dQp3unatKvvl%F71xHn!k$-D|B z&sqR}uov+DtE~-|L(y~)gKe;mXQE^#99MxHsaHTC2jUzmd_1@NYKQF%q)<4f( zcj<{EscNYzG#ObOvg$H70x#XqwK|@sel8DNy&u<~11P{4O%2-YSq?fvSKa2yHh zryQl;w0jm4)Jag_%8kX=%y!C5HkA(3n{6M2AllQ)KUGD4T5(aEmeV(EI%#I5+&-c9 zrUO=EGI(ptf2))&{LleUE2i8J`^LB_E+mA7b3*Djf5n96z&xMY`l|NQw(IhHUtfk4 zy1D7yxI+}qbmW)PQUC9x^;Ja+@3yHzt;1r>uu(jbiN4HYh7`_ zx)^Q;#Evy!1;Y*AgGGid6eWVv6UW{TmmeiNQP}BqHhl)!eLwxwH>>!hg0x`b)kx<5 z+gHJaNx`VOlkfTH_B$GzPy>a;k{?x0qRmif9YFP$VSfl%jlF9+n0oPthqabY+jAux zx%N5A6VId4WIvTJ6-U>6Z>}9+aK1MD+L+>By3;JLCPTh&pH%x@+n(>|uV-pgRpZ4eA zZjolCm8FThC}HLDM)OO8k<;7d*so;|=PJ(2>8x#Ns>MiUppnX(;m`Qn-?!}YMQ#LL zJ|k_0m2>l`Mr=+8!KQDM5q@Vcx6R3DWc_{H_PxFD)63I+m~*8@2R*mg(o^K@iN1b~ zTL9_pMa>FnU3(~*)ac_@2Hnpq9QLm>^`4@gUSIPh`dkitdGg-p{LW=4p>#QNca6mEp)b-@AN&rM}I2S4-Y^`LH{P~3R6dH$`G8D5|K4ZY50uj~EJRK7O$o}XEy z#R0Xc!<=4clX84r4eVN0<(HSb(9eYThR1J!!cHFitDQH4dkB6{JC?=UWjP4??KG6Y zAT?g^lj0qY?#<6?b5%afiz_G1Gt@pUc-xo`3IxEGo+X{=M0Vfu04-;lIhC(vfy8DH zbG@dDphL2(+uF9oO(7T`=ee3AF5;I?+q2!~`g&~dU1u)0$MIsdFW0n(p^-XgcH)Gf z`1aPi_pO)R)_U&8W$!aVkHh^kxB9mA4I|dG-#0>!_v8HIwePq1Ijy6|_}Xt5isJCj z?wS*bTazlM*P);0@@5X+b%2HNmaPt

              baB6ag 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 SH~l|%XeCAEL~4W#0{;( + + + + + + + Component Persona + + + + + + + + + + + + + + + +

              Persona

              +
              +
              + +
              +
              +
              +
              Alton Lafferty
              +
              +
              + +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              + +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              In a meeting
              +
              +
              + +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              In a meeting
              +
              Available at 4:00pm
              +
              +
              +
              +
              + +
              +
              +
              +
              Alton Lafferty
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              In a meeting
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              In a meeting
              +
              Available at 4:00pm
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Accountant
              +
              +
              +
              +
              + + \ No newline at end of file diff --git a/dist/samples/Components/PersonaCard/Jquery.PersonaCard.js b/dist/samples/Components/PersonaCard/Jquery.PersonaCard.js new file mode 100644 index 000000000..588a8dde1 --- /dev/null +++ b/dist/samples/Components/PersonaCard/Jquery.PersonaCard.js @@ -0,0 +1,57 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Persona Card Plugin + * + * Adds basic demonstration functionality to .ms-PersonaCard components. + * + * @param {jQuery Object} One or more .ms-PersonaCard components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.PersonaCard = function () { + + /** Go through each file picker we've been given. */ + return this.each(function () { + + var $personaCard = $(this); + + /** When selecting an action, show its details. */ + $personaCard.on('click', '.ms-PersonaCard-action', function() { + + /** Select the correct tab. */ + $personaCard.find('.ms-PersonaCard-action').removeClass('is-active'); + $(this).addClass('is-active'); + + /** Function for switching selected item into view by adding a class to ul. */ + var updateForItem = function(wrapper, item) { + var previousItem = wrapper.className + ""; + var detail = item.charAt(0).toUpperCase() + item.slice(1); + var nextItem = "ms-PersonaCard-detail" + detail; + if (previousItem !== nextItem){ + wrapper.classList.remove(previousItem); + wrapper.classList.add(nextItem); + } + }; + + /** Get id of selected item */ + var el = $(this).attr('id'); + /** Add detail class to ul to switch it into view. */ + updateForItem($(this).parent().next().find('#detailList')[0], el); + + /** Display the corresponding details. */ + var requestedAction = $(this).attr('id'); + $personaCard.find('.ms-PersonaCard-actionDetails').removeClass('is-active'); + $personaCard.find('#' + requestedAction + '.ms-PersonaCard-actionDetails').addClass('is-active'); + + }); + + /** Toggle more details. */ + $personaCard.on('click', '.ms-PersonaCard-detailExpander', function() { + $(this).parent('.ms-PersonaCard-actionDetails').toggleClass('is-collapsed'); + }); + + }); + + }; +})(jQuery); diff --git a/dist/samples/Components/PersonaCard/PersonaCard.css b/dist/samples/Components/PersonaCard/PersonaCard.css new file mode 100644 index 000000000..6dca4a09d --- /dev/null +++ b/dist/samples/Components/PersonaCard/PersonaCard.css @@ -0,0 +1,859 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} diff --git a/dist/samples/Components/PersonaCard/PersonaCard.min.css b/dist/samples/Components/PersonaCard/PersonaCard.min.css new file mode 100644 index 000000000..2257938f8 --- /dev/null +++ b/dist/samples/Components/PersonaCard/PersonaCard.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0;outline:transparent}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}} \ No newline at end of file diff --git a/dist/samples/Components/PersonaCard/index.html b/dist/samples/Components/PersonaCard/index.html new file mode 100644 index 000000000..c6aec4e88 --- /dev/null +++ b/dist/samples/Components/PersonaCard/index.html @@ -0,0 +1,444 @@ + + + + + + + + Component PersonaCard + + + + + + + + + + + + + + + + +

              PersonaCard

              +
              +
              + +
              +
              +
              +
              +
              AL
              + +
              +
              +
              +
              Alton Lafferty
              +
              Interior Designer, Contoso
              +
              Office: 7/1234
              +
              Available - Video capable
              +
              +
              +
              +
                +
                • +
                • +
                • +
                • +
              • View profile
                • +
                • +
              +
              +
                +
              • +
                Lync: Start Lync call
                +
                • +
              • +
                Personal: 555.206.2443
                +
                Work: 555.929.8240
                +
                • +
              • +
                Skype: Start Skype call
                +
                • +
              • +
                Personal: alton.lafferty@outlook.com
                +
                Work: altonlafferty@contoso.com
                +
                • + +
              • +
                +
                +
                  +
                • + +
                  • +
                • + +
                  • +
                +
                +
                +
                Manager
                +
                  +
                • + +
                  • +
                +
                +
                +
                Staff
                +
                  +
                • + +
                  • +
                • + +
                  • +
                • + +
                  • +
                • + +
                  • +
                +
                +
                +
                • + +
              +
              +
              +
              +
              +
              +
              +
              + + +
              +
              +
              +
              Alton Lafferty
              +
              Interior Designer, Contoso
              +
              Office: 7/1234
              +
              Available - Video capable
              +
              +
              +
              +
                +
                • +
                • +
                • +
                • +
              • View profile
                • +
                • +
              +
              +
                +
              • +
                Lync: Start Lync call
                +
                • +
              • +
                Personal: 555.206.2443
                +
                Work: 555.929.8240
                +
                • +
              • +
                Skype: Start Skype call
                +
                • +
              • +
                Personal: alton.lafferty@outlook.com
                +
                Work: altonlafferty@contoso.com
                +
                • + +
              • +
                +
                +
                  +
                • + +
                  • +
                • + +
                  • +
                +
                +
                +
                Manager
                +
                  +
                • + +
                  • +
                +
                +
                +
                Staff
                +
                  +
                • + +
                  • +
                • + +
                  • +
                • + +
                  • +
                • + +
                  • +
                +
                +
                +
                • + +
              +
              +
              +
              + + \ No newline at end of file diff --git a/dist/samples/Components/Pivot/Pivot.css b/dist/samples/Components/Pivot/Pivot.css new file mode 100644 index 000000000..69f2f5ea6 --- /dev/null +++ b/dist/samples/Components/Pivot/Pivot.css @@ -0,0 +1,242 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + position: relative; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 40px; + margin-right: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus, +.ms-Pivot-link:active { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff !important; + background-color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7 !important; +} + +@media (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + } +} diff --git a/dist/samples/Components/Pivot/Pivot.min.css b/dist/samples/Components/Pivot/Pivot.min.css new file mode 100644 index 000000000..7bef270b7 --- /dev/null +++ b/dist/samples/Components/Pivot/Pivot.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}} \ No newline at end of file diff --git a/dist/samples/Components/Pivot/index.html b/dist/samples/Components/Pivot/index.html new file mode 100644 index 000000000..6dd673bd5 --- /dev/null +++ b/dist/samples/Components/Pivot/index.html @@ -0,0 +1,149 @@ + + + + + + + + Component Pivot + + + + + + + + + + + + + + + + +

              Pivot

              +
              +
              + +
                +
              • My files
                • +
              • Recent
                • +
              • Shared with me
                • +
              • + +
                • +
              +
              +
              + +
                +
              • My files
                • +
              • Recent
                • +
              • Shared with me
                • +
              • + +
                • +
              +
              +
              + +
                +
              • My files
                • +
              • Recent
                • +
              • Shared with me
                • +
              • + +
                • +
              +
              +
              + +
                +
              • My files
                • +
              • Recent
                • +
              • Shared with me
                • +
              • + +
                • +
              +
              +
              + + \ No newline at end of file diff --git a/dist/samples/Components/Pivot/jquery.Pivot.js b/dist/samples/Components/Pivot/jquery.Pivot.js new file mode 100644 index 000000000..e5e44bb06 --- /dev/null +++ b/dist/samples/Components/Pivot/jquery.Pivot.js @@ -0,0 +1,37 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Pivot Plugin + * + * Adds basic demonstration functionality to .ms-Pivot components. + * + * @param {jQuery Object} One or more .ms-Pivot components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.Pivot = function () { + + /** Go through each pivot we've been given. */ + return this.each(function () { + + var $pivotContainer = $(this); + + /** When clicking/tapping a link, select it. */ + $pivotContainer.on('click', '.ms-Pivot-link', function(event) { + event.preventDefault(); + /** Check if current selection has elipses child element **/ + var $elipsisCheck = $(this).find('.ms-Pivot-ellipsis'); + + /** Only execute when no elipses element can be found **/ + if($elipsisCheck.length === 0){ + + $(this).siblings('.ms-Pivot-link').removeClass('is-selected'); + $(this).addClass('is-selected'); + } + + }); + + }); + + }; +})(jQuery); diff --git a/dist/samples/Components/ProgressIndicator/ProgressIndicator.css b/dist/samples/Components/ProgressIndicator/ProgressIndicator.css new file mode 100644 index 000000000..b42295cf3 --- /dev/null +++ b/dist/samples/Components/ProgressIndicator/ProgressIndicator.css @@ -0,0 +1,63 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-ProgressIndicator-itemName { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} diff --git a/dist/samples/Components/ProgressIndicator/ProgressIndicator.js b/dist/samples/Components/ProgressIndicator/ProgressIndicator.js new file mode 100644 index 000000000..d70504b12 --- /dev/null +++ b/dist/samples/Components/ProgressIndicator/ProgressIndicator.js @@ -0,0 +1,103 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * ProgressIndicator component + * + * A component for outputting determinate progress + * + */ + +/** + * @namespace fabric + */ +var fabric = fabric || {}; +/** + * + * @param {HTMLDivElement} container - the target container for an instance of ProgressIndicator + * @constructor + */ +fabric.ProgressIndicator = function(container) { + this.container = container; + this.cacheDOM(); +}; + +fabric.ProgressIndicator.prototype = (function() { + + var _progress; + var _width; + var _itemName; + var _total; + var _itemDescription; + var _progressBar; + + /** + * Sets the progress percentage for a determinate + * operation. Either use this or setProgress + * and setTotal as setProgressPercent assumes + * you've done a percentage calculation before + * injecting it into the function + * @param {number} percent - a floating point number from 0 to 1 + */ + var setProgressPercent = function(percent) { + _progressBar.style.width = Math.round(_width * percent) + "px"; + }; + + /** + * Sets the progress for a determinate operation. + * Use this in combination with setTotal. + * @param {number} progress + */ + var setProgress = function(progress) { + _progress = progress; + var percentage = _progress / _total; + this.setProgressPercent(percentage); + }; + + /** + * Sets the total file size, etc. for a + * determinate operation. Use this in + * combination with setProgress + * @param {number} total + */ + var setTotal = function(total) { + _total = total; + }; + + /** + * Sets the text for the title or label + * of an instance + * @param {string} name + */ + var setName = function(name) { + _itemName.innerHTML = name; + }; + + /** + * Sets the text for a description + * of an instance + * @param {string} name + */ + var setDescription = function(description) { + _itemDescription.innerHTML = description; + }; + + /** + * caches elements and values of the component + * + */ + var cacheDOM = function() { + _itemName = this.container.querySelector('.ms-ProgressIndicator-itemName') || null; //an itemName element is optional + _itemDescription = this.container.querySelector('.ms-ProgressIndicator-itemDescription') || null; //an itemDescription element is optional + _progressBar = this.container.querySelector('.ms-ProgressIndicator-progressBar'); + _width = this.container.querySelector('.ms-ProgressIndicator-itemProgress').offsetWidth; + }; + + return { + setProgressPercent: setProgressPercent, + setName: setName, + setDescription: setDescription, + setProgress: setProgress, + setTotal: setTotal, + cacheDOM: cacheDOM + }; +}()); diff --git a/dist/samples/Components/ProgressIndicator/ProgressIndicator.min.css b/dist/samples/Components/ProgressIndicator/ProgressIndicator.min.css new file mode 100644 index 000000000..2a06031c6 --- /dev/null +++ b/dist/samples/Components/ProgressIndicator/ProgressIndicator.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}} \ No newline at end of file diff --git a/dist/samples/Components/ProgressIndicator/index.html b/dist/samples/Components/ProgressIndicator/index.html new file mode 100644 index 000000000..20c8f3e22 --- /dev/null +++ b/dist/samples/Components/ProgressIndicator/index.html @@ -0,0 +1,116 @@ + + + + + + + + Component ProgressIndicator + + + + + + + + + + + + + + + + +

              ProgressIndicator

              +
              + + +
              +
              Example.jpg
              +
              +
              +
              +
              +
              My Progress Description
              +
              + +
              + + \ No newline at end of file diff --git a/dist/samples/Components/SearchBox/Jquery.SearchBox.js b/dist/samples/Components/SearchBox/Jquery.SearchBox.js new file mode 100644 index 000000000..c95c6029a --- /dev/null +++ b/dist/samples/Components/SearchBox/Jquery.SearchBox.js @@ -0,0 +1,69 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * SearchBox Plugin + * + * Adds basic demonstration functionality to .ms-SearchBox components. + * + * @param {jQuery Object} One or more .ms-SearchBox components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.SearchBox = function () { + + /** Iterate through each text field provided. */ + return this.each(function () { + // Set cancel to false + var cancel = false; + var $searchField = $(this).find('.ms-SearchBox-field'); + + /** SearchBox focus - hide label and show cancel button */ + $searchField.on('focus', function() { + /** Hide the label on focus. */ + $(this).siblings('.ms-SearchBox-label').hide(); + // Show cancel button by adding is-active class + $(this).parent('.ms-SearchBox').addClass('is-active'); + }); + + /** 'hovering' class allows for more fine grained control of hover state */ + $searchField.on('mouseover', function() { + $searchField.addClass('hovering'); + }); + + $searchField.on('mouseout', function() { + $searchField.removeClass('hovering'); + }); + + // If cancel button is selected, change cancel value to true + $(this).find('.ms-SearchBox-closeButton').on('mousedown', function() { + cancel = true; + }); + + /** Show the label again when leaving the field. */ + $(this).find('.ms-SearchBox-field').on('blur', function() { + + // If cancel button is selected remove the text and show the label + if (cancel) { + $(this).val(''); + $searchField.addClass('hovering'); + } + + var $searchBox = $(this).parent('.ms-SearchBox'); + // Prevents inputfield from gaining focus too soon + setTimeout(function() { + // Remove is-active class - hides cancel button + $searchBox.removeClass('is-active'); + }, 10); + + /** Only do this if no text was entered. */ + if ($(this).val().length === 0 ) { + $(this).siblings('.ms-SearchBox-label').show(); + } + + // Reset cancel to false + cancel = false; + }); + }); + + }; +})(jQuery); diff --git a/dist/samples/Components/SearchBox/SearchBox.css b/dist/samples/Components/SearchBox/SearchBox.css new file mode 100644 index 000000000..b352e4399 --- /dev/null +++ b/dist/samples/Components/SearchBox/SearchBox.css @@ -0,0 +1,178 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + margin-bottom: 10px; + display: inline-block; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #600000; + } +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox.is-active .ms-SearchBox-closeButton { + display: block; + outline: transparent 1px solid; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; + background-color: transparent; + z-index: 5; +} + +.ms-SearchBox-field.hovering { + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + height: 32px; + width: 32px; + background-color: #0078d7; + text-align: center; + display: none; + font-size: 17px; + color: #ffffff; + z-index: 10; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} diff --git a/dist/samples/Components/SearchBox/SearchBox.min.css b/dist/samples/Components/SearchBox/SearchBox.min.css new file mode 100644 index 000000000..ed6123f2b --- /dev/null +++ b/dist/samples/Components/SearchBox/SearchBox.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:1}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:2}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676} \ No newline at end of file diff --git a/dist/samples/Components/SearchBox/index.html b/dist/samples/Components/SearchBox/index.html new file mode 100644 index 000000000..fb83bbbc9 --- /dev/null +++ b/dist/samples/Components/SearchBox/index.html @@ -0,0 +1,113 @@ + + + + + + + + Component SearchBox + + + + + + + + + + + + + + + + +

              SearchBox

              +
              + + +
              + + + +
              + +
              + + \ No newline at end of file diff --git a/dist/samples/Components/Spinner/Spinner.css b/dist/samples/Components/Spinner/Spinner.css new file mode 100644 index 000000000..3bbcd4412 --- /dev/null +++ b/dist/samples/Components/Spinner/Spinner.css @@ -0,0 +1,52 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: #0078d7; + left: 28px; + top: 2px; +} diff --git a/dist/samples/Components/Spinner/Spinner.js b/dist/samples/Components/Spinner/Spinner.js new file mode 100644 index 000000000..1c4364d72 --- /dev/null +++ b/dist/samples/Components/Spinner/Spinner.js @@ -0,0 +1,151 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Spinner Component + * + * An animating activity indicator. + * + */ + +/** + * @namespace fabric + */ +var fabric = fabric || {}; + +/** + * @param {HTMLDOMElement} target - The element the Spinner will attach itself to. + */ + +fabric.Spinner = function(target) { + + var _target = target; + var eightSize = 0.2; + var circleObjects = []; + var animationSpeed = 90; + var interval; + var spinner; + var numCircles; + var offsetSize; + var fadeIncrement = 0; + var parentSize = 20; + + /** + * @function start - starts or restarts the animation sequence + * @memberOf fabric.Spinner + */ + function start() { + stop(); + interval = setInterval(function() { + var i = circleObjects.length; + while(i--) { + _fade(circleObjects[i]); + } + }, animationSpeed); + } + + /** + * @function stop - stops the animation sequence + * @memberOf fabric.Spinner + */ + function stop() { + clearInterval(interval); + } + + //private methods + + function _init() { + _setTargetElement(); + _setPropertiesForSize(); + _createCirclesAndArrange(); + _initializeOpacities(); + start(); + } + + function _initializeOpacities() { + var i = 0; + var j = 1; + var opacity; + fadeIncrement = 1 / numCircles; + + for (i; i < numCircles; i++) { + var circleObject = circleObjects[i]; + opacity = (fadeIncrement * j++); + _setOpacity(circleObject.element, opacity); + } + } + + function _fade(circleObject) { + var opacity = _getOpacity(circleObject.element) - fadeIncrement; + + if (opacity <= 0) { + opacity = 1; + } + + _setOpacity(circleObject.element, opacity); + } + + function _getOpacity(element) { + return parseFloat(window.getComputedStyle(element).getPropertyValue("opacity")); + } + + function _setOpacity(element, opacity) { + element.style.opacity = opacity; + } + + function _createCircle() { + var circle = document.createElement('div'); + circle.className = "ms-Spinner-circle"; + circle.style.width = circle.style.height = parentSize * offsetSize + "px"; + return circle; + } + + function _createCirclesAndArrange() { + + var angle = 0; + var offset = parentSize * offsetSize; + var step = (2 * Math.PI) / numCircles; + var i = numCircles; + var circleObject; + var radius = (parentSize - offset) * 0.5; + + while (i--) { + var circle = _createCircle(); + var x = Math.round(parentSize * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5; + var y = Math.round(parentSize * 0.5 + radius * Math.sin(angle) - circle.clientHeight * 0.5) - offset * 0.5; + spinner.appendChild(circle); + circle.style.left = x + 'px'; + circle.style.top = y + 'px'; + angle += step; + circleObject = { element:circle, j:i }; + circleObjects.push(circleObject); + } + } + + function _setPropertiesForSize() { + if (spinner.className.indexOf("large") > -1) { + parentSize = 28; + eightSize = 0.179; + } + + offsetSize = eightSize; + numCircles = 8; + } + + function _setTargetElement() { + //for backwards compatibility + if (_target.className.indexOf("ms-Spinner") === -1) { + spinner = document.createElement("div"); + spinner.className = "ms-Spinner"; + _target.appendChild(spinner); + } else { + spinner = _target; + } + } + + _init(); + + return { + start:start, + stop:stop + }; +}; diff --git a/dist/samples/Components/Spinner/Spinner.min.css b/dist/samples/Components/Spinner/Spinner.min.css new file mode 100644 index 000000000..bf6e346ce --- /dev/null +++ b/dist/samples/Components/Spinner/Spinner.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px} \ No newline at end of file diff --git a/dist/samples/Components/Spinner/index.html b/dist/samples/Components/Spinner/index.html new file mode 100644 index 000000000..0247fcb79 --- /dev/null +++ b/dist/samples/Components/Spinner/index.html @@ -0,0 +1,125 @@ + + + + + + + + Component Spinner + + + + + + + + + + + + + + + + +

              Spinner

              +
              +
              + +
              +
              +
              + +
              +
              +
              + +
              +
              Loading...
              +
              +
              +
              + +
              +
              Loading...
              +
              +
              +
              + + \ No newline at end of file diff --git a/dist/samples/Components/Table/Table.css b/dist/samples/Components/Table/Table.css new file mode 100644 index 000000000..8c86e2e52 --- /dev/null +++ b/dist/samples/Components/Table/Table.css @@ -0,0 +1,140 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table tr:hover, +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:before, +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:after, +.ms-Table-row.is-selected .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table thead .ms-Table-rowCheck:after, +.ms-Table-head .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} diff --git a/dist/samples/Components/Table/Table.min.css b/dist/samples/Components/Table/Table.min.css new file mode 100644 index 000000000..421affa73 --- /dev/null +++ b/dist/samples/Components/Table/Table.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}} \ No newline at end of file diff --git a/dist/samples/Components/Table/index.html b/dist/samples/Components/Table/index.html new file mode 100644 index 000000000..7412369bb --- /dev/null +++ b/dist/samples/Components/Table/index.html @@ -0,0 +1,191 @@ + + + + + + + + Component Table + + + + + + + + + + + + + + + +

              Table

              +
              +
              + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
              File nameLocationModifiedType
              Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.Candy canes bear claw marzipan icing wafer.Chocolate chocolate bar donut.Candy canes cupcake macaroon toffee.
              File nameLocationModifiedType
              File nameLocationModifiedType
              File nameLocationModifiedType
              +
              + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
              File nameLocationModifiedType
              Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.Candy canes bear claw marzipan icing wafer.Chocolate chocolate bar donut.Candy canes cupcake macaroon toffee.
              File nameLocationModifiedType
              File nameLocationModifiedType
              File nameLocationModifiedType
              +
              +
              + + \ No newline at end of file diff --git a/dist/samples/Components/TextField/Jquery.TextField.js b/dist/samples/Components/TextField/Jquery.TextField.js new file mode 100644 index 000000000..226e093d5 --- /dev/null +++ b/dist/samples/Components/TextField/Jquery.TextField.js @@ -0,0 +1,56 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +/** + * Text Field Plugin + * + * Adds basic demonstration functionality to .ms-TextField components. + * + * @param {jQuery Object} One or more .ms-TextField components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.TextField = function () { + + /** Iterate through each text field provided. */ + return this.each(function () { + + /** Does it have a placeholder? */ + if ($(this).hasClass("ms-TextField--placeholder")) { + + /** Hide the label on click. */ + $(this).on('click', function () { + $(this).find('.ms-Label').hide(); + }); + + /** Hide the label on focus. */ + $(this).find('.ms-TextField-field').on('focus', function () { + $(this).siblings('.ms-Label').hide(); + }); + + /** Show the label again when leaving the field. */ + $(this).find('.ms-TextField-field').on('blur', function () { + + /** Only do this if no text was entered. */ + if ($(this).val().length === 0) { + $(this).siblings('.ms-Label').show(); + } + }); + } + + /** Underlined - adding/removing a focus class */ + if ($(this).hasClass('ms-TextField--underlined')) { + + /** Add is-active class - changes border color to theme primary */ + $(this).find('.ms-TextField-field').on('focus', function() { + $(this).parent('.ms-TextField--underlined').addClass('is-active'); + }); + + /** Remove is-active on blur of textfield */ + $(this).find('.ms-TextField-field').on('blur', function() { + $(this).parent('.ms-TextField--underlined').removeClass('is-active'); + }); + } + + }); + }; +})(jQuery); diff --git a/dist/samples/Components/TextField/TextField.css b/dist/samples/Components/TextField/TextField.css new file mode 100644 index 000000000..a84d5d106 --- /dev/null +++ b/dist/samples/Components/TextField/TextField.css @@ -0,0 +1,344 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} diff --git a/dist/samples/Components/TextField/TextField.min.css b/dist/samples/Components/TextField/TextField.min.css new file mode 100644 index 000000000..fba85ea3f --- /dev/null +++ b/dist/samples/Components/TextField/TextField.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto} \ No newline at end of file diff --git a/dist/samples/Components/TextField/index.html b/dist/samples/Components/TextField/index.html new file mode 100644 index 000000000..b7062af91 --- /dev/null +++ b/dist/samples/Components/TextField/index.html @@ -0,0 +1,138 @@ + + + + + + + + Component TextField + + + + + + + + + + + + + + + + +

              TextField

              +
              + + +
              + + + This should be your first and last name. +
              + + + +
              + + +
              + + + +
              + + +
              +
              + + +
              + + + +
              + + +
              + +
              + + \ No newline at end of file diff --git a/dist/samples/Components/Toggle/Toggle.css b/dist/samples/Components/Toggle/Toggle.css new file mode 100644 index 000000000..c03ba8387 --- /dev/null +++ b/dist/samples/Components/Toggle/Toggle.css @@ -0,0 +1,286 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +/** + * Office UI Fabric 2.4.1 + * The front-end framework for building experiences for Office 365. + **/ +/*Sasssssssss*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle:hover .ms-Label { + color: #000000; +} + +.ms-Toggle:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff !important; + border-color: #c8c8c8 !important; + pointer-events: none !important; + cursor: default !important; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8 !important; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.ms-Toggle-input { + position: absolute; + opacity: 0; + top: 0; +} + +.ms-Toggle-input + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input + .ms-Toggle-field:before { + right: auto; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #000000; + } +} + +.ms-Toggle-input:focus + .ms-Toggle-field, +.ms-Toggle-input:hover + .ms-Toggle-field { + background-color: #eaeaea; +} + +.ms-Toggle-input:focus:checked + .ms-Toggle-field, +.ms-Toggle-input:hover:checked + .ms-Toggle-field { + background-color: #005a9e; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} diff --git a/dist/samples/Components/Toggle/Toggle.min.css b/dist/samples/Components/Toggle/Toggle.min.css new file mode 100644 index 000000000..f836c1b5d --- /dev/null +++ b/dist/samples/Components/Toggle/Toggle.min.css @@ -0,0 +1,2 @@ +/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */ +.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right} \ No newline at end of file diff --git a/dist/samples/Components/Toggle/index.html b/dist/samples/Components/Toggle/index.html new file mode 100644 index 000000000..56b035ec9 --- /dev/null +++ b/dist/samples/Components/Toggle/index.html @@ -0,0 +1,136 @@ + + + + + + + + Component Toggle + + + + + + + + + + + + + + + +

              Toggle

              +
              + + +
              + Let apps use my location + + +
              + + + +
              + Let apps use my location + + +
              + + + +
              + Let apps use my location + + +
              +
              + + \ No newline at end of file diff --git a/dist/samples/Form/css/Form.css b/dist/samples/Form/css/Form.css new file mode 100644 index 000000000..71738cad3 --- /dev/null +++ b/dist/samples/Form/css/Form.css @@ -0,0 +1,6685 @@ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + margin: 23px 0 1px 0; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + margin-right: -4px; + padding: 12px 8px 3px 8px; + cursor: pointer; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: white; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + content: ''; + position: absolute; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + height: 0; + width: 0; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before { + z-index: 0; + outline: 1px solid transparent; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:after { + z-index: 10; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + top: 40px; + display: none; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after { + border-top: 10px solid #ffffff; + border-right: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #ffffff; + left: -10px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + border-top: 10px solid transparent; + border-right: 10px solid #ffffff; + border-bottom: 10px solid #ffffff; + border-left: 10px solid transparent; + right: -10px; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + left: 0; + right: 0; + margin: 0 auto; + width: 0; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + border-top: 10px solid #ffffff; + border-right: 10px solid #ffffff; + border-bottom: 10px solid transparent; + border-left: 10px solid transparent; + top: -10px; +} + +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + border-top: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #ffffff; + border-left: 10px solid #ffffff; + bottom: -10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + border: 0; + width: 20px; + height: 20px; + background-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + background-color: #ffffff; + } +} + +.ms-Callout-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: 105; + padding: 18px 24px 12px; +} + +.ms-Callout-title { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-Link.ms-Link--hero { + position: relative; + left: -8px; +} + +.ms-Callout-action { + position: relative; + top: 4px; + left: -8px; + margin-left: 0 !important; +} + +.ms-Callout-action:hover .ms-Callout-actionIcon, +.ms-Callout-action:focus .ms-Callout-actionIcon { + color: #0078d7; +} + +.ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--close .ms-Callout-title { + margin-right: 20px; +} + +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after { + border-color: #0078d7; + background-color: transparent; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + margin-bottom: -8px; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after { + left: 40px; + right: auto; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after { + top: calc('50% - 10px'); +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +@media (min-width: 480px) { + .ms-Callout { + width: 300px; + margin: 16px; + } + + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after { + display: block; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: 58px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-mainArea { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-right: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem { + margin-right: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch { + border-right: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch { + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 8px 8px 0; + border: none; + border-left: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch-input { + border-left: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch-input { + border-left: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-right: 40px; + border-left-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-right: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0px 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-DatePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + -webkit-animation-name: fadeIn, slideDownIn10; + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #c7e0f4; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + text-align: center; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0px; + position: absolute; + top: 0px; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: normal; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: normal; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 300; + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.ms-Dialog::before { + vertical-align: middle; + display: inline-block; + content: ''; + height: 100%; + width: 0; +} + +.ms-Dialog .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; +} + +.ms-Dialog .ms-Overlay { + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dialog .ms-Overlay { + opacity: 0; + } +} + +.ms-Dialog-main { + vertical-align: middle; + display: inline-block; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: left; + outline: 3px solid transparent; +} + +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + right: 12px; + padding: 8px; + z-index: 10; +} + +.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x { + color: #666666; + font-size: 16px; +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Dialog-content { + position: relative; + width: 100%; +} + +.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog-subText { + margin: 0 0 20px 0; + padding-top: 8px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; +} + +.ms-Dialog-actions .ms-Button { + line-height: normal; +} + +.ms-Dialog-actionsRight { + text-align: right; + font-size: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action:first-child { + margin: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action { + margin: 0 0 0 16px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close { + display: block; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner { + padding: 0 20px 20px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header { + background-color: #0078d7; + padding: 26px 20px 28px; + margin-bottom: 8px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + font-size: 28px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #ffffff; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText { + font-size: 14px; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: fixed; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + max-width: 268px; + z-index: 400; + top: 0; + right: 0; + bottom: 0; + overflow-y: scroll; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +@media (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} + +.ms-Facepile { + position: relative; + height: 32px; + width: auto; +} + +.ms-Facepile .ms-PersonaCard { + display: none; + position: absolute; + top: 40px; + height: 200px; +} + +.ms-Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-Facepile-itemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-Facepile-itemBtn .ms-Persona-presence, +.ms-Facepile-itemBtn .ms-Persona-details { + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover, +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus { + background-color: #005a9e; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active { + background-color: #004578; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active { + display: block; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover { + color: #212121; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled { + color: #c8c8c8; +} + +.ms-Facepile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-Facepile-overflowText { + font-size: 14px; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + -webkit-animation-name: fadeOut, slideUpOut20; + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: none; + background-color: transparent; +} + +.ms-MessageBanner-expand:focus, +.ms-MessageBanner-close:focus { + outline: 1px solid transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-expand { + display: inline-block; + } + + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px 0; + min-width: 240px; + } + + .ms-MessageBanner-expand { + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-NavBar { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; +} + +.ms-NavBar .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + z-index: 0; +} + +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + right: 27px; + text-align: center; + width: 40px; + cursor: pointer; +} + +.ms-NavBar-items { + display: none; +} + +.ms-NavBar-item { + box-sizing: border-box; + display: block; + height: 40px; + line-height: 40px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + padding-left: 20px; + position: relative; +} + +.ms-NavBar-item:hover { + cursor: pointer; + background-color: #deecf9; + color: #000000; +} + +.ms-NavBar-item:hover .ms-Icon { + color: #333333; +} + +.ms-NavBar-item:active { + color: #0078d7; +} + +.ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-NavBar-item.is-disabled { + color: #a6a6a6; +} + +.ms-NavBar-item.is-disabled:hover { + cursor: default; + border: none; +} + +.ms-NavBar-link { + color: #333333; + text-decoration: none; +} + +.ms-NavBar-link:active { + color: #0078d7; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after { + color: #212121; +} + +.ms-NavBar-chevronDown { + color: #666666; + font-size: 22px; + position: absolute; + top: 10px; + right: 20px; +} + +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; +} + +.ms-NavBar-item.ms-NavBar-item--search:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #666666; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + right: 5px; + top: 0; +} + +.ms-NavBar-item.ms-NavBar-item--search .ms-TextField { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open { + width: 200px; + padding-right: 40px; + border: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField { + display: block; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field { + border: none; + background-color: transparent; +} + +@media (max-width: 479px) { + .ms-NavBar.is-open .ms-NavBar-items { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + bottom: 0; + display: block; + left: 50px; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + outline: 1px solid transparent; + z-index: 5; + } + + .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu { + position: relative; + } +} + +@media (min-width: 320px) and (max-width: 479px) { + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown { + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + } + + .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + } + + .ms-NavBar.is-open .ms-Overlay { + display: block; + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 480px) { + .ms-NavBar-openMenu { + display: none; + } + + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 7px 0 0; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + right: 0; + float: none; + position: relative; + } + + .ms-NavBar-item { + float: left; + margin-right: 18px; + font-size: 14px; + padding: 0; + } + + .ms-NavBar-item:hover { + border-bottom: 2px solid #0078d7; + background-color: transparent; + } + + .ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + border-bottom: 2px solid #0078d7; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu:after { + position: relative; + top: 3px; + padding-top: 0; + right: auto; + } + + .ms-NavBar-item.ms-NavBar-item--right { + float: right; + margin: 0; + } +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width: 480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-left: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 48px; + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + left: auto; + width: 643px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + left: 428px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + left: auto; + width: 940px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; +} + +.ms-Panel.is-open .ms-Overlay { + display: block; + pointer-events: auto; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width: 480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width: 480px) and (-ms-high-contrast: active) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 250ms; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:before, +.ms-PeoplePicker-searchBox:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: left; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} + +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + position: relative; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 40px; + margin-right: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus, +.ms-Pivot-link:active { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff !important; + background-color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7 !important; +} + +@media (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + } +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + margin-bottom: 10px; + display: inline-block; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #600000; + } +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox.is-active .ms-SearchBox-closeButton { + display: block; + outline: transparent 1px solid; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; + background-color: transparent; + z-index: 5; +} + +.ms-SearchBox-field.hovering { + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + height: 32px; + width: 32px; + background-color: #0078d7; + text-align: center; + display: none; + font-size: 17px; + color: #ffffff; + z-index: 10; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} + +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table tr:hover, +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:before, +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:after, +.ms-Table-row.is-selected .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table thead .ms-Table-rowCheck:after, +.ms-Table-head .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle:hover .ms-Label { + color: #000000; +} + +.ms-Toggle:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff !important; + border-color: #c8c8c8 !important; + pointer-events: none !important; + cursor: default !important; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8 !important; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.ms-Toggle-input { + position: absolute; + opacity: 0; + top: 0; +} + +.ms-Toggle-input + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input + .ms-Toggle-field:before { + right: auto; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #000000; + } +} + +.ms-Toggle-input:focus + .ms-Toggle-field, +.ms-Toggle-input:hover + .ms-Toggle-field { + background-color: #eaeaea; +} + +.ms-Toggle-input:focus:checked + .ms-Toggle-field, +.ms-Toggle-input:hover:checked + .ms-Toggle-field { + background-color: #005a9e; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} + +html, +body { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + font-size: inherit; + padding: 0; + margin: 0; +} + +a { + color: #0078d7; + text-decoration: none; + cursor: pointer; + font-size: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: #004578; +} + +a:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + a { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + a { + color: #00009f; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: normal; +} + +h1 { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + font-weight: normal; + color: inherit; + letter-spacing: -1px; +} + +h2 { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; + color: inherit; +} + +h3 { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + font-weight: normal; + color: inherit; +} + +h4 { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + color: inherit; +} + +h5 { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: inherit; +} + +h6 { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + font-weight: normal; + color: inherit; +} + +.u-contentCenter { + max-width: 400px; + padding: 0 20px 0; + margin: 0 auto; + box-sizing: border-box; +} + +.Container { + margin: 0; + padding: 0; +} + +.Header { + border-bottom-style: solid; + border-bottom-width: 20px; +} + +.Header-text { + padding: 40px 0 35px; +} + +.Content { + padding: 20px 0; +} + +.Intro { + margin-bottom: 16px; +} + +.SubmitButton { + margin-top: 20px; +} diff --git a/dist/samples/Form/css/Form.min.css b/dist/samples/Form/css/Form.min.css new file mode 100644 index 000000000..2c09acbe9 --- /dev/null +++ b/dist/samples/Form/css/Form.min.css @@ -0,0 +1 @@ +.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;line-height:40px;text-align:center;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-Facepile-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled{color:#c8c8c8}.ms-Facepile-addPersonIcon{position:relative;top:-1px}.ms-Facepile-overflowText{font-size:14px}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-expand{display:inline-block}.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link{color:#333;text-decoration:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}body,html{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;padding:0;margin:0}a,body,html{font-size:inherit}a{color:#0078d7;cursor:pointer;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}@media screen and (-ms-high-contrast:active){a{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){a{color:#00009f}}h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:400}h1{font-size:28px;letter-spacing:-1px}h1,h2{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400;color:inherit}h2{font-size:21px}h3{color:#333;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;font-weight:400;color:inherit}h4{font-size:14px}h4,h5{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400;color:inherit}h5{font-size:12px}h6{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;font-weight:400;color:inherit}.u-contentCenter{max-width:400px;padding:0 20px;margin:0 auto;box-sizing:border-box}.Container{margin:0;padding:0}.Header{border-bottom-style:solid;border-bottom-width:20px}.Header-text{padding:40px 0 35px}.Content{padding:20px 0}.Intro{margin-bottom:16px}.SubmitButton{margin-top:20px} \ No newline at end of file diff --git a/dist/samples/Form/index.html b/dist/samples/Form/index.html new file mode 100644 index 000000000..f87c8f87e --- /dev/null +++ b/dist/samples/Form/index.html @@ -0,0 +1,253 @@ + + + + + + + + Example Form + + + + + + + + + + + + + +
              +
              +
              +
              +

              Nod Publishers

              +

              Check your text.

              +
              +
              +
              + +
              +
              +
              +

              Create an account to start using Nod.

              +
              + +
              +
              + + + Can't be changed after sign-up. Why not? +
              + +
              + + +
              + +
              + + +
              + + +
              +
              + +
              +
              + + +
              +
              + + +
              +
              + +
              + + + We recommend not using your business address. Why not? +
              + +
              + + + We will use this to create your user ID. +
              + +
              + + +
              + +
              + + +
              +
              + + +
              + +
              + + + +
              + +
              + + +
              + +
              + + +
              + + +
              +
              + + + +
              +
              + + +
              +
              + Go to today +
              +
              +
              + + +
              +
              +
              +
              + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
              +
              +
              +
              + + +
              +
              +
              + +
              + + + You use this to sign in. +
              + +
              + + + At least 8 characters. A mix of letters and numbers is best. +
              + +
              + + +
              + +
              + +
              +
              +
              +
              +
              + + + + + + + \ No newline at end of file diff --git a/dist/samples/Form/sass/Form.scss b/dist/samples/Form/sass/Form.scss new file mode 100644 index 000000000..cac00f760 --- /dev/null +++ b/dist/samples/Form/sass/Form.scss @@ -0,0 +1,94 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Import Fabric and Fabric Components to use its variables and mixins +@import '../../../sass/Fabric.Common.scss'; +@import '../../../sass/Fabric.Components.scss'; + +html, +body { + @include ms-font-m; + font-size: inherit; + padding: 0; + margin: 0; +} + +a { + @include ms-Link; + font-size: inherit; + text-decoration: none; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + font-weight: normal; +} + +h1 { + @include ms-font-xxl; + color: inherit; + letter-spacing: -1px; +} + +h2 { + @include ms-font-xl; + color: inherit; +} + +h3 { + @include ms-font-l; + color: inherit; +} + +h4 { + @include ms-font-m; + color: inherit; +} + +h5 { + @include ms-font-s; + color: inherit; +} + +h6 { + @include ms-font-xs; + color: inherit; +} + +.u-contentCenter { + max-width: 400px; + padding: 0 20px 0; + margin: 0 auto; + box-sizing: border-box; +} + +.Container { + margin: 0; + padding: 0; +} + +.Header { + border-bottom-style: solid; + border-bottom-width: 20px; +} + +.Header-text { + padding: 40px 0 35px; +} + +.Content { + padding: 20px 0; +} + +.Intro { + margin-bottom: 16px; +} + +.SubmitButton { + margin-top: 20px; +} diff --git a/dist/samples/Icons/index.html b/dist/samples/Icons/index.html new file mode 100644 index 000000000..7c2b395c7 --- /dev/null +++ b/dist/samples/Icons/index.html @@ -0,0 +1,438 @@ + + + + + + + + Fabric Icons + + + + + + + + + +
              +
              +

              Icons

              + +

              Fabric uses a custom font for its iconography, containing glyphs that can be infinitely scaled, colored, styled, and even flipped for right-to-left localization.

              + + +
              + +
              +
                +
              • ms-Icon--circleEmpty
                • +
              • ms-Icon--circleFill
                • +
              • ms-Icon--placeholder
                • +
              • ms-Icon--star
                • +
              • ms-Icon--plus
                • +
              • ms-Icon--minus
                • +
              • ms-Icon--question
                • +
              • ms-Icon--exclamation
                • +
              • ms-Icon--person
                • +
              • ms-Icon--mail
                • +
              • ms-Icon--infoCircle
                • +
              • ms-Icon--alert
                • +
              • ms-Icon--xCircle
                • +
              • ms-Icon--mailOpen
                • +
              • ms-Icon--people
                • +
              • ms-Icon--bell
                • +
              • ms-Icon--calendar
                • +
              • ms-Icon--scheduling
                • +
              • ms-Icon--event
                • +
              • ms-Icon--folder
                • +
              • ms-Icon--documents
                • +
              • ms-Icon--chat
                • +
              • ms-Icon--sites
                • +
              • ms-Icon--listBullets
                • +
              • ms-Icon--calendarWeek
                • +
              • ms-Icon--calendarWorkWeek
                • +
              • ms-Icon--calendarDay
                • +
              • ms-Icon--folderMove
                • +
              • ms-Icon--panel
                • +
              • ms-Icon--popout
                • +
              • ms-Icon--menu
                • +
              • ms-Icon--home
                • +
              • ms-Icon--favorites
                • +
              • ms-Icon--phone
                • +
              • ms-Icon--mailSend
                • +
              • ms-Icon--save
                • +
              • ms-Icon--trash
                • +
              • ms-Icon--pencil
                • +
              • ms-Icon--flag
                • +
              • ms-Icon--reply
                • +
              • ms-Icon--miniatures
                • +
              • ms-Icon--voicemail
                • +
              • ms-Icon--play
                • +
              • ms-Icon--pause
                • +
              • ms-Icon--onlineAdd
                • +
              • ms-Icon--onlineJoin
                • +
              • ms-Icon--replyAll
                • +
              • ms-Icon--attachment
                • +
              • ms-Icon--drm
                • +
              • ms-Icon--pinDown
                • +
              • ms-Icon--refresh
                • +
              • ms-Icon--gear
                • +
              • ms-Icon--smiley
                • +
              • ms-Icon--info
                • +
              • ms-Icon--lock
                • +
              • ms-Icon--search
                • +
              • ms-Icon--questionReverse
                • +
              • ms-Icon--notRecurring
                • +
              • ms-Icon--tasks
                • +
              • ms-Icon--check
                • +
              • ms-Icon--x
                • +
              • ms-Icon--ellipsis
                • +
              • ms-Icon--dot
                • +
              • ms-Icon--arrowUp
                • +
              • ms-Icon--arrowDown
                • +
              • ms-Icon--arrowLeft
                • +
              • ms-Icon--arrowRight
                • +
              • ms-Icon--download
                • +
              • ms-Icon--directions
                • +
              • ms-Icon--microphone
                • +
              • ms-Icon--caretUp
                • +
              • ms-Icon--caretDown
                • +
              • ms-Icon--caretLeft
                • +
              • ms-Icon--caretRight
                • +
              • ms-Icon--caretUpLeft
                • +
              • ms-Icon--caretUpRight
                • +
              • ms-Icon--caretDownRight
                • +
              • ms-Icon--caretDownLeft
                • +
              • ms-Icon--note
                • +
              • ms-Icon--noteReply
                • +
              • ms-Icon--noteForward
                • +
              • ms-Icon--key
                • +
              • ms-Icon--tile
                • +
              • ms-Icon--taskRecurring
                • +
              • ms-Icon--starEmpty
                • +
              • ms-Icon--upload
                • +
              • ms-Icon--wrench
                • +
              • ms-Icon--share
                • +
              • ms-Icon--documentReply
                • +
              • ms-Icon--documentForward
                • +
              • ms-Icon--partner
                • +
              • ms-Icon--reactivate
                • +
              • ms-Icon--sort
                • +
              • ms-Icon--personAdd
                • +
              • ms-Icon--chevronUp
                • +
              • ms-Icon--chevronDown
                • +
              • ms-Icon--chevronLeft
                • +
              • ms-Icon--chevronRight
                • +
              • ms-Icon--peopleAdd
                • +
              • ms-Icon--newsfeed
                • +
              • ms-Icon--notebook
                • +
              • ms-Icon--link
                • +
              • ms-Icon--chevronsUp
                • +
              • ms-Icon--chevronsDown
                • +
              • ms-Icon--chevronsLeft
                • +
              • ms-Icon--chevronsRight
                • +
              • ms-Icon--clutter
                • +
              • ms-Icon--subscribe
                • +
              • ms-Icon--unsubscribe
                • +
              • ms-Icon--personRemove
                • +
              • ms-Icon--receiptForward
                • +
              • ms-Icon--receiptReply
                • +
              • ms-Icon--receiptCheck
                • +
              • ms-Icon--peopleRemove
                • +
              • ms-Icon--merge
                • +
              • ms-Icon--split
                • +
              • ms-Icon--eventCancel
                • +
              • ms-Icon--eventShare
                • +
              • ms-Icon--today
                • +
              • ms-Icon--oofReply
                • +
              • ms-Icon--voicemailReply
                • +
              • ms-Icon--voicemailForward
                • +
              • ms-Icon--ribbon
                • +
              • ms-Icon--contact
                • +
              • ms-Icon--eye
                • +
              • ms-Icon--glasses
                • +
              • ms-Icon--print
                • +
              • ms-Icon--room
                • +
              • ms-Icon--post
                • +
              • ms-Icon--toggle
                • +
              • ms-Icon--touch
                • +
              • ms-Icon--clock
                • +
              • ms-Icon--fax
                • +
              • ms-Icon--lightning
                • +
              • ms-Icon--dialpad
                • +
              • ms-Icon--phoneTransfer
                • +
              • ms-Icon--phoneAdd
                • +
              • ms-Icon--late
                • +
              • ms-Icon--chatAdd
                • +
              • ms-Icon--conflict
                • +
              • ms-Icon--navigate
                • +
              • ms-Icon--camera
                • +
              • ms-Icon--filter
                • +
              • ms-Icon--fullscreen
                • +
              • ms-Icon--new
                • +
              • ms-Icon--mailEmpty
                • +
              • ms-Icon--editBox
                • +
              • ms-Icon--waffle
                • +
              • ms-Icon--work
                • +
              • ms-Icon--eventRecurring
                • +
              • ms-Icon--cart
                • +
              • ms-Icon--socialListening
                • +
              • ms-Icon--mapMarker
                • +
              • ms-Icon--org
                • +
              • ms-Icon--replyAlt
                • +
              • ms-Icon--replyAllAlt
                • +
              • ms-Icon--eventInfo
                • +
              • ms-Icon--group
                • +
              • ms-Icon--money
                • +
              • ms-Icon--graph
                • +
              • ms-Icon--noteEdit
                • +
              • ms-Icon--dashboard
                • +
              • ms-Icon--mailEdit
                • +
              • ms-Icon--pinLeft
                • +
              • ms-Icon--heart
                • +
              • ms-Icon--heartEmpty
                • +
              • ms-Icon--picture
                • +
              • ms-Icon--cake
                • +
              • ms-Icon--books
                • +
              • ms-Icon--chart
                • +
              • ms-Icon--video
                • +
              • ms-Icon--soccer
                • +
              • ms-Icon--meal
                • +
              • ms-Icon--balloon
                • +
              • ms-Icon--cat
                • +
              • ms-Icon--dog
                • +
              • ms-Icon--bag
                • +
              • ms-Icon--music
                • +
              • ms-Icon--stopwatch
                • +
              • ms-Icon--coffee
                • +
              • ms-Icon--briefcase
                • +
              • ms-Icon--pill
                • +
              • ms-Icon--trophy
                • +
              • ms-Icon--firstAid
                • +
              • ms-Icon--plane
                • +
              • ms-Icon--page
                • +
              • ms-Icon--car
                • +
              • ms-Icon--dogAlt
                • +
              • ms-Icon--document
                • +
              • ms-Icon--metadata
                • +
              • ms-Icon--pointItem
                • +
              • ms-Icon--text
                • +
              • ms-Icon--fieldText
                • +
              • ms-Icon--fieldNumber
                • +
              • ms-Icon--dropdown
                • +
              • ms-Icon--radioButton
                • +
              • ms-Icon--checkbox
                • +
              • ms-Icon--story
                • +
              • ms-Icon--bold
                • +
              • ms-Icon--italic
                • +
              • ms-Icon--underline
                • +
              • ms-Icon--quote
                • +
              • ms-Icon--styleRemove
                • +
              • ms-Icon--pictureAdd
                • +
              • ms-Icon--pictureRemove
                • +
              • ms-Icon--desktop
                • +
              • ms-Icon--tablet
                • +
              • ms-Icon--mobile
                • +
              • ms-Icon--table
                • +
              • ms-Icon--hide
                • +
              • ms-Icon--shield
                • +
              • ms-Icon--header
                • +
              • ms-Icon--paint
                • +
              • ms-Icon--support
                • +
              • ms-Icon--settings
                • +
              • ms-Icon--creditCard
                • +
              • ms-Icon--reload
                • +
              • ms-Icon--peopleSecurity
                • +
              • ms-Icon--fieldTextBox
                • +
              • ms-Icon--multiChoice
                • +
              • ms-Icon--fieldMail
                • +
              • ms-Icon--contactForm
                • +
              • ms-Icon--circleHalfFilled
                • +
              • ms-Icon--documentPDF
                • +
              • ms-Icon--bookmark
                • +
              • ms-Icon--circleUnfilled
                • +
              • ms-Icon--circleFilled
                • +
              • ms-Icon--textBox
                • +
              • ms-Icon--drop
                • +
              • ms-Icon--sun
                • +
              • ms-Icon--lifesaver
                • +
              • ms-Icon--lifesaverLock
                • +
              • ms-Icon--mailUnread
                • +
              • ms-Icon--mailRead
                • +
              • ms-Icon--inboxCheck
                • +
              • ms-Icon--folderSearch
                • +
              • ms-Icon--collapse
                • +
              • ms-Icon--expand
                • +
              • ms-Icon--ascending
                • +
              • ms-Icon--descending
                • +
              • ms-Icon--filterClear
                • +
              • ms-Icon--checkboxEmpty
                • +
              • ms-Icon--checkboxMixed
                • +
              • ms-Icon--boards
                • +
              • ms-Icon--checkboxCheck
                • +
              • ms-Icon--frowny
                • +
              • ms-Icon--lightBulb
                • +
              • ms-Icon--globe
                • +
              • ms-Icon--deviceWipe
                • +
              • ms-Icon--listCheck
                • +
              • ms-Icon--listGroup
                • +
              • ms-Icon--timeline
                • +
              • ms-Icon--fontIncrease
                • +
              • ms-Icon--fontDecrease
                • +
              • ms-Icon--fontColor
                • +
              • ms-Icon--mailCheck
                • +
              • ms-Icon--mailDown
                • +
              • ms-Icon--listCheckbox
                • +
              • ms-Icon--sunAdd
                • +
              • ms-Icon--sunQuestion
                • +
              • ms-Icon--chevronThinUp
                • +
              • ms-Icon--chevronThinDown
                • +
              • ms-Icon--chevronThinLeft
                • +
              • ms-Icon--chevronThinRight
                • +
              • ms-Icon--chevronThickUp
                • +
              • ms-Icon--chevronThickDown
                • +
              • ms-Icon--chevronThickLeft
                • +
              • ms-Icon--chevronThickRight
                • +
              • ms-Icon--linkRemove
                • +
              • ms-Icon--alertOutline
                • +
              • ms-Icon--documentLandscape
                • +
              • ms-Icon--documentAdd
                • +
              • ms-Icon--toggleMiddle
                • +
              • ms-Icon--embed
                • +
              • ms-Icon--listNumbered
                • +
              • ms-Icon--peopleCheck
                • +
              • ms-Icon--caretUpOutline
                • +
              • ms-Icon--caretDownOutline
                • +
              • ms-Icon--caretLeftOutline
                • +
              • ms-Icon--caretRightOutline
                • +
              • ms-Icon--mailSync
                • +
              • ms-Icon--mailError
                • +
              • ms-Icon--mailPause
                • +
              • ms-Icon--peopleSync
                • +
              • ms-Icon--peopleError
                • +
              • ms-Icon--peoplePause
                • +
              • ms-Icon--circleBall
                • +
              • ms-Icon--circleBalloons
                • +
              • ms-Icon--circleCar
                • +
              • ms-Icon--circleCat
                • +
              • ms-Icon--circleCoffee
                • +
              • ms-Icon--circleDog
                • +
              • ms-Icon--circleLightning
                • +
              • ms-Icon--circlePill
                • +
              • ms-Icon--circlePlane
                • +
              • ms-Icon--circlePoodle
                • +
              • ms-Icon--checkPeople
                • +
              • ms-Icon--documentSearch
                • +
              • ms-Icon--sortLines
                • +
              • ms-Icon--calendarPublic
                • +
              • ms-Icon--contactPublic
                • +
              • ms-Icon--triangleUp
                • +
              • ms-Icon--triangleRight
                • +
              • ms-Icon--triangleDown
                • +
              • ms-Icon--triangleLeft
                • +
              • ms-Icon--triangleEmptyUp
                • +
              • ms-Icon--triangleEmptyRight
                • +
              • ms-Icon--triangleEmptyDown
                • +
              • ms-Icon--triangleEmptyLeft
                • +
              • ms-Icon--filePDF
                • +
              • ms-Icon--fileImage
                • +
              • ms-Icon--fileDocument
                • +
              • ms-Icon--listGroup2
                • +
              • ms-Icon--copy
                • +
              • ms-Icon--creditCardOutline
                • +
              • ms-Icon--mailPublic
                • +
              • ms-Icon--folderPublic
                • +
              • ms-Icon--teamwork
                • +
              • ms-Icon--move
                • +
              • ms-Icon--classroom
                • +
              • ms-Icon--menu2
                • +
              • ms-Icon--plus2
                • +
              • ms-Icon--tag
                • +
              • ms-Icon--arrowUp2
                • +
              • ms-Icon--arrowDown2
                • +
              • ms-Icon--circlePlus
                • +
              • ms-Icon--circleInfo
                • +
              • ms-Icon--section
                • +
              • ms-Icon--sections
                • +
              • ms-Icon--at
                • +
              • ms-Icon--arrowUpRight
                • +
              • ms-Icon--arrowDownRight
                • +
              • ms-Icon--arrowDownLeft
                • +
              • ms-Icon--arrowUpLeft
                • +
              • ms-Icon--bundle
                • +
              • ms-Icon--pictureEdit
                • +
              • ms-Icon--protectionCenter
                • +
              • ms-Icon--alert2
                • +
              +
              +
              + + \ No newline at end of file diff --git a/dist/samples/VideoPortal/channel.html b/dist/samples/VideoPortal/channel.html new file mode 100644 index 000000000..8dd33e217 --- /dev/null +++ b/dist/samples/VideoPortal/channel.html @@ -0,0 +1,228 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + +
              +
              + +
              + +
              +
              + +
              + +
              +
              +
              + +
              +
              + +
              +
              +

              Popular Videos

              +
              +
              +
              +
              + + Azure Media Services Overview + +
              +
              + + Dynamically procrastinate B2C users after installed base benefits + 10:28 + +
              +
              +
              +
              + + Azure Media Services Overview + +
              +
              + + Dramatically maintain clicks-and-mortar solutions + 3:49 + +
              +
              +
              +
              + + Azure Media Services Overview + +
              +
              + + Seamlessly visualize quality intellectual capital + 1:56 + +
              +
              +
              +
              +
              +
              + + +
              +
              +
              +
                +
              • Popular
                • +
              • All Videos
                • +
              • My Videos
                • + +
              +
              + +
              +
              +
              +
              +
              + + Video Title + 3:49 + +
              +
              + Dramatically maintain clicks-and-mortar solutions + 946 views +
              +
              +
              + +
              +
              +
              + + Video Title + 8:35 + +
              +
              + Dynamically innovate resource-leveling customer service + 92 views +
              +
              +
              + +
              +
              +
              + + Video Title + 10:28 + +
              +
              + Efficiently procrastinate B2C users after installed base benefits + 499 views +
              +
              +
              + +
              +
              +
              + + Video Title + 6:32 + +
              +
              + Completely synergize resource sucking relationships + 378 views +
              +
              +
              + +
              +
              +
              + + Video Title + 10:45 + +
              +
              + Seamlessly visualize quality intellectual capital + 345 views +
              +
              +
              + +
              +
              +
              + + Video Title + 2:59 + +
              +
              + Synergizing across organizations + 66 views +
              +
              +
              +
              +
              +
              +
              +
              +
              +
              + + + + + \ No newline at end of file diff --git a/dist/samples/VideoPortal/channels.html b/dist/samples/VideoPortal/channels.html new file mode 100644 index 000000000..18dcd4528 --- /dev/null +++ b/dist/samples/VideoPortal/channels.html @@ -0,0 +1,79 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + +
              +
              + +
              + +
              +
              + +
              + +
              +
              +
              +
              + Technical Presentations + Employee Interviews + Executive Briefings + Research Insights + Acquisitions and Mergers Overview + Web Tech Talks + Brown Bag Series + Sales Reports + Growth Initiatives + Holding Projetions + Customer Trends +
              +
              +
              +
              + + + + + \ No newline at end of file diff --git a/dist/samples/VideoPortal/css/VideoPortal.css b/dist/samples/VideoPortal/css/VideoPortal.css new file mode 100644 index 000000000..b97a278e0 --- /dev/null +++ b/dist/samples/VideoPortal/css/VideoPortal.css @@ -0,0 +1,7031 @@ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ +.ms-Breadcrumb { + margin: 23px 0 1px 0; +} + +.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow { + display: inline; +} + +.ms-Breadcrumb-chevron { + font-size: 17px; + color: #666666; + vertical-align: top; + margin: 10px 0; +} + +.ms-Breadcrumb-list { + display: inline; + white-space: nowrap; + padding: 0; + margin: 0; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; +} + +.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron { + display: none; +} + +.ms-Breadcrumb-overflow { + display: none; + position: relative; + margin-right: -4px; +} + +.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + font-size: 12px; + display: inline-block; + color: #0078d7; + margin-right: -4px; + padding: 12px 8px 3px 8px; + cursor: pointer; +} + +.ms-Breadcrumb-overflowMenu { + display: none; + position: absolute; +} + +.ms-Breadcrumb-overflowMenu.is-open { + display: block; + top: 36px; + left: 0; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + z-index: 105; +} + +.ms-Breadcrumb-overflowMenu:before { + position: absolute; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + top: -6px; + left: 6px; + content: ' '; + width: 16px; + height: 16px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + background-color: white; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu { + border: none; + box-shadow: none; + position: relative; + width: 190px; +} + +.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open { + margin-bottom: 0; +} + +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; +} + +.ms-Breadcrumb-itemLink:hover, +.ms-Breadcrumb-overflowButton:hover { + background-color: #f4f4f4; + cursor: pointer; +} + +.ms-Breadcrumb-itemLink:focus, +.ms-Breadcrumb-overflowButton:focus { + outline: #767676 solid 1px; + color: #000000; +} + +.ms-Breadcrumb-itemLink:active, +.ms-Breadcrumb-overflowButton:active { + outline: transparent; + background-color: #c8c8c8; +} + +.ms-Breadcrumb-itemLink { + color: #333333; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + font-weight: normal; + display: inline-block; + padding: 0 4px; + max-width: 160px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +@media screen and (max-width: 639px) { + .ms-Breadcrumb { + margin: 10px 0; + } + + .ms-Breadcrumb-itemLink { + font-size: 17px; + } + + .ms-Breadcrumb-chevron { + font-size: 14px; + margin-top: 7px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 8px; + padding-bottom: 3px; + } +} + +@media screen and (max-width: 479px) { + .ms-Breadcrumb-itemLink { + font-size: 14px; + max-width: 116px; + } + + .ms-Breadcrumb-chevron { + margin-top: 4px; + } + + .ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton { + padding-top: 5px; + padding-bottom: 3px; + } +} + +.ms-Button { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + border: 1px solid #f4f4f4; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; +} + +.ms-Button:hover { + background-color: #eaeaea; + border-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-Button:hover .ms-Button-label { + color: #000000; +} + +.ms-Button:focus { + background-color: #eaeaea; + border-color: #0078d7; + outline: 1px solid transparent; +} + +.ms-Button:focus .ms-Button-label { + color: #000000; +} + +.ms-Button:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button:disabled, +.ms-Button.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; + cursor: default; +} + +.ms-Button:disabled .ms-Button-label, +.ms-Button.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button:disabled:hover, +.ms-Button:disabled:focus, +.ms-Button.is-disabled:hover, +.ms-Button.is-disabled:focus { + outline: 0; +} + +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: #333333; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + +.ms-Button.ms-Button--primary { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--primary:hover { + background-color: #005a9e; + border-color: #005a9e; +} + +.ms-Button.ms-Button--primary:focus { + background-color: #005a9e; + border-color: #004578; +} + +.ms-Button.ms-Button--primary:active { + background-color: #0078d7; + border-color: #0078d7; +} + +.ms-Button.ms-Button--primary:disabled, +.ms-Button.ms-Button--primary.is-disabled { + background-color: #f4f4f4; + border-color: #f4f4f4; +} + +.ms-Button.ms-Button--primary:disabled .ms-Button-label, +.ms-Button.ms-Button--primary.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + line-height: normal; +} + +.ms-Button.ms-Button--hero .ms-Button-icon { + color: #0078d7; + display: inline-block; + font-size: 12px; + position: relative; + top: -8px; + text-align: center; +} + +.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon { + border-radius: 18px; + border: 1px solid #0078d7; + height: 18px; + line-height: 18px; + width: 18px; + font-size: 12px; + margin: 0; +} + +.ms-Button.ms-Button--hero .ms-Button-label { + color: #0078d7; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + position: relative; + top: -5px; + text-decoration: none; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon { + color: #005a9e; +} + +.ms-Button.ms-Button--hero:hover .ms-Button-label, +.ms-Button.ms-Button--hero:focus .ms-Button-label { + color: #004578; +} + +.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--hero:disabled .ms-Button-label, +.ms-Button.ms-Button--hero.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; +} + +.ms-Button.ms-Button--compound .ms-Button-label { + display: block; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + position: relative; + text-align: left; + margin-top: -5px; +} + +.ms-Button.ms-Button--compound .ms-Button-description { + color: #666666; + display: block; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + position: relative; + text-align: left; + top: 3px; +} + +.ms-Button.ms-Button--compound:hover .ms-Button-description { + color: #212121; +} + +.ms-Button.ms-Button--compound:focus { + border-color: #0078d7; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-label { + color: #333333; +} + +.ms-Button.ms-Button--compound:focus .ms-Button-description { + color: #666666; +} + +.ms-Button.ms-Button--compound:active { + background-color: #0078d7; +} + +.ms-Button.ms-Button--compound:active .ms-Button-description, +.ms-Button.ms-Button--compound:active .ms-Button-label { + color: #ffffff; +} + +.ms-Button.ms-Button--compound:disabled .ms-Button-label, +.ms-Button.ms-Button--compound:disabled .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--compound:disabled:focus, +.ms-Button.ms-Button--compound:disabled:active, +.ms-Button.ms-Button--compound.is-disabled:focus, +.ms-Button.ms-Button--compound.is-disabled:active { + border-color: #f4f4f4; + background-color: #f4f4f4; +} + +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound:disabled:active .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label, +.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 32px; + line-height: 32px; + min-width: 0; + padding: 0 8px; + text-align: left; + font-size: 14px; +} + +.ms-Button.ms-Button--command .ms-Button-icon { + color: #666666; + display: inline-block; + margin-right: 4px; + position: relative; +} + +.ms-Button.ms-Button--command .ms-Button-label { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Button.ms-Button--command:hover .ms-Button-icon, +.ms-Button.ms-Button--command:focus .ms-Button-icon { + color: #212121; +} + +.ms-Button.ms-Button--command:hover .ms-Button-label, +.ms-Button.ms-Button--command:focus .ms-Button-label { + color: #000000; +} + +.ms-Button.ms-Button--command:active .ms-Button-icon, +.ms-Button.ms-Button--command:active .ms-Button-label { + color: #0078d7; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-icon, +.ms-Button.ms-Button--command.is-disabled .ms-Button-icon { + color: #c8c8c8; +} + +.ms-Button.ms-Button--command:disabled .ms-Button-label, +.ms-Button.ms-Button--command.is-disabled .ms-Button-label { + color: #a6a6a6; +} + +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} + +.ms-Callout { + z-index: 100; + margin: 16px auto; + position: relative; + width: 288px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + content: ''; + position: absolute; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + height: 0; + width: 0; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowTop:before { + z-index: 0; + outline: 1px solid transparent; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowBottom:after, +.ms-Callout.ms-Callout--arrowTop:after { + z-index: 10; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + top: 40px; + display: none; +} + +.ms-Callout.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--arrowLeft:after { + border-top: 10px solid #ffffff; + border-right: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #ffffff; + left: -10px; +} + +.ms-Callout.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--arrowRight:after { + border-top: 10px solid transparent; + border-right: 10px solid #ffffff; + border-bottom: 10px solid #ffffff; + border-left: 10px solid transparent; + right: -10px; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + left: 0; + right: 0; + margin: 0 auto; + width: 0; +} + +.ms-Callout.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--arrowTop:after { + border-top: 10px solid #ffffff; + border-right: 10px solid #ffffff; + border-bottom: 10px solid transparent; + border-left: 10px solid transparent; + top: -10px; +} + +.ms-Callout.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--arrowBottom:after { + border-top: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #ffffff; + border-left: 10px solid #ffffff; + bottom: -10px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + border: 0; + width: 20px; + height: 20px; + background-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after, + .ms-Callout.ms-Callout--arrowBottom:before, + .ms-Callout.ms-Callout--arrowBottom:after, + .ms-Callout.ms-Callout--arrowTop:before, + .ms-Callout.ms-Callout--arrowTop:after { + background-color: #ffffff; + } +} + +.ms-Callout-main { + position: relative; + background-color: #ffffff; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: 5; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); +} + +.ms-Callout-close { + margin: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 12px; + right: 12px; + padding: 8px; + width: 32px; + height: 32px; + font-size: 14px; + color: #666666; + z-index: 110; +} + +.ms-Callout-inner { + height: 100%; + padding: 0 24px 20px; +} + +.ms-Callout-header { + z-index: 105; + padding: 18px 24px 12px; +} + +.ms-Callout-title { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Callout-subText { + margin: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Callout-link { + font-size: 14px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +.ms-Callout-actions .ms-Link.ms-Link--hero { + position: relative; + left: -8px; +} + +.ms-Callout-action { + position: relative; + top: 4px; + left: -8px; + margin-left: 0 !important; +} + +.ms-Callout-action:hover .ms-Callout-actionIcon, +.ms-Callout-action:focus .ms-Callout-actionIcon { + color: #0078d7; +} + +.ms-Callout-button { + margin-right: 12px; +} + +.ms-Callout.ms-Callout--close .ms-Callout-title { + margin-right: 20px; +} + +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after { + border-color: #0078d7; + background-color: transparent; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-header { + padding: 28px 24px; + background-color: #0078d7; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-title { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 28px; + color: #ffffff; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-inner { + padding-top: 20px; +} + +.ms-Callout.ms-Callout--OOBE .ms-Callout-subText { + font-size: 14px; +} + +.ms-Callout.ms-Callout--actionText .ms-Callout-actions { + border-top: 1px solid #eaeaea; + margin-bottom: -8px; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after { + left: 40px; + right: auto; +} + +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before, +.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after { + top: calc('50% - 10px'); +} + +.ms-Callout.ms-Callout--peek .ms-Callout-header { + padding-bottom: 0; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-title { + font-size: 14px; +} + +.ms-Callout.ms-Callout--peek .ms-Callout-actions { + margin-top: 12px; + margin-bottom: -4px; +} + +@media (min-width: 480px) { + .ms-Callout { + width: 300px; + margin: 16px; + } + + .ms-Callout.ms-Callout--arrowRight:before, + .ms-Callout.ms-Callout--arrowRight:after, + .ms-Callout.ms-Callout--arrowLeft:before, + .ms-Callout.ms-Callout--arrowLeft:after { + display: block; + } +} + +.ms-ChoiceField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + min-height: 36px; + position: relative; +} + +.ms-ChoiceField .ms-Label { + font-size: 14px; + padding: 0 0 0 26px; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #c8c8c8; + color: #c8c8c8; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #eaeaea; +} + +.ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #00ff00; + color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #00ff00; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:before { + background-color: #600000; + color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field:after { + border-color: #600000; + } + + .ms-ChoiceField-input:disabled + .ms-ChoiceField-field .ms-Label { + color: #600000; + } +} + +.ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; +} + +.ms-ChoiceField-input:focus:not(:disabled) + .ms-ChoiceField-field:after { + border-color: #767676; +} + +.ms-ChoiceField-field { + display: inline-block; + cursor: pointer; + margin-top: 8px; + position: relative; +} + +.ms-ChoiceField-field:after { + content: ''; + display: inline-block; + border: 1px #c8c8c8 solid; + width: 19px; + height: 19px; + cursor: pointer; + position: relative; + font-weight: normal; + left: -1px; + top: -1px; + border-radius: 50%; + position: absolute; +} + +.ms-ChoiceField-field:hover:after { + border-color: #767676; +} + +.ms-ChoiceField-field:hover .ms-Label { + color: #000000; +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + background-color: #666666; + border-color: #666666; + color: #666666; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 4px; + right: 0; + bottom: 0; + left: 4px; + width: 11px; + height: 11px; + box-sizing: border-box; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #ffffff; + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input:checked + .ms-ChoiceField-field:before { + border-color: #000000; + background-color: #000000; + } +} + +.ms-ChoiceField-input:checked + .ms-ChoiceField-field:hover:before { + background-color: #212121; + color: #212121; +} + +.ms-ChoiceField-input[type='checkbox'] + .ms-ChoiceField-field:after { + border-radius: 0; +} + +.ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: 3px; + left: 3px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #ffffff; + border-color: transparent; + background-color: transparent; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ChoiceField-input[type='checkbox']:checked + .ms-ChoiceField-field:before { + color: #000000; + border-color: transparent; + background-color: transparent; + } +} + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; +} + +.ms-CommandBar { + background-color: #eff6fc; + height: 40px; + white-space: nowrap; + padding-left: 0; + border: 0; + position: relative; +} + +.ms-CommandBar:focus { + outline: none; +} + +.ms-CommandBar-mainArea { + overflow-x: hidden; + display: block; + padding-left: 58px; +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-mainArea { + padding-left: 24px; + } +} + +.ms-CommandBar-sideCommands { + float: right; + text-align: right; + width: auto; + padding-right: 8px; +} + +.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child { + margin-right: 0; +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + min-width: 128px; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBar-sideCommands { + padding-right: 12px; + } +} + +@media only screen and (min-width: 1024px) { + .ms-CommandBar-sideCommands { + padding-right: 16px; + } +} + +.ms-CommandBarItem { + display: inline-block; + color: #0078d7; + height: 40px; + outline: none; + vertical-align: top; + margin-right: -4px; +} + +.ms-CommandBarItem .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem .ms-CommandBarItem-commandText { + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + height: 38px; + outline: none; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + height: 38px; + outline: none; + } +} + +.ms-CommandBarItem:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarItem:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarItem:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +@media only screen and (min-width: 640px) { + .ms-CommandBarItem { + margin-right: 8px; + } + + .ms-CommandBarItem .ms-CommandBarItem-chevronDown, + .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline; + } +} + +.ms-CommandBarItem.is-hidden { + width: 0; + overflow: hidden; +} + +.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown, +.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText { + display: none; +} + +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText, +.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown { + display: inline; +} + +.ms-CommandBarItem-overflow { + display: none; +} + +.ms-CommandBarItem-overflow.is-visible { + display: inline-block; +} + +.ms-CommandBarItem-overflow .ms-Icon { + font-size: 14px; + color: #666666; +} + +.ms-CommandBarItem-link { + line-height: 39px; + padding: 0 6px; + cursor: pointer; + height: 40px; + min-width: 20px; + text-align: center; + position: relative; + padding: 0 8px; + display: block; + height: 100%; + text-decoration: none; +} + +.ms-CommandBarItem-link:focus { + outline: none; +} + +.ms-CommandBarItem-link:focus:before { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + border: 1px solid #a6a6a6; + content: ''; +} + +.ms-CommandBarItem-icon { + font-size: 17px; + color: #0078d7; +} + +.ms-CommandBarItem-chevronDown { + vertical-align: middle; + padding-bottom: 3px; + margin-top: 13px; + font-size: 1.1em; + line-height: 1em; + color: #666666; +} + +.ms-CommandBarItem-chevronDown:before { + height: 10px; + line-height: 16px; +} + +.ms-CommandBarSearch { + float: left; + width: 208px; + max-width: 208px; + background-color: #deecf9; + color: #333333; + height: 40px; + position: relative; + box-sizing: border-box; + border-color: transparent; + transition: 0.167s cubic-bezier(0.1, 0.9, 0.2, 1); + transition-property: width, background-color; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch { + overflow: hidden; + width: 50px; + position: absolute; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch { + border-right: 1px solid #ffffff; + z-index: 10; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch { + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch:hover { + background-color: #c7e0f4; + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch:hover { + border-left: 1px solid #000000; + border-right: 1px solid #000000; + } +} + +.ms-CommandBarSearch .ms-Icon--search { + margin-left: 2px; + margin-top: 12px; + vertical-align: top; +} + +.ms-CommandBarSearch-input { + height: 40px; + padding: 8px 8px 8px 0; + border: none; + border-left: 42px solid transparent; + background-color: transparent; + width: 100%; + box-sizing: border-box; + outline: none; + cursor: pointer; + font-size: 14px; + -webkit-appearance: none; + -webkit-border-radius: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-CommandBarSearch-input { + border-left: 40px solid #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-CommandBarSearch-input { + border-left: 40px solid #ffffff; + } +} + +.ms-CommandBarSearch-input::-ms-clear { + display: none; +} + +.ms-CommandBarSearch-input::-webkit-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::-moz-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:-ms-input-placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input::placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-input:placeholder { + color: #333333; + opacity: 1; + font-size: 14px; +} + +.ms-CommandBarSearch-iconSearchWrapper { + display: block; + padding-left: 15px; +} + +.ms-CommandBarSearch-iconArrowWrapper { + display: none; +} + +.ms-CommandBarSearch-iconSearchWrapper, +.ms-CommandBarSearch-iconArrowWrapper { + top: 0; + padding-left: 8px; + padding-right: 8px; +} + +.ms-CommandBarSearch-iconClearWrapper { + display: none; + top: 1px; + right: 0px; + z-index: 10; +} + +.ms-CommandBarSearch.is-active { + background-color: #c7e0f4; + color: #000000; +} + +@media only screen and (max-width: 1023px) { + .ms-CommandBarSearch.is-active { + width: 100%; + position: absolute; + z-index: 10; + max-width: 100%; + } +} + +.ms-CommandBarSearch.is-active:hover { + background-color: #c7e0f4; + color: #000000; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + cursor: text; + padding-right: 40px; + border-left-width: 8px; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input { + border-left-width: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper { + display: none; +} + +.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper { + display: block; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input { + padding-right: 40px; +} + +.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper { + display: block; +} + +.ms-CommandBarSearch-iconWrapper { + height: 40px; + line-height: 40px; + cursor: pointer; + padding: 0px 8px; + position: absolute; + width: 34px; + text-align: center; +} + +.ms-CommandBarSearch .ms-Icon:before { + font-size: 17px; + color: #0078d7; +} + +.ms-ContextualMenu { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: none; +} + +.ms-ContextualMenu.is-open { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: 105; +} + +.ms-ContextualMenu-item { + box-sizing: border-box; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: #eaeaea; + position: relative; +} + +.ms-ContextualMenu-item.ms-ContextualMenu-item--header { + color: #0078d7; + font-size: 12px; + text-transform: uppercase; + height: 40px; + line-height: 40px; + padding: 0 18px; +} + +.ms-ContextualMenu-link { + text-decoration: none; + color: #333333; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 18px; + position: relative; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link { + border-color: #ffffff; + } +} + +.ms-ContextualMenu-link:first-child, +.ms-ContextualMenu-link:last-child { + height: 39px; +} + +.ms-ContextualMenu-link:hover, +.ms-ContextualMenu-link:active, +.ms-ContextualMenu-link:focus { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link:hover:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link:hover + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link:active { + border: 1px solid #0078d7; +} + +.ms-ContextualMenu-link:focus { + border-color: #0078d7; + outline: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link:focus { + border-color: #000000; + } +} + +.ms-ContextualMenu-link.is-selected { + background-color: #c7e0f4; + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ContextualMenu-link.is-selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-ContextualMenu-link.is-selected:focus { + border-color: #000000; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } + + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-subMenuIcon, + .ms-ContextualMenu-link.is-selected + .ms-ContextualMenu-caretRight { + color: #ffffff; + } +} + +.ms-ContextualMenu-link.is-disabled { + color: #a6a6a6; + cursor: default; + pointer-events: none; +} + +.ms-ContextualMenu-link.is-disabled:active, +.ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled:active, + .ms-ContextualMenu-link.is-disabled:focus { + border-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-ContextualMenu-link.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ContextualMenu-link.is-disabled { + color: #600000; + } +} + +.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} + +.ms-ContextualMenu-subMenuIcon, +.ms-ContextualMenu-caretRight { + color: #666666; + font-size: 16px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 7px; + z-index: 1; + pointer-events: none; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link { + padding: 0 30px; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected { + background-color: #ffffff; +} + +.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #333333; + content: '\e041'; + font-size: 12px; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; +} + +.ms-DatePicker { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 17px; + z-index: 300; +} + +.ms-DatePicker .ms-TextField { + position: relative; +} + +.ms-DatePicker-picker { + color: #000000; + font-size: 14px; + position: relative; + text-align: left; + z-index: 0; +} + +.ms-DatePicker-event { + color: #666666; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: 5; +} + +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + background: #ffffff; + position: absolute; + min-width: 300px; + display: none; +} + +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + -webkit-animation-name: fadeIn, slideDownIn10; + animation-name: fadeIn, slideDownIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #eaeaea; + display: block; +} + +.ms-DatePicker-picker--opened { + position: relative; + z-index: 10; +} + +.ms-DatePicker-frame { + padding: 1px; +} + +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #0078d7; + margin-top: -1px; +} + +.ms-DatePicker-month:hover, +.ms-DatePicker-year:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-month { + margin-left: 15px; +} + +.ms-DatePicker-year { + margin-left: 5px; +} + +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; +} + +.ms-DatePicker-table td { + margin: 0; + padding: 0; +} + +.ms-DatePicker-table td:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker-day, +.ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + font-weight: normal; + color: #333333; +} + +.ms-DatePicker-day--today { + position: relative; + background-color: #c7e0f4; +} + +.ms-DatePicker-day--disabled:before { + border-top-color: #a6a6a6; +} + +.ms-DatePicker-day--outfocus { + color: #a6a6a6; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: #000000; + background: #eaeaea; +} + +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: #ffffff; + background: #0078d7; +} + +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: #a6a6a6; +} + +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} + +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} + +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + text-align: center; + font-size: 21px; + color: #666666; + position: relative; + top: 3px; +} + +.ms-DatePicker-prevMonth:hover, +.ms-DatePicker-nextMonth:hover, +.ms-DatePicker-prevYear:hover, +.ms-DatePicker-nextYear:hover, +.ms-DatePicker-prevDecade:hover, +.ms-DatePicker-nextDecade:hover { + color: #212121; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0px; + position: absolute; + top: 0px; + width: 140px; + z-index: 5; + cursor: pointer; +} + +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: normal; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +.ms-DatePicker-currentYear { + color: #0078d7; +} + +.ms-DatePicker-currentYear:hover { + color: #005a9e; + cursor: pointer; +} + +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: #f4f4f4; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: normal; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + color: #333333; + text-align: center; +} + +.ms-DatePicker-monthOption:hover, +.ms-DatePicker-yearOption:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-DatePicker-monthOption.is-highlighted, +.ms-DatePicker-yearOption.is-highlighted { + background-color: #333333; + color: #ffffff; +} + +.ms-DatePicker-goToday { + bottom: 9px; + color: #0078d7; + cursor: pointer; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; +} + +.ms-DatePicker-goToday:hover { + outline: 1px solid transparent; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; +} + +.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; +} + +@media (min-width: 460px) { + .ms-DatePicker-holder { + width: 440px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + .ms-DatePicker-dayPicker { + box-sizing: border-box; + border-right: 1px solid #eaeaea; + width: 220px; + } + + .ms-DatePicker-monthPicker { + display: block; + } + + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0 0; + } + + .ms-DatePicker-monthComponents { + width: 210px; + } + + .ms-DatePicker-month { + margin-left: 12px; + } + + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: #333333; + } + + .ms-DatePicker-month:hover, + .ms-DatePicker-year:hover { + color: #333333; + cursor: default; + } + + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + } + + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + .ms-DatePicker-toggleMonthView { + display: none; + } + + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + } + + .ms-DatePicker-monthOption:hover, + .ms-DatePicker-yearOption:hover { + outline: 1px solid transparent; + } + + .ms-DatePicker-goToday { + box-sizing: border-box; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents { + display: block; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker { + display: none; + } + + .ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker { + display: block; + } +} + +@media (max-width: 459px) { + .ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker, + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents { + display: none; + } + + .ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker { + display: block; + } +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 300; + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} + +.ms-Dialog::before { + vertical-align: middle; + display: inline-block; + content: ''; + height: 100%; + width: 0; +} + +.ms-Dialog .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; +} + +.ms-Dialog .ms-Overlay { + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dialog .ms-Overlay { + opacity: 0; + } +} + +.ms-Dialog-main { + vertical-align: middle; + display: inline-block; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: left; + outline: 3px solid transparent; +} + +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + right: 12px; + padding: 8px; + z-index: 10; +} + +.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x { + color: #666666; + font-size: 16px; +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; +} + +.ms-Dialog-content { + position: relative; + width: 100%; +} + +.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; +} + +.ms-Dialog-subText { + margin: 0 0 20px 0; + padding-top: 8px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #333333; + font-size: 12px; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; +} + +.ms-Dialog-actions .ms-Button { + line-height: normal; +} + +.ms-Dialog-actionsRight { + text-align: right; + font-size: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action:first-child { + margin: 0; +} + +.ms-Dialog-actionsRight .ms-Dialog-action + .ms-Dialog-action { + margin: 0 0 0 16px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title { + margin-right: 20px; +} + +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close { + display: block; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title { + font-size: 28px; +} + +.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner { + padding: 0 20px 20px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header { + background-color: #0078d7; + padding: 26px 20px 28px; + margin-bottom: 8px; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title { + font-size: 28px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + color: #ffffff; +} + +.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText { + font-size: 14px; +} + +@media (min-width: 480px) { + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} + +.ms-Dropdown { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 10px; + position: relative; + outline: 0; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:hover .ms-Dropdown-caretDown, +.ms-Dropdown:focus .ms-Dropdown-title, +.ms-Dropdown:focus .ms-Dropdown-caretDown, +.ms-Dropdown:active .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-caretDown { + color: #000000; +} + +.ms-Dropdown:hover .ms-Dropdown-title, +.ms-Dropdown:active .ms-Dropdown-title { + border-color: #767676; +} + +.ms-Dropdown:focus .ms-Dropdown-title { + border-color: #0078d7; +} + +.ms-Dropdown .ms-Label { + display: inline-block; + margin-bottom: 8px; +} + +.ms-Dropdown.is-disabled .ms-Dropdown-title { + background-color: #f4f4f4; + border-color: #f4f4f4; + color: #a6a6a6; + cursor: default; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #00ff00; + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-title { + border-color: #600000; + color: #600000; + } +} + +.ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown.is-disabled .ms-Dropdown-caretDown { + color: #600000; + } +} + +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: fixed; +} + +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: #666666; + font-size: 17px; + position: absolute; + right: 9px; + bottom: 5px; + z-index: 1; + pointer-events: none; +} + +.ms-Dropdown-title { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background: #ffffff; + border: 1px solid #c8c8c8; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; + overflow: hidden; +} + +.ms-Dropdown-items { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-height: 200px; + max-width: 268px; + z-index: 400; + top: 0; + right: 0; + bottom: 0; + overflow-y: scroll; +} + +.ms-Dropdown-items:before { + content: ''; + position: absolute; + z-index: -1; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #eaeaea; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-items { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-items { + border: 1px solid #000000; + } +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item { + border-color: #ffffff; + } +} + +.ms-Dropdown-item:first-child, +.ms-Dropdown-item:last-child { + height: 39px; +} + +.ms-Dropdown-item:hover { + background-color: #eaeaea; + color: #000000; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item:hover { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item:hover:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item:hover { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +.ms-Dropdown-item:active { + background-color: #eaeaea; + border-color: #0078d7; + color: #000000; +} + +.ms-Dropdown-item.is-disabled { + background: #ffffff; + color: #a6a6a6; + cursor: default; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected, +.ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #c7e0f4; + color: #000000; + line-height: 40px; +} + +.ms-Dropdown-item.is-selected:hover, +.ms-Dropdown-item.ms-Dropdown-item--selected:hover { + background-color: #c7e0f4; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #1aebff; + border-color: #1aebff; + color: #000000; + } + + .ms-Dropdown-item.is-selected:focus, + .ms-Dropdown-item.ms-Dropdown-item--selected:focus { + border-color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Dropdown-item.is-selected, + .ms-Dropdown-item.ms-Dropdown-item--selected { + background-color: #37006e; + border-color: #37006e; + color: #ffffff; + } +} + +@media (min-width: 480px) { + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} + +.ms-Facepile { + position: relative; + height: 32px; + width: auto; +} + +.ms-Facepile .ms-PersonaCard { + display: none; + position: absolute; + top: 40px; + height: 200px; +} + +.ms-Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-Facepile-itemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + float: left; + padding: 0; + margin-right: 4px; + outline: transparent; + border-radius: 50%; + vertical-align: top; +} + +.ms-Facepile-itemBtn .ms-Persona-presence, +.ms-Facepile-itemBtn .ms-Persona-details { + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson { + background-color: #0078d7; + color: #ffffff; + font-size: 16px; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover, +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus { + background-color: #005a9e; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active { + background-color: #004578; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled { + background-color: #c8c8c8; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow { + background-color: #eaeaea; + color: #666666; + display: none; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active { + display: block; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover { + color: #212121; +} + +.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled { + color: #c8c8c8; +} + +.ms-Facepile-addPersonIcon { + position: relative; + top: -1px; +} + +.ms-Facepile-overflowText { + font-size: 14px; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results, +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction { + display: none; +} + +.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + line-height: 82px; + height: 74px; + text-transform: none; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Link { + color: #0078d7; + text-decoration: none; + cursor: pointer; +} + +.ms-Link:hover, +.ms-Link:focus { + color: #004578; +} + +.ms-Link:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Link { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Link { + color: #00009f; + } +} + +.ms-List { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style-type: none; +} + +@media (min-width: 480px) { + .ms-List.ms-List--grid .ms-ListItem { + width: 33.33333333333333%; + float: left; + border-width: 0 1px 1px 0; + } + + .ms-List.ms-List--grid .ms-ListItem:nth-child(3n) { + border-width: 0 0 1px 0; + } +} + +.ms-ListItem { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + *zoom: 1; + padding: 9px 28px 3px; + position: relative; + display: block; +} + +.ms-ListItem:before, +.ms-ListItem:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-ListItem:after { + clear: both; +} + +.ms-ListItem-primaryText, +.ms-ListItem-secondaryText, +.ms-ListItem-tertiaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: block; +} + +.ms-ListItem-primaryText { + color: #212121; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + padding-right: 80px; + position: relative; + top: -4px; +} + +.ms-ListItem-secondaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + line-height: 25px; + position: relative; + top: -7px; + padding-right: 30px; +} + +.ms-ListItem-tertiaryText { + color: #767676; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + position: relative; + top: -9px; + margin-bottom: -4px; + padding-right: 30px; +} + +.ms-ListItem-metaText { + color: #333333; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + position: absolute; + right: 30px; + top: 39px; +} + +.ms-ListItem-image { + float: left; + height: 70px; + margin-left: -8px; + margin-right: 10px; + width: 70px; +} + +.ms-ListItem-selectionTarget { + display: none; +} + +.ms-ListItem-actions { + max-width: 80px; + position: absolute; + right: 30px; + text-align: right; + top: 10px; +} + +.ms-ListItem-action { + color: #a6a6a6; + display: inline-block; + font-size: 15px; + position: relative; + text-align: center; + top: 3px; + cursor: pointer; + height: 16px; + width: 16px; +} + +.ms-ListItem-action .ms-Icon { + vertical-align: top; +} + +.ms-ListItem-action:hover { + color: #666666; + outline: 1px solid transparent; +} + +.ms-ListItem.is-unread { + border-left: 3px solid #0078d7; + padding-left: 27px; +} + +.ms-ListItem.is-unread .ms-ListItem-secondaryText, +.ms-ListItem.is-unread .ms-ListItem-metaText { + color: #0078d7; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-ListItem.is-unseen:after { + border-right: 10px solid transparent; + border-top: 10px solid #0078d7; + left: 0; + position: absolute; + top: 0; +} + +.ms-ListItem.is-selectable .ms-ListItem-selectionTarget { + display: block; + height: 20px; + left: 6px; + position: absolute; + top: 13px; + width: 20px; +} + +.ms-ListItem.is-selectable .ms-ListItem-image { + margin-left: 0; +} + +.ms-ListItem.is-selectable:hover { + background-color: #eaeaea; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-ListItem.is-selectable:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + position: absolute; + top: 12px; + left: 6px; + height: 15px; + width: 15px; + border: 1px solid #767676; +} + +.ms-ListItem.is-selected:before { + border: 1px solid transparent; +} + +.ms-ListItem.is-selected:before, +.ms-ListItem.is-selected:hover:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + font-size: 15px; + color: #767676; + position: absolute; + top: 12px; + left: 6px; +} + +.ms-ListItem.is-selected:hover { + background-color: #c7e0f4; + outline: 1px solid transparent; +} + +.ms-ListItem.ms-ListItem--document { + padding: 0; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon { + width: 70px; + height: 70px; + float: left; + text-align: center; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon { + font-size: 38px; + line-height: 70px; + color: #666666; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + padding-top: 15px; + padding-right: 0; + position: static; +} + +.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + padding-top: 6px; +} + +.ms-MessageBanner { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + position: relative; + border-bottom: 1px solid #767676; + background-color: #eff6fc; + min-width: 320px; + width: 100%; + height: 52px; + text-align: center; + overflow: hidden; + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner .ms-Icon { + font-size: 16px; +} + +.ms-MessageBanner.hide { + -webkit-animation-name: fadeOut, slideUpOut20; + animation-name: fadeOut, slideUpOut20; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-MessageBanner.is-hidden { + display: none; +} + +.ms-MessageBanner-expand, +.ms-MessageBanner-close { + height: 52px; + width: 40px; + cursor: pointer; + border: none; + background-color: transparent; +} + +.ms-MessageBanner-expand:focus, +.ms-MessageBanner-close:focus { + outline: 1px solid transparent; +} + +.ms-MessageBanner-close { + position: absolute; + right: 0; + top: 0; + line-height: 52px; + color: #666666; +} + +.ms-MessageBanner-text { + display: inline-block; + padding: 18px 0; + margin-left: 0; + max-width: 770px; + overflow: hidden; + text-align: left; +} + +.ms-MessageBanner-expand { + display: none; + vertical-align: top; +} + +.ms-MessageBanner-expand.is-visible { + display: inline-block; +} + +.ms-MessageBanner-action { + display: inline-block; + vertical-align: top; + margin-top: 10px; + margin-left: 10px; + padding-right: 36px; +} + +.ms-MessageBanner-action .ms-Button { + color: #ffffff; +} + +.ms-MessageBanner-clipper { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; +} + +.ms-MessageBanner.is-expanded { + height: auto; +} + +.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper { + white-space: normal; +} + +@media screen and (max-width: 479px) { + .ms-MessageBanner-expand { + display: inline-block; + } + + .ms-MessageBanner-action { + margin: 0; + display: block; + text-align: right; + padding: 0 10px 10px 0; + } + + .ms-MessageBanner-text { + margin-left: -25px; + padding: 18px 0 10px 0; + min-width: 240px; + } + + .ms-MessageBanner-expand { + padding: 0; + margin-left: -5px; + width: 20px; + } + + .ms-MessageBanner-expand .ms-Icon { + color: #0078d7; + } +} + +.ms-NavBar { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #f4f4f4; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; +} + +.ms-NavBar .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + z-index: 0; +} + +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + right: 27px; + text-align: center; + width: 40px; + cursor: pointer; +} + +.ms-NavBar-items { + display: none; +} + +.ms-NavBar-item { + box-sizing: border-box; + display: block; + height: 40px; + line-height: 40px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + padding-left: 20px; + position: relative; +} + +.ms-NavBar-item:hover { + cursor: pointer; + background-color: #deecf9; + color: #000000; +} + +.ms-NavBar-item:hover .ms-Icon { + color: #333333; +} + +.ms-NavBar-item:active { + color: #0078d7; +} + +.ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-NavBar-item.is-disabled { + color: #a6a6a6; +} + +.ms-NavBar-item.is-disabled:hover { + cursor: default; + border: none; +} + +.ms-NavBar-link { + color: #333333; + text-decoration: none; +} + +.ms-NavBar-link:active { + color: #0078d7; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after { + color: #212121; +} + +.ms-NavBar-chevronDown { + color: #666666; + font-size: 22px; + position: absolute; + top: 10px; + right: 20px; +} + +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; +} + +.ms-NavBar-item.ms-NavBar-item--search:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + color: #666666; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + right: 5px; + top: 0; +} + +.ms-NavBar-item.ms-NavBar-item--search .ms-TextField { + display: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open { + width: 200px; + padding-right: 40px; + border: none; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField { + display: block; +} + +.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field { + border: none; + background-color: transparent; +} + +@media (max-width: 479px) { + .ms-NavBar.is-open .ms-NavBar-items { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + bottom: 0; + display: block; + left: 50px; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + outline: 1px solid transparent; + z-index: 5; + } + + .ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu { + position: relative; + } +} + +@media (min-width: 320px) and (max-width: 479px) { + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown { + -webkit-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + } + + .ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + } + + .ms-NavBar.is-open .ms-Overlay { + display: block; + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media (min-width: 480px) { + .ms-NavBar-openMenu { + display: none; + } + + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 7px 0 0; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + right: 0; + float: none; + position: relative; + } + + .ms-NavBar-item { + float: left; + margin-right: 18px; + font-size: 14px; + padding: 0; + } + + .ms-NavBar-item:hover { + border-bottom: 2px solid #0078d7; + background-color: transparent; + } + + .ms-NavBar-item.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + border-bottom: 2px solid #0078d7; + } + + .ms-NavBar-item.ms-NavBar-item--hasMenu:after { + position: relative; + top: 3px; + padding-top: 0; + right: auto; + } + + .ms-NavBar-item.ms-NavBar-item--right { + float: right; + margin: 0; + } +} + +.ms-OrgChart { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; +} + +.ms-OrgChart-groupTitle { + color: #666666; + line-height: 1; +} + +.ms-OrgChart-list { + padding: 0; + margin: 12px 0 16px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 8px; +} + +.ms-OrgChart-listItemBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} + +.ms-Overlay { + background-color: rgba(255, 255, 255, 0.4); + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 200; +} + +.ms-Overlay.ms-Overlay--dark { + background-color: rgba(0, 0, 0, 0.4); +} + +.ms-Overlay--none { + visibility: hidden; +} + +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + display: none; + pointer-events: none; +} + +.ms-Panel .ms-Overlay { + z-index: 0; + display: none; + pointer-events: none; + opacity: 1; + cursor: pointer; + transition: opacity 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); +} + +.ms-Panel-main { + background-color: #ffffff; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; + z-index: 10; + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + pointer-events: auto; + width: 340px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); + left: auto; + } +} + +.ms-Panel-main .ms-CommandBar { + outline: 1px solid transparent; +} + +@media (min-width: 480px) { + .ms-Panel-main .ms-CommandBar { + display: none; + } +} + +.ms-Panel-main .ms-CommandBarItem { + margin-left: 8px; +} + +.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText { + display: inline-block; +} + +.ms-Panel-main .ms-CommandBar-mainArea { + padding-left: 0; + margin-left: -1px; + overflow: hidden; +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main { + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px -30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands, +.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left .ms-Panel-main { + right: auto; + left: 0; + border-left: 1px solid #eaeaea; + border-right: 1px solid #eaeaea; + width: 272px; + box-shadow: -30px 0px 30px 30px rgba(0, 0, 0, 0.2); +} + +.ms-Panel.ms-Panel--left .ms-Panel-commands, +.ms-Panel.ms-Panel--left .ms-Panel-contentInner { + display: none; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 100%; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--sm .ms-Panel-main { + width: 340px; + } +} + +@media (min-width: 640px) { + .ms-Panel.ms-Panel--md .ms-Panel-main, + .ms-Panel.ms-Panel--lg .ms-Panel-main, + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 48px; + width: auto; + } +} + +@media (min-width: 1024px) { + .ms-Panel.ms-Panel--md .ms-Panel-main { + left: auto; + width: 643px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg .ms-Panel-main { + left: 428px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main { + left: auto; + width: 940px; + } +} + +@media (min-width: 1366px) { + .ms-Panel.ms-Panel--xl .ms-Panel-main { + left: 176px; + } +} + +.ms-Panel.is-open { + display: block; +} + +.ms-Panel.is-open .ms-Panel-main { + opacity: 1; + pointer-events: auto; + display: block; +} + +.ms-Panel.is-open .ms-Overlay { + display: block; + pointer-events: auto; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Panel.is-open .ms-Overlay { + opacity: 0; + } +} + +.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} + +.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + display: none; +} + +@media (min-width: 480px) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideLeftIn40; + animation-name: fadeIn, slideLeftIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideRightOut40; + animation-name: fadeOut, slideRightOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main { + -webkit-animation-name: fadeIn, slideRightIn40; + animation-name: fadeIn, slideRightIn40; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.267s; + animation-duration: 0.267s; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main { + -webkit-animation-name: fadeOut, slideLeftOut40; + animation-name: fadeOut, slideLeftOut40; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay { + -webkit-animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + -webkit-animation-duration: 0.367s; + animation-duration: 0.367s; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.167s; + animation-duration: 0.167s; + } + + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +@media screen and (min-width: 480px) and (-ms-high-contrast: active) { + .ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay, + .ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay { + opacity: 0; + -webkit-animation-name: none; + animation-name: none; + } +} + +.ms-Panel-closeButton { + background: none; + border: 0; + cursor: pointer; + position: absolute; + right: 8px; + top: 0; + height: 40px; + width: 40px; + line-height: 40px; + outline: 0; + padding: 0; + color: #666666; + font-size: 14px; +} + +.ms-Panel-closeButton:hover { + color: #333333; +} + +.ms-Panel-contentInner { + position: absolute; + top: 40px; + bottom: 0; + left: 0; + right: 0; + padding: 0 16px 20px; + overflow-y: auto; +} + +@media (min-width: 640px) { + .ms-Panel-contentInner { + padding: 0 32px 20px; + } +} + +@media (min-width: 1366px) { + .ms-Panel-contentInner { + padding: 0 40px 20px; + } +} + +.ms-Panel-headerText { + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 21px; + color: #333333; + margin: 10px 0; + padding: 4px 0; + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; +} + +@media (min-width: 1024px) { + .ms-Panel-headerText { + margin-top: 30px; + } +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands .ms-CommandBar { + display: block; + } +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover { + background-color: #d7eaf9; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active { + background-color: #b5d8f4; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon { + color: #07288b; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText { + color: #000000; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child { + background-color: #0078d7; + box-shadow: inset 0 1px 0 0 #2488d8; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper { + padding-left: 12px; + padding-right: 12px; + cursor: pointer; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover { + background-color: #005a9e; + box-shadow: none; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText { + color: #ffffff; +} + +.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-name: fadeIn, slideDownIn20; + animation-name: fadeIn, slideDownIn20; + -webkit-animation-duration: 0.367s; + -moz-animation-duration: 0.367s; + -ms-animation-duration: 0.367s; + -o-animation-duration: 0.367s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 250ms; + animation-delay: 250ms; +} + +@media (min-width: 480px) { + .ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; + } +} + +.ms-PeoplePicker { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + background-color: #ffffff; + margin-bottom: 10px; +} + +.ms-PeoplePicker-searchBox { + *zoom: 1; + border: 1px solid #c8c8c8; + box-sizing: border-box; + min-height: 40px; + width: 100%; +} + +.ms-PeoplePicker-searchBox:before, +.ms-PeoplePicker-searchBox:after { + display: table; + content: ''; + line-height: 0; +} + +.ms-PeoplePicker-searchBox:after { + clear: both; +} + +.ms-PeoplePicker-searchBox:hover { + border-color: #767676; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: #0078d7; +} + +.ms-PeoplePicker-searchField { + border: 0; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-persona .ms-Persona { + background-color: #f4f4f4; + float: left; + min-height: 30px; +} + +.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText { + color: #a80000; +} + +.ms-PeoplePicker-personaRemove { + background: none; + border: 0; + cursor: pointer; + background-color: #f4f4f4; + color: #666666; + display: inline-block; + float: left; + text-align: center; + height: 32px; + width: 32px; +} + +.ms-PeoplePicker-personaRemove:hover { + background-color: #eaeaea; + color: #333333; + cursor: pointer; +} + +.ms-PeoplePicker-personaRemove:focus { + background-color: #eaeaea; + color: #333333; + border: 1px solid #0078d7; + outline: none; +} + +.ms-PeoplePicker-results { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + background-color: #ffffff; + border: 1px solid #c8c8c8; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: 305; +} + +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; + opacity: 1; +} + +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +.ms-PeoplePicker-resultGroup { + border-top: 1px solid #eaeaea; +} + +.ms-PeoplePicker-resultGroup:first-child { + border-top: 0; +} + +.ms-PeoplePicker-resultGroupTitle { + color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +.ms-PeoplePicker-resultList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: -1px; + list-style-type: none; +} + +.ms-PeoplePicker-result { + position: relative; +} + +.ms-PeoplePicker-result .ms-Persona:hover { + cursor: pointer; +} + +.ms-PeoplePicker-result .ms-Persona:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-result .ms-Persona-details { + width: 100%; +} + +.ms-PeoplePicker-resultBtn, +.ms-PeoplePicker-peopleListBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + box-sizing: border-box; + height: 34px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker-peopleListBtn { + height: 48px; + } +} + +.ms-PeoplePicker-resultBtn:hover, +.ms-PeoplePicker-peopleListBtn:hover { + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultBtn:focus, +.ms-PeoplePicker-peopleListBtn:focus { + outline: 1; +} + +.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact, +.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact { + height: 32px; +} + +.ms-PeoplePicker-peopleListBtn { + margin-bottom: 0; + padding: 0; +} + +.ms-PeoplePicker-peopleListBtn:hover { + background-color: transparent; +} + +.ms-PeoplePicker-resultAction { + background: none; + border: 0; + cursor: pointer; + display: block; + height: 34px; + transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1); + position: absolute; + right: 0; + top: 0; + width: 30px; + text-align: center; +} + +@media (min-width: 480px) { + .ms-PeoplePicker-resultAction { + height: 48px; + } +} + +.ms-PeoplePicker-resultAction .ms-Icon { + color: #666666; + font-size: 15px; +} + +.ms-PeoplePicker-resultAction:hover { + background-color: #c8c8c8; + outline: 1px solid transparent; +} + +.ms-PeoplePicker-resultAction:active { + background-color: #71afe5; +} + +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +.ms-PeoplePicker-result.is-expanded { + background-color: #f4f4f4; + margin-bottom: 11px; +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent { + display: block; +} + +.ms-PeoplePicker-searchMore { + border-top: 1px solid #eaeaea; + height: 69px; + position: relative; + overflow: hidden; +} + +.ms-PeoplePicker-searchMore .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; +} + +.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle { + background-color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-Spinner { + display: block; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon { + display: none; +} + +.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary { + color: #0078d7; +} + +.ms-PeoplePicker-searchMore.is-searching:hover { + background-color: transparent; + cursor: default; +} + +.ms-PeoplePicker-searchMoreBtn { + background: none; + border: 0; + cursor: pointer; + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; +} + +.ms-PeoplePicker-searchMoreBtn:hover { + background-color: #eaeaea; + cursor: pointer; +} + +.ms-PeoplePicker-searchMoreBtn:focus, +.ms-PeoplePicker-searchMoreBtn:active { + background-color: #c7e0f4; +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; +} + +.ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #333333; + font-size: 16px; + position: absolute; + text-align: center; + top: 27px; + width: 100%; +} + +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-PeoplePicker-searchMoreSecondary { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover { + background-color: inherit; + cursor: default; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: #666666; +} + +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary { + color: #666666; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + line-height: 20px; + position: relative; + top: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups { + max-height: 209px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction { + height: 32px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon { + margin-top: -8px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore { + height: 49px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon { + font-size: 17px; + top: 0; + margin-top: 0; + line-height: 50px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 45px; +} + +.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField { + height: 28px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona, +.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona { + cursor: pointer; +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; +} + +.ms-PeoplePicker-selected.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results { + border-bottom: 0; + padding: 20px 0 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results { + position: relative; + border: 0; + box-shadow: none; + margin: 0; + max-width: 100%; + padding: 0; + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +@media (max-width: 479px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image { + width: 32px; + height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder { + font-size: 28px; + top: 6px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials { + font-size: 12px; + line-height: 32px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence { + left: 19px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details { + padding-left: 8px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; + } + + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText { + display: none; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText { + display: block; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn, + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn { + height: 42px; + } +} + +@media (min-width: 480px) { + .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction { + height: 42px; + } +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable { + padding: 0; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore { + display: none; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active { + display: block; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn, +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn { + padding-left: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon { + width: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary { + font-size: 12px; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon { + top: 0; + line-height: 48px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner { + top: 16px; + left: 14px; + height: 20px; + width: 20px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard { + display: none; + position: absolute; + height: 200px; +} + +.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active { + display: block; +} + +.ms-PeoplePicker-selectedHeader, +.ms-PeoplePicker-peopleListHeader { + color: #0078d7; + font-size: 12px; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople, +.ms-PeoplePicker-peopleList { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 8px; + position: relative; +} + +.ms-PeoplePicker-peopleListItem { + margin-bottom: 6px; + position: relative; +} + +.ms-Persona { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + display: table; + line-height: 1; + position: relative; +} + +.ms-Persona-imageArea { + position: relative; + display: block; + overflow: hidden; + text-align: center; + width: 48px; + height: 48px; + border-radius: 50%; + z-index: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona-imageArea { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona-imageArea { + border: 1px solid #000000; + } +} + +.ms-Persona-placeholder { + color: #ffffff; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 9px; +} + +.ms-Persona-initials { + color: #ffffff; + font-size: 17px; + font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; + line-height: 48px; +} + +.ms-Persona-initials.ms-Persona-initials--lightBlue { + background-color: #6ba5e7; +} + +.ms-Persona-initials.ms-Persona-initials--blue { + background-color: #2d89ef; +} + +.ms-Persona-initials.ms-Persona-initials--darkBlue { + background-color: #2b5797; +} + +.ms-Persona-initials.ms-Persona-initials--teal { + background-color: #00aba9; +} + +.ms-Persona-initials.ms-Persona-initials--lightGreen { + background-color: #99b433; +} + +.ms-Persona-initials.ms-Persona-initials--green { + background-color: #00a300; +} + +.ms-Persona-initials.ms-Persona-initials--darkGreen { + background-color: #1e7145; +} + +.ms-Persona-initials.ms-Persona-initials--lightPink { + background-color: #e773bd; +} + +.ms-Persona-initials.ms-Persona-initials--pink { + background-color: #ff0097; +} + +.ms-Persona-initials.ms-Persona-initials--magenta { + background-color: #7e3878; +} + +.ms-Persona-initials.ms-Persona-initials--purple { + background-color: #603cba; +} + +.ms-Persona-initials.ms-Persona-initials--black { + background-color: #1d1d1d; +} + +.ms-Persona-initials.ms-Persona-initials--orange { + background-color: #da532c; +} + +.ms-Persona-initials.ms-Persona-initials--red { + background-color: #ee1111; +} + +.ms-Persona-initials.ms-Persona-initials--darkRed { + background-color: #b91d47; +} + +.ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 48px; + height: 48px; +} + +.ms-Persona-image[src=''] { + display: none; +} + +.ms-Persona-presence { + background-color: #5dd255; + position: absolute; + height: 12px; + width: 12px; + border-radius: 50%; + top: auto; + left: 34px; + bottom: -1px; + border: 2px solid #ffffff; +} + +.ms-Persona-details { + display: table-cell; + padding: 0 12px; + vertical-align: middle; + overflow: hidden; +} + +.ms-Persona-primaryText, +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-Persona-primaryText { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 17px; + margin-top: -3px; + line-height: 1.4; +} + +.ms-Persona-secondaryText, +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + color: #666666; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + white-space: nowrap; + line-height: 1.3; +} + +.ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona-tertiaryText, +.ms-Persona-optionalText { + padding-top: 5px; + display: none; +} + +.ms-Persona.ms-Persona--square .ms-Persona-imageArea { + background-color: #a6a6a6; + border-radius: 0; +} + +.ms-Persona.ms-Persona--square .ms-Persona-presence { + top: 0; + left: 0; + bottom: auto; + right: auto; + height: 48px; + width: 5px; + border-radius: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--square .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny { + height: 30px; + display: inline-block; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-presence { + right: auto; + top: 10px; + left: 0; + border: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + top: 9px; + border: 1px solid #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Persona.ms-Persona--tiny .ms-Persona-presence { + border: 1px solid #000000; + } +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText { + font-size: 14px; + padding-top: 9px; +} + +.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly { + padding: 0; + background-color: transparent; +} + +.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after { + content: ';'; +} + +.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence { + height: 12px; + width: 12px; + top: 10px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xs .ms-Persona-image { + width: 32px; + height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-placeholder { + font-size: 28px; + top: 6px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-initials { + font-size: 12px; + line-height: 32px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-presence { + left: 19px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-primaryText { + font-size: 14px; + padding-top: 3px; +} + +.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText { + display: none; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence { + height: 32px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-imageArea, +.ms-Persona.ms-Persona--sm .ms-Persona-image { + width: 40px; + height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-placeholder { + font-size: 38px; + top: 5px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-initials { + font-size: 14px; + line-height: 40px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-presence { + left: 27px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-details { + padding-left: 8px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText { + font-size: 14px; +} + +.ms-Persona.ms-Persona--sm .ms-Persona-primaryText, +.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText { + padding-top: 1px; +} + +.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence { + height: 40px; + width: 4px; + left: 0; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-imageArea, +.ms-Persona.ms-Persona--lg .ms-Persona-image { + width: 72px; + height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-placeholder { + font-size: 67px; + top: 10px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-initials { + font-size: 28px; + line-height: 72px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-presence { + left: 49px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText { + padding-top: 3px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + padding-top: 5px; +} + +.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText { + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence { + height: 72px; + width: 7px; + left: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-imageArea, +.ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 100px; + height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 95px; + top: 12px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-initials { + font-size: 42px; + line-height: 100px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 20px; + width: 20px; + left: 71px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-details { + padding-left: 20px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-primaryText { + font-size: 21px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + margin-top: 0; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText { + padding-top: 2px; +} + +.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--xl .ms-Persona-optionalText { + padding-top: 5px; + display: block; +} + +.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence { + height: 100px; + width: 9px; + left: 0; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText { + color: #212121; +} + +.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText, +.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText, +.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText { + color: #333333; +} + +.ms-Persona.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; +} + +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover, +.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus { + background-color: #deecf9; + outline: 1px solid transparent; +} + +.ms-Persona.ms-Persona--available .ms-Persona-presence { + background-color: #5dd255; +} + +.ms-Persona.ms-Persona--away .ms-Persona-presence { + background-color: #ffd200; +} + +.ms-Persona.ms-Persona--blocked .ms-Persona-presence { + background-color: #dedede; + background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%); +} + +.ms-Persona.ms-Persona--busy .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px); +} + +.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence { + background-color: #d93b3b; + background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px); +} + +.ms-Persona.ms-Persona--dnd .ms-Persona-presence { + background-color: #c72d25; + background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%); +} + +.ms-Persona.ms-Persona--offline .ms-Persona-presence { + background-color: #b6cfd8; +} + +.ms-PersonaCard { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + -webkit-animation-name: fadeIn, slideUpIn10; + animation-name: fadeIn, slideUpIn10; + -webkit-animation-duration: 0.167s; + -moz-animation-duration: 0.167s; + -ms-animation-duration: 0.167s; + -o-animation-duration: 0.167s; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + bottom: 0; + left: 0; + position: fixed; + right: 0; + outline: 1px solid transparent; +} + +.ms-PersonaCard-persona { + background-color: #f4f4f4; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea { + width: 80px; + height: 80px; + margin: 12px 0 12px 20px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-image { + width: 80px; + height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder { + font-size: 75px; + left: 1px; + top: 11px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials { + font-size: 28px; + line-height: 80px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence { + border-color: #f4f4f4; + left: 77px; + bottom: 12px; +} + +.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText, +.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText { + display: block; +} + +.ms-PersonaCard-actions { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid #c8c8c8; + background-color: #ffffff; + height: 48px; +} + +.ms-PersonaCard-action, +.ms-PersonaCard-overflow { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 48px; + line-height: 48px; + padding: 0 10px; + color: #666666; + position: relative; + box-sizing: border-box; +} + +.ms-PersonaCard-action:hover, +.ms-PersonaCard-overflow:hover { + color: #212121; +} + +.ms-PersonaCard-action:active, +.ms-PersonaCard-overflow:active { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active, +.is-active.ms-PersonaCard-overflow { + color: #0078d7; +} + +.ms-PersonaCard-action.is-active:after, +.is-active.ms-PersonaCard-overflow:after { + box-sizing: border-box; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + content: ''; + width: 10px; + height: 10px; + border: 1px solid #c8c8c8; + background-color: #ffffff; + position: absolute; + border-right: 0; + border-bottom: 0; + bottom: -4px; + left: 15px; +} + +.ms-PersonaCard-overflow { + font-size: 14px; + color: #333333; + float: right; + margin-top: -1px; +} + +.ms-PersonaCard-overflow:hover { + color: #0078d7; +} + +.ms-PersonaCard-orgChart { + position: absolute; + right: 12px; + top: 0; +} + +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: #ffffff; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + color: #666666; + padding: 9px 20px; + transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s; + box-sizing: border-box; +} + +.ms-PersonaCard-actionDetails.is-collapsed { + height: 30px; + overflow: hidden; +} + +.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after { + content: '\e088'; +} + +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} + +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { + margin-left: 0; +} + +.ms-PersonaCard-detailPhone { + margin-left: -100%; +} + +.ms-PersonaCard-detailVideo { + margin-left: -200%; +} + +.ms-PersonaCard-detailMail { + margin-left: -300%; +} + +.ms-PersonaCard-detailOrg { + margin-left: -400%; +} + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4 { + max-height: 78px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height 0.25s ease; +} + +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +.ms-PersonaCard-detailExpander { + color: #333333; + cursor: pointer; + font-size: 15px; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; +} + +.ms-PersonaCard-detailExpander:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e087'; +} + +.ms-PersonaCard-detailLine { + color: #333333; + line-height: 30px; +} + +.ms-PersonaCard-detailLabel { + color: #666666; +} + +.ms-PersonaCard-action.ms-PersonaCard-orgChart:after, +.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after { + display: none; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea, +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image { + width: 100px; + height: 100px; + margin: 0; +} + +.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence { + left: 0; +} + +@media (min-width: 480px) { + .ms-PersonaCard { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); + max-width: 360px; + position: relative; + } +} + +.ms-Pivot { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + height: 40px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +.ms-Pivot-link { + color: #333333; + display: inline-block; + position: relative; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 15px; + line-height: 40px; + margin-right: 8px; +} + +.ms-Pivot-link:after { + content: ''; + width: 100%; + position: absolute; + display: none; + bottom: 0; + left: 0; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:after { + background-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:after { + background-color: #37006e; + } +} + +.ms-Pivot-link:hover, +.ms-Pivot-link:focus, +.ms-Pivot-link:active { + color: #000000; + cursor: pointer; +} + +.ms-Pivot-link:hover + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:focus + .ms-Pivot-dropdownIcon, +.ms-Pivot-link:active + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-link:active { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link:active { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link:active { + color: #37006e; + } +} + +.ms-Pivot-link:active:after { + display: block; +} + +.ms-Pivot-link.is-selected { + color: #000000; + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot-link.is-selected { + color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot-link.is-selected { + color: #37006e; + } +} + +.ms-Pivot-link.is-selected:after { + display: block; +} + +.ms-Pivot-link.is-selected + .ms-Pivot-dropdownIcon { + color: #212121; +} + +.ms-Pivot-dropdownIcon { + font-size: 16px; + position: relative; + top: 2px; +} + +.ms-Pivot-link.ms-Pivot-link--overflow { + color: #666666; +} + +.ms-Pivot-link.ms-Pivot-link--overflow.is-selected { + color: #0078d7; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + color: #212121; +} + +.ms-Pivot-link.ms-Pivot-link--overflow:active:after { + display: none; +} + +.ms-Pivot-ellipsis { + font-size: 15px; + position: relative; + top: 0; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 17px; +} + +.ms-Pivot.ms-Pivot--tabs { + height: 40px; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link { + height: 40px; + background-color: #f4f4f4; + line-height: 40px; + margin-right: -2px; + padding: 0 10px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif !important; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { + color: #000000; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + color: #ffffff !important; + background-color: #0078d7; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #0078d7; + color: #ffffff; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #1aebff; + color: #000000; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + background-color: #37006e; + color: #ffffff; + } +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected), +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected) { + background-color: #ffffff; +} + +.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active { + background-color: #0078d7 !important; +} + +@media (min-width: 640px) { + .ms-Pivot-link { + font-size: 14px; + } + + .ms-Pivot-link.ms-Pivot-link--overflow:after { + font-size: 14px; + } +} + +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected { + font-family: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + } +} + +.ms-ProgressIndicator-itemName { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-top: 4px; + line-height: 20px; +} + +.ms-ProgressIndicator-itemDescription { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + color: #767676; + font-size: 11px; + line-height: 18px; +} + +.ms-ProgressIndicator-itemProgress { + position: relative; + width: 180px; + height: 2px; + padding: 8px 0; +} + +.ms-ProgressIndicator-progressTrack { + position: absolute; + width: 100%; + height: 2px; + background-color: #eaeaea; + outline: 1px solid transparent; +} + +.ms-ProgressIndicator-progressBar { + position: absolute; + height: 2px; + background-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-ProgressIndicator-progressBar { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-ProgressIndicator-progressBar { + background-color: #000000; + } +} + +.ms-SearchBox { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + margin-bottom: 10px; + display: inline-block; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-SearchBox.is-disabled .ms-SearchBox-label { + color: #600000; + } +} + +.ms-SearchBox.is-disabled .ms-SearchBox-icon { + color: #c8c8c8; +} + +.ms-SearchBox.is-disabled .ms-SearchBox-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-SearchBox.is-active .ms-SearchBox-closeButton { + display: block; + outline: transparent 1px solid; +} + +.ms-SearchBox-field { + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #71afe5; + outline: transparent 1px solid; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + color: #000000; + height: 32px; + padding: 6px 3px 7px 10px; + width: 180px; + background-color: transparent; + z-index: 5; +} + +.ms-SearchBox-field.hovering { + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label { + color: #000000; +} + +.ms-SearchBox-field.hovering + .ms-SearchBox-label .ms-Icon { + color: #333333; +} + +.ms-SearchBox-field:focus { + padding: 6px 32px 7px 10px; + border-color: #0078d7; + background-color: #deecf9; +} + +.ms-SearchBox-field::-ms-clear { + display: none; +} + +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + height: 32px; + width: 32px; + background-color: #0078d7; + text-align: center; + display: none; + font-size: 17px; + color: #ffffff; + z-index: 10; +} + +.ms-SearchBox-label { + position: absolute; + top: 0; + left: 0; + padding-left: 8px; + line-height: 32px; + color: #666666; +} + +.ms-SearchBox-icon { + margin-right: 7px; + font-size: 17px; + color: #767676; +} + +.ms-Spinner { + position: relative; + height: 20px; +} + +.ms-Spinner.ms-Spinner--large { + height: 28px; +} + +.ms-Spinner.ms-Spinner--large .ms-Spinner-label { + left: 34px; + top: 6px; +} + +.ms-Spinner-circle { + position: absolute; + border-radius: 100px; + background-color: #0078d7; + opacity: 0; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Spinner-circle { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Spinner-circle { + background-color: #000000; + } +} + +.ms-Spinner-label { + position: relative; + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + color: #0078d7; + left: 28px; + top: 2px; +} + +.ms-Table { + display: table; + width: 100%; + border-collapse: collapse; +} + +.ms-Table--fixed { + table-layout: fixed; +} + +.ms-Table tr, +.ms-Table-row { + display: table-row; + line-height: 30px; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; +} + +.ms-Table tr:hover, +.ms-Table-row:hover { + background-color: #f4f4f4; + cursor: pointer; + outline: 1px solid transparent; +} + +.ms-Table tr.is-selected, +.ms-Table-row.is-selected { + background-color: #c7e0f4; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck, +.ms-Table-row.is-selected .ms-Table-rowCheck { + background-color: #0078d7; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:before, +.ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: none; +} + +.ms-Table tr.is-selected .ms-Table-rowCheck:after, +.ms-Table-row.is-selected .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #ffffff; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table th, +.ms-Table td, +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +.ms-Table thead th, +.ms-Table-head { + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 11px; + color: #666666; +} + +.ms-Table thead td, +.ms-Table thead th, +.ms-Table thead .ms-Table-cell, +.ms-Table thead .ms-Table-rowCheck, +.ms-Table-head td, +.ms-Table-head th, +.ms-Table-head .ms-Table-cell, +.ms-Table-head .ms-Table-rowCheck { + font-weight: normal; + text-align: left; + border-bottom: 1px solid #eaeaea; +} + +.ms-Table thead .ms-Table-rowCheck:after, +.ms-Table-head .ms-Table-rowCheck:after { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; + content: '\e041'; + color: #a6a6a6; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; +} + +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + padding: 0; +} + +.ms-Table-rowCheck:before { + border: 1px solid #a6a6a6; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Table-row.is-selected .ms-Table-rowCheck { + background: none; + } + + .ms-Table-row.is-selected .ms-Table-rowCheck:before { + display: block; + } +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + margin-bottom: 8px; +} + +.ms-TextField.is-disabled .ms-TextField-field { + background-color: #f4f4f4; + border-color: #f4f4f4; + pointer-events: none; + cursor: default; +} + +.ms-TextField.is-disabled::-webkit-input-placeholder, +.ms-TextField.is-disabled::-moz-placeholder, +.ms-TextField.is-disabled:-moz-placeholder, +.ms-TextField.is-disabled:-ms-input-placeholder { + color: #a6a6a6; +} + +.ms-TextField.is-required .ms-Label:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-required::-webkit-input-placeholder:after, +.ms-TextField.is-required::-moz-placeholder:after, +.ms-TextField.is-required:-moz-placeholder:after, +.ms-TextField.is-required:-ms-input-placeholder:after { + content: ' *'; + color: #a80000; +} + +.ms-TextField.is-active { + border-color: #0078d7; +} + +.ms-TextField-field { + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + border: 1px solid #c8c8c8; + border-radius: 0; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #333333; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + outline: 0; +} + +.ms-TextField-field:hover { + border-color: #767676; +} + +.ms-TextField-field:focus { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField-field:hover, + .ms-TextField-field:focus { + border-color: #37006e; + } +} + +.ms-TextField-field::-webkit-input-placeholder, +.ms-TextField-field::-moz-placeholder, +.ms-TextField-field:-moz-placeholder, +.ms-TextField-field:-ms-input-placeholder { + color: #666666; +} + +.ms-TextField-description { + color: #767676; + font-size: 11px; +} + +.ms-TextField.ms-TextField--placeholder { + position: relative; +} + +.ms-TextField.ms-TextField--placeholder .ms-Label { + position: absolute; + font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + color: #666666; + padding: 7px 0 7px 10px; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled { + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid #c8c8c8; + display: table; + width: 100%; + min-width: 180px; +} + +.ms-TextField.ms-TextField--underlined:hover { + border-color: #767676; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined:hover { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--underlined:active, +.ms-TextField.ms-TextField--underlined:focus { + border-color: #0078d7; +} + +.ms-TextField.ms-TextField--underlined .ms-Label { + font-size: 12px; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + white-space: nowrap; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field { + border: 0; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; +} + +.ms-TextField.ms-TextField--underlined .ms-TextField-field:active, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus, +.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover { + outline: 0; +} + +.ms-TextField.ms-TextField--underlined.is-disabled { + border-bottom-color: #eaeaea; +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field { + background-color: transparent; + color: #a6a6a6; +} + +.ms-TextField.ms-TextField--underlined.is-active { + border-color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #1aebff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-TextField.ms-TextField--underlined.is-active { + border-color: #37006e; + } +} + +.ms-TextField.ms-TextField--multiline .ms-TextField-field { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; +} + +.ms-Label { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 12px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + box-sizing: border-box; + display: block; + padding: 5px 0; +} + +.ms-Label.is-required:after { + content: ' *'; + color: #a80000; +} + +.ms-Label.is-disabled { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Label.is-disabled { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Label.is-disabled { + color: #600000; + } +} + +.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + box-sizing: border-box; + margin: 0; + padding: 0; + box-shadow: none; + position: relative; + display: block; + margin-bottom: 26px; +} + +.ms-Toggle .ms-Label { + position: relative; + padding: 0 0 0 62px; + font-size: 12px; +} + +.ms-Toggle:hover .ms-Label { + color: #000000; +} + +.ms-Toggle:active .ms-Label { + color: #333333; +} + +.ms-Toggle.is-disabled .ms-Label { + color: #a6a6a6; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Label { + color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Label { + color: #600000; + } +} + +.ms-Toggle.is-disabled .ms-Toggle-field { + background-color: #ffffff !important; + border-color: #c8c8c8 !important; + pointer-events: none !important; + cursor: default !important; +} + +.ms-Toggle.is-disabled .ms-Toggle-field:before { + background-color: #c8c8c8 !important; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #00ff00; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle.is-disabled .ms-Toggle-field, + .ms-Toggle.is-disabled .ms-Toggle-field:before { + border-color: #600000; + } +} + +.ms-Toggle-description { + position: relative; + font-size: 12px; + vertical-align: top; + display: block; + margin-bottom: 8px; +} + +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 57px; + height: 20px; + box-sizing: border-box; + border: 2.5px #c8c8c8 solid; + cursor: pointer; +} + +.ms-Toggle-input { + position: absolute; + opacity: 0; + top: 0; +} + +.ms-Toggle-input + .ms-Toggle-field { + background-color: #f4f4f4; +} + +.ms-Toggle-input + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + left: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input + .ms-Toggle-field:before { + right: auto; + border-right: 2.5px solid #ffffff; +} + +.ms-Toggle-input + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--off { + display: block; +} + +.ms-Toggle-input + .ms-Toggle-field .ms-Label--on { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -2.5px; + right: -2.5px; + width: 12px; + height: 20px; + background-color: #767676; + outline: 2px solid transparent; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border: 2.5px solid #ffffff; + height: 15px; + outline: 0; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field:before { + border-color: #000000; + } +} + +.ms-Toggle-input:checked + .ms-Toggle-field:before { + left: auto; + border-left: 2.5px solid #ffffff; +} + +.ms-Toggle-input:checked + .ms-Toggle-field:active { + background-color: #0078d7; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--off { + display: none; +} + +.ms-Toggle-input:checked + .ms-Toggle-field .ms-Label--on { + display: block; +} + +@media screen and (-ms-high-contrast: active) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #ffffff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .ms-Toggle-input:checked + .ms-Toggle-field { + background-color: #000000; + } +} + +.ms-Toggle-input:focus + .ms-Toggle-field, +.ms-Toggle-input:hover + .ms-Toggle-field { + background-color: #eaeaea; +} + +.ms-Toggle-input:focus:checked + .ms-Toggle-field, +.ms-Toggle-input:hover:checked + .ms-Toggle-field { + background-color: #005a9e; +} + +.ms-Toggle.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 40px; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + margin-bottom: 0; +} + +.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field { + float: right; +} + +.u-contentCenter { + position: relative; + margin: 0 auto; + max-width: 100%; + transition: 0.167s all cubic-bezier(0.1, 0.9, 0.2, 1); +} + +@media (min-width: 640px) { + .u-contentCenter { + max-width: 960px; + } +} + +@media (min-width: 1366px) { + .HomePage .u-contentCenter, + .ChannelPage .u-contentCenter { + max-width: 1200px; + } +} + +* { + box-sizing: border-box; +} + +html, +body { + color: #333333; + font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; + font-size: 14px; + font-weight: normal; + padding: 0; + margin: 0; +} + +a { + color: #0078d7; + text-decoration: none; + cursor: pointer; + font-size: inherit; + text-decoration: none; +} + +a:hover, +a:focus { + color: #004578; +} + +a:active { + color: #0078d7; +} + +@media screen and (-ms-high-contrast: active) { + a { + color: #8080ff; + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + a { + color: #00009f; + } +} + +.VideoPortal-content { + position: relative; +} + +.VideoPortal-navBar { + display: block; + top: 0; + width: 100%; + z-index: 101; + height: 40px; +} + +.VideoPortal-page { + overflow: visible; + position: relative; + padding-bottom: 50px; +} + +.ms-NavBar.is-open .ms-NavBar-items { + z-index: 1; +} + +.ms-NavBar-link { + color: #333333; + text-decoration: none; +} + +@media (min-width: 480px) { + .ms-NavBar-item.is-selected { + font-size: inherit; + } +} + +.VideoList-item.ms-Grid-col { + margin-bottom: 16px; + float: none; + display: inline-block; + vertical-align: top; + padding-left: 8px; + padding-right: 12px; +} + +.VideoList-thumbLink { + display: block; + position: relative; + width: 100%; + padding-bottom: 56.25%; +} + +.VideoList-thumbImg { + max-width: 100%; + min-width: 100%; + position: absolute; +} + +.VideoList-thumbCaption { + position: absolute; + right: 5px; + bottom: 5px; + padding: 3px; + color: #ffffff; + font-size: 12px; + background-color: rgba(0, 0, 0, 0.4); +} + +.VideoList-text { + padding-top: 5px; + margin: 0; +} + +.VideoList-title, +.VideoList-channel, +.VideoList-viewCount { + display: block; +} + +.VideoList-title { + display: block; + top: 0; + left: 10px; + bottom: 50%; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.VideoList-channel { + bottom: 1.2em; +} + +.VideoList-viewCount { + bottom: 0; +} + +@media (min-width: 480px) { + .VideoList-item { + margin-right: -4px; + } +} + +.SpotLight-container { + background-color: #212121; +} + +.SpotLightList { + white-space: nowrap; + overflow-x: scroll; + overflow-y: hidden; + position: relative; +} + +.SpotLight-title { + text-indent: 16px; +} + +.SpotLight-item { + position: relative; + display: inline-block; + float: none; + margin: 0; +} + +.SpotLight-thumb { + padding: 10px; +} + +.SpotLight-thumbImg { + max-width: 100%; + min-width: 100%; +} + +.SpotLight-text { + position: absolute; + right: 10px; + bottom: 13px; + left: 10px; + overflow: hidden; + color: #ffffff; + background: rgba(0, 0, 0, 0.4); + padding: 5px; +} + +.SpotLight-videoTitle, +.SpotLight-videoLength { + color: #ffffff; + display: block; +} + +@media (min-width: 640px) { + .SpotLightList { + overflow: hidden; + } + + .SpotLight-container { + padding: 10px 0; + } +} + +@media (min-width: 1024px) { + .SpotLight-title { + text-indent: 8px; + } +} + +.HomePage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelList-title { + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.ChannelList-titleText { + margin-right: 7px; +} + +.PlayerPage-theater { + background-color: #212121; +} + +.VideoPlayer-player { + max-width: 100%; + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; +} + +.VideoPlayer-player iframe, +.VideoPlayer-player video, +.VideoPlayer-player .VideoPlayer-iframe { + background-color: #666666; + position: absolute; + top: 0; + left: 0; + width: 1px; + min-width: 100%; + *width: 100%; + height: 100%; + min-height: 100%; + cursor: pointer; +} + +.VideoPlayer-player iframe:after, +.VideoPlayer-player video:after, +.VideoPlayer-player .VideoPlayer-iframe:after { + position: absolute; + content: ''; + display: block; + width: 0; + height: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 90px solid rgba(0, 0, 0, 0.4); + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + transition: 0.167s border-color cubic-bezier(0.1, 0.25, 0.75, 0.9); +} + +.VideoPlayer-player iframe:hover:after, +.VideoPlayer-player video:hover:after, +.VideoPlayer-player .VideoPlayer-iframe:hover:after { + border-left-color: rgba(0, 0, 0, 0.75); +} + +.PlayerPage-content { + padding: 0 10px; +} + +.PlayerPage-info { + margin-bottom: 20px; + padding-right: 32px; +} + +.PlayerPage-header { + margin-bottom: 20px; +} + +.PlayerPage-titleArea { + margin-top: 17px; + margin-bottom: 8px; +} + +.PlayerPage-title { + margin-bottom: 5px; + margin-top: 0; + display: inline-block; +} + +.PlayerPage-titleSeparator { + display: inline-block; + margin: 0 10px; + position: relative; + bottom: 2px; +} + +.PlayerPage-channelLink { + font-size: 17px; + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.PlayerPage-channelLink:hover { + color: #000000; +} + +.PlayerPage-channelText { + position: relative; + bottom: 2px; +} + +.PlayerPage-metaData { + margin-bottom: 10px; +} + +.PlayerPage-descriptionArea { + margin-bottom: 10px; +} + +.PlayerPage-description { + display: inline; + word-wrap: break-word; +} + +.PlayerPage-descriptionField { + position: relative; + margin-top: 17px; +} + +.PlayerPage-viewCountText { + margin-right: 5px; +} + +.SampleVideo-content { + background-color: #333333; + height: 120px; +} + +@media (min-width: 320px) { + .PlayerPage-content { + padding: 0 10px 0 16px; + } + + .PlayerPage-grid { + padding: 0; + } +} + +@media (min-width: 480px) { + .PlayerPage-relatedList .VideoList-title { + font-size: 15px; + margin-bottom: 5px; + } + + .PlayerPage-relatedList .VideoList-channel, + .PlayerPage-relatedList .VideoList-viewCount { + font-size: 14px; + } +} + +@media (min-width: 640px) { + .PlayerPage-header { + margin-bottom: 25px; + } + + .PlayerPage-titleArea { + margin-top: 35px; + } + + .PlayerPage-description { + font-size: 14px; + } + + .PlayerPage-title { + font-size: 28px; + } + + .PlayerPage-metaData { + font-size: 17px; + } + + .PlayerPage-channelLink { + font-size: 21px; + } +} + +@media (min-width: 1024px) { + .PlayerPage-content { + padding: 0; + } + + .PlayerPage-relatedTitle { + margin-top: 42px; + } + + .PlayerPage-relatedList .VideoList-text { + padding-top: 0; + } + + .PlayerPage-relatedList .VideoList-title { + margin-bottom: 5px; + line-height: 1.2em; + max-height: 3.6em; + overflow: hidden; + white-space: normal; + } +} + +.ChannelPage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelPage-pivots { + margin-bottom: 20px; +} + +.ChannelPage-pivots .ms-Pivot-link { + font-size: 21px; +} + +.ChannelsPage { + padding: 10px; +} + +.ChannelGroup-title { + padding-bottom: 10px; + border-bottom: 1px solid #eaeaea; +} + +.ChannelGroup-channel { + padding: 10px 0 10px 10px; + border-width: 4px; + border-left-style: solid; + margin-bottom: 10px; + display: block; +} + +.ChannelGroup-channel:hover { + color: #000000; +} + +@media (min-width: 480px) { + .ChannelsPage { + padding: 20px; + } +} diff --git a/dist/samples/VideoPortal/css/VideoPortal.min.css b/dist/samples/VideoPortal/css/VideoPortal.min.css new file mode 100644 index 000000000..c9c578dd9 --- /dev/null +++ b/dist/samples/VideoPortal/css/VideoPortal.min.css @@ -0,0 +1 @@ +.ms-Breadcrumb{margin:23px 0 1px}.ms-Breadcrumb.is-overflow .ms-Breadcrumb-overflow{display:inline}.ms-Breadcrumb-chevron{font-size:17px;color:#666;vertical-align:top;margin:10px 0}.ms-Breadcrumb-list{display:inline;white-space:nowrap;padding:0;margin:0}.ms-Breadcrumb-list .ms-Breadcrumb-listItem{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block}.ms-Breadcrumb-list .ms-Breadcrumb-listItem:last-of-type .ms-Breadcrumb-chevron{display:none}.ms-Breadcrumb-overflow{display:none;position:relative;margin-right:-4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{font-size:12px;display:inline-block;color:#0078d7;margin-right:-4px;padding:12px 8px 3px;cursor:pointer}.ms-Breadcrumb-overflowMenu{display:none;position:absolute}.ms-Breadcrumb-overflowMenu.is-open{display:block;top:36px;left:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;z-index:105}.ms-Breadcrumb-overflowMenu:before{position:absolute;box-shadow:0 0 5px 0 rgba(0,0,0,.4);top:-6px;left:6px;content:' ';width:16px;height:16px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu{border:none;box-shadow:none;position:relative;width:190px}.ms-Breadcrumb-overflowMenu .ms-ContextualMenu.is-open{margin-bottom:0}.ms-Breadcrumb-itemLink,.ms-Breadcrumb-overflowButton{text-decoration:none;outline:transparent}.ms-Breadcrumb-itemLink:hover,.ms-Breadcrumb-overflowButton:hover{background-color:#f4f4f4;cursor:pointer}.ms-Breadcrumb-itemLink:focus,.ms-Breadcrumb-overflowButton:focus{outline:1px solid #767676;color:#000}.ms-Breadcrumb-itemLink:active,.ms-Breadcrumb-overflowButton:active{outline:transparent;background-color:#c8c8c8}.ms-Breadcrumb-itemLink{color:#333;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;font-weight:400;display:inline-block;padding:0 4px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-width:639px){.ms-Breadcrumb{margin:10px 0}.ms-Breadcrumb-itemLink{font-size:17px}.ms-Breadcrumb-chevron{font-size:14px;margin-top:7px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:8px;padding-bottom:3px}}@media screen and (max-width:479px){.ms-Breadcrumb-itemLink{font-size:14px;max-width:116px}.ms-Breadcrumb-chevron{margin-top:4px}.ms-Breadcrumb-overflow .ms-Breadcrumb-overflowButton{padding-top:5px;padding-bottom:3px}}.ms-Button{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;border:1px solid #f4f4f4;cursor:pointer;display:inline-block;height:32px;min-width:80px;padding:4px 20px 6px}.ms-Button:hover{background-color:#eaeaea;border-color:#eaeaea;outline:1px solid transparent}.ms-Button:hover .ms-Button-label{color:#000}.ms-Button:focus{background-color:#eaeaea;border-color:#0078d7;outline:1px solid transparent}.ms-Button:focus .ms-Button-label{color:#000}.ms-Button:active{background-color:#0078d7;border-color:#0078d7}.ms-Button:active .ms-Button-label{color:#fff}.ms-Button.is-disabled,.ms-Button:disabled{background-color:#f4f4f4;border-color:#f4f4f4;cursor:default}.ms-Button.is-disabled .ms-Button-label,.ms-Button:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.is-disabled:focus,.ms-Button.is-disabled:hover,.ms-Button:disabled:focus,.ms-Button:disabled:hover{outline:0}.ms-Button+.ms-Button{margin-left:6px}.ms-Button-label{color:#333;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px}.ms-Button-description,.ms-Button-icon{display:none}.ms-Button.ms-Button--primary{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary .ms-Button-label{color:#fff}.ms-Button.ms-Button--primary:hover{background-color:#005a9e;border-color:#005a9e}.ms-Button.ms-Button--primary:focus{background-color:#005a9e;border-color:#004578}.ms-Button.ms-Button--primary:active{background-color:#0078d7;border-color:#0078d7}.ms-Button.ms-Button--primary.is-disabled,.ms-Button.ms-Button--primary:disabled{background-color:#f4f4f4;border-color:#f4f4f4}.ms-Button.ms-Button--primary.is-disabled .ms-Button-label,.ms-Button.ms-Button--primary:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--hero{background-color:transparent;border:none;vertical-align:top;line-height:normal}.ms-Button.ms-Button--hero .ms-Button-icon{color:#0078d7;display:inline-block;font-size:12px;position:relative;top:-8px;text-align:center}.ms-Button.ms-Button--hero .ms-Button-icon .ms-Icon{border-radius:18px;border:1px solid #0078d7;height:18px;line-height:18px;width:18px;font-size:12px;margin:0}.ms-Button.ms-Button--hero .ms-Button-label{color:#0078d7;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;position:relative;top:-5px;text-decoration:none}.ms-Button.ms-Button--hero:focus .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:hover .ms-Button-icon .ms-Icon{color:#005a9e}.ms-Button.ms-Button--hero:focus .ms-Button-label,.ms-Button.ms-Button--hero:hover .ms-Button-label{color:#004578}.ms-Button.ms-Button--hero:active .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--hero.is-disabled .ms-Button-icon .ms-Icon,.ms-Button.ms-Button--hero:disabled .ms-Button-icon .ms-Icon{color:#c8c8c8}.ms-Button.ms-Button--hero.is-disabled .ms-Button-label,.ms-Button.ms-Button--hero:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound{height:auto;min-height:72px;max-width:280px;padding:20px}.ms-Button.ms-Button--compound .ms-Button-label{display:block;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;position:relative;text-align:left;margin-top:-5px}.ms-Button.ms-Button--compound .ms-Button-description{color:#666;display:block;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;position:relative;text-align:left;top:3px}.ms-Button.ms-Button--compound:hover .ms-Button-description{color:#212121}.ms-Button.ms-Button--compound:focus{border-color:#0078d7;background-color:#f4f4f4}.ms-Button.ms-Button--compound:focus .ms-Button-label{color:#333}.ms-Button.ms-Button--compound:focus .ms-Button-description{color:#666}.ms-Button.ms-Button--compound:active{background-color:#0078d7}.ms-Button.ms-Button--compound:active .ms-Button-description,.ms-Button.ms-Button--compound:active .ms-Button-label{color:#fff}.ms-Button.ms-Button--compound.is-disabled .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled .ms-Button-label,.ms-Button.ms-Button--compound:disabled .ms-Button-description,.ms-Button.ms-Button--compound:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--compound.is-disabled:active,.ms-Button.ms-Button--compound.is-disabled:focus,.ms-Button.ms-Button--compound:disabled:active,.ms-Button.ms-Button--compound:disabled:focus{border-color:#f4f4f4;background-color:#f4f4f4}.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:active .ms-Button-label,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound.is-disabled:focus .ms-Button-label,.ms-Button.ms-Button--compound:disabled:active .ms-Button-description,.ms-Button.ms-Button--compound:disabled:active .ms-Button-label,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-description,.ms-Button.ms-Button--compound:disabled:focus .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command{background-color:transparent;border:none;height:32px;line-height:32px;min-width:0;padding:0 8px;text-align:left;font-size:14px}.ms-Button.ms-Button--command .ms-Button-icon{color:#666;display:inline-block;margin-right:4px;position:relative}.ms-Button.ms-Button--command .ms-Button-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Button.ms-Button--command:focus .ms-Button-icon,.ms-Button.ms-Button--command:hover .ms-Button-icon{color:#212121}.ms-Button.ms-Button--command:focus .ms-Button-label,.ms-Button.ms-Button--command:hover .ms-Button-label{color:#000}.ms-Button.ms-Button--command:active .ms-Button-icon,.ms-Button.ms-Button--command:active .ms-Button-label{color:#0078d7}.ms-Button.ms-Button--command.is-disabled .ms-Button-icon,.ms-Button.ms-Button--command:disabled .ms-Button-icon{color:#c8c8c8}.ms-Button.ms-Button--command.is-disabled .ms-Button-label,.ms-Button.ms-Button--command:disabled .ms-Button-label{color:#a6a6a6}.ms-Button.ms-Button--command+.ms-Button.ms-Button--command{margin-left:14px}.ms-Callout{z-index:100;margin:16px auto;position:relative;width:288px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{content:'';position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:0;width:0}.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:before{z-index:0;outline:1px solid transparent;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowTop:after{z-index:10}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{top:40px;display:none}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before{border-top:10px solid #fff;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;left:-10px}.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid #fff;border-left:10px solid transparent;right:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{left:0;right:0;margin:0 auto;width:0}.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border-top:10px solid #fff;border-right:10px solid #fff;border-bottom:10px solid transparent;border-left:10px solid transparent;top:-10px}.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before{border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid #fff;bottom:-10px}@media screen and (-ms-high-contrast:active){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{border:0;width:20px;height:20px;background-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Callout.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--arrowTop:before{background-color:#fff}}.ms-Callout-main{position:relative;background-color:#fff;box-sizing:border-box;outline:1px solid transparent;z-index:5;box-shadow:0 0 5px 0 rgba(0,0,0,.4)}.ms-Callout-close{margin:0;border:0;background:none;cursor:pointer;position:absolute;top:12px;right:12px;padding:8px;width:32px;height:32px;font-size:14px;color:#666;z-index:110}.ms-Callout-inner{height:100%;padding:0 24px 20px}.ms-Callout-header{z-index:105;padding:18px 24px 12px}.ms-Callout-title{font-size:21px}.ms-Callout-subText,.ms-Callout-title{margin:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-subText{color:#333;font-size:12px}.ms-Callout-link{font-size:14px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-Callout-actions{position:relative;margin-top:20px;width:100%;white-space:nowrap}.ms-Callout-action,.ms-Callout-actions .ms-Link.ms-Link--hero{position:relative;left:-8px}.ms-Callout-action{top:4px;margin-left:0!important}.ms-Callout-action:focus .ms-Callout-actionIcon,.ms-Callout-action:hover .ms-Callout-actionIcon{color:#0078d7}.ms-Callout-button{margin-right:12px}.ms-Callout.ms-Callout--close .ms-Callout-title{margin-right:20px}.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight:before,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--OOBE.ms-Callout--arrowTop:before{border-color:#0078d7;background-color:transparent}.ms-Callout.ms-Callout--OOBE .ms-Callout-header{padding:28px 24px;background-color:#0078d7}.ms-Callout.ms-Callout--OOBE .ms-Callout-title{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:28px;color:#fff}.ms-Callout.ms-Callout--OOBE .ms-Callout-inner{padding-top:20px}.ms-Callout.ms-Callout--OOBE .ms-Callout-subText{font-size:14px}.ms-Callout.ms-Callout--actionText .ms-Callout-actions{border-top:1px solid #eaeaea;margin-bottom:-8px}.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowBottom:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowTop:before{left:40px;right:auto}.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--peek.ms-Callout--arrowRight:before{top:calc('50% - 10px')}.ms-Callout.ms-Callout--peek .ms-Callout-header{padding-bottom:0}.ms-Callout.ms-Callout--peek .ms-Callout-title{font-size:14px}.ms-Callout.ms-Callout--peek .ms-Callout-actions{margin-top:12px;margin-bottom:-4px}@media (min-width:480px){.ms-Callout{width:300px;margin:16px}.ms-Callout.ms-Callout--arrowLeft:after,.ms-Callout.ms-Callout--arrowLeft:before,.ms-Callout.ms-Callout--arrowRight:after,.ms-Callout.ms-Callout--arrowRight:before{display:block}}.ms-ChoiceField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;min-height:36px;position:relative}.ms-ChoiceField .ms-Label{font-size:14px;padding:0 0 0 26px}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field{pointer-events:none;cursor:default}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#c8c8c8;color:#c8c8c8}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#eaeaea}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#0f0;color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#0f0}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:before{background-color:#600000;color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field:after{border-color:#600000}.ms-ChoiceField-input:disabled+.ms-ChoiceField-field .ms-Label{color:#600000}}.ms-ChoiceField-input{position:absolute;opacity:0;top:8px}.ms-ChoiceField-input:focus:not(:disabled)+.ms-ChoiceField-field:after{border-color:#767676}.ms-ChoiceField-field{display:inline-block;cursor:pointer;margin-top:8px;position:relative}.ms-ChoiceField-field:after{content:'';display:inline-block;border:1px solid #c8c8c8;width:19px;height:19px;cursor:pointer;position:relative;font-weight:400;left:-1px;top:-1px;border-radius:50%;position:absolute}.ms-ChoiceField-field:hover:after{border-color:#767676}.ms-ChoiceField-field:hover .ms-Label{color:#000}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{background-color:#666;border-color:#666;color:#666;border-radius:50%;content:'\00a0';display:inline-block;position:absolute;top:4px;right:0;bottom:0;left:4px;width:11px;height:11px;box-sizing:border-box}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#fff;background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input:checked+.ms-ChoiceField-field:before{border-color:#000;background-color:#000}}.ms-ChoiceField-input:checked+.ms-ChoiceField-field:hover:before{background-color:#212121;color:#212121}.ms-ChoiceField-input[type=checkbox]+.ms-ChoiceField-field:after{border-radius:0}.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';background-color:transparent;border-radius:0;font-size:13px;top:3px;left:3px}@media screen and (-ms-high-contrast:active){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#fff;border-color:transparent;background-color:transparent}}@media screen and (-ms-high-contrast:black-on-white){.ms-ChoiceField-input[type=checkbox]:checked+.ms-ChoiceField-field:before{color:#000;border-color:transparent;background-color:transparent}}.ms-ChoiceFieldGroup{margin-bottom:4px}.ms-CommandBar{background-color:#eff6fc;height:40px;white-space:nowrap;padding-left:0;border:0;position:relative}.ms-CommandBar:focus{outline:none}.ms-CommandBar-mainArea{overflow-x:hidden;display:block;padding-left:58px}@media only screen and (min-width:1024px){.ms-CommandBar-mainArea{padding-left:24px}}.ms-CommandBar-sideCommands{float:right;text-align:right;width:auto;padding-right:8px}.ms-CommandBar-sideCommands .ms-CommandBarItem:last-child{margin-right:0}@media only screen and (min-width:640px){.ms-CommandBar-sideCommands{min-width:128px;padding-right:12px}}@media only screen and (min-width:1024px){.ms-CommandBar-sideCommands{padding-right:16px}}.ms-CommandBarItem{display:inline-block;color:#0078d7;height:40px;outline:none;vertical-align:top;margin-right:-4px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:none}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem{border-left:1px solid #000;border-right:1px solid #000;height:38px;outline:none}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem{border-left:1px solid #fff;border-right:1px solid #fff;height:38px;outline:none}}.ms-CommandBarItem:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarItem:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarItem:hover{border-left:1px solid #000;border-right:1px solid #000}}@media only screen and (min-width:640px){.ms-CommandBarItem{margin-right:8px}.ms-CommandBarItem .ms-CommandBarItem-chevronDown,.ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline}}.ms-CommandBarItem.is-hidden{width:0;overflow:hidden}.ms-CommandBarItem.icon-only .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.icon-only .ms-CommandBarItem-commandText,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--iconOnly .ms-CommandBarItem-commandText{display:none}.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-chevronDown,.ms-CommandBarItem.ms-CommandBarItem--hasTextOnly .ms-CommandBarItem-commandText{display:inline}.ms-CommandBarItem-overflow{display:none}.ms-CommandBarItem-overflow.is-visible{display:inline-block}.ms-CommandBarItem-overflow .ms-Icon{font-size:14px;color:#666}.ms-CommandBarItem-link{line-height:39px;padding:0 6px;cursor:pointer;height:40px;min-width:20px;text-align:center;position:relative;padding:0 8px;display:block;height:100%;text-decoration:none}.ms-CommandBarItem-link:focus{outline:none}.ms-CommandBarItem-link:focus:before{position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #a6a6a6;content:''}.ms-CommandBarItem-icon{font-size:17px;color:#0078d7}.ms-CommandBarItem-chevronDown{vertical-align:middle;padding-bottom:3px;margin-top:13px;font-size:1.1em;line-height:1em;color:#666}.ms-CommandBarItem-chevronDown:before{height:10px;line-height:16px}.ms-CommandBarSearch{float:left;width:208px;max-width:208px;background-color:#deecf9;color:#333;height:40px;position:relative;box-sizing:border-box;border-color:transparent;transition:.167s cubic-bezier(.1,.9,.2,1);transition-property:width,background-color}@media only screen and (max-width:1023px){.ms-CommandBarSearch{overflow:hidden;width:50px;position:absolute}}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch{border-right:1px solid #fff;z-index:10}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch{border-right:1px solid #000}}.ms-CommandBarSearch:hover{background-color:#c7e0f4;color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch:hover{border-left:1px solid #fff;border-right:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch:hover{border-left:1px solid #000;border-right:1px solid #000}}.ms-CommandBarSearch .ms-Icon--search{margin-left:2px;margin-top:12px;vertical-align:top}.ms-CommandBarSearch-input{height:40px;padding:8px 8px 8px 0;border:none;border-left:42px solid transparent;background-color:transparent;width:100%;box-sizing:border-box;outline:none;cursor:pointer;font-size:14px;-webkit-appearance:none;-webkit-border-radius:0}@media screen and (-ms-high-contrast:active){.ms-CommandBarSearch-input{border-left:40px solid #000}}@media screen and (-ms-high-contrast:black-on-white){.ms-CommandBarSearch-input{border-left:40px solid #fff}}.ms-CommandBarSearch-input::-ms-clear{display:none}.ms-CommandBarSearch-input::-webkit-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::-moz-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input:-ms-input-placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-input::placeholder,.ms-CommandBarSearch-input:placeholder{color:#333;opacity:1;font-size:14px}.ms-CommandBarSearch-iconSearchWrapper{display:block;padding-left:15px}.ms-CommandBarSearch-iconArrowWrapper{display:none}.ms-CommandBarSearch-iconArrowWrapper,.ms-CommandBarSearch-iconSearchWrapper{top:0;padding-left:8px;padding-right:8px}.ms-CommandBarSearch-iconClearWrapper{display:none;top:1px;right:0;z-index:10}.ms-CommandBarSearch.is-active{background-color:#c7e0f4;color:#000}@media only screen and (max-width:1023px){.ms-CommandBarSearch.is-active{width:100%;position:absolute;z-index:10;max-width:100%}}.ms-CommandBarSearch.is-active:hover{background-color:#c7e0f4;color:#000}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{cursor:text;padding-right:40px;border-left-width:8px}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-input{border-left-width:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconSearchWrapper{display:none}.ms-CommandBarSearch.is-active.ms-CommandBarSearch--hasBack .ms-CommandBarSearch-iconArrowWrapper{display:block}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-input{padding-right:40px}.ms-CommandBarSearch.is-active .ms-CommandBarSearch-iconClearWrapper{display:block}.ms-CommandBarSearch-iconWrapper{height:40px;line-height:40px;cursor:pointer;padding:0 8px;position:absolute;width:34px;text-align:center}.ms-CommandBarSearch .ms-Icon:before{font-size:17px;color:#0078d7}.ms-ContextualMenu{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:none}.ms-ContextualMenu.is-open{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:block;list-style-type:none;position:absolute;width:180px;z-index:105}.ms-ContextualMenu-item{box-sizing:border-box;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--divider{cursor:default;display:block;height:1px;margin:4px 0;background-color:#eaeaea;position:relative}.ms-ContextualMenu-item.ms-ContextualMenu-item--header{color:#0078d7;font-size:12px;text-transform:uppercase;height:40px;line-height:40px;padding:0 18px}.ms-ContextualMenu-link{text-decoration:none;color:#333;border:1px solid transparent;cursor:pointer;display:block;height:40px;line-height:40px;padding:0 18px;position:relative}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link{border-color:#fff}}.ms-ContextualMenu-link:first-child,.ms-ContextualMenu-link:last-child{height:39px}.ms-ContextualMenu-link:active,.ms-ContextualMenu-link:focus,.ms-ContextualMenu-link:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link:hover:focus{border-color:#000}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:hover{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link:hover+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link:hover+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link:active{border:1px solid #0078d7}.ms-ContextualMenu-link:focus{border-color:#0078d7;outline:0}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link:focus{border-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link:focus{border-color:#000}}.ms-ContextualMenu-link.is-selected{background-color:#c7e0f4;color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ContextualMenu-link.is-selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-ContextualMenu-link.is-selected:focus{border-color:#000}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-selected{background-color:#37006e;border-color:#37006e;color:#fff}.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-caretRight,.ms-ContextualMenu-link.is-selected+.ms-ContextualMenu-subMenuIcon{color:#fff}}.ms-ContextualMenu-link.is-disabled{color:#a6a6a6;cursor:default;pointer-events:none}.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled:active,.ms-ContextualMenu-link.is-disabled:focus{border-color:#fff}}@media screen and (-ms-high-contrast:active){.ms-ContextualMenu-link.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-ContextualMenu-link.is-disabled{color:#600000}}.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu~.ms-ContextualMenu{position:absolute;top:-1px;left:178px}.ms-ContextualMenu-caretRight,.ms-ContextualMenu-subMenuIcon{color:#666;font-size:16px;height:39px;line-height:40px;position:absolute;top:0;right:7px;z-index:1;pointer-events:none}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-item.ms-ContextualMenu-item--header,.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link{padding:0 30px}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected{background-color:#fff}.ms-ContextualMenu.ms-ContextualMenu--multiselect .ms-ContextualMenu-link.is-selected:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#333;content:'\e041';font-size:12px;height:39px;line-height:40px;position:absolute;left:10px}.ms-DatePicker{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:17px;z-index:300}.ms-DatePicker .ms-TextField{position:relative}.ms-DatePicker-picker{color:#000;font-size:14px;position:relative;text-align:left;z-index:0}.ms-DatePicker-event{color:#666;font-size:21px;line-height:20px;pointer-events:none;position:absolute;right:5px;bottom:5px;z-index:5}.ms-DatePicker-holder{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;position:absolute;min-width:300px;display:none}.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder{-webkit-animation-name:fadeIn,slideDownIn10;animation-name:fadeIn,slideDownIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;box-sizing:border-box;box-shadow:0 0 5px 0 rgba(0,0,0,.4);border:1px solid #eaeaea;display:block}.ms-DatePicker-picker--opened{position:relative;z-index:10}.ms-DatePicker-frame{padding:1px}.ms-DatePicker-wrap{margin:-1px;padding:9px}.ms-DatePicker-dayPicker{display:block;margin-bottom:30px}.ms-DatePicker-header{height:40px;line-height:44px}.ms-DatePicker-month,.ms-DatePicker-year{display:inline-block;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#0078d7;margin-top:-1px}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-month{margin-left:15px}.ms-DatePicker-year{margin-left:5px}.ms-DatePicker-table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.ms-DatePicker-table td{margin:0;padding:0}.ms-DatePicker-table td:hover{outline:1px solid transparent}.ms-DatePicker-day,.ms-DatePicker-weekday{width:40px;height:40px;padding:0;line-height:40px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:15px;font-weight:400;color:#333}.ms-DatePicker-day--today{position:relative;background-color:#c7e0f4}.ms-DatePicker-day--disabled:before{border-top-color:#a6a6a6}.ms-DatePicker-day--outfocus{color:#a6a6a6;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-day--infocus:hover,.ms-DatePicker-day--outfocus:hover{cursor:pointer;color:#000;background:#eaeaea}.ms-DatePicker-day--highlighted:hover,.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted{cursor:pointer;color:#fff;background:#0078d7}.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled,.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover{background:#a6a6a6}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{display:none}.ms-DatePicker-monthComponents{position:absolute;top:9px;right:9px;left:9px}.ms-DatePicker-decadeComponents,.ms-DatePicker-yearComponents{position:absolute;right:10px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{width:40px;height:40px;display:block;float:right;margin-left:10px;line-height:40px;text-align:center;font-size:21px;color:#666;position:relative;top:3px}.ms-DatePicker-nextDecade:hover,.ms-DatePicker-nextMonth:hover,.ms-DatePicker-nextYear:hover,.ms-DatePicker-prevDecade:hover,.ms-DatePicker-prevMonth:hover,.ms-DatePicker-prevYear:hover{color:#212121;cursor:pointer;outline:1px solid transparent}.ms-DatePicker-headerToggleView{height:40px;left:0;position:absolute;top:0;width:140px;z-index:5;cursor:pointer}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{display:block;font-weight:400;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;height:40px;line-height:42px;margin-left:15px}.ms-DatePicker-currentYear{color:#0078d7}.ms-DatePicker-currentYear:hover{color:#005a9e;cursor:pointer}.ms-DatePicker-optionGrid{position:relative;height:210px;width:280px;margin:10px 0 30px 5px}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{background-color:#f4f4f4;width:60px;height:60px;line-height:60px;cursor:pointer;float:left;margin:0 10px 10px 0;font-weight:400;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;color:#333;text-align:center}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-DatePicker-monthOption.is-highlighted,.ms-DatePicker-yearOption.is-highlighted{background-color:#333;color:#fff}.ms-DatePicker-goToday{bottom:9px;color:#0078d7;cursor:pointer;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:13px;height:30px;line-height:30px;padding:0 10px;position:absolute;right:9px}.ms-DatePicker-goToday:hover{outline:1px solid transparent}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}@media (min-width:460px){.ms-DatePicker-holder{width:440px}.ms-DatePicker-month,.ms-DatePicker-year{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-DatePicker-header{height:30px;line-height:28px}.ms-DatePicker-dayPicker{box-sizing:border-box;border-right:1px solid #eaeaea;width:220px}.ms-DatePicker-monthPicker{display:block}.ms-DatePicker-dayPicker{margin:-10px 0;padding:10px 0}.ms-DatePicker-monthPicker,.ms-DatePicker-yearPicker{top:9px;left:238px;position:absolute}.ms-DatePicker-optionGrid{width:200px;height:auto;margin:10px 0 0}.ms-DatePicker-monthComponents{width:210px}.ms-DatePicker-month{margin-left:12px}.ms-DatePicker-month,.ms-DatePicker-year{font-size:17px;color:#333}.ms-DatePicker-month:hover,.ms-DatePicker-year:hover{color:#333;cursor:default}.ms-DatePicker-day,.ms-DatePicker-weekday{width:30px;height:30px;line-height:30px;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px}.ms-DatePicker-nextDecade,.ms-DatePicker-nextMonth,.ms-DatePicker-nextYear,.ms-DatePicker-prevDecade,.ms-DatePicker-prevMonth,.ms-DatePicker-prevYear{font-size:17px;width:30px;height:30px;line-height:29px}.ms-DatePicker-toggleMonthView{display:none}.ms-DatePicker-currentDecade,.ms-DatePicker-currentYear{font-size:17px;margin:0;height:30px;line-height:26px;padding:0 10px;display:inline-block}.ms-DatePicker-monthOption,.ms-DatePicker-yearOption{width:40px;height:40px;line-height:40px;font-size:12px;margin:0 10px 10px 0}.ms-DatePicker-monthOption:hover,.ms-DatePicker-yearOption:hover{outline:1px solid transparent}.ms-DatePicker-goToday{box-sizing:border-box;font-size:12px;height:30px;line-height:30px;padding:0 10px;right:10px;text-align:right;top:199px;width:210px}.ms-DatePicker.is-pickingYears .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingYears .ms-DatePicker-monthComponents{display:block}.ms-DatePicker.is-pickingYears .ms-DatePicker-monthPicker{display:none}.ms-DatePicker.is-pickingYears .ms-DatePicker-yearPicker{display:block}}@media (max-width:459px){.ms-DatePicker.is-pickingMonths .ms-DatePicker-dayPicker,.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthComponents{display:none}.ms-DatePicker.is-pickingMonths .ms-DatePicker-monthPicker{display:block}}.ms-Dialog{background-color:transparent;position:fixed;height:100%;width:100%;top:0;left:0;z-index:300;display:block;font-size:0;line-height:100vh;text-align:center;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.ms-Dialog:before{vertical-align:middle;display:inline-block;content:'';height:100%;width:0}.ms-Dialog .ms-Button.ms-Button--compound{display:block;margin-left:0}.ms-Dialog .ms-Overlay{z-index:0}@media screen and (-ms-high-contrast:active){.ms-Dialog .ms-Overlay{opacity:0}}.ms-Dialog-main{vertical-align:middle;display:inline-block;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;box-sizing:border-box;line-height:1.35;margin:auto;width:288px;position:relative;text-align:left;outline:3px solid transparent}.ms-Dialog-button.ms-Dialog-button--close{display:none;position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;top:12px;right:12px;padding:8px;z-index:10}.ms-Dialog-button.ms-Dialog-button--close .ms-Icon.ms-Icon--x{color:#666;font-size:16px}.ms-Dialog-inner{height:100%;padding:0 20px 20px}.ms-Dialog-header{position:relative;width:100%;box-sizing:border-box;padding:12px 20px 15px}.ms-Dialog-title{margin:0;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px}.ms-Dialog-content{position:relative;width:100%}.ms-Dialog-content .ms-Button.ms-Button--compound:not(:last-child){margin-bottom:20px}.ms-Dialog-subText{margin:0 0 20px;padding-top:8px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;color:#333;font-size:12px}.ms-Dialog-actions{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.ms-Dialog-actions .ms-Button{line-height:normal}.ms-Dialog-actionsRight{text-align:right;font-size:0}.ms-Dialog-actionsRight .ms-Dialog-action:first-child{margin:0}.ms-Dialog-actionsRight .ms-Dialog-action+.ms-Dialog-action{margin:0 0 0 16px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-title{margin-right:20px}.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) .ms-Dialog-button.ms-Dialog-button--close{display:block}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-title{font-size:28px}.ms-Dialog.ms-Dialog--multiline .ms-Dialog-inner{padding:0 20px 20px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-header{background-color:#0078d7;padding:26px 20px 28px;margin-bottom:8px}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-title{font-size:28px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;color:#fff}.ms-Dialog.ms-Dialog--lgHeader .ms-Dialog-subText{font-size:14px}@media (min-width:480px){.ms-Dialog-main{width:auto;min-width:288px;max-width:340px}}.ms-Dropdown{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:10px;position:relative;outline:0}.ms-Dropdown:active .ms-Dropdown-caretDown,.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:focus .ms-Dropdown-caretDown,.ms-Dropdown:focus .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-caretDown,.ms-Dropdown:hover .ms-Dropdown-title{color:#000}.ms-Dropdown:active .ms-Dropdown-title,.ms-Dropdown:hover .ms-Dropdown-title{border-color:#767676}.ms-Dropdown:focus .ms-Dropdown-title{border-color:#0078d7}.ms-Dropdown .ms-Label{display:inline-block;margin-bottom:8px}.ms-Dropdown.is-disabled .ms-Dropdown-title{background-color:#f4f4f4;border-color:#f4f4f4;color:#a6a6a6;cursor:default}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-title{border-color:#600000;color:#600000}}.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown.is-disabled .ms-Dropdown-caretDown{color:#600000}}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{display:block;position:fixed}.ms-Dropdown-select{display:none}.ms-Dropdown-caretDown{color:#666;font-size:17px;position:absolute;right:9px;bottom:5px;z-index:1;pointer-events:none}.ms-Dropdown-title{padding:0;background:#fff;border:1px solid #c8c8c8;cursor:pointer;display:block;height:32px;line-height:30px;padding:0 32px 0 10px;position:relative;overflow:hidden}.ms-Dropdown-items,.ms-Dropdown-title{box-sizing:border-box;margin:0;box-shadow:none}.ms-Dropdown-items{padding:0;box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;display:none;list-style-type:none;position:absolute;width:100%;max-height:200px;max-width:268px;z-index:400;top:0;right:0;bottom:0;overflow-y:scroll}.ms-Dropdown-items:before{content:'';position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;border:1px solid #eaeaea}@media screen and (-ms-high-contrast:active){.ms-Dropdown-items{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-items{border:1px solid #000}}.ms-Dropdown-item{box-sizing:border-box;cursor:pointer;display:block;height:40px;line-height:38px;padding:0 10px;position:relative;border:1px solid transparent;white-space:nowrap}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item{border-color:#fff}}.ms-Dropdown-item:first-child,.ms-Dropdown-item:last-child{height:39px}.ms-Dropdown-item:hover{background-color:#eaeaea;color:#000}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item:hover{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item:hover:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item:hover{background-color:#37006e;border-color:#37006e;color:#fff}}.ms-Dropdown-item:active{background-color:#eaeaea;border-color:#0078d7;color:#000}.ms-Dropdown-item.is-disabled{background:#fff;color:#a6a6a6;cursor:default;line-height:40px}.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#c7e0f4;color:#000;line-height:40px}.ms-Dropdown-item.is-selected:hover,.ms-Dropdown-item.ms-Dropdown-item--selected:hover{background-color:#c7e0f4}@media screen and (-ms-high-contrast:active){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#1aebff;border-color:#1aebff;color:#000}.ms-Dropdown-item.is-selected:focus,.ms-Dropdown-item.ms-Dropdown-item--selected:focus{border-color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Dropdown-item.is-selected,.ms-Dropdown-item.ms-Dropdown-item--selected{background-color:#37006e;border-color:#37006e;color:#fff}}@media (min-width:480px){.ms-Dropdown-items{top:auto;right:auto;bottom:auto;left:auto;max-width:100%}.ms-Dropdown.is-open .ms-Dropdown-items,.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items{position:absolute}}.ms-Facepile{position:relative;height:32px;width:auto}.ms-Facepile .ms-PersonaCard{display:none;position:absolute;top:40px;height:200px}.ms-Facepile .ms-PersonaCard.is-active{display:block}.ms-Facepile-itemBtn{background:none;border:0;cursor:pointer;position:relative;height:32px;width:32px;line-height:32px;text-align:center;float:left;padding:0;margin-right:4px;outline:transparent;border-radius:50%;vertical-align:top}.ms-Facepile-itemBtn .ms-Persona-details,.ms-Facepile-itemBtn .ms-Persona-presence{display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson{background-color:#0078d7;color:#fff;font-size:16px}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:focus,.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:hover{background-color:#005a9e}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:active{background-color:#004578}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--addPerson:disabled{background-color:#c8c8c8}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow{background-color:#eaeaea;color:#666;display:none}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow.is-active{display:block}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:hover{color:#212121}.ms-Facepile-itemBtn.ms-Facepile-itemBtn--overflow:disabled{color:#c8c8c8}.ms-Facepile-addPersonIcon{position:relative;top:-1px}.ms-Facepile-overflowText{font-size:14px}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-Panel-headerText,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-resultAction,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-results,.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-searchBox{display:none}.ms-Facepile-panel.ms-Facepile-panel--overflow .ms-PeoplePicker-selectedHeader{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;line-height:82px;height:74px;text-transform:none}.ms-Link{color:#0078d7;text-decoration:none;cursor:pointer}.ms-Link:focus,.ms-Link:hover{color:#004578}.ms-Link:active{color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Link{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Link{color:#00009f}}.ms-List{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style-type:none}@media (min-width:480px){.ms-List.ms-List--grid .ms-ListItem{width:33.33333333333333%;float:left;border-width:0 1px 1px 0}.ms-List.ms-List--grid .ms-ListItem:nth-child(3n){border-width:0 0 1px}}.ms-ListItem{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;*zoom:1;padding:9px 28px 3px;position:relative;display:block}.ms-ListItem:after,.ms-ListItem:before{display:table;content:'';line-height:0}.ms-ListItem:after{clear:both}.ms-ListItem-primaryText,.ms-ListItem-secondaryText,.ms-ListItem-tertiaryText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ms-ListItem-primaryText{color:#212121;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;padding-right:80px;position:relative;top:-4px}.ms-ListItem-secondaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;line-height:25px;position:relative;top:-7px;padding-right:30px}.ms-ListItem-tertiaryText{color:#767676;font-size:14px;position:relative;top:-9px;margin-bottom:-4px;padding-right:30px}.ms-ListItem-metaText,.ms-ListItem-tertiaryText{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem-metaText{color:#333;font-size:11px;position:absolute;right:30px;top:39px}.ms-ListItem-image{float:left;height:70px;margin-left:-8px;margin-right:10px;width:70px}.ms-ListItem-selectionTarget{display:none}.ms-ListItem-actions{max-width:80px;position:absolute;right:30px;text-align:right;top:10px}.ms-ListItem-action{color:#a6a6a6;display:inline-block;font-size:15px;position:relative;text-align:center;top:3px;cursor:pointer;height:16px;width:16px}.ms-ListItem-action .ms-Icon{vertical-align:top}.ms-ListItem-action:hover{color:#666;outline:1px solid transparent}.ms-ListItem.is-unread{border-left:3px solid #0078d7;padding-left:27px}.ms-ListItem.is-unread .ms-ListItem-metaText,.ms-ListItem.is-unread .ms-ListItem-secondaryText{color:#0078d7;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-ListItem.is-unseen:after{border-right:10px solid transparent;border-top:10px solid #0078d7;left:0;position:absolute;top:0}.ms-ListItem.is-selectable .ms-ListItem-selectionTarget{display:block;height:20px;left:6px;position:absolute;top:13px;width:20px}.ms-ListItem.is-selectable .ms-ListItem-image{margin-left:0}.ms-ListItem.is-selectable:hover{background-color:#eaeaea;cursor:pointer;outline:1px solid transparent}.ms-ListItem.is-selectable:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;position:absolute;top:12px;left:6px;height:15px;width:15px;border:1px solid #767676}.ms-ListItem.is-selected:before{border:1px solid transparent}.ms-ListItem.is-selected:before,.ms-ListItem.is-selected:hover:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';font-size:15px;color:#767676;position:absolute;top:12px;left:6px}.ms-ListItem.is-selected:hover{background-color:#c7e0f4;outline:1px solid transparent}.ms-ListItem.ms-ListItem--document{padding:0}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon{width:70px;height:70px;float:left;text-align:center}.ms-ListItem.ms-ListItem--document .ms-ListItem-itemIcon .ms-Icon{font-size:38px;line-height:70px;color:#666}.ms-ListItem.ms-ListItem--document .ms-ListItem-primaryText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding-top:15px;padding-right:0;position:static}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText{display:block;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:11px;padding-top:6px}.ms-ListItem.ms-ListItem--document .ms-ListItem-secondaryText,.ms-MessageBanner{overflow:hidden;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-MessageBanner{color:#333;font-size:12px;font-weight:400;position:relative;border-bottom:1px solid #767676;background-color:#eff6fc;min-width:320px;width:100%;height:52px;text-align:center;-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner .ms-Icon{font-size:16px}.ms-MessageBanner.hide{-webkit-animation-name:fadeOut,slideUpOut20;animation-name:fadeOut,slideUpOut20;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-MessageBanner.is-hidden{display:none}.ms-MessageBanner-close,.ms-MessageBanner-expand{height:52px;width:40px;cursor:pointer;border:none;background-color:transparent}.ms-MessageBanner-close:focus,.ms-MessageBanner-expand:focus{outline:1px solid transparent}.ms-MessageBanner-close{position:absolute;right:0;top:0;line-height:52px;color:#666}.ms-MessageBanner-text{display:inline-block;padding:18px 0;margin-left:0;max-width:770px;overflow:hidden;text-align:left}.ms-MessageBanner-expand{display:none;vertical-align:top}.ms-MessageBanner-expand.is-visible{display:inline-block}.ms-MessageBanner-action{display:inline-block;vertical-align:top;margin-top:10px;margin-left:10px;padding-right:36px}.ms-MessageBanner-action .ms-Button{color:#fff}.ms-MessageBanner-clipper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:top}.ms-MessageBanner.is-expanded{height:auto}.ms-MessageBanner.is-expanded .ms-MessageBanner-clipper{white-space:normal}@media screen and (max-width:479px){.ms-MessageBanner-expand{display:inline-block}.ms-MessageBanner-action{margin:0;display:block;text-align:right;padding:0 10px 10px 0}.ms-MessageBanner-text{margin-left:-25px;padding:18px 0 10px;min-width:240px}.ms-MessageBanner-expand{padding:0;margin-left:-5px;width:20px}.ms-MessageBanner-expand .ms-Icon{color:#0078d7}}.ms-NavBar{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#f4f4f4;height:40px;padding:0 10px;width:100%;outline:1px solid transparent}.ms-NavBar .ms-Overlay{display:block;opacity:0;pointer-events:none;transition:opacity .367s cubic-bezier(.1,.9,.2,1);z-index:0}.ms-NavBar-openMenu{font-size:20px;height:40px;line-height:40px;position:absolute;right:27px;text-align:center;width:40px;cursor:pointer}.ms-NavBar-items{display:none}.ms-NavBar-item{box-sizing:border-box;display:block;height:40px;line-height:40px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;padding-left:20px;position:relative}.ms-NavBar-item:hover{cursor:pointer;background-color:#deecf9;color:#000}.ms-NavBar-item:hover .ms-Icon{color:#333}.ms-NavBar-item:active{color:#0078d7}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.is-disabled{color:#a6a6a6}.ms-NavBar-item.is-disabled:hover{cursor:default;border:none}.ms-NavBar-link:active{color:#0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu .ms-NavBar-items{display:none}.ms-NavBar-item.ms-NavBar-item--hasMenu:hover:after{color:#212121}.ms-NavBar-chevronDown{color:#666;font-size:22px;position:absolute;top:10px;right:20px}.ms-NavBar-item.ms-NavBar-item--search{position:relative;width:30px}.ms-NavBar-item.ms-NavBar-item--search:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;color:#666;content:'\e039';font-size:21px;line-height:40px;position:absolute;right:5px;top:0}.ms-NavBar-item.ms-NavBar-item--search .ms-TextField{display:none}.ms-NavBar-item.ms-NavBar-item--search.is-open{width:200px;padding-right:40px;border:none}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField{display:block}.ms-NavBar-item.ms-NavBar-item--search.is-open .ms-TextField-field{border:none;background-color:transparent}@media (max-width:479px){.ms-NavBar.is-open .ms-NavBar-items{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;bottom:0;display:block;left:50px;margin:0;padding:0;position:absolute;right:0;top:0;outline:1px solid transparent;z-index:5}.ms-NavBar.is-open .ms-NavBar-item .ms-ContextualMenu{position:relative}}@media (min-width:320px) and (max-width:479px){.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected{height:inherit;background-color:transparent;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}.ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected .ms-NavBar-chevronDown{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.ms-NavBar-item .ms-ContextualMenu{position:static;border:none;box-shadow:none;width:auto}.ms-NavBar-item .ms-ContextualMenu .ms-ContextualMenu-link{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px}.ms-NavBar.is-open .ms-Overlay{display:block;cursor:pointer;opacity:1;pointer-events:auto}}@media (min-width:480px){.ms-NavBar-openMenu{display:none}.ms-NavBar-items{display:block;list-style:none;margin:0 7px 0 0;padding:0}.ms-NavBar-chevronDown{top:3px;right:0;float:none;position:relative}.ms-NavBar-item{float:left;margin-right:18px;font-size:14px;padding:0}.ms-NavBar-item:hover{border-bottom:2px solid #0078d7;background-color:transparent}.ms-NavBar-item.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif;border-bottom:2px solid #0078d7}.ms-NavBar-item.ms-NavBar-item--hasMenu:after{position:relative;top:3px;padding-top:0;right:auto}.ms-NavBar-item.ms-NavBar-item--right{float:right;margin:0}}.ms-OrgChart{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none}.ms-OrgChart-groupTitle{color:#666;line-height:1}.ms-OrgChart-list{padding:0;margin:12px 0 16px}.ms-OrgChart-listItem{height:50px;width:100%;position:relative;list-style:none;margin-bottom:8px}.ms-OrgChart-listItemBtn{cursor:pointer;position:relative;height:50px;width:100%;background:none;border:0;text-align:left;margin:0;padding:0;outline:transparent}.ms-Overlay{background-color:hsla(0,0%,100%,.4);position:absolute;bottom:0;left:0;right:0;top:0;z-index:200}.ms-Overlay.ms-Overlay--dark{background-color:rgba(0,0,0,.4)}.ms-Overlay--none{visibility:hidden}.ms-Panel{bottom:0;left:0;position:fixed;right:0;top:0;z-index:300}.ms-Panel,.ms-Panel .ms-Overlay{display:none;pointer-events:none}.ms-Panel .ms-Overlay{z-index:0;opacity:1;cursor:pointer;transition:opacity .367s cubic-bezier(.1,.9,.2,1)}.ms-Panel-main{background-color:#fff;bottom:0;position:fixed;right:0;top:0;display:none;z-index:10;width:100%}@media (min-width:480px){.ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2);left:auto}}.ms-Panel-main .ms-CommandBar{outline:1px solid transparent}@media (min-width:480px){.ms-Panel-main .ms-CommandBar{display:none}}.ms-Panel-main .ms-CommandBarItem{margin-left:8px}.ms-Panel-main .ms-CommandBarItem .ms-CommandBarItem-commandText{display:inline-block}.ms-Panel-main .ms-CommandBar-mainArea{padding-left:0;margin-left:-1px;overflow:hidden}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-main{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--lightDismiss .ms-Panel-commands,.ms-Panel.ms-Panel--lightDismiss .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--lightDismiss.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left .ms-Panel-main{right:auto;left:0;border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;width:272px;box-shadow:-30px 0 30px 30px rgba(0,0,0,.2)}.ms-Panel.ms-Panel--left .ms-Panel-commands,.ms-Panel.ms-Panel--left .ms-Panel-contentInner{display:none}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.ms-Panel--left.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.ms-Panel--sm .ms-Panel-main{width:100%}@media (min-width:480px){.ms-Panel.ms-Panel--sm .ms-Panel-main{width:340px}}@media (min-width:640px){.ms-Panel.ms-Panel--lg .ms-Panel-main,.ms-Panel.ms-Panel--md .ms-Panel-main,.ms-Panel.ms-Panel--xl .ms-Panel-main{left:48px;width:auto}}@media (min-width:1024px){.ms-Panel.ms-Panel--md .ms-Panel-main{left:auto;width:643px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg .ms-Panel-main{left:428px}}@media (min-width:1366px){.ms-Panel.ms-Panel--lg.ms-Panel--fixed .ms-Panel-main{left:auto;width:940px}}@media (min-width:1366px){.ms-Panel.ms-Panel--xl .ms-Panel-main{left:176px}}.ms-Panel.is-open{display:block}.ms-Panel.is-open .ms-Panel-main{opacity:1}.ms-Panel.is-open .ms-Overlay,.ms-Panel.is-open .ms-Panel-main{pointer-events:auto;display:block}@media screen and (-ms-high-contrast:active){.ms-Panel.is-open .ms-Overlay{opacity:0}}.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.1s;animation-duration:.1s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{display:none}@media (min-width:480px){.ms-Panel.is-open.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideLeftIn40;animation-name:fadeIn,slideLeftIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideRightOut40;animation-name:fadeOut,slideRightOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Panel-main{-webkit-animation-name:fadeIn,slideRightIn40;animation-name:fadeIn,slideRightIn40;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.267s;animation-duration:.267s}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Panel-main{-webkit-animation-name:fadeOut,slideLeftOut40;animation-name:fadeOut,slideLeftOut40;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateOut .ms-Overlay{-webkit-animation-duration:.367s;animation-duration:.367s;-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.167s;animation-duration:.167s}.ms-Panel.is-open .ms-Overlay{cursor:pointer;opacity:1;pointer-events:auto}}@media screen and (min-width:480px) and (-ms-high-contrast:active){.ms-Panel.is-open.ms-Panel--left.ms-Panel-animateIn .ms-Overlay,.ms-Panel.is-open.ms-Panel-animateIn .ms-Overlay{opacity:0;-webkit-animation-name:none;animation-name:none}}.ms-Panel-closeButton{background:none;border:0;cursor:pointer;position:absolute;right:8px;top:0;height:40px;width:40px;line-height:40px;outline:0;padding:0;color:#666;font-size:14px}.ms-Panel-closeButton:hover{color:#333}.ms-Panel-contentInner{position:absolute;top:40px;bottom:0;left:0;right:0;padding:0 16px 20px;overflow-y:auto}@media (min-width:640px){.ms-Panel-contentInner{padding:0 32px 20px}}@media (min-width:1366px){.ms-Panel-contentInner{padding:0 40px 20px}}.ms-Panel-headerText{font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;font-size:21px;color:#333;margin:10px 0;padding:4px 0;line-height:1;text-overflow:ellipsis;overflow:hidden}@media (min-width:1024px){.ms-Panel-headerText{margin-top:30px}}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands .ms-CommandBar{display:block}}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:hover{background-color:#d7eaf9}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active{background-color:#b5d8f4}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-icon{color:#07288b}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:active .ms-CommandBarItem-commandText{color:#000}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child{background-color:#0078d7;box-shadow:inset 0 1px 0 0 #2488d8}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child .ms-CommandBarItem-linkWrapper{padding-left:12px;padding-right:12px;cursor:pointer}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover{background-color:#005a9e;box-shadow:none}.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-commandText,.ms-Panel.ms-Panel--animatedCommands .ms-CommandBarItem:first-child:hover .ms-CommandBarItem-icon{color:#fff}.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-name:fadeIn,slideDownIn20;animation-name:fadeIn,slideDownIn20;-webkit-animation-duration:.367s;-moz-animation-duration:.367s;-ms-animation-duration:.367s;-o-animation-duration:.367s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:.25s;animation-delay:.25s}@media (min-width:480px){.ms-Panel.ms-Panel--animatedCommands.is-open .ms-CommandBar{-webkit-animation-delay:.5s;animation-delay:.5s}}.ms-PeoplePicker{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:305}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .detail-5,.ms-PersonaCard-detailMail .detail-1,.ms-PersonaCard-detailMail .detail-2,.ms-PersonaCard-detailMail .detail-3,.ms-PersonaCard-detailMail .detail-5,.ms-PersonaCard-detailOrg .detail-1,.ms-PersonaCard-detailOrg .detail-2,.ms-PersonaCard-detailOrg .detail-3,.ms-PersonaCard-detailOrg .detail-4,.ms-PersonaCard-detailPhone .detail-1,.ms-PersonaCard-detailPhone .detail-3,.ms-PersonaCard-detailPhone .detail-4,.ms-PersonaCard-detailPhone .detail-5,.ms-PersonaCard-detailVideo .detail-1,.ms-PersonaCard-detailVideo .detail-2,.ms-PersonaCard-detailVideo .detail-4,.ms-PersonaCard-detailVideo .detail-5{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Pivot{font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;height:40px;list-style-type:none;overflow-x:hidden;white-space:nowrap}.ms-Pivot,.ms-Pivot-link{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot-link{display:inline-block;position:relative;font-size:15px;line-height:40px;margin-right:8px}.ms-Pivot-link:after{content:'';width:100%;position:absolute;display:none;bottom:0;left:0;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:after{background-color:#37006e}}.ms-Pivot-link:active,.ms-Pivot-link:focus,.ms-Pivot-link:hover{color:#000;cursor:pointer}.ms-Pivot-link:active+.ms-Pivot-dropdownIcon,.ms-Pivot-link:focus+.ms-Pivot-dropdownIcon,.ms-Pivot-link:hover+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-link:active{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link:active{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link:active{color:#37006e}}.ms-Pivot-link:active:after{display:block}.ms-Pivot-link.is-selected{color:#000;font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot-link.is-selected{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot-link.is-selected{color:#37006e}}.ms-Pivot-link.is-selected:after{display:block}.ms-Pivot-link.is-selected+.ms-Pivot-dropdownIcon{color:#212121}.ms-Pivot-dropdownIcon{font-size:16px;position:relative;top:2px}.ms-Pivot-link.ms-Pivot-link--overflow{color:#666}.ms-Pivot-link.ms-Pivot-link--overflow.is-selected{color:#0078d7}.ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){color:#212121}.ms-Pivot-link.ms-Pivot-link--overflow:active:after{display:none}.ms-Pivot-ellipsis{font-size:15px;position:relative;top:0}.ms-Pivot.ms-Pivot--large .ms-Pivot-link{font-size:17px}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.is-selected,.ms-Pivot.ms-Pivot--large .ms-Pivot-link:active{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-Pivot.ms-Pivot--large .ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:17px}.ms-Pivot.ms-Pivot--tabs{height:40px}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link{height:40px;background-color:#f4f4f4;line-height:40px;margin-right:-2px;padding:0 10px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif!important}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:focus:not(.is-selected):not(.ms-Pivot-link--overflow),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:hover:not(.is-selected):not(.ms-Pivot-link--overflow){color:#000}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{color:#fff!important;background-color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link:active{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#0078d7;color:#fff;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#1aebff;color:#000}}@media screen and (-ms-high-contrast:black-on-white){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{background-color:#37006e;color:#fff}}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:focus:not(.is-selected),.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:hover:not(.is-selected){background-color:#fff}.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.ms-Pivot-link--overflow:active{background-color:#0078d7!important}@media (min-width:640px){.ms-Pivot-link,.ms-Pivot-link.ms-Pivot-link--overflow:after{font-size:14px}}@media screen and (-ms-high-contrast:active){.ms-Pivot.ms-Pivot--tabs .ms-Pivot-link.is-selected{font-family:Segoe UI Semibold WestEuropean,Segoe UI Semibold,Segoe UI,Tahoma,Arial,sans-serif}}.ms-ProgressIndicator-itemName{color:#333;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.ms-ProgressIndicator-itemDescription,.ms-ProgressIndicator-itemName{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400}.ms-ProgressIndicator-itemDescription{color:#333;color:#767676;font-size:11px;line-height:18px}.ms-ProgressIndicator-itemProgress{position:relative;width:180px;height:2px;padding:8px 0}.ms-ProgressIndicator-progressTrack{position:absolute;width:100%;height:2px;background-color:#eaeaea;outline:1px solid transparent}.ms-ProgressIndicator-progressBar{position:absolute;height:2px;background-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-ProgressIndicator-progressBar{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-ProgressIndicator-progressBar{background-color:#000}}.ms-SearchBox{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;margin-bottom:10px;display:inline-block}.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-SearchBox.is-disabled .ms-SearchBox-label{color:#600000}}.ms-SearchBox.is-disabled .ms-SearchBox-icon{color:#c8c8c8}.ms-SearchBox.is-disabled .ms-SearchBox-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-SearchBox.is-active .ms-SearchBox-closeButton{display:block;outline:1px solid transparent}.ms-SearchBox-field{position:relative;box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #71afe5;outline:1px solid transparent;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;color:#000;height:32px;padding:6px 3px 7px 10px;width:180px;background-color:transparent;z-index:5}.ms-SearchBox-field.hovering{border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field.hovering+.ms-SearchBox-label{color:#000}.ms-SearchBox-field.hovering+.ms-SearchBox-label .ms-Icon{color:#333}.ms-SearchBox-field:focus{padding:6px 32px 7px 10px;border-color:#0078d7;background-color:#deecf9}.ms-SearchBox-field::-ms-clear{display:none}.ms-SearchBox-closeButton{border:none;cursor:pointer;position:absolute;right:0;top:0;height:32px;width:32px;background-color:#0078d7;text-align:center;display:none;font-size:17px;color:#fff;z-index:10}.ms-SearchBox-label{position:absolute;top:0;left:0;padding-left:8px;line-height:32px;color:#666}.ms-SearchBox-icon{margin-right:7px;font-size:17px;color:#767676}.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;color:#0078d7;left:28px;top:2px}.ms-Table{display:table;width:100%;border-collapse:collapse}.ms-Table--fixed{table-layout:fixed}.ms-Table-row,.ms-Table tr{display:table-row;line-height:30px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333}.ms-Table-row:hover,.ms-Table tr:hover{background-color:#f4f4f4;cursor:pointer;outline:1px solid transparent}.ms-Table-row.is-selected,.ms-Table tr.is-selected{background-color:#c7e0f4}.ms-Table-row.is-selected .ms-Table-rowCheck,.ms-Table tr.is-selected .ms-Table-rowCheck{background-color:#0078d7}.ms-Table-row.is-selected .ms-Table-rowCheck:before,.ms-Table tr.is-selected .ms-Table-rowCheck:before{display:none}.ms-Table-row.is-selected .ms-Table-rowCheck:after,.ms-Table tr.is-selected .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#fff;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-cell,.ms-Table td,.ms-Table th{display:table-cell;padding:0 10px}.ms-Table-head,.ms-Table thead th{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-Table-head .ms-Table-cell,.ms-Table-head .ms-Table-rowCheck,.ms-Table-head td,.ms-Table-head th,.ms-Table thead .ms-Table-cell,.ms-Table thead .ms-Table-rowCheck,.ms-Table thead td,.ms-Table thead th{font-weight:400;text-align:left;border-bottom:1px solid #eaeaea}.ms-Table-head .ms-Table-rowCheck:after,.ms-Table thead .ms-Table-rowCheck:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e041';color:#a6a6a6;font-size:12px;position:absolute;left:4px;top:9px}.ms-Table-rowCheck{display:table-cell;width:20px;position:relative;padding:0}.ms-Table-rowCheck:before{border:1px solid #a6a6a6;content:'';display:block;height:14px;left:2px;position:absolute;top:6px;width:14px}@media screen and (-ms-high-contrast:active){.ms-Table-row.is-selected .ms-Table-rowCheck{background:none}.ms-Table-row.is-selected .ms-Table-rowCheck:before{display:block}}.ms-TextField{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:8px}.ms-TextField.is-disabled .ms-TextField-field{background-color:#f4f4f4;border-color:#f4f4f4;pointer-events:none;cursor:default}.ms-TextField.is-disabled:-moz-placeholder,.ms-TextField.is-disabled:-ms-input-placeholder,.ms-TextField.is-disabled::-moz-placeholder,.ms-TextField.is-disabled::-webkit-input-placeholder{color:#a6a6a6}.ms-TextField.is-required .ms-Label:after{content:' *';color:#a80000}.ms-TextField.is-required:-moz-placeholder:after,.ms-TextField.is-required:-ms-input-placeholder:after,.ms-TextField.is-required::-moz-placeholder:after,.ms-TextField.is-required::-webkit-input-placeholder:after{content:' *';color:#a80000}.ms-TextField.is-active{border-color:#0078d7}.ms-TextField-field{box-sizing:border-box;margin:0;padding:0;box-shadow:none;border:1px solid #c8c8c8;border-radius:0;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#333;height:32px;padding:6px 10px 8px;width:100%;min-width:180px;outline:0}.ms-TextField-field:hover{border-color:#767676}.ms-TextField-field:focus{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField-field:focus,.ms-TextField-field:hover{border-color:#37006e}}.ms-TextField-field:-moz-placeholder,.ms-TextField-field:-ms-input-placeholder,.ms-TextField-field::-moz-placeholder,.ms-TextField-field::-webkit-input-placeholder{color:#666}.ms-TextField-description{color:#767676;font-size:11px}.ms-TextField.ms-TextField--placeholder{position:relative}.ms-TextField.ms-TextField--placeholder .ms-Label{position:absolute;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;color:#666;padding:7px 0 7px 10px}.ms-TextField.ms-TextField--placeholder.is-disabled,.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--placeholder.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined{border-bottom:1px solid #c8c8c8;display:table;width:100%;min-width:180px}.ms-TextField.ms-TextField--underlined:hover{border-color:#767676}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined:hover{border-color:#37006e}}.ms-TextField.ms-TextField--underlined:active,.ms-TextField.ms-TextField--underlined:focus{border-color:#0078d7}.ms-TextField.ms-TextField--underlined .ms-Label{font-size:12px;margin-right:8px;display:table-cell;vertical-align:bottom;padding-left:12px;padding-bottom:5px;height:32px;width:1%;white-space:nowrap}.ms-TextField.ms-TextField--underlined .ms-TextField-field{border:0;float:left;display:table-cell;text-align:left;padding-top:8px;padding-bottom:2px}.ms-TextField.ms-TextField--underlined .ms-TextField-field:active,.ms-TextField.ms-TextField--underlined .ms-TextField-field:focus,.ms-TextField.ms-TextField--underlined .ms-TextField-field:hover{outline:0}.ms-TextField.ms-TextField--underlined.is-disabled{border-bottom-color:#eaeaea}.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-disabled .ms-Label{color:#600000}}.ms-TextField.ms-TextField--underlined.is-disabled .ms-TextField-field{background-color:transparent;color:#a6a6a6}.ms-TextField.ms-TextField--underlined.is-active{border-color:#0078d7}@media screen and (-ms-high-contrast:active){.ms-TextField.ms-TextField--underlined.is-active{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.ms-TextField.ms-TextField--underlined.is-active{border-color:#37006e}}.ms-TextField.ms-TextField--multiline .ms-TextField-field{line-height:17px;min-height:60px;min-width:260px;padding-top:6px;overflow:auto}.ms-Label,.ms-TextField.ms-TextField--multiline .ms-TextField-field{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400}.ms-Label{margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Toggle{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;position:relative;display:block;margin-bottom:26px}.ms-Toggle .ms-Label{position:relative;padding:0 0 0 62px;font-size:12px}.ms-Toggle:hover .ms-Label{color:#000}.ms-Toggle:active .ms-Label{color:#333}.ms-Toggle.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Label{color:#600000}}.ms-Toggle.is-disabled .ms-Toggle-field{background-color:#fff!important;border-color:#c8c8c8!important;pointer-events:none!important;cursor:default!important}.ms-Toggle.is-disabled .ms-Toggle-field:before{background-color:#c8c8c8!important}@media screen and (-ms-high-contrast:active){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle.is-disabled .ms-Toggle-field,.ms-Toggle.is-disabled .ms-Toggle-field:before{border-color:#600000}}.ms-Toggle-description{position:relative;font-size:12px;vertical-align:top;display:block;margin-bottom:8px}.ms-Toggle-field{position:relative;display:inline-block;width:57px;height:20px;box-sizing:border-box;border:2.5px solid #c8c8c8;cursor:pointer}.ms-Toggle-input{position:absolute;opacity:0;top:0}.ms-Toggle-input+.ms-Toggle-field{background-color:#f4f4f4}.ms-Toggle-input+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;left:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input+.ms-Toggle-field:before{right:auto;border-right:2.5px solid #fff}.ms-Toggle-input+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input+.ms-Toggle-field .ms-Label--off{display:block}.ms-Toggle-input+.ms-Toggle-field .ms-Label--on{display:none}.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field:before{position:absolute;display:block;box-sizing:content-box;content:'';top:-2.5px;right:-2.5px;width:12px;height:20px;background-color:#767676;outline:2px solid transparent}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field:before{border:2.5px solid #fff;height:15px;outline:0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field:before{border-color:#000}}.ms-Toggle-input:checked+.ms-Toggle-field:before{left:auto;border-left:2.5px solid #fff}.ms-Toggle-input:checked+.ms-Toggle-field:active{background-color:#0078d7}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--off{display:none}.ms-Toggle-input:checked+.ms-Toggle-field .ms-Label--on{display:block}@media screen and (-ms-high-contrast:active){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Toggle-input:checked+.ms-Toggle-field{background-color:#000}}.ms-Toggle-input:focus+.ms-Toggle-field,.ms-Toggle-input:hover+.ms-Toggle-field{background-color:#eaeaea}.ms-Toggle-input:focus:checked+.ms-Toggle-field,.ms-Toggle-input:hover:checked+.ms-Toggle-field{background-color:#005a9e}.ms-Toggle.ms-Toggle--textLeft{width:225px;margin-bottom:40px}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-description{display:inline-block;max-width:150px;top:-3px;margin-bottom:0}.ms-Toggle.ms-Toggle--textLeft .ms-Toggle-field{float:right}.u-contentCenter{position:relative;margin:0 auto;max-width:100%;transition:.167s all cubic-bezier(.1,.9,.2,1)}@media (min-width:640px){.u-contentCenter{max-width:960px}}@media (min-width:1366px){.ChannelPage .u-contentCenter,.HomePage .u-contentCenter{max-width:1200px}}*{box-sizing:border-box}body,html{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;padding:0;margin:0}a{color:#0078d7;cursor:pointer;font-size:inherit;text-decoration:none}a:focus,a:hover{color:#004578}a:active{color:#0078d7}@media screen and (-ms-high-contrast:active){a{color:#8080ff}}@media screen and (-ms-high-contrast:black-on-white){a{color:#00009f}}.VideoPortal-content{position:relative}.VideoPortal-navBar{display:block;top:0;width:100%;z-index:101;height:40px}.VideoPortal-page{overflow:visible;position:relative;padding-bottom:50px}.ms-NavBar.is-open .ms-NavBar-items{z-index:1}.ms-NavBar-link{color:#333;text-decoration:none}@media (min-width:480px){.ms-NavBar-item.is-selected{font-size:inherit}}.VideoList-item.ms-Grid-col{margin-bottom:16px;float:none;display:inline-block;vertical-align:top;padding-left:8px;padding-right:12px}.VideoList-thumbLink{display:block;position:relative;width:100%;padding-bottom:56.25%}.VideoList-thumbImg{max-width:100%;min-width:100%;position:absolute}.VideoList-thumbCaption{position:absolute;right:5px;bottom:5px;padding:3px;color:#fff;font-size:12px;background-color:rgba(0,0,0,.4)}.VideoList-text{padding-top:5px;margin:0}.VideoList-channel,.VideoList-title,.VideoList-viewCount{display:block}.VideoList-title{display:block;top:0;left:10px;bottom:50%;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.VideoList-channel{bottom:1.2em}.VideoList-viewCount{bottom:0}@media (min-width:480px){.VideoList-item{margin-right:-4px}}.SpotLight-container{background-color:#212121}.SpotLightList{white-space:nowrap;overflow-x:scroll;overflow-y:hidden;position:relative}.SpotLight-title{text-indent:16px}.SpotLight-item{position:relative;display:inline-block;float:none;margin:0}.SpotLight-thumb{padding:10px}.SpotLight-thumbImg{max-width:100%;min-width:100%}.SpotLight-text{position:absolute;right:10px;bottom:13px;left:10px;overflow:hidden;color:#fff;background:rgba(0,0,0,.4);padding:5px}.SpotLight-videoLength,.SpotLight-videoTitle{color:#fff;display:block}@media (min-width:640px){.SpotLightList{overflow:hidden}.SpotLight-container{padding:10px 0}}@media (min-width:1024px){.SpotLight-title{text-indent:8px}}.HomePage-content{padding:10px;padding-top:20px}.ChannelList-title{padding-left:10px;border-width:4px;border-left-style:solid}.ChannelList-titleText{margin-right:7px}.PlayerPage-theater{background-color:#212121}.VideoPlayer-player{max-width:100%;position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.VideoPlayer-player .VideoPlayer-iframe,.VideoPlayer-player iframe,.VideoPlayer-player video{background-color:#666;position:absolute;top:0;left:0;width:1px;min-width:100%;*width:100%;height:100%;min-height:100%;cursor:pointer}.VideoPlayer-player .VideoPlayer-iframe:after,.VideoPlayer-player iframe:after,.VideoPlayer-player video:after{position:absolute;content:'';display:block;width:0;height:0;border-top:60px solid transparent;border-bottom:60px solid transparent;border-left:90px solid rgba(0,0,0,.4);top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:.167s border-color cubic-bezier(.1,.25,.75,.9)}.VideoPlayer-player .VideoPlayer-iframe:hover:after,.VideoPlayer-player iframe:hover:after,.VideoPlayer-player video:hover:after{border-left-color:rgba(0,0,0,.75)}.PlayerPage-content{padding:0 10px}.PlayerPage-info{padding-right:32px}.PlayerPage-header,.PlayerPage-info{margin-bottom:20px}.PlayerPage-titleArea{margin-top:17px;margin-bottom:8px}.PlayerPage-title{margin-bottom:5px;margin-top:0;display:inline-block}.PlayerPage-titleSeparator{display:inline-block;margin:0 10px;position:relative;bottom:2px}.PlayerPage-channelLink{font-size:17px;padding-left:10px;border-width:4px;border-left-style:solid}.PlayerPage-channelLink:hover{color:#000}.PlayerPage-channelText{position:relative;bottom:2px}.PlayerPage-descriptionArea,.PlayerPage-metaData{margin-bottom:10px}.PlayerPage-description{display:inline;word-wrap:break-word}.PlayerPage-descriptionField{position:relative;margin-top:17px}.PlayerPage-viewCountText{margin-right:5px}.SampleVideo-content{background-color:#333;height:120px}@media (min-width:320px){.PlayerPage-content{padding:0 10px 0 16px}.PlayerPage-grid{padding:0}}@media (min-width:480px){.PlayerPage-relatedList .VideoList-title{font-size:15px;margin-bottom:5px}.PlayerPage-relatedList .VideoList-channel,.PlayerPage-relatedList .VideoList-viewCount{font-size:14px}}@media (min-width:640px){.PlayerPage-header{margin-bottom:25px}.PlayerPage-titleArea{margin-top:35px}.PlayerPage-description{font-size:14px}.PlayerPage-title{font-size:28px}.PlayerPage-metaData{font-size:17px}.PlayerPage-channelLink{font-size:21px}}@media (min-width:1024px){.PlayerPage-content{padding:0}.PlayerPage-relatedTitle{margin-top:42px}.PlayerPage-relatedList .VideoList-text{padding-top:0}.PlayerPage-relatedList .VideoList-title{margin-bottom:5px;line-height:1.2em;max-height:3.6em;overflow:hidden;white-space:normal}}.ChannelPage-content{padding:10px;padding-top:20px}.ChannelPage-pivots{margin-bottom:20px}.ChannelPage-pivots .ms-Pivot-link{font-size:21px}.ChannelsPage{padding:10px}.ChannelGroup-title{padding-bottom:10px;border-bottom:1px solid #eaeaea}.ChannelGroup-channel{padding:10px 0 10px 10px;border-width:4px;border-left-style:solid;margin-bottom:10px;display:block}.ChannelGroup-channel:hover{color:#000}@media (min-width:480px){.ChannelsPage{padding:20px}} \ No newline at end of file diff --git a/dist/samples/VideoPortal/index.html b/dist/samples/VideoPortal/index.html new file mode 100644 index 000000000..562c496ee --- /dev/null +++ b/dist/samples/VideoPortal/index.html @@ -0,0 +1,275 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + + +
              +
              + +
              + +
              +
              + +
              + +
              +
              +
              + +
              +
              + +
              +
              +
              +
              + + Azure Media Services Overview + +
              +
              + + Dynamically procrastinate B2C users after installed base benefits + 10:28 + +
              +
              +
              +
              + + Azure Media Services Overview + +
              +
              + + Dramatically maintain clicks-and-mortar solutions + 3:49 + +
              +
              +
              +
              + + Azure Media Services Overview + +
              +
              + + Seamlessly visualize quality intellectual capital + 1:56 + +
              +
              +
              +
              +
              +
              + + +
              +
              + +
              + +
              +

              + + PopularSee all videos + +

              + + +
              +
              +
              +
              +
              + + Video Title + 10:45 + +
              +
              + Seamlessly visualize quality intellectual capital + 345 views +
              +
              +
              + +
              +
              +
              + + Video Title + 2:59 + +
              +
              + Synergizing across organizations + 66 views +
              +
              +
              + +
              +
              +
              + + Video Title + 1:46 + +
              +
              + Holistically pontificate installed base portals + 930 views +
              +
              +
              + +
              +
              +
              + + Video Title + 1:56 + +
              +
              + Seamlessly visualize quality intellectual capital + 445 views +
              +
              +
              +
              +
              +
              + + +
              +

              + + CommunitySee all videos + +

              + +
              +
              +
              +
              +
              + + Video Title + 3:49 + +
              +
              + Dramatically maintain clicks-and-mortar solutions + 946 views +
              +
              +
              + +
              +
              +
              + + Video Title + 8:35 + +
              +
              + Dynamically innovate resource-leveling customer service + 92 views +
              +
              +
              + +
              +
              +
              + + Video Title + 10:28 + +
              +
              + Efficiently procrastinate B2C users after installed base benefits + 499 views +
              +
              +
              + +
              +
              +
              + + Video Title + 6:32 + +
              +
              + Completely synergize resource sucking relationships + 378 views +
              +
              +
              +
              +
              +
              +
              +
              +
              +
              +
              +
              + + + + + \ No newline at end of file diff --git a/dist/samples/VideoPortal/player.html b/dist/samples/VideoPortal/player.html new file mode 100644 index 000000000..5c221b85c --- /dev/null +++ b/dist/samples/VideoPortal/player.html @@ -0,0 +1,188 @@ + + + + + + + + Video Portal Example App + + + + + + + + + + + + +
              +
              + +
              + +
              +
              + +
              + +
              +
              +
              + +
              +
              +
              +
              +
              + +
              + Video Title +
              +
              +
              +
              +
              + + +
              +
              +
              +
              +
              +
              +

              + Dynamically procrastinate B2C users after installed base benefits +

              +
              + +
              + + + Community Videos + + +
              +
              + +
              +
              + Uploaded on + July 27, 2014 + | + 345 views +
              + +

              + Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. +

              +
              +
              + +
              +

              You might also like

              + + +
              +
              +
              +
              +
              + + Video Title + 3:49 + +
              +
              + Dramatically maintain clicks-and-mortar solutions + 946 views +
              +
              +
              + +
              +
              +
              + + Video Title + 3:49 + +
              +
              + Completely synergize resource sucking relationships + 946 views +
              +
              +
              + +
              +
              +
              + + Video Title + 3:49 + +
              +
              + Efficiently procrastinate B2C users after installed base benefits + 946 views +
              +
              +
              + +
              +
              +
              + + Video Title + 3:49 + +
              +
              + Seamlessly visualize quality intellectual capital + 946 views +
              +
              +
              +
              +
              +
              +
              +
              +
              +
              +
              +
              + + + + + \ No newline at end of file diff --git a/dist/samples/VideoPortal/sass/Base.scss b/dist/samples/VideoPortal/sass/Base.scss new file mode 100644 index 000000000..13e67dd08 --- /dev/null +++ b/dist/samples/VideoPortal/sass/Base.scss @@ -0,0 +1,42 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Base styles + + +* { + box-sizing: border-box; +} + +html, +body { + @include ms-font-m; + padding: 0; + margin: 0; +} + +a { + @include ms-Link; + font-size: inherit; + text-decoration: none; +} + +.VideoPortal-content { + position: relative; +} + +.VideoPortal-navBar { + display: block; + top: 0; + width: 100%; + z-index: 101; + height: 40px; +} + +.VideoPortal-page { + overflow: visible; + position: relative; + padding-bottom: 50px; +} diff --git a/dist/samples/VideoPortal/sass/ChannelPage.scss b/dist/samples/VideoPortal/sass/ChannelPage.scss new file mode 100644 index 000000000..23e9446c9 --- /dev/null +++ b/dist/samples/VideoPortal/sass/ChannelPage.scss @@ -0,0 +1,21 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Individual Channel Page styles + + +.ChannelPage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelPage-pivots { + margin-bottom: 20px; + + // Small override for Fabric Pivot component + .ms-Pivot-link { + font-size: $ms-font-size-xl; + } +} diff --git a/dist/samples/VideoPortal/sass/ChannelsPage.scss b/dist/samples/VideoPortal/sass/ChannelsPage.scss new file mode 100644 index 000000000..4d49d1b46 --- /dev/null +++ b/dist/samples/VideoPortal/sass/ChannelsPage.scss @@ -0,0 +1,34 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Channels List page styles + + +.ChannelsPage { + padding: 10px; +} + +.ChannelGroup-title { + padding-bottom: 10px; + border-bottom: 1px solid $ms-color-neutralLight; +} + +.ChannelGroup-channel { + padding: 10px 0 10px 10px; + border-width: 4px; + border-left-style: solid; + margin-bottom: 10px; + display: block; + + &:hover { + color: $ms-color-black; + } +} + +@media (min-width: $ms-screen-md-min) { + .ChannelsPage { + padding: 20px; + } +} diff --git a/dist/samples/VideoPortal/sass/HomePage.scss b/dist/samples/VideoPortal/sass/HomePage.scss new file mode 100644 index 000000000..a936a063d --- /dev/null +++ b/dist/samples/VideoPortal/sass/HomePage.scss @@ -0,0 +1,22 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Home page styles + + +.HomePage-content { + padding: 10px; + padding-top: 20px; +} + +.ChannelList-title { + padding-left: 10px; + border-width: 4px; + border-left-style: solid; +} + +.ChannelList-titleText { + margin-right: 7px; +} diff --git a/dist/samples/VideoPortal/sass/NavBar.scss b/dist/samples/VideoPortal/sass/NavBar.scss new file mode 100644 index 000000000..ca2fc3642 --- /dev/null +++ b/dist/samples/VideoPortal/sass/NavBar.scss @@ -0,0 +1,26 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Fabric NavBar override styles + + +.ms-NavBar.is-open { + .ms-NavBar-items { + z-index: 1; + } +} + +.ms-NavBar-link { + color: $ms-color-neutralPrimary; + text-decoration: none; +} + +@media (min-width: $ms-screen-md-min) { + .ms-NavBar-item { + &.is-selected { + font-size: inherit; + } + } +} diff --git a/dist/samples/VideoPortal/sass/PlayerPage.scss b/dist/samples/VideoPortal/sass/PlayerPage.scss new file mode 100644 index 000000000..719880480 --- /dev/null +++ b/dist/samples/VideoPortal/sass/PlayerPage.scss @@ -0,0 +1,203 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Video Player page styles + + +.PlayerPage-theater { + background-color: $ms-color-neutralDark; +} + +.VideoPlayer-player { + max-width: 100%; + position: relative; + padding-bottom: 56.25%; // Necessary to maintain 16:9 aspect ratio + height: 0; + overflow: hidden; + + iframe, + video, + .VideoPlayer-iframe { + background-color: $ms-color-neutralSecondary; + position: absolute; + top: 0; + left: 0; + width: 1px; + min-width: 100%; + *width: 100%; + height: 100%; + min-height: 100%; + cursor: pointer; + + // "Play" arrow button + &:after { + position: absolute; + content: ''; + display: block; + width: 0; + height: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 90px solid rgba(0,0,0,.4); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: $ms-duration1 border-color $ms-ease2; + } + + &:hover:after { + border-left-color: rgba(0,0,0,.75); + } + } +} + +.PlayerPage-content { + padding: 0 10px; +} + +.PlayerPage-info { + margin-bottom: 20px; + padding-right: 32px; +} + +.PlayerPage-header { + margin-bottom: 20px; +} + +.PlayerPage-titleArea { + margin-top: 17px; + margin-bottom: 8px; +} + +.PlayerPage-title { + margin-bottom: 5px; + margin-top: 0; + display: inline-block; +} + +.PlayerPage-titleSeparator { + display: inline-block; + margin: 0 10px; + position: relative; + bottom: 2px; +} + +.PlayerPage-channelLink { + font-size: $ms-font-size-l; + padding-left: 10px; + border-width: 4px; + border-left-style: solid; + + &:hover { + color: $ms-color-black; + } +} + +.PlayerPage-channelText { + position: relative; + bottom: 2px; +} + +.PlayerPage-metaData { + margin-bottom: 10px; +} + +.PlayerPage-descriptionArea { + margin-bottom: 10px; +} + +.PlayerPage-description { + display: inline; + word-wrap: break-word; +} + +.PlayerPage-descriptionField { + position: relative; + margin-top: 17px; +} + +.PlayerPage-viewCountText { + margin-right: 5px; +} + +.SampleVideo-content { + background-color: $ms-color-neutralPrimary; + height: 120px; +} + + +@media (min-width: $ms-screen-sm-min) { + .PlayerPage-content { + padding: 0 10px 0 16px; + } + + .PlayerPage-grid { + padding: 0; + } +} + +@media (min-width: $ms-screen-md-min) { + .PlayerPage-relatedList { + .VideoList-title { + font-size: $ms-font-size-m-plus; + margin-bottom: 5px; + } + + .VideoList-channel, + .VideoList-viewCount { + font-size: $ms-font-size-m; + } + } +} + +@media (min-width: $ms-screen-lg-min) { + .PlayerPage-header { + margin-bottom: 25px; + } + + .PlayerPage-titleArea { + margin-top: 35px; + } + + .PlayerPage-description { + font-size: $ms-font-size-m; + } + + .PlayerPage-title { + font-size: $ms-font-size-xxl; + } + + .PlayerPage-metaData { + font-size: $ms-font-size-l; + } + + .PlayerPage-channelLink { + font-size: $ms-font-size-xl; + } +} + +@media (min-width: $ms-screen-xl-min) { + .PlayerPage-content { + padding: 0; + } + + .PlayerPage-relatedTitle { + margin-top: 42px; + } + + .PlayerPage-relatedList { + .VideoList-text { + padding-top: 0; + } + + .VideoList-title { + margin-bottom: 5px; + line-height: 1.2em; + max-height: 3.6em; + overflow: hidden; + white-space: normal; + } + } +} diff --git a/dist/samples/VideoPortal/sass/SpotLight.scss b/dist/samples/VideoPortal/sass/SpotLight.scss new file mode 100644 index 000000000..031dffaaf --- /dev/null +++ b/dist/samples/VideoPortal/sass/SpotLight.scss @@ -0,0 +1,72 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// "Spotlight" container styles that celebrate a selection of videos + + +.SpotLight-container { + background-color: $ms-color-neutralDark; +} + +.SpotLightList { + white-space: nowrap; + overflow-x: scroll; + overflow-y: hidden; + position: relative; +} + +.SpotLight-title { + text-indent: 16px; +} + +.SpotLight-item { + position: relative; + display: inline-block; + float: none; + margin: 0; +} + +.SpotLight-thumb { + padding: 10px; +} + +.SpotLight-thumbImg { + max-width: 100%; + min-width: 100%; +} + +.SpotLight-text { + position: absolute; + right: 10px; + bottom: 13px; + left: 10px; + overflow: hidden; + color: #fff; + background: rgba(0,0,0,.4); + padding: 5px; +} + +.SpotLight-videoTitle, +.SpotLight-videoLength { + color: $ms-color-white; + display: block; +} + + +@media (min-width: $ms-screen-lg-min) { + .SpotLightList { + overflow: hidden; + } + + .SpotLight-container { + padding: 10px 0; + } +} + +@media (min-width: $ms-screen-xl-min) { + .SpotLight-title { + text-indent: 8px; + } +} diff --git a/dist/samples/VideoPortal/sass/Utilities.scss b/dist/samples/VideoPortal/sass/Utilities.scss new file mode 100644 index 000000000..d5afe890a --- /dev/null +++ b/dist/samples/VideoPortal/sass/Utilities.scss @@ -0,0 +1,30 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Utility classes + + +.u-contentCenter { // Utility for centering page areas regardless of parent container + position: relative; + margin: 0 auto; + max-width: 100%; + transition: $ms-duration1 all $ms-ease1; +} + +@media (min-width: $ms-screen-lg-min) { + .u-contentCenter { + max-width: 960px; + } +} + +@media (min-width: $ms-screen-xxl-min) { // 1366 + // Use a larger container size for non-player pages + .HomePage, + .ChannelPage { + .u-contentCenter { + max-width: 1200px; + } + } +} diff --git a/dist/samples/VideoPortal/sass/VideoListItem.scss b/dist/samples/VideoPortal/sass/VideoListItem.scss new file mode 100644 index 000000000..fa9bfae97 --- /dev/null +++ b/dist/samples/VideoPortal/sass/VideoListItem.scss @@ -0,0 +1,75 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Video Item tile styles + + +.VideoList-item.ms-Grid-col { + margin-bottom: 16px; + float: none; + display: inline-block; + vertical-align: top; + padding-left: 8px; + padding-right: 12px; +} + +.VideoList-thumbLink { + display: block; + position: relative; + width: 100%; + padding-bottom: 56.25%; +} + +.VideoList-thumbImg { + max-width: 100%; + min-width: 100%; + position: absolute; +} + +.VideoList-thumbCaption { + position: absolute; + right: 5px; + bottom: 5px; + padding: 3px; + color: $ms-color-white; + font-size: $ms-font-size-s; + background-color: rgba(0,0,0,.4); +} + +.VideoList-text { + padding-top: 5px; + margin: 0; +} + +.VideoList-title, +.VideoList-channel, +.VideoList-viewCount { + display: block; +} + +.VideoList-title { + display: block; + top: 0; + left: 10px; + bottom: 50%; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.VideoList-channel { + bottom: 1.2em; +} + +.VideoList-viewCount { + bottom: 0; +} + +@media (min-width: $ms-screen-md-min) { + .VideoList-item { + margin-right: -4px; // Need to offset margins from inline-block elements + } +} diff --git a/dist/samples/VideoPortal/sass/VideoPortal.scss b/dist/samples/VideoPortal/sass/VideoPortal.scss new file mode 100644 index 000000000..19217f94c --- /dev/null +++ b/dist/samples/VideoPortal/sass/VideoPortal.scss @@ -0,0 +1,23 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Video Portal Example App +// -------------------------------------------------- +// Load all page and component styles + + +// Import both Fabric and Fabric Components by reference to access variables +// and mixins from each without compiling their contents. +@import '../../../sass/Fabric.Common.scss'; +@import '../../../sass/Fabric.Components.scss'; + +// Import all LESS +@import 'Utilities'; +@import 'Base.scss'; +@import 'NavBar'; +@import 'VideoListItem'; +@import 'SpotLight'; +@import 'HomePage'; +@import 'PlayerPage'; +@import 'ChannelPage'; +@import 'ChannelsPage'; diff --git a/dist/samples/index.html b/dist/samples/index.html new file mode 100644 index 000000000..b2fc0c0ee --- /dev/null +++ b/dist/samples/index.html @@ -0,0 +1,111 @@ + + + + + + Fabric Samples Index + + + + + + + +

              Components

              +
              + + Breadcrumb + + Button + + Callout + + ChoiceField + + CommandBar + + ContextualMenu + + DatePicker + + Dialog + + Dropdown + + Facepile + + Label + + Link + + List + + ListItem + + MessageBanner + + NavBar + + OrgChart + + Overlay + + Panel + + PeoplePicker + + Persona + + PersonaCard + + Pivot + + ProgressIndicator + + SearchBox + + Spinner + + Table + + TextField + + Toggle + +
              + +

              Samples

              +
              + + Form + + Icons + + VideoPortal + +
              + + + \ No newline at end of file diff --git a/dist/sass/Fabric.Animations.Output.scss b/dist/sass/Fabric.Animations.Output.scss new file mode 100644 index 000000000..38227eb79 --- /dev/null +++ b/dist/sass/Fabric.Animations.Output.scss @@ -0,0 +1,419 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Animations + + +// Note that all animation classes should begin with the "ms-u" utility prefix. +// The original class names are deprecated and will be removed in a future release. + +@import "Fabric.Animations"; + +// slideRightIn10 +.ms-u-slideRightIn10 { + @include ms-u-slideRightIn10; +} +@-webkit-keyframes slideRightIn10 { + from { -webkit-transform:translate3d(-10px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn10 { + from { transform:translate3d(-10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightIn20 +.ms-u-slideRightIn20 { + @include ms-u-slideRightIn20; +} +@-webkit-keyframes slideRightIn20 { + from { -webkit-transform:translate3d(-20px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn20 { + from { transform:translate3d(-20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightIn40 +.ms-u-slideRightIn40 { + @include ms-u-slideRightIn40; +} +@-webkit-keyframes slideRightIn40 { + from { -webkit-transform:translate3d(-40px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn40 { + from { transform:translate3d(-40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn10 +.ms-u-slideLeftIn10 { + @include ms-u-slideLeftIn10; +} +@-webkit-keyframes slideLeftIn10 { + from { -webkit-transform:translate3d(10px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeftIn10 { + from { transform:translate3d(10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn20 +.ms-u-slideLeftIn20 { + @include ms-u-slideLeftIn20; +} +@-webkit-keyframes slideLeftIn20 { + from { -webkit-transform:translate3d(20px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeftIn20 { + from { transform:translate3d(20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn40 +.ms-u-slideLeftIn40 { + @include ms-u-slideLeftIn40; +} +@-webkit-keyframes slideLeftIn40 { + from { -webkit-transform:translate3d(40px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeftIn40 { + from { transform:translate3d(40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightIn400 +.ms-u-slideRightIn400 { + @include ms-u-slideRightIn400; +} +@-webkit-keyframes slideRightIn400 { + from { -webkit-transform:translate3d(-400px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRightIn400 { + from { transform:translate3d(-400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn400 +.ms-u-slideLeftIn400 { + @include ms-u-slideLeftIn400; +} +@-webkit-keyframes slideLeft400 { + from { -webkit-transform:translate3d(400px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeft400 { + from { transform:translate3d(400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideUpIn20 +.ms-u-slideUpIn20 { + @include ms-u-slideUpIn20; +} +@-webkit-keyframes slideUpIn20 { + from { -webkit-transform:translate3d(0px, 20px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideUpIn20 { + from { transform:translate3d(0px, 20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideUpIn10 +.ms-u-slideUpIn10 { + @include ms-u-slideUpIn10; +} +@-webkit-keyframes slideUpIn10 { + from { -webkit-transform:translate3d(0px, 10px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideUpIn10 { + from { transform:translate3d(0px, 10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideDownIn20 +.ms-u-slideDownIn20 { + @include ms-u-slideDownIn20; +} +@-webkit-keyframes slideDownIn20 { + from { -webkit-transform:translate3d(0px, -20px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideDownIn20 { + from { transform:translate3d(0px, -20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideDownIn10 +.ms-u-slideDownIn10 { + @include ms-u-slideDownIn10; +} +@-webkit-keyframes slideDownIn10 { + from { -webkit-transform:translate3d(0px, -10px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideDownIn10 { + from { transform:translate3d(0px, -10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightOut40 +.ms-u-slideRightOut40 { + @include ms-u-slideRightOut40; +} +@-webkit-keyframes slideRightOut40 { + from { -webkit-transform:translate3d(0px, 0px, 0px); } + to { -webkit-transform:translate3d(40px, 0px, 0px); } +} +@keyframes slideRightOut40 { + from { transform:translate3d(0px, 0px, 0px); } + to { transform:translate3d(40px, 0px, 0px); } +} + +// slideLeftOut40 +.ms-u-slideLeftOut40 { + @include ms-u-slideLeftOut40; +} +@-webkit-keyframes slideLeftOut40 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(-40px, 0px, 0px); } +} +@keyframes slideLeftOut40 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-40px, 0px, 0px); } +} + +// slideRightOut400 +.ms-u-slideRightOut400 { + @include ms-u-slideRightOut400; +} +@-webkit-keyframes slideRightOut400 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(400px, 0px, 0px); } +} +@keyframes slideRightOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(400px, 0px, 0px); } +} + +// slideLeftOut400 +.ms-u-slideLeftOut400 { + @include ms-u-slideLeftOut400; +} +@-webkit-keyframes slideLeftOut400 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(-400px, 0px, 0px); } +} +@keyframes slideLeftOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-400px, 0px, 0px); } +} + +// slideUpOut20 +.ms-u-slideUpOut20 { + @include ms-u-slideUpOut20; +} +@-webkit-keyframes slideUpOut20 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, -20px, 0px); } +} +@keyframes slideUpOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -20px, 0px); } +} + +// slideUpOut10 +.ms-u-slideUpOut10 { + @include ms-u-slideUpOut10; +} +@-webkit-keyframes slideUpOut10 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, -10px, 0px); } +} +@keyframes slideUpOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -10px, 0px); } +} + +// slideDownOut20 +.ms-u-slideDownOut20 { + @include ms-u-slideDownOut20; +} +@-webkit-keyframes slideDownOut20 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, 20px, 0px); } +} +@keyframes slideDownOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 20px, 0px); } +} + +// slideDownOut10 +.ms-u-slideDownOut10 { + @include ms-u-slideDownOut10; +} +@-webkit-keyframes slideDownOut10 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, 10px, 0px); } +} +@keyframes slideDownOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 10px, 0px); } +} + +// scaleUpIn100 +.ms-u-scaleUpIn100 { + @include ms-u-scaleUpIn100; +} +@-webkit-keyframes scaleUp100 { + from { -webkit-transform:scale3d(.98, .98, 1); } + to { -webkit-transform:scale3d(1, 1, 1); } +} +@keyframes scaleUp100 { + from { transform:scale3d(.98, .98, 1); } + to { transform:scale3d(1, 1, 1); } +} + +// scaleDownIn100 +.ms-u-scaleDownIn100 { + @include ms-u-scaleDownIn100; +} +@-webkit-keyframes scaleDown100 { + from { -webkit-transform:scale3d(1.03, 1.03, 1); } + to { -webkit-transform:scale3d(1, 1, 1); } +} +@keyframes scaleDown100 { + from { transform:scale3d(1.03, 1.03, 1); } + to { transform:scale3d(1, 1, 1); } +} + +// scaleUpOut103 +.ms-u-scaleUpOut103 { + @include ms-u-scaleUpOut103; +} +@-webkit-keyframes scaleUp103 { + from { -webkit-transform:scale3d(1, 1, 1); } + to { -webkit-transform:scale3d(1.03, 1.03, 1); } +} +@keyframes scaleUp103 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(1.03, 1.03, 1); } +} + +// scaleDownOut98 +.ms-u-scaleDownOut98 { + @include ms-u-scaleDownOut98; +} +@-webkit-keyframes scaleDown98 { + from { -webkit-transform:scale3d(1, 1, 1); } + to { -webkit-transform:scale3d(0.98, 0.98, 1); } +} +@keyframes scaleDown98 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(0.98, 0.98, 1); } +} + +// fadeIn +.ms-u-fadeIn400 { + @include ms-u-fadeIn400; +} +.ms-u-fadeIn100 { + @include ms-u-fadeIn100; +} +.ms-u-fadeIn200 { + @include ms-u-fadeIn200; +} +.ms-u-fadeIn500 { + @include ms-u-fadeIn500; +} +@-webkit-keyframes fadeIn { + from { opacity: 0; -webkit-animation-timing-function: $ms-ease2; } + to { opacity: 1; } +} +@keyframes fadeIn { + from { opacity: 0; animation-timing-function: $ms-ease2; } + to { opacity: 1; } +} + +// fadeOut +.ms-u-fadeOut400 { + @include ms-u-fadeOut400; +} +.ms-u-fadeOut100 { + @include ms-u-fadeOut100; +} +.ms-u-fadeOut200 { + @include ms-u-fadeOut200; +} +.ms-u-fadeOut500 { + @include ms-u-fadeOut500; +} +@-webkit-keyframes fadeOut { + from { opacity: 1; -webkit-animation-timing-function: $ms-ease2; } + to { opacity: 0; } +} +@keyframes fadeOut { + from { opacity: 1; animation-timing-function: $ms-ease2; } + to { opacity: 0; } +} + +// rotate90deg +.ms-u-rotate90deg { + @include ms-u-rotate90deg; +} +@-webkit-keyframes rotate90 { + from { -webkit-transform:rotateZ(0deg); } + to { -webkit-transform:rotateZ(90deg); } +} +@keyframes rotate90 { + from { transform:rotateZ(0deg); } + to { transform:rotateZ(90deg); } +} + +// rotateN90deg +.ms-u-rotateN90deg { + @include ms-u-rotateN90deg; +} +@-webkit-keyframes rotateN90 { + from { -webkit-transform:rotateZ(90deg); } + to { -webkit-transform:rotateZ(0deg); } +} +@keyframes rotateN90 { + from { transform:rotateZ(90deg); } + to { transform:rotateZ(0deg); } +} + +// expandCollapse400 +.ms-u-expandCollapse400 { + @include ms-u-expandCollapse400; +} + +// expandCollapse200 +.ms-u-expandCollapse200 { + @include ms-u-expandCollapse200; +} + +// expandCollapse100 +.ms-u-expandCollapse100 { + @include ms-u-expandCollapse100; +} + +// delay100 +.ms-u-delay100 { + @include ms-u-delay100; +} + +// delay200 +.ms-u-delay200 { + @include ms-u-delay200; +} diff --git a/dist/sass/Fabric.Animations.RTL.Output.scss b/dist/sass/Fabric.Animations.RTL.Output.scss new file mode 100644 index 000000000..8ad465a5b --- /dev/null +++ b/dist/sass/Fabric.Animations.RTL.Output.scss @@ -0,0 +1,80 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RTL overrides for Fabric Animations + + +@import "Fabric.Animations.Output"; +@import "Fabric.Animations.RTL"; + +// slideRightIn10 +.ms-u-slideRightIn10 { + @include ms-u-slideRightIn10; +} + +// slideRightIn20 +.ms-u-slideRightIn20 { + @include ms-u-slideRightIn20; +} + +// slideRightIn40 +.ms-u-slideRightIn40 { + @include ms-u-slideRightIn40; +} + +// slideLeftIn10 +.ms-u-slideLeftIn10 { + @include ms-u-slideLeftIn10; +} + +// slideLeftIn20 +.ms-u-slideLeftIn20 { + @include ms-u-slideLeftIn20; +} + +// slideLeftIn40 +.ms-u-slideLeftIn40 { + @include ms-u-slideLeftIn40; +} + +// slideRightIn400 +.ms-u-slideRightIn400 { + @include ms-u-slideRightIn400; +} + +// slideLeftIn400 +.ms-u-slideLeftIn400 { + @include ms-u-slideLeftIn400; +} + +// slideRightOut40 +.ms-u-slideRightOut40 { + @include ms-u-slideRightOut40; +} + +// slideLeftOut40 +.ms-u-slideLeftOut40 { + @include ms-u-slideLeftOut40; +} + +// slideRightOut400 +.ms-u-slideRightOut400 { + @include ms-u-slideRightOut400; +} + +// slideLeftOut400 +.ms-u-slideLeftOut400 { + @include ms-u-slideLeftOut400; +} + +// rotate90deg +.ms-u-rotate90deg { + @include ms-u-rotate90deg; +} + +// rotateN90deg +.ms-u-rotateN90deg { + @include ms-u-rotateN90deg; +} diff --git a/dist/sass/Fabric.Color.Mixins.Output.scss b/dist/sass/Fabric.Color.Mixins.Output.scss new file mode 100644 index 000000000..69e206fda --- /dev/null +++ b/dist/sass/Fabric.Color.Mixins.Output.scss @@ -0,0 +1,448 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Mixins + +@import "Fabric.Color.Mixins"; + +//== Background colors +// +// Theme colors +.ms-bgColor-themeDark, +.ms-bgColor-themeDark--hover:hover { + @include ms-bgColor-themeDark; +} + +.ms-bgColor-themeDarkAlt, +.ms-bgColor-themeDarkAlt--hover:hover { + @include ms-bgColor-themeDarkAlt; +} + +.ms-bgColor-themeDarker, +.ms-bgColor-themeDarker--hover:hover { + @include ms-bgColor-themeDarker; +} + +.ms-bgColor-themePrimary, +.ms-bgColor-themePrimary--hover:hover { + @include ms-bgColor-themePrimary; +} + +.ms-bgColor-themeSecondary, +.ms-bgColor-themeSecondary--hover:hover { + @include ms-bgColor-themeSecondary; +} + +.ms-bgColor-themeTertiary, +.ms-bgColor-themeTertiary--hover:hover { + @include ms-bgColor-themeTertiary; +} + +.ms-bgColor-themeLight, +.ms-bgColor-themeLight--hover:hover { + @include ms-bgColor-themeLight; +} + +.ms-bgColor-themeLighter, +.ms-bgColor-themeLighter--hover:hover { + @include ms-bgColor-themeLighter; +} + +.ms-bgColor-themeLighterAlt, +.ms-bgColor-themeLighterAlt--hover:hover { + @include ms-bgColor-themeLighterAlt; +} + +// Neutral colors +.ms-bgColor-black, +.ms-bgColor-black--hover:hover { + @include ms-bgColor-black; +} + +.ms-bgColor-neutralDark, +.ms-bgColor-neutralDark--hover:hover { + @include ms-bgColor-neutralDark; +} + +.ms-bgColor-neutralPrimary, +.ms-bgColor-neutralPrimary--hover:hover { + @include ms-bgColor-neutralPrimary; +} + +.ms-bgColor-neutralSecondary, +.ms-bgColor-neutralSecondary--hover:hover { + @include ms-bgColor-neutralSecondary; +} + +.ms-bgColor-neutralSecondaryAlt, +.ms-bgColor-neutralSecondaryAlt--hover:hover { + @include ms-bgColor-neutralSecondaryAlt; +} + +.ms-bgColor-neutralTertiary, +.ms-bgColor-neutralTertiary--hover:hover { + @include ms-bgColor-neutralTertiary; +} + +.ms-bgColor-neutralTertiaryAlt, +.ms-bgColor-neutralTertiaryAlt--hover:hover { + @include ms-bgColor-neutralTertiaryAlt; +} + +.ms-bgColor-neutralLight, +.ms-bgColor-neutralLight--hover:hover { + @include ms-bgColor-neutralLight; +} + +.ms-bgColor-neutralLighter, +.ms-bgColor-neutralLighter--hover:hover { + @include ms-bgColor-neutralLighter; +} + +.ms-bgColor-neutralLighterAlt, +.ms-bgColor-neutralLighterAlt--hover:hover { + @include ms-bgColor-neutralLighterAlt; +} + +.ms-bgColor-white, +.ms-bgColor-white--hover:hover { + @include ms-bgColor-white; +} + + +// Brand and accent colors +.ms-bgColor-yellow { + @include ms-bgColor-yellow; +} + +.ms-bgColor-yellowLight { + @include ms-bgColor-yellowLight; +} + +.ms-bgColor-orange { + @include ms-bgColor-orange; +} + +.ms-bgColor-orangeLight { + @include ms-bgColor-orangeLight; +} + +.ms-bgColor-orangeLighter { + @include ms-bgColor-orangeLighter; +} + +.ms-bgColor-redDark { + @include ms-bgColor-redDark; +} + +.ms-bgColor-red { + @include ms-bgColor-red; +} + +.ms-bgColor-magentaDark { + @include ms-bgColor-magentaDark; +} + +.ms-bgColor-magenta { + @include ms-bgColor-magenta; +} + +.ms-bgColor-magentaLight { + @include ms-bgColor-magentaLight; +} + +.ms-bgColor-purpleDark { + @include ms-bgColor-purpleDark; +} + +.ms-bgColor-purple { + @include ms-bgColor-purple; +} + +.ms-bgColor-purpleLight { + @include ms-bgColor-purpleLight; +} + +.ms-bgColor-blueDark { + @include ms-bgColor-blueDark; +} + +.ms-bgColor-blueMid { + @include ms-bgColor-blueMid; +} + +.ms-bgColor-blue { + @include ms-bgColor-blue; +} + +.ms-bgColor-blueLight { + @include ms-bgColor-blueLight; +} + +.ms-bgColor-tealDark { + @include ms-bgColor-tealDark; +} + +.ms-bgColor-teal { + @include ms-bgColor-teal; +} + +.ms-bgColor-tealLight { + @include ms-bgColor-tealLight; +} + +.ms-bgColor-greenDark { + @include ms-bgColor-greenDark; +} + +.ms-bgColor-green { + @include ms-bgColor-green; +} + +.ms-bgColor-greenLight { + @include ms-bgColor-greenLight; +} + +// Message colors +.ms-bgColor-info { + @include ms-bgColor-info; +} + +.ms-bgColor-success { + @include ms-bgColor-success; +} + +.ms-bgColor-alert { + @include ms-bgColor-alert; +} + +.ms-bgColor-error { + @include ms-bgColor-error; +} + + +//== Border colors +// + +// Theme colors +.ms-borderColor-themeDark, +.ms-borderColor-themeDark--hover:hover { + @include ms-borderColor-themeDark; +} + +.ms-borderColor-themeDarkAlt, +.ms-borderColor-themeDarkAlt--hover:hover { + @include ms-borderColor-themeDarkAlt; +} + +.ms-borderColor-themeDarker, +.ms-borderColor-themeDarker--hover:hover { + @include ms-borderColor-themeDarker; +} + +.ms-borderColor-themePrimary, +.ms-borderColor-themePrimary--hover:hover { + @include ms-borderColor-themePrimary; +} + +.ms-borderColor-themeSecondary, +.ms-borderColor-themeSecondary--hover:hover { + @include ms-borderColor-themeSecondary; +} + +.ms-borderColor-themeTertiary, +.ms-borderColor-themeTertiary--hover:hover { + @include ms-borderColor-themeTertiary; +} + +.ms-borderColor-themeLight, +.ms-borderColor-themeLight--hover:hover { + @include ms-borderColor-themeLight; +} + +.ms-borderColor-themeLighter, +.ms-borderColor-themeLighter--hover:hover { + @include ms-borderColor-themeLighter; +} + +.ms-borderColor-themeLighterAlt, +.ms-borderColor-themeLighterAlt--hover:hover { + @include ms-borderColor-themeLighterAlt; +} + + +// Neutral colors +.ms-borderColor-black, +.ms-borderColor-black--hover:hover { + @include ms-borderColor-black; +} + +.ms-borderColor-neutralDark, +.ms-borderColor-neutralDark--hover:hover { + @include ms-borderColor-neutralDark; +} + +.ms-borderColor-neutralPrimary, +.ms-borderColor-neutralPrimary--hover:hover { + @include ms-borderColor-neutralPrimary; +} + +.ms-borderColor-neutralSecondary, +.ms-borderColor-neutralSecondary--hover:hover { + @include ms-borderColor-neutralSecondary; +} + +.ms-borderColor-neutralSecondaryAlt, +.ms-borderColor-neutralSecondaryAlt--hover:hover { + @include ms-borderColor-neutralSecondaryAlt; +} + +.ms-borderColor-neutralTertiary, +.ms-borderColor-neutralTertiary--hover:hover { + @include ms-borderColor-neutralTertiary; +} + +.ms-borderColor-neutralTertiaryAlt, +.ms-borderColor-neutralTertiaryAlt--hover:hover { + @include ms-borderColor-neutralTertiaryAlt; +} + +.ms-borderColor-neutralLight, +.ms-borderColor-neutralLight--hover:hover { + @include ms-borderColor-neutralLight; +} + +.ms-borderColor-neutralLighter, +.ms-borderColor-neutralLighter--hover:hover { + @include ms-borderColor-neutralLighter; +} + +.ms-borderColor-neutralLighterAlt, +.ms-borderColor-neutralLighterAlt--hover:hover { + @include ms-borderColor-neutralLighterAlt; +} + +.ms-borderColor-white, +.ms-borderColor-white--hover:hover { + @include ms-borderColor-white; +} + +// Brand and accent colors +.ms-borderColor-yellow { + @include ms-borderColor-yellow; +} + +.ms-borderColor-yellowLight { + @include ms-borderColor-yellowLight; +} + +.ms-borderColor-orange { + @include ms-borderColor-orange; +} + +.ms-borderColor-orangeLight { + @include ms-borderColor-orangeLight; +} + +.ms-borderColor-orangeLighter { + @include ms-borderColor-orangeLighter; +} + +.ms-borderColor-redDark { + @include ms-borderColor-redDark; +} + +.ms-borderColor-red { + @include ms-borderColor-red; +} + +.ms-borderColor-magentaDark { + @include ms-borderColor-magentaDark; +} + +.ms-borderColor-magenta { + @include ms-borderColor-magenta; +} + +.ms-borderColor-magentaLight { + @include ms-borderColor-magentaLight; +} + +.ms-borderColor-purpleDark { + @include ms-borderColor-purpleDark; +} + +.ms-borderColor-purple { + @include ms-borderColor-purple; +} + +.ms-borderColor-purpleLight { + @include ms-borderColor-purpleLight; +} + +.ms-borderColor-blueDark { + @include ms-borderColor-blueDark; +} + +.ms-borderColor-blueMid { + @include ms-borderColor-blueMid; +} + +.ms-borderColor-blue { + @include ms-borderColor-blue; +} + +.ms-borderColor-blueLight { + @include ms-borderColor-blueLight; +} + +.ms-borderColor-tealDark { + @include ms-borderColor-tealDark; +} + +.ms-borderColor-teal { + @include ms-borderColor-teal; +} + +.ms-borderColor-tealLight { + @include ms-borderColor-tealLight; +} + +.ms-borderColor-greenDark { + @include ms-borderColor-greenDark; +} + +.ms-borderColor-green { + @include ms-borderColor-green; +} + +.ms-borderColor-greenLight { + @include ms-borderColor-greenLight; +} + + +// Message colors +.ms-borderColor-info { + @include ms-borderColor-info; +} + +.ms-borderColor-success { + @include ms-borderColor-success; +} + +.ms-borderColor-alert { + @include ms-borderColor-alert; +} + +.ms-borderColor-error { + @include ms-borderColor-error; +} + + +// Individual borders, by request +.ms-borderColorTop-themePrimary, +.ms-borderColorTop-themePrimary--hover:hover { + @include ms-borderColorTop-themePrimary; +} diff --git a/dist/sass/Fabric.Components.scss b/dist/sass/Fabric.Components.scss new file mode 100644 index 000000000..d26c653ee --- /dev/null +++ b/dist/sass/Fabric.Components.scss @@ -0,0 +1,31 @@ +@import 'Fabric.Common'; + +@import '../components/Breadcrumb/Breadcrumb'; +@import '../components/Button/Button'; +@import '../components/Callout/Callout'; +@import '../components/ChoiceField/ChoiceField'; +@import '../components/CommandBar/CommandBar'; +@import '../components/ContextualMenu/ContextualMenu'; +@import '../components/DatePicker/DatePicker'; +@import '../components/Dialog/Dialog'; +@import '../components/Dropdown/Dropdown'; +@import '../components/Facepile/Facepile'; +@import '../components/Label/Label'; +@import '../components/Link/Link'; +@import '../components/List/List'; +@import '../components/ListItem/ListItem'; +@import '../components/MessageBanner/MessageBanner'; +@import '../components/NavBar/NavBar'; +@import '../components/OrgChart/OrgChart'; +@import '../components/Overlay/Overlay'; +@import '../components/Panel/Panel'; +@import '../components/PeoplePicker/PeoplePicker'; +@import '../components/Persona/Persona'; +@import '../components/PersonaCard/PersonaCard'; +@import '../components/Pivot/Pivot'; +@import '../components/ProgressIndicator/ProgressIndicator'; +@import '../components/SearchBox/SearchBox'; +@import '../components/Spinner/Spinner'; +@import '../components/Table/Table'; +@import '../components/TextField/TextField'; +@import '../components/Toggle/Toggle'; diff --git a/dist/sass/Fabric.Grid.Output.scss b/dist/sass/Fabric.Grid.Output.scss new file mode 100644 index 000000000..eabedd697 --- /dev/null +++ b/dist/sass/Fabric.Grid.Output.scss @@ -0,0 +1,32 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fluid 12-column grids for small, medium, and large devices + +@import "Fabric.Grid"; + +//== Grid container (same for all sizes) +// +.ms-Grid { + @include ms-Grid; +} + +//== Grid rows (pull first and last column out) +// +.ms-Grid-row { + @include ms-Grid-row; +} + +//== Grid cells +// +.ms-Grid-col { + @include ms-Grid-col; +} + +// For nested grids (a grid inside a column), removing the padding +// so that the nested grid's columns go to the edge of the parent's. +.ms-Grid-col .ms-Grid { + padding: 0; +} diff --git a/dist/sass/Fabric.Icons.Font.Output.scss b/dist/sass/Fabric.Icons.Font.Output.scss new file mode 100644 index 000000000..d15af33a2 --- /dev/null +++ b/dist/sass/Fabric.Icons.Font.Output.scss @@ -0,0 +1,23 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Icon font-family definition + +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ + +@import "Fabric.Typography.Fonts"; + +@font-face { + font-family: 'Office365Icons'; + src: url('#{$ms-font-directory}/icons/office365icons.eot?'); + src: url('#{$ms-font-directory}/icons/office365icons.eot?#iefix') format('embedded-opentype'), + url('#{$ms-font-directory}/icons/office365icons.woff?') format('woff'), + url('#{$ms-font-directory}/icons/office365icons.ttf?') format('truetype'), + url('#{$ms-font-directory}/icons/office365icons.svg?#office365icons') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/dist/sass/Fabric.Icons.Output.scss b/dist/sass/Fabric.Icons.Output.scss new file mode 100644 index 000000000..d5c733d74 --- /dev/null +++ b/dist/sass/Fabric.Icons.Output.scss @@ -0,0 +1,771 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Icon definitions + + +@import './Fabric.Icons'; + +// Base icon definition +.ms-Icon { + @include ms-Icon(); +} + +// Modifiers: Each of the icons. +//*-- Start +.ms-Icon--circleEmpty:before { @include ms-Icon--circleEmpty; } +.ms-Icon--circleFill:before { @include ms-Icon--circleFill; } +.ms-Icon--placeholder:before { @include ms-Icon--placeholder; } +.ms-Icon--star:before { @include ms-Icon--star; } +.ms-Icon--plus:before { @include ms-Icon--plus; } +.ms-Icon--minus:before { @include ms-Icon--minus; } +.ms-Icon--question:before { @include ms-Icon--question; } +.ms-Icon--exclamation:before { @include ms-Icon--exclamation; } +.ms-Icon--person:before { @include ms-Icon--person; } +.ms-Icon--mail:before { @include ms-Icon--mail; } +.ms-Icon--infoCircle:before { @include ms-Icon--infoCircle; } +.ms-Icon--alert:before { @include ms-Icon--alert; } +.ms-Icon--xCircle:before { @include ms-Icon--xCircle; } +.ms-Icon--mailOpen:before { @include ms-Icon--mailOpen; } +.ms-Icon--people:before { @include ms-Icon--people; } +.ms-Icon--bell:before { @include ms-Icon--bell; } +.ms-Icon--calendar:before { @include ms-Icon--calendar; } +.ms-Icon--scheduling:before { @include ms-Icon--scheduling; } +.ms-Icon--event:before { @include ms-Icon--event; } +.ms-Icon--folder:before { @include ms-Icon--folder; } +.ms-Icon--documents:before { @include ms-Icon--documents; } +.ms-Icon--onedrive:before { @include ms-Icon--onedrive; } +.ms-Icon--chat:before { @include ms-Icon--chat; } +.ms-Icon--sites:before { @include ms-Icon--sites; } +.ms-Icon--listBullets:before { @include ms-Icon--listBullets; } +.ms-Icon--calendarWeek:before { @include ms-Icon--calendarWeek; } +.ms-Icon--calendarWorkWeek:before { @include ms-Icon--calendarWorkWeek; } +.ms-Icon--calendarDay:before { @include ms-Icon--calendarDay; } +.ms-Icon--folderMove:before { @include ms-Icon--folderMove; } +.ms-Icon--panel:before { @include ms-Icon--panel; } +.ms-Icon--popout:before { @include ms-Icon--popout; } +.ms-Icon--menu:before { @include ms-Icon--menu; } +.ms-Icon--home:before { @include ms-Icon--home; } +.ms-Icon--favorites:before { @include ms-Icon--favorites; } +.ms-Icon--phone:before { @include ms-Icon--phone; } +.ms-Icon--mailSend:before { @include ms-Icon--mailSend; } +.ms-Icon--save:before { @include ms-Icon--save; } +.ms-Icon--trash:before { @include ms-Icon--trash; } +.ms-Icon--pencil:before { @include ms-Icon--pencil; } +.ms-Icon--flag:before { @include ms-Icon--flag; } +.ms-Icon--reply:before { @include ms-Icon--reply; } +.ms-Icon--miniatures:before { @include ms-Icon--miniatures; } +.ms-Icon--voicemail:before { @include ms-Icon--voicemail; } +.ms-Icon--play:before { @include ms-Icon--play; } +.ms-Icon--pause:before { @include ms-Icon--pause; } +.ms-Icon--onlineAdd:before { @include ms-Icon--onlineAdd; } +.ms-Icon--onlineJoin:before { @include ms-Icon--onlineJoin; } +.ms-Icon--replyAll:before { @include ms-Icon--replyAll; } +.ms-Icon--attachment:before { @include ms-Icon--attachment; } +.ms-Icon--drm:before { @include ms-Icon--drm; } +.ms-Icon--pinDown:before { @include ms-Icon--pinDown; } +.ms-Icon--refresh:before { @include ms-Icon--refresh; } +.ms-Icon--gear:before { @include ms-Icon--gear; } +.ms-Icon--smiley:before { @include ms-Icon--smiley; } +.ms-Icon--info:before { @include ms-Icon--info; } +.ms-Icon--lock:before { @include ms-Icon--lock; } +.ms-Icon--search:before { @include ms-Icon--search; } +.ms-Icon--questionReverse:before { @include ms-Icon--questionReverse; } +.ms-Icon--notRecurring:before { @include ms-Icon--notRecurring; } +.ms-Icon--tasks:before { @include ms-Icon--tasks; } +.ms-Icon--check:before { @include ms-Icon--check; } +.ms-Icon--x:before { @include ms-Icon--x; } +.ms-Icon--ellipsis:before { @include ms-Icon--ellipsis; } +.ms-Icon--dot:before { @include ms-Icon--dot; } +.ms-Icon--arrowUp:before { @include ms-Icon--arrowUp; } +.ms-Icon--arrowDown:before { @include ms-Icon--arrowDown; } +.ms-Icon--arrowLeft:before { @include ms-Icon--arrowLeft; } +.ms-Icon--arrowRight:before { @include ms-Icon--arrowRight; } +.ms-Icon--download:before { @include ms-Icon--download; } +.ms-Icon--directions:before { @include ms-Icon--directions; } +.ms-Icon--microphone:before { @include ms-Icon--microphone; } +.ms-Icon--caretUp:before { @include ms-Icon--caretUp; } +.ms-Icon--caretDown:before { @include ms-Icon--caretDown; } +.ms-Icon--caretLeft:before { @include ms-Icon--caretLeft; } +.ms-Icon--caretRight:before { @include ms-Icon--caretRight; } +.ms-Icon--caretUpLeft:before { @include ms-Icon--caretUpLeft; } +.ms-Icon--caretUpRight:before { @include ms-Icon--caretUpRight; } +.ms-Icon--caretDownRight:before { @include ms-Icon--caretDownRight; } +.ms-Icon--caretDownLeft:before { @include ms-Icon--caretDownLeft; } +.ms-Icon--note:before { @include ms-Icon--note; } +.ms-Icon--noteReply:before { @include ms-Icon--noteReply; } +.ms-Icon--noteForward:before { @include ms-Icon--noteForward; } +.ms-Icon--key:before { @include ms-Icon--key; } +.ms-Icon--tile:before { @include ms-Icon--tile; } +.ms-Icon--taskRecurring:before { @include ms-Icon--taskRecurring; } +.ms-Icon--starEmpty:before { @include ms-Icon--starEmpty; } +.ms-Icon--upload:before { @include ms-Icon--upload; } +.ms-Icon--wrench:before { @include ms-Icon--wrench; } +.ms-Icon--share:before { @include ms-Icon--share; } +.ms-Icon--documentReply:before { @include ms-Icon--documentReply; } +.ms-Icon--documentForward:before { @include ms-Icon--documentForward; } +.ms-Icon--partner:before { @include ms-Icon--partner; } +.ms-Icon--reactivate:before { @include ms-Icon--reactivate; } +.ms-Icon--sort:before { @include ms-Icon--sort; } +.ms-Icon--personAdd:before { @include ms-Icon--personAdd; } +.ms-Icon--chevronUp:before { @include ms-Icon--chevronUp; } +.ms-Icon--chevronDown:before { @include ms-Icon--chevronDown; } +.ms-Icon--chevronLeft:before { @include ms-Icon--chevronLeft; } +.ms-Icon--chevronRight:before { @include ms-Icon--chevronRight; } +.ms-Icon--peopleAdd:before { @include ms-Icon--peopleAdd; } +.ms-Icon--newsfeed:before { @include ms-Icon--newsfeed; } +.ms-Icon--notebook:before { @include ms-Icon--notebook; } +.ms-Icon--link:before { @include ms-Icon--link; } +.ms-Icon--chevronsUp:before { @include ms-Icon--chevronsUp; } +.ms-Icon--chevronsDown:before { @include ms-Icon--chevronsDown; } +.ms-Icon--chevronsLeft:before { @include ms-Icon--chevronsLeft; } +.ms-Icon--chevronsRight:before { @include ms-Icon--chevronsRight; } +.ms-Icon--clutter:before { @include ms-Icon--clutter; } +.ms-Icon--subscribe:before { @include ms-Icon--subscribe; } +.ms-Icon--unsubscribe:before { @include ms-Icon--unsubscribe; } +.ms-Icon--personRemove:before { @include ms-Icon--personRemove; } +.ms-Icon--receiptForward:before { @include ms-Icon--receiptForward; } +.ms-Icon--receiptReply:before { @include ms-Icon--receiptReply; } +.ms-Icon--receiptCheck:before { @include ms-Icon--receiptCheck; } +.ms-Icon--peopleRemove:before { @include ms-Icon--peopleRemove; } +.ms-Icon--merge:before { @include ms-Icon--merge; } +.ms-Icon--split:before { @include ms-Icon--split; } +.ms-Icon--eventCancel:before { @include ms-Icon--eventCancel; } +.ms-Icon--eventShare:before { @include ms-Icon--eventShare; } +.ms-Icon--today:before { @include ms-Icon--today; } +.ms-Icon--oofReply:before { @include ms-Icon--oofReply; } +.ms-Icon--voicemailReply:before { @include ms-Icon--voicemailReply; } +.ms-Icon--voicemailForward:before { @include ms-Icon--voicemailForward; } +.ms-Icon--ribbon:before { @include ms-Icon--ribbon; } +.ms-Icon--contact:before { @include ms-Icon--contact; } +.ms-Icon--eye:before { @include ms-Icon--eye; } +.ms-Icon--glasses:before { @include ms-Icon--glasses; } +.ms-Icon--print:before { @include ms-Icon--print; } +.ms-Icon--room:before { @include ms-Icon--room; } +.ms-Icon--post:before { @include ms-Icon--post; } +.ms-Icon--toggle:before { @include ms-Icon--toggle; } +.ms-Icon--touch:before { @include ms-Icon--touch; } +.ms-Icon--clock:before { @include ms-Icon--clock; } +.ms-Icon--fax:before { @include ms-Icon--fax; } +.ms-Icon--lightning:before { @include ms-Icon--lightning; } +.ms-Icon--dialpad:before { @include ms-Icon--dialpad; } +.ms-Icon--phoneTransfer:before { @include ms-Icon--phoneTransfer; } +.ms-Icon--phoneAdd:before { @include ms-Icon--phoneAdd; } +.ms-Icon--late:before { @include ms-Icon--late; } +.ms-Icon--chatAdd:before { @include ms-Icon--chatAdd; } +.ms-Icon--conflict:before { @include ms-Icon--conflict; } +.ms-Icon--navigate:before { @include ms-Icon--navigate; } +.ms-Icon--camera:before { @include ms-Icon--camera; } +.ms-Icon--filter:before { @include ms-Icon--filter; } +.ms-Icon--fullscreen:before { @include ms-Icon--fullscreen; } +.ms-Icon--new:before { @include ms-Icon--new; } +.ms-Icon--mailEmpty:before { @include ms-Icon--mailEmpty; } +.ms-Icon--editBox:before { @include ms-Icon--editBox; } +.ms-Icon--waffle:before { @include ms-Icon--waffle; } +.ms-Icon--work:before { @include ms-Icon--work; } +.ms-Icon--eventRecurring:before { @include ms-Icon--eventRecurring; } +.ms-Icon--cart:before { @include ms-Icon--cart; } +.ms-Icon--socialListening:before { @include ms-Icon--socialListening; } +.ms-Icon--mapMarker:before { @include ms-Icon--mapMarker; } +.ms-Icon--org:before { @include ms-Icon--org; } +.ms-Icon--replyAlt:before { @include ms-Icon--replyAlt; } +.ms-Icon--replyAllAlt:before { @include ms-Icon--replyAllAlt; } +.ms-Icon--eventInfo:before { @include ms-Icon--eventInfo; } +.ms-Icon--group:before { @include ms-Icon--group; } +.ms-Icon--money:before { @include ms-Icon--money; } +.ms-Icon--graph:before { @include ms-Icon--graph; } +.ms-Icon--noteEdit:before { @include ms-Icon--noteEdit; } +.ms-Icon--dashboard:before { @include ms-Icon--dashboard; } +.ms-Icon--mailEdit:before { @include ms-Icon--mailEdit; } +.ms-Icon--pinLeft:before { @include ms-Icon--pinLeft; } +.ms-Icon--heart:before { @include ms-Icon--heart; } +.ms-Icon--heartEmpty:before { @include ms-Icon--heartEmpty; } +.ms-Icon--picture:before { @include ms-Icon--picture; } +.ms-Icon--cake:before { @include ms-Icon--cake; } +.ms-Icon--books:before { @include ms-Icon--books; } +.ms-Icon--chart:before { @include ms-Icon--chart; } +.ms-Icon--video:before { @include ms-Icon--video; } +.ms-Icon--soccer:before { @include ms-Icon--soccer; } +.ms-Icon--meal:before { @include ms-Icon--meal; } +.ms-Icon--balloon:before { @include ms-Icon--balloon; } +.ms-Icon--cat:before { @include ms-Icon--cat; } +.ms-Icon--dog:before { @include ms-Icon--dog; } +.ms-Icon--bag:before { @include ms-Icon--bag; } +.ms-Icon--music:before { @include ms-Icon--music; } +.ms-Icon--stopwatch:before { @include ms-Icon--stopwatch; } +.ms-Icon--coffee:before { @include ms-Icon--coffee; } +.ms-Icon--briefcase:before { @include ms-Icon--briefcase; } +.ms-Icon--pill:before { @include ms-Icon--pill; } +.ms-Icon--trophy:before { @include ms-Icon--trophy; } +.ms-Icon--firstAid:before { @include ms-Icon--firstAid; } +.ms-Icon--plane:before { @include ms-Icon--plane; } +.ms-Icon--page:before { @include ms-Icon--page; } +.ms-Icon--car:before { @include ms-Icon--car; } +.ms-Icon--dogAlt:before { @include ms-Icon--dogAlt; } +.ms-Icon--document:before { @include ms-Icon--document; } +.ms-Icon--metadata:before { @include ms-Icon--metadata; } +.ms-Icon--pointItem:before { @include ms-Icon--pointItem; } +.ms-Icon--text:before { @include ms-Icon--text; } +.ms-Icon--fieldText:before { @include ms-Icon--fieldText; } +.ms-Icon--fieldNumber:before { @include ms-Icon--fieldNumber; } +.ms-Icon--dropdown:before { @include ms-Icon--dropdown; } +.ms-Icon--radioButton:before { @include ms-Icon--radioButton; } +.ms-Icon--checkbox:before { @include ms-Icon--checkbox; } +.ms-Icon--story:before { @include ms-Icon--story; } +.ms-Icon--bold:before { @include ms-Icon--bold; } +.ms-Icon--italic:before { @include ms-Icon--italic; } +.ms-Icon--underline:before { @include ms-Icon--underline; } +.ms-Icon--quote:before { @include ms-Icon--quote; } +.ms-Icon--styleRemove:before { @include ms-Icon--styleRemove; } +.ms-Icon--pictureAdd:before { @include ms-Icon--pictureAdd; } +.ms-Icon--pictureRemove:before { @include ms-Icon--pictureRemove; } +.ms-Icon--desktop:before { @include ms-Icon--desktop; } +.ms-Icon--tablet:before { @include ms-Icon--tablet; } +.ms-Icon--mobile:before { @include ms-Icon--mobile; } +.ms-Icon--table:before { @include ms-Icon--table; } +.ms-Icon--hide:before { @include ms-Icon--hide; } +.ms-Icon--shield:before { @include ms-Icon--shield; } +.ms-Icon--header:before { @include ms-Icon--header; } +.ms-Icon--paint:before { @include ms-Icon--paint; } +.ms-Icon--support:before { @include ms-Icon--support; } +.ms-Icon--settings:before { @include ms-Icon--settings; } +.ms-Icon--creditCard:before { @include ms-Icon--creditCard; } +.ms-Icon--reload:before { @include ms-Icon--reload; } +.ms-Icon--peopleSecurity:before { @include ms-Icon--peopleSecurity; } +.ms-Icon--fieldTextBox:before { @include ms-Icon--fieldTextBox; } +.ms-Icon--multiChoice:before { @include ms-Icon--multiChoice; } +.ms-Icon--fieldMail:before { @include ms-Icon--fieldMail; } +.ms-Icon--contactForm:before { @include ms-Icon--contactForm; } +.ms-Icon--circleHalfFilled:before { @include ms-Icon--circleHalfFilled; } +.ms-Icon--documentPDF:before { @include ms-Icon--documentPDF; } +.ms-Icon--bookmark:before { @include ms-Icon--bookmark; } +.ms-Icon--circleUnfilled:before { @include ms-Icon--circleUnfilled; } +.ms-Icon--circleFilled:before { @include ms-Icon--circleFilled; } +.ms-Icon--textBox:before { @include ms-Icon--textBox; } +.ms-Icon--drop:before { @include ms-Icon--drop; } +.ms-Icon--sun:before { @include ms-Icon--sun; } +.ms-Icon--lifesaver:before { @include ms-Icon--lifesaver; } +.ms-Icon--lifesaverLock:before { @include ms-Icon--lifesaverLock; } +.ms-Icon--mailUnread:before { @include ms-Icon--mailUnread; } +.ms-Icon--mailRead:before { @include ms-Icon--mailRead; } +.ms-Icon--inboxCheck:before { @include ms-Icon--inboxCheck; } +.ms-Icon--folderSearch:before { @include ms-Icon--folderSearch; } +.ms-Icon--collapse:before { @include ms-Icon--collapse; } +.ms-Icon--expand:before { @include ms-Icon--expand; } +.ms-Icon--ascending:before { @include ms-Icon--ascending; } +.ms-Icon--descending:before { @include ms-Icon--descending; } +.ms-Icon--filterClear:before { @include ms-Icon--filterClear; } +.ms-Icon--checkboxEmpty:before { @include ms-Icon--checkboxEmpty; } +.ms-Icon--checkboxMixed:before { @include ms-Icon--checkboxMixed; } +.ms-Icon--boards:before { @include ms-Icon--boards; } +.ms-Icon--checkboxCheck:before { @include ms-Icon--checkboxCheck; } +.ms-Icon--frowny:before { @include ms-Icon--frowny; } +.ms-Icon--lightBulb:before { @include ms-Icon--lightBulb; } +.ms-Icon--globe:before { @include ms-Icon--globe; } +.ms-Icon--deviceWipe:before { @include ms-Icon--deviceWipe; } +.ms-Icon--listCheck:before { @include ms-Icon--listCheck; } +.ms-Icon--listGroup:before { @include ms-Icon--listGroup; } +.ms-Icon--timeline:before { @include ms-Icon--timeline; } +.ms-Icon--fontIncrease:before { @include ms-Icon--fontIncrease; } +.ms-Icon--fontDecrease:before { @include ms-Icon--fontDecrease; } +.ms-Icon--fontColor:before { @include ms-Icon--fontColor; } +.ms-Icon--mailCheck:before { @include ms-Icon--mailCheck; } +.ms-Icon--mailDown:before { @include ms-Icon--mailDown; } +.ms-Icon--listCheckbox:before { @include ms-Icon--listCheckbox; } +.ms-Icon--sunAdd:before { @include ms-Icon--sunAdd; } +.ms-Icon--sunQuestion:before { @include ms-Icon--sunQuestion; } +.ms-Icon--chevronThinUp:before { @include ms-Icon--chevronThinUp; } +.ms-Icon--chevronThinDown:before { @include ms-Icon--chevronThinDown; } +.ms-Icon--chevronThinLeft:before { @include ms-Icon--chevronThinLeft; } +.ms-Icon--chevronThinRight:before { @include ms-Icon--chevronThinRight; } +.ms-Icon--chevronThickUp:before { @include ms-Icon--chevronThickUp; } +.ms-Icon--chevronThickDown:before { @include ms-Icon--chevronThickDown; } +.ms-Icon--chevronThickLeft:before { @include ms-Icon--chevronThickLeft; } +.ms-Icon--chevronThickRight:before { @include ms-Icon--chevronThickRight; } +.ms-Icon--linkRemove:before { @include ms-Icon--linkRemove; } +.ms-Icon--alertOutline:before { @include ms-Icon--alertOutline; } +.ms-Icon--documentLandscape:before { @include ms-Icon--documentLandscape; } +.ms-Icon--documentAdd:before { @include ms-Icon--documentAdd; } +.ms-Icon--toggleMiddle:before { @include ms-Icon--toggleMiddle; } +.ms-Icon--embed:before { @include ms-Icon--embed; } +.ms-Icon--listNumbered:before { @include ms-Icon--listNumbered; } +.ms-Icon--peopleCheck:before { @include ms-Icon--peopleCheck; } +.ms-Icon--caretUpOutline:before { @include ms-Icon--caretUpOutline; } +.ms-Icon--caretDownOutline:before { @include ms-Icon--caretDownOutline; } +.ms-Icon--caretLeftOutline:before { @include ms-Icon--caretLeftOutline; } +.ms-Icon--caretRightOutline:before { @include ms-Icon--caretRightOutline; } +.ms-Icon--mailSync:before { @include ms-Icon--mailSync; } +.ms-Icon--mailError:before { @include ms-Icon--mailError; } +.ms-Icon--mailPause:before { @include ms-Icon--mailPause; } +.ms-Icon--peopleSync:before { @include ms-Icon--peopleSync; } +.ms-Icon--peopleError:before { @include ms-Icon--peopleError; } +.ms-Icon--peoplePause:before { @include ms-Icon--peoplePause; } +.ms-Icon--circleBall:before { @include ms-Icon--circleBall; } +.ms-Icon--circleBalloons:before { @include ms-Icon--circleBalloons; } +.ms-Icon--circleCar:before { @include ms-Icon--circleCar; } +.ms-Icon--circleCat:before { @include ms-Icon--circleCat; } +.ms-Icon--circleCoffee:before { @include ms-Icon--circleCoffee; } +.ms-Icon--circleDog:before { @include ms-Icon--circleDog; } +.ms-Icon--circleLightning:before { @include ms-Icon--circleLightning; } +.ms-Icon--circlePill:before { @include ms-Icon--circlePill; } +.ms-Icon--circlePlane:before { @include ms-Icon--circlePlane; } +.ms-Icon--circlePoodle:before { @include ms-Icon--circlePoodle; } +.ms-Icon--checkPeople:before { @include ms-Icon--checkPeople; } +.ms-Icon--documentSearch:before { @include ms-Icon--documentSearch; } +.ms-Icon--sortLines:before { @include ms-Icon--sortLines; } +.ms-Icon--calendarPublic:before { @include ms-Icon--calendarPublic; } +.ms-Icon--contactPublic:before { @include ms-Icon--contactPublic; } +.ms-Icon--classNotebook:before { @include ms-Icon--classNotebook; } +.ms-Icon--triangleUp:before { @include ms-Icon--triangleUp; } +.ms-Icon--triangleRight:before { @include ms-Icon--triangleRight; } +.ms-Icon--triangleDown:before { @include ms-Icon--triangleDown; } +.ms-Icon--triangleLeft:before { @include ms-Icon--triangleLeft; } +.ms-Icon--triangleEmptyUp:before { @include ms-Icon--triangleEmptyUp; } +.ms-Icon--triangleEmptyRight:before { @include ms-Icon--triangleEmptyRight; } +.ms-Icon--triangleEmptyDown:before { @include ms-Icon--triangleEmptyDown; } +.ms-Icon--triangleEmptyLeft:before { @include ms-Icon--triangleEmptyLeft; } +.ms-Icon--filePDF:before { @include ms-Icon--filePDF; } +.ms-Icon--fileImage:before { @include ms-Icon--fileImage; } +.ms-Icon--fileDocument:before { @include ms-Icon--fileDocument; } +.ms-Icon--listGroup2:before { @include ms-Icon--listGroup2; } +.ms-Icon--copy:before { @include ms-Icon--copy; } +.ms-Icon--creditCardOutline:before { @include ms-Icon--creditCardOutline; } +.ms-Icon--mailPublic:before { @include ms-Icon--mailPublic; } +.ms-Icon--folderPublic:before { @include ms-Icon--folderPublic; } +.ms-Icon--teamwork:before { @include ms-Icon--teamwork; } +.ms-Icon--move:before { @include ms-Icon--move; } +.ms-Icon--classroom:before { @include ms-Icon--classroom; } +.ms-Icon--menu2:before { @include ms-Icon--menu2; } +.ms-Icon--plus2:before { @include ms-Icon--plus2; } +.ms-Icon--tag:before { @include ms-Icon--tag; } +.ms-Icon--arrowUp2:before { @include ms-Icon--arrowUp2; } +.ms-Icon--arrowDown2:before { @include ms-Icon--arrowDown2; } +.ms-Icon--circlePlus:before { @include ms-Icon--circlePlus; } +.ms-Icon--circleInfo:before { @include ms-Icon--circleInfo; } +.ms-Icon--section:before { @include ms-Icon--section; } +.ms-Icon--sections:before { @include ms-Icon--sections; } +.ms-Icon--at:before { @include ms-Icon--at; } +.ms-Icon--arrowUpRight:before { @include ms-Icon--arrowUpRight; } +.ms-Icon--arrowDownRight:before { @include ms-Icon--arrowDownRight; } +.ms-Icon--arrowDownLeft:before { @include ms-Icon--arrowDownLeft; } +.ms-Icon--arrowUpLeft:before { @include ms-Icon--arrowUpLeft; } +.ms-Icon--bundle:before { @include ms-Icon--bundle; } +.ms-Icon--pictureEdit:before { @include ms-Icon--pictureEdit; } +.ms-Icon--protectionCenter:before { @include ms-Icon--protectionCenter; } +.ms-Icon--alert2:before { @include ms-Icon--alert2; } + +//*-- end +// Modifier: Place the icon in a circle. +.ms-Icon--circle { + @include ms-Icon--circle; +} + +// Modifiers: Some icons require custom alignment when placed in circles. +.ms-Icon--circle { + &.ms-Icon--star:before { + top: -2%; + left: 1%; + } + &.ms-Icon--person:before { + top: -2%; + left: -3%; + } + &.ms-Icon--alert:before { + top: -4%; + } + &.ms-Icon--mailOpen:before { + top: -5%; + } + &.ms-Icon--people:before { + top: -4%; + left: -7%; + } + &.ms-Icon--bell:before { + top: -3%; + } + &.ms-Icon--scheduling:before { + top: -3%; + left: 6%; + } + &.ms-Icon--documents:before { + top: -1%; + left: -2%; + } + &.ms-Icon--listBullets:before { + top: -1%; + left: 5%; + } + &.ms-Icon--panel:before { + left: -2%; + } + &.ms-Icon--popout:before { + top: -2%; + left: -2%; + } + &.ms-Icon--home:before { + top: -4%; + } + &.ms-Icon--favorites:before { + top: -2%; + left: 2%; + } + &.ms-Icon--phone:before { + top: -2%; + left: -2%; + } + &.ms-Icon--mailSend:before { + left: -10%; + } + &.ms-Icon--pencil:before { + top: -2%; + left: 3%; + } + &.ms-Icon--flag:before { + left: 3%; + } + &.ms-Icon--miniatures:before { + left: -3%; + } + &.ms-Icon--voicemail:before { + top: 2%; + left: -7%; + } + &.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; + } + &.ms-Icon--pinDown:before { + top: 5%; + } + &.ms-Icon--gear:before { + left: 2%; + } + &.ms-Icon--check:before { + top: 3%; + } + &.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; + } + &.ms-Icon--directions:before { + left: 10%; + } + &.ms-Icon--microphone:before { + top: -3%; + } + &.ms-Icon--caretDown:before { + top: 5%; + left: 2%; + } + &.ms-Icon--caretLeft:before { + left: -6%; + } + &.ms-Icon--caretRight:before { + left: 6%; + } + &.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; + } + &.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; + } + &.ms-Icon--caretDownRight:before { + left: -3%; + } + &.ms-Icon--caretDownLeft:before { + left: 4%; + } + &.ms-Icon--note:before { + top: 2%; + left: -3%; + } + &.ms-Icon--noteReply:before { + top: 6%; + left: 3%; + } + &.ms-Icon--noteForward:before { + top: 6%; + } + &.ms-Icon--key:before { + top: 5%; + left: 1%; + } + &.ms-Icon--tile:before { + top: -1%; + left: -18%; + } + &.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; + } + &.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; + } + &.ms-Icon--documentReply:before { + top: -2%; + left: 7%; + } + &.ms-Icon--documentForward:before { + left: 5%; + } + &.ms-Icon--partner:before { + top: -2%; + } + &.ms-Icon--reactivate:before { + top: -2%; + left: 6%; + } + &.ms-Icon--sort:before { + left: -19%; + } + &.ms-Icon--personAdd:before { + top: -2%; + left: 6%; + } + &.ms-Icon--chevronDown:before { + top: 4%; + } + &.ms-Icon--chevronLeft:before { + left: -5%; + } + &.ms-Icon--chevronRight:before { + left: 4%; + } + &.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; + } + &.ms-Icon--newsfeed:before { + left: -4%; + } + &.ms-Icon--notebook:before { + left: -4%; + } + &.ms-Icon--link:before { + top: 2%; + left: -18%; + } + &.ms-Icon--chevronsDown:before { + top: 5%; + } + &.ms-Icon--chevronsLeft:before { + left: -5%; + } + &.ms-Icon--chevronsRight:before { + left: 4%; + } + &.ms-Icon--personRemove:before { + left: 5%; + } + &.ms-Icon--receiptForward:before { + left: -20%; + } + &.ms-Icon--receiptReply:before { + left: -20%; + } + &.ms-Icon--receiptCheck:before { + left: -20%; + } + &.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; + } + &.ms-Icon--merge:before { + top: 2%; + } + &.ms-Icon--split:before { + top: 2%; + } + &.ms-Icon--eventCancel:before { + left: -2%; + } + &.ms-Icon--today:before { + top: -2%; + } + &.ms-Icon--oofReply:before { + left: 5%; + } + &.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; + } + &.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; + } + &.ms-Icon--eye:before { + top: -4%; + } + &.ms-Icon--post:before { + top: -4%; + left: 4%; + } + &.ms-Icon--fax:before { + top: -3%; + left: -2%; + } + &.ms-Icon--lightning:before { + top: 2%; + left: 1%; + } + &.ms-Icon--filter:before { + top: 7%; + } + &.ms-Icon--cart:before { + left: 3%; + } + &.ms-Icon--socialListening:before { + top: 2%; + } + &.ms-Icon--mapMarker:before { + top: 2%; + } + &.ms-Icon--replyAllAlt:before { + left: -16%; + } + &.ms-Icon--group:before { + left: -33%; + } + &.ms-Icon--money:before { + left: -8%; + } + &.ms-Icon--noteEdit:before { + left: 4%; + } + &.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; + } + &.ms-Icon--pinLeft:before { + left: -6%; + } + &.ms-Icon--heart:before { + top: 5%; + } + &.ms-Icon--heartEmpty:before { + top: 5%; + } + &.ms-Icon--cake:before { + top: -5%; + } + &.ms-Icon--books:before { + left: -8%; + } + &.ms-Icon--video:before { + top: -3%; + left: 3%; + } + &.ms-Icon--balloon:before { + top: 4%; + left: -1%; + } + &.ms-Icon--music:before { + top: -2%; + left: -5%; + } + &.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; + } + &.ms-Icon--coffee:before { + top: -3%; + left: 3%; + } + &.ms-Icon--plane:before { + left: 4%; + } + &.ms-Icon--dogAlt:before { + left: -15%; + } + &.ms-Icon--metadata:before { + top: -4%; + left: 4%; + } + &.ms-Icon--text:before { + top: -4%; + left: 10%; + } + &.ms-Icon--fieldText:before { + left: -14%; + } + &.ms-Icon--fieldNumber:before { + left: -14%; + } + &.ms-Icon--dropdown:before { + left: -14%; + } + &.ms-Icon--story:before { + left: -5%; + } + &.ms-Icon--bold:before { + left: 4%; + } + &.ms-Icon--underline:before { + top: 4%; + } + &.ms-Icon--quote:before { + left: -4%; + } + &.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; + } + &.ms-Icon--pictureAdd:before { + left: -6%; + } + &.ms-Icon--pictureRemove:before { + left: -6%; + } + &.ms-Icon--mobile:before { + left: -3%; + } + &.ms-Icon--hide:before { + top: -4%; + } + &.ms-Icon--header:before { + left: -9%; + } + &.ms-Icon--msn:before { + left: 3%; + } + &.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; + } + &.ms-Icon--caretDownOutline:before { + top: 6%; + } + &.ms-Icon--caretLeftOutline:before { + left: -5%; + } + &.ms-Icon--caretRightOutline:before { + left: 5%; + } + &.ms-Icon--sway:before { + left: -3%; + } + &.ms-Icon--mailSync:before { + left: 8%; + top: 3%; + } + &.ms-Icon--peopleSync:before { + left: -8%; + } + &.ms-Icon--peopleError:before { + left: -8%; + } + &.ms-Icon--peoplePause:before { + left: -8%; + } + &.ms-Icon--documentSearch:before { + left: 8%; + } + &.ms-Icon--dynamicsMarketing:before { + left: -8%; + } +} diff --git a/dist/sass/Fabric.Icons.RTL.Output.scss b/dist/sass/Fabric.Icons.RTL.Output.scss new file mode 100644 index 000000000..d7dfcaf13 --- /dev/null +++ b/dist/sass/Fabric.Icons.RTL.Output.scss @@ -0,0 +1,114 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RTL overrides for Fabricicons + + +@import 'Fabric.Icons.Output'; + +// Flip icons with 'directionality' +.ms-Icon--question, +.ms-Icon--calendar, +.ms-Icon--folder, +.ms-Icon--chat, +.ms-Icon--listBullets, +.ms-Icon--folderMove, +.ms-Icon--mailSend, +.ms-Icon--reply, +.ms-Icon--play, +.ms-Icon--replyAll, +.ms-Icon--refresh, +.ms-Icon--questionReverse, +.ms-Icon--notRecurring, +.ms-Icon--tasks, +.ms-Icon--check, +.ms-Icon--arrowLeft, +.ms-Icon--arrowRight, +.ms-Icon--directions, +.ms-Icon--caretLeft, +.ms-Icon--caretRight, +.ms-Icon--caretUpLeft, +.ms-Icon--caretUpRight, +.ms-Icon--caretDownRight, +.ms-Icon--caretDownLeft, +.ms-Icon--note, +.ms-Icon--noteReply, +.ms-Icon--noteForward, +.ms-Icon--taskRecurring, +.ms-Icon--documentReply, +.ms-Icon--documentForward, +.ms-Icon--reactivate, +.ms-Icon--chevronLeft, +.ms-Icon--chevronRight, +.ms-Icon--notebook, +.ms-Icon--chevronsLeft, +.ms-Icon--chevronsRight, +.ms-Icon--receiptForward, +.ms-Icon--receiptReply, +.ms-Icon--receiptCheck, +.ms-Icon--eventShare, +.ms-Icon--oofReply, +.ms-Icon--voicemailReply, +.ms-Icon--voicemailForward, +.ms-Icon--post, +.ms-Icon--toggle, +.ms-Icon--late, +.ms-Icon--eventRecurring, +.ms-Icon--cart, +.ms-Icon--socialListening, +.ms-Icon--replyAlt, +.ms-Icon--replyAllAlt, +.ms-Icon--graph, +.ms-Icon--pinLeft, +.ms-Icon--chart, +.ms-Icon--page, +.ms-Icon--document, +.ms-Icon--metadata, +.ms-Icon--pointItem, +.ms-Icon--dropdown, +.ms-Icon--checkbox, +.ms-Icon--reload, +.ms-Icon--multiChoice, +.ms-Icon--contactForm, +.ms-Icon--inboxCheck, +.ms-Icon--checkboxCheck, +.ms-Icon--folderSearch, +.ms-Icon--listCheck, +.ms-Icon--listGroup, +.ms-Icon--timeline +.ms-Icon--mailCheck, +.ms-Icon--listCheckbox, +.ms-Icon--sunQuestion, +.ms-Icon--chevronThinLeft, +.ms-Icon--chevronThinRight, +.ms-Icon--chevronThickLeft, +.ms-Icon--chevronThickRight, +.ms-Icon--documentLandscape, +.ms-Icon--peopleCheck, +.ms-Icon--caretLeftOutline, +.ms-Icon--caretRightOutline, +.ms-Icon--mailSync, +.ms-Icon--peopleSync, +.ms-Icon--checkPeople, +.ms-Icon--sortLines, +.ms-Icon--triangleRight:before, +.ms-Icon--triangleLeft:before, +.ms-Icon--contactPublic:before, +.ms-Icon--triangleEmptyRight:before, +.ms-Icon--triangleEmptyLeft:before, +.ms-Icon--fileDocument:before, +.ms-Icon--listGroup2:before, +.ms-Icon--copy:before, +.ms-Icon--sections:before, +.ms-Icon--arrowUpRight:before, +.ms-Icon--arrowDownRight:before, +.ms-Icon--arrowDownLeft:before, +.ms-Icon--arrowUpLeft:before, +.ms-Icon--bundle:before { + -moz-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + -o-transform: scaleX(-1); + transform: scaleX(-1); +} \ No newline at end of file diff --git a/dist/sass/Fabric.RTL.scss b/dist/sass/Fabric.RTL.scss new file mode 100644 index 000000000..b3e6562fa --- /dev/null +++ b/dist/sass/Fabric.RTL.scss @@ -0,0 +1,39 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// OSS Framework Design Language +// -------------------------------------------------- +// Fabric Core Module Loader (RTL) + +// Common utilities +@import './Fabric.Utilities.Output'; +@import './Fabric.ZIndex.Variables'; +@import './Fabric.Mixins'; +@import './Fabric.Mixins.RTL'; + +// Colors +@import './Fabric.Color.Variables'; +@import './Fabric.Color.Mixins.Output'; + +// Typography +@import './Fabric.Typography.Variables'; +@import './Fabric.Typography.Fonts.Output'; +@import './Fabric.Typography.Output'; +@import './Fabric.Typography.Language.Overrides.Output'; + +// Icons +@import './Fabric.Icons.Font.Output'; +@import './Fabric.Icons.RTL.Output'; + +// Animations +@import './Fabric.Animations.RTL.Output'; + +// Responsive +@import './Fabric.Responsive.Variables'; +@import './Fabric.Responsive.Utilities.Output'; + +// Grid +@import './Fabric.Grid.Output'; + +// Office colors +@import './Office.Color.Variables'; \ No newline at end of file diff --git a/dist/sass/Fabric.Responsive.Utilities.Output.scss b/dist/sass/Fabric.Responsive.Utilities.Output.scss new file mode 100644 index 000000000..caa7c267b --- /dev/null +++ b/dist/sass/Fabric.Responsive.Utilities.Output.scss @@ -0,0 +1,1022 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Responsive utilities based on defined variables, component visibility, +// and size for different displays. +@import "./Fabric.Responsive.Variables"; +@import "./Fabric.Responsive.Utilities.Variables"; + +//== Responsive visiblity classes +// + +// Hidden on small +@media (max-width: $ms-screen-sm-max) { + .ms-u-hiddenSm, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on medium +@media (min-width: $ms-screen-md-min) and (max-width: $ms-screen-md-max) { + .ms-u-hiddenMd, + .ms-u-hiddenMdUp, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on large +@media (min-width: $ms-screen-lg-min) and (max-width: $ms-screen-lg-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLg, + .ms-u-hiddenLgUp, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra large +@media (min-width: $ms-screen-xl-min) and (max-width: $ms-screen-xl-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXl, + .ms-u-hiddenXlUp, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra extra large +@media (min-width: $ms-screen-xxl-min) and (max-width: $ms-screen-xxl-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxl, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra extra extra large +@media (min-width: $ms-screen-xxxl-min) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxxl { + display: none !important; + } +} + + +//== Responsive sizes +// +// These are all based on a 12 column grid. For example, +// ms-u-sm6 sets the width to 50% (6/12) on small screens. + +// Small screens (default) +.ms-u-sm12 { + @include ms-u-sm12; +} +.ms-u-sm11 { + @include ms-u-sm11; +} +.ms-u-sm10 { + @include ms-u-sm10; +} +.ms-u-sm9 { + @include ms-u-sm9; +} +.ms-u-sm8 { + @include ms-u-sm8; +} +.ms-u-sm7 { + @include ms-u-sm7; +} +.ms-u-sm6 { + @include ms-u-sm6; +} +.ms-u-sm5 { + @include ms-u-sm5; +} +.ms-u-sm4 { + @include ms-u-sm4; +} +.ms-u-sm3 { + @include ms-u-sm3; +} +.ms-u-sm2 { + @include ms-u-sm2; +} +.ms-u-sm1 { + @include ms-u-sm1; +} +.ms-u-smPull12 { + @include ms-u-smPull12; +} +.ms-u-smPull11 { + @include ms-u-smPull11; +} +.ms-u-smPull10 { + @include ms-u-smPull10; +} +.ms-u-smPull9 { + @include ms-u-smPull9; +} +.ms-u-smPull8 { + @include ms-u-smPull8; +} +.ms-u-smPull7 { + @include ms-u-smPull7; +} +.ms-u-smPull6 { + @include ms-u-smPull6; +} +.ms-u-smPull5 { + @include ms-u-smPull5; +} +.ms-u-smPull4 { + @include ms-u-smPull4; +} +.ms-u-smPull3 { + @include ms-u-smPull3; +} +.ms-u-smPull2 { + @include ms-u-smPull2; +} +.ms-u-smPull1 { + @include ms-u-smPull1; +} +.ms-u-smPull0 { + @include ms-u-smPull0; +} +.ms-u-smPush12 { + @include ms-u-smPush12; +} +.ms-u-smPush11 { + @include ms-u-smPush11; +} +.ms-u-smPush10 { + @include ms-u-smPush10; +} +.ms-u-smPush9 { + @include ms-u-smPush9; +} +.ms-u-smPush8 { + @include ms-u-smPush8; +} +.ms-u-smPush7 { + @include ms-u-smPush7; +} +.ms-u-smPush6 { + @include ms-u-smPush6; +} +.ms-u-smPush5 { + @include ms-u-smPush5; +} +.ms-u-smPush4 { + @include ms-u-smPush4; +} +.ms-u-smPush3 { + @include ms-u-smPush3; +} +.ms-u-smPush2 { + @include ms-u-smPush2; +} +.ms-u-smPush1 { + @include ms-u-smPush1; +} +.ms-u-smPush0 { + @include ms-u-smPush0; +} + +// Small Offset classes 0 ... 11 +.ms-u-smOffset11 { + margin-left: 91.66666666666666%; +} +.ms-u-smOffset10 { + margin-left: 83.33333333333334%; +} +.ms-u-smOffset9 { + margin-left: 75%; +} +.ms-u-smOffset8 { + margin-left: 66.66666666666666%; +} +.ms-u-smOffset7 { + margin-left: 58.333333333333336%; +} +.ms-u-smOffset6 { + margin-left: 50%; +} +.ms-u-smOffset5 { + margin-left: 41.66666666666667%; +} +.ms-u-smOffset4 { + margin-left: 33.33333333333333%; +} +.ms-u-smOffset3 { + margin-left: 25%; +} +.ms-u-smOffset2 { + margin-left: 16.666666666666664%; +} +.ms-u-smOffset1 { + margin-left: 8.333333333333332%; +} +.ms-u-smOffset0 { + margin-left: 0; +} + +// Medium screens +@media (min-width: $ms-screen-md-min) { + .ms-u-md12 { + @include ms-u-md12; + } + .ms-u-md11 { + @include ms-u-md11; + } + .ms-u-md10 { + @include ms-u-md10; + } + .ms-u-md9 { + @include ms-u-md9; + } + .ms-u-md8 { + @include ms-u-md8; + } + .ms-u-md7 { + @include ms-u-md7; + } + .ms-u-md6 { + @include ms-u-md6; + } + .ms-u-md5 { + @include ms-u-md5; + } + .ms-u-md4 { + @include ms-u-md4; + } + .ms-u-md3 { + @include ms-u-md3; + } + .ms-u-md2 { + @include ms-u-md2; + } + .ms-u-md1 { + @include ms-u-md1; + } + .ms-u-mdPull12 { + @include ms-u-mdPull12; + } + .ms-u-mdPull11 { + @include ms-u-mdPull11; + } + .ms-u-mdPull10 { + @include ms-u-mdPull10; + } + .ms-u-mdPull9 { + @include ms-u-mdPull9; + } + .ms-u-mdPull8 { + @include ms-u-mdPull8; + } + .ms-u-mdPull7 { + @include ms-u-mdPull7; + } + .ms-u-mdPull6 { + @include ms-u-mdPull6; + } + .ms-u-mdPull5 { + @include ms-u-mdPull5; + } + .ms-u-mdPull4 { + @include ms-u-mdPull4; + } + .ms-u-mdPull3 { + @include ms-u-mdPull3; + } + .ms-u-mdPull2 { + @include ms-u-mdPull2; + } + .ms-u-mdPull1 { + @include ms-u-mdPull1; + } + .ms-u-mdPull0 { + @include ms-u-mdPull0; + } + .ms-u-mdPush12 { + @include ms-u-mdPush12; + } + .ms-u-mdPush11 { + @include ms-u-mdPush11; + } + .ms-u-mdPush10 { + @include ms-u-mdPush10; + } + .ms-u-mdPush9 { + @include ms-u-mdPush9; + } + .ms-u-mdPush8 { + @include ms-u-mdPush8; + } + .ms-u-mdPush7 { + @include ms-u-mdPush7; + } + .ms-u-mdPush6 { + @include ms-u-mdPush6; + } + .ms-u-mdPush5 { + @include ms-u-mdPush5; + } + .ms-u-mdPush4 { + @include ms-u-mdPush4; + } + .ms-u-mdPush3 { + @include ms-u-mdPush3; + } + .ms-u-mdPush2 { + @include ms-u-mdPush2; + } + .ms-u-mdPush1 { + @include ms-u-mdPush1; + } + .ms-u-mdPush0 { + @include ms-u-mdPush0; + } + + // Medium Offset classes 0 ... 11 + .ms-u-mdOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-mdOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-mdOffset9 { + margin-left: 75%; + } + .ms-u-mdOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-mdOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-mdOffset6 { + margin-left: 50%; + } + .ms-u-mdOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-mdOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-mdOffset3 { + margin-left: 25%; + } + .ms-u-mdOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-mdOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-mdOffset0 { + margin-left: 0; + } +} + +// Large screens +@media (min-width: $ms-screen-lg-min) { + .ms-u-lg12 { + @include ms-u-lg12; + } + .ms-u-lg11 { + @include ms-u-lg11; + } + .ms-u-lg10 { + @include ms-u-lg10; + } + .ms-u-lg9 { + @include ms-u-lg9; + } + .ms-u-lg8 { + @include ms-u-lg8; + } + .ms-u-lg7 { + @include ms-u-lg7; + } + .ms-u-lg6 { + @include ms-u-lg6; + } + .ms-u-lg5 { + @include ms-u-lg5; + } + .ms-u-lg4 { + @include ms-u-lg4; + } + .ms-u-lg3 { + @include ms-u-lg3; + } + .ms-u-lg2 { + @include ms-u-lg2; + } + .ms-u-lg1 { + @include ms-u-lg1; + } + .ms-u-lgPull12 { + @include ms-u-lgPull12; + } + .ms-u-lgPull11 { + @include ms-u-lgPull11; + } + .ms-u-lgPull10 { + @include ms-u-lgPull10; + } + .ms-u-lgPull9 { + @include ms-u-lgPull9; + } + .ms-u-lgPull8 { + @include ms-u-lgPull8; + } + .ms-u-lgPull7 { + @include ms-u-lgPull7; + } + .ms-u-lgPull6 { + @include ms-u-lgPull6; + } + .ms-u-lgPull5 { + @include ms-u-lgPull5; + } + .ms-u-lgPull4 { + @include ms-u-lgPull4; + } + .ms-u-lgPull3 { + @include ms-u-lgPull3; + } + .ms-u-lgPull2 { + @include ms-u-lgPull2; + } + .ms-u-lgPull1 { + @include ms-u-lgPull1; + } + .ms-u-lgPull0 { + @include ms-u-lgPull0; + } + .ms-u-lgPush12 { + @include ms-u-lgPush12; + } + .ms-u-lgPush11 { + @include ms-u-lgPush11; + } + .ms-u-lgPush10 { + @include ms-u-lgPush10; + } + .ms-u-lgPush9 { + @include ms-u-lgPush9; + } + .ms-u-lgPush8 { + @include ms-u-lgPush8; + } + .ms-u-lgPush7 { + @include ms-u-lgPush7; + } + .ms-u-lgPush6 { + @include ms-u-lgPush6; + } + .ms-u-lgPush5 { + @include ms-u-lgPush5; + } + .ms-u-lgPush4 { + @include ms-u-lgPush4; + } + .ms-u-lgPush3 { + @include ms-u-lgPush3; + } + .ms-u-lgPush2 { + @include ms-u-lgPush2; + } + .ms-u-lgPush1 { + @include ms-u-lgPush1; + } + .ms-u-lgPush0 { + @include ms-u-lgPush0; + } + + // Large Offset classes 0 ... 11 + .ms-u-lgOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-lgOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-lgOffset9 { + margin-left: 75%; + } + .ms-u-lgOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-lgOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-lgOffset6 { + margin-left: 50%; + } + .ms-u-lgOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-lgOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-lgOffset3 { + margin-left: 25%; + } + .ms-u-lgOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-lgOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-lgOffset0 { + margin-left: 0; + } +} + +// Extra large screens +@media (min-width: $ms-screen-xl-min) { + .ms-u-xl12 { + @include ms-u-xl12; + } + .ms-u-xl11 { + @include ms-u-xl11; + } + .ms-u-xl10 { + @include ms-u-xl10; + } + .ms-u-xl9 { + @include ms-u-xl9; + } + .ms-u-xl8 { + @include ms-u-xl8; + } + .ms-u-xl7 { + @include ms-u-xl7; + } + .ms-u-xl6 { + @include ms-u-xl6; + } + .ms-u-xl5 { + @include ms-u-xl5; + } + .ms-u-xl4 { + @include ms-u-xl4; + } + .ms-u-xl3 { + @include ms-u-xl3; + } + .ms-u-xl2 { + @include ms-u-xl2; + } + .ms-u-xl1 { + @include ms-u-xl1; + } + .ms-u-xlPull12 { + @include ms-u-xlPull12; + } + .ms-u-xlPull11 { + @include ms-u-xlPull11; + } + .ms-u-xlPull10 { + @include ms-u-xlPull10; + } + .ms-u-xlPull9 { + @include ms-u-xlPull9; + } + .ms-u-xlPull8 { + @include ms-u-xlPull8; + } + .ms-u-xlPull7 { + @include ms-u-xlPull7; + } + .ms-u-xlPull6 { + @include ms-u-xlPull6; + } + .ms-u-xlPull5 { + @include ms-u-xlPull5; + } + .ms-u-xlPull4 { + @include ms-u-xlPull4; + } + .ms-u-xlPull3 { + @include ms-u-xlPull3; + } + .ms-u-xlPull2 { + @include ms-u-xlPull2; + } + .ms-u-xlPull1 { + @include ms-u-xlPull1; + } + .ms-u-xlPull0 { + @include ms-u-xlPull0; + } + .ms-u-xlPush12 { + @include ms-u-xlPush12; + } + .ms-u-xlPush11 { + @include ms-u-xlPush11; + } + .ms-u-xlPush10 { + @include ms-u-xlPush10; + } + .ms-u-xlPush9 { + @include ms-u-xlPush9; + } + .ms-u-xlPush8 { + @include ms-u-xlPush8; + } + .ms-u-xlPush7 { + @include ms-u-xlPush7; + } + .ms-u-xlPush6 { + @include ms-u-xlPush6; + } + .ms-u-xlPush5 { + @include ms-u-xlPush5; + } + .ms-u-xlPush4 { + @include ms-u-xlPush4; + } + .ms-u-xlPush3 { + @include ms-u-xlPush3; + } + .ms-u-xlPush2 { + @include ms-u-xlPush2; + } + .ms-u-xlPush1 { + @include ms-u-xlPush1; + } + .ms-u-xlPush0 { + @include ms-u-xlPush0; + } + + // Large Offset classes 0 ... 11 + .ms-u-xlOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-xlOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-xlOffset9 { + margin-left: 75%; + } + .ms-u-xlOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-xlOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-xlOffset6 { + margin-left: 50%; + } + .ms-u-xlOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-xlOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-xlOffset3 { + margin-left: 25%; + } + .ms-u-xlOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-xlOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-xlOffset0 { + margin-left: 0; + } +} + +// Extra extra large screens +@media (min-width: $ms-screen-xxl-min) { + .ms-u-xxl12 { + @include ms-u-xxl12; + } + .ms-u-xxl11 { + @include ms-u-xxl11; + } + .ms-u-xxl10 { + @include ms-u-xxl10; + } + .ms-u-xxl9 { + @include ms-u-xxl9; + } + .ms-u-xxl8 { + @include ms-u-xxl8; + } + .ms-u-xxl7 { + @include ms-u-xxl7; + } + .ms-u-xxl6 { + @include ms-u-xxl6; + } + .ms-u-xxl5 { + @include ms-u-xxl5; + } + .ms-u-xxl4 { + @include ms-u-xxl4; + } + .ms-u-xxl3 { + @include ms-u-xxl3; + } + .ms-u-xxl2 { + @include ms-u-xxl2; + } + .ms-u-xxl1 { + @include ms-u-xxl1; + } + .ms-u-xxlPull12 { + @include ms-u-xxlPull12; + } + .ms-u-xxlPull11 { + @include ms-u-xxlPull11; + } + .ms-u-xxlPull10 { + @include ms-u-xxlPull10; + } + .ms-u-xxlPull9 { + @include ms-u-xxlPull9; + } + .ms-u-xxlPull8 { + @include ms-u-xxlPull8; + } + .ms-u-xxlPull7 { + @include ms-u-xxlPull7; + } + .ms-u-xxlPull6 { + @include ms-u-xxlPull6; + } + .ms-u-xxlPull5 { + @include ms-u-xxlPull5; + } + .ms-u-xxlPull4 { + @include ms-u-xxlPull4; + } + .ms-u-xxlPull3 { + @include ms-u-xxlPull3; + } + .ms-u-xxlPull2 { + @include ms-u-xxlPull2; + } + .ms-u-xxlPull1 { + @include ms-u-xxlPull1; + } + .ms-u-xxlPull0 { + @include ms-u-xxlPull0; + } + .ms-u-xxlPush12 { + @include ms-u-xxlPush12; + } + .ms-u-xxlPush11 { + @include ms-u-xxlPush11; + } + .ms-u-xxlPush10 { + @include ms-u-xxlPush10; + } + .ms-u-xxlPush9 { + @include ms-u-xxlPush9; + } + .ms-u-xxlPush8 { + @include ms-u-xxlPush8; + } + .ms-u-xxlPush7 { + @include ms-u-xxlPush7; + } + .ms-u-xxlPush6 { + @include ms-u-xxlPush6; + } + .ms-u-xxlPush5 { + @include ms-u-xxlPush5; + } + .ms-u-xxlPush4 { + @include ms-u-xxlPush4; + } + .ms-u-xxlPush3 { + @include ms-u-xxlPush3; + } + .ms-u-xxlPush2 { + @include ms-u-xxlPush2; + } + .ms-u-xxlPush1 { + @include ms-u-xxlPush1; + } + .ms-u-xxlPush0 { + @include ms-u-xxlPush0; + } + + // Extra extra large Offset classes 0 ... 11 + .ms-u-xxlOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-xxlOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-xxlOffset9 { + margin-left: 75%; + } + .ms-u-xxlOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-xxlOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-xxlOffset6 { + margin-left: 50%; + } + .ms-u-xxlOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-xxlOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-xxlOffset3 { + margin-left: 25%; + } + .ms-u-xxlOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-xxlOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-xxlOffset0 { + margin-left: 0; + } +} + +// Extra extra extra large screens +@media (min-width: $ms-screen-xxxl-min) { + .ms-u-xxxl12 { + @include ms-u-xxxl12; + } + .ms-u-xxxl11 { + @include ms-u-xxxl11; + } + .ms-u-xxxl10 { + @include ms-u-xxxl10; + } + .ms-u-xxxl9 { + @include ms-u-xxxl9; + } + .ms-u-xxxl8 { + @include ms-u-xxxl8; + } + .ms-u-xxxl7 { + @include ms-u-xxxl7; + } + .ms-u-xxxl6 { + @include ms-u-xxxl6; + } + .ms-u-xxxl5 { + @include ms-u-xxxl5; + } + .ms-u-xxxl4 { + @include ms-u-xxxl4; + } + .ms-u-xxxl3 { + @include ms-u-xxxl3; + } + .ms-u-xxxl2 { + @include ms-u-xxxl2; + } + .ms-u-xxxl1 { + @include ms-u-xxxl1; + } + .ms-u-xxxlPull12 { + @include ms-u-xxxlPull12; + } + .ms-u-xxxlPull11 { + @include ms-u-xxxlPull11; + } + .ms-u-xxxlPull10 { + @include ms-u-xxxlPull10; + } + .ms-u-xxxlPull9 { + @include ms-u-xxxlPull9; + } + .ms-u-xxxlPull8 { + @include ms-u-xxxlPull8; + } + .ms-u-xxxlPull7 { + @include ms-u-xxxlPull7; + } + .ms-u-xxxlPull6 { + @include ms-u-xxxlPull6; + } + .ms-u-xxxlPull5 { + @include ms-u-xxxlPull5; + } + .ms-u-xxxlPull4 { + @include ms-u-xxxlPull4; + } + .ms-u-xxxlPull3 { + @include ms-u-xxxlPull3; + } + .ms-u-xxxlPull2 { + @include ms-u-xxxlPull2; + } + .ms-u-xxxlPull1 { + @include ms-u-xxxlPull1; + } + .ms-u-xxxlPull0 { + @include ms-u-xxxlPull0; + } + .ms-u-xxxlPush12 { + @include ms-u-xxxlPush12; + } + .ms-u-xxxlPush11 { + @include ms-u-xxxlPush11; + } + .ms-u-xxxlPush10 { + @include ms-u-xxxlPush10; + } + .ms-u-xxxlPush9 { + @include ms-u-xxxlPush9; + } + .ms-u-xxxlPush8 { + @include ms-u-xxxlPush8; + } + .ms-u-xxxlPush7 { + @include ms-u-xxxlPush7; + } + .ms-u-xxxlPush6 { + @include ms-u-xxxlPush6; + } + .ms-u-xxxlPush5 { + @include ms-u-xxxlPush5; + } + .ms-u-xxxlPush4 { + @include ms-u-xxxlPush4; + } + .ms-u-xxxlPush3 { + @include ms-u-xxxlPush3; + } + .ms-u-xxxlPush2 { + @include ms-u-xxxlPush2; + } + .ms-u-xxxlPush1 { + @include ms-u-xxxlPush1; + } + .ms-u-xxxlPush0 { + @include ms-u-xxxlPush0; + } + + // Extra extra extra large Offset classes 0 ... 11 + .ms-u-xxxlOffset11 { + margin-left: 91.66666666666666%; + } + .ms-u-xxxlOffset10 { + margin-left: 83.33333333333334%; + } + .ms-u-xxxlOffset9 { + margin-left: 75%; + } + .ms-u-xxxlOffset8 { + margin-left: 66.66666666666666%; + } + .ms-u-xxxlOffset7 { + margin-left: 58.333333333333336%; + } + .ms-u-xxxlOffset6 { + margin-left: 50%; + } + .ms-u-xxxlOffset5 { + margin-left: 41.66666666666667%; + } + .ms-u-xxxlOffset4 { + margin-left: 33.33333333333333%; + } + .ms-u-xxxlOffset3 { + margin-left: 25%; + } + .ms-u-xxxlOffset2 { + margin-left: 16.666666666666664%; + } + .ms-u-xxxlOffset1 { + margin-left: 8.333333333333332%; + } + .ms-u-xxxlOffset0 { + margin-left: 0; + } +} diff --git a/dist/sass/Fabric.Typography.Fonts.Output.scss b/dist/sass/Fabric.Typography.Fonts.Output.scss new file mode 100644 index 000000000..63edecd6a --- /dev/null +++ b/dist/sass/Fabric.Typography.Fonts.Output.scss @@ -0,0 +1,76 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Font definitions + +@import "Fabric.Typography.Fonts"; + +// Additional @font-face rules for the Leelawadee font. +@font-face { + font-family: "Leelawadee UI Bold"; + src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Leelawadee UI"; + src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Leelawadee UI Semilight"; + src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'), + url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + + +// Mixins to generate language-specific font faces. +@include SegoeUIArabicLight; +@include SegoeUIArabicRegular; +@include SegoeUIArabicSemibold; +@include SegoeUIArabicSemilight; + +@include SegoeUICyrillicLight; +@include SegoeUICyrillicRegular; +@include SegoeUICyrillicSemibold; +@include SegoeUICyrillicSemilight; + +@include SegoeUIEastEuropeanLight; +@include SegoeUIEastEuropeanRegular; +@include SegoeUIEastEuropeanSemibold; +@include SegoeUIEastEuropeanSemilight; + +@include SegoeUIGreekLight; +@include SegoeUIGreekRegular; +@include SegoeUIGreekSemibold; +@include SegoeUIGreekSemilight; + +@include SegoeUIHebrewLight; +@include SegoeUIHebrewRegular; +@include SegoeUIHebrewSemibold; +@include SegoeUIHebrewSemilight; + +@include SegoeUIVietnameseLight; +@include SegoeUIVietnameseRegular; +@include SegoeUIVietnameseSemibold; +@include SegoeUIVietnameseSemilight; + +@include SegoeUIWestEuropeanLight; +@include SegoeUIWestEuropeanRegular; +@include SegoeUIWestEuropeanSemibold; +@include SegoeUIWestEuropeanSemilight; \ No newline at end of file diff --git a/dist/sass/Fabric.Typography.Language.Overrides.Output.scss b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss new file mode 100644 index 000000000..66f464b58 --- /dev/null +++ b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss @@ -0,0 +1,56 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Language override definitions + +@import "./Fabric.Typography.Language.Overrides"; + +// Generate the override classes for non-distributed fonts. +@include language-override-system-fonts(ja-JP, $ms-font-stack-japanese); +@include language-override-system-fonts(ko-KR, $ms-font-stack-korean); +@include language-override-system-fonts(ch-ZHS, $ms-font-stack-chinese-simplified); +@include language-override-system-fonts(ch-ZHT, $ms-font-stack-chinese-traditional); +@include language-override-system-fonts(hi-IN, $ms-font-stack-hindi); + +// Generate the override classes for web fonts. +// Leelawadee +// th-TH +@include language-override-web-fonts(th-TH, $ms-font-family-semilight-leelawadee, $ms-font-family-semilight-leelawadee, $ms-font-family-regular-leelawadee, $ms-font-family-semibold-leelawadee); + +// Arabic +// ar +@include language-override-web-fonts(ar, $ms-font-family-light-arabic, $ms-font-family-semilight-arabic, $ms-font-family-regular-arabic, $ms-font-family-semibold-arabic); + +// Cyrillic +// bg-BG, ru-RU, uk-UA +@include language-override-web-fonts(bg-BG, $ms-font-family-light-cyrillic, $ms-font-family-semilight-cyrillic, $ms-font-family-regular-cyrillic, $ms-font-family-semibold-cyrillic); +@include language-override-web-fonts(ru-RU, $ms-font-family-light-cyrillic, $ms-font-family-semilight-cyrillic, $ms-font-family-regular-cyrillic, $ms-font-family-semibold-cyrillic); +@include language-override-web-fonts(uk-UA, $ms-font-family-light-cyrillic, $ms-font-family-semilight-cyrillic, $ms-font-family-regular-cyrillic, $ms-font-family-semibold-cyrillic); + +// East European +// cs-CZ, et-EE, hr-HR, hu-HU, lt-LT, pl-PL, lt-sr-SP, tr-TR, sk-SK, kk-KZ +@include language-override-web-fonts(cs-CZ, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(et-EE, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(hr-HR, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(hu-HU, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(lt-LT, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(lv-LV, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(pl-PL, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(lt-sr-SP, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(tr-TR, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(sk-SK, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); +@include language-override-web-fonts(kk-KZ, $ms-font-family-light-eastEuropean, $ms-font-family-semilight-eastEuropean, $ms-font-family-regular-eastEuropean, $ms-font-family-semibold-eastEuropean); + +// Greek +// el-GR +@include language-override-web-fonts(el-GR, $ms-font-family-light-greek, $ms-font-family-semilight-greek, $ms-font-family-regular-greek, $ms-font-family-semibold-greek); + +// Hebrew +// he-IL +@include language-override-web-fonts(he-IL, $ms-font-family-light-hebrew, $ms-font-family-semilight-hebrew, $ms-font-family-regular-hebrew, $ms-font-family-semibold-hebrew); + +// Vietnamese +// vi-VN +@include language-override-web-fonts(vi-VN, $ms-font-family-light-vietnamese, $ms-font-family-semilight-vietnamese, $ms-font-family-regular-vietnamese, $ms-font-family-semibold-vietnamese); \ No newline at end of file diff --git a/dist/sass/Fabric.Typography.Output.scss b/dist/sass/Fabric.Typography.Output.scss new file mode 100644 index 000000000..8ae0fa58f --- /dev/null +++ b/dist/sass/Fabric.Typography.Output.scss @@ -0,0 +1,374 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Typographic mixins arranged with appropriate size and family combinations. +@import './Fabric.Typography'; + +// Super Styles (LIMITED USE) +// Weights: Light +.ms-font-su { + @include ms-font-su; +} +// No touch class for Super + +// Extra-Extra-Large +// Allowed weights: Light, SemiLight +.ms-font-xxl { + @include ms-font-xxl; +} + +// Extra-Large Styles +// Allowed weights: Light, SemiLight +.ms-font-xl { + @include ms-font-xl; +} + +// Large Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-l { + @include ms-font-l; +} + +// Medium Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-m-plus { + @include ms-font-m-plus; +} + +// Medium Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-m { + @include ms-font-m; +} + +// Small Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-s-plus { + @include ms-font-s-plus; +} + +// Small Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-s { + @include ms-font-s; +} + +// XS Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-xs { + @include ms-font-xs; +} + +// Micro Styles (LIMITED USE) +// Weights: Semibold +.ms-font-mi { + @include ms-font-mi; +} + +//== Helper classes & mixins +// +// Helper mixins to override default type values + +// Font weights +.ms-fontWeight-light, +.ms-fontWeight-light--hover:hover { + @include ms-fontWeight-light; +} + +.ms-fontWeight-semilight, +.ms-fontWeight-semilight--hover:hover { + @include ms-fontWeight-semilight; +} + +.ms-fontWeight-regular, +.ms-fontWeight-regular--hover:hover { + @include ms-fontWeight-regular; +} + +.ms-fontWeight-semibold, +.ms-fontWeight-semibold--hover:hover { + @include ms-fontWeight-semibold; +} + +// Font sizes +.ms-fontSize-su { + @include ms-fontSize-su; +} + +.ms-fontSize-xxl { + @include ms-fontSize-xxl; +} + +.ms-fontSize-xl { + @include ms-fontSize-xl; +} + +.ms-fontSize-l { + @include ms-fontSize-l; +} + +.ms-fontSize-mPlus { + @include ms-fontSize-mPlus; +} + +.ms-fontSize-m { + @include ms-fontSize-m; +} + +.ms-fontSize-sPlus { + @include ms-fontSize-sPlus; +} + +.ms-fontSize-s { + @include ms-fontSize-s; +} + +.ms-fontSize-xs { + @include ms-fontSize-xs; +} + +.ms-fontSize-mi { + @include ms-fontSize-mi; +} + +// Theme colors +.ms-fontColor-themeDarker, +.ms-fontColor-themeDarker--hover:hover { + @include ms-fontColor-themeDarker; +} + +.ms-fontColor-themeDark, +.ms-fontColor-themeDark--hover:hover { + @include ms-fontColor-themeDark; +} + +.ms-fontColor-themeDarkAlt, +.ms-fontColor-themeDarkAlt--hover:hover { + @include ms-fontColor-themeDarkAlt; +} + +.ms-fontColor-themePrimary, +.ms-fontColor-themePrimary--hover:hover { + @include ms-fontColor-themePrimary; +} + +.ms-fontColor-themeSecondary, +.ms-fontColor-themeSecondary--hover:hover { + @include ms-fontColor-themeSecondary; +} + +.ms-fontColor-themeTertiary, +.ms-fontColor-themeTertiary--hover:hover { + @include ms-fontColor-themeTertiary; +} + +.ms-fontColor-themeLight, +.ms-fontColor-themeLight--hover:hover { + @include ms-fontColor-themeLight; +} + +.ms-fontColor-themeLighter, +.ms-fontColor-themeLighter--hover:hover { + @include ms-fontColor-themeLighter; +} + +.ms-fontColor-themeLighterAlt, +.ms-fontColor-themeLighterAlt--hover:hover { + @include ms-fontColor-themeLighterAlt; +} + + +// Neutral colors +.ms-fontColor-black, +.ms-fontColor-black--hover:hover { + @include ms-fontColor-black; +} + +.ms-fontColor-neutralDark, +.ms-fontColor-neutralDark--hover:hover { + @include ms-fontColor-neutralDark; +} + +.ms-fontColor-neutralPrimary, +.ms-fontColor-neutralPrimary--hover:hover { + @include ms-fontColor-neutralPrimary; +} + +.ms-fontColor-neutralSecondary, +.ms-fontColor-neutralSecondary--hover:hover { + @include ms-fontColor-neutralSecondary; +} + +.ms-fontColor-neutralSecondaryAlt, +.ms-fontColor-neutralSecondaryAlt--hover:hover { + @include ms-fontColor-neutralSecondaryAlt; +} + +.ms-fontColor-neutralTertiary, +.ms-fontColor-neutralTertiary--hover:hover { + @include ms-fontColor-neutralTertiary; +} + +.ms-fontColor-neutralTertiaryAlt, +.ms-fontColor-neutralTertiaryAlt--hover:hover { + @include ms-fontColor-neutralTertiaryAlt; +} + +.ms-fontColor-neutralLight, +.ms-fontColor-neutralLight--hover:hover { + @include ms-fontColor-neutralLight; +} + +.ms-fontColor-neutralLighter, +.ms-fontColor-neutralLighter--hover:hover { + @include ms-fontColor-neutralLighter; +} + +.ms-fontColor-neutralLighterAlt, +.ms-fontColor-neutralLighterAlt--hover:hover { + @include ms-fontColor-neutralLighterAlt; +} + +.ms-fontColor-white, +.ms-fontColor-white--hover:hover { + @include ms-fontColor-white; +} + +// Brand and accent colors +.ms-fontColor-yellow, +.ms-fontColor-yellow--hover:hover { + @include ms-fontColor-yellow; +} + +.ms-fontColor-yellowLight, +.ms-fontColor-yellowLight--hover:hover { + @include ms-fontColor-yellowLight; +} + +.ms-fontColor-orange, +.ms-fontColor-orange--hover:hover { + @include ms-fontColor-orange; +} + +.ms-fontColor-orangeLight, +.ms-fontColor-orangeLight--hover:hover { + @include ms-fontColor-orangeLight; +} + +.ms-fontColor-orangeLighter, +.ms-fontColor-orangeLighter--hover:hover { + @include ms-fontColor-orangeLighter; +} + +.ms-fontColor-redDark, +.ms-fontColor-redDark--hover:hover { + @include ms-fontColor-redDark; +} + +.ms-fontColor-red, +.ms-fontColor-red--hover:hover { + @include ms-fontColor-red; +} + +.ms-fontColor-magentaDark, +.ms-fontColor-magentaDark--hover:hover { + @include ms-fontColor-magentaDark; +} + +.ms-fontColor-magenta, +.ms-fontColor-magenta--hover:hover { + @include ms-fontColor-magenta; +} + +.ms-fontColor-magentaLight, +.ms-fontColor-magentaLight--hover:hover { + @include ms-fontColor-magentaLight; +} + +.ms-fontColor-purpleDark, +.ms-fontColor-purpleDark--hover:hover { + @include ms-fontColor-purpleDark; +} + +.ms-fontColor-purple, +.ms-fontColor-purple--hover:hover { + @include ms-fontColor-purple; +} + +.ms-fontColor-purpleLight, +.ms-fontColor-purpleLight--hover:hover { + @include ms-fontColor-purpleLight; +} + +.ms-fontColor-blueDark, +.ms-fontColor-blueDark--hover:hover { + @include ms-fontColor-blueDark; +} + +.ms-fontColor-blueMid, +.ms-fontColor-blueMid--hover:hover { + @include ms-fontColor-blueMid; +} + +.ms-fontColor-blue, +.ms-fontColor-blue--hover:hover { + @include ms-fontColor-blue; +} + +.ms-fontColor-blueLight, +.ms-fontColor-blueLight--hover:hover { + @include ms-fontColor-blueLight; +} + +.ms-fontColor-tealDark, +.ms-fontColor-tealDark--hover:hover { + @include ms-fontColor-tealDark; +} + +.ms-fontColor-teal, +.ms-fontColor-teal--hover:hover { + @include ms-fontColor-teal; +} + +.ms-fontColor-tealLight, +.ms-fontColor-tealLight--hover:hover { + @include ms-fontColor-tealLight; +} + +.ms-fontColor-greenDark, +.ms-fontColor-greenDark--hover:hover { + @include ms-fontColor-greenDark; +} + +.ms-fontColor-green, +.ms-fontColor-green--hover:hover { + @include ms-fontColor-green; +} + +.ms-fontColor-greenLight, +.ms-fontColor-greenLight--hover:hover { + @include ms-fontColor-greenLight; +} + +// Message colors +.ms-fontColor-info, +.ms-fontColor-info--hover:hover { + @include ms-fontColor-info; +} + +.ms-fontColor-success, +.ms-fontColor-success--hover:hover { + @include ms-fontColor-success; +} + +.ms-fontColor-alert, +.ms-fontColor-alert--hover:hover { + @include ms-fontColor-alert; +} + +.ms-fontColor-error, +.ms-fontColor-error--hover:hover { + @include ms-fontColor-error; +} diff --git a/dist/sass/Fabric.Utilities.Output.scss b/dist/sass/Fabric.Utilities.Output.scss new file mode 100644 index 000000000..c34806274 --- /dev/null +++ b/dist/sass/Fabric.Utilities.Output.scss @@ -0,0 +1,23 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Utility classes and mixins used throughout Fabric. + +@import "Fabric.Utilities"; + +// The best box is a border box. +.ms-u-borderBox, .ms-u-borderBox:before, .ms-u-borderBox:after { + @include ms-u-borderBox; +} + +// Ensures the block expands to the full height to enclose its floated childen. +.ms-u-clearfix { + @include ms-u-clearfix; +} + +// Basic border-box, margin, and padding reset. +.ms-u-normalize { + @include ms-u-normalize; +} diff --git a/dist/sass/Fabric.scss b/dist/sass/Fabric.scss new file mode 100644 index 000000000..c76c2f066 --- /dev/null +++ b/dist/sass/Fabric.scss @@ -0,0 +1,40 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// Core Module Loader + + +// Common utilities +@import './Fabric.Utilities.Output'; +@import './Fabric.ZIndex.Variables'; +@import './Fabric.Mixins'; +@import "./Fabric.Mixins.RTL"; + +// Colors +@import './Fabric.Color.Variables'; +@import './Fabric.Color.Mixins.Output'; + +// Typography +@import './Fabric.Typography.Variables'; +@import './Fabric.Typography.Output'; +@import './Fabric.Typography.Fonts.Output'; +@import './Fabric.Typography.Language.Overrides.Output'; + +// Icons +@import './Fabric.Icons.Font.Output'; +@import './Fabric.Icons.Output'; + +// Animations +@import './Fabric.Animations.Output'; + +// Responsive +@import './Fabric.Responsive.Variables'; +@import './Fabric.Responsive.Utilities.Variables'; +@import './Fabric.Responsive.Utilities.Output'; + +// Grid +@import './Fabric.Grid.Output'; + +// Office colors +@import './Office.Color.Variables'; diff --git a/dist/sass/_Fabric.Animations.RTL.scss b/dist/sass/_Fabric.Animations.RTL.scss new file mode 100644 index 000000000..c6d1a6190 --- /dev/null +++ b/dist/sass/_Fabric.Animations.RTL.scss @@ -0,0 +1,79 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// RTL overrides for Fabric Animations + + +@import 'Fabric.Animations'; + +// slideRightIn10 +@mixin ms-u-slideRightIn10 { + @include animationMix((fadeIn, slideLeft10), $ms-duration3, $ms-ease1); +} + +// slideRightIn20 +@mixin ms-u-slideRightIn20 { + @include animationMix((fadeIn, slideLeft20), $ms-duration3, $ms-ease1); +} + +// slideRightIn40 +@mixin ms-u-slideRightIn40 { + @include animationMix((fadeIn, slideLeft40), $ms-duration3, $ms-ease1); +} + +// slideLeftIn10 +@mixin ms-u-slideLeftIn10 { + @include animationMix((fadeIn, slideRight10), $ms-duration3, $ms-ease1); +} + +// slideLeftIn20 +@mixin ms-u-slideLeftIn20 { + @include animationMix((fadeIn, slideRight20), $ms-duration3, $ms-ease1); +} + +// slideLeftIn40 +@mixin ms-u-slideLeftIn40 { + @include animationMix((fadeIn, slideRight40), $ms-duration3, $ms-ease1); +} + +// slideRightIn400 +@mixin ms-u-slideRightIn400 { + @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1); +} + +// slideLeftIn400 +@mixin ms-u-slideLeftIn400 { + @include animationMix((fadeIn, slideRight400), $ms-duration3, $ms-ease1); +} + +// slideRightOut40 +@mixin ms-u-slideRightOut40 { + @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +} + +// slideLeftOut40 +@mixin ms-u-slideLeftOut40 { + @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +} + +// slideRightOut400 +@mixin ms-u-slideRightOut400 { + @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +} + +// slideLeftOut400 +@mixin ms-u-slideLeftOut400 { + @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +} + +// rotate90deg +@mixin ms-u-rotate90deg { + @include animationMix(rotateN90, 0.1s, $ms-ease2); +} + +// rotateN90deg +@mixin ms-u-rotateN90deg { + @include animationMix(rotate90, 0.1s, $ms-ease2); +} diff --git a/dist/sass/_Fabric.Animations.scss b/dist/sass/_Fabric.Animations.scss new file mode 100644 index 000000000..5b92983de --- /dev/null +++ b/dist/sass/_Fabric.Animations.scss @@ -0,0 +1,237 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Animations + + +// Note that all animation classes should begin with the "ms-u" utility prefix. +// The original class names are deprecated and will be removed in a future release. + +// Variables +$ms-ease1: cubic-bezier(0.1,0.9,0.2,1); +$ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9); +$ms-duration1: 0.167s; +$ms-duration2: 0.267s; +$ms-duration3: 0.367s; +$ms-duration4: 0.467s; + + +// Animation mixin +@mixin animationMix($ms-name, $ms-duration, $ms-ease: $ms-ease1, $ms-fillMode: both) { + @include animationName($ms-name); + @include animationDuration($ms-duration); + @include animationTiming($ms-ease); + @include animationFillMode($ms-fillMode); +} + +// slideRightIn10 +@mixin ms-u-slideRightIn10 { + @include animationMix((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); +} + +// slideRightIn20 +@mixin ms-u-slideRightIn20 { + @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); +} + +// slideRightIn40 +@mixin ms-u-slideRightIn40 { + @include animationMix((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); +} + +// slideLeftIn10 +@mixin ms-u-slideLeftIn10 { + @include animationMix((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); +} + +// slideLeftIn20 +@mixin ms-u-slideLeftIn20 { + @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); +} + +// slideLeftIn40 +@mixin ms-u-slideLeftIn40 { + @include animationMix((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); +} + +// slideRightIn400 +@mixin ms-u-slideRightIn400 { + @include animationMix((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); +} + +// slideLeftIn400 +@mixin ms-u-slideLeftIn400 { + @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1); +} + +// slideUpIn20 +@mixin ms-u-slideUpIn20 { + @include animationMix((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1); +} + +// slideUpIn10 +@mixin ms-u-slideUpIn10 { + @include animationMix((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2); +} + +// slideDownIn20 +@mixin ms-u-slideDownIn20 { + @include animationMix((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1); +} + +// slideDownIn10 +@mixin ms-u-slideDownIn10 { + @include animationMix((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2); +} + +// slideRightOut40 +@mixin ms-u-slideRightOut40 { + @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +} + +// slideLeftOut40 +@mixin ms-u-slideLeftOut40 { + @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +} + +// slideRightOut400 +@mixin ms-u-slideRightOut400 { + @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +} + +// slideLeftOut400 +@mixin ms-u-slideLeftOut400 { + @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +} + +// slideUpOut20 +@mixin ms-u-slideUpOut20 { + @include animationMix((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2); +} + +// slideUpOut10 +@mixin ms-u-slideUpOut10 { + @include animationMix((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2); +} + +// slideDownOut20 +@mixin ms-u-slideDownOut20 { + @include animationMix((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2); +} + +// slideDownOut10 +@mixin ms-u-slideDownOut10 { + @include animationMix((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2); +} + +// scaleUpIn100 +@mixin ms-u-scaleUpIn100 { + @include animationMix((fadeIn, scaleUp100), $ms-duration3, $ms-ease1); +} + +// scaleDownIn100 +@mixin ms-u-scaleDownIn100 { + @include animationMix((fadeIn, scaleDown100), $ms-duration3, $ms-ease1); +} + +// scaleUpOut103 +@mixin ms-u-scaleUpOut103 { + @include animationMix((fadeOut, scaleUp103), $ms-duration1, $ms-ease2); +} + +// scaleDownOut98 +@mixin ms-u-scaleDownOut98 { + @include animationMix((fadeOut, scaleDown98), $ms-duration1, $ms-ease2); +} + +// fadeIn +@mixin ms-u-fadeIn400 { + -webkit-animation-duration: $ms-duration3; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: $ms-duration3; + animation-name: fadeIn; + animation-fill-mode: both; +} +@mixin ms-u-fadeIn100 { + @include ms-u-fadeIn400; + -webkit-animation-duration: $ms-duration1; + animation-duration: $ms-duration1; +} +@mixin ms-u-fadeIn200 { + @include ms-u-fadeIn400; + -webkit-animation-duration: $ms-duration2; + animation-duration: $ms-duration2; +} +@mixin ms-u-fadeIn500 { + @include ms-u-fadeIn400; + -webkit-animation-duration: $ms-duration4; + animation-duration: $ms-duration4; +} + +// fadeOut +@mixin ms-u-fadeOut400 { + -webkit-animation-duration: $ms-duration3; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: $ms-duration3; + animation-name: fadeOut; + animation-fill-mode: both; +} +@mixin ms-u-fadeOut100 { + @include ms-u-fadeOut400; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} +@mixin ms-u-fadeOut200 { + @include ms-u-fadeOut400; + -webkit-animation-duration: $ms-duration1; + animation-duration: $ms-duration1; +} +@mixin ms-u-fadeOut500 { + @include ms-u-fadeOut400; + -webkit-animation-duration: $ms-duration4; + animation-duration: $ms-duration4; +} + +// rotate90deg +@mixin ms-u-rotate90deg { + @include animationMix(rotate90, 0.1s, $ms-ease2); +} + +// rotateN90deg +@mixin ms-u-rotateN90deg { + @include animationMix(rotateN90, 0.1s, $ms-ease2); +} + +// expandCollapse400 +@mixin ms-u-expandCollapse400 { + -webkit-transition: height $ms-duration3 $ms-ease2; + transition: height $ms-duration3 $ms-ease2; +} + +// expandCollapse200 +@mixin ms-u-expandCollapse200 { + -webkit-transition: height $ms-duration1 $ms-ease2; + transition: height $ms-duration1 $ms-ease2; +} + +// expandCollapse100 +@mixin ms-u-expandCollapse100 { + -webkit-transition: height 0.1s $ms-ease2; + transition: height 0.1s $ms-ease2; +} + +// delay100 +@mixin ms-u-delay100 { + -webkit-animation-delay: $ms-duration1; + animation-delay: $ms-duration1; +} + +// delay200 +@mixin ms-u-delay200 { + -webkit-animation-delay: 0.267s; + animation-delay: 0.267s; +} diff --git a/dist/sass/_Fabric.Color.Mixins.scss b/dist/sass/_Fabric.Color.Mixins.scss new file mode 100644 index 000000000..c2778a252 --- /dev/null +++ b/dist/sass/_Fabric.Color.Mixins.scss @@ -0,0 +1,406 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Mixins + + +//== Background colors +// +// Theme colors +@mixin ms-bgColor-themeDark { + background-color: $ms-color-themeDark; +} + +@mixin ms-bgColor-themeDarkAlt { + background-color: $ms-color-themeDarkAlt; +} + +@mixin ms-bgColor-themeDarker { + background-color: $ms-color-themeDarker; +} + +@mixin ms-bgColor-themePrimary { + background-color: $ms-color-themePrimary; +} + +@mixin ms-bgColor-themeSecondary { + background-color: $ms-color-themeSecondary; +} + +@mixin ms-bgColor-themeTertiary { + background-color: $ms-color-themeTertiary; +} + +@mixin ms-bgColor-themeLight { + background-color: $ms-color-themeLight; +} + +@mixin ms-bgColor-themeLighter { + background-color: $ms-color-themeLighter; +} + +@mixin ms-bgColor-themeLighterAlt { + background-color: $ms-color-themeLighterAlt; +} + +// Neutral colors +@mixin ms-bgColor-black { + background-color: $ms-color-black; +} + +@mixin ms-bgColor-neutralDark { + background-color: $ms-color-neutralDark; +} + +@mixin ms-bgColor-neutralPrimary { + background-color: $ms-color-neutralPrimary; +} + +@mixin ms-bgColor-neutralSecondary { + background-color: $ms-color-neutralSecondary; +} + +@mixin ms-bgColor-neutralSecondaryAlt { + background-color: $ms-color-neutralSecondaryAlt; +} + +@mixin ms-bgColor-neutralTertiary { + background-color: $ms-color-neutralTertiary; +} + +@mixin ms-bgColor-neutralTertiaryAlt { + background-color: $ms-color-neutralTertiaryAlt; +} + +@mixin ms-bgColor-neutralLight { + background-color: $ms-color-neutralLight; +} + +@mixin ms-bgColor-neutralLighter { + background-color: $ms-color-neutralLighter; +} + +@mixin ms-bgColor-neutralLighterAlt { + background-color: $ms-color-neutralLighterAlt; +} + +@mixin ms-bgColor-white { + background-color: $ms-color-white; +} + + +// Brand and accent colors +@mixin ms-bgColor-yellow { + background-color: $ms-color-yellow; +} + +@mixin ms-bgColor-yellowLight { + background-color: $ms-color-yellowLight; +} + +@mixin ms-bgColor-orange { + background-color: $ms-color-orange; +} + +@mixin ms-bgColor-orangeLight { + background-color: $ms-color-orangeLight; +} + +@mixin ms-bgColor-orangeLighter { + background-color: $ms-color-orangeLighter; +} + +@mixin ms-bgColor-redDark { + background-color: $ms-color-redDark; +} + +@mixin ms-bgColor-red { + background-color: $ms-color-red; +} + +@mixin ms-bgColor-magentaDark { + background-color: $ms-color-magentaDark; +} + +@mixin ms-bgColor-magenta { + background-color: $ms-color-magenta; +} + +@mixin ms-bgColor-magentaLight { + background-color: $ms-color-magentaLight; +} + +@mixin ms-bgColor-purpleDark { + background-color: $ms-color-purpleDark; +} + +@mixin ms-bgColor-purple { + background-color: $ms-color-purple; +} + +@mixin ms-bgColor-purpleLight { + background-color: $ms-color-purpleLight; +} + +@mixin ms-bgColor-blueDark { + background-color: $ms-color-blueDark; +} + +@mixin ms-bgColor-blueMid { + background-color: $ms-color-blueMid; +} + +@mixin ms-bgColor-blue { + background-color: $ms-color-blue; +} + +@mixin ms-bgColor-blueLight { + background-color: $ms-color-blueLight; +} + +@mixin ms-bgColor-tealDark { + background-color: $ms-color-tealDark; +} + +@mixin ms-bgColor-teal { + background-color: $ms-color-teal; +} + +@mixin ms-bgColor-tealLight { + background-color: $ms-color-tealLight; +} + +@mixin ms-bgColor-greenDark { + background-color: $ms-color-greenDark; +} + +@mixin ms-bgColor-green { + background-color: $ms-color-green; +} + +@mixin ms-bgColor-greenLight { + background-color: $ms-color-greenLight; +} + +// Message colors +@mixin ms-bgColor-info { + background-color: $ms-color-infoBackground; +} + +@mixin ms-bgColor-success { + background-color: $ms-color-successBackground; +} + +@mixin ms-bgColor-alert { + background-color: $ms-color-alertBackground; +} + +@mixin ms-bgColor-error { + background-color: $ms-color-errorBackground; +} + + +//== Border colors +// + +// Theme colors +@mixin ms-borderColor-themeDark { + border-color: $ms-color-themeDark; +} + +@mixin ms-borderColor-themeDarkAlt { + border-color: $ms-color-themeDarkAlt; +} + +@mixin ms-borderColor-themeDarker { + border-color: $ms-color-themeDarker; +} + +@mixin ms-borderColor-themePrimary { + border-color: $ms-color-themePrimary; +} + +@mixin ms-borderColor-themeSecondary { + border-color: $ms-color-themeSecondary; +} + +@mixin ms-borderColor-themeTertiary { + border-color: $ms-color-themeTertiary; +} + +@mixin ms-borderColor-themeLight { + border-color: $ms-color-themeLight; +} + +@mixin ms-borderColor-themeLighter { + border-color: $ms-color-themeLighter; +} + +@mixin ms-borderColor-themeLighterAlt { + border-color: $ms-color-themeLighterAlt; +} + + +// Neutral colors +@mixin ms-borderColor-black { + border-color: $ms-color-black; +} + +@mixin ms-borderColor-neutralDark { + border-color: $ms-color-neutralDark; +} + +@mixin ms-borderColor-neutralPrimary { + border-color: $ms-color-neutralPrimary; +} + +@mixin ms-borderColor-neutralSecondary { + border-color: $ms-color-neutralSecondary; +} + +@mixin ms-borderColor-neutralSecondaryAlt { + border-color: $ms-color-neutralSecondaryAlt; +} + +@mixin ms-borderColor-neutralTertiary { + border-color: $ms-color-neutralTertiary; +} + +@mixin ms-borderColor-neutralTertiaryAlt { + border-color: $ms-color-neutralTertiaryAlt; +} + +@mixin ms-borderColor-neutralLight { + border-color: $ms-color-neutralLight; +} + +@mixin ms-borderColor-neutralLighter { + border-color: $ms-color-neutralLighter; +} + +@mixin ms-borderColor-neutralLighterAlt { + border-color: $ms-color-neutralLighterAlt; +} + +@mixin ms-borderColor-white { + border-color: $ms-color-white; +} + +// Brand and accent colors +@mixin ms-borderColor-yellow { + border-color: $ms-color-yellow; +} + +@mixin ms-borderColor-yellowLight { + border-color: $ms-color-yellowLight; +} + +@mixin ms-borderColor-orange { + border-color: $ms-color-orange; +} + +@mixin ms-borderColor-orangeLight { + border-color: $ms-color-orangeLight; +} + +@mixin ms-borderColor-orangeLighter { + border-color: $ms-color-orangeLighter; +} + +@mixin ms-borderColor-redDark { + border-color: $ms-color-redDark; +} + +@mixin ms-borderColor-red { + border-color: $ms-color-red; +} + +@mixin ms-borderColor-magentaDark { + border-color: $ms-color-magentaDark; +} + +@mixin ms-borderColor-magenta { + border-color: $ms-color-magenta; +} + +@mixin ms-borderColor-magentaLight { + border-color: $ms-color-magentaLight; +} + +@mixin ms-borderColor-purpleDark { + border-color: $ms-color-purpleDark; +} + +@mixin ms-borderColor-purple { + border-color: $ms-color-purple; +} + +@mixin ms-borderColor-purpleLight { + border-color: $ms-color-purpleLight; +} + +@mixin ms-borderColor-blueDark { + border-color: $ms-color-blueDark; +} + +@mixin ms-borderColor-blueMid { + border-color: $ms-color-blueMid; +} + +@mixin ms-borderColor-blue { + border-color: $ms-color-blue; +} + +@mixin ms-borderColor-blueLight { + border-color: $ms-color-blueLight; +} + +@mixin ms-borderColor-tealDark { + border-color: $ms-color-tealDark; +} + +@mixin ms-borderColor-teal { + border-color: $ms-color-teal; +} + +@mixin ms-borderColor-tealLight { + border-color: $ms-color-tealLight; +} + +@mixin ms-borderColor-greenDark { + border-color: $ms-color-greenDark; +} + +@mixin ms-borderColor-green { + border-color: $ms-color-green; +} + +@mixin ms-borderColor-greenLight { + border-color: $ms-color-greenLight; +} + + +// Message colors +@mixin ms-borderColor-info { + border-color: $ms-color-info; +} + +@mixin ms-borderColor-success { + border-color: $ms-color-success; +} + +@mixin ms-borderColor-alert { + border-color: $ms-color-alert; +} + +@mixin ms-borderColor-error { + border-color: $ms-color-error; +} + + +// Individual borders, by request +@mixin ms-borderColorTop-themePrimary { + border-top-color: $ms-color-themePrimary; +} diff --git a/dist/sass/_Fabric.Color.Variables.scss b/dist/sass/_Fabric.Color.Variables.scss new file mode 100644 index 000000000..978d889dc --- /dev/null +++ b/dist/sass/_Fabric.Color.Variables.scss @@ -0,0 +1,89 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Variables + + +//== Theme Colors +// +$ms-color-themeDarker: #004578; +$ms-color-themeDark: #005a9e; +$ms-color-themeDarkAlt: #106ebe; +$ms-color-themePrimary: #0078d7; +$ms-color-themeSecondary: #2b88d8; +$ms-color-themeTertiary: #71afe5; +$ms-color-themeLight: #c7e0f4; +$ms-color-themeLighter: #deecf9; +$ms-color-themeLighterAlt: #eff6fc; + + +//== Grayscale Colors +// +$ms-color-black: #000000; +$ms-color-neutralDark: #212121; +$ms-color-neutralPrimary: #333333; +$ms-color-neutralSecondary: #666666; +$ms-color-neutralSecondaryAlt: #767676; +$ms-color-neutralTertiary: #a6a6a6; +$ms-color-neutralTertiaryAlt: #c8c8c8; +$ms-color-neutralLight: #eaeaea; +$ms-color-neutralLighter: #f4f4f4; +$ms-color-neutralLighterAlt: #f8f8f8; +$ms-color-white: #ffffff; + + +//== Translucent Colors +// +$ms-color-blackTranslucent40: rgba(0,0,0,.4); +$ms-color-whiteTranslucent40: rgba(255,255,255,.4); + + +//== Core brand and accent colors +// +$ms-color-yellow: #ffb900; +$ms-color-yellowLight: #fff100; +$ms-color-orange: #d83b01; +$ms-color-orangeLight: #ea4300; +$ms-color-orangeLighter: #ff8c00; +$ms-color-redDark: #a80000; +$ms-color-red: #e81123; +$ms-color-magentaDark: #5c005c; +$ms-color-magenta: #b4009e; +$ms-color-magentaLight: #e3008c; +$ms-color-purpleDark: #32145a; +$ms-color-purple: #5c2d91; +$ms-color-purpleLight: #b4a0ff; +$ms-color-blueDark: #002050; +$ms-color-blueMid: #00188f; +$ms-color-blue: #0078d7; +$ms-color-blueLight: #00bcf2; +$ms-color-tealDark: #004b50; +$ms-color-teal: #008272; +$ms-color-tealLight: #00b294; +$ms-color-greenDark: #004b1c; +$ms-color-green: #107c10; +$ms-color-greenLight: #bad80a; + + +//== Message colors +// +$ms-color-info: $ms-color-green; +$ms-color-infoBackground: $ms-color-neutralLighter; +$ms-color-success: $ms-color-green; +$ms-color-successBackground: #dff6dd; +$ms-color-alert: $ms-color-orange; +$ms-color-alertBackground: $ms-color-neutralLighter; +$ms-color-error: $ms-color-redDark; +$ms-color-errorBackground: #fde7e9; + + +//== High contrast colors +// +$ms-color-contrastBlackDisabled: #00ff00; +$ms-color-contrastWhiteDisabled: #600000; +$ms-color-contrastBlackSelected: #1AEBFF; +$ms-color-contrastWhiteSelected: #37006E; +$ms-color-contrastBlackLink: #8080ff; +$ms-color-contrastWhiteLink: #00009F; diff --git a/dist/sass/_Fabric.Common.scss b/dist/sass/_Fabric.Common.scss new file mode 100644 index 000000000..73f289f58 --- /dev/null +++ b/dist/sass/_Fabric.Common.scss @@ -0,0 +1,15 @@ +@import "./Fabric.Animations"; +@import "./Fabric.Color.Mixins"; +@import "./Fabric.Color.Variables"; +@import "./Fabric.Grid"; +@import "./Fabric.Icons"; +@import "./Fabric.Mixins"; +@import "./Fabric.Mixins.RTL"; +@import './Fabric.Responsive.Utilities.Variables'; +@import "./Fabric.Responsive.Variables"; +@import "./Fabric.Typography"; +@import "./Fabric.Typography.Fonts"; +@import "./Fabric.Typography.Variables"; +@import "./Fabric.Utilities"; +@import "./Fabric.ZIndex.Variables"; +@import "./Office.Color.Variables"; \ No newline at end of file diff --git a/dist/sass/_Fabric.Grid.scss b/dist/sass/_Fabric.Grid.scss new file mode 100644 index 000000000..14430d2d8 --- /dev/null +++ b/dist/sass/_Fabric.Grid.scss @@ -0,0 +1,34 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fluid 12-column grids for small, medium, and large devices + + +//== Grid container (same for all sizes) +// +@mixin ms-Grid { + @include ms-u-borderBox; + @include ms-u-clearfix; + padding: 0 8px; +} + +//== Grid rows (pull first and last column out) +// +@mixin ms-Grid-row { + margin: 0 -8px; + @include ms-u-borderBox; + @include ms-u-clearfix; +} + +//== Grid cells +// +@mixin ms-Grid-col { + position: relative; + min-height: 1px; + padding-left: 8px; + padding-right: 8px; + @include ms-u-borderBox; + float: left; +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Icons.scss b/dist/sass/_Fabric.Icons.scss new file mode 100644 index 000000000..929059d65 --- /dev/null +++ b/dist/sass/_Fabric.Icons.scss @@ -0,0 +1,397 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Icon definitions + +@mixin ms-Icon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +// Modifiers: Each of the icons. +@mixin ms-Icon--circleEmpty { content: '\e000'; } // '' +@mixin ms-Icon--circleFill { content: '\e001'; } // '' +@mixin ms-Icon--placeholder { content: '\e002'; } // '' +@mixin ms-Icon--star { content: '\e003'; } // '' +@mixin ms-Icon--plus { content: '\e004'; } // '' +@mixin ms-Icon--minus { content: '\e005'; } // '' +@mixin ms-Icon--question { content: '\e006'; } // '' +@mixin ms-Icon--exclamation { content: '\e007'; } // '' +@mixin ms-Icon--person { content: '\e008'; } // '' +@mixin ms-Icon--mail { content: '\e009'; } // '' +@mixin ms-Icon--infoCircle { content: '\e00a'; } // '' +@mixin ms-Icon--alert { content: '\e00b'; } // '' +@mixin ms-Icon--xCircle { content: '\e00c'; } // '' +@mixin ms-Icon--mailOpen { content: '\e00d'; } // '' +@mixin ms-Icon--people { content: '\e00e'; } // '' +@mixin ms-Icon--bell { content: '\e010'; } // '' +@mixin ms-Icon--calendar { content: '\e011'; } // '' +@mixin ms-Icon--scheduling { content: '\e012'; } // '' +@mixin ms-Icon--event { content: '\e013'; } // '' +@mixin ms-Icon--folder { content: '\e014'; } // '' +@mixin ms-Icon--documents { content: '\e015'; } // '' +@mixin ms-Icon--onedrive { content: '\e016'; } // '' +@mixin ms-Icon--chat { content: '\e017'; } // '' +@mixin ms-Icon--sites { content: '\e018'; } // '' +@mixin ms-Icon--listBullets { content: '\e019'; } // '' +@mixin ms-Icon--calendarWeek { content: '\e01a'; } // '' +@mixin ms-Icon--calendarWorkWeek { content: '\e01b'; } // '' +@mixin ms-Icon--calendarDay { content: '\e01c'; } // '' +@mixin ms-Icon--folderMove { content: '\e01d'; } // '' +@mixin ms-Icon--panel { content: '\e01e'; } // '' +@mixin ms-Icon--popout { content: '\e01f'; } // '' +@mixin ms-Icon--menu { content: '\e020'; } // '' +@mixin ms-Icon--home { content: '\e021'; } // '' +@mixin ms-Icon--favorites { content: '\e022'; } // '' +@mixin ms-Icon--phone { content: '\e023'; } // '' +@mixin ms-Icon--mailSend { content: '\e024'; } // '' +@mixin ms-Icon--save { content: '\e025'; } // '' +@mixin ms-Icon--trash { content: '\e026'; } // '' +@mixin ms-Icon--pencil { content: '\e027'; } // '' +@mixin ms-Icon--flag { content: '\e028'; } // '' +@mixin ms-Icon--reply { content: '\e029'; } // '' +@mixin ms-Icon--miniatures { content: '\e02a'; } // '' +@mixin ms-Icon--voicemail { content: '\e02b'; } // '' +@mixin ms-Icon--play { content: '\e02c'; } // '' +@mixin ms-Icon--pause { content: '\e02d'; } // '' +@mixin ms-Icon--onlineAdd { content: '\e02e'; } // '' +@mixin ms-Icon--onlineJoin { content: '\e02f'; } // '' +@mixin ms-Icon--replyAll { content: '\e030'; } // '' +@mixin ms-Icon--attachment { content: '\e031'; } // '' +@mixin ms-Icon--drm { content: '\e032'; } // '' +@mixin ms-Icon--pinDown { content: '\e033'; } // '' +@mixin ms-Icon--refresh { content: '\e034'; } // '' +@mixin ms-Icon--gear { content: '\e035'; } // '' +@mixin ms-Icon--smiley { content: '\e036'; } // '' +@mixin ms-Icon--info { content: '\e037'; } // '' +@mixin ms-Icon--lock { content: '\e038'; } // '' +@mixin ms-Icon--search { content: '\e039'; } // '' +@mixin ms-Icon--questionReverse { content: '\e03a'; } // '' +@mixin ms-Icon--notRecurring { content: '\e03b'; } // '' +@mixin ms-Icon--tasks { content: '\e040'; } // '' +@mixin ms-Icon--check { content: '\e041'; } // '' +@mixin ms-Icon--x { content: '\e042'; } // '' +@mixin ms-Icon--ellipsis { content: '\e045'; } // '' +@mixin ms-Icon--dot { content: '\e046'; } // '' +@mixin ms-Icon--arrowUp { content: '\e047'; } // '' +@mixin ms-Icon--arrowDown { content: '\e048'; } // '' +@mixin ms-Icon--arrowLeft { content: '\e049'; } // '' +@mixin ms-Icon--arrowRight { content: '\e04a'; } // '' +@mixin ms-Icon--download { content: '\e04b'; } // '' +@mixin ms-Icon--directions { content: '\e04c'; } // '' +@mixin ms-Icon--microphone { content: '\e04f'; } // '' +@mixin ms-Icon--caretUp { content: '\e051'; } // '' +@mixin ms-Icon--caretDown { content: '\e052'; } // '' +@mixin ms-Icon--caretLeft { content: '\e053'; } // '' +@mixin ms-Icon--caretRight { content: '\e054'; } // '' +@mixin ms-Icon--caretUpLeft { content: '\e05a'; } // '' +@mixin ms-Icon--caretUpRight { content: '\e05b'; } // '' +@mixin ms-Icon--caretDownRight { content: '\e05c'; } // '' +@mixin ms-Icon--caretDownLeft { content: '\e05d'; } // '' +@mixin ms-Icon--note { content: '\e06a'; } // '' +@mixin ms-Icon--noteReply { content: '\e06b'; } // '' +@mixin ms-Icon--noteForward { content: '\e06c'; } // '' +@mixin ms-Icon--key { content: '\e06f'; } // '' +@mixin ms-Icon--tile { content: '\e070'; } // '' +@mixin ms-Icon--taskRecurring { content: '\e071'; } // '' +@mixin ms-Icon--starEmpty { content: '\e073'; } // '' +@mixin ms-Icon--upload { content: '\e076'; } // '' +@mixin ms-Icon--wrench { content: '\e077'; } // '' +@mixin ms-Icon--share { content: '\e078'; } // '' +@mixin ms-Icon--documentReply { content: '\e079'; } // '' +@mixin ms-Icon--documentForward { content: '\e07a'; } // '' +@mixin ms-Icon--partner { content: '\e080'; } // '' +@mixin ms-Icon--reactivate { content: '\e084'; } // '' +@mixin ms-Icon--sort { content: '\e085'; } // '' +@mixin ms-Icon--personAdd { content: '\e086'; } // '' +@mixin ms-Icon--chevronUp { content: '\e087'; } // '' +@mixin ms-Icon--chevronDown { content: '\e088'; } // '' +@mixin ms-Icon--chevronLeft { content: '\e089'; } // '' +@mixin ms-Icon--chevronRight { content: '\e08a'; } // '' +@mixin ms-Icon--peopleAdd { content: '\e08c'; } // '' +@mixin ms-Icon--newsfeed { content: '\e08d'; } // '' +@mixin ms-Icon--notebook { content: '\e08e'; } // '' +@mixin ms-Icon--link { content: '\e08f'; } // '' +@mixin ms-Icon--chevronsUp { content: '\e090'; } // '' +@mixin ms-Icon--chevronsDown { content: '\e091'; } // '' +@mixin ms-Icon--chevronsLeft { content: '\e092'; } // '' +@mixin ms-Icon--chevronsRight { content: '\e093'; } // '' +@mixin ms-Icon--clutter { content: '\e09a'; } // '' +@mixin ms-Icon--subscribe { content: '\e09c'; } // '' +@mixin ms-Icon--unsubscribe { content: '\e09d'; } // '' +@mixin ms-Icon--personRemove { content: '\e09e'; } // '' +@mixin ms-Icon--receiptForward { content: '\e0a0'; } // '' +@mixin ms-Icon--receiptReply { content: '\e0a1'; } // '' +@mixin ms-Icon--receiptCheck { content: '\e0a2'; } // '' +@mixin ms-Icon--peopleRemove { content: '\e0a3'; } // '' +@mixin ms-Icon--merge { content: '\e0a4'; } // '' +@mixin ms-Icon--split { content: '\e0a5'; } // '' +@mixin ms-Icon--eventCancel { content: '\e0a6'; } // '' +@mixin ms-Icon--eventShare { content: '\e0a7'; } // '' +@mixin ms-Icon--today { content: '\e0a9'; } // '' +@mixin ms-Icon--oofReply { content: '\e0aa'; } // '' +@mixin ms-Icon--voicemailReply { content: '\e0ac'; } // '' +@mixin ms-Icon--voicemailForward { content: '\e0ad'; } // '' +@mixin ms-Icon--ribbon { content: '\e0af'; } // '' +@mixin ms-Icon--contact { content: '\e0b0'; } // '' +@mixin ms-Icon--eye { content: '\e0b1'; } // '' +@mixin ms-Icon--glasses { content: '\e0b2'; } // '' +@mixin ms-Icon--print { content: '\e100'; } // '' +@mixin ms-Icon--room { content: '\e101'; } // '' +@mixin ms-Icon--post { content: '\e102'; } // '' +@mixin ms-Icon--toggle { content: '\e103'; } // '' +@mixin ms-Icon--touch { content: '\e104'; } // '' +@mixin ms-Icon--clock { content: '\e105'; } // '' +@mixin ms-Icon--fax { content: '\e106'; } // '' +@mixin ms-Icon--lightning { content: '\e110'; } // '' +@mixin ms-Icon--dialpad { content: '\e111'; } // '' +@mixin ms-Icon--phoneTransfer { content: '\e112'; } // '' +@mixin ms-Icon--phoneAdd { content: '\e113'; } // '' +@mixin ms-Icon--late { content: '\e114'; } // '' +@mixin ms-Icon--chatAdd { content: '\e115'; } // '' +@mixin ms-Icon--conflict { content: '\e116'; } // '' +@mixin ms-Icon--navigate { content: '\e117'; } // '' +@mixin ms-Icon--camera { content: '\e119'; } // '' +@mixin ms-Icon--filter { content: '\e11a'; } // '' +@mixin ms-Icon--fullscreen { content: '\e11b'; } // '' +@mixin ms-Icon--new { content: '\e11c'; } // '' +@mixin ms-Icon--mailEmpty { content: '\e11d'; } // '' +@mixin ms-Icon--editBox { content: '\e11e'; } // '' +@mixin ms-Icon--waffle { content: '\e11f'; } // '' +@mixin ms-Icon--work { content: '\e120'; } // '' +@mixin ms-Icon--eventRecurring { content: '\e121'; } // '' +@mixin ms-Icon--cart { content: '\e122'; } // '' +@mixin ms-Icon--socialListening { content: '\e123'; } // '' +@mixin ms-Icon--mapMarker { content: '\e124'; } // '' +@mixin ms-Icon--org { content: '\e125'; } // '' +@mixin ms-Icon--replyAlt { content: '\e150'; } // '' +@mixin ms-Icon--replyAllAlt { content: '\e152'; } // '' +@mixin ms-Icon--eventInfo { content: '\e154'; } // '' +@mixin ms-Icon--group { content: '\e155'; } // '' +@mixin ms-Icon--money { content: '\e161'; } // '' +@mixin ms-Icon--graph { content: '\e162'; } // '' +@mixin ms-Icon--noteEdit { content: '\e163'; } // '' +@mixin ms-Icon--dashboard { content: '\e164'; } // '' +@mixin ms-Icon--mailEdit { content: '\e165'; } // '' +@mixin ms-Icon--pinLeft { content: '\e167'; } // '' +@mixin ms-Icon--heart { content: '\e16a'; } // '' +@mixin ms-Icon--heartEmpty { content: '\e16b'; } // '' +@mixin ms-Icon--picture { content: '\e16c'; } // '' +@mixin ms-Icon--cake { content: '\e16d'; } // '' +@mixin ms-Icon--books { content: '\e16e'; } // '' +@mixin ms-Icon--chart { content: '\e16f'; } // '' +@mixin ms-Icon--video { content: '\e170'; } // '' +@mixin ms-Icon--soccer { content: '\e171'; } // '' +@mixin ms-Icon--meal { content: '\e172'; } // '' +@mixin ms-Icon--balloon { content: '\e173'; } // '' +@mixin ms-Icon--cat { content: '\e174'; } // '' +@mixin ms-Icon--dog { content: '\e175'; } // '' +@mixin ms-Icon--bag { content: '\e176'; } // '' +@mixin ms-Icon--music { content: '\e177'; } // '' +@mixin ms-Icon--stopwatch { content: '\e178'; } // '' +@mixin ms-Icon--coffee { content: '\e179'; } // '' +@mixin ms-Icon--briefcase { content: '\e17a'; } // '' +@mixin ms-Icon--pill { content: '\e17b'; } // '' +@mixin ms-Icon--trophy { content: '\e17c'; } // '' +@mixin ms-Icon--firstAid { content: '\e17d'; } // '' +@mixin ms-Icon--plane { content: '\e17e'; } // '' +@mixin ms-Icon--page { content: '\e17f'; } // '' +@mixin ms-Icon--car { content: '\e180'; } // '' +@mixin ms-Icon--dogAlt { content: '\e181'; } // '' +@mixin ms-Icon--document { content: '\e182'; } // '' +@mixin ms-Icon--metadata { content: '\e183'; } // '' +@mixin ms-Icon--pointItem { content: '\e184'; } // '' +@mixin ms-Icon--text { content: '\e185'; } // '' +@mixin ms-Icon--fieldText { content: '\e186'; } // '' +@mixin ms-Icon--fieldNumber { content: '\e187'; } // '' +@mixin ms-Icon--dropdown { content: '\e188'; } // '' +@mixin ms-Icon--radioButton { content: '\e189'; } // '' +@mixin ms-Icon--checkbox { content: '\e18a'; } // '' +@mixin ms-Icon--story { content: '\e18b'; } // '' +@mixin ms-Icon--bold { content: '\e18c'; } // '' +@mixin ms-Icon--italic { content: '\e18d'; } // '' +@mixin ms-Icon--underline { content: '\e18e'; } // '' +@mixin ms-Icon--quote { content: '\e18f'; } // '' +@mixin ms-Icon--styleRemove { content: '\e190'; } // '' +@mixin ms-Icon--pictureAdd { content: '\e191'; } // '' +@mixin ms-Icon--pictureRemove { content: '\e192'; } // '' +@mixin ms-Icon--desktop { content: '\e193'; } // '' +@mixin ms-Icon--tablet { content: '\e194'; } // '' +@mixin ms-Icon--mobile { content: '\e195'; } // '' +@mixin ms-Icon--table { content: '\e196'; } // '' +@mixin ms-Icon--hide { content: '\e197'; } // '' +@mixin ms-Icon--shield { content: '\e198'; } // '' +@mixin ms-Icon--header { content: '\e19a'; } // '' +@mixin ms-Icon--paint { content: '\e19b'; } // '' +@mixin ms-Icon--support { content: '\e19c'; } // '' +@mixin ms-Icon--settings { content: '\e19d'; } // '' +@mixin ms-Icon--creditCard { content: '\e19e'; } // '' +@mixin ms-Icon--reload { content: '\e19f'; } // '' +@mixin ms-Icon--peopleSecurity { content: '\e200'; } // '' +@mixin ms-Icon--fieldTextBox { content: '\e203'; } // '' +@mixin ms-Icon--multiChoice { content: '\e204'; } // '' +@mixin ms-Icon--fieldMail { content: '\e205'; } // '' +@mixin ms-Icon--contactForm { content: '\e206'; } // '' +@mixin ms-Icon--circleHalfFilled { content: '\e207'; } // '' +@mixin ms-Icon--documentPDF { content: '\e208'; } // '' +@mixin ms-Icon--bookmark { content: '\e209'; } // '' +@mixin ms-Icon--circleUnfilled { content: '\e20b'; } // '' +@mixin ms-Icon--circleFilled { content: '\e20c'; } // '' +@mixin ms-Icon--textBox { content: '\e20e'; } // '' +@mixin ms-Icon--drop { content: '\e20f'; } // '' +@mixin ms-Icon--sun { content: '\e210'; } // '' +@mixin ms-Icon--lifesaver { content: '\e211'; } // '' +@mixin ms-Icon--lifesaverLock { content: '\e212'; } // '' +@mixin ms-Icon--mailUnread { content: '\e213'; } // '' +@mixin ms-Icon--mailRead { content: '\e214'; } // '' +@mixin ms-Icon--inboxCheck { content: '\e215'; } // '' +@mixin ms-Icon--folderSearch { content: '\e216'; } // '' +@mixin ms-Icon--collapse { content: '\e217'; } // '' +@mixin ms-Icon--expand { content: '\e218'; } // '' +@mixin ms-Icon--ascending { content: '\e219'; } // '' +@mixin ms-Icon--descending { content: '\e21a'; } // '' +@mixin ms-Icon--filterClear { content: '\e21b'; } // '' +@mixin ms-Icon--checkboxEmpty { content: '\e21c'; } // '' +@mixin ms-Icon--checkboxMixed { content: '\e21d'; } // '' +@mixin ms-Icon--boards { content: '\e21e'; } // '' +@mixin ms-Icon--checkboxCheck { content: '\e21f'; } // '' +@mixin ms-Icon--frowny { content: '\e220'; } // '' +@mixin ms-Icon--lightBulb { content: '\e221'; } // '' +@mixin ms-Icon--globe { content: '\e222'; } // '' +@mixin ms-Icon--deviceWipe { content: '\e223'; } // '' +@mixin ms-Icon--listCheck { content: '\e226'; } // '' +@mixin ms-Icon--listGroup { content: '\e227'; } // '' +@mixin ms-Icon--timeline { content: '\e228'; } // '' +@mixin ms-Icon--fontIncrease { content: '\e229'; } // '' +@mixin ms-Icon--fontDecrease { content: '\e22a'; } // '' +@mixin ms-Icon--fontColor { content: '\e22b'; } // '' +@mixin ms-Icon--mailCheck { content: '\e22c'; } // '' +@mixin ms-Icon--mailDown { content: '\e22d'; } // '' +@mixin ms-Icon--listCheckbox { content: '\e22e'; } // '' +@mixin ms-Icon--sunAdd { content: '\e22f'; } // '' +@mixin ms-Icon--sunQuestion { content: '\e230'; } // '' +@mixin ms-Icon--chevronThinUp { content: '\e231'; } // '' +@mixin ms-Icon--chevronThinDown { content: '\e232'; } // '' +@mixin ms-Icon--chevronThinLeft { content: '\e233'; } // '' +@mixin ms-Icon--chevronThinRight { content: '\e234'; } // '' +@mixin ms-Icon--chevronThickUp { content: '\e235'; } // '' +@mixin ms-Icon--chevronThickDown { content: '\e236'; } // '' +@mixin ms-Icon--chevronThickLeft { content: '\e237'; } // '' +@mixin ms-Icon--chevronThickRight { content: '\e238'; } // '' +@mixin ms-Icon--linkRemove { content: '\e239'; } // '' +@mixin ms-Icon--alertOutline { content: '\e23b'; } // '' +@mixin ms-Icon--documentLandscape { content: '\e23c'; } // '' +@mixin ms-Icon--documentAdd { content: '\e23d'; } // '' +@mixin ms-Icon--toggleMiddle { content: '\e23e'; } // '' +@mixin ms-Icon--embed { content: '\e23f'; } // '' +@mixin ms-Icon--listNumbered { content: '\e240'; } // '' +@mixin ms-Icon--peopleCheck { content: '\e242'; } // '' +@mixin ms-Icon--caretUpOutline { content: '\e243'; } // '' +@mixin ms-Icon--caretDownOutline { content: '\e244'; } // '' +@mixin ms-Icon--caretLeftOutline { content: '\e245'; } // '' +@mixin ms-Icon--caretRightOutline { content: '\e246'; } // '' +@mixin ms-Icon--mailSync { content: '\e248'; } // '' +@mixin ms-Icon--mailError { content: '\e249'; } // '' +@mixin ms-Icon--mailPause { content: '\e24a'; } // '' +@mixin ms-Icon--peopleSync { content: '\e24b'; } // '' +@mixin ms-Icon--peopleError { content: '\e24c'; } // '' +@mixin ms-Icon--peoplePause { content: '\e24d'; } // '' +@mixin ms-Icon--circleBall { content: '\e24e'; } // '' +@mixin ms-Icon--circleBalloons { content: '\e24f'; } // '' +@mixin ms-Icon--circleCar { content: '\e250'; } // '' +@mixin ms-Icon--circleCat { content: '\e251'; } // '' +@mixin ms-Icon--circleCoffee { content: '\e252'; } // '' +@mixin ms-Icon--circleDog { content: '\e253'; } // '' +@mixin ms-Icon--circleLightning { content: '\e254'; } // '' +@mixin ms-Icon--circlePill { content: '\e255'; } // '' +@mixin ms-Icon--circlePlane { content: '\e256'; } // '' +@mixin ms-Icon--circlePoodle { content: '\e257'; } // '' +@mixin ms-Icon--checkPeople { content: '\e259'; } // '' +@mixin ms-Icon--documentSearch { content: '\e25a'; } // '' +@mixin ms-Icon--sortLines { content: '\e25c'; } // '' +@mixin ms-Icon--calendarPublic { content: '\e25d'; } // '' +@mixin ms-Icon--contactPublic { content: '\e25e'; } // '' +@mixin ms-Icon--classNotebook { content: '\e25f'; } // '' +@mixin ms-Icon--triangleUp { content: '\e260'; } // '' +@mixin ms-Icon--triangleRight { content: '\e261'; } // '' +@mixin ms-Icon--triangleDown { content: '\e262'; } // '' +@mixin ms-Icon--triangleLeft { content: '\e263'; } // '' +@mixin ms-Icon--triangleEmptyUp { content: '\e264'; } // '' +@mixin ms-Icon--triangleEmptyRight { content: '\e265'; } // '' +@mixin ms-Icon--triangleEmptyDown { content: '\e266'; } // '' +@mixin ms-Icon--triangleEmptyLeft { content: '\e267'; } // '' +@mixin ms-Icon--filePDF { content: '\e268'; } // '' +@mixin ms-Icon--fileImage { content: '\e26c'; } // '' +@mixin ms-Icon--fileDocument { content: '\e26d'; } // '' +@mixin ms-Icon--listGroup2 { content: '\e26e'; } // '' +@mixin ms-Icon--copy { content: '\e26f'; } // '' +@mixin ms-Icon--creditCardOutline { content: '\e270'; } // '' +@mixin ms-Icon--mailPublic { content: '\e272'; } // '' +@mixin ms-Icon--folderPublic { content: '\e273'; } // '' +@mixin ms-Icon--teamwork { content: '\e274'; } // '' +@mixin ms-Icon--move { content: '\e275'; } // '' +@mixin ms-Icon--classroom { content: '\e276'; } // '' +@mixin ms-Icon--menu2 { content: '\e277'; } // '' +@mixin ms-Icon--plus2 { content: '\e278'; } // '' +@mixin ms-Icon--tag { content: '\e279'; } // '' +@mixin ms-Icon--arrowUp2 { content: '\e27a'; } // '' +@mixin ms-Icon--arrowDown2 { content: '\e27b'; } // '' +@mixin ms-Icon--circlePlus { content: '\e27c'; } // '' +@mixin ms-Icon--circleInfo { content: '\e27d'; } // '' +@mixin ms-Icon--section { content: '\e27e'; } // '' +@mixin ms-Icon--sections { content: '\e27f'; } // '' +@mixin ms-Icon--at { content: '\e282'; } // '' +@mixin ms-Icon--arrowUpRight { content: '\e283'; } // '' +@mixin ms-Icon--arrowDownRight { content: '\e284'; } // '' +@mixin ms-Icon--arrowDownLeft { content: '\e285'; } // '' +@mixin ms-Icon--arrowUpLeft { content: '\e286'; } // '' +@mixin ms-Icon--bundle { content: '\e287'; } // '' +@mixin ms-Icon--pictureEdit { content: '\e288'; } // '' +@mixin ms-Icon--protectionCenter { content: '\e289'; } // '' +@mixin ms-Icon--alert2 { content: '\e28a'; } // '' + + +@mixin ms-Icon--circle { + position: relative; + display: inline-block; + font-size: 1rem; + width: 1em; + height: 1em; + margin: 0 0.5em 0 0; + padding: 0; + text-align: left; + -webkit-font-smoothing: antialiased; + + &:before, &:after { + line-height: 1; + font-size: inherit; + } + + &:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; + } + + &:after { + content: '\e000'; + position: absolute; + top: 0; + left: 0; + transform: scale(2); + transform-origin: 50% 50%; + z-index: $ms-zIndex-back; + } +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Mixins.RTL.scss b/dist/sass/_Fabric.Mixins.RTL.scss new file mode 100644 index 000000000..553e72f91 --- /dev/null +++ b/dist/sass/_Fabric.Mixins.RTL.scss @@ -0,0 +1,315 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Internationalization mixins + + +// Base left-to-right mixin definition. +@mixin LTR { + [dir='ltr'] & { + @content; + } +} + +// Base right-to-left mixin definition. +@mixin RTL { + [dir='rtl'] & { + @content; + } +} + +// Use baseRTL on a root element (e.g. page or region) that needs RTL support. +@mixin baseRtl { + @include RTL { + direction: rtl; + unicode-bidi: bidi-override; + } +} + + +// Common CSS property mixins with support for RTL. +// Use to automatically create RTL versions of your properties. + +// Border styles. +@mixin border-color($top, $right, $bottom, $left) { + border-color: $top $right $bottom $left; + + @include RTL { + border-color: $top $left $bottom $right; + } +} + +@mixin border-left($width, $style, $color) { + @include LTR { + border-left: $width $style $color; + } + + @include RTL { + border-right: $width $style $color; + } +} + +@mixin border-left-color($color) { + @include LTR { + border-left-color: $color; + } + + @include RTL { + border-right-color: $color; + } +} + +@mixin border-left-style($style) { + @include LTR { + border-left-style: $style; + } + + @include RTL { + border-right-style: $style; + } +} + +@mixin border-left-width($width) { + @include LTR { + border-left-width: $width; + } + + @include RTL { + border-right-width: $width; + } +} + +@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { + border-radius: $topLeft $topRight $bottomRight $bottomLeft; + + @include RTL { + border-radius: $topRight $topLeft $bottomLeft $bottomRight; + } +} + +@mixin border-right($width, $style, $color) { + @include LTR { + border-right: $width $style $color; + } + + @include RTL { + border-left: $width $style $color; + } +} + +@mixin border-right-color($color) { + @include LTR { + border-right-color: $color; + } + + @include RTL { + border-left-color: $color; + } +} + +@mixin border-right-style($style) { + @include LTR { + border-right-style: $style; + } + + @include RTL { + border-left-style: $style; + } +} + +@mixin border-right-width($width) { + @include LTR { + border-right-width: $width; + } + + @include RTL { + border-left-width: $width; + } +} + +// Floats. +@mixin clear($side) { + @if $side == left { + @include LTR { + clear: $side; + } + + @include RTL { + clear: right; + } + } @else if $side == right { + @include LTR { + clear: $side; + } + + @include RTL { + clear: left; + } + } @else { + clear: $side; + } +} + +@mixin float($direction) { + @if $direction == left { + @include LTR { + float: left; + } + + @include RTL { + float: right; + } + } @else { + @include LTR { + float: right; + } + + @include RTL { + float: left; + } + } +} + +// Positioning. +@mixin left($distance) { + @include LTR { + left: $distance; + } + + @include RTL { + right: $distance; + } +} + +@mixin right($distance) { + @include LTR { + right: $distance; + } + + @include RTL { + left: $distance; + } +} + +// Margins. +@mixin margin($top, $right, $bottom, $left) { + margin: $top $right $bottom $left; + + @include RTL { + margin: $top $left $bottom $right; + } +} + +@mixin margin-left($distance) { + @include LTR { + margin-left: $distance; + } + + @include RTL { + margin-right: $distance; + } +} + +@mixin margin-right($distance) { + @include LTR { + margin-right: $distance; + } + @include RTL { + margin-left: $distance; + } +} + +// Padding. +@mixin padding($top, $right, $bottom, $left) { + padding: $top $right $bottom $left; + + @include RTL { + padding: $top $left $bottom $right; + } +} + +@mixin padding-left($distance) { + @include LTR { + padding-left: $distance; + } + + @include RTL { + padding-right: $distance; + } +} + +@mixin padding-right($distance) { + @include LTR { + padding-right: $distance; + } + + @include RTL { + padding-left: $distance; + } +} + +// Text-alignment. +@mixin text-align($direction) { + @if $direction == left { + @include LTR { + text-align: left; + } + + @include RTL { + text-align: right; + } + } @else { + @include LTR { + text-align: right; + } + + @include RTL { + text-align: left; + } + } +} + +// Box-shadow. +@mixin box-shadow($left, $etc) { + @include LTR { + box-shadow: $left $etc; + } + + @include RTL { + box-shadow: -$left $etc; + } +} + +// Transforms. +@mixin transform-rtl() { + @include LTR { + transform: scaleX(1); + } + + @include RTL { + transform: scaleX(-1); + } +} + +// Transitions. Only supported when ONLY left/right are declared +@mixin transition-property($direction) { + @if $direction == left { + @include LTR { + transition-property: left; + } + + @include RTL { + transition-property: right; + } + } @else { + @include LTR { + transition-property: right; + } + + @include RTL { + transition-property: left; + } + } +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Mixins.scss b/dist/sass/_Fabric.Mixins.scss new file mode 100644 index 000000000..518d9bf04 --- /dev/null +++ b/dist/sass/_Fabric.Mixins.scss @@ -0,0 +1,274 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Vendor-prefixed mixins + + +// Border radius. +@mixin border-radius($ms-radius: 5px) { + border-radius: $ms-radius; + background-clip: padding-box; +} + +// Drop shadow. +@mixin drop-shadow($ms-x-offset: 0, $ms-y-offset: 0, $ms-blur: 5px, $ms-spread: 0, $ms-alpha: 0.4) { + box-shadow: $ms-x-offset $ms-y-offset $ms-blur $ms-spread rgba(0, 0, 0, $ms-alpha); +} + +// Background gradient. +@mixin background-gradient($ms-origin: left, $ms-start: #000, $ms-start-location: 0%, $ms-stop: #FFF, $ms-stop-location: 100%) { + background-color: $ms-start; + background-image: linear-gradient($ms-origin, $ms-start $ms-start-location, $ms-stop $ms-stop-location); +} + +// Rotation. +@mixin rotate($ms-deg) { + transform: rotate($ms-deg); +} + +// Reset button styles. +@mixin button-reset() { + background: none; + border: 0; + cursor: pointer; +} + +@mixin resetAnimation() { + -webkit-animation: none; + -moz-animation: none; + -ms-animation: none; + -o-animation: none; + animation: none; +} + +@mixin resetBackface() { + backface-visibility: visible; +} + +@mixin resetBackground() { + background: 0; + background-clip: border-box; + background-origin: padding-box; +} + +@mixin resetBorder() { + border: 0; + border-collapse: separate; + border-image: none; + border-radius: 0; + border-spacing: 0; +} + +@mixin resetBoxShadow() { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +@mixin resetBoxSizing() { + box-sizing: content-box; +} + +@mixin resetColumns() { + columns: auto; + column-count: auto; + column-fill: balance; + column-gap: normal; + column-rule: medium none currentColor; + column-rule-color: currentColor; + column-rule-style: none; + column-rule-width: none; + column-span: 1; + column-width: auto; +} + + +// Fonts and Typography Resets +@mixin resetFont() { + font: normal; + font-family: inherit; + font-size: normal; + font-style: normal; + font-variant: normal; + font-weight: normal; +} + +@mixin resetTextStyling() { + text-align: inherit; + text-align-last: auto; + text-decoration: none; + text-decoration-color: inherit; + text-decoration-line: none; + text-decoration-style: solid; + text-indent: 0; + text-shadow: none; + text-transform: none; + line-height: normal; + letter-spacing: normal; + word-spacing: normal; +} + + +// Box Model Resets +@mixin resetPadding() { + padding: 0; +} + +@mixin resetMargins() { + margin: 0; +} + +@mixin resetOverflow() { + overflow: visible; +} + +@mixin resetMax() { + max-height: none; + max-width: none; +} + +@mixin resetMin() { + min-height: 0; + min-width: 0; +} + +@mixin resetPositioning() { + bottom: auto; + left: auto; + top: auto; + left: auto; +} + +@mixin resetFloat() { + float: none; +} + +@mixin resetHeight($ms-useMaxMin: false) { + height: auto; + @if $ms-useMaxMin == true { + min-height: 0; + max-height: 0; + } +} + +@mixin resetWidth($ms-useMaxMin: false) { + width: auto; + @if $ms-useMaxMin == true { + min-width: 0; + max-width: 0; + } +} + +@mixin resetPosition() { + position: static; +} + +@mixin resetPerspective() { + -webkit-perspective: none; + -webkit-perspective-origin: 50% 50%; + perspective: none; + perspective-origin: 50% 50%; + +} + +@mixin resetTransition() { + -webkit-transition: none; + transition: none; +} + +@mixin resetListStyle() { + list-style: none; +} + +@mixin resetTransform() { + -ms-transform: none; + -webkit-transform: none; + -webkit-transform-style: flat; + transform: none; + transform-style: flat; +} + +@mixin resetOutline() { + outline: 0; +} + +@mixin resetPageBreak() { + page-break-after: auto; + page-break-before: auto; + page-break-inside: auto; +} + +@mixin resetDisplay() { + display: block; +} + +@mixin resetVerticalAlign() { + vertical-align: baseline; +} + +// Prevents the text within a block element from wrapping to second line. +@mixin noWrap() { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// Input placehoder +@mixin input-placeholder { + &::-webkit-input-placeholder, + &::-moz-placeholder, + &:-moz-placeholder, + &:-ms-input-placeholder { + @content; + } +} + +// Animations +@mixin animationName($ms-name) { + -webkit-animation-name: $ms-name; + -moz-animation-name: $ms-name; + -ms-animation-name: $ms-name; + -o-animation-name: $ms-name; + animation-name: $ms-name; +} + +@mixin animationDuration($ms-duration) { + -webkit-animation-duration: $ms-duration; + -moz-animation-duration: $ms-duration; + -ms-animation-duration: $ms-duration; + -o-animation-duration: $ms-duration; +} + +@mixin animationTiming($ms-function) { + -webkit-animation-timing-function: $ms-function; + -moz-animation-timing-function: $ms-function; + -ms-animation-timing-function: $ms-function; + -o-animation-timing-function: $ms-function; + animation-timing-function: $ms-function; +} + +@mixin animationFillMode($ms-mode) { + -webkit-animation-fill-mode: $ms-mode; + -moz-animation-fill-mode: $ms-mode; + -ms-animation-fill-mode: $ms-mode; + -o-animation-fill-mode: $ms-mode; + animation-fill-mode: $ms-mode; +} + +// Flexbox +@mixin flexBox() { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +@mixin alignItems($ms-mode) { + -webkit-box-align: $ms-mode; + -moz-box-align: $ms-mode; + -ms-flex-align: $ms-mode; + -webkit-align-items: $ms-mode; + align-items: $ms-mode; +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Responsive.Utilities.Variables.scss b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss new file mode 100644 index 000000000..ab234df8f --- /dev/null +++ b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss @@ -0,0 +1,697 @@ +// Small Screens +@mixin ms-u-sm12 { + width: 100%; +} +@mixin ms-u-sm11 { + width: 91.66666666666666%; +} +@mixin ms-u-sm10 { + width: 83.33333333333334%; +} +@mixin ms-u-sm9 { + width: 75%; +} +@mixin ms-u-sm8 { + width: 66.66666666666666%; +} +@mixin ms-u-sm7 { + width: 58.333333333333336%; +} +@mixin ms-u-sm6 { + width: 50%; +} +@mixin ms-u-sm5 { + width: 41.66666666666667%; +} +@mixin ms-u-sm4 { + width: 33.33333333333333%; +} +@mixin ms-u-sm3 { + width: 25%; +} +@mixin ms-u-sm2 { + width: 16.666666666666664%; +} +@mixin ms-u-sm1 { + width: 8.333333333333332%; +} +@mixin ms-u-smPull12 { + right: 100%; +} +@mixin ms-u-smPull11 { + right: 91.66666666666666%; +} +@mixin ms-u-smPull10 { + right: 83.33333333333334%; +} +@mixin ms-u-smPull9 { + right: 75%; +} +@mixin ms-u-smPull8 { + right: 66.66666666666666%; +} +@mixin ms-u-smPull7 { + right: 58.333333333333336%; +} +@mixin ms-u-smPull6 { + right: 50%; +} +@mixin ms-u-smPull5 { + right: 41.66666666666667%; +} +@mixin ms-u-smPull4 { + right: 33.33333333333333%; +} +@mixin ms-u-smPull3 { + right: 25%; +} +@mixin ms-u-smPull2 { + right: 16.666666666666664%; +} +@mixin ms-u-smPull1 { + right: 8.333333333333332%; +} +@mixin ms-u-smPull0 { + right: auto; +} +@mixin ms-u-smPush12 { + left: 100%; +} +@mixin ms-u-smPush11 { + left: 91.66666666666666%; +} +@mixin ms-u-smPush10 { + left: 83.33333333333334%; +} +@mixin ms-u-smPush9 { + left: 75%; +} +@mixin ms-u-smPush8 { + left: 66.66666666666666%; +} +@mixin ms-u-smPush7 { + left: 58.333333333333336%; +} +@mixin ms-u-smPush6 { + left: 50%; +} +@mixin ms-u-smPush5 { + left: 41.66666666666667%; +} +@mixin ms-u-smPush4 { + left: 33.33333333333333%; +} +@mixin ms-u-smPush3 { + left: 25%; +} +@mixin ms-u-smPush2 { + left: 16.666666666666664%; +} +@mixin ms-u-smPush1 { + left: 8.333333333333332%; +} +@mixin ms-u-smPush0 { + left: auto; +} + +// Medium Screens +@mixin ms-u-md12 { +width: 100%; +} +@mixin ms-u-md11 { +width: 91.66666666666666%; +} +@mixin ms-u-md10 { +width: 83.33333333333334%; +} +@mixin ms-u-md9 { +width: 75%; +} +@mixin ms-u-md8 { +width: 66.66666666666666%; +} +@mixin ms-u-md7 { +width: 58.333333333333336%; +} +@mixin ms-u-md6 { +width: 50%; +} +@mixin ms-u-md5 { +width: 41.66666666666667%; +} +@mixin ms-u-md4 { +width: 33.33333333333333%; +} +@mixin ms-u-md3 { +width: 25%; +} +@mixin ms-u-md2 { +width: 16.666666666666664%; +} +@mixin ms-u-md1 { +width: 8.333333333333332%; +} +@mixin ms-u-mdPull12 { +right: 100%; +} +@mixin ms-u-mdPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-mdPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-mdPull9 { +right: 75%; +} +@mixin ms-u-mdPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-mdPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-mdPull6 { +right: 50%; +} +@mixin ms-u-mdPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-mdPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-mdPull3 { +right: 25%; +} +@mixin ms-u-mdPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-mdPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-mdPull0 { +right: auto; +} +@mixin ms-u-mdPush12 { +left: 100%; +} +@mixin ms-u-mdPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-mdPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-mdPush9 { +left: 75%; +} +@mixin ms-u-mdPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-mdPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-mdPush6 { +left: 50%; +} +@mixin ms-u-mdPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-mdPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-mdPush3 { +left: 25%; +} +@mixin ms-u-mdPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-mdPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-mdPush0 { +left: auto; +} + +// Large screens +@mixin ms-u-lg12 { +width: 100%; +} +@mixin ms-u-lg11 { +width: 91.66666666666666%; +} +@mixin ms-u-lg10 { +width: 83.33333333333334%; +} +@mixin ms-u-lg9 { +width: 75%; +} +@mixin ms-u-lg8 { +width: 66.66666666666666%; +} +@mixin ms-u-lg7 { +width: 58.333333333333336%; +} +@mixin ms-u-lg6 { +width: 50%; +} +@mixin ms-u-lg5 { +width: 41.66666666666667%; +} +@mixin ms-u-lg4 { +width: 33.33333333333333%; +} +@mixin ms-u-lg3 { +width: 25%; +} +@mixin ms-u-lg2 { +width: 16.666666666666664%; +} +@mixin ms-u-lg1 { +width: 8.333333333333332%; +} +@mixin ms-u-lgPull12 { +right: 100%; +} +@mixin ms-u-lgPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-lgPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-lgPull9 { +right: 75%; +} +@mixin ms-u-lgPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-lgPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-lgPull6 { +right: 50%; +} +@mixin ms-u-lgPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-lgPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-lgPull3 { +right: 25%; +} +@mixin ms-u-lgPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-lgPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-lgPull0 { +right: auto; +} +@mixin ms-u-lgPush12 { +left: 100%; +} +@mixin ms-u-lgPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-lgPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-lgPush9 { +left: 75%; +} +@mixin ms-u-lgPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-lgPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-lgPush6 { +left: 50%; +} +@mixin ms-u-lgPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-lgPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-lgPush3 { +left: 25%; +} +@mixin ms-u-lgPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-lgPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-lgPush0 { +left: auto; +} + +// Extra Large Screens +@mixin ms-u-xl12 { +width: 100%; +} +@mixin ms-u-xl11 { +width: 91.66666666666666%; +} +@mixin ms-u-xl10 { +width: 83.33333333333334%; +} +@mixin ms-u-xl9 { +width: 75%; +} +@mixin ms-u-xl8 { +width: 66.66666666666666%; +} +@mixin ms-u-xl7 { +width: 58.333333333333336%; +} +@mixin ms-u-xl6 { +width: 50%; +} +@mixin ms-u-xl5 { +width: 41.66666666666667%; +} +@mixin ms-u-xl4 { +width: 33.33333333333333%; +} +@mixin ms-u-xl3 { +width: 25%; +} +@mixin ms-u-xl2 { +width: 16.666666666666664%; +} +@mixin ms-u-xl1 { +width: 8.333333333333332%; +} +@mixin ms-u-xlPull12 { +right: 100%; +} +@mixin ms-u-xlPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-xlPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-xlPull9 { +right: 75%; +} +@mixin ms-u-xlPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-xlPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-xlPull6 { +right: 50%; +} +@mixin ms-u-xlPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-xlPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-xlPull3 { +right: 25%; +} +@mixin ms-u-xlPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-xlPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-xlPull0 { +right: auto; +} +@mixin ms-u-xlPush12 { +left: 100%; +} +@mixin ms-u-xlPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-xlPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-xlPush9 { +left: 75%; +} +@mixin ms-u-xlPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-xlPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-xlPush6 { +left: 50%; +} +@mixin ms-u-xlPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-xlPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-xlPush3 { +left: 25%; +} +@mixin ms-u-xlPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-xlPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-xlPush0 { +left: auto; +} + + +// XXL Screens +@mixin ms-u-xxl12 { +width: 100%; +} +@mixin ms-u-xxl11 { +width: 91.66666666666666%; +} +@mixin ms-u-xxl10 { +width: 83.33333333333334%; +} +@mixin ms-u-xxl9 { +width: 75%; +} +@mixin ms-u-xxl8 { +width: 66.66666666666666%; +} +@mixin ms-u-xxl7 { +width: 58.333333333333336%; +} +@mixin ms-u-xxl6 { +width: 50%; +} +@mixin ms-u-xxl5 { +width: 41.66666666666667%; +} +@mixin ms-u-xxl4 { +width: 33.33333333333333%; +} +@mixin ms-u-xxl3 { +width: 25%; +} +@mixin ms-u-xxl2 { +width: 16.666666666666664%; +} +@mixin ms-u-xxl1 { +width: 8.333333333333332%; +} +@mixin ms-u-xxlPull12 { +right: 100%; +} +@mixin ms-u-xxlPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-xxlPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-xxlPull9 { +right: 75%; +} +@mixin ms-u-xxlPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-xxlPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-xxlPull6 { +right: 50%; +} +@mixin ms-u-xxlPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-xxlPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-xxlPull3 { +right: 25%; +} +@mixin ms-u-xxlPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-xxlPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-xxlPull0 { +right: auto; +} +@mixin ms-u-xxlPush12 { +left: 100%; +} +@mixin ms-u-xxlPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-xxlPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-xxlPush9 { +left: 75%; +} +@mixin ms-u-xxlPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-xxlPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-xxlPush6 { +left: 50%; +} +@mixin ms-u-xxlPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-xxlPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-xxlPush3 { +left: 25%; +} +@mixin ms-u-xxlPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-xxlPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-xxlPush0 { +left: auto; +} + +// Extra extra extra large screens + +@mixin ms-u-xxxl12 { +width: 100%; +} +@mixin ms-u-xxxl11 { +width: 91.66666666666666%; +} +@mixin ms-u-xxxl10 { +width: 83.33333333333334%; +} +@mixin ms-u-xxxl9 { +width: 75%; +} +@mixin ms-u-xxxl8 { +width: 66.66666666666666%; +} +@mixin ms-u-xxxl7 { +width: 58.333333333333336%; +} +@mixin ms-u-xxxl6 { +width: 50%; +} +@mixin ms-u-xxxl5 { +width: 41.66666666666667%; +} +@mixin ms-u-xxxl4 { +width: 33.33333333333333%; +} +@mixin ms-u-xxxl3 { +width: 25%; +} +@mixin ms-u-xxxl2 { +width: 16.666666666666664%; +} +@mixin ms-u-xxxl1 { +width: 8.333333333333332%; +} +@mixin ms-u-xxxlPull12 { +right: 100%; +} +@mixin ms-u-xxxlPull11 { +right: 91.66666666666666%; +} +@mixin ms-u-xxxlPull10 { +right: 83.33333333333334%; +} +@mixin ms-u-xxxlPull9 { +right: 75%; +} +@mixin ms-u-xxxlPull8 { +right: 66.66666666666666%; +} +@mixin ms-u-xxxlPull7 { +right: 58.333333333333336%; +} +@mixin ms-u-xxxlPull6 { +right: 50%; +} +@mixin ms-u-xxxlPull5 { +right: 41.66666666666667%; +} +@mixin ms-u-xxxlPull4 { +right: 33.33333333333333%; +} +@mixin ms-u-xxxlPull3 { +right: 25%; +} +@mixin ms-u-xxxlPull2 { +right: 16.666666666666664%; +} +@mixin ms-u-xxxlPull1 { +right: 8.333333333333332%; +} +@mixin ms-u-xxxlPull0 { +right: auto; +} +@mixin ms-u-xxxlPush12 { +left: 100%; +} +@mixin ms-u-xxxlPush11 { +left: 91.66666666666666%; +} +@mixin ms-u-xxxlPush10 { +left: 83.33333333333334%; +} +@mixin ms-u-xxxlPush9 { +left: 75%; +} +@mixin ms-u-xxxlPush8 { +left: 66.66666666666666%; +} +@mixin ms-u-xxxlPush7 { +left: 58.333333333333336%; +} +@mixin ms-u-xxxlPush6 { +left: 50%; +} +@mixin ms-u-xxxlPush5 { +left: 41.66666666666667%; +} +@mixin ms-u-xxxlPush4 { +left: 33.33333333333333%; +} +@mixin ms-u-xxxlPush3 { +left: 25%; +} +@mixin ms-u-xxxlPush2 { +left: 16.666666666666664%; +} +@mixin ms-u-xxxlPush1 { +left: 8.333333333333332%; +} +@mixin ms-u-xxxlPush0 { +left: auto; +} \ No newline at end of file diff --git a/dist/sass/_Fabric.Responsive.Variables.scss b/dist/sass/_Fabric.Responsive.Variables.scss new file mode 100644 index 000000000..e553f6a8f --- /dev/null +++ b/dist/sass/_Fabric.Responsive.Variables.scss @@ -0,0 +1,35 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric responsive variables + + +//== Variables for responsive breakpoints +// + +// Small screen / phone (320px - 479px) +$ms-screen-sm-min: 320px; + +// Medium screen / tablet (480px - 639px) +$ms-screen-md-min: 480px; + +// Large screen / tablet (640px - 1023px) +$ms-screen-lg-min: 640px; + +// Extra large screen / tablet (1024px - 1365px) +$ms-screen-xl-min: 1024px; + +// Extra extra large screen / desktop (1366px - 1919px) +$ms-screen-xxl-min: 1366px; + +// Extra extra extra large screen / desktop (1366px and up) +$ms-screen-xxxl-min: 1920px; + +// Set all maxes since order matters in SASS +$ms-screen-sm-max: ($ms-screen-md-min - 1); +$ms-screen-md-max: ($ms-screen-lg-min - 1); +$ms-screen-lg-max: ($ms-screen-xl-min - 1); +$ms-screen-xl-max: ($ms-screen-xxl-min - 1); +$ms-screen-xxl-max: ($ms-screen-xxxl-min - 1); \ No newline at end of file diff --git a/dist/sass/_Fabric.Typography.Fonts.scss b/dist/sass/_Fabric.Typography.Fonts.scss new file mode 100644 index 000000000..1b56a88cb --- /dev/null +++ b/dist/sass/_Fabric.Typography.Fonts.scss @@ -0,0 +1,170 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Font definitions + + +// Font weights. +$ms-light: "Segoe UI Light"; +$ms-regular: "Segoe UI Regular"; +$ms-semibold: "Segoe UI Semibold"; +$ms-semilight: "Segoe UI Semilight"; + + +// Font paths. +$ms-font-directory: "https://appsforoffice.microsoft.com/fabric/fonts"; +$ms-font-path-arabic: "SegoeUI-Arabic"; +$ms-font-path-cyrillic: "SegoeUI-Cyrillic"; +$ms-font-path-easteuropean: "SegoeUI-EastEuropean"; +$ms-font-path-greek: "SegoeUI-Greek"; +$ms-font-path-hebrew: "SegoeUI-Hebrew"; +$ms-font-path-vietnamese: "SegoeUI-Vietnamese"; +$ms-font-path-westeuropean: "SegoeUI-WestEuropean"; + + +/* + Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license +*/ + +// Mixins to generate @font-face rules for unique languages. +@mixin SegoeUILight($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-light} #{$ms-font-language}"; + src: local("Segoe UI Light"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + } +} + +@mixin SegoeUIRegular($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-regular} #{$ms-font-language}"; + src: local("Segoe UI"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + } +} + +@mixin SegoeUISemilight($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-semilight} #{$ms-font-language}"; + src: local("Segoe UI Semilight"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + } +} + +@mixin SegoeUISemibold($ms-font-language, $ms-font-path) { + @font-face { + font-family: "#{$ms-semibold} #{$ms-font-language}"; + src: local("Segoe UI Semibold"), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff2') format('woff2'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff') format('woff'), + url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; + } +} + +// Mixins to generate language-specific font faces. +@mixin SegoeUIArabicLight { + @include SegoeUILight("Arabic", $ms-font-path-arabic); +} +@mixin SegoeUIArabicRegular { + @include SegoeUIRegular("Arabic", $ms-font-path-arabic); +} +@mixin SegoeUIArabicSemibold { + @include SegoeUISemibold("Arabic", $ms-font-path-arabic); +} +@mixin SegoeUIArabicSemilight { + @include SegoeUISemilight("Arabic", $ms-font-path-arabic); +} + +@mixin SegoeUICyrillicLight { + @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic); +} +@mixin SegoeUICyrillicRegular { + @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic); +} +@mixin SegoeUICyrillicSemibold { + @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic); +} +@mixin SegoeUICyrillicSemilight { + @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic); +} + +@mixin SegoeUIEastEuropeanLight { + @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean); +} +@mixin SegoeUIEastEuropeanRegular { + @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean); +} +@mixin SegoeUIEastEuropeanSemibold { + @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean); +} +@mixin SegoeUIEastEuropeanSemilight { + @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean); +} + +@mixin SegoeUIGreekLight { + @include SegoeUILight("Greek", $ms-font-path-greek); +} +@mixin SegoeUIGreekRegular { + @include SegoeUIRegular("Greek", $ms-font-path-greek); +} +@mixin SegoeUIGreekSemibold { + @include SegoeUISemibold("Greek", $ms-font-path-greek); +} +@mixin SegoeUIGreekSemilight { + @include SegoeUISemilight("Greek", $ms-font-path-greek); +} + +@mixin SegoeUIHebrewLight { + @include SegoeUILight("Hebrew", $ms-font-path-hebrew); +} +@mixin SegoeUIHebrewRegular { + @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew); +} +@mixin SegoeUIHebrewSemibold { + @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew); +} +@mixin SegoeUIHebrewSemilight { + @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew); +} + +@mixin SegoeUIVietnameseLight { + @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese); +} +@mixin SegoeUIVietnameseRegular { + @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese); +} +@mixin SegoeUIVietnameseSemibold { + @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese); +} +@mixin SegoeUIVietnameseSemilight { + @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese); +} + +@mixin SegoeUIWestEuropeanLight { + @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean); +} +@mixin SegoeUIWestEuropeanRegular { + @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean); +} +@mixin SegoeUIWestEuropeanSemibold { + @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean); +} +@mixin SegoeUIWestEuropeanSemilight { + @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean); +} diff --git a/dist/sass/_Fabric.Typography.Language.Overrides.scss b/dist/sass/_Fabric.Typography.Language.Overrides.scss new file mode 100644 index 000000000..c47014a67 --- /dev/null +++ b/dist/sass/_Fabric.Typography.Language.Overrides.scss @@ -0,0 +1,118 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Language override definitions + + +// A mixin that overrides all of the font classes for languages that +// use system fonts. A single font-family is used for all weights. +@mixin language-override-system-fonts($ms-lang-code, $ms-font-family) { + *[lang="#{$ms-lang-code}"] { + .ms-font-mi, + .ms-font-xs, + .ms-font-s, + .ms-font-s-plus, + .ms-font-m, + .ms-font-m-plus, + .ms-font-l, + .ms-font-xl, + .ms-font-xxl, + .ms-font-su, + .ms-fontWeight-light, + .ms-fontWeight-light-hover:hover, + .ms-fontWeight-semilight, + .ms-fontWeight-semilight-hover:hover, + .ms-fontWeight-regular, + .ms-fontWeight-regular-hover:hover, + .ms-fontWeight-semibold, + .ms-fontWeight-semibold-hover:hover { + font-family: $ms-font-family; + } + } +} + +// Base font stack. +$ms-font-system-base: 'Segoe UI', Tahoma, Arial, sans-serif; + +// Variables for each of the non-distributed (native) font stacks. +$ms-font-stack-japanese: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-system-base; +$ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base; +$ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base; +$ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base; +$ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base; + + +//== Web fonts +// +// A mixin that overrides all of the font classes for languages that use +// distributed web fonts. These reference different fonts for each weight. +@mixin language-override-web-fonts($ms-lang-code, $ms-font-family-light, $ms-font-family-semilight, $ms-font-family-regular, $ms-font-family-semibold) { + *[lang="#{$ms-lang-code}"] { + .ms-font-xl, + .ms-font-xxl, + .ms-fontWeight-light, + .ms-fontWeight-light-hover:hover { + font-family: $ms-font-family-light; + } + .ms-font-l, + .ms-font-su, + .ms-fontWeight-semilight, + .ms-fontWeight-semilight-hover:hover { + font-family: $ms-font-family-semilight; + } + .ms-fontWeight-regular, + .ms-fontweight-regular-hover:hover { + font-family: $ms-font-family-regular; + } + .ms-font-mi, + .ms-fontWeight-semibold, + .ms-fontWeight-semibold-hover:hover { + font-family: $ms-font-family-semibold; + } + } +} + +// Variables for each of the web font stacks. + +// East European +$ms-font-family-light-eastEuropean: 'Segoe UI Light EastEuropean', $ms-font-family-light; +$ms-font-family-semilight-eastEuropean: 'Segoe UI Semilight EastEuropean', $ms-font-family-semilight; +$ms-font-family-regular-eastEuropean: 'Segoe UI Regular EastEuropean', $ms-font-family-regular; +$ms-font-family-semibold-eastEuropean: 'Segoe UI Semibold EastEuropean', $ms-font-family-semibold; + +// Cyrillic +$ms-font-family-light-cyrillic: 'Segoe UI Light Cyrillic', $ms-font-family-light; +$ms-font-family-semilight-cyrillic: 'Segoe UI Semilight Cyrillic', $ms-font-family-semilight; +$ms-font-family-regular-cyrillic: 'Segoe UI Regular Cyrillic', $ms-font-family-regular; +$ms-font-family-semibold-cyrillic: 'Segoe UI Semibold Cyrillic', $ms-font-family-semibold; + +// Leelawadee +$ms-font-family-semilight-leelawadee: 'Leelawadee UI Semilight', 'Kmer UI', $ms-font-family-semilight; +$ms-font-family-regular-leelawadee: 'Leelawadee UI Regular', 'Kmer UI', $ms-font-family-regular; +$ms-font-family-semibold-leelawadee: 'Leelawadee UI Bold', 'Kmer UI', $ms-font-family-semibold; + +// Arabic +$ms-font-family-light-arabic: 'Segoe UI Light Arabic', $ms-font-family-light; +$ms-font-family-semilight-arabic: 'Segoe UI Semilight Arabic', $ms-font-family-semilight; +$ms-font-family-regular-arabic: 'Segoe UI Regular Arabic', $ms-font-family-regular; +$ms-font-family-semibold-arabic: 'Segoe UI Semibold Arabic', $ms-font-family-semibold; + +// Greek +$ms-font-family-light-greek: 'Segoe UI Light Greek', $ms-font-family-light; +$ms-font-family-semilight-greek: 'Segoe UI Semilight Greek', $ms-font-family-semilight; +$ms-font-family-regular-greek: 'Segoe UI Regular Greek', $ms-font-family-regular; +$ms-font-family-semibold-greek: 'Segoe UI Semibold Greek', $ms-font-family-semibold; + +// Hebrew +$ms-font-family-light-hebrew: 'Segoe UI Light Hebrew', $ms-font-family-light; +$ms-font-family-semilight-hebrew: 'Segoe UI Semilight Hebrew', $ms-font-family-semilight; +$ms-font-family-regular-hebrew: 'Segoe UI Regular Hebrew', $ms-font-family-regular; +$ms-font-family-semibold-hebrew: 'Segoe UI Semibold Hebrew', $ms-font-family-semibold; + +// Vietnamese +$ms-font-family-light-vietnamese: 'Segoe UI Light Vietnamese', $ms-font-family-light; +$ms-font-family-semilight-vietnamese: 'Segoe UI Semilight Vietnamese', $ms-font-family-semilight; +$ms-font-family-regular-vietnamese: 'Segoe UI Regular Vietnamese', $ms-font-family-regular; +$ms-font-family-semibold-vietnamese: 'Segoe UI Semibold Vietnamese', $ms-font-family-semibold; \ No newline at end of file diff --git a/dist/sass/_Fabric.Typography.Variables.scss b/dist/sass/_Fabric.Typography.Variables.scss new file mode 100644 index 000000000..71a556581 --- /dev/null +++ b/dist/sass/_Fabric.Typography.Variables.scss @@ -0,0 +1,27 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Typography variables + + +$ms-font-family-light: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif; +$ms-font-family-regular: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; +$ms-font-family-semilight: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif; +$ms-font-family-semibold: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Arial, sans-serif; + + +//== Type sizes +// + +$ms-font-size-su: 42px; +$ms-font-size-xxl: 28px; +$ms-font-size-xl: 21px; +$ms-font-size-l: 17px; +$ms-font-size-m-plus: 15px; +$ms-font-size-m: 14px; +$ms-font-size-s-plus: 13px; +$ms-font-size-s: 12px; +$ms-font-size-xs: 11px; +$ms-font-size-mi: 10px; diff --git a/dist/sass/_Fabric.Typography.scss b/dist/sass/_Fabric.Typography.scss new file mode 100644 index 000000000..0881937e9 --- /dev/null +++ b/dist/sass/_Fabric.Typography.scss @@ -0,0 +1,353 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Typographic mixins arranged with appropriate size and family combinations. +@import 'Fabric.Typography.Variables'; + +// Super Styles (LIMITED USE) +// Weights: Light +@mixin ms-font-su { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-light; + font-size: $ms-font-size-su; + font-weight: normal; +} +// No touch class for Super + +// Extra-Extra-Large +// Allowed weights: Light, SemiLight +@mixin ms-font-xxl { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-light; + font-size: $ms-font-size-xxl; + font-weight: normal; +} + +// Extra-Large Styles +// Allowed weights: Light, SemiLight +@mixin ms-font-xl { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-light; + font-size: $ms-font-size-xl; + font-weight: normal; +} + +// Large Styles +// Allowed weights: SemiLight, Regular, Semibold +@mixin ms-font-l { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-semilight; + font-size: $ms-font-size-l; + font-weight: normal; +} + +// Medium Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +@mixin ms-font-m-plus { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-m-plus; + font-weight: normal; +} + +// Medium Styles +// Allowed weights: SemiLight, Regular, Semibold +@mixin ms-font-m { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-m; + font-weight: normal; +} + +// Small Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +@mixin ms-font-s-plus { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-s-plus; + font-weight: normal; +} + +// Small Styles +// Allowed weights: SemiLight, Regular, Semibold +@mixin ms-font-s { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-s; + font-weight: normal; +} + +// XS Styles +// Allowed weights: SemiLight, Regular, Semibold +@mixin ms-font-xs { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-regular; + font-size: $ms-font-size-xs; + font-weight: normal; +} + +// Micro Styles (LIMITED USE) +// Weights: Semibold +@mixin ms-font-mi { + color: $ms-color-neutralPrimary; + font-family: $ms-font-family-semibold; + font-size: $ms-font-size-mi; + font-weight: normal; +} + +//== Helper classes & mixins +// +// Helper mixins to override default type values + +// Font weights +@mixin ms-fontWeight-light{ + font-family: $ms-font-family-light; +} + +@mixin ms-fontWeight-semilight{ + font-family: $ms-font-family-semilight; +} + +@mixin ms-fontWeight-regular { + font-family: $ms-font-family-regular; +} + +@mixin ms-fontWeight-semibold { + font-family: $ms-font-family-semibold; +} + +// Font sizes +@mixin ms-fontSize-su { + font-size: $ms-font-size-su; +} + +@mixin ms-fontSize-xxl { + font-size: $ms-font-size-xxl; +} + +@mixin ms-fontSize-xl { + font-size: $ms-font-size-xl; +} + +@mixin ms-fontSize-l { + font-size: $ms-font-size-l; +} + +@mixin ms-fontSize-mPlus { + font-size: $ms-font-size-m-plus; +} + +@mixin ms-fontSize-m { + font-size: $ms-font-size-m; +} + +@mixin ms-fontSize-sPlus { + font-size: $ms-font-size-s-plus; +} + +@mixin ms-fontSize-s { + font-size: $ms-font-size-s; +} + +@mixin ms-fontSize-xs { + font-size: $ms-font-size-xs; +} + +@mixin ms-fontSize-mi { + font-size: $ms-font-size-mi; +} + +// Theme colors +@mixin ms-fontColor-themeDarker { + color: $ms-color-themeDarker; +} + +@mixin ms-fontColor-themeDark { + color: $ms-color-themeDark; +} + +@mixin ms-fontColor-themeDarkAlt { + color: $ms-color-themeDarkAlt; +} + +@mixin ms-fontColor-themePrimary { + color: $ms-color-themePrimary; +} + +@mixin ms-fontColor-themeSecondary { + color: $ms-color-themeSecondary; +} + +@mixin ms-fontColor-themeTertiary { + color: $ms-color-themeTertiary; +} + +@mixin ms-fontColor-themeLight { + color: $ms-color-themeLight; +} + +@mixin ms-fontColor-themeLighter { + color: $ms-color-themeLighter; +} + +@mixin ms-fontColor-themeLighterAlt { + color: $ms-color-themeLighterAlt; +} + + +// Neutral colors +@mixin ms-fontColor-black { + color: $ms-color-black; +} + +@mixin ms-fontColor-neutralDark { + color: $ms-color-neutralDark; +} + +@mixin ms-fontColor-neutralPrimary { + color: $ms-color-neutralPrimary; +} + +@mixin ms-fontColor-neutralSecondary { + color: $ms-color-neutralSecondary; +} + +@mixin ms-fontColor-neutralSecondaryAlt { + color: $ms-color-neutralSecondaryAlt; +} + +@mixin ms-fontColor-neutralTertiary { + color: $ms-color-neutralTertiary; +} + +@mixin ms-fontColor-neutralTertiaryAlt { + color: $ms-color-neutralTertiaryAlt; +} + +@mixin ms-fontColor-neutralLight { + color: $ms-color-neutralLight; +} + +@mixin ms-fontColor-neutralLighter { + color: $ms-color-neutralLighter; +} + +@mixin ms-fontColor-neutralLighterAlt { + color: $ms-color-neutralLighterAlt; +} + +@mixin ms-fontColor-white { + color: $ms-color-white; +} + +// Brand and accent colors +@mixin ms-fontColor-yellow { + color: $ms-color-yellow; +} + +@mixin ms-fontColor-yellowLight { + color: $ms-color-yellowLight; +} + +@mixin ms-fontColor-orange { + color: $ms-color-orange; +} + +@mixin ms-fontColor-orangeLight { + color: $ms-color-orangeLight; +} + +@mixin ms-fontColor-orangeLighter { + color: $ms-color-orangeLighter; +} + +@mixin ms-fontColor-redDark { + color: $ms-color-redDark; +} + +@mixin ms-fontColor-red { + color: $ms-color-red; +} + +@mixin ms-fontColor-magentaDark { + color: $ms-color-magentaDark; +} + +@mixin ms-fontColor-magenta { + color: $ms-color-magenta; +} + +@mixin ms-fontColor-magentaLight { + color: $ms-color-magentaLight; +} + +@mixin ms-fontColor-purpleDark { + color: $ms-color-purpleDark; +} + +@mixin ms-fontColor-purple { + color: $ms-color-purple; +} + +@mixin ms-fontColor-purpleLight { + color: $ms-color-purpleLight; +} + +@mixin ms-fontColor-blueDark { + color: $ms-color-blueDark; +} + +@mixin ms-fontColor-blueMid { + color: $ms-color-blueMid; +} + +@mixin ms-fontColor-blue { + color: $ms-color-blue; +} + +@mixin ms-fontColor-blueLight { + color: $ms-color-blueLight; +} + +@mixin ms-fontColor-tealDark { + color: $ms-color-tealDark; +} + +@mixin ms-fontColor-teal { + color: $ms-color-teal; +} + +@mixin ms-fontColor-tealLight { + color: $ms-color-tealLight; +} + +@mixin ms-fontColor-greenDark { + color: $ms-color-greenDark; +} + +@mixin ms-fontColor-green { + color: $ms-color-green; +} + +@mixin ms-fontColor-greenLight { + color: $ms-color-greenLight; +} + +// Message colors +@mixin ms-fontColor-info { + color: $ms-color-info; +} + +@mixin ms-fontColor-success { + color: $ms-color-success; +} + +@mixin ms-fontColor-alert { + color: $ms-color-alert; +} + +@mixin ms-fontColor-error { + color: $ms-color-error; +} diff --git a/dist/sass/_Fabric.Utilities.scss b/dist/sass/_Fabric.Utilities.scss new file mode 100644 index 000000000..ced677042 --- /dev/null +++ b/dist/sass/_Fabric.Utilities.scss @@ -0,0 +1,36 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Utility classes and mixins used throughout Fabric. + +@import "Fabric.Mixins"; + +// The best box is a border box. +@mixin ms-u-borderBox { + box-sizing: border-box; +} + +// Ensures the block expands to the full height to enclose its floated childen. + +@mixin ms-u-clearfix { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + line-height: 0; + } + &:after { + clear: both; + } +} + +// Basic border-box, margin, and padding reset. +@mixin ms-u-normalize { + @include ms-u-borderBox; + @include resetMargins; + @include resetPadding; + @include resetBoxShadow; +} diff --git a/dist/sass/_Fabric.ZIndex.Variables.scss b/dist/sass/_Fabric.ZIndex.Variables.scss new file mode 100644 index 000000000..4855d7cd0 --- /dev/null +++ b/dist/sass/_Fabric.ZIndex.Variables.scss @@ -0,0 +1,32 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Z-Index Layeringz + + +// Base Layer Variables +$ms-zIndex-0: 0; +$ms-zIndex-1: 100; +$ms-zIndex-2: 200; +$ms-zIndex-3: 300; +$ms-zIndex-4: 400; +$ms-zIndex-5: 500; + +// Base Layer Modifier Variables +$ms-zIndex-back: 0; +$ms-zIndex-middle: 5; +$ms-zIndex-front: 10; + + +// Fabric Component Base Layer Assignments + +$ms-zIndex-Callout: $ms-zIndex-1; +$ms-zIndex-ContextualMenu: $ms-zIndex-1; +$ms-zIndex-Overlay: $ms-zIndex-2; +$ms-zIndex-Panel: $ms-zIndex-3; +$ms-zIndex-DatePicker: $ms-zIndex-3; +$ms-zIndex-Dialog: $ms-zIndex-3; +$ms-zIndex-PeoplePicker: $ms-zIndex-3; +$ms-zIndex-Dropdown: $ms-zIndex-4; diff --git a/dist/sass/_Office.Color.Variables.scss b/dist/sass/_Office.Color.Variables.scss new file mode 100644 index 000000000..d8df9a710 --- /dev/null +++ b/dist/sass/_Office.Color.Variables.scss @@ -0,0 +1,34 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Office Core Color Variables + + +//== Theme/Accent colors +// +// Colors used in Office 15 color pickers +// These are deprecated as of Fabric 0.6 + +$ms-color-officeAccent1: #FFFFFF; +$ms-color-officeAccent2: #000000; +$ms-color-officeAccent3: #E7E6E5; +$ms-color-officeAccent4: #44546A; +$ms-color-officeAccent5: #5B9BD5; +$ms-color-officeAccent6: #ED7D31; +$ms-color-officeAccent7: #A5A5A5; +$ms-color-officeAccent8: #FFC001; +$ms-color-officeAccent9: #4472C4; +$ms-color-officeAccent10: #70AD47; + +$ms-color-presence-available: #5dd255; +$ms-color-presence-away: #ffd200; +$ms-color-presence-blocked-background: #dedede; +$ms-color-presence-blocked-line: #c72d25; +$ms-color-presence-busy-stripe-light: #e57a79; +$ms-color-presence-busy-stripe-dark: #d00e0d; +$ms-color-presence-busy-average: #d93b3b; +$ms-color-presence-dnd-background: #c72d25; +$ms-color-presence-dnd-line: #ffffff; +$ms-color-presence-offline: #b6cfd8;