From 993516e33b45ae6df427750ebf9a78624f0a82c3 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Tue, 9 Jan 2018 09:39:37 -0800 Subject: [PATCH 1/4] Use strings instead of numbers for $retina argument to allow for easier comparison --- src/sass/_BrandIcon.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/sass/_BrandIcon.scss b/src/sass/_BrandIcon.scss index c151ad217..9a5743546 100644 --- a/src/sass/_BrandIcon.scss +++ b/src/sass/_BrandIcon.scss @@ -1,19 +1,19 @@ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -@include ms-brand-icon-classes(1); +@include ms-brand-icon-classes('1'); @include ms-brand-icon-size-classes(); // Pixel Ratio 1.5 @media only screen and (min-resolution: 144dpi) { - @include ms-brand-icon-classes(1_5); + @include ms-brand-icon-classes('1_5'); } // Pixel Ratio 2 @media only screen and (min-resolution: 192dpi) { - @include ms-brand-icon-classes(2); + @include ms-brand-icon-classes('2'); } // Pixel Ratio 3 @media only screen and (min-resolution: 288dpi) { - @include ms-brand-icon-classes(3); -} \ No newline at end of file + @include ms-brand-icon-classes('3'); +} From 0cc15e2cf47323d87fd47c1be6045fbcfbf921b6 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Tue, 9 Jan 2018 09:40:57 -0800 Subject: [PATCH 2/4] Update location and names for new document icons --- src/sass/variables/_BrandIcon.Variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sass/variables/_BrandIcon.Variables.scss b/src/sass/variables/_BrandIcon.Variables.scss index 053d8a79a..6cea06a8d 100644 --- a/src/sass/variables/_BrandIcon.Variables.scss +++ b/src/sass/variables/_BrandIcon.Variables.scss @@ -2,11 +2,11 @@ // Image paths $ms-brand-icon-product-images-path: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png'; -$ms-brand-icon-document-images-path: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/document/png'; +$ms-brand-icon-document-images-path: 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types'; // Names $ms-brand-icon-product-icons: access excel infopath office onedrive onenote outlook powerpoint project sharepoint visio word; -$ms-brand-icon-document-icons: accdb csv docx dotx mpp mpt odp ods odt one onepkg onetoc potx ppsx pptx pub vsdx vssx vstx xls xlsx xltx xsn; +$ms-brand-icon-document-icons: accdb archive audio code csv docset docx dotx email exe folder font genericfile html link listitem model mpp mpt odp ods odt one onetoc pdf photo potx ppsx pptx pub rtf sharedfolder spo sysfile txt vector video vsdx vssx vstx xlsx xltx xml xsn zip; // Sizes $ms-brand-icon-sizes: 16 48 96; From 430ba8d63fcd4cba7e00c82ff4470350cf5fe18e Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Tue, 9 Jan 2018 09:41:28 -0800 Subject: [PATCH 3/4] Update mixins to generate classes for both product and document icons, which now have different formats --- src/sass/mixins/_BrandIcon.Mixins.scss | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/sass/mixins/_BrandIcon.Mixins.scss b/src/sass/mixins/_BrandIcon.Mixins.scss index a28051a7a..2c1795f4a 100644 --- a/src/sass/mixins/_BrandIcon.Mixins.scss +++ b/src/sass/mixins/_BrandIcon.Mixins.scss @@ -4,19 +4,19 @@ @mixin ms-brand-icon-classes($retina) { @each $icon in $ms-brand-icon-product-icons { .ms-BrandIcon--#{$icon} { - @include ms-brand-icon-sizes($icon, $retina, $ms-brand-icon-product-images-path); + @include ms-brand-icon-product-sizes($icon, $retina, $ms-brand-icon-product-images-path); } } @each $icon in $ms-brand-icon-document-icons { .ms-BrandIcon--#{$icon} { - @include ms-brand-icon-sizes($icon, $retina, $ms-brand-icon-document-images-path); + @include ms-brand-icon-document-sizes($icon, $retina, $ms-brand-icon-document-images-path); } } } -// Generate size classes for each icon -@mixin ms-brand-icon-sizes($icon, $retina, $images-path) { +// Generate size classes for each product icon +@mixin ms-brand-icon-product-sizes($icon, $retina, $images-path) { @each $size in $ms-brand-icon-sizes { &.ms-BrandIcon--icon#{$size} { background-image: url(#{$images-path}/#{$icon}_#{$size}x#{$retina}.png); @@ -24,6 +24,24 @@ } } +// Generate size classes for each document icon +@mixin ms-brand-icon-document-sizes($icon, $retina, $images-path) { + $scaleSuffix: ''; + @if $retina == '1' { + $scaleSuffix: ''; + } @else if $retina == '1_5' { + $scaleSuffix: '_1.5x'; + } @else { + $scaleSuffix: '_#{$retina}x'; + } + + @each $size in $ms-brand-icon-sizes { + &.ms-BrandIcon--icon#{$size} { + background-image: url(#{$images-path}/#{$size}#{$scaleSuffix}/#{$icon}.png); + } + } +} + // Generate generic icon size classes @mixin ms-brand-icon-size-classes() { @each $size in $ms-brand-icon-sizes { From 1b9053402a07e08b3a7fefe625ef5ccde6966b01 Mon Sep 17 00:00:00 2001 From: Mike Wheaton Date: Tue, 9 Jan 2018 09:41:52 -0800 Subject: [PATCH 4/4] Add classes to support deprecated document icons and map those to other icons --- src/sass/_BrandIcon.scss | 89 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/src/sass/_BrandIcon.scss b/src/sass/_BrandIcon.scss index 9a5743546..698e65bfe 100644 --- a/src/sass/_BrandIcon.scss +++ b/src/sass/_BrandIcon.scss @@ -17,3 +17,92 @@ @media only screen and (min-resolution: 288dpi) { @include ms-brand-icon-classes('3'); } + +// The 'onepkg' and 'xls' icons have been deprecated. These classes will be removed in +// a future release. Until then, they are mapped to 'one' and 'xlsx'. + +.ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16/one.png); +} +.ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48/one.png); +} +.ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/one.png); +} + +.ms-BrandIcon--xls.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16/xlsx.png); +} +.ms-BrandIcon--xls.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48/xlsx.png); +} +.ms-BrandIcon--xls.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/xlsx.png); +} + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { + .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_1.5x/one.png); + } + .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_1.5x/one.png); + } + .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_1.5x/one.png); + } + + .ms-BrandIcon--xls.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_1.5x/xlsx.png); + } + .ms-BrandIcon--xls.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_1.5x/xlsx.png); + } + .ms-BrandIcon--xls.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_1.5x/xlsx.png); + } +} + +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { + .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_2x/one.png); + } + .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_2x/one.png); + } + .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_2x/one.png); + } + + .ms-BrandIcon--xls.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_2x/xlsx.png); + } + .ms-BrandIcon--xls.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_2x/xlsx.png); + } + .ms-BrandIcon--xls.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_2x/xlsx.png); + } +} + +@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi) { + .ms-BrandIcon--onepkg.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_3x/one.png); + } + .ms-BrandIcon--onepkg.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_3x/one.png); + } + .ms-BrandIcon--onepkg.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_3x/one.png); + } + + .ms-BrandIcon--xls.ms-BrandIcon--icon16 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/16_3x/xlsx.png); + } + .ms-BrandIcon--xls.ms-BrandIcon--icon48 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/48_3x/xlsx.png); + } + .ms-BrandIcon--xls.ms-BrandIcon--icon96 { + background-image: url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96_3x/xlsx.png); + } +}