From 55befbd4e8aeca8b27b6bd0cf1c5f5c5e0db411f Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 12:51:50 -0800 Subject: [PATCH 01/35] Use single quotes everywhere --- src/sass/Fabric.Animations.Output.scss | 2 +- src/sass/Fabric.Animations.RTL.Output.scss | 4 +- src/sass/Fabric.Base.Output.scss | 2 +- src/sass/Fabric.Color.Mixins.Output.scss | 2 +- src/sass/Fabric.Grid.Output.scss | 2 +- src/sass/Fabric.Icons.Font.Output.scss | 2 +- .../Fabric.Responsive.Utilities.Output.scss | 4 +- ...bric.Typography.Fonts.Extended.Output.scss | 6 +- src/sass/Fabric.Typography.Fonts.Output.scss | 2 +- ....Typography.Language.Overrides.Output.scss | 2 +- src/sass/Fabric.Utilities.Output.scss | 2 +- src/sass/Fabric.scss | 2 +- src/sass/_Fabric.Brand.Icons.scss | 4 +- src/sass/_Fabric.Common.scss | 30 +- src/sass/_Fabric.Icons.scss | 1416 ++++++++--------- src/sass/_Fabric.Typography.Fonts.scss | 90 +- ..._Fabric.Typography.Language.Overrides.scss | 2 +- src/sass/_Fabric.Utilities.scss | 4 +- 18 files changed, 789 insertions(+), 789 deletions(-) diff --git a/src/sass/Fabric.Animations.Output.scss b/src/sass/Fabric.Animations.Output.scss index a9dbb889d..29159e3ea 100644 --- a/src/sass/Fabric.Animations.Output.scss +++ b/src/sass/Fabric.Animations.Output.scss @@ -9,7 +9,7 @@ // 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"; +@import 'Fabric.Animations'; // slideRightIn10 .ms-u-slideRightIn10 { diff --git a/src/sass/Fabric.Animations.RTL.Output.scss b/src/sass/Fabric.Animations.RTL.Output.scss index 8ad465a5b..49cdb7477 100644 --- a/src/sass/Fabric.Animations.RTL.Output.scss +++ b/src/sass/Fabric.Animations.RTL.Output.scss @@ -6,8 +6,8 @@ // RTL overrides for Fabric Animations -@import "Fabric.Animations.Output"; -@import "Fabric.Animations.RTL"; +@import 'Fabric.Animations.Output'; +@import 'Fabric.Animations.RTL'; // slideRightIn10 .ms-u-slideRightIn10 { diff --git a/src/sass/Fabric.Base.Output.scss b/src/sass/Fabric.Base.Output.scss index 78fd3ffd5..76f045909 100644 --- a/src/sass/Fabric.Base.Output.scss +++ b/src/sass/Fabric.Base.Output.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Wrapper component to set base typography. -@import "Fabric.Base"; +@import 'Fabric.Base'; //== Wrapper/base component // diff --git a/src/sass/Fabric.Color.Mixins.Output.scss b/src/sass/Fabric.Color.Mixins.Output.scss index a5a6120b7..d544a5bfb 100644 --- a/src/sass/Fabric.Color.Mixins.Output.scss +++ b/src/sass/Fabric.Color.Mixins.Output.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Fabric Core Color Mixins -@import "Fabric.Color.Mixins"; +@import 'Fabric.Color.Mixins'; //== Background colors // diff --git a/src/sass/Fabric.Grid.Output.scss b/src/sass/Fabric.Grid.Output.scss index eabedd697..7301b570d 100644 --- a/src/sass/Fabric.Grid.Output.scss +++ b/src/sass/Fabric.Grid.Output.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Fluid 12-column grids for small, medium, and large devices -@import "Fabric.Grid"; +@import 'Fabric.Grid'; //== Grid container (same for all sizes) // diff --git a/src/sass/Fabric.Icons.Font.Output.scss b/src/sass/Fabric.Icons.Font.Output.scss index 6c48e16a2..3f6ed434a 100644 --- a/src/sass/Fabric.Icons.Font.Output.scss +++ b/src/sass/Fabric.Icons.Font.Output.scss @@ -9,7 +9,7 @@ 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"; +@import 'Fabric.Typography.Fonts'; @font-face { font-family: 'FabricMDL2Icons'; diff --git a/src/sass/Fabric.Responsive.Utilities.Output.scss b/src/sass/Fabric.Responsive.Utilities.Output.scss index a8a86abfa..6aae87598 100644 --- a/src/sass/Fabric.Responsive.Utilities.Output.scss +++ b/src/sass/Fabric.Responsive.Utilities.Output.scss @@ -5,8 +5,8 @@ // -------------------------------------------------- // Responsive utilities based on defined variables, component visibility, // and size for different displays. -@import "./Fabric.Responsive.Variables"; -@import "./Fabric.Responsive.Utilities.Variables"; +@import './Fabric.Responsive.Variables'; +@import './Fabric.Responsive.Utilities.Variables'; //== Responsive visiblity classes // diff --git a/src/sass/Fabric.Typography.Fonts.Extended.Output.scss b/src/sass/Fabric.Typography.Fonts.Extended.Output.scss index 3505874b5..5f8ee3421 100644 --- a/src/sass/Fabric.Typography.Fonts.Extended.Output.scss +++ b/src/sass/Fabric.Typography.Fonts.Extended.Output.scss @@ -6,7 +6,7 @@ // Additional @font-face rules for the Leelawadee font. @font-face { - font-family: "Leelawadee UI"; + font-family: 'Leelawadee UI'; src: local('Leelawadee UI Bold'), url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.woff2') format('woff2'), url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.woff') format('woff'), @@ -16,7 +16,7 @@ } @font-face { - font-family: "Leelawadee UI"; + font-family: 'Leelawadee UI'; src: local('Leelawadee UI Regular'), url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.woff2') format('woff2'), url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.woff') format('woff'), @@ -26,7 +26,7 @@ } @font-face { - font-family: "Leelawadee UI"; + font-family: 'Leelawadee UI'; src: local('Leelawadee UI Semilight'), url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.woff2') format('woff2'), url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.woff') format('woff'), diff --git a/src/sass/Fabric.Typography.Fonts.Output.scss b/src/sass/Fabric.Typography.Fonts.Output.scss index 3a6688a38..107568430 100644 --- a/src/sass/Fabric.Typography.Fonts.Output.scss +++ b/src/sass/Fabric.Typography.Fonts.Output.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Font definitions -@import "Fabric.Typography.Fonts"; +@import 'Fabric.Typography.Fonts'; @include SegoeUIWestEuropeanLight; @include SegoeUIWestEuropeanRegular; diff --git a/src/sass/Fabric.Typography.Language.Overrides.Output.scss b/src/sass/Fabric.Typography.Language.Overrides.Output.scss index 829d7aa24..4fd5a91a7 100644 --- a/src/sass/Fabric.Typography.Language.Overrides.Output.scss +++ b/src/sass/Fabric.Typography.Language.Overrides.Output.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Language override definitions using ISO 639-3 language codes -@import "./Fabric.Typography.Language.Overrides"; +@import './Fabric.Typography.Language.Overrides'; // Generate the override classes for non-distributed fonts. @include language-override-system-fonts(jpn, $ms-font-stack-japanese); diff --git a/src/sass/Fabric.Utilities.Output.scss b/src/sass/Fabric.Utilities.Output.scss index c131d7a2a..16ccda1f9 100644 --- a/src/sass/Fabric.Utilities.Output.scss +++ b/src/sass/Fabric.Utilities.Output.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Utility classes and mixins used throughout Fabric. -@import "Fabric.Utilities"; +@import 'Fabric.Utilities'; // The best box is a border box. .ms-u-borderBox, .ms-u-borderBox::before, .ms-u-borderBox::after { diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 61ab5f5ab..1626a5c30 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -9,7 +9,7 @@ @import './Fabric.Utilities.Output'; @import './Fabric.ZIndex.Variables'; @import './Fabric.Mixins'; -@import "./Fabric.Mixins.RTL"; +@import './Fabric.Mixins.RTL'; // Colors @import './Fabric.Color.Variables'; diff --git a/src/sass/_Fabric.Brand.Icons.scss b/src/sass/_Fabric.Brand.Icons.scss index 012e3efbe..f36fd6683 100644 --- a/src/sass/_Fabric.Brand.Icons.scss +++ b/src/sass/_Fabric.Brand.Icons.scss @@ -1,8 +1,8 @@ // Images Path for Product Icons -$productImagesPath: "https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png"; +$productImagesPath: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png'; // Images Path for Document Icons -$documentImagesPath: "https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png"; +$documentImagesPath: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png'; // Icon Names $productIconList: access excel infopath office onedrive onenote outlook powerpoint project sharepoint visio word; diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index 011af6683..25ab66e62 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -1,16 +1,16 @@ -@import "./Fabric.Animations"; -@import "./Fabric.Color.Mixins"; -@import "./Fabric.Color.Variables"; -@import "./Fabric.Grid"; -@import "./Fabric.Icons"; -@import "./Fabric.i18n"; -@import "./Fabric.Mixins"; -@import "./Fabric.Mixins.RTL"; +@import './Fabric.Animations'; +@import './Fabric.Color.Mixins'; +@import './Fabric.Color.Variables'; +@import './Fabric.Grid'; +@import './Fabric.Icons'; +@import './Fabric.i18n'; +@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.Typography.Mixins"; -@import "./Fabric.Utilities"; -@import "./Fabric.ZIndex.Variables"; +@import './Fabric.Responsive.Variables'; +@import './Fabric.Typography'; +@import './Fabric.Typography.Fonts'; +@import './Fabric.Typography.Variables'; +@import './Fabric.Typography.Mixins'; +@import './Fabric.Utilities'; +@import './Fabric.ZIndex.Variables'; diff --git a/src/sass/_Fabric.Icons.scss b/src/sass/_Fabric.Icons.scss index 7b06e5957..24278d336 100644 --- a/src/sass/_Fabric.Icons.scss +++ b/src/sass/_Fabric.Icons.scss @@ -69,711 +69,711 @@ $ms-icon-size-l: 20px; @mixin ms-Icon--l { font-size: $ms-icon-size-l; } // Modifiers: Each of the icons. -@mixin ms-Icon--DecreaseIndentLegacy { content: "\E290"; } -@mixin ms-Icon--IncreaseIndentLegacy { content: "\E291"; } -@mixin ms-Icon--GlobalNavButton { content: "\E700"; } -@mixin ms-Icon--InternetSharing { content: "\E704"; } -@mixin ms-Icon--Brightness { content: "\E706"; } -@mixin ms-Icon--MapPin { content: "\E707"; } -@mixin ms-Icon--Airplane { content: "\E709"; } -@mixin ms-Icon--Tablet { content: "\E70A"; } -@mixin ms-Icon--QuickNote { content: "\E70B"; } -@mixin ms-Icon--ChevronDown { content: "\E70D"; } -@mixin ms-Icon--ChevronUp { content: "\E70E"; } -@mixin ms-Icon--Edit { content: "\E70F"; } -@mixin ms-Icon--Add { content: "\E710"; } -@mixin ms-Icon--Cancel { content: "\E711"; } -@mixin ms-Icon--More { content: "\E712"; } -@mixin ms-Icon--Settings { content: "\E713"; } -@mixin ms-Icon--Video { content: "\E714"; } -@mixin ms-Icon--Mail { content: "\E715"; } -@mixin ms-Icon--People { content: "\E716"; } -@mixin ms-Icon--Phone { content: "\E717"; } -@mixin ms-Icon--Pin { content: "\E718"; } -@mixin ms-Icon--Shop { content: "\E719"; } -@mixin ms-Icon--Link { content: "\E71B"; } -@mixin ms-Icon--Filter { content: "\E71C"; } -@mixin ms-Icon--Zoom { content: "\E71E"; } -@mixin ms-Icon--ZoomOut { content: "\E71F"; } -@mixin ms-Icon--Microphone { content: "\E720"; } -@mixin ms-Icon--Search { content: "\E721"; } -@mixin ms-Icon--Camera { content: "\E722"; } -@mixin ms-Icon--Attach { content: "\E723"; } -@mixin ms-Icon--Send { content: "\E724"; } -@mixin ms-Icon--FavoriteList { content: "\E728"; } -@mixin ms-Icon--PageSolid { content: "\E729"; } -@mixin ms-Icon--Forward { content: "\E72A"; } -@mixin ms-Icon--Back { content: "\E72B"; } -@mixin ms-Icon--Refresh { content: "\E72C"; } -@mixin ms-Icon--Share { content: "\E72D"; } -@mixin ms-Icon--Lock { content: "\E72E"; } -@mixin ms-Icon--EMI { content: "\E731"; } -@mixin ms-Icon--MiniLink { content: "\E732"; } -@mixin ms-Icon--Blocked { content: "\E733"; } -@mixin ms-Icon--FavoriteStar { content: "\E734"; } -@mixin ms-Icon--FavoriteStarFill { content: "\E735"; } -@mixin ms-Icon--ReadingMode { content: "\E736"; } -@mixin ms-Icon--Remove { content: "\E738"; } -@mixin ms-Icon--Checkbox { content: "\E739"; } -@mixin ms-Icon--CheckboxComposite { content: "\E73A"; } -@mixin ms-Icon--CheckboxIndeterminate { content: "\E73C"; } -@mixin ms-Icon--CheckMark { content: "\E73E"; } -@mixin ms-Icon--BackToWindow { content: "\E73F"; } -@mixin ms-Icon--FullScreen { content: "\E740"; } -@mixin ms-Icon--Print { content: "\E749"; } -@mixin ms-Icon--Up { content: "\E74A"; } -@mixin ms-Icon--Down { content: "\E74B"; } -@mixin ms-Icon--Delete { content: "\E74D"; } -@mixin ms-Icon--Save { content: "\E74E"; } -@mixin ms-Icon--Sad { content: "\E757"; } -@mixin ms-Icon--SIPMove { content: "\E759"; } -@mixin ms-Icon--EraseTool { content: "\E75C"; } -@mixin ms-Icon--GripperTool { content: "\E75E"; } -@mixin ms-Icon--Dialpad { content: "\E75F"; } -@mixin ms-Icon--PageLeft { content: "\E760"; } -@mixin ms-Icon--PageRight { content: "\E761"; } -@mixin ms-Icon--MultiSelect { content: "\E762"; } -@mixin ms-Icon--Play { content: "\E768"; } -@mixin ms-Icon--Pause { content: "\E769"; } -@mixin ms-Icon--ChevronLeft { content: "\E76B"; } -@mixin ms-Icon--ChevronRight { content: "\E76C"; } -@mixin ms-Icon--Emoji2 { content: "\E76E"; } -@mixin ms-Icon--System { content: "\E770"; } -@mixin ms-Icon--Globe { content: "\E774"; } -@mixin ms-Icon--ContactInfo { content: "\E779"; } -@mixin ms-Icon--Unpin { content: "\E77A"; } -@mixin ms-Icon--Contact { content: "\E77B"; } -@mixin ms-Icon--Memo { content: "\E77C"; } -@mixin ms-Icon--WindowsLogo { content: "\E782"; } -@mixin ms-Icon--Error { content: "\E783"; } -@mixin ms-Icon--Unlock { content: "\E785"; } -@mixin ms-Icon--Calendar { content: "\E787"; } -@mixin ms-Icon--Megaphone { content: "\E789"; } -@mixin ms-Icon--AutoEnhanceOn { content: "\E78D"; } -@mixin ms-Icon--AutoEnhanceOff { content: "\E78E"; } -@mixin ms-Icon--Color { content: "\E790"; } -@mixin ms-Icon--SaveAs { content: "\E792"; } -@mixin ms-Icon--Light { content: "\E793"; } -@mixin ms-Icon--Filters { content: "\E795"; } -@mixin ms-Icon--Contrast { content: "\E7A1"; } -@mixin ms-Icon--Redo { content: "\E7A6"; } -@mixin ms-Icon--Undo { content: "\E7A7"; } -@mixin ms-Icon--PhotoCollection { content: "\E7AA"; } -@mixin ms-Icon--Album { content: "\E7AB"; } -@mixin ms-Icon--Rotate { content: "\E7AD"; } -@mixin ms-Icon--PanoIndicator { content: "\E7B0"; } -@mixin ms-Icon--RedEye { content: "\E7B3"; } -@mixin ms-Icon--ThumbnailView { content: "\E7B6"; } -@mixin ms-Icon--Package { content: "\E7B8"; } -@mixin ms-Icon--Warning { content: "\E7BA"; } -@mixin ms-Icon--Financial { content: "\E7BB"; } -@mixin ms-Icon--ShoppingCart { content: "\E7BF"; } -@mixin ms-Icon--Train { content: "\E7C0"; } -@mixin ms-Icon--Flag { content: "\E7C1"; } -@mixin ms-Icon--Move { content: "\E7C2"; } -@mixin ms-Icon--Page { content: "\E7C3"; } -@mixin ms-Icon--TouchPointer { content: "\E7C9"; } -@mixin ms-Icon--Merge { content: "\E7D5"; } -@mixin ms-Icon--TurnRight { content: "\E7DB"; } -@mixin ms-Icon--Ferry { content: "\E7E3"; } -@mixin ms-Icon--Tab { content: "\E7E9"; } -@mixin ms-Icon--Admin { content: "\E7EF"; } -@mixin ms-Icon--TVMonitor { content: "\E7F4"; } -@mixin ms-Icon--Speakers { content: "\E7F5"; } -@mixin ms-Icon--Nav2DMapView { content: "\E800"; } -@mixin ms-Icon--Car { content: "\E804"; } -@mixin ms-Icon--EatDrink { content: "\E807"; } -@mixin ms-Icon--LocationCircle { content: "\E80E"; } -@mixin ms-Icon--Home { content: "\E80F"; } -@mixin ms-Icon--SwitcherStartEnd { content: "\E810"; } -@mixin ms-Icon--IncidentTriangle { content: "\E814"; } -@mixin ms-Icon--Touch { content: "\E815"; } -@mixin ms-Icon--MapDirections { content: "\E816"; } -@mixin ms-Icon--History { content: "\E81C"; } -@mixin ms-Icon--Location { content: "\E81D"; } -@mixin ms-Icon--Work { content: "\E821"; } -@mixin ms-Icon--Recent { content: "\E823"; } -@mixin ms-Icon--Hotel { content: "\E824"; } -@mixin ms-Icon--LocationDot { content: "\E827"; } -@mixin ms-Icon--News { content: "\E900"; } -@mixin ms-Icon--Chat { content: "\E901"; } -@mixin ms-Icon--Group { content: "\E902"; } -@mixin ms-Icon--View { content: "\E890"; } -@mixin ms-Icon--Clear { content: "\E894"; } -@mixin ms-Icon--Sync { content: "\E895"; } -@mixin ms-Icon--Download { content: "\E896"; } -@mixin ms-Icon--Help { content: "\E897"; } -@mixin ms-Icon--Upload { content: "\E898"; } -@mixin ms-Icon--Emoji { content: "\E899"; } -@mixin ms-Icon--MailForward { content: "\E89C"; } -@mixin ms-Icon--ClosePane { content: "\E89F"; } -@mixin ms-Icon--OpenPane { content: "\E8A0"; } -@mixin ms-Icon--PreviewLink { content: "\E8A1"; } -@mixin ms-Icon--ZoomIn { content: "\E8A3"; } -@mixin ms-Icon--Bookmarks { content: "\E8A4"; } -@mixin ms-Icon--Document { content: "\E8A5"; } -@mixin ms-Icon--ProtectedDocument { content: "\E8A6"; } -@mixin ms-Icon--OpenInNewWindow { content: "\E8A7"; } -@mixin ms-Icon--MailFill { content: "\E8A8"; } -@mixin ms-Icon--ViewAll { content: "\E8A9"; } -@mixin ms-Icon--Switch { content: "\E8AB"; } -@mixin ms-Icon--Rename { content: "\E8AC"; } -@mixin ms-Icon--Folder { content: "\E8B7"; } -@mixin ms-Icon--Picture { content: "\E8B9"; } -@mixin ms-Icon--ShowResults { content: "\E8BC"; } -@mixin ms-Icon--Message { content: "\E8BD"; } -@mixin ms-Icon--CalendarDay { content: "\E8BF"; } -@mixin ms-Icon--CalendarWeek { content: "\E8C0"; } -@mixin ms-Icon--MailReplyAll { content: "\E8C2"; } -@mixin ms-Icon--Read { content: "\E8C3"; } -@mixin ms-Icon--PaymentCard { content: "\E8C7"; } -@mixin ms-Icon--Copy { content: "\E8C8"; } -@mixin ms-Icon--Important { content: "\E8C9"; } -@mixin ms-Icon--MailReply { content: "\E8CA"; } -@mixin ms-Icon--Sort { content: "\E8CB"; } -@mixin ms-Icon--GotoToday { content: "\E8D1"; } -@mixin ms-Icon--Font { content: "\E8D2"; } -@mixin ms-Icon--FontColor { content: "\E8D3"; } -@mixin ms-Icon--FolderFill { content: "\E8D5"; } -@mixin ms-Icon--Permissions { content: "\E8D7"; } -@mixin ms-Icon--DisableUpdates { content: "\E8D8"; } -@mixin ms-Icon--Unfavorite { content: "\E8D9"; } -@mixin ms-Icon--Italic { content: "\E8DB"; } -@mixin ms-Icon--Underline { content: "\E8DC"; } -@mixin ms-Icon--Bold { content: "\E8DD"; } -@mixin ms-Icon--MoveToFolder { content: "\E8DE"; } -@mixin ms-Icon--Dislike { content: "\E8E0"; } -@mixin ms-Icon--Like { content: "\E8E1"; } -@mixin ms-Icon--AlignRight { content: "\E8E2"; } -@mixin ms-Icon--AlignCenter { content: "\E8E3"; } -@mixin ms-Icon--AlignLeft { content: "\E8E4"; } -@mixin ms-Icon--OpenFile { content: "\E8E5"; } -@mixin ms-Icon--FontDecrease { content: "\E8E7"; } -@mixin ms-Icon--FontIncrease { content: "\E8E8"; } -@mixin ms-Icon--FontSize { content: "\E8E9"; } -@mixin ms-Icon--CellPhone { content: "\E8EA"; } -@mixin ms-Icon--Tag { content: "\E8EC"; } -@mixin ms-Icon--Library { content: "\E8F1"; } -@mixin ms-Icon--PostUpdate { content: "\E8F3"; } -@mixin ms-Icon--NewFolder { content: "\E8F4"; } -@mixin ms-Icon--CalendarReply { content: "\E8F5"; } -@mixin ms-Icon--UnsyncFolder { content: "\E8F6"; } -@mixin ms-Icon--SyncFolder { content: "\E8F7"; } -@mixin ms-Icon--BlockContact { content: "\E8F8"; } -@mixin ms-Icon--AddFriend { content: "\E8FA"; } -@mixin ms-Icon--BulletedList { content: "\E8FD"; } -@mixin ms-Icon--Preview { content: "\E8FF"; } -@mixin ms-Icon--DockLeft { content: "\E90C"; } -@mixin ms-Icon--DockRight { content: "\E90D"; } -@mixin ms-Icon--Repair { content: "\E90F"; } -@mixin ms-Icon--Accounts { content: "\E910"; } -@mixin ms-Icon--RadioBullet { content: "\E915"; } -@mixin ms-Icon--Stopwatch { content: "\E916"; } -@mixin ms-Icon--Clock { content: "\E917"; } -@mixin ms-Icon--WorldClock { content: "\E918"; } -@mixin ms-Icon--AlarmClock { content: "\E919"; } -@mixin ms-Icon--Hospital { content: "\E91D"; } -@mixin ms-Icon--Timer { content: "\E91E"; } -@mixin ms-Icon--FullCircleMask { content: "\E91F"; } -@mixin ms-Icon--LocationFill { content: "\E920"; } -@mixin ms-Icon--ChromeMinimize { content: "\E921"; } -@mixin ms-Icon--Annotation { content: "\E924"; } -@mixin ms-Icon--ChromeClose { content: "\E8BB"; } -@mixin ms-Icon--Accept { content: "\E8FB"; } -@mixin ms-Icon--Fingerprint { content: "\E928"; } -@mixin ms-Icon--Handwriting { content: "\E929"; } -@mixin ms-Icon--StackIndicator { content: "\E7FF"; } -@mixin ms-Icon--Completed { content: "\E930"; } -@mixin ms-Icon--Label { content: "\E932"; } -@mixin ms-Icon--FlickDown { content: "\E935"; } -@mixin ms-Icon--FlickUp { content: "\E936"; } -@mixin ms-Icon--FlickLeft { content: "\E937"; } -@mixin ms-Icon--FlickRight { content: "\E938"; } -@mixin ms-Icon--MusicInCollection { content: "\E940"; } -@mixin ms-Icon--OneDrive { content: "\E941"; } -@mixin ms-Icon--CompassNW { content: "\E942"; } -@mixin ms-Icon--Code { content: "\E943"; } -@mixin ms-Icon--LightningBolt { content: "\E945"; } -@mixin ms-Icon--Info { content: "\E946"; } -@mixin ms-Icon--CalculatorAddition { content: "\E948"; } -@mixin ms-Icon--CalculatorSubtract { content: "\E949"; } -@mixin ms-Icon--PrintfaxPrinterFile { content: "\E956"; } -@mixin ms-Icon--Headset { content: "\E95B"; } -@mixin ms-Icon--Health { content: "\E95E"; } -@mixin ms-Icon--ChevronUpSmall { content: "\E96D"; } -@mixin ms-Icon--ChevronDownSmall { content: "\E96E"; } -@mixin ms-Icon--ChevronLeftSmall { content: "\E96F"; } -@mixin ms-Icon--ChevronRightSmall { content: "\E970"; } -@mixin ms-Icon--ChevronUpMed { content: "\E971"; } -@mixin ms-Icon--ChevronDownMed { content: "\E972"; } -@mixin ms-Icon--ChevronLeftMed { content: "\E973"; } -@mixin ms-Icon--ChevronRightMed { content: "\E974"; } -@mixin ms-Icon--Dictionary { content: "\E82D"; } -@mixin ms-Icon--ChromeBack { content: "\E830"; } -@mixin ms-Icon--PC1 { content: "\E977"; } -@mixin ms-Icon--PresenceChickletVideo { content: "\E979"; } -@mixin ms-Icon--Reply { content: "\E97A"; } -@mixin ms-Icon--DoubleChevronLeftMed { content: "\E991"; } -@mixin ms-Icon--Volume0 { content: "\E992"; } -@mixin ms-Icon--Volume1 { content: "\E993"; } -@mixin ms-Icon--Volume2 { content: "\E994"; } -@mixin ms-Icon--Volume3 { content: "\E995"; } -@mixin ms-Icon--CaretHollow { content: "\E817"; } -@mixin ms-Icon--CaretSolid { content: "\E818"; } -@mixin ms-Icon--FolderOpen { content: "\E838"; } -@mixin ms-Icon--Pinned { content: "\E840"; } -@mixin ms-Icon--PinnedFill { content: "\E842"; } -@mixin ms-Icon--Chart { content: "\E999"; } -@mixin ms-Icon--BidiLtr { content: "\E9AA"; } -@mixin ms-Icon--BidiRtl { content: "\E9AB"; } -@mixin ms-Icon--RevToggleKey { content: "\E845"; } -@mixin ms-Icon--RightDoubleQuote { content: "\E9B1"; } -@mixin ms-Icon--Sunny { content: "\E9BD"; } -@mixin ms-Icon--CloudWeather { content: "\E9BE"; } -@mixin ms-Icon--Cloudy { content: "\E9BF"; } -@mixin ms-Icon--PartlyCloudyDay { content: "\E9C0"; } -@mixin ms-Icon--PartlyCloudyNight { content: "\E9C1"; } -@mixin ms-Icon--ClearNight { content: "\E9C2"; } -@mixin ms-Icon--RainShowersDay { content: "\E9C3"; } -@mixin ms-Icon--Rain { content: "\E9C4"; } -@mixin ms-Icon--Thunderstorms { content: "\E9C6"; } -@mixin ms-Icon--RainSnow { content: "\E9C7"; } -@mixin ms-Icon--Snow { content: "\E9C8"; } -@mixin ms-Icon--BlowingSnow { content: "\E9C9"; } -@mixin ms-Icon--Frigid { content: "\E9CA"; } -@mixin ms-Icon--Fog { content: "\E9CB"; } -@mixin ms-Icon--Squalls { content: "\E9CC"; } -@mixin ms-Icon--Duststorm { content: "\E9CD"; } -@mixin ms-Icon--Precipitation { content: "\E9CF"; } -@mixin ms-Icon--Ringer { content: "\EA8F"; } -@mixin ms-Icon--PDF { content: "\EA90"; } -@mixin ms-Icon--SortLines { content: "\E9D0"; } -@mixin ms-Icon--Ribbon { content: "\E9D1"; } -@mixin ms-Icon--CheckList { content: "\E9D5"; } -@mixin ms-Icon--Generate { content: "\E9DA"; } -@mixin ms-Icon--Equalizer { content: "\E9E9"; } -@mixin ms-Icon--BarChartHorizontal { content: "\E9EB"; } -@mixin ms-Icon--Freezing { content: "\E9EF"; } -@mixin ms-Icon--SnowShowerDay { content: "\E9FD"; } -@mixin ms-Icon--HailDay { content: "\EA00"; } -@mixin ms-Icon--WorkFlow { content: "\EA01"; } -@mixin ms-Icon--StoreLogoMed { content: "\EA04"; } -@mixin ms-Icon--RainShowersNight { content: "\EA0F"; } -@mixin ms-Icon--SnowShowerNight { content: "\EA11"; } -@mixin ms-Icon--HailNight { content: "\EA13"; } -@mixin ms-Icon--Info2 { content: "\EA1F"; } -@mixin ms-Icon--StoreLogo { content: "\EA96"; } -@mixin ms-Icon--MultiSelectMirrored { content: "\EA98"; } -@mixin ms-Icon--Broom { content: "\EA99"; } -@mixin ms-Icon--MusicInCollectionFill { content: "\EA36"; } -@mixin ms-Icon--List { content: "\EA37"; } -@mixin ms-Icon--Asterisk { content: "\EA38"; } -@mixin ms-Icon--ErrorBadge { content: "\EA39"; } -@mixin ms-Icon--CircleRing { content: "\EA3A"; } -@mixin ms-Icon--CircleFill { content: "\EA3B"; } -@mixin ms-Icon--BookmarksMirrored { content: "\EA41"; } -@mixin ms-Icon--BulletedListMirrored { content: "\EA42"; } -@mixin ms-Icon--CaretHollowMirrored { content: "\EA45"; } -@mixin ms-Icon--CaretSolidMirrored { content: "\EA46"; } -@mixin ms-Icon--ChromeBackMirrored { content: "\EA47"; } -@mixin ms-Icon--ClosePaneMirrored { content: "\EA49"; } -@mixin ms-Icon--DockLeftMirrored { content: "\EA4C"; } -@mixin ms-Icon--DoubleChevronLeftMedMirrored { content: "\EA4D"; } -@mixin ms-Icon--HelpMirrored { content: "\EA51"; } -@mixin ms-Icon--ListMirrored { content: "\EA55"; } -@mixin ms-Icon--MailForwardMirrored { content: "\EA56"; } -@mixin ms-Icon--MailReplyMirrored { content: "\EA57"; } -@mixin ms-Icon--MailReplyAllMirrored { content: "\EA58"; } -@mixin ms-Icon--OpenPaneMirrored { content: "\EA5B"; } -@mixin ms-Icon--SendMirrored { content: "\EA63"; } -@mixin ms-Icon--ShowResultsMirrored { content: "\EA65"; } -@mixin ms-Icon--ThumbnailViewMirrored { content: "\EA67"; } -@mixin ms-Icon--Devices3 { content: "\EA6C"; } -@mixin ms-Icon--Lightbulb { content: "\EA80"; } -@mixin ms-Icon--StatusTriangle { content: "\EA82"; } -@mixin ms-Icon--VolumeDisabled { content: "\EA85"; } -@mixin ms-Icon--Puzzle { content: "\EA86"; } -@mixin ms-Icon--EmojiNeutral { content: "\EA87"; } -@mixin ms-Icon--EmojiDisappointed { content: "\EA88"; } -@mixin ms-Icon--HomeSolid { content: "\EA8A"; } -@mixin ms-Icon--Cocktails { content: "\EA9D"; } -@mixin ms-Icon--Articles { content: "\EAC1"; } -@mixin ms-Icon--Cycling { content: "\EAC7"; } -@mixin ms-Icon--DietPlanNotebook { content: "\EAC8"; } -@mixin ms-Icon--Pill { content: "\EACB"; } -@mixin ms-Icon--Running { content: "\EADA"; } -@mixin ms-Icon--Weights { content: "\EADB"; } -@mixin ms-Icon--BarChart4 { content: "\EAE7"; } -@mixin ms-Icon--CirclePlus { content: "\EAEE"; } -@mixin ms-Icon--Coffee { content: "\EAEF"; } -@mixin ms-Icon--Cotton { content: "\EAF3"; } -@mixin ms-Icon--Market { content: "\EAFC"; } -@mixin ms-Icon--Money { content: "\EAFD"; } -@mixin ms-Icon--PieDouble { content: "\EB04"; } -@mixin ms-Icon--RemoveFilter { content: "\EB08"; } -@mixin ms-Icon--StockDown { content: "\EB0F"; } -@mixin ms-Icon--StockUp { content: "\EB11"; } -@mixin ms-Icon--Cricket { content: "\EB1E"; } -@mixin ms-Icon--Golf { content: "\EB1F"; } -@mixin ms-Icon--Baseball { content: "\EB20"; } -@mixin ms-Icon--Soccer { content: "\EB21"; } -@mixin ms-Icon--MoreSports { content: "\EB22"; } -@mixin ms-Icon--AutoRacing { content: "\EB24"; } -@mixin ms-Icon--CollegeHoops { content: "\EB25"; } -@mixin ms-Icon--CollegeFootball { content: "\EB26"; } -@mixin ms-Icon--ProFootball { content: "\EB27"; } -@mixin ms-Icon--ProHockey { content: "\EB28"; } -@mixin ms-Icon--Rugby { content: "\EB2D"; } -@mixin ms-Icon--Tennis { content: "\EB33"; } -@mixin ms-Icon--Arrivals { content: "\EB34"; } -@mixin ms-Icon--Design { content: "\EB3C"; } -@mixin ms-Icon--Website { content: "\EB41"; } -@mixin ms-Icon--Drop { content: "\EB42"; } -@mixin ms-Icon--Snow { content: "\EB46"; } -@mixin ms-Icon--BusSolid { content: "\EB47"; } -@mixin ms-Icon--FerrySolid { content: "\EB48"; } -@mixin ms-Icon--TrainSolid { content: "\EB4D"; } -@mixin ms-Icon--Heart { content: "\EB51"; } -@mixin ms-Icon--HeartFill { content: "\EB52"; } -@mixin ms-Icon--Ticket { content: "\EB54"; } -@mixin ms-Icon--Devices4 { content: "\EB66"; } -@mixin ms-Icon--AzureLogo { content: "\EB6A"; } -@mixin ms-Icon--BingLogo { content: "\EB6B"; } -@mixin ms-Icon--MSNLogo { content: "\EB6C"; } -@mixin ms-Icon--OutlookLogo { content: "\EB6D"; } -@mixin ms-Icon--OfficeLogo { content: "\EB6E"; } -@mixin ms-Icon--SkypeLogo { content: "\EB6F"; } -@mixin ms-Icon--Door { content: "\EB75"; } -@mixin ms-Icon--EditMirrored { content: "\EB7E"; } -@mixin ms-Icon--GiftCard { content: "\EB8E"; } -@mixin ms-Icon--DoubleBookmark { content: "\EB8F"; } -@mixin ms-Icon--StatusErrorFull { content: "\EB90"; } -@mixin ms-Icon--Certificate { content: "\EB95"; } -@mixin ms-Icon--Photo2 { content: "\EB9F"; } -@mixin ms-Icon--CloudDownload { content: "\EBD3"; } -@mixin ms-Icon--WindDirection { content: "\EBE6"; } -@mixin ms-Icon--Family { content: "\EBDA"; } -@mixin ms-Icon--CSS { content: "\EBEF"; } -@mixin ms-Icon--JS { content: "\EBF0"; } -@mixin ms-Icon--ReminderGroup { content: "\EBF8"; } -@mixin ms-Icon--Section { content: "\EC0C"; } -@mixin ms-Icon--OneNoteLogo { content: "\EC0D"; } -@mixin ms-Icon--ToggleFilled { content: "\EC11"; } -@mixin ms-Icon--ToggleBorder { content: "\EC12"; } -@mixin ms-Icon--SliderThumb { content: "\EC13"; } -@mixin ms-Icon--ToggleThumb { content: "\EC14"; } -@mixin ms-Icon--Documentation { content: "\EC17"; } -@mixin ms-Icon--Badge { content: "\EC1B"; } -@mixin ms-Icon--Giftbox { content: "\EC1F"; } -@mixin ms-Icon--ExcelLogo { content: "\EC28"; } -@mixin ms-Icon--WordLogo { content: "\EC29"; } -@mixin ms-Icon--PowerPointLogo { content: "\EC2A"; } -@mixin ms-Icon--Cafe { content: "\EC32"; } -@mixin ms-Icon--SpeedHigh { content: "\EC4A"; } -@mixin ms-Icon--MusicNote { content: "\EC4F"; } -@mixin ms-Icon--EdgeLogo { content: "\EC60"; } -@mixin ms-Icon--CompletedSolid { content: "\EC61"; } -@mixin ms-Icon--AlbumRemove { content: "\EC62"; } -@mixin ms-Icon--MessageFill { content: "\EC70"; } -@mixin ms-Icon--TabletSelected { content: "\EC74"; } -@mixin ms-Icon--MobileSelected { content: "\EC75"; } -@mixin ms-Icon--LaptopSelected { content: "\EC76"; } -@mixin ms-Icon--TVMonitorSelected { content: "\EC77"; } -@mixin ms-Icon--DeveloperTools { content: "\EC7A"; } -@mixin ms-Icon--InsertTextBox { content: "\EC7D"; } -@mixin ms-Icon--LowerBrightness { content: "\EC8A"; } -@mixin ms-Icon--CloudUpload { content: "\EC8E"; } -@mixin ms-Icon--DateTime { content: "\EC92"; } -@mixin ms-Icon--Event { content: "\ECA3"; } -@mixin ms-Icon--Cake { content: "\ECA4"; } -@mixin ms-Icon--Tiles { content: "\ECA5"; } -@mixin ms-Icon--Org { content: "\ECA6"; } -@mixin ms-Icon--PartyLeader { content: "\ECA7"; } -@mixin ms-Icon--DRM { content: "\ECA8"; } -@mixin ms-Icon--CloudAdd { content: "\ECA9"; } -@mixin ms-Icon--AppIconDefault { content: "\ECAA"; } -@mixin ms-Icon--Photo2Add { content: "\ECAB"; } -@mixin ms-Icon--Photo2Remove { content: "\ECAC"; } -@mixin ms-Icon--POI { content: "\ECAF"; } -@mixin ms-Icon--FacebookLogo { content: "\ECB3"; } -@mixin ms-Icon--AddTo { content: "\ECC8"; } -@mixin ms-Icon--RadioBtnOn { content: "\ECCB"; } -@mixin ms-Icon--Embed { content: "\ECCE"; } -@mixin ms-Icon--VideoSolid { content: "\EA0C"; } -@mixin ms-Icon--Teamwork { content: "\EA12"; } -@mixin ms-Icon--PeopleAdd { content: "\EA15"; } -@mixin ms-Icon--Glasses { content: "\EA16"; } -@mixin ms-Icon--DateTime2 { content: "\EA17"; } -@mixin ms-Icon--Shield { content: "\EA18"; } -@mixin ms-Icon--Header1 { content: "\EA19"; } -@mixin ms-Icon--PageAdd { content: "\EA1A"; } -@mixin ms-Icon--NumberedList { content: "\EA1C"; } -@mixin ms-Icon--PowerBILogo { content: "\EA1E"; } -@mixin ms-Icon--Product { content: "\ECDC"; } -@mixin ms-Icon--Blocked2 { content: "\ECE4"; } -@mixin ms-Icon--FangBody { content: "\ECEB"; } -@mixin ms-Icon--Glimmer { content: "\ECF4"; } -@mixin ms-Icon--ChatInviteFriend { content: "\ECFE"; } -@mixin ms-Icon--SharepointLogo { content: "\ED18"; } -@mixin ms-Icon--YammerLogo { content: "\ED19"; } -@mixin ms-Icon--Hide { content: "\ED1A"; } -@mixin ms-Icon--ReturnToSession { content: "\ED24"; } -@mixin ms-Icon--OpenFolderHorizontal { content: "\ED25"; } -@mixin ms-Icon--CalendarMirrored { content: "\ED28"; } -@mixin ms-Icon--SwayLogo { content: "\ED29"; } -@mixin ms-Icon--OutOfOffice { content: "\ED34"; } -@mixin ms-Icon--Trophy { content: "\ED3F"; } -@mixin ms-Icon--ReopenPages { content: "\ED50"; } -@mixin ms-Icon--AADLogo { content: "\ED68"; } -@mixin ms-Icon--AccessLogo { content: "\ED69"; } -@mixin ms-Icon--AdminALogo { content: "\ED6A"; } -@mixin ms-Icon--AdminCLogo { content: "\ED6B"; } -@mixin ms-Icon--AdminDLogo { content: "\ED6C"; } -@mixin ms-Icon--AdminELogo { content: "\ED6D"; } -@mixin ms-Icon--AdminLLogo { content: "\ED6E"; } -@mixin ms-Icon--AdminMLogo { content: "\ED6F"; } -@mixin ms-Icon--AdminOLogo { content: "\ED70"; } -@mixin ms-Icon--AdminPLogo { content: "\ED71"; } -@mixin ms-Icon--AdminSLogo { content: "\ED72"; } -@mixin ms-Icon--AdminYLogo { content: "\ED73"; } -@mixin ms-Icon--AlchemyLogo { content: "\ED74"; } -@mixin ms-Icon--BoxLogo { content: "\ED75"; } -@mixin ms-Icon--DelveLogo { content: "\ED76"; } -@mixin ms-Icon--DropboxLogo { content: "\ED77"; } -@mixin ms-Icon--ExchangeLogo { content: "\ED78"; } -@mixin ms-Icon--LyncLogo { content: "\ED79"; } -@mixin ms-Icon--OfficeVideoLogo { content: "\ED7A"; } -@mixin ms-Icon--ParatureLogo { content: "\ED7B"; } -@mixin ms-Icon--SocialListeningLogo { content: "\ED7C"; } -@mixin ms-Icon--VisioLogo { content: "\ED7D"; } -@mixin ms-Icon--Balloons { content: "\ED7E"; } -@mixin ms-Icon--Cat { content: "\ED7F"; } -@mixin ms-Icon--MailAlert { content: "\ED80"; } -@mixin ms-Icon--MailCheck { content: "\ED81"; } -@mixin ms-Icon--MailLowImportance { content: "\ED82"; } -@mixin ms-Icon--MailPause { content: "\ED83"; } -@mixin ms-Icon--MailRepeat { content: "\ED84"; } -@mixin ms-Icon--SecurityGroup { content: "\ED85"; } -@mixin ms-Icon--Table { content: "\ED86"; } -@mixin ms-Icon--VoicemailForward { content: "\ED87"; } -@mixin ms-Icon--VoicemailReply { content: "\ED88"; } -@mixin ms-Icon--Waffle { content: "\ED89"; } -@mixin ms-Icon--RemoveEvent { content: "\ED8A"; } -@mixin ms-Icon--EventInfo { content: "\ED8B"; } -@mixin ms-Icon--ForwardEvent { content: "\ED8C"; } -@mixin ms-Icon--WipePhone { content: "\ED8D"; } -@mixin ms-Icon--AddOnlineMeeting { content: "\ED8E"; } -@mixin ms-Icon--JoinOnlineMeeting { content: "\ED8F"; } -@mixin ms-Icon--RemoveLink { content: "\ED90"; } -@mixin ms-Icon--PeopleBlock { content: "\ED91"; } -@mixin ms-Icon--PeopleRepeat { content: "\ED92"; } -@mixin ms-Icon--PeopleAlert { content: "\ED93"; } -@mixin ms-Icon--PeoplePause { content: "\ED94"; } -@mixin ms-Icon--TransferCall { content: "\ED95"; } -@mixin ms-Icon--AddPhone { content: "\ED96"; } -@mixin ms-Icon--UnknownCall { content: "\ED97"; } -@mixin ms-Icon--NoteReply { content: "\ED98"; } -@mixin ms-Icon--NoteForward { content: "\ED99"; } -@mixin ms-Icon--NotePinned { content: "\ED9A"; } -@mixin ms-Icon--RemoveOccurrence { content: "\ED9B"; } -@mixin ms-Icon--Timeline { content: "\ED9C"; } -@mixin ms-Icon--EditNote { content: "\ED9D"; } -@mixin ms-Icon--CircleHalfFull { content: "\ED9E"; } -@mixin ms-Icon--Room { content: "\ED9F"; } -@mixin ms-Icon--Unsubscribe { content: "\EDA0"; } -@mixin ms-Icon--Subscribe { content: "\EDA1"; } -@mixin ms-Icon--RecurringTask { content: "\EDB2"; } -@mixin ms-Icon--TaskManager { content: "\EDB7"; } -@mixin ms-Icon--TaskManagerMirrored { content: "\EDB8"; } -@mixin ms-Icon--Combine { content: "\EDBB"; } -@mixin ms-Icon--Split { content: "\EDBC"; } -@mixin ms-Icon--DoubleChevronUp { content: "\EDBD"; } -@mixin ms-Icon--DoubleChevronLeft { content: "\EDBE"; } -@mixin ms-Icon--DoubleChevronRight { content: "\EDBF"; } -@mixin ms-Icon--Ascending { content: "\EDC0"; } -@mixin ms-Icon--Descending { content: "\EDC1"; } -@mixin ms-Icon--TextBox { content: "\EDC2"; } -@mixin ms-Icon--TextField { content: "\EDC3"; } -@mixin ms-Icon--NumberField { content: "\EDC4"; } -@mixin ms-Icon--Dropdown { content: "\EDC5"; } -@mixin ms-Icon--BookingsLogo { content: "\EDC7"; } -@mixin ms-Icon--ClassNotebookLogo { content: "\EDC8"; } -@mixin ms-Icon--CollabsDBLogo { content: "\EDC9"; } -@mixin ms-Icon--DelveAnalyticsLogo { content: "\EDCA"; } -@mixin ms-Icon--DocsLogo { content: "\EDCB"; } -@mixin ms-Icon--Dynamics365Logo { content: "\EDCC"; } -@mixin ms-Icon--DynamicSMBLogo { content: "\EDCD"; } -@mixin ms-Icon--OfficeAssistantLogo { content: "\EDCE"; } -@mixin ms-Icon--OfficeStoreLogo { content: "\EDCF"; } -@mixin ms-Icon--OneNoteEduLogo { content: "\EDD0"; } -@mixin ms-Icon--Planner { content: "\EDD1"; } -@mixin ms-Icon--PowerApps { content: "\EDD2"; } -@mixin ms-Icon--Suitcase { content: "\EDD3"; } -@mixin ms-Icon--ProjectLogo { content: "\EDD4"; } -@mixin ms-Icon--CaretLeft8 { content: "\EDD5"; } -@mixin ms-Icon--CaretRight8 { content: "\EDD6"; } -@mixin ms-Icon--CaretUp8 { content: "\EDD7"; } -@mixin ms-Icon--CaretDown8 { content: "\EDD8"; } -@mixin ms-Icon--CaretLeftSolid8 { content: "\EDD9"; } -@mixin ms-Icon--CaretRightSolid8 { content: "\EDDA"; } -@mixin ms-Icon--CaretUpSolid8 { content: "\EDDB"; } -@mixin ms-Icon--CaretDownSolid8 { content: "\EDDC"; } -@mixin ms-Icon--ClearFormatting { content: "\EDDD"; } -@mixin ms-Icon--Superscript { content: "\EDDE"; } -@mixin ms-Icon--Subscript { content: "\EDDF"; } -@mixin ms-Icon--Strikethrough { content: "\EDE0"; } -@mixin ms-Icon--SingleBookmark { content: "\EDFF"; } -@mixin ms-Icon--DoubleChevronDown { content: "\EE04"; } -@mixin ms-Icon--ReplyAll { content: "\EE0A"; } -@mixin ms-Icon--GoogleDriveLogo { content: "\EE0B"; } -@mixin ms-Icon--Questionnaire { content: "\EE19"; } -@mixin ms-Icon--ReplyMirrored { content: "\EE35"; } -@mixin ms-Icon--ReplyAllMirrored { content: "\EE36"; } -@mixin ms-Icon--AddGroup { content: "\EE3D"; } -@mixin ms-Icon--QuestionnaireMirrored { content: "\EE4B"; } -@mixin ms-Icon--TemporaryUser { content: "\EE58"; } -@mixin ms-Icon--GroupedDescending { content: "\EE66"; } -@mixin ms-Icon--GroupedAscending { content: "\EE67"; } -@mixin ms-Icon--SortUp { content: "\EE68"; } -@mixin ms-Icon--SortDown { content: "\EE69"; } -@mixin ms-Icon--AwayStatus { content: "\EE6A"; } -@mixin ms-Icon--SyncToPC { content: "\EE6E"; } -@mixin ms-Icon--AustralianRules { content: "\EE70"; } -@mixin ms-Icon--DateTimeMirrored { content: "\EE93"; } -@mixin ms-Icon--DoubleChevronUp12 { content: "\EE96"; } -@mixin ms-Icon--DoubleChevronDown12 { content: "\EE97"; } -@mixin ms-Icon--DoubleChevronLeft12 { content: "\EE98"; } -@mixin ms-Icon--DoubleChevronRight12 { content: "\EE99"; } -@mixin ms-Icon--CalendarAgenda { content: "\EE9A"; } -@mixin ms-Icon--AddEvent { content: "\EEB5"; } -@mixin ms-Icon--AssetLibrary { content: "\EEB6"; } -@mixin ms-Icon--DataConnectionLibrary { content: "\EEB7"; } -@mixin ms-Icon--DocLibrary { content: "\EEB8"; } -@mixin ms-Icon--FormLibrary { content: "\EEB9"; } -@mixin ms-Icon--FormLibraryMirrored { content: "\EEBA"; } -@mixin ms-Icon--ReportLibrary { content: "\EEBB"; } -@mixin ms-Icon--ReportLibraryMirrored { content: "\EEBC"; } -@mixin ms-Icon--ContactCard { content: "\EEBD"; } -@mixin ms-Icon--CustomList { content: "\EEBE"; } -@mixin ms-Icon--CustomListMirrored { content: "\EEBF"; } -@mixin ms-Icon--IssueTracking { content: "\EEC0"; } -@mixin ms-Icon--IssueTrackingMirrored { content: "\EEC1"; } -@mixin ms-Icon--PictureLibrary { content: "\EEC2"; } -@mixin ms-Icon--AppForOfficeLogo { content: "\EEC7"; } -@mixin ms-Icon--OfflineOneDriveParachute { content: "\EEC8"; } -@mixin ms-Icon--OfflineOneDriveParachuteDisabled { content: "\EEC9"; } -@mixin ms-Icon--LargeGrid { content: "\EECB"; } -@mixin ms-Icon--TriangleSolidUp12 { content: "\EECC"; } -@mixin ms-Icon--TriangleSolidDown12 { content: "\EECD"; } -@mixin ms-Icon--TriangleSolidLeft12 { content: "\EECE"; } -@mixin ms-Icon--TriangleSolidRight12 { content: "\EECF"; } -@mixin ms-Icon--TriangleUp12 { content: "\EED0"; } -@mixin ms-Icon--TriangleDown12 { content: "\EED1"; } -@mixin ms-Icon--TriangleLeft12 { content: "\EED2"; } -@mixin ms-Icon--TriangleRight12 { content: "\EED3"; } -@mixin ms-Icon--ArrowUpRight8 { content: "\EED4"; } -@mixin ms-Icon--ArrowDownRight8 { content: "\EED5"; } -@mixin ms-Icon--DocumentSet { content: "\EED6"; } -@mixin ms-Icon--DelveAnalytics { content: "\EEEE"; } -@mixin ms-Icon--ArrowUpRightMirrored8 { content: "\EEEF"; } -@mixin ms-Icon--ArrowDownRightMirrored8 { content: "\EEF0"; } -@mixin ms-Icon--OneDriveAdd { content: "\EF32"; } -@mixin ms-Icon--Header2 { content: "\EF36"; } -@mixin ms-Icon--Header3 { content: "\EF37"; } -@mixin ms-Icon--Header4 { content: "\EF38"; } -@mixin ms-Icon--MarketDown { content: "\EF42"; } -@mixin ms-Icon--CalendarWorkWeek { content: "\EF51"; } -@mixin ms-Icon--SidePanel { content: "\EF52"; } -@mixin ms-Icon--GlobeFavorite { content: "\EF53"; } -@mixin ms-Icon--CaretTopLeftSolid8 { content: "\EF54"; } -@mixin ms-Icon--CaretTopRightSolid8 { content: "\EF55"; } -@mixin ms-Icon--ViewAll2 { content: "\EF56"; } -@mixin ms-Icon--DocumentReply { content: "\EF57"; } -@mixin ms-Icon--PlayerSettings { content: "\EF58"; } -@mixin ms-Icon--ReceiptForward { content: "\EF59"; } -@mixin ms-Icon--ReceiptReply { content: "\EF5A"; } -@mixin ms-Icon--ReceiptCheck { content: "\EF5B"; } -@mixin ms-Icon--Fax { content: "\EF5C"; } -@mixin ms-Icon--RecurringEvent { content: "\EF5D"; } -@mixin ms-Icon--ReplyAlt { content: "\EF5E"; } -@mixin ms-Icon--ReplyAllAlt { content: "\EF5F"; } -@mixin ms-Icon--EditStyle { content: "\EF60"; } -@mixin ms-Icon--EditMail { content: "\EF61"; } -@mixin ms-Icon--Lifesaver { content: "\EF62"; } -@mixin ms-Icon--LifesaverLock { content: "\EF63"; } -@mixin ms-Icon--InboxCheck { content: "\EF64"; } -@mixin ms-Icon--FolderSearch { content: "\EF65"; } -@mixin ms-Icon--CollapseMenu { content: "\EF66"; } -@mixin ms-Icon--ExpandMenu { content: "\EF67"; } -@mixin ms-Icon--Boards { content: "\EF68"; } -@mixin ms-Icon--SunAdd { content: "\EF69"; } -@mixin ms-Icon--SunQuestionMark { content: "\EF6A"; } -@mixin ms-Icon--LandscapeOrientation { content: "\EF6B"; } -@mixin ms-Icon--DocumentSearch { content: "\EF6C"; } -@mixin ms-Icon--PublicCalendar { content: "\EF6D"; } -@mixin ms-Icon--PublicContactCard { content: "\EF6E"; } -@mixin ms-Icon--PublicEmail { content: "\EF6F"; } -@mixin ms-Icon--PublicFolder { content: "\EF70"; } -@mixin ms-Icon--WordDocument { content: "\EF71"; } -@mixin ms-Icon--PowerPointDocument { content: "\EF72"; } -@mixin ms-Icon--ExcelDocument { content: "\EF73"; } -@mixin ms-Icon--GroupedList { content: "\EF74"; } -@mixin ms-Icon--ClassroomLogo { content: "\EF75"; } -@mixin ms-Icon--Sections { content: "\EF76"; } -@mixin ms-Icon--EditPhoto { content: "\EF77"; } -@mixin ms-Icon--Starburst { content: "\EF78"; } -@mixin ms-Icon--ShareiOS { content: "\EF79"; } -@mixin ms-Icon--AirTickets { content: "\EF7A"; } -@mixin ms-Icon--PencilReply { content: "\EF7B"; } -@mixin ms-Icon--Tiles2 { content: "\EF7C"; } -@mixin ms-Icon--SkypeCircleCheck { content: "\EF7D"; } -@mixin ms-Icon--SkypeCircleClock { content: "\EF7E"; } -@mixin ms-Icon--SkypeCircleMinus { content: "\EF7F"; } -@mixin ms-Icon--SkypeCheck { content: "\EF80"; } -@mixin ms-Icon--SkypeClock { content: "\EF81"; } -@mixin ms-Icon--SkypeMinus { content: "\EF82"; } -@mixin ms-Icon--SkypeMessage { content: "\EF83"; } -@mixin ms-Icon--ClosedCaption { content: "\EF84"; } -@mixin ms-Icon--ATPLogo { content: "\EF85"; } -@mixin ms-Icon--OfficeFormLogo { content: "\EF86"; } -@mixin ms-Icon--RecycleBin { content: "\EF87"; } -@mixin ms-Icon--EmptyRecycleBin { content: "\EF88"; } -@mixin ms-Icon--Hide2 { content: "\EF89"; } -@mixin ms-Icon--iOSAppStoreLogo { content: "\EF8A"; } -@mixin ms-Icon--AndroidLogo { content: "\EF8B"; } -@mixin ms-Icon--Breadcrumb { content: "\EF8C"; } -@mixin ms-Icon--ClearFilter { content: "\EF8F"; } -@mixin ms-Icon--Flow { content: "\EF90"; } -@mixin ms-Icon--PageCheckedOut { content: "\F02C"; } -@mixin ms-Icon--SetAction { content: "\F071"; } -@mixin ms-Icon--PowerAppsLogo { content: "\F091"; } -@mixin ms-Icon--PowerApps2Logo { content: "\F092"; } -@mixin ms-Icon--FabricAssetLibrary { content: "\F09C"; } -@mixin ms-Icon--FabricDataConnectionLibrary { content: "\F09D"; } -@mixin ms-Icon--FabricDocLibrary { content: "\F09E"; } -@mixin ms-Icon--FabricFormLibrary { content: "\F09F"; } -@mixin ms-Icon--FabricFormLibraryMirrored { content: "\F0A0"; } -@mixin ms-Icon--FabricReportLibrary { content: "\F0A1"; } -@mixin ms-Icon--FabricReportLibraryMirrored { content: "\F0A2"; } -@mixin ms-Icon--FabricPublicFolder { content: "\F0A3"; } -@mixin ms-Icon--FabricFolderSearch { content: "\F0A4"; } -@mixin ms-Icon--FabricMovetoFolder { content: "\F0A5"; } -@mixin ms-Icon--FabricUnsyncFolder { content: "\F0A6"; } -@mixin ms-Icon--FabricSyncFolder { content: "\F0A7"; } -@mixin ms-Icon--FabricOpenFolderHorizontal { content: "\F0A8"; } -@mixin ms-Icon--FabricFolder { content: "\F0A9"; } -@mixin ms-Icon--FabricFolderFill { content: "\F0AA"; } -@mixin ms-Icon--FabricNewFolder { content: "\F0AB"; } -@mixin ms-Icon--FabricPictureLibrary { content: "\F0AC"; } -@mixin ms-Icon--AddFavorite { content: "\F0C8"; } -@mixin ms-Icon--AddFavoriteFill { content: "\F0C9"; } -@mixin ms-Icon--BufferTimeBefore { content: "\F0CF"; } -@mixin ms-Icon--BufferTimeAfter { content: "\F0D0"; } -@mixin ms-Icon--BufferTimeBoth { content: "\F0D1"; } -@mixin ms-Icon--PageCheckedin { content: "\F104"; } -@mixin ms-Icon--CaretBottomLeftSolid8 { content: "\F121"; } -@mixin ms-Icon--CaretBottomRightSolid8 { content: "\F122"; } -@mixin ms-Icon--FolderHorizontal { content: "\F12B"; } -@mixin ms-Icon--MicrosoftStaffhubLogo { content: "\F130"; } -@mixin ms-Icon--CaloriesAdd { content: "\F172"; } -@mixin ms-Icon--BranchFork { content: "\F173"; } +@mixin ms-Icon--DecreaseIndentLegacy { content: '\E290'; } +@mixin ms-Icon--IncreaseIndentLegacy { content: '\E291'; } +@mixin ms-Icon--GlobalNavButton { content: '\E700'; } +@mixin ms-Icon--InternetSharing { content: '\E704'; } +@mixin ms-Icon--Brightness { content: '\E706'; } +@mixin ms-Icon--MapPin { content: '\E707'; } +@mixin ms-Icon--Airplane { content: '\E709'; } +@mixin ms-Icon--Tablet { content: '\E70A'; } +@mixin ms-Icon--QuickNote { content: '\E70B'; } +@mixin ms-Icon--ChevronDown { content: '\E70D'; } +@mixin ms-Icon--ChevronUp { content: '\E70E'; } +@mixin ms-Icon--Edit { content: '\E70F'; } +@mixin ms-Icon--Add { content: '\E710'; } +@mixin ms-Icon--Cancel { content: '\E711'; } +@mixin ms-Icon--More { content: '\E712'; } +@mixin ms-Icon--Settings { content: '\E713'; } +@mixin ms-Icon--Video { content: '\E714'; } +@mixin ms-Icon--Mail { content: '\E715'; } +@mixin ms-Icon--People { content: '\E716'; } +@mixin ms-Icon--Phone { content: '\E717'; } +@mixin ms-Icon--Pin { content: '\E718'; } +@mixin ms-Icon--Shop { content: '\E719'; } +@mixin ms-Icon--Link { content: '\E71B'; } +@mixin ms-Icon--Filter { content: '\E71C'; } +@mixin ms-Icon--Zoom { content: '\E71E'; } +@mixin ms-Icon--ZoomOut { content: '\E71F'; } +@mixin ms-Icon--Microphone { content: '\E720'; } +@mixin ms-Icon--Search { content: '\E721'; } +@mixin ms-Icon--Camera { content: '\E722'; } +@mixin ms-Icon--Attach { content: '\E723'; } +@mixin ms-Icon--Send { content: '\E724'; } +@mixin ms-Icon--FavoriteList { content: '\E728'; } +@mixin ms-Icon--PageSolid { content: '\E729'; } +@mixin ms-Icon--Forward { content: '\E72A'; } +@mixin ms-Icon--Back { content: '\E72B'; } +@mixin ms-Icon--Refresh { content: '\E72C'; } +@mixin ms-Icon--Share { content: '\E72D'; } +@mixin ms-Icon--Lock { content: '\E72E'; } +@mixin ms-Icon--EMI { content: '\E731'; } +@mixin ms-Icon--MiniLink { content: '\E732'; } +@mixin ms-Icon--Blocked { content: '\E733'; } +@mixin ms-Icon--FavoriteStar { content: '\E734'; } +@mixin ms-Icon--FavoriteStarFill { content: '\E735'; } +@mixin ms-Icon--ReadingMode { content: '\E736'; } +@mixin ms-Icon--Remove { content: '\E738'; } +@mixin ms-Icon--Checkbox { content: '\E739'; } +@mixin ms-Icon--CheckboxComposite { content: '\E73A'; } +@mixin ms-Icon--CheckboxIndeterminate { content: '\E73C'; } +@mixin ms-Icon--CheckMark { content: '\E73E'; } +@mixin ms-Icon--BackToWindow { content: '\E73F'; } +@mixin ms-Icon--FullScreen { content: '\E740'; } +@mixin ms-Icon--Print { content: '\E749'; } +@mixin ms-Icon--Up { content: '\E74A'; } +@mixin ms-Icon--Down { content: '\E74B'; } +@mixin ms-Icon--Delete { content: '\E74D'; } +@mixin ms-Icon--Save { content: '\E74E'; } +@mixin ms-Icon--Sad { content: '\E757'; } +@mixin ms-Icon--SIPMove { content: '\E759'; } +@mixin ms-Icon--EraseTool { content: '\E75C'; } +@mixin ms-Icon--GripperTool { content: '\E75E'; } +@mixin ms-Icon--Dialpad { content: '\E75F'; } +@mixin ms-Icon--PageLeft { content: '\E760'; } +@mixin ms-Icon--PageRight { content: '\E761'; } +@mixin ms-Icon--MultiSelect { content: '\E762'; } +@mixin ms-Icon--Play { content: '\E768'; } +@mixin ms-Icon--Pause { content: '\E769'; } +@mixin ms-Icon--ChevronLeft { content: '\E76B'; } +@mixin ms-Icon--ChevronRight { content: '\E76C'; } +@mixin ms-Icon--Emoji2 { content: '\E76E'; } +@mixin ms-Icon--System { content: '\E770'; } +@mixin ms-Icon--Globe { content: '\E774'; } +@mixin ms-Icon--ContactInfo { content: '\E779'; } +@mixin ms-Icon--Unpin { content: '\E77A'; } +@mixin ms-Icon--Contact { content: '\E77B'; } +@mixin ms-Icon--Memo { content: '\E77C'; } +@mixin ms-Icon--WindowsLogo { content: '\E782'; } +@mixin ms-Icon--Error { content: '\E783'; } +@mixin ms-Icon--Unlock { content: '\E785'; } +@mixin ms-Icon--Calendar { content: '\E787'; } +@mixin ms-Icon--Megaphone { content: '\E789'; } +@mixin ms-Icon--AutoEnhanceOn { content: '\E78D'; } +@mixin ms-Icon--AutoEnhanceOff { content: '\E78E'; } +@mixin ms-Icon--Color { content: '\E790'; } +@mixin ms-Icon--SaveAs { content: '\E792'; } +@mixin ms-Icon--Light { content: '\E793'; } +@mixin ms-Icon--Filters { content: '\E795'; } +@mixin ms-Icon--Contrast { content: '\E7A1'; } +@mixin ms-Icon--Redo { content: '\E7A6'; } +@mixin ms-Icon--Undo { content: '\E7A7'; } +@mixin ms-Icon--PhotoCollection { content: '\E7AA'; } +@mixin ms-Icon--Album { content: '\E7AB'; } +@mixin ms-Icon--Rotate { content: '\E7AD'; } +@mixin ms-Icon--PanoIndicator { content: '\E7B0'; } +@mixin ms-Icon--RedEye { content: '\E7B3'; } +@mixin ms-Icon--ThumbnailView { content: '\E7B6'; } +@mixin ms-Icon--Package { content: '\E7B8'; } +@mixin ms-Icon--Warning { content: '\E7BA'; } +@mixin ms-Icon--Financial { content: '\E7BB'; } +@mixin ms-Icon--ShoppingCart { content: '\E7BF'; } +@mixin ms-Icon--Train { content: '\E7C0'; } +@mixin ms-Icon--Flag { content: '\E7C1'; } +@mixin ms-Icon--Move { content: '\E7C2'; } +@mixin ms-Icon--Page { content: '\E7C3'; } +@mixin ms-Icon--TouchPointer { content: '\E7C9'; } +@mixin ms-Icon--Merge { content: '\E7D5'; } +@mixin ms-Icon--TurnRight { content: '\E7DB'; } +@mixin ms-Icon--Ferry { content: '\E7E3'; } +@mixin ms-Icon--Tab { content: '\E7E9'; } +@mixin ms-Icon--Admin { content: '\E7EF'; } +@mixin ms-Icon--TVMonitor { content: '\E7F4'; } +@mixin ms-Icon--Speakers { content: '\E7F5'; } +@mixin ms-Icon--Nav2DMapView { content: '\E800'; } +@mixin ms-Icon--Car { content: '\E804'; } +@mixin ms-Icon--EatDrink { content: '\E807'; } +@mixin ms-Icon--LocationCircle { content: '\E80E'; } +@mixin ms-Icon--Home { content: '\E80F'; } +@mixin ms-Icon--SwitcherStartEnd { content: '\E810'; } +@mixin ms-Icon--IncidentTriangle { content: '\E814'; } +@mixin ms-Icon--Touch { content: '\E815'; } +@mixin ms-Icon--MapDirections { content: '\E816'; } +@mixin ms-Icon--History { content: '\E81C'; } +@mixin ms-Icon--Location { content: '\E81D'; } +@mixin ms-Icon--Work { content: '\E821'; } +@mixin ms-Icon--Recent { content: '\E823'; } +@mixin ms-Icon--Hotel { content: '\E824'; } +@mixin ms-Icon--LocationDot { content: '\E827'; } +@mixin ms-Icon--News { content: '\E900'; } +@mixin ms-Icon--Chat { content: '\E901'; } +@mixin ms-Icon--Group { content: '\E902'; } +@mixin ms-Icon--View { content: '\E890'; } +@mixin ms-Icon--Clear { content: '\E894'; } +@mixin ms-Icon--Sync { content: '\E895'; } +@mixin ms-Icon--Download { content: '\E896'; } +@mixin ms-Icon--Help { content: '\E897'; } +@mixin ms-Icon--Upload { content: '\E898'; } +@mixin ms-Icon--Emoji { content: '\E899'; } +@mixin ms-Icon--MailForward { content: '\E89C'; } +@mixin ms-Icon--ClosePane { content: '\E89F'; } +@mixin ms-Icon--OpenPane { content: '\E8A0'; } +@mixin ms-Icon--PreviewLink { content: '\E8A1'; } +@mixin ms-Icon--ZoomIn { content: '\E8A3'; } +@mixin ms-Icon--Bookmarks { content: '\E8A4'; } +@mixin ms-Icon--Document { content: '\E8A5'; } +@mixin ms-Icon--ProtectedDocument { content: '\E8A6'; } +@mixin ms-Icon--OpenInNewWindow { content: '\E8A7'; } +@mixin ms-Icon--MailFill { content: '\E8A8'; } +@mixin ms-Icon--ViewAll { content: '\E8A9'; } +@mixin ms-Icon--Switch { content: '\E8AB'; } +@mixin ms-Icon--Rename { content: '\E8AC'; } +@mixin ms-Icon--Folder { content: '\E8B7'; } +@mixin ms-Icon--Picture { content: '\E8B9'; } +@mixin ms-Icon--ShowResults { content: '\E8BC'; } +@mixin ms-Icon--Message { content: '\E8BD'; } +@mixin ms-Icon--CalendarDay { content: '\E8BF'; } +@mixin ms-Icon--CalendarWeek { content: '\E8C0'; } +@mixin ms-Icon--MailReplyAll { content: '\E8C2'; } +@mixin ms-Icon--Read { content: '\E8C3'; } +@mixin ms-Icon--PaymentCard { content: '\E8C7'; } +@mixin ms-Icon--Copy { content: '\E8C8'; } +@mixin ms-Icon--Important { content: '\E8C9'; } +@mixin ms-Icon--MailReply { content: '\E8CA'; } +@mixin ms-Icon--Sort { content: '\E8CB'; } +@mixin ms-Icon--GotoToday { content: '\E8D1'; } +@mixin ms-Icon--Font { content: '\E8D2'; } +@mixin ms-Icon--FontColor { content: '\E8D3'; } +@mixin ms-Icon--FolderFill { content: '\E8D5'; } +@mixin ms-Icon--Permissions { content: '\E8D7'; } +@mixin ms-Icon--DisableUpdates { content: '\E8D8'; } +@mixin ms-Icon--Unfavorite { content: '\E8D9'; } +@mixin ms-Icon--Italic { content: '\E8DB'; } +@mixin ms-Icon--Underline { content: '\E8DC'; } +@mixin ms-Icon--Bold { content: '\E8DD'; } +@mixin ms-Icon--MoveToFolder { content: '\E8DE'; } +@mixin ms-Icon--Dislike { content: '\E8E0'; } +@mixin ms-Icon--Like { content: '\E8E1'; } +@mixin ms-Icon--AlignRight { content: '\E8E2'; } +@mixin ms-Icon--AlignCenter { content: '\E8E3'; } +@mixin ms-Icon--AlignLeft { content: '\E8E4'; } +@mixin ms-Icon--OpenFile { content: '\E8E5'; } +@mixin ms-Icon--FontDecrease { content: '\E8E7'; } +@mixin ms-Icon--FontIncrease { content: '\E8E8'; } +@mixin ms-Icon--FontSize { content: '\E8E9'; } +@mixin ms-Icon--CellPhone { content: '\E8EA'; } +@mixin ms-Icon--Tag { content: '\E8EC'; } +@mixin ms-Icon--Library { content: '\E8F1'; } +@mixin ms-Icon--PostUpdate { content: '\E8F3'; } +@mixin ms-Icon--NewFolder { content: '\E8F4'; } +@mixin ms-Icon--CalendarReply { content: '\E8F5'; } +@mixin ms-Icon--UnsyncFolder { content: '\E8F6'; } +@mixin ms-Icon--SyncFolder { content: '\E8F7'; } +@mixin ms-Icon--BlockContact { content: '\E8F8'; } +@mixin ms-Icon--AddFriend { content: '\E8FA'; } +@mixin ms-Icon--BulletedList { content: '\E8FD'; } +@mixin ms-Icon--Preview { content: '\E8FF'; } +@mixin ms-Icon--DockLeft { content: '\E90C'; } +@mixin ms-Icon--DockRight { content: '\E90D'; } +@mixin ms-Icon--Repair { content: '\E90F'; } +@mixin ms-Icon--Accounts { content: '\E910'; } +@mixin ms-Icon--RadioBullet { content: '\E915'; } +@mixin ms-Icon--Stopwatch { content: '\E916'; } +@mixin ms-Icon--Clock { content: '\E917'; } +@mixin ms-Icon--WorldClock { content: '\E918'; } +@mixin ms-Icon--AlarmClock { content: '\E919'; } +@mixin ms-Icon--Hospital { content: '\E91D'; } +@mixin ms-Icon--Timer { content: '\E91E'; } +@mixin ms-Icon--FullCircleMask { content: '\E91F'; } +@mixin ms-Icon--LocationFill { content: '\E920'; } +@mixin ms-Icon--ChromeMinimize { content: '\E921'; } +@mixin ms-Icon--Annotation { content: '\E924'; } +@mixin ms-Icon--ChromeClose { content: '\E8BB'; } +@mixin ms-Icon--Accept { content: '\E8FB'; } +@mixin ms-Icon--Fingerprint { content: '\E928'; } +@mixin ms-Icon--Handwriting { content: '\E929'; } +@mixin ms-Icon--StackIndicator { content: '\E7FF'; } +@mixin ms-Icon--Completed { content: '\E930'; } +@mixin ms-Icon--Label { content: '\E932'; } +@mixin ms-Icon--FlickDown { content: '\E935'; } +@mixin ms-Icon--FlickUp { content: '\E936'; } +@mixin ms-Icon--FlickLeft { content: '\E937'; } +@mixin ms-Icon--FlickRight { content: '\E938'; } +@mixin ms-Icon--MusicInCollection { content: '\E940'; } +@mixin ms-Icon--OneDrive { content: '\E941'; } +@mixin ms-Icon--CompassNW { content: '\E942'; } +@mixin ms-Icon--Code { content: '\E943'; } +@mixin ms-Icon--LightningBolt { content: '\E945'; } +@mixin ms-Icon--Info { content: '\E946'; } +@mixin ms-Icon--CalculatorAddition { content: '\E948'; } +@mixin ms-Icon--CalculatorSubtract { content: '\E949'; } +@mixin ms-Icon--PrintfaxPrinterFile { content: '\E956'; } +@mixin ms-Icon--Headset { content: '\E95B'; } +@mixin ms-Icon--Health { content: '\E95E'; } +@mixin ms-Icon--ChevronUpSmall { content: '\E96D'; } +@mixin ms-Icon--ChevronDownSmall { content: '\E96E'; } +@mixin ms-Icon--ChevronLeftSmall { content: '\E96F'; } +@mixin ms-Icon--ChevronRightSmall { content: '\E970'; } +@mixin ms-Icon--ChevronUpMed { content: '\E971'; } +@mixin ms-Icon--ChevronDownMed { content: '\E972'; } +@mixin ms-Icon--ChevronLeftMed { content: '\E973'; } +@mixin ms-Icon--ChevronRightMed { content: '\E974'; } +@mixin ms-Icon--Dictionary { content: '\E82D'; } +@mixin ms-Icon--ChromeBack { content: '\E830'; } +@mixin ms-Icon--PC1 { content: '\E977'; } +@mixin ms-Icon--PresenceChickletVideo { content: '\E979'; } +@mixin ms-Icon--Reply { content: '\E97A'; } +@mixin ms-Icon--DoubleChevronLeftMed { content: '\E991'; } +@mixin ms-Icon--Volume0 { content: '\E992'; } +@mixin ms-Icon--Volume1 { content: '\E993'; } +@mixin ms-Icon--Volume2 { content: '\E994'; } +@mixin ms-Icon--Volume3 { content: '\E995'; } +@mixin ms-Icon--CaretHollow { content: '\E817'; } +@mixin ms-Icon--CaretSolid { content: '\E818'; } +@mixin ms-Icon--FolderOpen { content: '\E838'; } +@mixin ms-Icon--Pinned { content: '\E840'; } +@mixin ms-Icon--PinnedFill { content: '\E842'; } +@mixin ms-Icon--Chart { content: '\E999'; } +@mixin ms-Icon--BidiLtr { content: '\E9AA'; } +@mixin ms-Icon--BidiRtl { content: '\E9AB'; } +@mixin ms-Icon--RevToggleKey { content: '\E845'; } +@mixin ms-Icon--RightDoubleQuote { content: '\E9B1'; } +@mixin ms-Icon--Sunny { content: '\E9BD'; } +@mixin ms-Icon--CloudWeather { content: '\E9BE'; } +@mixin ms-Icon--Cloudy { content: '\E9BF'; } +@mixin ms-Icon--PartlyCloudyDay { content: '\E9C0'; } +@mixin ms-Icon--PartlyCloudyNight { content: '\E9C1'; } +@mixin ms-Icon--ClearNight { content: '\E9C2'; } +@mixin ms-Icon--RainShowersDay { content: '\E9C3'; } +@mixin ms-Icon--Rain { content: '\E9C4'; } +@mixin ms-Icon--Thunderstorms { content: '\E9C6'; } +@mixin ms-Icon--RainSnow { content: '\E9C7'; } +@mixin ms-Icon--Snow { content: '\E9C8'; } +@mixin ms-Icon--BlowingSnow { content: '\E9C9'; } +@mixin ms-Icon--Frigid { content: '\E9CA'; } +@mixin ms-Icon--Fog { content: '\E9CB'; } +@mixin ms-Icon--Squalls { content: '\E9CC'; } +@mixin ms-Icon--Duststorm { content: '\E9CD'; } +@mixin ms-Icon--Precipitation { content: '\E9CF'; } +@mixin ms-Icon--Ringer { content: '\EA8F'; } +@mixin ms-Icon--PDF { content: '\EA90'; } +@mixin ms-Icon--SortLines { content: '\E9D0'; } +@mixin ms-Icon--Ribbon { content: '\E9D1'; } +@mixin ms-Icon--CheckList { content: '\E9D5'; } +@mixin ms-Icon--Generate { content: '\E9DA'; } +@mixin ms-Icon--Equalizer { content: '\E9E9'; } +@mixin ms-Icon--BarChartHorizontal { content: '\E9EB'; } +@mixin ms-Icon--Freezing { content: '\E9EF'; } +@mixin ms-Icon--SnowShowerDay { content: '\E9FD'; } +@mixin ms-Icon--HailDay { content: '\EA00'; } +@mixin ms-Icon--WorkFlow { content: '\EA01'; } +@mixin ms-Icon--StoreLogoMed { content: '\EA04'; } +@mixin ms-Icon--RainShowersNight { content: '\EA0F'; } +@mixin ms-Icon--SnowShowerNight { content: '\EA11'; } +@mixin ms-Icon--HailNight { content: '\EA13'; } +@mixin ms-Icon--Info2 { content: '\EA1F'; } +@mixin ms-Icon--StoreLogo { content: '\EA96'; } +@mixin ms-Icon--MultiSelectMirrored { content: '\EA98'; } +@mixin ms-Icon--Broom { content: '\EA99'; } +@mixin ms-Icon--MusicInCollectionFill { content: '\EA36'; } +@mixin ms-Icon--List { content: '\EA37'; } +@mixin ms-Icon--Asterisk { content: '\EA38'; } +@mixin ms-Icon--ErrorBadge { content: '\EA39'; } +@mixin ms-Icon--CircleRing { content: '\EA3A'; } +@mixin ms-Icon--CircleFill { content: '\EA3B'; } +@mixin ms-Icon--BookmarksMirrored { content: '\EA41'; } +@mixin ms-Icon--BulletedListMirrored { content: '\EA42'; } +@mixin ms-Icon--CaretHollowMirrored { content: '\EA45'; } +@mixin ms-Icon--CaretSolidMirrored { content: '\EA46'; } +@mixin ms-Icon--ChromeBackMirrored { content: '\EA47'; } +@mixin ms-Icon--ClosePaneMirrored { content: '\EA49'; } +@mixin ms-Icon--DockLeftMirrored { content: '\EA4C'; } +@mixin ms-Icon--DoubleChevronLeftMedMirrored { content: '\EA4D'; } +@mixin ms-Icon--HelpMirrored { content: '\EA51'; } +@mixin ms-Icon--ListMirrored { content: '\EA55'; } +@mixin ms-Icon--MailForwardMirrored { content: '\EA56'; } +@mixin ms-Icon--MailReplyMirrored { content: '\EA57'; } +@mixin ms-Icon--MailReplyAllMirrored { content: '\EA58'; } +@mixin ms-Icon--OpenPaneMirrored { content: '\EA5B'; } +@mixin ms-Icon--SendMirrored { content: '\EA63'; } +@mixin ms-Icon--ShowResultsMirrored { content: '\EA65'; } +@mixin ms-Icon--ThumbnailViewMirrored { content: '\EA67'; } +@mixin ms-Icon--Devices3 { content: '\EA6C'; } +@mixin ms-Icon--Lightbulb { content: '\EA80'; } +@mixin ms-Icon--StatusTriangle { content: '\EA82'; } +@mixin ms-Icon--VolumeDisabled { content: '\EA85'; } +@mixin ms-Icon--Puzzle { content: '\EA86'; } +@mixin ms-Icon--EmojiNeutral { content: '\EA87'; } +@mixin ms-Icon--EmojiDisappointed { content: '\EA88'; } +@mixin ms-Icon--HomeSolid { content: '\EA8A'; } +@mixin ms-Icon--Cocktails { content: '\EA9D'; } +@mixin ms-Icon--Articles { content: '\EAC1'; } +@mixin ms-Icon--Cycling { content: '\EAC7'; } +@mixin ms-Icon--DietPlanNotebook { content: '\EAC8'; } +@mixin ms-Icon--Pill { content: '\EACB'; } +@mixin ms-Icon--Running { content: '\EADA'; } +@mixin ms-Icon--Weights { content: '\EADB'; } +@mixin ms-Icon--BarChart4 { content: '\EAE7'; } +@mixin ms-Icon--CirclePlus { content: '\EAEE'; } +@mixin ms-Icon--Coffee { content: '\EAEF'; } +@mixin ms-Icon--Cotton { content: '\EAF3'; } +@mixin ms-Icon--Market { content: '\EAFC'; } +@mixin ms-Icon--Money { content: '\EAFD'; } +@mixin ms-Icon--PieDouble { content: '\EB04'; } +@mixin ms-Icon--RemoveFilter { content: '\EB08'; } +@mixin ms-Icon--StockDown { content: '\EB0F'; } +@mixin ms-Icon--StockUp { content: '\EB11'; } +@mixin ms-Icon--Cricket { content: '\EB1E'; } +@mixin ms-Icon--Golf { content: '\EB1F'; } +@mixin ms-Icon--Baseball { content: '\EB20'; } +@mixin ms-Icon--Soccer { content: '\EB21'; } +@mixin ms-Icon--MoreSports { content: '\EB22'; } +@mixin ms-Icon--AutoRacing { content: '\EB24'; } +@mixin ms-Icon--CollegeHoops { content: '\EB25'; } +@mixin ms-Icon--CollegeFootball { content: '\EB26'; } +@mixin ms-Icon--ProFootball { content: '\EB27'; } +@mixin ms-Icon--ProHockey { content: '\EB28'; } +@mixin ms-Icon--Rugby { content: '\EB2D'; } +@mixin ms-Icon--Tennis { content: '\EB33'; } +@mixin ms-Icon--Arrivals { content: '\EB34'; } +@mixin ms-Icon--Design { content: '\EB3C'; } +@mixin ms-Icon--Website { content: '\EB41'; } +@mixin ms-Icon--Drop { content: '\EB42'; } +@mixin ms-Icon--Snow { content: '\EB46'; } +@mixin ms-Icon--BusSolid { content: '\EB47'; } +@mixin ms-Icon--FerrySolid { content: '\EB48'; } +@mixin ms-Icon--TrainSolid { content: '\EB4D'; } +@mixin ms-Icon--Heart { content: '\EB51'; } +@mixin ms-Icon--HeartFill { content: '\EB52'; } +@mixin ms-Icon--Ticket { content: '\EB54'; } +@mixin ms-Icon--Devices4 { content: '\EB66'; } +@mixin ms-Icon--AzureLogo { content: '\EB6A'; } +@mixin ms-Icon--BingLogo { content: '\EB6B'; } +@mixin ms-Icon--MSNLogo { content: '\EB6C'; } +@mixin ms-Icon--OutlookLogo { content: '\EB6D'; } +@mixin ms-Icon--OfficeLogo { content: '\EB6E'; } +@mixin ms-Icon--SkypeLogo { content: '\EB6F'; } +@mixin ms-Icon--Door { content: '\EB75'; } +@mixin ms-Icon--EditMirrored { content: '\EB7E'; } +@mixin ms-Icon--GiftCard { content: '\EB8E'; } +@mixin ms-Icon--DoubleBookmark { content: '\EB8F'; } +@mixin ms-Icon--StatusErrorFull { content: '\EB90'; } +@mixin ms-Icon--Certificate { content: '\EB95'; } +@mixin ms-Icon--Photo2 { content: '\EB9F'; } +@mixin ms-Icon--CloudDownload { content: '\EBD3'; } +@mixin ms-Icon--WindDirection { content: '\EBE6'; } +@mixin ms-Icon--Family { content: '\EBDA'; } +@mixin ms-Icon--CSS { content: '\EBEF'; } +@mixin ms-Icon--JS { content: '\EBF0'; } +@mixin ms-Icon--ReminderGroup { content: '\EBF8'; } +@mixin ms-Icon--Section { content: '\EC0C'; } +@mixin ms-Icon--OneNoteLogo { content: '\EC0D'; } +@mixin ms-Icon--ToggleFilled { content: '\EC11'; } +@mixin ms-Icon--ToggleBorder { content: '\EC12'; } +@mixin ms-Icon--SliderThumb { content: '\EC13'; } +@mixin ms-Icon--ToggleThumb { content: '\EC14'; } +@mixin ms-Icon--Documentation { content: '\EC17'; } +@mixin ms-Icon--Badge { content: '\EC1B'; } +@mixin ms-Icon--Giftbox { content: '\EC1F'; } +@mixin ms-Icon--ExcelLogo { content: '\EC28'; } +@mixin ms-Icon--WordLogo { content: '\EC29'; } +@mixin ms-Icon--PowerPointLogo { content: '\EC2A'; } +@mixin ms-Icon--Cafe { content: '\EC32'; } +@mixin ms-Icon--SpeedHigh { content: '\EC4A'; } +@mixin ms-Icon--MusicNote { content: '\EC4F'; } +@mixin ms-Icon--EdgeLogo { content: '\EC60'; } +@mixin ms-Icon--CompletedSolid { content: '\EC61'; } +@mixin ms-Icon--AlbumRemove { content: '\EC62'; } +@mixin ms-Icon--MessageFill { content: '\EC70'; } +@mixin ms-Icon--TabletSelected { content: '\EC74'; } +@mixin ms-Icon--MobileSelected { content: '\EC75'; } +@mixin ms-Icon--LaptopSelected { content: '\EC76'; } +@mixin ms-Icon--TVMonitorSelected { content: '\EC77'; } +@mixin ms-Icon--DeveloperTools { content: '\EC7A'; } +@mixin ms-Icon--InsertTextBox { content: '\EC7D'; } +@mixin ms-Icon--LowerBrightness { content: '\EC8A'; } +@mixin ms-Icon--CloudUpload { content: '\EC8E'; } +@mixin ms-Icon--DateTime { content: '\EC92'; } +@mixin ms-Icon--Event { content: '\ECA3'; } +@mixin ms-Icon--Cake { content: '\ECA4'; } +@mixin ms-Icon--Tiles { content: '\ECA5'; } +@mixin ms-Icon--Org { content: '\ECA6'; } +@mixin ms-Icon--PartyLeader { content: '\ECA7'; } +@mixin ms-Icon--DRM { content: '\ECA8'; } +@mixin ms-Icon--CloudAdd { content: '\ECA9'; } +@mixin ms-Icon--AppIconDefault { content: '\ECAA'; } +@mixin ms-Icon--Photo2Add { content: '\ECAB'; } +@mixin ms-Icon--Photo2Remove { content: '\ECAC'; } +@mixin ms-Icon--POI { content: '\ECAF'; } +@mixin ms-Icon--FacebookLogo { content: '\ECB3'; } +@mixin ms-Icon--AddTo { content: '\ECC8'; } +@mixin ms-Icon--RadioBtnOn { content: '\ECCB'; } +@mixin ms-Icon--Embed { content: '\ECCE'; } +@mixin ms-Icon--VideoSolid { content: '\EA0C'; } +@mixin ms-Icon--Teamwork { content: '\EA12'; } +@mixin ms-Icon--PeopleAdd { content: '\EA15'; } +@mixin ms-Icon--Glasses { content: '\EA16'; } +@mixin ms-Icon--DateTime2 { content: '\EA17'; } +@mixin ms-Icon--Shield { content: '\EA18'; } +@mixin ms-Icon--Header1 { content: '\EA19'; } +@mixin ms-Icon--PageAdd { content: '\EA1A'; } +@mixin ms-Icon--NumberedList { content: '\EA1C'; } +@mixin ms-Icon--PowerBILogo { content: '\EA1E'; } +@mixin ms-Icon--Product { content: '\ECDC'; } +@mixin ms-Icon--Blocked2 { content: '\ECE4'; } +@mixin ms-Icon--FangBody { content: '\ECEB'; } +@mixin ms-Icon--Glimmer { content: '\ECF4'; } +@mixin ms-Icon--ChatInviteFriend { content: '\ECFE'; } +@mixin ms-Icon--SharepointLogo { content: '\ED18'; } +@mixin ms-Icon--YammerLogo { content: '\ED19'; } +@mixin ms-Icon--Hide { content: '\ED1A'; } +@mixin ms-Icon--ReturnToSession { content: '\ED24'; } +@mixin ms-Icon--OpenFolderHorizontal { content: '\ED25'; } +@mixin ms-Icon--CalendarMirrored { content: '\ED28'; } +@mixin ms-Icon--SwayLogo { content: '\ED29'; } +@mixin ms-Icon--OutOfOffice { content: '\ED34'; } +@mixin ms-Icon--Trophy { content: '\ED3F'; } +@mixin ms-Icon--ReopenPages { content: '\ED50'; } +@mixin ms-Icon--AADLogo { content: '\ED68'; } +@mixin ms-Icon--AccessLogo { content: '\ED69'; } +@mixin ms-Icon--AdminALogo { content: '\ED6A'; } +@mixin ms-Icon--AdminCLogo { content: '\ED6B'; } +@mixin ms-Icon--AdminDLogo { content: '\ED6C'; } +@mixin ms-Icon--AdminELogo { content: '\ED6D'; } +@mixin ms-Icon--AdminLLogo { content: '\ED6E'; } +@mixin ms-Icon--AdminMLogo { content: '\ED6F'; } +@mixin ms-Icon--AdminOLogo { content: '\ED70'; } +@mixin ms-Icon--AdminPLogo { content: '\ED71'; } +@mixin ms-Icon--AdminSLogo { content: '\ED72'; } +@mixin ms-Icon--AdminYLogo { content: '\ED73'; } +@mixin ms-Icon--AlchemyLogo { content: '\ED74'; } +@mixin ms-Icon--BoxLogo { content: '\ED75'; } +@mixin ms-Icon--DelveLogo { content: '\ED76'; } +@mixin ms-Icon--DropboxLogo { content: '\ED77'; } +@mixin ms-Icon--ExchangeLogo { content: '\ED78'; } +@mixin ms-Icon--LyncLogo { content: '\ED79'; } +@mixin ms-Icon--OfficeVideoLogo { content: '\ED7A'; } +@mixin ms-Icon--ParatureLogo { content: '\ED7B'; } +@mixin ms-Icon--SocialListeningLogo { content: '\ED7C'; } +@mixin ms-Icon--VisioLogo { content: '\ED7D'; } +@mixin ms-Icon--Balloons { content: '\ED7E'; } +@mixin ms-Icon--Cat { content: '\ED7F'; } +@mixin ms-Icon--MailAlert { content: '\ED80'; } +@mixin ms-Icon--MailCheck { content: '\ED81'; } +@mixin ms-Icon--MailLowImportance { content: '\ED82'; } +@mixin ms-Icon--MailPause { content: '\ED83'; } +@mixin ms-Icon--MailRepeat { content: '\ED84'; } +@mixin ms-Icon--SecurityGroup { content: '\ED85'; } +@mixin ms-Icon--Table { content: '\ED86'; } +@mixin ms-Icon--VoicemailForward { content: '\ED87'; } +@mixin ms-Icon--VoicemailReply { content: '\ED88'; } +@mixin ms-Icon--Waffle { content: '\ED89'; } +@mixin ms-Icon--RemoveEvent { content: '\ED8A'; } +@mixin ms-Icon--EventInfo { content: '\ED8B'; } +@mixin ms-Icon--ForwardEvent { content: '\ED8C'; } +@mixin ms-Icon--WipePhone { content: '\ED8D'; } +@mixin ms-Icon--AddOnlineMeeting { content: '\ED8E'; } +@mixin ms-Icon--JoinOnlineMeeting { content: '\ED8F'; } +@mixin ms-Icon--RemoveLink { content: '\ED90'; } +@mixin ms-Icon--PeopleBlock { content: '\ED91'; } +@mixin ms-Icon--PeopleRepeat { content: '\ED92'; } +@mixin ms-Icon--PeopleAlert { content: '\ED93'; } +@mixin ms-Icon--PeoplePause { content: '\ED94'; } +@mixin ms-Icon--TransferCall { content: '\ED95'; } +@mixin ms-Icon--AddPhone { content: '\ED96'; } +@mixin ms-Icon--UnknownCall { content: '\ED97'; } +@mixin ms-Icon--NoteReply { content: '\ED98'; } +@mixin ms-Icon--NoteForward { content: '\ED99'; } +@mixin ms-Icon--NotePinned { content: '\ED9A'; } +@mixin ms-Icon--RemoveOccurrence { content: '\ED9B'; } +@mixin ms-Icon--Timeline { content: '\ED9C'; } +@mixin ms-Icon--EditNote { content: '\ED9D'; } +@mixin ms-Icon--CircleHalfFull { content: '\ED9E'; } +@mixin ms-Icon--Room { content: '\ED9F'; } +@mixin ms-Icon--Unsubscribe { content: '\EDA0'; } +@mixin ms-Icon--Subscribe { content: '\EDA1'; } +@mixin ms-Icon--RecurringTask { content: '\EDB2'; } +@mixin ms-Icon--TaskManager { content: '\EDB7'; } +@mixin ms-Icon--TaskManagerMirrored { content: '\EDB8'; } +@mixin ms-Icon--Combine { content: '\EDBB'; } +@mixin ms-Icon--Split { content: '\EDBC'; } +@mixin ms-Icon--DoubleChevronUp { content: '\EDBD'; } +@mixin ms-Icon--DoubleChevronLeft { content: '\EDBE'; } +@mixin ms-Icon--DoubleChevronRight { content: '\EDBF'; } +@mixin ms-Icon--Ascending { content: '\EDC0'; } +@mixin ms-Icon--Descending { content: '\EDC1'; } +@mixin ms-Icon--TextBox { content: '\EDC2'; } +@mixin ms-Icon--TextField { content: '\EDC3'; } +@mixin ms-Icon--NumberField { content: '\EDC4'; } +@mixin ms-Icon--Dropdown { content: '\EDC5'; } +@mixin ms-Icon--BookingsLogo { content: '\EDC7'; } +@mixin ms-Icon--ClassNotebookLogo { content: '\EDC8'; } +@mixin ms-Icon--CollabsDBLogo { content: '\EDC9'; } +@mixin ms-Icon--DelveAnalyticsLogo { content: '\EDCA'; } +@mixin ms-Icon--DocsLogo { content: '\EDCB'; } +@mixin ms-Icon--Dynamics365Logo { content: '\EDCC'; } +@mixin ms-Icon--DynamicSMBLogo { content: '\EDCD'; } +@mixin ms-Icon--OfficeAssistantLogo { content: '\EDCE'; } +@mixin ms-Icon--OfficeStoreLogo { content: '\EDCF'; } +@mixin ms-Icon--OneNoteEduLogo { content: '\EDD0'; } +@mixin ms-Icon--Planner { content: '\EDD1'; } +@mixin ms-Icon--PowerApps { content: '\EDD2'; } +@mixin ms-Icon--Suitcase { content: '\EDD3'; } +@mixin ms-Icon--ProjectLogo { content: '\EDD4'; } +@mixin ms-Icon--CaretLeft8 { content: '\EDD5'; } +@mixin ms-Icon--CaretRight8 { content: '\EDD6'; } +@mixin ms-Icon--CaretUp8 { content: '\EDD7'; } +@mixin ms-Icon--CaretDown8 { content: '\EDD8'; } +@mixin ms-Icon--CaretLeftSolid8 { content: '\EDD9'; } +@mixin ms-Icon--CaretRightSolid8 { content: '\EDDA'; } +@mixin ms-Icon--CaretUpSolid8 { content: '\EDDB'; } +@mixin ms-Icon--CaretDownSolid8 { content: '\EDDC'; } +@mixin ms-Icon--ClearFormatting { content: '\EDDD'; } +@mixin ms-Icon--Superscript { content: '\EDDE'; } +@mixin ms-Icon--Subscript { content: '\EDDF'; } +@mixin ms-Icon--Strikethrough { content: '\EDE0'; } +@mixin ms-Icon--SingleBookmark { content: '\EDFF'; } +@mixin ms-Icon--DoubleChevronDown { content: '\EE04'; } +@mixin ms-Icon--ReplyAll { content: '\EE0A'; } +@mixin ms-Icon--GoogleDriveLogo { content: '\EE0B'; } +@mixin ms-Icon--Questionnaire { content: '\EE19'; } +@mixin ms-Icon--ReplyMirrored { content: '\EE35'; } +@mixin ms-Icon--ReplyAllMirrored { content: '\EE36'; } +@mixin ms-Icon--AddGroup { content: '\EE3D'; } +@mixin ms-Icon--QuestionnaireMirrored { content: '\EE4B'; } +@mixin ms-Icon--TemporaryUser { content: '\EE58'; } +@mixin ms-Icon--GroupedDescending { content: '\EE66'; } +@mixin ms-Icon--GroupedAscending { content: '\EE67'; } +@mixin ms-Icon--SortUp { content: '\EE68'; } +@mixin ms-Icon--SortDown { content: '\EE69'; } +@mixin ms-Icon--AwayStatus { content: '\EE6A'; } +@mixin ms-Icon--SyncToPC { content: '\EE6E'; } +@mixin ms-Icon--AustralianRules { content: '\EE70'; } +@mixin ms-Icon--DateTimeMirrored { content: '\EE93'; } +@mixin ms-Icon--DoubleChevronUp12 { content: '\EE96'; } +@mixin ms-Icon--DoubleChevronDown12 { content: '\EE97'; } +@mixin ms-Icon--DoubleChevronLeft12 { content: '\EE98'; } +@mixin ms-Icon--DoubleChevronRight12 { content: '\EE99'; } +@mixin ms-Icon--CalendarAgenda { content: '\EE9A'; } +@mixin ms-Icon--AddEvent { content: '\EEB5'; } +@mixin ms-Icon--AssetLibrary { content: '\EEB6'; } +@mixin ms-Icon--DataConnectionLibrary { content: '\EEB7'; } +@mixin ms-Icon--DocLibrary { content: '\EEB8'; } +@mixin ms-Icon--FormLibrary { content: '\EEB9'; } +@mixin ms-Icon--FormLibraryMirrored { content: '\EEBA'; } +@mixin ms-Icon--ReportLibrary { content: '\EEBB'; } +@mixin ms-Icon--ReportLibraryMirrored { content: '\EEBC'; } +@mixin ms-Icon--ContactCard { content: '\EEBD'; } +@mixin ms-Icon--CustomList { content: '\EEBE'; } +@mixin ms-Icon--CustomListMirrored { content: '\EEBF'; } +@mixin ms-Icon--IssueTracking { content: '\EEC0'; } +@mixin ms-Icon--IssueTrackingMirrored { content: '\EEC1'; } +@mixin ms-Icon--PictureLibrary { content: '\EEC2'; } +@mixin ms-Icon--AppForOfficeLogo { content: '\EEC7'; } +@mixin ms-Icon--OfflineOneDriveParachute { content: '\EEC8'; } +@mixin ms-Icon--OfflineOneDriveParachuteDisabled { content: '\EEC9'; } +@mixin ms-Icon--LargeGrid { content: '\EECB'; } +@mixin ms-Icon--TriangleSolidUp12 { content: '\EECC'; } +@mixin ms-Icon--TriangleSolidDown12 { content: '\EECD'; } +@mixin ms-Icon--TriangleSolidLeft12 { content: '\EECE'; } +@mixin ms-Icon--TriangleSolidRight12 { content: '\EECF'; } +@mixin ms-Icon--TriangleUp12 { content: '\EED0'; } +@mixin ms-Icon--TriangleDown12 { content: '\EED1'; } +@mixin ms-Icon--TriangleLeft12 { content: '\EED2'; } +@mixin ms-Icon--TriangleRight12 { content: '\EED3'; } +@mixin ms-Icon--ArrowUpRight8 { content: '\EED4'; } +@mixin ms-Icon--ArrowDownRight8 { content: '\EED5'; } +@mixin ms-Icon--DocumentSet { content: '\EED6'; } +@mixin ms-Icon--DelveAnalytics { content: '\EEEE'; } +@mixin ms-Icon--ArrowUpRightMirrored8 { content: '\EEEF'; } +@mixin ms-Icon--ArrowDownRightMirrored8 { content: '\EEF0'; } +@mixin ms-Icon--OneDriveAdd { content: '\EF32'; } +@mixin ms-Icon--Header2 { content: '\EF36'; } +@mixin ms-Icon--Header3 { content: '\EF37'; } +@mixin ms-Icon--Header4 { content: '\EF38'; } +@mixin ms-Icon--MarketDown { content: '\EF42'; } +@mixin ms-Icon--CalendarWorkWeek { content: '\EF51'; } +@mixin ms-Icon--SidePanel { content: '\EF52'; } +@mixin ms-Icon--GlobeFavorite { content: '\EF53'; } +@mixin ms-Icon--CaretTopLeftSolid8 { content: '\EF54'; } +@mixin ms-Icon--CaretTopRightSolid8 { content: '\EF55'; } +@mixin ms-Icon--ViewAll2 { content: '\EF56'; } +@mixin ms-Icon--DocumentReply { content: '\EF57'; } +@mixin ms-Icon--PlayerSettings { content: '\EF58'; } +@mixin ms-Icon--ReceiptForward { content: '\EF59'; } +@mixin ms-Icon--ReceiptReply { content: '\EF5A'; } +@mixin ms-Icon--ReceiptCheck { content: '\EF5B'; } +@mixin ms-Icon--Fax { content: '\EF5C'; } +@mixin ms-Icon--RecurringEvent { content: '\EF5D'; } +@mixin ms-Icon--ReplyAlt { content: '\EF5E'; } +@mixin ms-Icon--ReplyAllAlt { content: '\EF5F'; } +@mixin ms-Icon--EditStyle { content: '\EF60'; } +@mixin ms-Icon--EditMail { content: '\EF61'; } +@mixin ms-Icon--Lifesaver { content: '\EF62'; } +@mixin ms-Icon--LifesaverLock { content: '\EF63'; } +@mixin ms-Icon--InboxCheck { content: '\EF64'; } +@mixin ms-Icon--FolderSearch { content: '\EF65'; } +@mixin ms-Icon--CollapseMenu { content: '\EF66'; } +@mixin ms-Icon--ExpandMenu { content: '\EF67'; } +@mixin ms-Icon--Boards { content: '\EF68'; } +@mixin ms-Icon--SunAdd { content: '\EF69'; } +@mixin ms-Icon--SunQuestionMark { content: '\EF6A'; } +@mixin ms-Icon--LandscapeOrientation { content: '\EF6B'; } +@mixin ms-Icon--DocumentSearch { content: '\EF6C'; } +@mixin ms-Icon--PublicCalendar { content: '\EF6D'; } +@mixin ms-Icon--PublicContactCard { content: '\EF6E'; } +@mixin ms-Icon--PublicEmail { content: '\EF6F'; } +@mixin ms-Icon--PublicFolder { content: '\EF70'; } +@mixin ms-Icon--WordDocument { content: '\EF71'; } +@mixin ms-Icon--PowerPointDocument { content: '\EF72'; } +@mixin ms-Icon--ExcelDocument { content: '\EF73'; } +@mixin ms-Icon--GroupedList { content: '\EF74'; } +@mixin ms-Icon--ClassroomLogo { content: '\EF75'; } +@mixin ms-Icon--Sections { content: '\EF76'; } +@mixin ms-Icon--EditPhoto { content: '\EF77'; } +@mixin ms-Icon--Starburst { content: '\EF78'; } +@mixin ms-Icon--ShareiOS { content: '\EF79'; } +@mixin ms-Icon--AirTickets { content: '\EF7A'; } +@mixin ms-Icon--PencilReply { content: '\EF7B'; } +@mixin ms-Icon--Tiles2 { content: '\EF7C'; } +@mixin ms-Icon--SkypeCircleCheck { content: '\EF7D'; } +@mixin ms-Icon--SkypeCircleClock { content: '\EF7E'; } +@mixin ms-Icon--SkypeCircleMinus { content: '\EF7F'; } +@mixin ms-Icon--SkypeCheck { content: '\EF80'; } +@mixin ms-Icon--SkypeClock { content: '\EF81'; } +@mixin ms-Icon--SkypeMinus { content: '\EF82'; } +@mixin ms-Icon--SkypeMessage { content: '\EF83'; } +@mixin ms-Icon--ClosedCaption { content: '\EF84'; } +@mixin ms-Icon--ATPLogo { content: '\EF85'; } +@mixin ms-Icon--OfficeFormLogo { content: '\EF86'; } +@mixin ms-Icon--RecycleBin { content: '\EF87'; } +@mixin ms-Icon--EmptyRecycleBin { content: '\EF88'; } +@mixin ms-Icon--Hide2 { content: '\EF89'; } +@mixin ms-Icon--iOSAppStoreLogo { content: '\EF8A'; } +@mixin ms-Icon--AndroidLogo { content: '\EF8B'; } +@mixin ms-Icon--Breadcrumb { content: '\EF8C'; } +@mixin ms-Icon--ClearFilter { content: '\EF8F'; } +@mixin ms-Icon--Flow { content: '\EF90'; } +@mixin ms-Icon--PageCheckedOut { content: '\F02C'; } +@mixin ms-Icon--SetAction { content: '\F071'; } +@mixin ms-Icon--PowerAppsLogo { content: '\F091'; } +@mixin ms-Icon--PowerApps2Logo { content: '\F092'; } +@mixin ms-Icon--FabricAssetLibrary { content: '\F09C'; } +@mixin ms-Icon--FabricDataConnectionLibrary { content: '\F09D'; } +@mixin ms-Icon--FabricDocLibrary { content: '\F09E'; } +@mixin ms-Icon--FabricFormLibrary { content: '\F09F'; } +@mixin ms-Icon--FabricFormLibraryMirrored { content: '\F0A0'; } +@mixin ms-Icon--FabricReportLibrary { content: '\F0A1'; } +@mixin ms-Icon--FabricReportLibraryMirrored { content: '\F0A2'; } +@mixin ms-Icon--FabricPublicFolder { content: '\F0A3'; } +@mixin ms-Icon--FabricFolderSearch { content: '\F0A4'; } +@mixin ms-Icon--FabricMovetoFolder { content: '\F0A5'; } +@mixin ms-Icon--FabricUnsyncFolder { content: '\F0A6'; } +@mixin ms-Icon--FabricSyncFolder { content: '\F0A7'; } +@mixin ms-Icon--FabricOpenFolderHorizontal { content: '\F0A8'; } +@mixin ms-Icon--FabricFolder { content: '\F0A9'; } +@mixin ms-Icon--FabricFolderFill { content: '\F0AA'; } +@mixin ms-Icon--FabricNewFolder { content: '\F0AB'; } +@mixin ms-Icon--FabricPictureLibrary { content: '\F0AC'; } +@mixin ms-Icon--AddFavorite { content: '\F0C8'; } +@mixin ms-Icon--AddFavoriteFill { content: '\F0C9'; } +@mixin ms-Icon--BufferTimeBefore { content: '\F0CF'; } +@mixin ms-Icon--BufferTimeAfter { content: '\F0D0'; } +@mixin ms-Icon--BufferTimeBoth { content: '\F0D1'; } +@mixin ms-Icon--PageCheckedin { content: '\F104'; } +@mixin ms-Icon--CaretBottomLeftSolid8 { content: '\F121'; } +@mixin ms-Icon--CaretBottomRightSolid8 { content: '\F122'; } +@mixin ms-Icon--FolderHorizontal { content: '\F12B'; } +@mixin ms-Icon--MicrosoftStaffhubLogo { content: '\F130'; } +@mixin ms-Icon--CaloriesAdd { content: '\F172'; } +@mixin ms-Icon--BranchFork { content: '\F173'; } diff --git a/src/sass/_Fabric.Typography.Fonts.scss b/src/sass/_Fabric.Typography.Fonts.scss index 8502ea6a5..28489bf11 100644 --- a/src/sass/_Fabric.Typography.Fonts.scss +++ b/src/sass/_Fabric.Typography.Fonts.scss @@ -7,18 +7,18 @@ // Font weights. -$ms-font-name: "Segoe UI" !default; +$ms-font-name: 'Segoe UI' !default; // Font paths. -$ms-font-directory: "https://static2.sharepointonline.com/files/fabric/assets/fonts/" !default; -$ms-font-path-arabic: "segoeui-arabic" !default; -$ms-font-path-cyrillic: "segoeui-cyrillic" !default; -$ms-font-path-easteuropean: "segoeui-easteuropean" !default; -$ms-font-path-greek: "segoeui-greek" !default; -$ms-font-path-hebrew: "segoeui-hebrew" !default; -$ms-font-path-vietnamese: "segoeui-vietnamese" !default; -$ms-font-path-westeuropean: "segoeui-westeuropean" !default; +$ms-font-directory: 'https://static2.sharepointonline.com/files/fabric/assets/fonts/' !default; +$ms-font-path-arabic: 'segoeui-arabic' !default; +$ms-font-path-cyrillic: 'segoeui-cyrillic' !default; +$ms-font-path-easteuropean: 'segoeui-easteuropean' !default; +$ms-font-path-greek: 'segoeui-greek' !default; +$ms-font-path-hebrew: 'segoeui-hebrew' !default; +$ms-font-path-vietnamese: 'segoeui-vietnamese' !default; +$ms-font-path-westeuropean: 'segoeui-westeuropean' !default; /* @@ -28,8 +28,8 @@ $ms-font-path-westeuropean: "segoeui-westeuropean" !default; // Mixins to generate @font-face rules for unique languages. @mixin SegoeUILight($ms-font-language, $ms-font-path) { @font-face { - font-family: "#{$ms-font-name} #{$ms-font-language}"; - src: local("Segoe UI Light"), + font-family: '#{$ms-font-name} #{$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'); @@ -40,8 +40,8 @@ $ms-font-path-westeuropean: "segoeui-westeuropean" !default; @mixin SegoeUISemilight($ms-font-language, $ms-font-path) { @font-face { - font-family: "#{$ms-font-name} #{$ms-font-language}"; - src: local("Segoe UI Semilight"), + font-family: '#{$ms-font-name} #{$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'); @@ -52,8 +52,8 @@ $ms-font-path-westeuropean: "segoeui-westeuropean" !default; @mixin SegoeUIRegular($ms-font-language, $ms-font-path) { @font-face { - font-family: "#{$ms-font-name} #{$ms-font-language}"; - src: local("Segoe UI"), + font-family: '#{$ms-font-name} #{$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'); @@ -64,8 +64,8 @@ $ms-font-path-westeuropean: "segoeui-westeuropean" !default; @mixin SegoeUISemibold($ms-font-language, $ms-font-path) { @font-face { - font-family: "#{$ms-font-name} #{$ms-font-language}"; - src: local("Segoe UI Semibold"), + font-family: '#{$ms-font-name} #{$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'); @@ -76,92 +76,92 @@ $ms-font-path-westeuropean: "segoeui-westeuropean" !default; // Mixins to generate language-specific font faces. @mixin SegoeUIArabicLight { - @include SegoeUILight("Arabic", $ms-font-path-arabic); + @include SegoeUILight('Arabic', $ms-font-path-arabic); } @mixin SegoeUIArabicRegular { - @include SegoeUIRegular("Arabic", $ms-font-path-arabic); + @include SegoeUIRegular('Arabic', $ms-font-path-arabic); } @mixin SegoeUIArabicSemibold { - @include SegoeUISemibold("Arabic", $ms-font-path-arabic); + @include SegoeUISemibold('Arabic', $ms-font-path-arabic); } @mixin SegoeUIArabicSemilight { - @include SegoeUISemilight("Arabic", $ms-font-path-arabic); + @include SegoeUISemilight('Arabic', $ms-font-path-arabic); } @mixin SegoeUICyrillicLight { - @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic); + @include SegoeUILight('Cyrillic', $ms-font-path-cyrillic); } @mixin SegoeUICyrillicRegular { - @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic); + @include SegoeUIRegular('Cyrillic', $ms-font-path-cyrillic); } @mixin SegoeUICyrillicSemibold { - @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic); + @include SegoeUISemibold('Cyrillic', $ms-font-path-cyrillic); } @mixin SegoeUICyrillicSemilight { - @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic); + @include SegoeUISemilight('Cyrillic', $ms-font-path-cyrillic); } @mixin SegoeUIEastEuropeanLight { - @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean); + @include SegoeUILight('EastEuropean', $ms-font-path-easteuropean); } @mixin SegoeUIEastEuropeanRegular { - @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean); + @include SegoeUIRegular('EastEuropean', $ms-font-path-easteuropean); } @mixin SegoeUIEastEuropeanSemibold { - @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean); + @include SegoeUISemibold('EastEuropean', $ms-font-path-easteuropean); } @mixin SegoeUIEastEuropeanSemilight { - @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean); + @include SegoeUISemilight('EastEuropean', $ms-font-path-easteuropean); } @mixin SegoeUIGreekLight { - @include SegoeUILight("Greek", $ms-font-path-greek); + @include SegoeUILight('Greek', $ms-font-path-greek); } @mixin SegoeUIGreekRegular { - @include SegoeUIRegular("Greek", $ms-font-path-greek); + @include SegoeUIRegular('Greek', $ms-font-path-greek); } @mixin SegoeUIGreekSemibold { - @include SegoeUISemibold("Greek", $ms-font-path-greek); + @include SegoeUISemibold('Greek', $ms-font-path-greek); } @mixin SegoeUIGreekSemilight { - @include SegoeUISemilight("Greek", $ms-font-path-greek); + @include SegoeUISemilight('Greek', $ms-font-path-greek); } @mixin SegoeUIHebrewLight { - @include SegoeUILight("Hebrew", $ms-font-path-hebrew); + @include SegoeUILight('Hebrew', $ms-font-path-hebrew); } @mixin SegoeUIHebrewRegular { - @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew); + @include SegoeUIRegular('Hebrew', $ms-font-path-hebrew); } @mixin SegoeUIHebrewSemibold { - @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew); + @include SegoeUISemibold('Hebrew', $ms-font-path-hebrew); } @mixin SegoeUIHebrewSemilight { - @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew); + @include SegoeUISemilight('Hebrew', $ms-font-path-hebrew); } @mixin SegoeUIVietnameseLight { - @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese); + @include SegoeUILight('Vietnamese', $ms-font-path-vietnamese); } @mixin SegoeUIVietnameseRegular { - @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese); + @include SegoeUIRegular('Vietnamese', $ms-font-path-vietnamese); } @mixin SegoeUIVietnameseSemibold { - @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese); + @include SegoeUISemibold('Vietnamese', $ms-font-path-vietnamese); } @mixin SegoeUIVietnameseSemilight { - @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese); + @include SegoeUISemilight('Vietnamese', $ms-font-path-vietnamese); } @mixin SegoeUIWestEuropeanLight { - @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean); + @include SegoeUILight('WestEuropean', $ms-font-path-westeuropean); } @mixin SegoeUIWestEuropeanRegular { - @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean); + @include SegoeUIRegular('WestEuropean', $ms-font-path-westeuropean); } @mixin SegoeUIWestEuropeanSemibold { - @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean); + @include SegoeUISemibold('WestEuropean', $ms-font-path-westeuropean); } @mixin SegoeUIWestEuropeanSemilight { - @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean); + @include SegoeUISemilight('WestEuropean', $ms-font-path-westeuropean); } diff --git a/src/sass/_Fabric.Typography.Language.Overrides.scss b/src/sass/_Fabric.Typography.Language.Overrides.scss index d0e7d107d..0f5f897f4 100644 --- a/src/sass/_Fabric.Typography.Language.Overrides.scss +++ b/src/sass/_Fabric.Typography.Language.Overrides.scss @@ -9,7 +9,7 @@ // 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($lang-code, $font-family) { - *[lang="#{$lang-code}"] { + *[lang='#{$lang-code}'] { .ms-font-mi, .ms-font-xs, .ms-font-s, diff --git a/src/sass/_Fabric.Utilities.scss b/src/sass/_Fabric.Utilities.scss index 0717c48f0..4afed3226 100644 --- a/src/sass/_Fabric.Utilities.scss +++ b/src/sass/_Fabric.Utilities.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Utility classes and mixins used throughout Fabric. -@import "Fabric.Mixins"; +@import 'Fabric.Mixins'; // The best box is a border box. @mixin ms-u-borderBox { @@ -23,7 +23,7 @@ &::before, &::after { display: table; - content: ""; + content: ''; line-height: 0; } &::after { From 0e81851e5af737d966e24c6d9f0a9228fd643fe9 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 13:00:30 -0800 Subject: [PATCH 02/35] Move animation variables into their own file --- src/sass/_Fabric.Animations.scss | 13 ++----------- src/sass/_Fabric.Common.scss | 6 ++++++ src/sass/variables/_Animations.scss | 10 ++++++++++ 3 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 src/sass/variables/_Animations.scss diff --git a/src/sass/_Fabric.Animations.scss b/src/sass/_Fabric.Animations.scss index a027ba63e..af7636a39 100644 --- a/src/sass/_Fabric.Animations.scss +++ b/src/sass/_Fabric.Animations.scss @@ -5,17 +5,8 @@ // -------------------------------------------------- // 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) !default; -$ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9) !default; -$ms-duration1: 0.167s !default; -$ms-duration2: 0.267s !default; -$ms-duration3: 0.367s !default; -$ms-duration4: 0.467s !default; +// Import variables and mixins +@import './variables/Animations'; // Animation mixin diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index 25ab66e62..ed3622f29 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -1,3 +1,9 @@ +// Variables +@import './variables/Animations'; + +// Mixins + +// Previous @import './Fabric.Animations'; @import './Fabric.Color.Mixins'; @import './Fabric.Color.Variables'; diff --git a/src/sass/variables/_Animations.scss b/src/sass/variables/_Animations.scss new file mode 100644 index 000000000..19ba2d261 --- /dev/null +++ b/src/sass/variables/_Animations.scss @@ -0,0 +1,10 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// @todo: Rename variables to identify their scope. E.g. 'ms-animation-ease1' + +$ms-ease1: cubic-bezier(0.1,0.9,0.2,1) !default; +$ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9) !default; +$ms-duration1: 0.167s !default; +$ms-duration2: 0.267s !default; +$ms-duration3: 0.367s !default; +$ms-duration4: 0.467s !default; From 4cc1ea6d9e7be3ccf792facd317ba1874aa62849 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 13:18:21 -0800 Subject: [PATCH 03/35] Remove duplicate file of Fabric.Mixins.RTL --- src/sass/_Fabric.Common.scss | 1 - src/sass/_Fabric.i18n.scss | 316 ----------------------------------- 2 files changed, 317 deletions(-) delete mode 100644 src/sass/_Fabric.i18n.scss diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index ed3622f29..5f35e118f 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -9,7 +9,6 @@ @import './Fabric.Color.Variables'; @import './Fabric.Grid'; @import './Fabric.Icons'; -@import './Fabric.i18n'; @import './Fabric.Mixins'; @import './Fabric.Mixins.RTL'; @import './Fabric.Responsive.Utilities.Variables'; diff --git a/src/sass/_Fabric.i18n.scss b/src/sass/_Fabric.i18n.scss deleted file mode 100644 index 65450cfab..000000000 --- a/src/sass/_Fabric.i18n.scss +++ /dev/null @@ -1,316 +0,0 @@ -// 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 { - html[dir='ltr'] & { - @content; - } -} - -// Base right-to-left mixin definition. -@mixin RTL { - html[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 From b2b22623ada8b7fb7bee2408359dc778d4a5de92 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 13:52:47 -0800 Subject: [PATCH 04/35] Move all variables into a subfolder --- src/sass/Fabric.Animations.Output.scss | 4 +- src/sass/Fabric.RTL.scss | 10 ++-- .../Fabric.Responsive.Utilities.Output.scss | 4 +- src/sass/Fabric.Utilities.Output.scss | 6 +-- src/sass/Fabric.scss | 11 ++-- src/sass/_Fabric.Animations.scss | 3 +- src/sass/_Fabric.Brand.Icons.scss | 28 ++++------ src/sass/_Fabric.Common.scss | 12 ++--- src/sass/_Fabric.Icons.scss | 7 +-- ...scss => _Fabric.Responsive.Utilities.scss} | 0 src/sass/_Fabric.Responsive.Variables.scss | 35 ------------ src/sass/_Fabric.Typography.Fonts.scss | 21 +------- ..._Fabric.Typography.Language.Overrides.scss | 16 ------ src/sass/_Fabric.Typography.Mixins.scss | 3 ++ src/sass/_Fabric.Typography.Variables.scss | 29 ---------- src/sass/_Fabric.Typography.scss | 2 +- .../{_Animations.scss => _Animation.scss} | 3 ++ src/sass/variables/_BrandIcon.scss | 12 +++++ .../_Color.scss} | 29 +++------- src/sass/variables/_Icon.scss | 7 +++ src/sass/variables/_Responsive.scss | 16 ++++++ src/sass/variables/_Typography.scss | 54 +++++++++++++++++++ .../_ZIndex.scss} | 15 ++---- 23 files changed, 145 insertions(+), 182 deletions(-) rename src/sass/{_Fabric.Responsive.Utilities.Variables.scss => _Fabric.Responsive.Utilities.scss} (100%) delete mode 100644 src/sass/_Fabric.Responsive.Variables.scss delete mode 100644 src/sass/_Fabric.Typography.Variables.scss rename src/sass/variables/{_Animations.scss => _Animation.scss} (94%) create mode 100644 src/sass/variables/_BrandIcon.scss rename src/sass/{_Fabric.Color.Variables.scss => variables/_Color.scss} (92%) create mode 100644 src/sass/variables/_Icon.scss create mode 100644 src/sass/variables/_Responsive.scss create mode 100644 src/sass/variables/_Typography.scss rename src/sass/{_Fabric.ZIndex.Variables.scss => variables/_ZIndex.scss} (79%) diff --git a/src/sass/Fabric.Animations.Output.scss b/src/sass/Fabric.Animations.Output.scss index 29159e3ea..ce070a8f8 100644 --- a/src/sass/Fabric.Animations.Output.scss +++ b/src/sass/Fabric.Animations.Output.scss @@ -5,9 +5,7 @@ // -------------------------------------------------- // 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. +// @todo: Shouldn't keyframes be coming from the mixin? And -webkit-keyframes generated by autoprefixer? @import 'Fabric.Animations'; diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 30739e46c..c3dd07b30 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -5,18 +5,21 @@ // -------------------------------------------------- // Fabric Core Module Loader (RTL) +// Variables +@import './variables/Color'; +@import './variables/Responsive'; +@import './variables/Typography'; +@import './variables/ZIndex'; + // 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'; @@ -29,7 +32,6 @@ @import './Fabric.Animations.RTL.Output'; // Responsive -@import './Fabric.Responsive.Variables'; @import './Fabric.Responsive.Utilities.Output'; // Grid diff --git a/src/sass/Fabric.Responsive.Utilities.Output.scss b/src/sass/Fabric.Responsive.Utilities.Output.scss index 6aae87598..62bf237f7 100644 --- a/src/sass/Fabric.Responsive.Utilities.Output.scss +++ b/src/sass/Fabric.Responsive.Utilities.Output.scss @@ -5,8 +5,8 @@ // -------------------------------------------------- // Responsive utilities based on defined variables, component visibility, // and size for different displays. -@import './Fabric.Responsive.Variables'; -@import './Fabric.Responsive.Utilities.Variables'; +@import './variables/Responsive'; +@import './Fabric.Responsive.Utilities'; //== Responsive visiblity classes // diff --git a/src/sass/Fabric.Utilities.Output.scss b/src/sass/Fabric.Utilities.Output.scss index 16ccda1f9..658c4089f 100644 --- a/src/sass/Fabric.Utilities.Output.scss +++ b/src/sass/Fabric.Utilities.Output.scss @@ -32,15 +32,15 @@ // Use to hide content while still making it readable by screen reader (Accessibility) .ms-u-screenReaderOnly { - @include ms-u-screenReaderOnly + @include ms-u-screenReaderOnly; } // Use to add truncation with ellipsis .ms-u-textTruncate { - @include ms-u-textTruncate + @include ms-u-textTruncate; } // Use to disable text wrapping .ms-u-noWrap{ - @include ms-u-noWrap + @include ms-u-noWrap; } \ No newline at end of file diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 1626a5c30..957b88f39 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -4,19 +4,21 @@ // Office UI Fabric // Core Module Loader +// Variables +@import './variables/Color'; +@import './variables/Responsive'; +@import './variables/Typography'; +@import './variables/ZIndex'; // 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.Mixins'; @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; @@ -32,8 +34,7 @@ @import './Fabric.Animations.Output'; // Responsive -@import './Fabric.Responsive.Variables'; -@import './Fabric.Responsive.Utilities.Variables'; +@import './Fabric.Responsive.Utilities'; @import './Fabric.Responsive.Utilities.Output'; // Grid diff --git a/src/sass/_Fabric.Animations.scss b/src/sass/_Fabric.Animations.scss index af7636a39..ae3fc5620 100644 --- a/src/sass/_Fabric.Animations.scss +++ b/src/sass/_Fabric.Animations.scss @@ -6,7 +6,8 @@ // Fabric Animations // Import variables and mixins -@import './variables/Animations'; +// @todo: Is import necessary here? +@import './variables/Animation'; // Animation mixin diff --git a/src/sass/_Fabric.Brand.Icons.scss b/src/sass/_Fabric.Brand.Icons.scss index f36fd6683..68d204a94 100644 --- a/src/sass/_Fabric.Brand.Icons.scss +++ b/src/sass/_Fabric.Brand.Icons.scss @@ -1,38 +1,28 @@ -// Images Path for Product Icons -$productImagesPath: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png'; - -// Images Path for Document Icons -$documentImagesPath: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png'; - -// Icon Names -$productIconList: access excel infopath office onedrive onenote outlook powerpoint project sharepoint visio word; - -$documentIconList: accdb csv docx dotx mpp mpt odp ods odt one onepkg onetoc potx ppsx pptx pub vsdx vssx vstx xls xlsx xltx xsn; - -// Icon Sizes -$iconSizes: 16 48 96; +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// Variables +@import './variables/BrandIcon'; // Generate Icon Classes for product and document icons @mixin brandIconClasses($retina) { // Generate Product icon list - @each $icon in $productIconList { + @each $icon in $ms-productIcons { .ms-BrandIcon--#{$icon} { - @include brandIconSizes($icon, $retina, $productImagesPath); + @include brandIconSizes($icon, $retina, $ms-productImagesPath); } } // Generate Document icon list - @each $icon in $documentIconList { + @each $icon in $ms-documentIcons { .ms-BrandIcon--#{$icon} { - @include brandIconSizes($icon, $retina, $documentImagesPath); + @include brandIconSizes($icon, $retina, $ms-documentImagesPath); } } } // Generate size classes for each icon @mixin brandIconSizes($icon, $retina, $imagesPath) { - @each $size in $iconSizes { + @each $size in $ms-brandIconSizes { &.ms-BrandIcon--Icon#{$size} { background-image: url(#{$imagesPath}/#{$icon}_#{$size}x#{$retina}.png); } @@ -41,7 +31,7 @@ $iconSizes: 16 48 96; // Generate generic icon size classes @mixin brandIconSizesClasses() { - @each $size in $iconSizes { + @each $size in $ms-brandIconSizes { .ms-BrandIcon--Icon#{$size} { background-size: 100% 100%; width: #{$size}px; diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index 5f35e118f..9131505fe 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -1,21 +1,19 @@ // Variables -@import './variables/Animations'; +@import './variables/Animation'; +@import './variables/Color'; +@import './variables/Responsive'; +@import './variables/ZIndex'; // Mixins // Previous @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.Responsive.Utilities'; @import './Fabric.Typography'; -@import './Fabric.Typography.Fonts'; -@import './Fabric.Typography.Variables'; @import './Fabric.Typography.Mixins'; @import './Fabric.Utilities'; -@import './Fabric.ZIndex.Variables'; diff --git a/src/sass/_Fabric.Icons.scss b/src/sass/_Fabric.Icons.scss index 24278d336..7f255dadb 100644 --- a/src/sass/_Fabric.Icons.scss +++ b/src/sass/_Fabric.Icons.scss @@ -5,6 +5,7 @@ // -------------------------------------------------- // Icon mixin definitions +@import './variables/Icon'; // Base icon definition @mixin ms-Icon { @@ -56,12 +57,6 @@ } } -// Variables: Icon sizes -$ms-icon-size-xs: 10px; -$ms-icon-size-s: 12px; -$ms-icon-size-m: 16px; -$ms-icon-size-l: 20px; - // Modifiers: Icon sizes @mixin ms-Icon--xs { font-size: $ms-icon-size-xs; } @mixin ms-Icon--s { font-size: $ms-icon-size-s; } diff --git a/src/sass/_Fabric.Responsive.Utilities.Variables.scss b/src/sass/_Fabric.Responsive.Utilities.scss similarity index 100% rename from src/sass/_Fabric.Responsive.Utilities.Variables.scss rename to src/sass/_Fabric.Responsive.Utilities.scss diff --git a/src/sass/_Fabric.Responsive.Variables.scss b/src/sass/_Fabric.Responsive.Variables.scss deleted file mode 100644 index 65c99851f..000000000 --- a/src/sass/_Fabric.Responsive.Variables.scss +++ /dev/null @@ -1,35 +0,0 @@ -// 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 !default; - -// Medium screen / tablet (480px - 639px) -$ms-screen-md-min: 480px !default; - -// Large screen / tablet (640px - 1023px) -$ms-screen-lg-min: 640px !default; - -// Extra large screen / tablet (1024px - 1365px) -$ms-screen-xl-min: 1024px !default; - -// Extra extra large screen / desktop (1366px - 1919px) -$ms-screen-xxl-min: 1366px !default; - -// Extra extra extra large screen / desktop (1920px and up) -$ms-screen-xxxl-min: 1920px !default; - -// 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/src/sass/_Fabric.Typography.Fonts.scss b/src/sass/_Fabric.Typography.Fonts.scss index 28489bf11..59d29aeb4 100644 --- a/src/sass/_Fabric.Typography.Fonts.scss +++ b/src/sass/_Fabric.Typography.Fonts.scss @@ -5,25 +5,8 @@ // -------------------------------------------------- // Font definitions - -// Font weights. -$ms-font-name: 'Segoe UI' !default; - - -// Font paths. -$ms-font-directory: 'https://static2.sharepointonline.com/files/fabric/assets/fonts/' !default; -$ms-font-path-arabic: 'segoeui-arabic' !default; -$ms-font-path-cyrillic: 'segoeui-cyrillic' !default; -$ms-font-path-easteuropean: 'segoeui-easteuropean' !default; -$ms-font-path-greek: 'segoeui-greek' !default; -$ms-font-path-hebrew: 'segoeui-hebrew' !default; -$ms-font-path-vietnamese: 'segoeui-vietnamese' !default; -$ms-font-path-westeuropean: 'segoeui-westeuropean' !default; - - -/* - 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 -*/ +// Variables +@import './variables/Typography'; // Mixins to generate @font-face rules for unique languages. @mixin SegoeUILight($ms-font-language, $ms-font-path) { diff --git a/src/sass/_Fabric.Typography.Language.Overrides.scss b/src/sass/_Fabric.Typography.Language.Overrides.scss index 0f5f897f4..1499c493b 100644 --- a/src/sass/_Fabric.Typography.Language.Overrides.scss +++ b/src/sass/_Fabric.Typography.Language.Overrides.scss @@ -32,19 +32,3 @@ } } } - -// 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 !default; -$ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base !default; -$ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base !default; -$ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base !default; -$ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base !default; - -// Variables for each of the web font stacks. -$ms-font-stack-arabic: 'Segoe UI Arabic', $ms-font-family-base !default; -$ms-font-stack-cyrillic: 'Segoe UI Cyrillic', $ms-font-family-base !default; -$ms-font-stack-eastEuropean: 'Segoe UI EastEuropean', $ms-font-family-base !default; -$ms-font-stack-greek: 'Segoe UI Greek', $ms-font-family-base !default; -$ms-font-stack-hebrew: 'Segoe UI Hebrew', $ms-font-family-base !default; -$ms-font-stack-vietnamese: 'Segoe UI Vietnamese', $ms-font-family-base !default; -$ms-font-stack-leelawadee: 'Leelawadee UI', 'Kmer UI', $ms-font-family-base !default; \ No newline at end of file diff --git a/src/sass/_Fabric.Typography.Mixins.scss b/src/sass/_Fabric.Typography.Mixins.scss index a96566452..1030a88f2 100644 --- a/src/sass/_Fabric.Typography.Mixins.scss +++ b/src/sass/_Fabric.Typography.Mixins.scss @@ -5,6 +5,9 @@ // -------------------------------------------------- // Fabric Core Typography mixins +// Variables +@import './variables/Typography'; + @mixin ms-baseFont { font-family: $ms-font-family-base; -webkit-font-smoothing: antialiased; diff --git a/src/sass/_Fabric.Typography.Variables.scss b/src/sass/_Fabric.Typography.Variables.scss deleted file mode 100644 index 3c2f02ccf..000000000 --- a/src/sass/_Fabric.Typography.Variables.scss +++ /dev/null @@ -1,29 +0,0 @@ -// 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-system-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default; -$ms-font-family-base: 'Segoe UI WestEuropean', $ms-font-system-base !default; - -$ms-font-weight-light: 100 !default; -$ms-font-weight-regular: 400 !default; -$ms-font-weight-semilight: 300 !default; -$ms-font-weight-semibold: 600 !default; - - -//== Type sizes -// - -$ms-font-size-su: 42px !default; -$ms-font-size-xxl: 28px !default; -$ms-font-size-xl: 21px !default; -$ms-font-size-l: 17px !default; -$ms-font-size-m-plus: 15px !default; -$ms-font-size-m: 14px !default; -$ms-font-size-s-plus: 13px !default; -$ms-font-size-s: 12px !default; -$ms-font-size-xs: 11px !default; -$ms-font-size-mi: 10px !default; diff --git a/src/sass/_Fabric.Typography.scss b/src/sass/_Fabric.Typography.scss index 28aadf7a6..d3056b3ef 100644 --- a/src/sass/_Fabric.Typography.scss +++ b/src/sass/_Fabric.Typography.scss @@ -4,7 +4,7 @@ // Office UI Fabric // -------------------------------------------------- // Typographic mixins arranged with appropriate size and family combinations. -@import 'Fabric.Typography.Variables'; + @import 'Fabric.Typography.Mixins'; // Super Styles (LIMITED USE) diff --git a/src/sass/variables/_Animations.scss b/src/sass/variables/_Animation.scss similarity index 94% rename from src/sass/variables/_Animations.scss rename to src/sass/variables/_Animation.scss index 19ba2d261..eb9e0d0d0 100644 --- a/src/sass/variables/_Animations.scss +++ b/src/sass/variables/_Animation.scss @@ -2,8 +2,11 @@ // @todo: Rename variables to identify their scope. E.g. 'ms-animation-ease1' +// Easings $ms-ease1: cubic-bezier(0.1,0.9,0.2,1) !default; $ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9) !default; + +// Durations $ms-duration1: 0.167s !default; $ms-duration2: 0.267s !default; $ms-duration3: 0.367s !default; diff --git a/src/sass/variables/_BrandIcon.scss b/src/sass/variables/_BrandIcon.scss new file mode 100644 index 000000000..91723bf3a --- /dev/null +++ b/src/sass/variables/_BrandIcon.scss @@ -0,0 +1,12 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Image paths +$ms-productImagesPath: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png'; +$ms-documentImagesPath: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png'; + +// Names +$ms-productIcons: access excel infopath office onedrive onenote outlook powerpoint project sharepoint visio word; +$ms-documentIcons: accdb csv docx dotx mpp mpt odp ods odt one onepkg onetoc potx ppsx pptx pub vsdx vssx vstx xls xlsx xltx xsn; + +// Sizes +$ms-brandIconSizes: 16 48 96; diff --git a/src/sass/_Fabric.Color.Variables.scss b/src/sass/variables/_Color.scss similarity index 92% rename from src/sass/_Fabric.Color.Variables.scss rename to src/sass/variables/_Color.scss index 3767790a1..ad654f5ea 100644 --- a/src/sass/_Fabric.Color.Variables.scss +++ b/src/sass/variables/_Color.scss @@ -1,13 +1,8 @@ // 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 +// @todo: Rationalize the variable names here? We have ms-color-themeDarker and then ms-font-size-m. Should it be ms-color-theme-darker? - -//== Theme Colors -// +// Theme $ms-color-themeDarker: #004578 !default; $ms-color-themeDark: #005a9e !default; $ms-color-themeDarkAlt: #106ebe !default; @@ -18,9 +13,7 @@ $ms-color-themeLight: #b3d6f2 !default; $ms-color-themeLighter: #deecf9 !default; $ms-color-themeLighterAlt: #eff6fc !default; - -//== Grayscale Colors -// +// Neutral $ms-color-black: #000000 !default; $ms-color-neutralDark: #212121 !default; $ms-color-neutralPrimary: #333333 !default; @@ -36,14 +29,12 @@ $ms-color-neutralLighter: #f4f4f4 !default; $ms-color-neutralLighterAlt: #f8f8f8 !default; $ms-color-white: #ffffff !default; -//== Translucent Colors -// +// Translucent +// @todo: Where are these used? I don't think we've ever documented them. $ms-color-blackTranslucent40: rgba(0,0,0,.4) !default; $ms-color-whiteTranslucent40: rgba(255,255,255,.4) !default; - -//== Core brand and accent colors -// +// Accent $ms-color-yellow: #ffb900 !default; $ms-color-yellowLight: #fff100 !default; $ms-color-orange: #d83b01 !default; @@ -68,9 +59,7 @@ $ms-color-greenDark: #004b1c !default; $ms-color-green: #107c10 !default; $ms-color-greenLight: #bad80a !default; - -//== Message colors -// +// Message $ms-color-info: $ms-color-neutralSecondaryAlt !default; $ms-color-infoBackground: $ms-color-neutralLighter !default; $ms-color-success: $ms-color-green !default; @@ -84,9 +73,7 @@ $ms-color-warningBackground: #fff4ce !default; $ms-color-error: $ms-color-redDark !default; $ms-color-errorBackground: #fde7e9 !default; - -//== High contrast colors -// +// High contrast colors $ms-color-contrastBlackDisabled: #00ff00 !default; $ms-color-contrastWhiteDisabled: #600000 !default; $ms-color-contrastBlackSelected: #1AEBFF !default; diff --git a/src/sass/variables/_Icon.scss b/src/sass/variables/_Icon.scss new file mode 100644 index 000000000..ccfa32db5 --- /dev/null +++ b/src/sass/variables/_Icon.scss @@ -0,0 +1,7 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Sizes +$ms-icon-size-xs: 10px; +$ms-icon-size-s: 12px; +$ms-icon-size-m: 16px; +$ms-icon-size-l: 20px; diff --git a/src/sass/variables/_Responsive.scss b/src/sass/variables/_Responsive.scss new file mode 100644 index 000000000..3ee8c4af7 --- /dev/null +++ b/src/sass/variables/_Responsive.scss @@ -0,0 +1,16 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Minimum widths for each breakpoint +$ms-screen-sm-min: 320px !default; +$ms-screen-md-min: 480px !default; +$ms-screen-lg-min: 640px !default; +$ms-screen-xl-min: 1024px !default; +$ms-screen-xxl-min: 1366px !default; +$ms-screen-xxxl-min: 1920px !default; + +// Maximum widths for each breakpoint +$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); diff --git a/src/sass/variables/_Typography.scss b/src/sass/variables/_Typography.scss new file mode 100644 index 000000000..7f570ebad --- /dev/null +++ b/src/sass/variables/_Typography.scss @@ -0,0 +1,54 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Font name +$ms-font-name: 'Segoe UI' !default; + +// Font directory and paths +$ms-font-directory: 'https://static2.sharepointonline.com/files/fabric/assets/fonts/' !default; +$ms-font-path-arabic: 'segoeui-arabic' !default; +$ms-font-path-cyrillic: 'segoeui-cyrillic' !default; +$ms-font-path-easteuropean: 'segoeui-easteuropean' !default; +$ms-font-path-greek: 'segoeui-greek' !default; +$ms-font-path-hebrew: 'segoeui-hebrew' !default; +$ms-font-path-vietnamese: 'segoeui-vietnamese' !default; +$ms-font-path-westeuropean: 'segoeui-westeuropean' !default; + +// @todo: Confusing variable names in here + +// Base font stacks +$ms-font-system-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default; +$ms-font-family-base: 'Segoe UI WestEuropean', $ms-font-system-base !default; + +// Localized font stacks that use non-distributed system fonts +$ms-font-stack-japanese: 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, $ms-font-system-base !default; +$ms-font-stack-korean: 'Malgun Gothic', Gulim, $ms-font-system-base !default; +$ms-font-stack-chinese-simplified: 'Microsoft Yahei', Verdana, Simsun, $ms-font-system-base !default; +$ms-font-stack-chinese-traditional: 'Microsoft Jhenghei', Pmingliu, $ms-font-system-base !default; +$ms-font-stack-hindi: 'Nirmala UI', $ms-font-system-base !default; + +// Localized font stacks that include web fonts +$ms-font-stack-arabic: 'Segoe UI Arabic', $ms-font-family-base !default; +$ms-font-stack-cyrillic: 'Segoe UI Cyrillic', $ms-font-family-base !default; +$ms-font-stack-eastEuropean: 'Segoe UI EastEuropean', $ms-font-family-base !default; +$ms-font-stack-greek: 'Segoe UI Greek', $ms-font-family-base !default; +$ms-font-stack-hebrew: 'Segoe UI Hebrew', $ms-font-family-base !default; +$ms-font-stack-vietnamese: 'Segoe UI Vietnamese', $ms-font-family-base !default; +$ms-font-stack-leelawadee: 'Leelawadee UI', 'Kmer UI', $ms-font-family-base !default; + +// Weights +$ms-font-weight-light: 100 !default; +$ms-font-weight-regular: 400 !default; +$ms-font-weight-semilight: 300 !default; +$ms-font-weight-semibold: 600 !default; + +// Sizes +$ms-font-size-su: 42px !default; +$ms-font-size-xxl: 28px !default; +$ms-font-size-xl: 21px !default; +$ms-font-size-l: 17px !default; +$ms-font-size-m-plus: 15px !default; +$ms-font-size-m: 14px !default; +$ms-font-size-s-plus: 13px !default; +$ms-font-size-s: 12px !default; +$ms-font-size-xs: 11px !default; +$ms-font-size-mi: 10px !default; diff --git a/src/sass/_Fabric.ZIndex.Variables.scss b/src/sass/variables/_ZIndex.scss similarity index 79% rename from src/sass/_Fabric.ZIndex.Variables.scss rename to src/sass/variables/_ZIndex.scss index 8b9826673..4dea5b3fb 100644 --- a/src/sass/_Fabric.ZIndex.Variables.scss +++ b/src/sass/variables/_ZIndex.scss @@ -1,12 +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 -// -------------------------------------------------- -// Z-Index Layeringz - - -// Base Layer Variables +// Large ranges $ms-zIndex-0: 0 !default; $ms-zIndex-1: 100 !default; $ms-zIndex-2: 200 !default; @@ -14,14 +8,13 @@ $ms-zIndex-3: 300 !default; $ms-zIndex-4: 400 !default; $ms-zIndex-5: 500 !default; -// Base Layer Modifier Variables +// Small ranges $ms-zIndex-back: 0 !default; $ms-zIndex-middle: 5 !default; $ms-zIndex-front: 10 !default; - -// Fabric Component Base Layer Assignments - +// Standard component indexes +// @todo: Don't think these should be in Fabric Core. $ms-zIndex-Callout: $ms-zIndex-1 !default; $ms-zIndex-ContextualMenu: $ms-zIndex-1 !default; $ms-zIndex-Overlay: $ms-zIndex-2 !default; From d69948efd4d77c8278394ba14ffa497582df1b7b Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 13:59:54 -0800 Subject: [PATCH 05/35] =?UTF-8?q?Rename=20=E2=80=98typography=E2=80=99=20v?= =?UTF-8?q?ariables=20to=20=E2=80=98font=E2=80=99=20to=20match=20actual=20?= =?UTF-8?q?variable=20names?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sass/Fabric.Icons.Output.scss | 1 + src/sass/Fabric.RTL.scss | 6 +++++- src/sass/Fabric.scss | 3 +-- src/sass/_Fabric.Common.scss | 3 +++ src/sass/_Fabric.Icons.scss | 3 +++ src/sass/_Fabric.Typography.Fonts.scss | 3 --- src/sass/_Fabric.Typography.Mixins.scss | 3 --- src/sass/variables/{_Typography.scss => _Font.scss} | 0 8 files changed, 13 insertions(+), 9 deletions(-) rename src/sass/variables/{_Typography.scss => _Font.scss} (100%) diff --git a/src/sass/Fabric.Icons.Output.scss b/src/sass/Fabric.Icons.Output.scss index 0f92ce04f..d6ba50a6a 100644 --- a/src/sass/Fabric.Icons.Output.scss +++ b/src/sass/Fabric.Icons.Output.scss @@ -5,6 +5,7 @@ // -------------------------------------------------- // Icon definitions +// @todo: This might not be needed. @import './Fabric.Icons'; // Base icon definition diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index c3dd07b30..895308168 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -6,9 +6,13 @@ // Fabric Core Module Loader (RTL) // Variables +// @todo: Just import _Fabric.Common here instead of duplicating the imports? +@import './variables/Animation'; +@import './variables/BrandIcon'; @import './variables/Color'; +@import './variables/Font'; +@import './variables/Icon'; @import './variables/Responsive'; -@import './variables/Typography'; @import './variables/ZIndex'; // Common utilities diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 957b88f39..315a00a8c 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -7,8 +7,7 @@ // Variables @import './variables/Color'; @import './variables/Responsive'; -@import './variables/Typography'; -@import './variables/ZIndex'; +@import './variables/Font'; // Common utilities @import './Fabric.Utilities.Output'; diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index 9131505fe..62c2945dd 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -1,6 +1,9 @@ // Variables @import './variables/Animation'; +@import './variables/BrandIcon'; @import './variables/Color'; +@import './variables/Font'; +@import './variables/Icon'; @import './variables/Responsive'; @import './variables/ZIndex'; diff --git a/src/sass/_Fabric.Icons.scss b/src/sass/_Fabric.Icons.scss index 7f255dadb..c220ed91c 100644 --- a/src/sass/_Fabric.Icons.scss +++ b/src/sass/_Fabric.Icons.scss @@ -5,7 +5,10 @@ // -------------------------------------------------- // Icon mixin definitions +// Variables +// @todo: Why are these necessary? Variables should already be available @import './variables/Icon'; +@import './variables/ZIndex'; // Base icon definition @mixin ms-Icon { diff --git a/src/sass/_Fabric.Typography.Fonts.scss b/src/sass/_Fabric.Typography.Fonts.scss index 59d29aeb4..80acaab7d 100644 --- a/src/sass/_Fabric.Typography.Fonts.scss +++ b/src/sass/_Fabric.Typography.Fonts.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- // Font definitions -// Variables -@import './variables/Typography'; - // Mixins to generate @font-face rules for unique languages. @mixin SegoeUILight($ms-font-language, $ms-font-path) { @font-face { diff --git a/src/sass/_Fabric.Typography.Mixins.scss b/src/sass/_Fabric.Typography.Mixins.scss index 1030a88f2..a96566452 100644 --- a/src/sass/_Fabric.Typography.Mixins.scss +++ b/src/sass/_Fabric.Typography.Mixins.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- // Fabric Core Typography mixins -// Variables -@import './variables/Typography'; - @mixin ms-baseFont { font-family: $ms-font-family-base; -webkit-font-smoothing: antialiased; diff --git a/src/sass/variables/_Typography.scss b/src/sass/variables/_Font.scss similarity index 100% rename from src/sass/variables/_Typography.scss rename to src/sass/variables/_Font.scss From f227976135fcd568d28a244de5669d2949e42a21 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 14:09:07 -0800 Subject: [PATCH 06/35] Add output license warning back --- src/sass/_Fabric.Typography.Fonts.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/sass/_Fabric.Typography.Fonts.scss b/src/sass/_Fabric.Typography.Fonts.scss index 80acaab7d..a6604304e 100644 --- a/src/sass/_Fabric.Typography.Fonts.scss +++ b/src/sass/_Fabric.Typography.Fonts.scss @@ -5,6 +5,10 @@ // -------------------------------------------------- // Font definitions +/* + 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 { From 853fd7fa46b0b8f3a9dcd56ad045a569d18b3ed5 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 14:39:17 -0800 Subject: [PATCH 07/35] Remove -webkit prefixed keyframes. No difference in the output CSS, as these were already being removed by Autoprefixer. --- src/sass/Fabric.Animations.Output.scss | 112 ------------------------- 1 file changed, 112 deletions(-) diff --git a/src/sass/Fabric.Animations.Output.scss b/src/sass/Fabric.Animations.Output.scss index ce070a8f8..a9461947b 100644 --- a/src/sass/Fabric.Animations.Output.scss +++ b/src/sass/Fabric.Animations.Output.scss @@ -13,10 +13,6 @@ .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); } @@ -26,10 +22,6 @@ .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); } @@ -39,10 +31,6 @@ .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); } @@ -52,10 +40,6 @@ .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); } @@ -65,10 +49,6 @@ .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); } @@ -78,10 +58,6 @@ .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); } @@ -91,10 +67,6 @@ .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); } @@ -104,10 +76,6 @@ .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); } @@ -117,10 +85,6 @@ .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); } @@ -130,10 +94,6 @@ .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); } @@ -143,10 +103,6 @@ .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); } @@ -156,10 +112,6 @@ .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); } @@ -169,10 +121,6 @@ .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); } @@ -182,10 +130,6 @@ .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); } @@ -195,10 +139,6 @@ .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); } @@ -208,10 +148,6 @@ .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); } @@ -221,10 +157,6 @@ .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); } @@ -234,10 +166,6 @@ .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); } @@ -247,10 +175,6 @@ .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); } @@ -260,10 +184,6 @@ .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); } @@ -273,10 +193,6 @@ .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); } @@ -286,10 +202,6 @@ .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); } @@ -299,10 +211,6 @@ .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); } @@ -312,10 +220,6 @@ .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); } @@ -334,10 +238,6 @@ .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; } @@ -356,10 +256,6 @@ .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; } @@ -369,10 +265,6 @@ .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); } @@ -382,10 +274,6 @@ .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); } From 94131c31d0fcb2ef6ade895177109d888f9e220f Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 15:24:52 -0800 Subject: [PATCH 08/35] Add mixin that outputs the @keyframes for every animation --- src/sass/Fabric.Animations.Output.scss | 118 +----------------- src/sass/mixins/_Animation.Keyframes.scss | 145 ++++++++++++++++++++++ 2 files changed, 151 insertions(+), 112 deletions(-) create mode 100644 src/sass/mixins/_Animation.Keyframes.scss diff --git a/src/sass/Fabric.Animations.Output.scss b/src/sass/Fabric.Animations.Output.scss index a9461947b..eebb1c37d 100644 --- a/src/sass/Fabric.Animations.Output.scss +++ b/src/sass/Fabric.Animations.Output.scss @@ -9,221 +9,131 @@ @import 'Fabric.Animations'; +// Mixins +@import './mixins/Animation.Keyframes'; + +// Output all @keyframes needed for the animations +@include ms-animation-keyframes; + // slideRightIn10 .ms-u-slideRightIn10 { @include ms-u-slideRightIn10; } -@keyframes slideRightIn10 { - from { transform:translate3d(-10px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideRightIn20 .ms-u-slideRightIn20 { @include ms-u-slideRightIn20; } -@keyframes slideRightIn20 { - from { transform:translate3d(-20px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideRightIn40 .ms-u-slideRightIn40 { @include ms-u-slideRightIn40; } -@keyframes slideRightIn40 { - from { transform:translate3d(-40px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideLeftIn10 .ms-u-slideLeftIn10 { @include ms-u-slideLeftIn10; } -@keyframes slideLeftIn10 { - from { transform:translate3d(10px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideLeftIn20 .ms-u-slideLeftIn20 { @include ms-u-slideLeftIn20; } -@keyframes slideLeftIn20 { - from { transform:translate3d(20px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideLeftIn40 .ms-u-slideLeftIn40 { @include ms-u-slideLeftIn40; } -@keyframes slideLeftIn40 { - from { transform:translate3d(40px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideRightIn400 .ms-u-slideRightIn400 { @include ms-u-slideRightIn400; } -@keyframes slideRightIn400 { - from { transform:translate3d(-400px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideLeftIn400 .ms-u-slideLeftIn400 { @include ms-u-slideLeftIn400; } -@keyframes slideLeft400 { - from { transform:translate3d(400px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideUpIn20 .ms-u-slideUpIn20 { @include ms-u-slideUpIn20; } -@keyframes slideUpIn20 { - from { transform:translate3d(0px, 20px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideUpIn10 .ms-u-slideUpIn10 { @include ms-u-slideUpIn10; } -@keyframes slideUpIn10 { - from { transform:translate3d(0px, 10px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideDownIn20 .ms-u-slideDownIn20 { @include ms-u-slideDownIn20; } -@keyframes slideDownIn20 { - from { transform:translate3d(0px, -20px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideDownIn10 .ms-u-slideDownIn10 { @include ms-u-slideDownIn10; } -@keyframes slideDownIn10 { - from { transform:translate3d(0px, -10px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } -} // slideRightOut40 .ms-u-slideRightOut40 { @include ms-u-slideRightOut40; } -@keyframes slideRightOut40 { - from { transform:translate3d(0px, 0px, 0px); } - to { transform:translate3d(40px, 0px, 0px); } -} // slideLeftOut40 .ms-u-slideLeftOut40 { @include ms-u-slideLeftOut40; } -@keyframes slideLeftOut40 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(-40px, 0px, 0px); } -} // slideRightOut400 .ms-u-slideRightOut400 { @include ms-u-slideRightOut400; } -@keyframes slideRightOut400 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(400px, 0px, 0px); } -} // slideLeftOut400 .ms-u-slideLeftOut400 { @include ms-u-slideLeftOut400; } -@keyframes slideLeftOut400 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(-400px, 0px, 0px); } -} // slideUpOut20 .ms-u-slideUpOut20 { @include ms-u-slideUpOut20; } -@keyframes slideUpOut20 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, -20px, 0px); } -} // slideUpOut10 .ms-u-slideUpOut10 { @include ms-u-slideUpOut10; } -@keyframes slideUpOut10 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, -10px, 0px); } -} // slideDownOut20 .ms-u-slideDownOut20 { @include ms-u-slideDownOut20; } -@keyframes slideDownOut20 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, 20px, 0px); } -} // slideDownOut10 .ms-u-slideDownOut10 { @include ms-u-slideDownOut10; } -@keyframes slideDownOut10 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, 10px, 0px); } -} // scaleUpIn100 .ms-u-scaleUpIn100 { @include ms-u-scaleUpIn100; } -@keyframes scaleUp100 { - from { transform:scale3d(.98, .98, 1); } - to { transform:scale3d(1, 1, 1); } -} // scaleDownIn100 .ms-u-scaleDownIn100 { @include ms-u-scaleDownIn100; } -@keyframes scaleDown100 { - from { transform:scale3d(1.03, 1.03, 1); } - to { transform:scale3d(1, 1, 1); } -} // scaleUpOut103 .ms-u-scaleUpOut103 { @include ms-u-scaleUpOut103; } -@keyframes scaleUp103 { - from { transform:scale3d(1, 1, 1); } - to { transform:scale3d(1.03, 1.03, 1); } -} // scaleDownOut98 .ms-u-scaleDownOut98 { @include ms-u-scaleDownOut98; } -@keyframes scaleDown98 { - from { transform:scale3d(1, 1, 1); } - to { transform:scale3d(0.98, 0.98, 1); } -} // fadeIn .ms-u-fadeIn400 { @@ -238,10 +148,6 @@ .ms-u-fadeIn500 { @include ms-u-fadeIn500; } -@keyframes fadeIn { - from { opacity: 0; animation-timing-function: $ms-ease2; } - to { opacity: 1; } -} // fadeOut .ms-u-fadeOut400 { @@ -256,28 +162,16 @@ .ms-u-fadeOut500 { @include ms-u-fadeOut500; } -@keyframes fadeOut { - from { opacity: 1; animation-timing-function: $ms-ease2; } - to { opacity: 0; } -} // rotate90deg .ms-u-rotate90deg { @include ms-u-rotate90deg; } -@keyframes rotate90 { - from { transform:rotateZ(0deg); } - to { transform:rotateZ(90deg); } -} // rotateN90deg .ms-u-rotateN90deg { @include ms-u-rotateN90deg; } -@keyframes rotateN90 { - from { transform:rotateZ(90deg); } - to { transform:rotateZ(0deg); } -} // expandCollapse400 .ms-u-expandCollapse400 { diff --git a/src/sass/mixins/_Animation.Keyframes.scss b/src/sass/mixins/_Animation.Keyframes.scss new file mode 100644 index 000000000..d6a5ab07e --- /dev/null +++ b/src/sass/mixins/_Animation.Keyframes.scss @@ -0,0 +1,145 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// A mixin that outputs they @keyframes needed for all animations. +// @todo: Have this output only the @keyframes needed by a subset of animations? +@mixin ms-animation-keyframes { + @keyframes slideRightIn10 { + from { transform:translate3d(-10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightIn20 { + from { transform:translate3d(-20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightIn40 { + from { transform:translate3d(-40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeftIn10 { + from { transform:translate3d(10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeftIn20 { + from { transform:translate3d(20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeftIn40 { + from { transform:translate3d(40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightIn400 { + from { transform:translate3d(-400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeft400 { + from { transform:translate3d(400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideUpIn20 { + from { transform:translate3d(0px, 20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideUpIn10 { + from { transform:translate3d(0px, 10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideDownIn20 { + from { transform:translate3d(0px, -20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideDownIn10 { + from { transform:translate3d(0px, -10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightOut40 { + from { transform:translate3d(0px, 0px, 0px); } + to { transform:translate3d(40px, 0px, 0px); } + } + + @keyframes slideLeftOut40 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-40px, 0px, 0px); } + } + + @keyframes slideRightOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(400px, 0px, 0px); } + } + + @keyframes slideLeftOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-400px, 0px, 0px); } + } + + @keyframes slideUpOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -20px, 0px); } + } + + @keyframes slideUpOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -10px, 0px); } + } + + @keyframes slideDownOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 20px, 0px); } + } + + @keyframes slideDownOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 10px, 0px); } + } + + @keyframes scaleUp100 { + from { transform:scale3d(.98, .98, 1); } + to { transform:scale3d(1, 1, 1); } + } + + @keyframes scaleDown100 { + from { transform:scale3d(1.03, 1.03, 1); } + to { transform:scale3d(1, 1, 1); } + } + + @keyframes scaleUp103 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(1.03, 1.03, 1); } + } + + @keyframes scaleDown98 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(0.98, 0.98, 1); } + } + + @keyframes fadeIn { + from { opacity: 0; animation-timing-function: $ms-ease2; } + to { opacity: 1; } + } + + @keyframes fadeOut { + from { opacity: 1; animation-timing-function: $ms-ease2; } + to { opacity: 0; } + } + + @keyframes rotate90 { + from { transform:rotateZ(0deg); } + to { transform:rotateZ(90deg); } + } + + @keyframes rotateN90 { + from { transform:rotateZ(90deg); } + to { transform:rotateZ(0deg); } + } +} From 6e355328c79720e70d6035c70c358c4c16cb9fed Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 15:32:44 -0800 Subject: [PATCH 09/35] =?UTF-8?q?Reorder=20keyframes=20in=20sequence=20and?= =?UTF-8?q?=20rename=20=E2=80=98slideLeft400=E2=80=99=20to=20=E2=80=98slid?= =?UTF-8?q?eLeftIn400=E2=80=99=20to=20match=20other=20names?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sass/_Fabric.Animations.RTL.scss | 2 +- src/sass/_Fabric.Animations.scss | 2 +- src/sass/mixins/_Animation.Keyframes.scss | 78 +++++++++++------------ 3 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/sass/_Fabric.Animations.RTL.scss b/src/sass/_Fabric.Animations.RTL.scss index c6d1a6190..60c3ba7db 100644 --- a/src/sass/_Fabric.Animations.RTL.scss +++ b/src/sass/_Fabric.Animations.RTL.scss @@ -40,7 +40,7 @@ // slideRightIn400 @mixin ms-u-slideRightIn400 { - @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1); + @include animationMix((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); } // slideLeftIn400 diff --git a/src/sass/_Fabric.Animations.scss b/src/sass/_Fabric.Animations.scss index ae3fc5620..9caa8752b 100644 --- a/src/sass/_Fabric.Animations.scss +++ b/src/sass/_Fabric.Animations.scss @@ -55,7 +55,7 @@ // slideLeftIn400 @mixin ms-u-slideLeftIn400 { - @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1); + @include animationMix((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); } // slideUpIn20 diff --git a/src/sass/mixins/_Animation.Keyframes.scss b/src/sass/mixins/_Animation.Keyframes.scss index d6a5ab07e..28a53c070 100644 --- a/src/sass/mixins/_Animation.Keyframes.scss +++ b/src/sass/mixins/_Animation.Keyframes.scss @@ -1,6 +1,6 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -// A mixin that outputs they @keyframes needed for all animations. +// Outputs the @keyframes used by the animation classes // @todo: Have this output only the @keyframes needed by a subset of animations? @mixin ms-animation-keyframes { @keyframes slideRightIn10 { @@ -18,6 +18,21 @@ to { transform:translate3d(0px, 0px, 0px); } } + @keyframes slideRightIn400 { + from { transform:translate3d(-400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightOut40 { + from { transform:translate3d(0px, 0px, 0px); } + to { transform:translate3d(40px, 0px, 0px); } + } + + @keyframes slideRightOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(400px, 0px, 0px); } + } + @keyframes slideLeftIn10 { from { transform:translate3d(10px, 0px, 0px); } to { transform:translate3d(0px, 0px, 0px); } @@ -33,19 +48,19 @@ to { transform:translate3d(0px, 0px, 0px); } } - @keyframes slideRightIn400 { - from { transform:translate3d(-400px, 0px, 0px); } + @keyframes slideLeftIn400 { + from { transform:translate3d(400px, 0px, 0px); } to { transform:translate3d(0px, 0px, 0px); } } - @keyframes slideLeft400 { - from { transform:translate3d(400px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } + @keyframes slideLeftOut40 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-40px, 0px, 0px); } } - @keyframes slideUpIn20 { - from { transform:translate3d(0px, 20px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } + @keyframes slideLeftOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-400px, 0px, 0px); } } @keyframes slideUpIn10 { @@ -53,8 +68,8 @@ to { transform:translate3d(0px, 0px, 0px); } } - @keyframes slideDownIn20 { - from { transform:translate3d(0px, -20px, 0px); } + @keyframes slideUpIn20 { + from { transform:translate3d(0px, 20px, 0px); } to { transform:translate3d(0px, 0px, 0px); } } @@ -63,24 +78,14 @@ to { transform:translate3d(0px, 0px, 0px); } } - @keyframes slideRightOut40 { - from { transform:translate3d(0px, 0px, 0px); } - to { transform:translate3d(40px, 0px, 0px); } - } - - @keyframes slideLeftOut40 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(-40px, 0px, 0px); } - } - - @keyframes slideRightOut400 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(400px, 0px, 0px); } + @keyframes slideDownIn20 { + from { transform:translate3d(0px, -20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } } - @keyframes slideLeftOut400 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(-400px, 0px, 0px); } + @keyframes slideUpOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -10px, 0px); } } @keyframes slideUpOut20 { @@ -88,9 +93,9 @@ to { transform:translate3d(0px, -20px, 0px); } } - @keyframes slideUpOut10 { + @keyframes slideDownOut10 { from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, -10px, 0px); } + to { transform:translate3d(0px, 10px, 0px); } } @keyframes slideDownOut20 { @@ -98,21 +103,11 @@ to { transform:translate3d(0px, 20px, 0px); } } - @keyframes slideDownOut10 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, 10px, 0px); } - } - @keyframes scaleUp100 { from { transform:scale3d(.98, .98, 1); } to { transform:scale3d(1, 1, 1); } } - @keyframes scaleDown100 { - from { transform:scale3d(1.03, 1.03, 1); } - to { transform:scale3d(1, 1, 1); } - } - @keyframes scaleUp103 { from { transform:scale3d(1, 1, 1); } to { transform:scale3d(1.03, 1.03, 1); } @@ -123,6 +118,11 @@ to { transform:scale3d(0.98, 0.98, 1); } } + @keyframes scaleDown100 { + from { transform:scale3d(1.03, 1.03, 1); } + to { transform:scale3d(1, 1, 1); } + } + @keyframes fadeIn { from { opacity: 0; animation-timing-function: $ms-ease2; } to { opacity: 1; } From 6a784ed3e242acf17e4e08d0550f29ad2d7ed28b Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 15:47:03 -0800 Subject: [PATCH 10/35] Fix animation mixins --- src/sass/Fabric.Animations.Output.scss | 4 +--- src/sass/Fabric.Animations.RTL.Output.scss | 7 +++++-- src/sass/mixins/_Animation.Keyframes.scss | 13 +++++++++++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/sass/Fabric.Animations.Output.scss b/src/sass/Fabric.Animations.Output.scss index eebb1c37d..801984276 100644 --- a/src/sass/Fabric.Animations.Output.scss +++ b/src/sass/Fabric.Animations.Output.scss @@ -5,12 +5,10 @@ // -------------------------------------------------- // Fabric Animations -// @todo: Shouldn't keyframes be coming from the mixin? And -webkit-keyframes generated by autoprefixer? - -@import 'Fabric.Animations'; // Mixins @import './mixins/Animation.Keyframes'; +@import './Fabric.Animations'; // Output all @keyframes needed for the animations @include ms-animation-keyframes; diff --git a/src/sass/Fabric.Animations.RTL.Output.scss b/src/sass/Fabric.Animations.RTL.Output.scss index 49cdb7477..2619a70ae 100644 --- a/src/sass/Fabric.Animations.RTL.Output.scss +++ b/src/sass/Fabric.Animations.RTL.Output.scss @@ -5,9 +5,12 @@ // -------------------------------------------------- // RTL overrides for Fabric Animations +// Mixins +@import './mixins/Animation.Keyframes'; +@import './Fabric.Animations.RTL'; -@import 'Fabric.Animations.Output'; -@import 'Fabric.Animations.RTL'; +// Output all @keyframes needed for the animations +@include ms-animation-keyframes; // slideRightIn10 .ms-u-slideRightIn10 { diff --git a/src/sass/mixins/_Animation.Keyframes.scss b/src/sass/mixins/_Animation.Keyframes.scss index 28a53c070..5329d72b3 100644 --- a/src/sass/mixins/_Animation.Keyframes.scss +++ b/src/sass/mixins/_Animation.Keyframes.scss @@ -1,5 +1,8 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. +// Variables +@import './variables/Animation'; + // Outputs the @keyframes used by the animation classes // @todo: Have this output only the @keyframes needed by a subset of animations? @mixin ms-animation-keyframes { @@ -124,12 +127,18 @@ } @keyframes fadeIn { - from { opacity: 0; animation-timing-function: $ms-ease2; } + from { + opacity: 0; + animation-timing-function: $ms-ease2; + } to { opacity: 1; } } @keyframes fadeOut { - from { opacity: 1; animation-timing-function: $ms-ease2; } + from { + opacity: 1; + animation-timing-function: $ms-ease2; + } to { opacity: 0; } } From e80a5b7f591808b79f78b9bedf3d0133def29367 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 15:51:15 -0800 Subject: [PATCH 11/35] Match LTR and RTL imports --- src/sass/Fabric.RTL.scss | 13 +++++++++---- src/sass/Fabric.scss | 20 +++++++++++++------- src/sass/_Fabric.Mixins.RTL.scss | 2 ++ 3 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 895308168..f8d2da1d7 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -15,23 +15,28 @@ @import './variables/Responsive'; @import './variables/ZIndex'; -// Common utilities -@import './Fabric.Utilities.Output'; +// Mixins @import './Fabric.Mixins'; @import './Fabric.Mixins.RTL'; +// Common utilities +@import './Fabric.Utilities.Output'; + // Colors @import './Fabric.Color.Mixins.Output'; // Typography -@import './Fabric.Typography.Fonts.Output'; @import './Fabric.Typography.Output'; -@import './Fabric.Typography.Language.Overrides.Output'; +@import './Fabric.Typography.Fonts.Output'; // Icons @import './Fabric.Icons.Font.Output'; +@import './Fabric.Icons.Output'; @import './Fabric.Icons.RTL.Output'; +// Brand Icons +@import './Fabric.Brand.Icons.Output'; + // Animations @import './Fabric.Animations.RTL.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 315a00a8c..6e325edda 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -1,24 +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 -// Core Module Loader +// OSS Framework Design Language +// -------------------------------------------------- +// Fabric Core Module Loader (LTR) // Variables +// @todo: Just import _Fabric.Common here instead of duplicating the imports? +@import './variables/Animation'; +@import './variables/BrandIcon'; @import './variables/Color'; -@import './variables/Responsive'; @import './variables/Font'; +@import './variables/Icon'; +@import './variables/Responsive'; +@import './variables/ZIndex'; -// Common utilities -@import './Fabric.Utilities.Output'; +// Mixins @import './Fabric.Mixins'; @import './Fabric.Mixins.RTL'; +// Common utilities +@import './Fabric.Utilities.Output'; + // Colors @import './Fabric.Color.Mixins.Output'; // Typography -@import './Fabric.Typography.Mixins'; @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; @@ -33,7 +40,6 @@ @import './Fabric.Animations.Output'; // Responsive -@import './Fabric.Responsive.Utilities'; @import './Fabric.Responsive.Utilities.Output'; // Grid diff --git a/src/sass/_Fabric.Mixins.RTL.scss b/src/sass/_Fabric.Mixins.RTL.scss index daec15d09..cfc077f56 100644 --- a/src/sass/_Fabric.Mixins.RTL.scss +++ b/src/sass/_Fabric.Mixins.RTL.scss @@ -5,6 +5,8 @@ // -------------------------------------------------- // Internationalization mixins +// @todo: Rename this file to reduce confusion. Other 'RTL' files are only used in RTL builds, +// while these mixins are used in all builds. Directionality, maybe? // Base left-to-right mixin definition. @mixin LTR { From c57c3c411617734ce013a386e31f6c1207ff28d0 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 16:24:08 -0800 Subject: [PATCH 12/35] Remove unnecessary browser prefix mixins. Rename animation mixin and use consistently. Fix durations to match mixin/class name. --- src/documentation/sass/docs.scss | 8 +- src/sass/_Fabric.Animations.RTL.scss | 28 ++-- src/sass/_Fabric.Animations.scss | 218 +++++++++++---------------- src/sass/_Fabric.Mixins.scss | 32 ---- 4 files changed, 107 insertions(+), 179 deletions(-) diff --git a/src/documentation/sass/docs.scss b/src/documentation/sass/docs.scss index 78fef06de..dacc98ab1 100644 --- a/src/documentation/sass/docs.scss +++ b/src/documentation/sass/docs.scss @@ -69,7 +69,7 @@ $high-contrast-green: #3ff23f; // slideRightIn80 @mixin ms-u-slideRightIn80 { - @include animationMix((fadeIn, slideRightIn80), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideRightIn80), $ms-duration3, $ms-ease1); } .ms-u-slideRightIn80 { @include ms-u-slideRightIn80; @@ -85,7 +85,7 @@ $high-contrast-green: #3ff23f; // slideLeftIn80 @mixin ms-u-slideLeftIn80 { - @include animationMix((fadeIn, slideLeftIn80), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideLeftIn80), $ms-duration3, $ms-ease1); } .ms-u-slideLeftIn80 { @include ms-u-slideLeftIn80; @@ -102,7 +102,7 @@ $high-contrast-green: #3ff23f; // slideLeftIn80 @mixin ms-u-slideLeftOut80 { - @include animationMix((fadeOut, slideLeftOut80), $ms-duration3, $ms-ease1); + @include ms-animation((fadeOut, slideLeftOut80), $ms-duration3, $ms-ease1); } .ms-u-slideLeftOut80 { @include ms-u-slideLeftOut80; @@ -119,7 +119,7 @@ $high-contrast-green: #3ff23f; // slideLeftIn80 @mixin ms-u-slideRightOut80 { - @include animationMix((fadeOut, slideRightOut80), $ms-duration3, $ms-ease1); + @include ms-animation((fadeOut, slideRightOut80), $ms-duration3, $ms-ease1); } .ms-u-slideRightOut80 { @include ms-u-slideRightOut80; diff --git a/src/sass/_Fabric.Animations.RTL.scss b/src/sass/_Fabric.Animations.RTL.scss index 60c3ba7db..da04973b3 100644 --- a/src/sass/_Fabric.Animations.RTL.scss +++ b/src/sass/_Fabric.Animations.RTL.scss @@ -10,70 +10,70 @@ // slideRightIn10 @mixin ms-u-slideRightIn10 { - @include animationMix((fadeIn, slideLeft10), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideLeft10), $ms-duration3, $ms-ease1); } // slideRightIn20 @mixin ms-u-slideRightIn20 { - @include animationMix((fadeIn, slideLeft20), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideLeft20), $ms-duration3, $ms-ease1); } // slideRightIn40 @mixin ms-u-slideRightIn40 { - @include animationMix((fadeIn, slideLeft40), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideLeft40), $ms-duration3, $ms-ease1); } // slideLeftIn10 @mixin ms-u-slideLeftIn10 { - @include animationMix((fadeIn, slideRight10), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideRight10), $ms-duration3, $ms-ease1); } // slideLeftIn20 @mixin ms-u-slideLeftIn20 { - @include animationMix((fadeIn, slideRight20), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideRight20), $ms-duration3, $ms-ease1); } // slideLeftIn40 @mixin ms-u-slideLeftIn40 { - @include animationMix((fadeIn, slideRight40), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideRight40), $ms-duration3, $ms-ease1); } // slideRightIn400 @mixin ms-u-slideRightIn400 { - @include animationMix((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); } // slideLeftIn400 @mixin ms-u-slideLeftIn400 { - @include animationMix((fadeIn, slideRight400), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideRight400), $ms-duration3, $ms-ease1); } // slideRightOut40 @mixin ms-u-slideRightOut40 { - @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); + @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); } // slideLeftOut40 @mixin ms-u-slideLeftOut40 { - @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); + @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); } // slideRightOut400 @mixin ms-u-slideRightOut400 { - @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); + @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); } // slideLeftOut400 @mixin ms-u-slideLeftOut400 { - @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); + @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); } // rotate90deg @mixin ms-u-rotate90deg { - @include animationMix(rotateN90, 0.1s, $ms-ease2); + @include ms-animation(rotateN90, 0.1s, $ms-ease2); } // rotateN90deg @mixin ms-u-rotateN90deg { - @include animationMix(rotate90, 0.1s, $ms-ease2); + @include ms-animation(rotate90, 0.1s, $ms-ease2); } diff --git a/src/sass/_Fabric.Animations.scss b/src/sass/_Fabric.Animations.scss index 9caa8752b..ed93be822 100644 --- a/src/sass/_Fabric.Animations.scss +++ b/src/sass/_Fabric.Animations.scss @@ -9,221 +9,181 @@ // @todo: Is import necessary here? @import './variables/Animation'; - -// 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); +// Generate an animation +@mixin ms-animation($name, $duration, $timing: $ms-ease1, $fillMode: both) { + animation-name: $name; + animation-duration: $duration; + animation-timing-function: $timing; + animation-fill-mode: $fillMode; } -// slideRightIn10 +// Slide @mixin ms-u-slideRightIn10 { - @include animationMix((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); + @include ms-animation((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); } -// slideRightIn20 @mixin ms-u-slideRightIn20 { - @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); + @include ms-animation((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); + @include ms-animation((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); } -// slideLeftIn20 -@mixin ms-u-slideLeftIn20 { - @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); +@mixin ms-u-slideRightIn400 { + @include ms-animation((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); } -// slideLeftIn40 -@mixin ms-u-slideLeftIn40 { - @include animationMix((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); +@mixin ms-u-slideRightOut40 { + @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); } -// slideRightIn400 -@mixin ms-u-slideRightIn400 { - @include animationMix((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); +@mixin ms-u-slideRightOut400 { + @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); } -// slideLeftIn400 -@mixin ms-u-slideLeftIn400 { - @include animationMix((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); +@mixin ms-u-slideLeftIn10 { + @include ms-animation((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); } -// slideUpIn20 -@mixin ms-u-slideUpIn20 { - @include animationMix((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1); +@mixin ms-u-slideLeftIn20 { + @include ms-animation((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); } -// slideUpIn10 -@mixin ms-u-slideUpIn10 { - @include animationMix((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2); +@mixin ms-u-slideLeftIn40 { + @include ms-animation((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); } -// slideDownIn20 -@mixin ms-u-slideDownIn20 { - @include animationMix((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1); +@mixin ms-u-slideLeftIn400 { + @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); } -// slideDownIn10 -@mixin ms-u-slideDownIn10 { - @include animationMix((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2); +@mixin ms-u-slideLeftOut40 { + @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); } -// slideRightOut40 -@mixin ms-u-slideRightOut40 { - @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +@mixin ms-u-slideLeftOut400 { + @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); } -// slideLeftOut40 -@mixin ms-u-slideLeftOut40 { - @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +@mixin ms-u-slideUpIn10 { + @include ms-animation((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2); } -// slideRightOut400 -@mixin ms-u-slideRightOut400 { - @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +@mixin ms-u-slideUpIn20 { + @include ms-animation((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1); } -// slideLeftOut400 -@mixin ms-u-slideLeftOut400 { - @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +@mixin ms-u-slideDownIn10 { + @include ms-animation((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2); } -// slideUpOut20 -@mixin ms-u-slideUpOut20 { - @include animationMix((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2); +@mixin ms-u-slideDownIn20 { + @include ms-animation((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1); } -// slideUpOut10 @mixin ms-u-slideUpOut10 { - @include animationMix((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2); + @include ms-animation((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2); } -// slideDownOut20 -@mixin ms-u-slideDownOut20 { - @include animationMix((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2); +@mixin ms-u-slideUpOut20 { + @include ms-animation((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2); } -// slideDownOut10 @mixin ms-u-slideDownOut10 { - @include animationMix((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2); + @include ms-animation((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2); } -// scaleUpIn100 -@mixin ms-u-scaleUpIn100 { - @include animationMix((fadeIn, scaleUp100), $ms-duration3, $ms-ease1); +@mixin ms-u-slideDownOut20 { + @include ms-animation((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2); } -// scaleDownIn100 -@mixin ms-u-scaleDownIn100 { - @include animationMix((fadeIn, scaleDown100), $ms-duration3, $ms-ease1); +// Scale +@mixin ms-u-scaleUpIn100 { + @include ms-animation((fadeIn, scaleUp100), $ms-duration3, $ms-ease1); } -// scaleUpOut103 @mixin ms-u-scaleUpOut103 { - @include animationMix((fadeOut, scaleUp103), $ms-duration1, $ms-ease2); + @include ms-animation((fadeOut, scaleUp103), $ms-duration1, $ms-ease2); } -// scaleDownOut98 @mixin ms-u-scaleDownOut98 { - @include animationMix((fadeOut, scaleDown98), $ms-duration1, $ms-ease2); + @include ms-animation((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-scaleDownIn100 { + @include ms-animation((fadeIn, scaleDown100), $ms-duration3, $ms-ease1); } + +// Fade @mixin ms-u-fadeIn100 { - @include ms-u-fadeIn400; - -webkit-animation-duration: $ms-duration1; - animation-duration: $ms-duration1; + animation-duration: 0.1s; + animation-name: fadeIn; } + @mixin ms-u-fadeIn200 { - @include ms-u-fadeIn400; - -webkit-animation-duration: $ms-duration2; - animation-duration: $ms-duration2; + animation-duration: 0.2s; + animation-name: fadeIn; } -@mixin ms-u-fadeIn500 { - @include ms-u-fadeIn400; - -webkit-animation-duration: $ms-duration4; - animation-duration: $ms-duration4; + +@mixin ms-u-fadeIn400 { + animation-duration: 0.4s; + animation-name: fadeIn; } -// 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-fadeIn500 { + animation-duration: 0.5s; + animation-name: fadeIn; } + @mixin ms-u-fadeOut100 { - @include ms-u-fadeOut400; - -webkit-animation-duration: 0.1s; - animation-duration: 0.1s; + animation-duration: 0.1s; + animation-name: fadeOut; } + @mixin ms-u-fadeOut200 { - @include ms-u-fadeOut400; - -webkit-animation-duration: $ms-duration1; - animation-duration: $ms-duration1; + animation-duration: 0.2s; + animation-name: fadeOut; } + +@mixin ms-u-fadeOut400 { + animation-duration: 0.4s; + animation-name: fadeOut; +} + @mixin ms-u-fadeOut500 { - @include ms-u-fadeOut400; - -webkit-animation-duration: $ms-duration4; - animation-duration: $ms-duration4; + animation-duration: 0.5s; + animation-name: fadeOut; } -// rotate90deg +// Rotate @mixin ms-u-rotate90deg { - @include animationMix(rotate90, 0.1s, $ms-ease2); + @include ms-animation(rotate90, $ms-duration1, $ms-ease2); } -// rotateN90deg @mixin ms-u-rotateN90deg { - @include animationMix(rotateN90, 0.1s, $ms-ease2); + @include ms-animation(rotateN90, $ms-duration1, $ms-ease2); } -// expandCollapse400 -@mixin ms-u-expandCollapse400 { - -webkit-transition: height $ms-duration3 $ms-ease2; - transition: height $ms-duration3 $ms-ease2; +// Expand-collapse +@mixin ms-u-expandCollapse100 { + transition: height 0.1s $ms-ease2; } -// expandCollapse200 @mixin ms-u-expandCollapse200 { - -webkit-transition: height $ms-duration1 $ms-ease2; - transition: height $ms-duration1 $ms-ease2; + transition: height 0.2s $ms-ease2; } -// expandCollapse100 -@mixin ms-u-expandCollapse100 { - -webkit-transition: height 0.1s $ms-ease2; - transition: height 0.1s $ms-ease2; +@mixin ms-u-expandCollapse400 { + transition: height 0.4s $ms-ease2; } -// delay100 +// Delay @mixin ms-u-delay100 { - -webkit-animation-delay: $ms-duration1; - animation-delay: $ms-duration1; + animation-delay: $ms-duration1; } // delay200 @mixin ms-u-delay200 { - -webkit-animation-delay: 0.267s; - animation-delay: 0.267s; + animation-delay: $ms-duration2; } diff --git a/src/sass/_Fabric.Mixins.scss b/src/sass/_Fabric.Mixins.scss index fa32804af..ae27c78cf 100644 --- a/src/sass/_Fabric.Mixins.scss +++ b/src/sass/_Fabric.Mixins.scss @@ -234,38 +234,6 @@ &:-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; From 49d46fd11d319e202d4240b2aa93ea37b1f7b59d Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 16:36:59 -0800 Subject: [PATCH 13/35] Combine animation mixins into one file --- src/sass/Fabric.Animations.Output.scss | 4 +- src/sass/Fabric.Animations.RTL.Output.scss | 3 +- src/sass/_Fabric.Common.scss | 6 +- src/sass/mixins/_Animation.Keyframes.scss | 154 ------------------ .../_Animation.scss} | 154 +++++++++++++++++- 5 files changed, 158 insertions(+), 163 deletions(-) delete mode 100644 src/sass/mixins/_Animation.Keyframes.scss rename src/sass/{_Fabric.Animations.scss => mixins/_Animation.scss} (52%) diff --git a/src/sass/Fabric.Animations.Output.scss b/src/sass/Fabric.Animations.Output.scss index 801984276..7e23eea82 100644 --- a/src/sass/Fabric.Animations.Output.scss +++ b/src/sass/Fabric.Animations.Output.scss @@ -5,10 +5,8 @@ // -------------------------------------------------- // Fabric Animations - // Mixins -@import './mixins/Animation.Keyframes'; -@import './Fabric.Animations'; +@import './mixins/Animation'; // Output all @keyframes needed for the animations @include ms-animation-keyframes; diff --git a/src/sass/Fabric.Animations.RTL.Output.scss b/src/sass/Fabric.Animations.RTL.Output.scss index 2619a70ae..8b22bc80e 100644 --- a/src/sass/Fabric.Animations.RTL.Output.scss +++ b/src/sass/Fabric.Animations.RTL.Output.scss @@ -6,8 +6,7 @@ // RTL overrides for Fabric Animations // Mixins -@import './mixins/Animation.Keyframes'; -@import './Fabric.Animations.RTL'; +@import './mixins/Animation'; // Output all @keyframes needed for the animations @include ms-animation-keyframes; diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index 62c2945dd..ed509f28d 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -8,9 +8,11 @@ @import './variables/ZIndex'; // Mixins +@import './mixins/Animation'; -// Previous -@import './Fabric.Animations'; + + +// @todo: Go through these. @import './Fabric.Color.Mixins'; @import './Fabric.Grid'; @import './Fabric.Icons'; diff --git a/src/sass/mixins/_Animation.Keyframes.scss b/src/sass/mixins/_Animation.Keyframes.scss deleted file mode 100644 index 5329d72b3..000000000 --- a/src/sass/mixins/_Animation.Keyframes.scss +++ /dev/null @@ -1,154 +0,0 @@ -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// Variables -@import './variables/Animation'; - -// Outputs the @keyframes used by the animation classes -// @todo: Have this output only the @keyframes needed by a subset of animations? -@mixin ms-animation-keyframes { - @keyframes slideRightIn10 { - from { transform:translate3d(-10px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideRightIn20 { - from { transform:translate3d(-20px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideRightIn40 { - from { transform:translate3d(-40px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideRightIn400 { - from { transform:translate3d(-400px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideRightOut40 { - from { transform:translate3d(0px, 0px, 0px); } - to { transform:translate3d(40px, 0px, 0px); } - } - - @keyframes slideRightOut400 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(400px, 0px, 0px); } - } - - @keyframes slideLeftIn10 { - from { transform:translate3d(10px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideLeftIn20 { - from { transform:translate3d(20px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideLeftIn40 { - from { transform:translate3d(40px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideLeftIn400 { - from { transform:translate3d(400px, 0px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideLeftOut40 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(-40px, 0px, 0px); } - } - - @keyframes slideLeftOut400 { - from { transform:translate3d(0, 0px, 0px); } - to { transform:translate3d(-400px, 0px, 0px); } - } - - @keyframes slideUpIn10 { - from { transform:translate3d(0px, 10px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideUpIn20 { - from { transform:translate3d(0px, 20px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideDownIn10 { - from { transform:translate3d(0px, -10px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideDownIn20 { - from { transform:translate3d(0px, -20px, 0px); } - to { transform:translate3d(0px, 0px, 0px); } - } - - @keyframes slideUpOut10 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, -10px, 0px); } - } - - @keyframes slideUpOut20 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, -20px, 0px); } - } - - @keyframes slideDownOut10 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, 10px, 0px); } - } - - @keyframes slideDownOut20 { - from { transform:translate3d(0px, 0, 0px); } - to { transform:translate3d(0px, 20px, 0px); } - } - - @keyframes scaleUp100 { - from { transform:scale3d(.98, .98, 1); } - to { transform:scale3d(1, 1, 1); } - } - - @keyframes scaleUp103 { - from { transform:scale3d(1, 1, 1); } - to { transform:scale3d(1.03, 1.03, 1); } - } - - @keyframes scaleDown98 { - from { transform:scale3d(1, 1, 1); } - to { transform:scale3d(0.98, 0.98, 1); } - } - - @keyframes scaleDown100 { - from { transform:scale3d(1.03, 1.03, 1); } - to { transform:scale3d(1, 1, 1); } - } - - @keyframes fadeIn { - from { - opacity: 0; - animation-timing-function: $ms-ease2; - } - to { opacity: 1; } - } - - @keyframes fadeOut { - from { - opacity: 1; - animation-timing-function: $ms-ease2; - } - to { opacity: 0; } - } - - @keyframes rotate90 { - from { transform:rotateZ(0deg); } - to { transform:rotateZ(90deg); } - } - - @keyframes rotateN90 { - from { transform:rotateZ(90deg); } - to { transform:rotateZ(0deg); } - } -} diff --git a/src/sass/_Fabric.Animations.scss b/src/sass/mixins/_Animation.scss similarity index 52% rename from src/sass/_Fabric.Animations.scss rename to src/sass/mixins/_Animation.scss index ed93be822..96dd7734f 100644 --- a/src/sass/_Fabric.Animations.scss +++ b/src/sass/mixins/_Animation.scss @@ -6,8 +6,158 @@ // Fabric Animations // Import variables and mixins -// @todo: Is import necessary here? -@import './variables/Animation'; +@import '../variables/Animation'; + +// Outputs the @keyframes used by the animation classes +// @todo: Have this output only the @keyframes needed by a subset of animations? +// @todo: Prefix animation names with "ms-" to prevent conflicts? +@mixin ms-animation-keyframes { + @keyframes slideRightIn10 { + from { transform:translate3d(-10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightIn20 { + from { transform:translate3d(-20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightIn40 { + from { transform:translate3d(-40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightIn400 { + from { transform:translate3d(-400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideRightOut40 { + from { transform:translate3d(0px, 0px, 0px); } + to { transform:translate3d(40px, 0px, 0px); } + } + + @keyframes slideRightOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(400px, 0px, 0px); } + } + + @keyframes slideLeftIn10 { + from { transform:translate3d(10px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeftIn20 { + from { transform:translate3d(20px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeftIn40 { + from { transform:translate3d(40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeftIn400 { + from { transform:translate3d(400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideLeftOut40 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-40px, 0px, 0px); } + } + + @keyframes slideLeftOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-400px, 0px, 0px); } + } + + @keyframes slideUpIn10 { + from { transform:translate3d(0px, 10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideUpIn20 { + from { transform:translate3d(0px, 20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideDownIn10 { + from { transform:translate3d(0px, -10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideDownIn20 { + from { transform:translate3d(0px, -20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } + } + + @keyframes slideUpOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -10px, 0px); } + } + + @keyframes slideUpOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -20px, 0px); } + } + + @keyframes slideDownOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 10px, 0px); } + } + + @keyframes slideDownOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 20px, 0px); } + } + + @keyframes scaleUp100 { + from { transform:scale3d(.98, .98, 1); } + to { transform:scale3d(1, 1, 1); } + } + + @keyframes scaleUp103 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(1.03, 1.03, 1); } + } + + @keyframes scaleDown98 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(0.98, 0.98, 1); } + } + + @keyframes scaleDown100 { + from { transform:scale3d(1.03, 1.03, 1); } + to { transform:scale3d(1, 1, 1); } + } + + @keyframes fadeIn { + from { + opacity: 0; + animation-timing-function: $ms-ease2; + } + to { opacity: 1; } + } + + @keyframes fadeOut { + from { + opacity: 1; + animation-timing-function: $ms-ease2; + } + to { opacity: 0; } + } + + @keyframes rotate90 { + from { transform:rotateZ(0deg); } + to { transform:rotateZ(90deg); } + } + + @keyframes rotateN90 { + from { transform:rotateZ(90deg); } + to { transform:rotateZ(0deg); } + } +} // Generate an animation @mixin ms-animation($name, $duration, $timing: $ms-ease1, $fillMode: both) { From 974b13a865334a23331f7cfb990c62869004a1ca Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 16:57:12 -0800 Subject: [PATCH 14/35] Get animations organized and outputting correctly for LTR and RTL --- src/sass/Fabric.Animations.Output.scss | 195 --------------------- src/sass/Fabric.Animations.RTL.Output.scss | 82 --------- src/sass/Fabric.RTL.scss | 16 +- src/sass/Fabric.scss | 15 +- src/sass/_Animation.scss | 173 ++++++++++++++++++ src/sass/_Fabric.Animations.RTL.scss | 79 --------- src/sass/mixins/_Animation.LTR.scss | 59 +++++++ src/sass/mixins/_Animation.RTL.scss | 59 +++++++ src/sass/mixins/_Animation.scss | 57 ------ 9 files changed, 318 insertions(+), 417 deletions(-) delete mode 100644 src/sass/Fabric.Animations.Output.scss delete mode 100644 src/sass/Fabric.Animations.RTL.Output.scss create mode 100644 src/sass/_Animation.scss delete mode 100644 src/sass/_Fabric.Animations.RTL.scss create mode 100644 src/sass/mixins/_Animation.LTR.scss create mode 100644 src/sass/mixins/_Animation.RTL.scss diff --git a/src/sass/Fabric.Animations.Output.scss b/src/sass/Fabric.Animations.Output.scss deleted file mode 100644 index 7e23eea82..000000000 --- a/src/sass/Fabric.Animations.Output.scss +++ /dev/null @@ -1,195 +0,0 @@ -// 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 - -// Mixins -@import './mixins/Animation'; - -// Output all @keyframes needed for the animations -@include ms-animation-keyframes; - -// 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; -} - -// slideUpIn20 -.ms-u-slideUpIn20 { - @include ms-u-slideUpIn20; -} - -// slideUpIn10 -.ms-u-slideUpIn10 { - @include ms-u-slideUpIn10; -} - -// slideDownIn20 -.ms-u-slideDownIn20 { - @include ms-u-slideDownIn20; -} - -// slideDownIn10 -.ms-u-slideDownIn10 { - @include ms-u-slideDownIn10; -} - -// 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; -} - -// slideUpOut20 -.ms-u-slideUpOut20 { - @include ms-u-slideUpOut20; -} - -// slideUpOut10 -.ms-u-slideUpOut10 { - @include ms-u-slideUpOut10; -} - -// slideDownOut20 -.ms-u-slideDownOut20 { - @include ms-u-slideDownOut20; -} - -// slideDownOut10 -.ms-u-slideDownOut10 { - @include ms-u-slideDownOut10; -} - -// scaleUpIn100 -.ms-u-scaleUpIn100 { - @include ms-u-scaleUpIn100; -} - -// scaleDownIn100 -.ms-u-scaleDownIn100 { - @include ms-u-scaleDownIn100; -} - -// scaleUpOut103 -.ms-u-scaleUpOut103 { - @include ms-u-scaleUpOut103; -} - -// scaleDownOut98 -.ms-u-scaleDownOut98 { - @include ms-u-scaleDownOut98; -} - -// 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; -} - -// 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; -} - -// rotate90deg -.ms-u-rotate90deg { - @include ms-u-rotate90deg; -} - -// rotateN90deg -.ms-u-rotateN90deg { - @include ms-u-rotateN90deg; -} - -// 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/src/sass/Fabric.Animations.RTL.Output.scss b/src/sass/Fabric.Animations.RTL.Output.scss deleted file mode 100644 index 8b22bc80e..000000000 --- a/src/sass/Fabric.Animations.RTL.Output.scss +++ /dev/null @@ -1,82 +0,0 @@ -// 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 - -// Mixins -@import './mixins/Animation'; - -// Output all @keyframes needed for the animations -@include ms-animation-keyframes; - -// 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/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index f8d2da1d7..d3a55cb61 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -16,9 +16,22 @@ @import './variables/ZIndex'; // Mixins +@import './mixins/Animation'; +@import './mixins/Animation.RTL'; @import './Fabric.Mixins'; @import './Fabric.Mixins.RTL'; +// Output +@import './Animation'; + + + + + + + + + // Common utilities @import './Fabric.Utilities.Output'; @@ -37,9 +50,6 @@ // Brand Icons @import './Fabric.Brand.Icons.Output'; -// Animations -@import './Fabric.Animations.RTL.Output'; - // Responsive @import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 6e325edda..a583de4be 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -16,9 +16,22 @@ @import './variables/ZIndex'; // Mixins +@import './mixins/Animation'; +@import './mixins/Animation.LTR'; @import './Fabric.Mixins'; @import './Fabric.Mixins.RTL'; +// Output +@import './Animation'; + + + + + + + +// Need to review below here + // Common utilities @import './Fabric.Utilities.Output'; @@ -37,7 +50,7 @@ @import './Fabric.Brand.Icons.Output'; // Animations -@import './Fabric.Animations.Output'; + // Responsive @import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/_Animation.scss b/src/sass/_Animation.scss new file mode 100644 index 000000000..2d0c27323 --- /dev/null +++ b/src/sass/_Animation.scss @@ -0,0 +1,173 @@ +// 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 + +// Output all @keyframes needed for the animations +@include ms-animation-keyframes; + +// Slide +.ms-u-slideRightIn10 { + @include ms-u-slideRightIn10; +} + +.ms-u-slideRightIn20 { + @include ms-u-slideRightIn20; +} + +.ms-u-slideRightIn40 { + @include ms-u-slideRightIn40; +} + +.ms-u-slideRightIn400 { + @include ms-u-slideRightIn400; +} + +.ms-u-slideRightOut40 { + @include ms-u-slideRightOut40; +} + +.ms-u-slideRightOut400 { + @include ms-u-slideRightOut400; +} + +.ms-u-slideLeftIn10 { + @include ms-u-slideLeftIn10; +} + +.ms-u-slideLeftIn20 { + @include ms-u-slideLeftIn20; +} + +.ms-u-slideLeftIn40 { + @include ms-u-slideLeftIn40; +} + +.ms-u-slideLeftIn400 { + @include ms-u-slideLeftIn400; +} + +.ms-u-slideLeftOut40 { + @include ms-u-slideLeftOut40; +} + +.ms-u-slideLeftOut400 { + @include ms-u-slideLeftOut400; +} + +.ms-u-slideUpIn10 { + @include ms-u-slideUpIn10; +} + +.ms-u-slideUpIn20 { + @include ms-u-slideUpIn20; +} + +.ms-u-slideDownIn10 { + @include ms-u-slideDownIn10; +} + +.ms-u-slideDownIn20 { + @include ms-u-slideDownIn20; +} + +.ms-u-slideUpOut10 { + @include ms-u-slideUpOut10; +} + +.ms-u-slideUpOut20 { + @include ms-u-slideUpOut20; +} + +.ms-u-slideDownOut10 { + @include ms-u-slideDownOut10; +} + +.ms-u-slideDownOut20 { + @include ms-u-slideDownOut20; +} + +// Scale +.ms-u-scaleUpIn100 { + @include ms-u-scaleUpIn100; +} + +.ms-u-scaleUpOut103 { + @include ms-u-scaleUpOut103; +} + +.ms-u-scaleDownOut98 { + @include ms-u-scaleDownOut98; +} + +.ms-u-scaleDownIn100 { + @include ms-u-scaleDownIn100; +} + +// Fade + +.ms-u-fadeIn100 { + @include ms-u-fadeIn100; +} + +.ms-u-fadeIn200 { + @include ms-u-fadeIn200; +} + +.ms-u-fadeIn400 { + @include ms-u-fadeIn400; +} + +.ms-u-fadeIn500 { + @include ms-u-fadeIn500; +} + +.ms-u-fadeOut100 { + @include ms-u-fadeOut100; +} + +.ms-u-fadeOut200 { + @include ms-u-fadeOut200; +} + +.ms-u-fadeOut400 { + @include ms-u-fadeOut400; +} + +.ms-u-fadeOut500 { + @include ms-u-fadeOut500; +} + +// Expand-collapse + +.ms-u-expandCollapse100 { + @include ms-u-expandCollapse100; +} + +.ms-u-expandCollapse200 { + @include ms-u-expandCollapse200; +} + +.ms-u-expandCollapse400 { + @include ms-u-expandCollapse400; +} + +// Delay +.ms-u-delay100 { + @include ms-u-delay100; +} + +.ms-u-delay200 { + @include ms-u-delay200; +} + +// Rotate +.ms-u-rotate90deg { + @include ms-u-rotate90deg; +} + +.ms-u-rotateN90deg { + @include ms-u-rotateN90deg; +} diff --git a/src/sass/_Fabric.Animations.RTL.scss b/src/sass/_Fabric.Animations.RTL.scss deleted file mode 100644 index da04973b3..000000000 --- a/src/sass/_Fabric.Animations.RTL.scss +++ /dev/null @@ -1,79 +0,0 @@ -// 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 ms-animation((fadeIn, slideLeft10), $ms-duration3, $ms-ease1); -} - -// slideRightIn20 -@mixin ms-u-slideRightIn20 { - @include ms-animation((fadeIn, slideLeft20), $ms-duration3, $ms-ease1); -} - -// slideRightIn40 -@mixin ms-u-slideRightIn40 { - @include ms-animation((fadeIn, slideLeft40), $ms-duration3, $ms-ease1); -} - -// slideLeftIn10 -@mixin ms-u-slideLeftIn10 { - @include ms-animation((fadeIn, slideRight10), $ms-duration3, $ms-ease1); -} - -// slideLeftIn20 -@mixin ms-u-slideLeftIn20 { - @include ms-animation((fadeIn, slideRight20), $ms-duration3, $ms-ease1); -} - -// slideLeftIn40 -@mixin ms-u-slideLeftIn40 { - @include ms-animation((fadeIn, slideRight40), $ms-duration3, $ms-ease1); -} - -// slideRightIn400 -@mixin ms-u-slideRightIn400 { - @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); -} - -// slideLeftIn400 -@mixin ms-u-slideLeftIn400 { - @include ms-animation((fadeIn, slideRight400), $ms-duration3, $ms-ease1); -} - -// slideRightOut40 -@mixin ms-u-slideRightOut40 { - @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); -} - -// slideLeftOut40 -@mixin ms-u-slideLeftOut40 { - @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); -} - -// slideRightOut400 -@mixin ms-u-slideRightOut400 { - @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); -} - -// slideLeftOut400 -@mixin ms-u-slideLeftOut400 { - @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); -} - -// rotate90deg -@mixin ms-u-rotate90deg { - @include ms-animation(rotateN90, 0.1s, $ms-ease2); -} - -// rotateN90deg -@mixin ms-u-rotateN90deg { - @include ms-animation(rotate90, 0.1s, $ms-ease2); -} diff --git a/src/sass/mixins/_Animation.LTR.scss b/src/sass/mixins/_Animation.LTR.scss new file mode 100644 index 000000000..504fc5c5b --- /dev/null +++ b/src/sass/mixins/_Animation.LTR.scss @@ -0,0 +1,59 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Slide +@mixin ms-u-slideRightIn10 { + @include ms-animation((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn20 { + @include ms-animation((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn40 { + @include ms-animation((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn400 { + @include ms-animation((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightOut40 { + @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideRightOut400 { + @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideLeftIn10 { + @include ms-animation((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn20 { + @include ms-animation((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn40 { + @include ms-animation((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn400 { + @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftOut40 { + @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideLeftOut400 { + @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +} + +// Rotate +@mixin ms-u-rotate90deg { + @include ms-animation(rotate90, $ms-duration1, $ms-ease2); +} + +@mixin ms-u-rotateN90deg { + @include ms-animation(rotateN90, $ms-duration1, $ms-ease2); +} diff --git a/src/sass/mixins/_Animation.RTL.scss b/src/sass/mixins/_Animation.RTL.scss new file mode 100644 index 000000000..72fdbe36f --- /dev/null +++ b/src/sass/mixins/_Animation.RTL.scss @@ -0,0 +1,59 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Slide +@mixin ms-u-slideRightIn10 { + @include ms-animation((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn20 { + @include ms-animation((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn40 { + @include ms-animation((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn400 { + @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightOut40 { + @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideRightOut400 { + @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideLeftIn10 { + @include ms-animation((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn20 { + @include ms-animation((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn40 { + @include ms-animation((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn400 { + @include ms-animation((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftOut40 { + @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideLeftOut400 { + @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +} + +// Rotate +@mixin ms-u-rotate90deg { + @include ms-animation(rotateN90, $ms-duration1, $ms-ease2); +} + +@mixin ms-u-rotateN90deg { + @include ms-animation(rotate90, $ms-duration1, $ms-ease2); +} diff --git a/src/sass/mixins/_Animation.scss b/src/sass/mixins/_Animation.scss index 96dd7734f..5cbeb3fd8 100644 --- a/src/sass/mixins/_Animation.scss +++ b/src/sass/mixins/_Animation.scss @@ -168,54 +168,6 @@ } // Slide -@mixin ms-u-slideRightIn10 { - @include ms-animation((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn20 { - @include ms-animation((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn40 { - @include ms-animation((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn400 { - @include ms-animation((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightOut40 { - @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideRightOut400 { - @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideLeftIn10 { - @include ms-animation((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn20 { - @include ms-animation((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn40 { - @include ms-animation((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn400 { - @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftOut40 { - @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideLeftOut400 { - @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); -} - @mixin ms-u-slideUpIn10 { @include ms-animation((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2); } @@ -306,15 +258,6 @@ animation-name: fadeOut; } -// Rotate -@mixin ms-u-rotate90deg { - @include ms-animation(rotate90, $ms-duration1, $ms-ease2); -} - -@mixin ms-u-rotateN90deg { - @include ms-animation(rotateN90, $ms-duration1, $ms-ease2); -} - // Expand-collapse @mixin ms-u-expandCollapse100 { transition: height 0.1s $ms-ease2; From ac0ebf00a4ebcccc782ed0d5dbbaaa0ce0350256 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 17:03:54 -0800 Subject: [PATCH 15/35] Move ms-Fabric wrapper mixin into the main mixins file --- src/sass/Fabric.RTL.scss | 4 +--- src/sass/Fabric.scss | 4 +--- src/sass/_Fabric.Base.scss | 13 ------------- src/sass/_Fabric.Mixins.scss | 10 +++++++++- src/sass/{Fabric.Base.Output.scss => _Wrapper.scss} | 4 ---- 5 files changed, 11 insertions(+), 24 deletions(-) delete mode 100644 src/sass/_Fabric.Base.scss rename src/sass/{Fabric.Base.Output.scss => _Wrapper.scss} (84%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index d3a55cb61..80542144a 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -23,6 +23,7 @@ // Output @import './Animation'; +@import './Wrapper'; @@ -55,6 +56,3 @@ // Grid @import './Fabric.Grid.Output'; - -// Base/wrapper component -@import './Fabric.Base.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index a583de4be..e7a8af265 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -23,6 +23,7 @@ // Output @import './Animation'; +@import './Wrapper'; @@ -57,6 +58,3 @@ // Grid @import './Fabric.Grid.Output'; - -// Base/wrapper component -@import './Fabric.Base.Output'; diff --git a/src/sass/_Fabric.Base.scss b/src/sass/_Fabric.Base.scss deleted file mode 100644 index 8fabc232c..000000000 --- a/src/sass/_Fabric.Base.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// -// Office UI Fabric -// -------------------------------------------------- -// Wrapper component to set base typography. - - -//== Wrapper/base component -// -@mixin ms-Fabric { - @include ms-fontColor-neutralPrimary; -} diff --git a/src/sass/_Fabric.Mixins.scss b/src/sass/_Fabric.Mixins.scss index ae27c78cf..3795150cd 100644 --- a/src/sass/_Fabric.Mixins.scss +++ b/src/sass/_Fabric.Mixins.scss @@ -5,6 +5,9 @@ // -------------------------------------------------- // Vendor-prefixed mixins +// @todo: May be able to remove this later. +@import './Fabric.Typography'; + // Border radius. @mixin border-radius($ms-radius: 5px) { @@ -247,4 +250,9 @@ -ms-flex-align: $ms-mode; -webkit-align-items: $ms-mode; align-items: $ms-mode; -} \ No newline at end of file +} + +// Base/wrapper component +@mixin ms-Fabric { + @include ms-fontColor-neutralPrimary; +} diff --git a/src/sass/Fabric.Base.Output.scss b/src/sass/_Wrapper.scss similarity index 84% rename from src/sass/Fabric.Base.Output.scss rename to src/sass/_Wrapper.scss index 76f045909..728eae7df 100644 --- a/src/sass/Fabric.Base.Output.scss +++ b/src/sass/_Wrapper.scss @@ -5,10 +5,6 @@ // -------------------------------------------------- // Wrapper component to set base typography. -@import 'Fabric.Base'; - -//== Wrapper/base component -// .ms-Fabric { @include ms-Fabric; } From b8554bcad41a0ef3ea36e052d026b4d2141345b8 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 17:16:04 -0800 Subject: [PATCH 16/35] Rename main mixins and directionality file --- src/sass/Fabric.RTL.scss | 10 ++++++---- src/sass/Fabric.scss | 8 ++++---- src/sass/_Fabric.Common.scss | 4 ++-- src/sass/_Fabric.Utilities.scss | 2 -- .../_Directionality.scss} | 7 ++----- src/sass/{_Fabric.Mixins.scss => mixins/_Mixins.scss} | 6 +++--- 6 files changed, 17 insertions(+), 20 deletions(-) rename src/sass/{_Fabric.Mixins.RTL.scss => mixins/_Directionality.scss} (96%) rename src/sass/{_Fabric.Mixins.scss => mixins/_Mixins.scss} (98%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 80542144a..70db99572 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -16,10 +16,10 @@ @import './variables/ZIndex'; // Mixins +@import './mixins/Mixins'; @import './mixins/Animation'; @import './mixins/Animation.RTL'; -@import './Fabric.Mixins'; -@import './Fabric.Mixins.RTL'; +@import './mixins/Directionality'; // Output @import './Animation'; @@ -31,7 +31,7 @@ - +// Need to review below here // Common utilities @import './Fabric.Utilities.Output'; @@ -46,11 +46,13 @@ // Icons @import './Fabric.Icons.Font.Output'; @import './Fabric.Icons.Output'; -@import './Fabric.Icons.RTL.Output'; // Brand Icons @import './Fabric.Brand.Icons.Output'; +// Animations + + // Responsive @import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index e7a8af265..4b3e85744 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -5,8 +5,8 @@ // -------------------------------------------------- // Fabric Core Module Loader (LTR) -// Variables -// @todo: Just import _Fabric.Common here instead of duplicating the imports? +// Variables and mixins +@import './Fabric.Common'; @import './variables/Animation'; @import './variables/BrandIcon'; @import './variables/Color'; @@ -16,10 +16,10 @@ @import './variables/ZIndex'; // Mixins +@import './mixins/Mixins'; @import './mixins/Animation'; @import './mixins/Animation.LTR'; -@import './Fabric.Mixins'; -@import './Fabric.Mixins.RTL'; +@import './mixins/Directionality'; // Output @import './Animation'; diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index ed509f28d..d534bbace 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -9,6 +9,8 @@ // Mixins @import './mixins/Animation'; +@import './mixins/Directionality'; +@import './mixins/Mixins'; @@ -16,8 +18,6 @@ @import './Fabric.Color.Mixins'; @import './Fabric.Grid'; @import './Fabric.Icons'; -@import './Fabric.Mixins'; -@import './Fabric.Mixins.RTL'; @import './Fabric.Responsive.Utilities'; @import './Fabric.Typography'; @import './Fabric.Typography.Mixins'; diff --git a/src/sass/_Fabric.Utilities.scss b/src/sass/_Fabric.Utilities.scss index 4afed3226..db77b3a04 100644 --- a/src/sass/_Fabric.Utilities.scss +++ b/src/sass/_Fabric.Utilities.scss @@ -5,8 +5,6 @@ // -------------------------------------------------- // 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; diff --git a/src/sass/_Fabric.Mixins.RTL.scss b/src/sass/mixins/_Directionality.scss similarity index 96% rename from src/sass/_Fabric.Mixins.RTL.scss rename to src/sass/mixins/_Directionality.scss index cfc077f56..1548f0b6d 100644 --- a/src/sass/_Fabric.Mixins.RTL.scss +++ b/src/sass/mixins/_Directionality.scss @@ -3,10 +3,7 @@ // // Office UI Fabric // -------------------------------------------------- -// Internationalization mixins - -// @todo: Rename this file to reduce confusion. Other 'RTL' files are only used in RTL builds, -// while these mixins are used in all builds. Directionality, maybe? +// Directionality mixins to generate LTR and RTL-specific styles // Base left-to-right mixin definition. @mixin LTR { @@ -324,4 +321,4 @@ transition-property: left; } } -} \ No newline at end of file +} diff --git a/src/sass/_Fabric.Mixins.scss b/src/sass/mixins/_Mixins.scss similarity index 98% rename from src/sass/_Fabric.Mixins.scss rename to src/sass/mixins/_Mixins.scss index 3795150cd..7782cc0a6 100644 --- a/src/sass/_Fabric.Mixins.scss +++ b/src/sass/mixins/_Mixins.scss @@ -5,9 +5,9 @@ // -------------------------------------------------- // Vendor-prefixed mixins -// @todo: May be able to remove this later. -@import './Fabric.Typography'; - +// Mixins +// @todo: Can this be removed? +@import '../Fabric.Typography'; // Border radius. @mixin border-radius($ms-radius: 5px) { From 61c416fa4cc8d9abd915b097725d9f6013da3a23 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 17:27:07 -0800 Subject: [PATCH 17/35] Move brand icon mixins --- src/sass/Fabric.RTL.scss | 14 +++++--------- src/sass/Fabric.scss | 16 ++++++---------- ...c.Brand.Icons.Output.scss => _BrandIcon.scss} | 8 ++++---- .../_BrandIcon.scss} | 4 +++- src/sass/mixins/_Directionality.scss | 2 ++ 5 files changed, 20 insertions(+), 24 deletions(-) rename src/sass/{Fabric.Brand.Icons.Output.scss => _BrandIcon.scss} (53%) rename src/sass/{_Fabric.Brand.Icons.scss => mixins/_BrandIcon.scss} (93%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 70db99572..b282443b3 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -6,7 +6,6 @@ // Fabric Core Module Loader (RTL) // Variables -// @todo: Just import _Fabric.Common here instead of duplicating the imports? @import './variables/Animation'; @import './variables/BrandIcon'; @import './variables/Color'; @@ -15,12 +14,15 @@ @import './variables/Responsive'; @import './variables/ZIndex'; -// Mixins +// Mixins, common to both LTR and RTL @import './mixins/Mixins'; @import './mixins/Animation'; -@import './mixins/Animation.RTL'; +@import './mixins/BrandIcon'; @import './mixins/Directionality'; +// RTL-specific mixins +@import './mixins/Animation.RTL'; + // Output @import './Animation'; @import './Wrapper'; @@ -47,12 +49,6 @@ @import './Fabric.Icons.Font.Output'; @import './Fabric.Icons.Output'; -// Brand Icons -@import './Fabric.Brand.Icons.Output'; - -// Animations - - // Responsive @import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 4b3e85744..d5414d780 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -5,8 +5,7 @@ // -------------------------------------------------- // Fabric Core Module Loader (LTR) -// Variables and mixins -@import './Fabric.Common'; +// Variables @import './variables/Animation'; @import './variables/BrandIcon'; @import './variables/Color'; @@ -15,12 +14,15 @@ @import './variables/Responsive'; @import './variables/ZIndex'; -// Mixins +// Mixins, common to both LTR and RTL @import './mixins/Mixins'; @import './mixins/Animation'; -@import './mixins/Animation.LTR'; +@import './mixins/BrandIcon'; @import './mixins/Directionality'; +// LTR-specific mixins +@import './mixins/Animation.LTR'; + // Output @import './Animation'; @import './Wrapper'; @@ -47,12 +49,6 @@ @import './Fabric.Icons.Font.Output'; @import './Fabric.Icons.Output'; -// Brand Icons -@import './Fabric.Brand.Icons.Output'; - -// Animations - - // Responsive @import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.Brand.Icons.Output.scss b/src/sass/_BrandIcon.scss similarity index 53% rename from src/sass/Fabric.Brand.Icons.Output.scss rename to src/sass/_BrandIcon.scss index 8781a7fec..05693817a 100644 --- a/src/sass/Fabric.Brand.Icons.Output.scss +++ b/src/sass/_BrandIcon.scss @@ -1,19 +1,19 @@ -@import './Fabric.Brand.Icons'; +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. @include brandIconClasses(1); @include brandIconSizesClasses(); // Pixel Ratio 1.5 @media only screen and (min-resolution: 144dpi) { - @include brandIconClasses(1_5); + @include brandIconClasses(1_5); } // Pixel Ratio 2 @media only screen and (min-resolution: 192dpi) { - @include brandIconClasses(2); + @include brandIconClasses(2); } // Pixel Ratio 3 @media only screen and (min-resolution: 288dpi) { - @include brandIconClasses(3); + @include brandIconClasses(3); } \ No newline at end of file diff --git a/src/sass/_Fabric.Brand.Icons.scss b/src/sass/mixins/_BrandIcon.scss similarity index 93% rename from src/sass/_Fabric.Brand.Icons.scss rename to src/sass/mixins/_BrandIcon.scss index 68d204a94..4df0f4831 100644 --- a/src/sass/_Fabric.Brand.Icons.scss +++ b/src/sass/mixins/_BrandIcon.scss @@ -1,7 +1,9 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // Variables -@import './variables/BrandIcon'; +@import '../variables/BrandIcon'; + +// @todo: Prefix all mixins with "ms-" // Generate Icon Classes for product and document icons @mixin brandIconClasses($retina) { diff --git a/src/sass/mixins/_Directionality.scss b/src/sass/mixins/_Directionality.scss index 1548f0b6d..0130bceea 100644 --- a/src/sass/mixins/_Directionality.scss +++ b/src/sass/mixins/_Directionality.scss @@ -5,6 +5,8 @@ // -------------------------------------------------- // Directionality mixins to generate LTR and RTL-specific styles +// @todo: Prefix all mixins with "ms-" + // Base left-to-right mixin definition. @mixin LTR { [dir='ltr'] & { From 967b817aceb0d2aa36b48a5257bd791c39ba7889 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 17:30:18 -0800 Subject: [PATCH 18/35] Move color mixins and output --- src/sass/Fabric.RTL.scss | 7 +++---- src/sass/Fabric.scss | 7 +++---- src/sass/{Fabric.Color.Mixins.Output.scss => _Color.scss} | 2 -- src/sass/_Fabric.Common.scss | 4 +++- src/sass/{_Fabric.Color.Mixins.scss => mixins/_Color.scss} | 0 5 files changed, 9 insertions(+), 11 deletions(-) rename src/sass/{Fabric.Color.Mixins.Output.scss => _Color.scss} (99%) rename src/sass/{_Fabric.Color.Mixins.scss => mixins/_Color.scss} (100%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index b282443b3..d8328a030 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -15,16 +15,18 @@ @import './variables/ZIndex'; // Mixins, common to both LTR and RTL -@import './mixins/Mixins'; @import './mixins/Animation'; @import './mixins/BrandIcon'; +@import './mixins/Color'; @import './mixins/Directionality'; +@import './mixins/Mixins'; // RTL-specific mixins @import './mixins/Animation.RTL'; // Output @import './Animation'; +@import './Color'; @import './Wrapper'; @@ -38,9 +40,6 @@ // Common utilities @import './Fabric.Utilities.Output'; -// Colors -@import './Fabric.Color.Mixins.Output'; - // Typography @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index d5414d780..c225045e9 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -15,16 +15,18 @@ @import './variables/ZIndex'; // Mixins, common to both LTR and RTL -@import './mixins/Mixins'; @import './mixins/Animation'; @import './mixins/BrandIcon'; +@import './mixins/Color'; @import './mixins/Directionality'; +@import './mixins/Mixins'; // LTR-specific mixins @import './mixins/Animation.LTR'; // Output @import './Animation'; +@import './Color'; @import './Wrapper'; @@ -38,9 +40,6 @@ // Common utilities @import './Fabric.Utilities.Output'; -// Colors -@import './Fabric.Color.Mixins.Output'; - // Typography @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; diff --git a/src/sass/Fabric.Color.Mixins.Output.scss b/src/sass/_Color.scss similarity index 99% rename from src/sass/Fabric.Color.Mixins.Output.scss rename to src/sass/_Color.scss index d544a5bfb..7febfd35e 100644 --- a/src/sass/Fabric.Color.Mixins.Output.scss +++ b/src/sass/_Color.scss @@ -5,8 +5,6 @@ // -------------------------------------------------- // Fabric Core Color Mixins -@import 'Fabric.Color.Mixins'; - //== Background colors // // Theme colors diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_Fabric.Common.scss index d534bbace..78088499c 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_Fabric.Common.scss @@ -9,13 +9,15 @@ // Mixins @import './mixins/Animation'; +@import './mixins/Color'; @import './mixins/Directionality'; @import './mixins/Mixins'; +// Default LTR mixins +@import './mixins/Animation.LTR'; // @todo: Go through these. -@import './Fabric.Color.Mixins'; @import './Fabric.Grid'; @import './Fabric.Icons'; @import './Fabric.Responsive.Utilities'; diff --git a/src/sass/_Fabric.Color.Mixins.scss b/src/sass/mixins/_Color.scss similarity index 100% rename from src/sass/_Fabric.Color.Mixins.scss rename to src/sass/mixins/_Color.scss From fe3a905472c0c2428948b05fd938b7343f9ed9b2 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 17:33:54 -0800 Subject: [PATCH 19/35] Rename Fabric.Common to References --- src/documentation/sass/docs.scss | 4 ++-- src/sass/Fabric.RTL.scss | 2 +- src/sass/Fabric.scss | 2 +- src/sass/{_Fabric.Common.scss => _References.scss} | 7 +++++++ 4 files changed, 11 insertions(+), 4 deletions(-) rename src/sass/{_Fabric.Common.scss => _References.scss} (68%) diff --git a/src/documentation/sass/docs.scss b/src/documentation/sass/docs.scss index dacc98ab1..8aabaf590 100644 --- a/src/documentation/sass/docs.scss +++ b/src/documentation/sass/docs.scss @@ -1,7 +1,7 @@ // Main Sass file for the docs site -// Import all of Fabric's variables, mixins, and utility classes -@import '../../sass/_Fabric.Common.scss'; +// Import all of Fabric's variables and mixins +@import '../../sass/_References.scss'; // New font stack for presenting code $ms-font-family-code: "Consolas", "Monaco", "Ubuntu Mono", Courier, monospace; diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index d8328a030..113dd0dc9 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -24,7 +24,7 @@ // RTL-specific mixins @import './mixins/Animation.RTL'; -// Output +// Partials that output CSS @import './Animation'; @import './Color'; @import './Wrapper'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index c225045e9..ef09489a9 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -24,7 +24,7 @@ // LTR-specific mixins @import './mixins/Animation.LTR'; -// Output +// Partials that output CSS @import './Animation'; @import './Color'; @import './Wrapper'; diff --git a/src/sass/_Fabric.Common.scss b/src/sass/_References.scss similarity index 68% rename from src/sass/_Fabric.Common.scss rename to src/sass/_References.scss index 78088499c..df858ea3b 100644 --- a/src/sass/_Fabric.Common.scss +++ b/src/sass/_References.scss @@ -1,3 +1,10 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// +// Office UI Fabric +// -------------------------------------------------- +// Variables and mixins that can be referenced without outputting any CSS. + // Variables @import './variables/Animation'; @import './variables/BrandIcon'; From 33f5fe11839fd4b66a1920660cf2f9c61ced0a96 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sat, 10 Dec 2016 17:41:56 -0800 Subject: [PATCH 20/35] Move grid mixins and classes. Added support for nested grids in the mixin. --- src/sass/Fabric.RTL.scss | 5 ++--- src/sass/Fabric.scss | 5 ++--- src/sass/{Fabric.Grid.Output.scss => _Grid.scss} | 8 -------- src/sass/_References.scss | 2 +- src/sass/{_Fabric.Grid.scss => mixins/_Grid.scss} | 10 +++++++++- 5 files changed, 14 insertions(+), 16 deletions(-) rename src/sass/{Fabric.Grid.Output.scss => _Grid.scss} (71%) rename src/sass/{_Fabric.Grid.scss => mixins/_Grid.scss} (74%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 113dd0dc9..59c3142ea 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -19,6 +19,7 @@ @import './mixins/BrandIcon'; @import './mixins/Color'; @import './mixins/Directionality'; +@import './mixins/Grid'; @import './mixins/Mixins'; // RTL-specific mixins @@ -27,6 +28,7 @@ // Partials that output CSS @import './Animation'; @import './Color'; +@import './Grid'; @import './Wrapper'; @@ -50,6 +52,3 @@ // Responsive @import './Fabric.Responsive.Utilities.Output'; - -// Grid -@import './Fabric.Grid.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index ef09489a9..e0145ec16 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -19,6 +19,7 @@ @import './mixins/BrandIcon'; @import './mixins/Color'; @import './mixins/Directionality'; +@import './mixins/Grid'; @import './mixins/Mixins'; // LTR-specific mixins @@ -27,6 +28,7 @@ // Partials that output CSS @import './Animation'; @import './Color'; +@import './Grid'; @import './Wrapper'; @@ -50,6 +52,3 @@ // Responsive @import './Fabric.Responsive.Utilities.Output'; - -// Grid -@import './Fabric.Grid.Output'; diff --git a/src/sass/Fabric.Grid.Output.scss b/src/sass/_Grid.scss similarity index 71% rename from src/sass/Fabric.Grid.Output.scss rename to src/sass/_Grid.scss index 7301b570d..bf343e627 100644 --- a/src/sass/Fabric.Grid.Output.scss +++ b/src/sass/_Grid.scss @@ -5,8 +5,6 @@ // -------------------------------------------------- // Fluid 12-column grids for small, medium, and large devices -@import 'Fabric.Grid'; - //== Grid container (same for all sizes) // .ms-Grid { @@ -24,9 +22,3 @@ .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/src/sass/_References.scss b/src/sass/_References.scss index df858ea3b..557655aff 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -18,6 +18,7 @@ @import './mixins/Animation'; @import './mixins/Color'; @import './mixins/Directionality'; +@import './mixins/Grid'; @import './mixins/Mixins'; // Default LTR mixins @@ -25,7 +26,6 @@ // @todo: Go through these. -@import './Fabric.Grid'; @import './Fabric.Icons'; @import './Fabric.Responsive.Utilities'; @import './Fabric.Typography'; diff --git a/src/sass/_Fabric.Grid.scss b/src/sass/mixins/_Grid.scss similarity index 74% rename from src/sass/_Fabric.Grid.scss rename to src/sass/mixins/_Grid.scss index 14430d2d8..a56511f99 100644 --- a/src/sass/_Fabric.Grid.scss +++ b/src/sass/mixins/_Grid.scss @@ -5,6 +5,8 @@ // -------------------------------------------------- // Fluid 12-column grids for small, medium, and large devices +// @todo: May be able to remove this later. +@import '../Fabric.Utilities'; //== Grid container (same for all sizes) // @@ -31,4 +33,10 @@ padding-right: 8px; @include ms-u-borderBox; float: left; -} \ No newline at end of file + + // 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 { + padding: 0; + } +} From 34dbe8bbdb817e00d4198806e5115f93e44f7da1 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 10:21:04 -0800 Subject: [PATCH 21/35] Move icon mixins to mixins folder --- src/sass/Fabric.Icons.Output.scss | 2 +- src/sass/Fabric.RTL.scss | 3 ++- src/sass/Fabric.scss | 1 + src/sass/_References.scss | 2 +- src/sass/{_Fabric.Icons.scss => mixins/_Icon.scss} | 4 ++-- 5 files changed, 7 insertions(+), 5 deletions(-) rename src/sass/{_Fabric.Icons.scss => mixins/_Icon.scss} (99%) diff --git a/src/sass/Fabric.Icons.Output.scss b/src/sass/Fabric.Icons.Output.scss index d6ba50a6a..02e954262 100644 --- a/src/sass/Fabric.Icons.Output.scss +++ b/src/sass/Fabric.Icons.Output.scss @@ -6,7 +6,7 @@ // Icon definitions // @todo: This might not be needed. -@import './Fabric.Icons'; +@import './mixins/Icon'; // Base icon definition .ms-Icon { diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 59c3142ea..d7fd48f96 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -26,8 +26,9 @@ @import './mixins/Animation.RTL'; // Partials that output CSS -@import './Animation'; @import './Color'; +@import './BrandIcon'; +@import './Animation'; @import './Grid'; @import './Wrapper'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index e0145ec16..09089550d 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -27,6 +27,7 @@ // Partials that output CSS @import './Animation'; +@import './BrandIcon'; @import './Color'; @import './Grid'; @import './Wrapper'; diff --git a/src/sass/_References.scss b/src/sass/_References.scss index 557655aff..c98a171cb 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -19,6 +19,7 @@ @import './mixins/Color'; @import './mixins/Directionality'; @import './mixins/Grid'; +@import './mixins/Icon'; @import './mixins/Mixins'; // Default LTR mixins @@ -26,7 +27,6 @@ // @todo: Go through these. -@import './Fabric.Icons'; @import './Fabric.Responsive.Utilities'; @import './Fabric.Typography'; @import './Fabric.Typography.Mixins'; diff --git a/src/sass/_Fabric.Icons.scss b/src/sass/mixins/_Icon.scss similarity index 99% rename from src/sass/_Fabric.Icons.scss rename to src/sass/mixins/_Icon.scss index c220ed91c..2188c9b7a 100644 --- a/src/sass/_Fabric.Icons.scss +++ b/src/sass/mixins/_Icon.scss @@ -7,8 +7,8 @@ // Variables // @todo: Why are these necessary? Variables should already be available -@import './variables/Icon'; -@import './variables/ZIndex'; +@import '../variables/Icon'; +@import '../variables/ZIndex'; // Base icon definition @mixin ms-Icon { From dcd2b2fed96ba58fce90c9381bbbb1dad7c57a42 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 10:23:12 -0800 Subject: [PATCH 22/35] Move responsive mixins into the mixins folder --- src/sass/Fabric.Responsive.Utilities.Output.scss | 2 +- src/sass/_References.scss | 2 +- .../_Responsive.scss} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename src/sass/{_Fabric.Responsive.Utilities.scss => mixins/_Responsive.scss} (100%) diff --git a/src/sass/Fabric.Responsive.Utilities.Output.scss b/src/sass/Fabric.Responsive.Utilities.Output.scss index 62bf237f7..e20a5805a 100644 --- a/src/sass/Fabric.Responsive.Utilities.Output.scss +++ b/src/sass/Fabric.Responsive.Utilities.Output.scss @@ -6,7 +6,7 @@ // Responsive utilities based on defined variables, component visibility, // and size for different displays. @import './variables/Responsive'; -@import './Fabric.Responsive.Utilities'; +@import './mixins/Responsive'; //== Responsive visiblity classes // diff --git a/src/sass/_References.scss b/src/sass/_References.scss index c98a171cb..7523c2751 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -21,13 +21,13 @@ @import './mixins/Grid'; @import './mixins/Icon'; @import './mixins/Mixins'; +@import './mixins/Responsive'; // Default LTR mixins @import './mixins/Animation.LTR'; // @todo: Go through these. -@import './Fabric.Responsive.Utilities'; @import './Fabric.Typography'; @import './Fabric.Typography.Mixins'; @import './Fabric.Utilities'; diff --git a/src/sass/_Fabric.Responsive.Utilities.scss b/src/sass/mixins/_Responsive.scss similarity index 100% rename from src/sass/_Fabric.Responsive.Utilities.scss rename to src/sass/mixins/_Responsive.scss From 635a8fd7062f579aedb0344e244742758c3bf88b Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 10:30:00 -0800 Subject: [PATCH 23/35] Combined all type-related mixins into a single file in the mixins folder --- src/sass/Fabric.Icons.Font.Output.scss | 2 - src/sass/Fabric.Typography.Fonts.Output.scss | 2 +- src/sass/Fabric.Typography.Output.scss | 2 +- src/sass/_Fabric.Typography.Fonts.scss | 151 --------------- ..._Fabric.Typography.Language.Overrides.scss | 34 ---- src/sass/_Fabric.Typography.Mixins.scss | 11 -- src/sass/_References.scss | 3 +- .../_Font.scss} | 182 +++++++++++++++++- src/sass/mixins/_Mixins.scss | 2 +- src/sass/mixins/_Responsive.scss | 2 + 10 files changed, 186 insertions(+), 205 deletions(-) delete mode 100644 src/sass/_Fabric.Typography.Fonts.scss delete mode 100644 src/sass/_Fabric.Typography.Language.Overrides.scss delete mode 100644 src/sass/_Fabric.Typography.Mixins.scss rename src/sass/{_Fabric.Typography.scss => mixins/_Font.scss} (50%) diff --git a/src/sass/Fabric.Icons.Font.Output.scss b/src/sass/Fabric.Icons.Font.Output.scss index 3f6ed434a..154e43aa3 100644 --- a/src/sass/Fabric.Icons.Font.Output.scss +++ b/src/sass/Fabric.Icons.Font.Output.scss @@ -9,8 +9,6 @@ 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: 'FabricMDL2Icons'; src: url('https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff2') format('woff2'), diff --git a/src/sass/Fabric.Typography.Fonts.Output.scss b/src/sass/Fabric.Typography.Fonts.Output.scss index 107568430..e6a2d5cc6 100644 --- a/src/sass/Fabric.Typography.Fonts.Output.scss +++ b/src/sass/Fabric.Typography.Fonts.Output.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Font definitions -@import 'Fabric.Typography.Fonts'; +@import './mixins/Font'; @include SegoeUIWestEuropeanLight; @include SegoeUIWestEuropeanRegular; diff --git a/src/sass/Fabric.Typography.Output.scss b/src/sass/Fabric.Typography.Output.scss index 8d2e8285c..db82a28ce 100644 --- a/src/sass/Fabric.Typography.Output.scss +++ b/src/sass/Fabric.Typography.Output.scss @@ -4,7 +4,7 @@ // Office UI Fabric // -------------------------------------------------- // Typographic mixins arranged with appropriate size and family combinations. -@import './Fabric.Typography'; +@import './mixins/Font'; // Super Styles (LIMITED USE) // Weights: Light diff --git a/src/sass/_Fabric.Typography.Fonts.scss b/src/sass/_Fabric.Typography.Fonts.scss deleted file mode 100644 index a6604304e..000000000 --- a/src/sass/_Fabric.Typography.Fonts.scss +++ /dev/null @@ -1,151 +0,0 @@ -// 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 - -/* - 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-font-name} #{$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: 100; - font-style: normal; - } -} - -@mixin SegoeUISemilight($ms-font-language, $ms-font-path) { - @font-face { - font-family: '#{$ms-font-name} #{$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: 200; - font-style: normal; - } -} - -@mixin SegoeUIRegular($ms-font-language, $ms-font-path) { - @font-face { - font-family: '#{$ms-font-name} #{$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: 400; - font-style: normal; - } -} - -@mixin SegoeUISemibold($ms-font-language, $ms-font-path) { - @font-face { - font-family: '#{$ms-font-name} #{$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: 600; - 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/src/sass/_Fabric.Typography.Language.Overrides.scss b/src/sass/_Fabric.Typography.Language.Overrides.scss deleted file mode 100644 index 1499c493b..000000000 --- a/src/sass/_Fabric.Typography.Language.Overrides.scss +++ /dev/null @@ -1,34 +0,0 @@ -// 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($lang-code, $font-family) { - *[lang='#{$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: $font-family; - } - } -} diff --git a/src/sass/_Fabric.Typography.Mixins.scss b/src/sass/_Fabric.Typography.Mixins.scss deleted file mode 100644 index a96566452..000000000 --- a/src/sass/_Fabric.Typography.Mixins.scss +++ /dev/null @@ -1,11 +0,0 @@ -// 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 mixins - -@mixin ms-baseFont { - font-family: $ms-font-family-base; - -webkit-font-smoothing: antialiased; -} diff --git a/src/sass/_References.scss b/src/sass/_References.scss index 7523c2751..5227bc984 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -18,6 +18,7 @@ @import './mixins/Animation'; @import './mixins/Color'; @import './mixins/Directionality'; +@import './mixins/Font'; @import './mixins/Grid'; @import './mixins/Icon'; @import './mixins/Mixins'; @@ -28,6 +29,4 @@ // @todo: Go through these. -@import './Fabric.Typography'; -@import './Fabric.Typography.Mixins'; @import './Fabric.Utilities'; diff --git a/src/sass/_Fabric.Typography.scss b/src/sass/mixins/_Font.scss similarity index 50% rename from src/sass/_Fabric.Typography.scss rename to src/sass/mixins/_Font.scss index d3056b3ef..21b358bf3 100644 --- a/src/sass/_Fabric.Typography.scss +++ b/src/sass/mixins/_Font.scss @@ -3,9 +3,187 @@ // // Office UI Fabric // -------------------------------------------------- -// Typographic mixins arranged with appropriate size and family combinations. +// Font definitions + +/* + 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 +*/ + +// @todo: Organize this file and prefix all mixins with "ms-" + +// Mixins to generate @font-face rules for unique languages. +@mixin SegoeUILight($ms-font-language, $ms-font-path) { + @font-face { + font-family: '#{$ms-font-name} #{$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: 100; + font-style: normal; + } +} + +@mixin SegoeUISemilight($ms-font-language, $ms-font-path) { + @font-face { + font-family: '#{$ms-font-name} #{$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: 200; + font-style: normal; + } +} + +@mixin SegoeUIRegular($ms-font-language, $ms-font-path) { + @font-face { + font-family: '#{$ms-font-name} #{$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: 400; + font-style: normal; + } +} + +@mixin SegoeUISemibold($ms-font-language, $ms-font-path) { + @font-face { + font-family: '#{$ms-font-name} #{$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: 600; + 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); +} + +// 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($lang-code, $font-family) { + *[lang='#{$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: $font-family; + } + } +} + +@mixin ms-baseFont { + font-family: $ms-font-family-base; + -webkit-font-smoothing: antialiased; +} -@import 'Fabric.Typography.Mixins'; // Super Styles (LIMITED USE) @mixin ms-font-su { diff --git a/src/sass/mixins/_Mixins.scss b/src/sass/mixins/_Mixins.scss index 7782cc0a6..2d95e42ac 100644 --- a/src/sass/mixins/_Mixins.scss +++ b/src/sass/mixins/_Mixins.scss @@ -7,7 +7,7 @@ // Mixins // @todo: Can this be removed? -@import '../Fabric.Typography'; +@import './Font'; // Border radius. @mixin border-radius($ms-radius: 5px) { diff --git a/src/sass/mixins/_Responsive.scss b/src/sass/mixins/_Responsive.scss index 34ef65a20..22632dc42 100644 --- a/src/sass/mixins/_Responsive.scss +++ b/src/sass/mixins/_Responsive.scss @@ -1,3 +1,5 @@ +// @todo: How does responsive work in RTL? + // Small Screens @mixin ms-u-sm12 { width: 100%; From 3404a1e90ad3d609d6437ac1789db39f1ff9f473 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 10:38:28 -0800 Subject: [PATCH 24/35] Combine icon SCSS files and update RTL to import both standard icons and RTL-specific overrides --- src/sass/Fabric.Icons.Font.Output.scss | 19 ----------------- src/sass/Fabric.RTL.scss | 12 +++++------ src/sass/Fabric.scss | 9 +++----- ...c.Icons.RTL.Output.scss => _Icon.RTL.scss} | 2 +- .../{Fabric.Icons.Output.scss => _Icon.scss} | 21 +++++++++++++++---- 5 files changed, 27 insertions(+), 36 deletions(-) delete mode 100644 src/sass/Fabric.Icons.Font.Output.scss rename src/sass/{Fabric.Icons.RTL.Output.scss => _Icon.RTL.scss} (98%) rename src/sass/{Fabric.Icons.Output.scss => _Icon.scss} (98%) diff --git a/src/sass/Fabric.Icons.Font.Output.scss b/src/sass/Fabric.Icons.Font.Output.scss deleted file mode 100644 index 154e43aa3..000000000 --- a/src/sass/Fabric.Icons.Font.Output.scss +++ /dev/null @@ -1,19 +0,0 @@ -// 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 -*/ - -@font-face { - font-family: 'FabricMDL2Icons'; - src: url('https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff2') format('woff2'), - url('https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff') format('woff'), - url('https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index d7fd48f96..ade658a1e 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -20,18 +20,22 @@ @import './mixins/Color'; @import './mixins/Directionality'; @import './mixins/Grid'; +@import './mixins/Icon'; @import './mixins/Mixins'; -// RTL-specific mixins +// Mixins, RTL-specific @import './mixins/Animation.RTL'; -// Partials that output CSS +// Partials that output CSS, common to both LTR and RTL @import './Color'; @import './BrandIcon'; @import './Animation'; @import './Grid'; +@import './Icon'; @import './Wrapper'; +// Partials that output CSS, RTL-specific +@import './Icon.RTL'; @@ -47,9 +51,5 @@ @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; -// Icons -@import './Fabric.Icons.Font.Output'; -@import './Fabric.Icons.Output'; - // Responsive @import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 09089550d..2b5a8187f 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -20,12 +20,13 @@ @import './mixins/Color'; @import './mixins/Directionality'; @import './mixins/Grid'; +@import './mixins/Icon'; @import './mixins/Mixins'; -// LTR-specific mixins +// Mixins, LTR-specific @import './mixins/Animation.LTR'; -// Partials that output CSS +// Partials that output CSS, common to both LTR and RTL @import './Animation'; @import './BrandIcon'; @import './Color'; @@ -47,9 +48,5 @@ @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; -// Icons -@import './Fabric.Icons.Font.Output'; -@import './Fabric.Icons.Output'; - // Responsive @import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.Icons.RTL.Output.scss b/src/sass/_Icon.RTL.scss similarity index 98% rename from src/sass/Fabric.Icons.RTL.Output.scss rename to src/sass/_Icon.RTL.scss index 6b801595c..d8ae48ca4 100644 --- a/src/sass/Fabric.Icons.RTL.Output.scss +++ b/src/sass/_Icon.RTL.scss @@ -1,6 +1,6 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -@import 'Fabric.Icons.Output'; +// @todo: Make sure this file is included IN ADDITION to Icon.scss for the RTL stylesheet // Substitute icons for right-to-left users diff --git a/src/sass/Fabric.Icons.Output.scss b/src/sass/_Icon.scss similarity index 98% rename from src/sass/Fabric.Icons.Output.scss rename to src/sass/_Icon.scss index 02e954262..7a28dda05 100644 --- a/src/sass/Fabric.Icons.Output.scss +++ b/src/sass/_Icon.scss @@ -3,10 +3,22 @@ // // Office UI Fabric // -------------------------------------------------- -// Icon definitions +// 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 +*/ + +// Font-face definition for the 'FabricMDL2Icons' icon font +@font-face { + font-family: 'FabricMDL2Icons'; + src: url('https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff2') format('woff2'), + url('https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.woff') format('woff'), + url('https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} -// @todo: This might not be needed. -@import './mixins/Icon'; // Base icon definition .ms-Icon { @@ -36,9 +48,10 @@ } // @todo: 'DynamicsCRMLogo' class is deprecated, will be removed in a future release +.ms-Icon--DynamicsCRMLogo::before { @include ms-Icon--Dynamics365Logo; } + // @todo: 'CarotRightSolid8' class is deprecated, will be removed in a future release .ms-Icon--CarotRightSolid8::before { @include ms-Icon--CaretRightSolid8; } -.ms-Icon--DynamicsCRMLogo::before { @include ms-Icon--Dynamics365Logo; } // Modifiers: Each of the icons From 4828f864114f558c10fd8b9f04c065bbeb3f50b1 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 10:44:07 -0800 Subject: [PATCH 25/35] Rename Fabric.Responsive.Utilities.Output to Responsive --- src/sass/Fabric.RTL.scss | 4 +--- src/sass/Fabric.scss | 4 +--- ...bric.Responsive.Utilities.Output.scss => _Responsive.scss} | 0 3 files changed, 2 insertions(+), 6 deletions(-) rename src/sass/{Fabric.Responsive.Utilities.Output.scss => _Responsive.scss} (100%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index ade658a1e..66722af10 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -32,6 +32,7 @@ @import './Animation'; @import './Grid'; @import './Icon'; +@import './Responsive'; @import './Wrapper'; // Partials that output CSS, RTL-specific @@ -50,6 +51,3 @@ // Typography @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; - -// Responsive -@import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 2b5a8187f..2dd1c59a8 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -31,6 +31,7 @@ @import './BrandIcon'; @import './Color'; @import './Grid'; +@import './Responsive'; @import './Wrapper'; @@ -47,6 +48,3 @@ // Typography @import './Fabric.Typography.Output'; @import './Fabric.Typography.Fonts.Output'; - -// Responsive -@import './Fabric.Responsive.Utilities.Output'; diff --git a/src/sass/Fabric.Responsive.Utilities.Output.scss b/src/sass/_Responsive.scss similarity index 100% rename from src/sass/Fabric.Responsive.Utilities.Output.scss rename to src/sass/_Responsive.scss From ddbcc20fa5fef51154486d2210262dd85b15ef99 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 10:47:57 -0800 Subject: [PATCH 26/35] Combine all font-related output into Font.scss (may divide back out later) --- src/sass/Fabric.RTL.scss | 5 +- ...bric.Typography.Fonts.Extended.Output.scss | 67 ----------- src/sass/Fabric.Typography.Fonts.Output.scss | 13 -- ....Typography.Language.Overrides.Output.scss | 53 -------- src/sass/Fabric.scss | 5 +- ...bric.Typography.Output.scss => _Font.scss} | 113 ++++++++++++++++++ 6 files changed, 115 insertions(+), 141 deletions(-) delete mode 100644 src/sass/Fabric.Typography.Fonts.Extended.Output.scss delete mode 100644 src/sass/Fabric.Typography.Fonts.Output.scss delete mode 100644 src/sass/Fabric.Typography.Language.Overrides.Output.scss rename src/sass/{Fabric.Typography.Output.scss => _Font.scss} (64%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 66722af10..0a6fb8954 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -30,6 +30,7 @@ @import './Color'; @import './BrandIcon'; @import './Animation'; +@import './Font'; @import './Grid'; @import './Icon'; @import './Responsive'; @@ -47,7 +48,3 @@ // Common utilities @import './Fabric.Utilities.Output'; - -// Typography -@import './Fabric.Typography.Output'; -@import './Fabric.Typography.Fonts.Output'; diff --git a/src/sass/Fabric.Typography.Fonts.Extended.Output.scss b/src/sass/Fabric.Typography.Fonts.Extended.Output.scss deleted file mode 100644 index 5f8ee3421..000000000 --- a/src/sass/Fabric.Typography.Fonts.Extended.Output.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// -// Office UI Fabric -// -------------------------------------------------- - -// Additional @font-face rules for the Leelawadee font. -@font-face { - font-family: 'Leelawadee UI'; - src: local('Leelawadee UI Bold'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.woff2') format('woff2'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.woff') format('woff'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.ttf') format('truetype'); - font-weight: 600; - font-style: normal; -} - -@font-face { - font-family: 'Leelawadee UI'; - src: local('Leelawadee UI Regular'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.woff2') format('woff2'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.woff') format('woff'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.ttf') format('truetype'); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: 'Leelawadee UI'; - src: local('Leelawadee UI Semilight'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.woff2') format('woff2'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.woff') format('woff'), - url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.ttf') format('truetype'); - font-weight: 300; - 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; diff --git a/src/sass/Fabric.Typography.Fonts.Output.scss b/src/sass/Fabric.Typography.Fonts.Output.scss deleted file mode 100644 index e6a2d5cc6..000000000 --- a/src/sass/Fabric.Typography.Fonts.Output.scss +++ /dev/null @@ -1,13 +0,0 @@ -// 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 './mixins/Font'; - -@include SegoeUIWestEuropeanLight; -@include SegoeUIWestEuropeanRegular; -@include SegoeUIWestEuropeanSemibold; -@include SegoeUIWestEuropeanSemilight; \ No newline at end of file diff --git a/src/sass/Fabric.Typography.Language.Overrides.Output.scss b/src/sass/Fabric.Typography.Language.Overrides.Output.scss deleted file mode 100644 index 4fd5a91a7..000000000 --- a/src/sass/Fabric.Typography.Language.Overrides.Output.scss +++ /dev/null @@ -1,53 +0,0 @@ -// 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 using ISO 639-3 language codes - -@import './Fabric.Typography.Language.Overrides'; - -// Generate the override classes for non-distributed fonts. -@include language-override-system-fonts(jpn, $ms-font-stack-japanese); -@include language-override-system-fonts(kor, $ms-font-stack-korean); -@include language-override-system-fonts(cmn, $ms-font-stack-chinese-simplified); -@include language-override-system-fonts(yue, $ms-font-stack-chinese-traditional); -@include language-override-system-fonts(hin, $ms-font-stack-hindi); - -// Generate the override classes for web fonts. -// Thai (Leelawadee) -// tha -@include language-override-system-fonts(tha, $ms-font-stack-leelawadee); - -// Arabic -// ara -@include language-override-system-fonts(ara, $ms-font-stack-arabic); - -// East European -// ces, et, hrv, hun, lit, pl, lat, tur, slk, kaz -@include language-override-system-fonts(ces, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(est, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(hrv, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(hun, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(kaz, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(lav, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(lit, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(pol, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(slk, $ms-font-stack-eastEuropean); -@include language-override-system-fonts(tur, $ms-font-stack-eastEuropean); - -// Cyrillic -// rus -@include language-override-system-fonts(rus, $ms-font-stack-cyrillic); - -// Greek -// ell -@include language-override-system-fonts(ell, $ms-font-stack-greek); - -// Hebrew -// heb -@include language-override-system-fonts(heb, $ms-font-stack-hebrew); - -// Vietnamese -// vie -@include language-override-system-fonts(vie, $ms-font-stack-vietnamese); \ No newline at end of file diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 2dd1c59a8..37ccf0554 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -30,6 +30,7 @@ @import './Animation'; @import './BrandIcon'; @import './Color'; +@import './Font'; @import './Grid'; @import './Responsive'; @import './Wrapper'; @@ -44,7 +45,3 @@ // Common utilities @import './Fabric.Utilities.Output'; - -// Typography -@import './Fabric.Typography.Output'; -@import './Fabric.Typography.Fonts.Output'; diff --git a/src/sass/Fabric.Typography.Output.scss b/src/sass/_Font.scss similarity index 64% rename from src/sass/Fabric.Typography.Output.scss rename to src/sass/_Font.scss index db82a28ce..651037e2e 100644 --- a/src/sass/Fabric.Typography.Output.scss +++ b/src/sass/_Font.scss @@ -387,3 +387,116 @@ .ms-fontColor-error--hover:hover { @include ms-fontColor-error; } + +// Additional @font-face rules for the Leelawadee font. +@font-face { + font-family: 'Leelawadee UI'; + src: local('Leelawadee UI Bold'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.woff2') format('woff2'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.woff') format('woff'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-bold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Leelawadee UI'; + src: local('Leelawadee UI Regular'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.woff2') format('woff2'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.woff') format('woff'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Leelawadee UI'; + src: local('Leelawadee UI Semilight'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.woff2') format('woff2'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.woff') format('woff'), + url('#{$ms-font-directory}/leelawadeeui-thai/leelawadeeui-semilight.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +// Output the standard fonts +@include SegoeUIWestEuropeanLight; +@include SegoeUIWestEuropeanRegular; +@include SegoeUIWestEuropeanSemibold; +@include SegoeUIWestEuropeanSemilight; + +// 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; + +// Generate the override classes for non-distributed fonts. +@include language-override-system-fonts(jpn, $ms-font-stack-japanese); +@include language-override-system-fonts(kor, $ms-font-stack-korean); +@include language-override-system-fonts(cmn, $ms-font-stack-chinese-simplified); +@include language-override-system-fonts(yue, $ms-font-stack-chinese-traditional); +@include language-override-system-fonts(hin, $ms-font-stack-hindi); + +// Generate the override classes for web fonts. +// Thai (Leelawadee) +// tha +@include language-override-system-fonts(tha, $ms-font-stack-leelawadee); + +// Arabic +// ara +@include language-override-system-fonts(ara, $ms-font-stack-arabic); + +// East European +// ces, et, hrv, hun, lit, pl, lat, tur, slk, kaz +@include language-override-system-fonts(ces, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(est, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(hrv, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(hun, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(kaz, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(lav, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(lit, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(pol, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(slk, $ms-font-stack-eastEuropean); +@include language-override-system-fonts(tur, $ms-font-stack-eastEuropean); + +// Cyrillic +// rus +@include language-override-system-fonts(rus, $ms-font-stack-cyrillic); + +// Greek +// ell +@include language-override-system-fonts(ell, $ms-font-stack-greek); + +// Hebrew +// heb +@include language-override-system-fonts(heb, $ms-font-stack-hebrew); + +// Vietnamese +// vie +@include language-override-system-fonts(vie, $ms-font-stack-vietnamese); From 6e784be9c8f4f7634a6b0d17b68b7519c2e1bfb9 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 10:51:05 -0800 Subject: [PATCH 27/35] Move utility mixins and output styles --- src/sass/Fabric.RTL.scss | 12 ++---------- src/sass/Fabric.scss | 12 +----------- src/sass/_References.scss | 5 +---- .../{Fabric.Utilities.Output.scss => _Utility.scss} | 2 +- src/sass/mixins/_Grid.scss | 2 +- .../{_Fabric.Utilities.scss => mixins/_Utility.scss} | 0 6 files changed, 6 insertions(+), 27 deletions(-) rename src/sass/{Fabric.Utilities.Output.scss => _Utility.scss} (97%) rename src/sass/{_Fabric.Utilities.scss => mixins/_Utility.scss} (100%) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 0a6fb8954..be4978329 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -22,6 +22,7 @@ @import './mixins/Grid'; @import './mixins/Icon'; @import './mixins/Mixins'; +@import './mixins/Utility'; // Mixins, RTL-specific @import './mixins/Animation.RTL'; @@ -35,16 +36,7 @@ @import './Icon'; @import './Responsive'; @import './Wrapper'; +@import './Utility'; // Partials that output CSS, RTL-specific @import './Icon.RTL'; - - - - - - -// Need to review below here - -// Common utilities -@import './Fabric.Utilities.Output'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 37ccf0554..e729d5ab6 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -33,15 +33,5 @@ @import './Font'; @import './Grid'; @import './Responsive'; +@import './Utility'; @import './Wrapper'; - - - - - - - -// Need to review below here - -// Common utilities -@import './Fabric.Utilities.Output'; diff --git a/src/sass/_References.scss b/src/sass/_References.scss index 5227bc984..1bd288a8a 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -23,10 +23,7 @@ @import './mixins/Icon'; @import './mixins/Mixins'; @import './mixins/Responsive'; +@import './mixins/Utility'; // Default LTR mixins @import './mixins/Animation.LTR'; - - -// @todo: Go through these. -@import './Fabric.Utilities'; diff --git a/src/sass/Fabric.Utilities.Output.scss b/src/sass/_Utility.scss similarity index 97% rename from src/sass/Fabric.Utilities.Output.scss rename to src/sass/_Utility.scss index 658c4089f..0c5793fb0 100644 --- a/src/sass/Fabric.Utilities.Output.scss +++ b/src/sass/_Utility.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- // Utility classes and mixins used throughout Fabric. -@import 'Fabric.Utilities'; +@import './mixins/Utility'; // The best box is a border box. .ms-u-borderBox, .ms-u-borderBox::before, .ms-u-borderBox::after { diff --git a/src/sass/mixins/_Grid.scss b/src/sass/mixins/_Grid.scss index a56511f99..8d4894bd5 100644 --- a/src/sass/mixins/_Grid.scss +++ b/src/sass/mixins/_Grid.scss @@ -6,7 +6,7 @@ // Fluid 12-column grids for small, medium, and large devices // @todo: May be able to remove this later. -@import '../Fabric.Utilities'; +@import './Utility'; //== Grid container (same for all sizes) // diff --git a/src/sass/_Fabric.Utilities.scss b/src/sass/mixins/_Utility.scss similarity index 100% rename from src/sass/_Fabric.Utilities.scss rename to src/sass/mixins/_Utility.scss From d8779fc332d667f26746a5a038ae7dd986cb6449 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 12:20:01 -0800 Subject: [PATCH 28/35] Add missing animation-fill-mode to fade animations (lost in a previous commit, no change from master) --- src/sass/mixins/_Animation.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/sass/mixins/_Animation.scss b/src/sass/mixins/_Animation.scss index 5cbeb3fd8..3930bc772 100644 --- a/src/sass/mixins/_Animation.scss +++ b/src/sass/mixins/_Animation.scss @@ -221,41 +221,49 @@ @mixin ms-u-fadeIn100 { animation-duration: 0.1s; animation-name: fadeIn; + animation-fill-mode: both; } @mixin ms-u-fadeIn200 { animation-duration: 0.2s; animation-name: fadeIn; + animation-fill-mode: both; } @mixin ms-u-fadeIn400 { animation-duration: 0.4s; animation-name: fadeIn; + animation-fill-mode: both; } @mixin ms-u-fadeIn500 { animation-duration: 0.5s; animation-name: fadeIn; + animation-fill-mode: both; } @mixin ms-u-fadeOut100 { animation-duration: 0.1s; animation-name: fadeOut; + animation-fill-mode: both; } @mixin ms-u-fadeOut200 { animation-duration: 0.2s; animation-name: fadeOut; + animation-fill-mode: both; } @mixin ms-u-fadeOut400 { animation-duration: 0.4s; animation-name: fadeOut; + animation-fill-mode: both; } @mixin ms-u-fadeOut500 { animation-duration: 0.5s; animation-name: fadeOut; + animation-fill-mode: both; } // Expand-collapse From 79df3671544624e3fa4e0a768211e874533153dc Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 12:20:13 -0800 Subject: [PATCH 29/35] Add missing Icon import --- src/sass/Fabric.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index e729d5ab6..978d12043 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -32,6 +32,7 @@ @import './Color'; @import './Font'; @import './Grid'; +@import './Icon'; @import './Responsive'; @import './Utility'; @import './Wrapper'; From 53c39139c56cf885d076645532a1addc7cce5b95 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 12:28:31 -0800 Subject: [PATCH 30/35] Match up LTR and RTL versions --- src/sass/Fabric.RTL.scss | 6 +++--- src/sass/Fabric.scss | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index be4978329..290d0bb33 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -28,15 +28,15 @@ @import './mixins/Animation.RTL'; // Partials that output CSS, common to both LTR and RTL -@import './Color'; -@import './BrandIcon'; @import './Animation'; +@import './BrandIcon'; +@import './Color'; @import './Font'; @import './Grid'; @import './Icon'; @import './Responsive'; -@import './Wrapper'; @import './Utility'; +@import './Wrapper'; // Partials that output CSS, RTL-specific @import './Icon.RTL'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 978d12043..85a700c20 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -22,6 +22,7 @@ @import './mixins/Grid'; @import './mixins/Icon'; @import './mixins/Mixins'; +@import './mixins/Utility'; // Mixins, LTR-specific @import './mixins/Animation.LTR'; @@ -36,3 +37,5 @@ @import './Responsive'; @import './Utility'; @import './Wrapper'; + +// Partials that output CSS, LTR-specific \ No newline at end of file From 292d44a8c78c175487a1b12778bf319c51a564b5 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 13:01:32 -0800 Subject: [PATCH 31/35] Simplify RTL stylesheet to be a copy of LTR, with two override files applied after. Turn RTL Animation mixins into a simple override. --- src/sass/Fabric.RTL.scss | 37 ++---------------- src/sass/Fabric.scss | 9 +---- src/sass/_Animation.RTL.scss | 58 ++++++++++++++++++++++++++++ src/sass/_Animation.scss | 8 ++-- src/sass/_References.scss | 3 -- src/sass/mixins/_Animation.LTR.scss | 59 ----------------------------- src/sass/mixins/_Animation.RTL.scss | 59 ----------------------------- src/sass/mixins/_Animation.scss | 58 ++++++++++++++++++++++++++++ 8 files changed, 126 insertions(+), 165 deletions(-) create mode 100644 src/sass/_Animation.RTL.scss delete mode 100644 src/sass/mixins/_Animation.LTR.scss delete mode 100644 src/sass/mixins/_Animation.RTL.scss diff --git a/src/sass/Fabric.RTL.scss b/src/sass/Fabric.RTL.scss index 290d0bb33..8b796756b 100644 --- a/src/sass/Fabric.RTL.scss +++ b/src/sass/Fabric.RTL.scss @@ -5,38 +5,9 @@ // -------------------------------------------------- // Fabric Core Module Loader (RTL) -// Variables -@import './variables/Animation'; -@import './variables/BrandIcon'; -@import './variables/Color'; -@import './variables/Font'; -@import './variables/Icon'; -@import './variables/Responsive'; -@import './variables/ZIndex'; +// Import the original, LTR version of Fabric +@import './Fabric'; -// Mixins, common to both LTR and RTL -@import './mixins/Animation'; -@import './mixins/BrandIcon'; -@import './mixins/Color'; -@import './mixins/Directionality'; -@import './mixins/Grid'; -@import './mixins/Icon'; -@import './mixins/Mixins'; -@import './mixins/Utility'; - -// Mixins, RTL-specific -@import './mixins/Animation.RTL'; - -// Partials that output CSS, common to both LTR and RTL -@import './Animation'; -@import './BrandIcon'; -@import './Color'; -@import './Font'; -@import './Grid'; -@import './Icon'; -@import './Responsive'; -@import './Utility'; -@import './Wrapper'; - -// Partials that output CSS, RTL-specific +// Apply RTL-specific overrides @import './Icon.RTL'; +@import './Animation.RTL'; diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index 85a700c20..f4e460f67 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -14,7 +14,7 @@ @import './variables/Responsive'; @import './variables/ZIndex'; -// Mixins, common to both LTR and RTL +// Mixins @import './mixins/Animation'; @import './mixins/BrandIcon'; @import './mixins/Color'; @@ -24,10 +24,7 @@ @import './mixins/Mixins'; @import './mixins/Utility'; -// Mixins, LTR-specific -@import './mixins/Animation.LTR'; - -// Partials that output CSS, common to both LTR and RTL +// Partials that output CSS @import './Animation'; @import './BrandIcon'; @import './Color'; @@ -37,5 +34,3 @@ @import './Responsive'; @import './Utility'; @import './Wrapper'; - -// Partials that output CSS, LTR-specific \ No newline at end of file diff --git a/src/sass/_Animation.RTL.scss b/src/sass/_Animation.RTL.scss new file mode 100644 index 000000000..623f7a541 --- /dev/null +++ b/src/sass/_Animation.RTL.scss @@ -0,0 +1,58 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. + +// Animation overrides for right-to-left users +.ms-u-slideRightIn10 { + @include ms-u-slideLeftIn10; +} + +.ms-u-slideRightIn20 { + @include ms-u-slideLeftIn20; +} + +.ms-u-slideRightIn40 { + @include ms-u-slideLeftIn40; +} + +.ms-u-slideRightIn400 { + @include ms-u-slideLeftIn400; +} + +.ms-u-slideRightOut40 { + @include ms-u-slideLeftOut40; +} + +.ms-u-slideRightOut400 { + @include ms-u-slideLeftOut400; +} + +.ms-u-slideLeftIn10 { + @include ms-u-slideRightIn10; +} + +.ms-u-slideLeftIn20 { + @include ms-u-slideRightIn20; +} + +.ms-u-slideLeftIn40 { + @include ms-u-slideRightIn40; +} + +.ms-u-slideLeftIn400 { + @include ms-u-slideRightIn400; +} + +.ms-u-slideLeftOut40 { + @include ms-u-slideRightOut40; +} + +.ms-u-slideLeftOut400 { + @include ms-u-slideRightOut400; +} + +.ms-u-rotate90deg { + @include ms-u-rotateN90deg; +} + +.ms-u-rotateN90deg { + @include ms-u-rotate90deg; +} diff --git a/src/sass/_Animation.scss b/src/sass/_Animation.scss index 2d0c27323..a48cbd882 100644 --- a/src/sass/_Animation.scss +++ b/src/sass/_Animation.scss @@ -156,18 +156,18 @@ // Delay .ms-u-delay100 { - @include ms-u-delay100; + @include ms-u-delay100; } .ms-u-delay200 { - @include ms-u-delay200; + @include ms-u-delay200; } // Rotate .ms-u-rotate90deg { - @include ms-u-rotate90deg; + @include ms-u-rotate90deg; } .ms-u-rotateN90deg { - @include ms-u-rotateN90deg; + @include ms-u-rotateN90deg; } diff --git a/src/sass/_References.scss b/src/sass/_References.scss index 1bd288a8a..068bb346d 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -24,6 +24,3 @@ @import './mixins/Mixins'; @import './mixins/Responsive'; @import './mixins/Utility'; - -// Default LTR mixins -@import './mixins/Animation.LTR'; diff --git a/src/sass/mixins/_Animation.LTR.scss b/src/sass/mixins/_Animation.LTR.scss deleted file mode 100644 index 504fc5c5b..000000000 --- a/src/sass/mixins/_Animation.LTR.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// Slide -@mixin ms-u-slideRightIn10 { - @include ms-animation((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn20 { - @include ms-animation((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn40 { - @include ms-animation((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn400 { - @include ms-animation((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightOut40 { - @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideRightOut400 { - @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideLeftIn10 { - @include ms-animation((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn20 { - @include ms-animation((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn40 { - @include ms-animation((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn400 { - @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftOut40 { - @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideLeftOut400 { - @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); -} - -// Rotate -@mixin ms-u-rotate90deg { - @include ms-animation(rotate90, $ms-duration1, $ms-ease2); -} - -@mixin ms-u-rotateN90deg { - @include ms-animation(rotateN90, $ms-duration1, $ms-ease2); -} diff --git a/src/sass/mixins/_Animation.RTL.scss b/src/sass/mixins/_Animation.RTL.scss deleted file mode 100644 index 72fdbe36f..000000000 --- a/src/sass/mixins/_Animation.RTL.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. - -// Slide -@mixin ms-u-slideRightIn10 { - @include ms-animation((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn20 { - @include ms-animation((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn40 { - @include ms-animation((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightIn400 { - @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideRightOut40 { - @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideRightOut400 { - @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideLeftIn10 { - @include ms-animation((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn20 { - @include ms-animation((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn40 { - @include ms-animation((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftIn400 { - @include ms-animation((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); -} - -@mixin ms-u-slideLeftOut40 { - @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); -} - -@mixin ms-u-slideLeftOut400 { - @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); -} - -// Rotate -@mixin ms-u-rotate90deg { - @include ms-animation(rotateN90, $ms-duration1, $ms-ease2); -} - -@mixin ms-u-rotateN90deg { - @include ms-animation(rotate90, $ms-duration1, $ms-ease2); -} diff --git a/src/sass/mixins/_Animation.scss b/src/sass/mixins/_Animation.scss index 3930bc772..33e2037e8 100644 --- a/src/sass/mixins/_Animation.scss +++ b/src/sass/mixins/_Animation.scss @@ -168,6 +168,54 @@ } // Slide +@mixin ms-u-slideRightIn10 { + @include ms-animation((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn20 { + @include ms-animation((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn40 { + @include ms-animation((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightIn400 { + @include ms-animation((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideRightOut40 { + @include ms-animation((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideRightOut400 { + @include ms-animation((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideLeftIn10 { + @include ms-animation((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn20 { + @include ms-animation((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn40 { + @include ms-animation((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftIn400 { + @include ms-animation((fadeIn, slideLeftIn400), $ms-duration3, $ms-ease1); +} + +@mixin ms-u-slideLeftOut40 { + @include ms-animation((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2); +} + +@mixin ms-u-slideLeftOut400 { + @include ms-animation((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2); +} + @mixin ms-u-slideUpIn10 { @include ms-animation((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2); } @@ -217,6 +265,16 @@ @include ms-animation((fadeIn, scaleDown100), $ms-duration3, $ms-ease1); } +// Rotate +@mixin ms-u-rotate90deg { + @include ms-animation(rotate90, $ms-duration1, $ms-ease2); +} + +@mixin ms-u-rotateN90deg { + @include ms-animation(rotateN90, $ms-duration1, $ms-ease2); +} + + // Fade @mixin ms-u-fadeIn100 { animation-duration: 0.1s; From 1a65fc764e8cd9eddffad80946dc6f5dd5a0776d Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 13:09:59 -0800 Subject: [PATCH 32/35] Clean up comments, @todos, and unnecessary imports --- src/sass/_Icon.RTL.scss | 3 --- src/sass/mixins/_Animation.scss | 3 --- src/sass/mixins/_BrandIcon.scss | 8 ++------ src/sass/mixins/_Directionality.scss | 2 -- src/sass/mixins/_Font.scss | 4 +--- src/sass/mixins/_Grid.scss | 3 --- src/sass/mixins/_Icon.scss | 6 ------ src/sass/mixins/_Mixins.scss | 4 ---- src/sass/mixins/_Responsive.scss | 2 +- src/sass/variables/_Animation.scss | 2 -- src/sass/variables/_Color.scss | 3 --- src/sass/variables/_Font.scss | 2 -- src/sass/variables/_ZIndex.scss | 1 - 13 files changed, 4 insertions(+), 39 deletions(-) diff --git a/src/sass/_Icon.RTL.scss b/src/sass/_Icon.RTL.scss index d8ae48ca4..79962014d 100644 --- a/src/sass/_Icon.RTL.scss +++ b/src/sass/_Icon.RTL.scss @@ -1,9 +1,6 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -// @todo: Make sure this file is included IN ADDITION to Icon.scss for the RTL stylesheet - // Substitute icons for right-to-left users - .ms-Icon--ArrowDownRightMirrored8::before { @include ms-Icon--ArrowDownRight8; } .ms-Icon--ArrowDownRight8::before { @include ms-Icon--ArrowDownRightMirrored8; } diff --git a/src/sass/mixins/_Animation.scss b/src/sass/mixins/_Animation.scss index 33e2037e8..b3627a92a 100644 --- a/src/sass/mixins/_Animation.scss +++ b/src/sass/mixins/_Animation.scss @@ -9,8 +9,6 @@ @import '../variables/Animation'; // Outputs the @keyframes used by the animation classes -// @todo: Have this output only the @keyframes needed by a subset of animations? -// @todo: Prefix animation names with "ms-" to prevent conflicts? @mixin ms-animation-keyframes { @keyframes slideRightIn10 { from { transform:translate3d(-10px, 0px, 0px); } @@ -342,7 +340,6 @@ animation-delay: $ms-duration1; } -// delay200 @mixin ms-u-delay200 { animation-delay: $ms-duration2; } diff --git a/src/sass/mixins/_BrandIcon.scss b/src/sass/mixins/_BrandIcon.scss index 4df0f4831..cc6501531 100644 --- a/src/sass/mixins/_BrandIcon.scss +++ b/src/sass/mixins/_BrandIcon.scss @@ -3,18 +3,14 @@ // Variables @import '../variables/BrandIcon'; -// @todo: Prefix all mixins with "ms-" - -// Generate Icon Classes for product and document icons +// Generate classes for product and document icons @mixin brandIconClasses($retina) { - // Generate Product icon list @each $icon in $ms-productIcons { .ms-BrandIcon--#{$icon} { @include brandIconSizes($icon, $retina, $ms-productImagesPath); } } - // Generate Document icon list @each $icon in $ms-documentIcons { .ms-BrandIcon--#{$icon} { @include brandIconSizes($icon, $retina, $ms-documentImagesPath); @@ -40,4 +36,4 @@ height: #{$size}px; } } -} \ No newline at end of file +} diff --git a/src/sass/mixins/_Directionality.scss b/src/sass/mixins/_Directionality.scss index 0130bceea..1548f0b6d 100644 --- a/src/sass/mixins/_Directionality.scss +++ b/src/sass/mixins/_Directionality.scss @@ -5,8 +5,6 @@ // -------------------------------------------------- // Directionality mixins to generate LTR and RTL-specific styles -// @todo: Prefix all mixins with "ms-" - // Base left-to-right mixin definition. @mixin LTR { [dir='ltr'] & { diff --git a/src/sass/mixins/_Font.scss b/src/sass/mixins/_Font.scss index 21b358bf3..b1efcbfb2 100644 --- a/src/sass/mixins/_Font.scss +++ b/src/sass/mixins/_Font.scss @@ -9,8 +9,6 @@ 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 */ -// @todo: Organize this file and prefix all mixins with "ms-" - // Mixins to generate @font-face rules for unique languages. @mixin SegoeUILight($ms-font-language, $ms-font-path) { @font-face { @@ -506,7 +504,7 @@ color: $ms-color-success; } -@mixin ms-fontColor-alert { // Deprecated: Use ms-fontColor-severeWarning +@mixin ms-fontColor-alert { // @todo: Deprecated: Use ms-fontColor-severeWarning color: $ms-color-alert; } diff --git a/src/sass/mixins/_Grid.scss b/src/sass/mixins/_Grid.scss index 8d4894bd5..21ea403d3 100644 --- a/src/sass/mixins/_Grid.scss +++ b/src/sass/mixins/_Grid.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- // Fluid 12-column grids for small, medium, and large devices -// @todo: May be able to remove this later. -@import './Utility'; - //== Grid container (same for all sizes) // @mixin ms-Grid { diff --git a/src/sass/mixins/_Icon.scss b/src/sass/mixins/_Icon.scss index 2188c9b7a..bd02dcb5c 100644 --- a/src/sass/mixins/_Icon.scss +++ b/src/sass/mixins/_Icon.scss @@ -5,11 +5,6 @@ // -------------------------------------------------- // Icon mixin definitions -// Variables -// @todo: Why are these necessary? Variables should already be available -@import '../variables/Icon'; -@import '../variables/ZIndex'; - // Base icon definition @mixin ms-Icon { -moz-osx-font-smoothing: grayscale; @@ -21,7 +16,6 @@ speak: none; } - // Modifier: Place the icon in a circle. @mixin ms-Icon--circle { position: relative; diff --git a/src/sass/mixins/_Mixins.scss b/src/sass/mixins/_Mixins.scss index 2d95e42ac..7dd5e843e 100644 --- a/src/sass/mixins/_Mixins.scss +++ b/src/sass/mixins/_Mixins.scss @@ -5,10 +5,6 @@ // -------------------------------------------------- // Vendor-prefixed mixins -// Mixins -// @todo: Can this be removed? -@import './Font'; - // Border radius. @mixin border-radius($ms-radius: 5px) { border-radius: $ms-radius; diff --git a/src/sass/mixins/_Responsive.scss b/src/sass/mixins/_Responsive.scss index 22632dc42..0f8bee89f 100644 --- a/src/sass/mixins/_Responsive.scss +++ b/src/sass/mixins/_Responsive.scss @@ -1,4 +1,4 @@ -// @todo: How does responsive work in RTL? +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. // Small Screens @mixin ms-u-sm12 { diff --git a/src/sass/variables/_Animation.scss b/src/sass/variables/_Animation.scss index eb9e0d0d0..995ffc11c 100644 --- a/src/sass/variables/_Animation.scss +++ b/src/sass/variables/_Animation.scss @@ -1,7 +1,5 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -// @todo: Rename variables to identify their scope. E.g. 'ms-animation-ease1' - // Easings $ms-ease1: cubic-bezier(0.1,0.9,0.2,1) !default; $ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9) !default; diff --git a/src/sass/variables/_Color.scss b/src/sass/variables/_Color.scss index ad654f5ea..40c80b9b2 100644 --- a/src/sass/variables/_Color.scss +++ b/src/sass/variables/_Color.scss @@ -1,7 +1,5 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -// @todo: Rationalize the variable names here? We have ms-color-themeDarker and then ms-font-size-m. Should it be ms-color-theme-darker? - // Theme $ms-color-themeDarker: #004578 !default; $ms-color-themeDark: #005a9e !default; @@ -30,7 +28,6 @@ $ms-color-neutralLighterAlt: #f8f8f8 !default; $ms-color-white: #ffffff !default; // Translucent -// @todo: Where are these used? I don't think we've ever documented them. $ms-color-blackTranslucent40: rgba(0,0,0,.4) !default; $ms-color-whiteTranslucent40: rgba(255,255,255,.4) !default; diff --git a/src/sass/variables/_Font.scss b/src/sass/variables/_Font.scss index 7f570ebad..1610e695e 100644 --- a/src/sass/variables/_Font.scss +++ b/src/sass/variables/_Font.scss @@ -13,8 +13,6 @@ $ms-font-path-hebrew: 'segoeui-hebrew' !default; $ms-font-path-vietnamese: 'segoeui-vietnamese' !default; $ms-font-path-westeuropean: 'segoeui-westeuropean' !default; -// @todo: Confusing variable names in here - // Base font stacks $ms-font-system-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default; $ms-font-family-base: 'Segoe UI WestEuropean', $ms-font-system-base !default; diff --git a/src/sass/variables/_ZIndex.scss b/src/sass/variables/_ZIndex.scss index 4dea5b3fb..7513bd25f 100644 --- a/src/sass/variables/_ZIndex.scss +++ b/src/sass/variables/_ZIndex.scss @@ -14,7 +14,6 @@ $ms-zIndex-middle: 5 !default; $ms-zIndex-front: 10 !default; // Standard component indexes -// @todo: Don't think these should be in Fabric Core. $ms-zIndex-Callout: $ms-zIndex-1 !default; $ms-zIndex-ContextualMenu: $ms-zIndex-1 !default; $ms-zIndex-Overlay: $ms-zIndex-2 !default; From 1a9f8f724b81eb4d8f02ae31c64be5c04ee49233 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 13:44:39 -0800 Subject: [PATCH 33/35] Add missing BrandIcon mixin reference to References, and then use that to bring variables and mixins to Fabric.scss --- src/sass/Fabric.scss | 20 ++------------------ src/sass/_References.scss | 1 + 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/src/sass/Fabric.scss b/src/sass/Fabric.scss index f4e460f67..30c0ea55f 100644 --- a/src/sass/Fabric.scss +++ b/src/sass/Fabric.scss @@ -5,24 +5,8 @@ // -------------------------------------------------- // Fabric Core Module Loader (LTR) -// Variables -@import './variables/Animation'; -@import './variables/BrandIcon'; -@import './variables/Color'; -@import './variables/Font'; -@import './variables/Icon'; -@import './variables/Responsive'; -@import './variables/ZIndex'; - -// Mixins -@import './mixins/Animation'; -@import './mixins/BrandIcon'; -@import './mixins/Color'; -@import './mixins/Directionality'; -@import './mixins/Grid'; -@import './mixins/Icon'; -@import './mixins/Mixins'; -@import './mixins/Utility'; +// Variables and mixins +@import './References'; // Partials that output CSS @import './Animation'; diff --git a/src/sass/_References.scss b/src/sass/_References.scss index 068bb346d..451794449 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -16,6 +16,7 @@ // Mixins @import './mixins/Animation'; +@import './mixins/BrandIcon'; @import './mixins/Color'; @import './mixins/Directionality'; @import './mixins/Font'; From 2a1e3d306dd6417d5b109f2640420c31da9eface Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Sun, 11 Dec 2016 14:11:11 -0800 Subject: [PATCH 34/35] Fix animation delays --- src/sass/mixins/_Animation.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sass/mixins/_Animation.scss b/src/sass/mixins/_Animation.scss index b3627a92a..96e00e282 100644 --- a/src/sass/mixins/_Animation.scss +++ b/src/sass/mixins/_Animation.scss @@ -337,9 +337,9 @@ // Delay @mixin ms-u-delay100 { - animation-delay: $ms-duration1; + animation-delay: 0.1s; } @mixin ms-u-delay200 { - animation-delay: $ms-duration2; + animation-delay: 0.2s; } From 0bacacac6adef50f4e3ab950a93cc8cf3f9fec7d Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Tue, 13 Dec 2016 10:29:28 -0800 Subject: [PATCH 35/35] Rename variable and mixin files and remove unnecessary imports --- src/sass/_Font.scss | 2 -- src/sass/_References.scss | 34 +++++++++---------- src/sass/_Responsive.scss | 2 -- src/sass/_Utility.scss | 2 -- ..._Animation.scss => _Animation.Mixins.scss} | 3 -- ..._BrandIcon.scss => _BrandIcon.Mixins.scss} | 3 -- .../{_Color.scss => _Color.Mixins.scss} | 0 ...ality.scss => _Directionality.Mixins.scss} | 0 .../mixins/{_Font.scss => _Font.Mixins.scss} | 0 .../{_Mixins.scss => _General.Mixins.scss} | 0 .../mixins/{_Grid.scss => _Grid.Mixins.scss} | 0 .../mixins/{_Icon.scss => _Icon.Mixins.scss} | 0 ...esponsive.scss => _Responsive.Mixins.scss} | 0 .../{_Utility.scss => _Utility.Mixins.scss} | 0 ...imation.scss => _Animation.Variables.scss} | 0 ...andIcon.scss => _BrandIcon.Variables.scss} | 0 .../{_Color.scss => _Color.Variables.scss} | 0 .../{_Font.scss => _Font.Variables.scss} | 0 .../{_Icon.scss => _Icon.Variables.scss} | 0 ...onsive.scss => _Responsive.Variables.scss} | 0 .../{_ZIndex.scss => _ZIndex.Variables.scss} | 0 21 files changed, 17 insertions(+), 29 deletions(-) rename src/sass/mixins/{_Animation.scss => _Animation.Mixins.scss} (99%) rename src/sass/mixins/{_BrandIcon.scss => _BrandIcon.Mixins.scss} (95%) rename src/sass/mixins/{_Color.scss => _Color.Mixins.scss} (100%) rename src/sass/mixins/{_Directionality.scss => _Directionality.Mixins.scss} (100%) rename src/sass/mixins/{_Font.scss => _Font.Mixins.scss} (100%) rename src/sass/mixins/{_Mixins.scss => _General.Mixins.scss} (100%) rename src/sass/mixins/{_Grid.scss => _Grid.Mixins.scss} (100%) rename src/sass/mixins/{_Icon.scss => _Icon.Mixins.scss} (100%) rename src/sass/mixins/{_Responsive.scss => _Responsive.Mixins.scss} (100%) rename src/sass/mixins/{_Utility.scss => _Utility.Mixins.scss} (100%) rename src/sass/variables/{_Animation.scss => _Animation.Variables.scss} (100%) rename src/sass/variables/{_BrandIcon.scss => _BrandIcon.Variables.scss} (100%) rename src/sass/variables/{_Color.scss => _Color.Variables.scss} (100%) rename src/sass/variables/{_Font.scss => _Font.Variables.scss} (100%) rename src/sass/variables/{_Icon.scss => _Icon.Variables.scss} (100%) rename src/sass/variables/{_Responsive.scss => _Responsive.Variables.scss} (100%) rename src/sass/variables/{_ZIndex.scss => _ZIndex.Variables.scss} (100%) diff --git a/src/sass/_Font.scss b/src/sass/_Font.scss index 651037e2e..b5d144f0c 100644 --- a/src/sass/_Font.scss +++ b/src/sass/_Font.scss @@ -3,8 +3,6 @@ // // Office UI Fabric // -------------------------------------------------- -// Typographic mixins arranged with appropriate size and family combinations. -@import './mixins/Font'; // Super Styles (LIMITED USE) // Weights: Light diff --git a/src/sass/_References.scss b/src/sass/_References.scss index 451794449..01d735f62 100644 --- a/src/sass/_References.scss +++ b/src/sass/_References.scss @@ -6,22 +6,22 @@ // Variables and mixins that can be referenced without outputting any CSS. // Variables -@import './variables/Animation'; -@import './variables/BrandIcon'; -@import './variables/Color'; -@import './variables/Font'; -@import './variables/Icon'; -@import './variables/Responsive'; -@import './variables/ZIndex'; +@import './variables/Animation.Variables'; +@import './variables/BrandIcon.Variables'; +@import './variables/Color.Variables'; +@import './variables/Font.Variables'; +@import './variables/Icon.Variables'; +@import './variables/Responsive.Variables'; +@import './variables/ZIndex.Variables'; // Mixins -@import './mixins/Animation'; -@import './mixins/BrandIcon'; -@import './mixins/Color'; -@import './mixins/Directionality'; -@import './mixins/Font'; -@import './mixins/Grid'; -@import './mixins/Icon'; -@import './mixins/Mixins'; -@import './mixins/Responsive'; -@import './mixins/Utility'; +@import './mixins/Animation.Mixins'; +@import './mixins/BrandIcon.Mixins'; +@import './mixins/Color.Mixins'; +@import './mixins/Directionality.Mixins'; +@import './mixins/Font.Mixins'; +@import './mixins/Grid.Mixins'; +@import './mixins/Icon.Mixins'; +@import './mixins/General.Mixins'; +@import './mixins/Responsive.Mixins'; +@import './mixins/Utility.Mixins'; diff --git a/src/sass/_Responsive.scss b/src/sass/_Responsive.scss index e20a5805a..f9d192dde 100644 --- a/src/sass/_Responsive.scss +++ b/src/sass/_Responsive.scss @@ -5,8 +5,6 @@ // -------------------------------------------------- // Responsive utilities based on defined variables, component visibility, // and size for different displays. -@import './variables/Responsive'; -@import './mixins/Responsive'; //== Responsive visiblity classes // diff --git a/src/sass/_Utility.scss b/src/sass/_Utility.scss index 0c5793fb0..f56131bf3 100644 --- a/src/sass/_Utility.scss +++ b/src/sass/_Utility.scss @@ -5,8 +5,6 @@ // -------------------------------------------------- // Utility classes and mixins used throughout Fabric. -@import './mixins/Utility'; - // The best box is a border box. .ms-u-borderBox, .ms-u-borderBox::before, .ms-u-borderBox::after { @include ms-u-borderBox; diff --git a/src/sass/mixins/_Animation.scss b/src/sass/mixins/_Animation.Mixins.scss similarity index 99% rename from src/sass/mixins/_Animation.scss rename to src/sass/mixins/_Animation.Mixins.scss index 96e00e282..2c5e911bc 100644 --- a/src/sass/mixins/_Animation.scss +++ b/src/sass/mixins/_Animation.Mixins.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- // Fabric Animations -// Import variables and mixins -@import '../variables/Animation'; - // Outputs the @keyframes used by the animation classes @mixin ms-animation-keyframes { @keyframes slideRightIn10 { diff --git a/src/sass/mixins/_BrandIcon.scss b/src/sass/mixins/_BrandIcon.Mixins.scss similarity index 95% rename from src/sass/mixins/_BrandIcon.scss rename to src/sass/mixins/_BrandIcon.Mixins.scss index cc6501531..df1624b55 100644 --- a/src/sass/mixins/_BrandIcon.scss +++ b/src/sass/mixins/_BrandIcon.Mixins.scss @@ -1,8 +1,5 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -// Variables -@import '../variables/BrandIcon'; - // Generate classes for product and document icons @mixin brandIconClasses($retina) { @each $icon in $ms-productIcons { diff --git a/src/sass/mixins/_Color.scss b/src/sass/mixins/_Color.Mixins.scss similarity index 100% rename from src/sass/mixins/_Color.scss rename to src/sass/mixins/_Color.Mixins.scss diff --git a/src/sass/mixins/_Directionality.scss b/src/sass/mixins/_Directionality.Mixins.scss similarity index 100% rename from src/sass/mixins/_Directionality.scss rename to src/sass/mixins/_Directionality.Mixins.scss diff --git a/src/sass/mixins/_Font.scss b/src/sass/mixins/_Font.Mixins.scss similarity index 100% rename from src/sass/mixins/_Font.scss rename to src/sass/mixins/_Font.Mixins.scss diff --git a/src/sass/mixins/_Mixins.scss b/src/sass/mixins/_General.Mixins.scss similarity index 100% rename from src/sass/mixins/_Mixins.scss rename to src/sass/mixins/_General.Mixins.scss diff --git a/src/sass/mixins/_Grid.scss b/src/sass/mixins/_Grid.Mixins.scss similarity index 100% rename from src/sass/mixins/_Grid.scss rename to src/sass/mixins/_Grid.Mixins.scss diff --git a/src/sass/mixins/_Icon.scss b/src/sass/mixins/_Icon.Mixins.scss similarity index 100% rename from src/sass/mixins/_Icon.scss rename to src/sass/mixins/_Icon.Mixins.scss diff --git a/src/sass/mixins/_Responsive.scss b/src/sass/mixins/_Responsive.Mixins.scss similarity index 100% rename from src/sass/mixins/_Responsive.scss rename to src/sass/mixins/_Responsive.Mixins.scss diff --git a/src/sass/mixins/_Utility.scss b/src/sass/mixins/_Utility.Mixins.scss similarity index 100% rename from src/sass/mixins/_Utility.scss rename to src/sass/mixins/_Utility.Mixins.scss diff --git a/src/sass/variables/_Animation.scss b/src/sass/variables/_Animation.Variables.scss similarity index 100% rename from src/sass/variables/_Animation.scss rename to src/sass/variables/_Animation.Variables.scss diff --git a/src/sass/variables/_BrandIcon.scss b/src/sass/variables/_BrandIcon.Variables.scss similarity index 100% rename from src/sass/variables/_BrandIcon.scss rename to src/sass/variables/_BrandIcon.Variables.scss diff --git a/src/sass/variables/_Color.scss b/src/sass/variables/_Color.Variables.scss similarity index 100% rename from src/sass/variables/_Color.scss rename to src/sass/variables/_Color.Variables.scss diff --git a/src/sass/variables/_Font.scss b/src/sass/variables/_Font.Variables.scss similarity index 100% rename from src/sass/variables/_Font.scss rename to src/sass/variables/_Font.Variables.scss diff --git a/src/sass/variables/_Icon.scss b/src/sass/variables/_Icon.Variables.scss similarity index 100% rename from src/sass/variables/_Icon.scss rename to src/sass/variables/_Icon.Variables.scss diff --git a/src/sass/variables/_Responsive.scss b/src/sass/variables/_Responsive.Variables.scss similarity index 100% rename from src/sass/variables/_Responsive.scss rename to src/sass/variables/_Responsive.Variables.scss diff --git a/src/sass/variables/_ZIndex.scss b/src/sass/variables/_ZIndex.Variables.scss similarity index 100% rename from src/sass/variables/_ZIndex.scss rename to src/sass/variables/_ZIndex.Variables.scss