Skip to content
This repository has been archived by the owner on Jun 18, 2024. It is now read-only.

BrandIcon: Update to latest document icons #1090

Merged
merged 5 commits into from
Jan 9, 2018
Merged

BrandIcon: Update to latest document icons #1090

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
993516e
Use strings instead of numbers for $retina argument to allow for easi…
Jan 9, 2018
0cc15e2
Update location and names for new document icons
Jan 9, 2018
430ba8d
Update mixins to generate classes for both product and document icons…
Jan 9, 2018
1b90534
Add classes to support deprecated document icons and map those to oth…
Jan 9, 2018
3bc6184
Merge branch 'master' into miwhea/updated-document-icons
Jan 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 94 additions & 5 deletions src/sass/_BrandIcon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,108 @@
// 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);
}
@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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: the protocol/domain part of the URL could be pulled into something like a baseUrl variable to minimize repetition.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll leave it as is, since there shouldn't be any changes needed here before we remove it entirely.

}
.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);
}
}
26 changes: 22 additions & 4 deletions src/sass/mixins/_BrandIcon.Mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,44 @@
@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);
}
}
}

// 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 {
Expand Down
4 changes: 2 additions & 2 deletions src/sass/variables/_BrandIcon.Variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;