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

Commit

Permalink
Merge pull request #1090 from OfficeDev/miwhea/updated-document-icons
Browse files Browse the repository at this point in the history 
BrandIcon: Update to latest document icons
  • Loading branch information
Mike Wheaton committed Jan 9, 2018
2 parents 2fe5760 + 3bc6184 commit 5d4786b
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 11 deletions.
99 changes: 94 additions & 5 deletions src/sass/_BrandIcon.scss
View file
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);
}
.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
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
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;

0 comments on commit 5d4786b

Please sign in to comment.