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

Consistent scope and naming for variables, mixins, and keyframes #887

Merged
merged 22 commits into from
Jan 6, 2017
Merged

Consistent scope and naming for variables, mixins, and keyframes #887

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
3b244b0
Rename icon web font and move name to variable
Dec 31, 2016
ea4ddfa
Scope all animation keyframes
Dec 31, 2016
86232df
Scope all mixins
Dec 31, 2016
628bc15
Revert "Rename icon web font and move name to variable"
Dec 31, 2016
f87aec6
Remove the utility prefix from all directionality mixins
Jan 3, 2017
9c88b9e
Renamed all directionality mixins to camelcase without extra dashes
Jan 3, 2017
7d5f535
Rename mixins to match naming convention (camelcase, all together)
Jan 3, 2017
a4b9886
Change BrandIcon modifiers to lowercase
Jan 3, 2017
6f84071
Add “brandIcon” scope to all brand icon variables
Jan 3, 2017
151f3ef
Rename font system and family base variables
Jan 3, 2017
fd7a388
Prefix all animation variables
Jan 3, 2017
f4a485d
Rename all responsive screen variables to change order of size and mi…
Jan 3, 2017
0062d98
Rename font system and font family base variables
Jan 3, 2017
15b7f8f
Rename brand icon mixins to match other mixins
Jan 3, 2017
c102640
Update documentation with new mixin and variable names
Jan 3, 2017
31b7a2f
Merge branch 'master' into miwhea/consistent-names
Jan 4, 2017
7d43f02
Merge branch 'master' into miwhea/consistent-names
Jan 4, 2017
4b23344
Another pass at standardizing mixins and variables as kebab-case (unl…
Jan 4, 2017
12967c9
Add documentation page for code conventions, starting with naming con…
Jan 5, 2017
2c4deee
Small update to naming conventions document
Jan 6, 2017
3ef8acc
Fix typo in naming conventions document
Jan 6, 2017
bd4b408
Fix conventions documentation
Jan 6, 2017
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
10 changes: 5 additions & 5 deletions src/documentation/sass/_AnimationsSection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $animationExample-height: 90px;
display: none;
}

@media(min-width: $ms-screen-md-min) {
@media(min-width: $ms-screen-min-md) {
display: block;
.docs-animationExampleColumn {
display: block;
Expand Down Expand Up @@ -36,7 +36,7 @@ $animationExample-height: 90px;
margin-bottom: 14px;
}

@media(min-width: $ms-screen-lg-min) {
@media(min-width: $ms-screen-min-lg) {
.docs-animationDescriptionColumn {
margin-bottom: 0;
}
Expand All @@ -48,7 +48,7 @@ $animationExample-height: 90px;
}
}

@media(min-width: $ms-screen-xl-min) {
@media(min-width: $ms-screen-min-xl) {

.docs-animationCubicColumn {
display: block;
Expand All @@ -74,15 +74,15 @@ $animationExample-height: 90px;
font-weight: $ms-font-weight-semibold;
}

@media(min-width: $ms-screen-md-min) {
@media(min-width: $ms-screen-min-md) {
line-height: 18px;
vertical-align: middle;
.mobileText {
display: none;
}
}

@media(min-width: $ms-screen-xl-min) {
@media(min-width: $ms-screen-min-xl) {
min-height: $animationExample-height;
line-height: $animationExample-height;
}
Expand Down
6 changes: 3 additions & 3 deletions src/documentation/sass/_ColorBoxes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $ms-InfoBarHeight: 30px;
line-height: 14px;
}

@media (min-width: $ms-screen-lg-min) {
@media (min-width: $ms-screen-min-lg) {

span.ms-font-size-m {
font-size: $ms-font-size-m;
Expand All @@ -43,7 +43,7 @@ $ms-InfoBarHeight: 30px;
.docs-colorBox.ms-u-lg4 {
line-height: 7px;

@media (min-width: $ms-screen-lg-min) {
@media (min-width: $ms-screen-min-lg) {
width: 32.333333%;
margin-right: 1%;
}
Expand All @@ -57,7 +57,7 @@ $ms-InfoBarHeight: 30px;
padding-top:12px;
}

@media (min-width: $ms-screen-lg-min) {
@media (min-width: $ms-screen-min-lg) {
.docs-colorBox {
width: 32.333333%;
font-size: $ms-font-size-m;
Expand Down
4 changes: 2 additions & 2 deletions src/documentation/sass/_IconsSection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@
list-style: none !important;

// Phone, Phablet
@media (min-width: $ms-screen-lg-min) {
@media (min-width: $ms-screen-min-lg) {
width: 24%;
}

@media (min-width: $ms-screen-xl-min) {
@media (min-width: $ms-screen-min-xl) {
margin-right: 1%;
margin-bottom: 1%;
min-height: 124px;
Expand Down
2 changes: 1 addition & 1 deletion src/documentation/sass/_TypographySection.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}
}

@media(min-width: $ms-screen-lg-min) {
@media(min-width: $ms-screen-min-lg) {
.docs-HelperHeader {
display: block;
}
Expand Down
12 changes: 6 additions & 6 deletions src/documentation/sass/base/_Typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,42 @@ h4 {

h1 {
color: $ms-color-neutralSecondary;
font-family: $ms-font-system-base;
font-family: $ms-font-base-system;
font-size: $ms-font-size-su;
font-weight: $ms-font-weight-light;
}

h2 {
font-family: $ms-font-system-base;
font-family: $ms-font-base-system;
font-weight: $ms-font-weight-semilight;
font-size: $ms-font-size-xxl;
color: $ms-color-neutralPrimary;
}

h3 {
font-family: $ms-font-system-base;
font-family: $ms-font-base-system;
font-weight: $ms-font-weight-regular;
font-size: $ms-font-size-xl;
color: $ms-color-neutralDark !important; // @todo: Remove this important when dev.office.com styles no longer leak
}

h4 {
font-family: $ms-font-system-base;
font-family: $ms-font-base-system;
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-l;
color: $ms-color-neutralPrimary;
}

p {
font-family: $ms-font-system-base;
font-family: $ms-font-base-system;
font-weight: $ms-font-weight-regular;
font-size: $ms-font-size-l;
color: $ms-color-neutralPrimary;
margin-bottom: 20px;
line-height: 1.5;

strong {
font-family: $ms-font-system-base;
font-family: $ms-font-base-system;
font-weight: normal;
font-weight: $ms-font-weight-semibold;
}
Expand Down
8 changes: 4 additions & 4 deletions src/documentation/sass/docs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ $high-contrast-green: #3ff23f;

// slideRightIn80
@mixin ms-u-slideRightIn80 {
@include ms-animation((fadeIn, slideRightIn80), $ms-duration3, $ms-ease1);
@include ms-animation((fadeIn, slideRightIn80), $ms-animation-duration-3, $ms-animation-ease-1);
}
.ms-u-slideRightIn80 {
@include ms-u-slideRightIn80;
Expand All @@ -85,7 +85,7 @@ $high-contrast-green: #3ff23f;

// slideLeftIn80
@mixin ms-u-slideLeftIn80 {
@include ms-animation((fadeIn, slideLeftIn80), $ms-duration3, $ms-ease1);
@include ms-animation((fadeIn, slideLeftIn80), $ms-animation-duration-3, $ms-animation-ease-1);
}
.ms-u-slideLeftIn80 {
@include ms-u-slideLeftIn80;
Expand All @@ -102,7 +102,7 @@ $high-contrast-green: #3ff23f;

// slideLeftIn80
@mixin ms-u-slideLeftOut80 {
@include ms-animation((fadeOut, slideLeftOut80), $ms-duration3, $ms-ease1);
@include ms-animation((fadeOut, slideLeftOut80), $ms-animation-duration-3, $ms-animation-ease-1);
}
.ms-u-slideLeftOut80 {
@include ms-u-slideLeftOut80;
Expand All @@ -119,7 +119,7 @@ $high-contrast-green: #3ff23f;

// slideLeftIn80
@mixin ms-u-slideRightOut80 {
@include ms-animation((fadeOut, slideRightOut80), $ms-duration3, $ms-ease1);
@include ms-animation((fadeOut, slideRightOut80), $ms-animation-duration-3, $ms-animation-ease-1);
}
.ms-u-slideRightOut80 {
@include ms-u-slideRightOut80;
Expand Down
2 changes: 1 addition & 1 deletion src/documentation/sass/layouts/_Page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ $docs-sideNavWidths: 300px;
}

// On larger screens, show and position the navs
@media (min-width: $ms-screen-xl-min) {
@media (min-width: $ms-screen-min-xl) {
.docs-Page.has-leftNav {
padding-left: $docs-sideNavWidths + 30px;

Expand Down
2 changes: 1 addition & 1 deletion src/sass/_Animation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// Fabric Animations

// Output all @keyframes needed for the animations
@include ms-animation-keyframes;
@include ms-animationKeyframes;

// Slide
.ms-u-slideRightIn10 {
Expand Down
10 changes: 5 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,19 @@
// 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();
@include ms-brandIconClasses(1);
@include ms-brandIconSizeClasses();

// Pixel Ratio 1.5
@media only screen and (min-resolution: 144dpi) {
@include brandIconClasses(1_5);
@include ms-brandIconClasses(1_5);
}

// Pixel Ratio 2
@media only screen and (min-resolution: 192dpi) {
@include brandIconClasses(2);
@include ms-brandIconClasses(2);
}

// Pixel Ratio 3
@media only screen and (min-resolution: 288dpi) {
@include brandIconClasses(3);
@include ms-brandIconClasses(3);
}
108 changes: 54 additions & 54 deletions src/sass/_Font.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,83 +418,83 @@
}

// Output the standard fonts
@include SegoeUIWestEuropeanLight;
@include SegoeUIWestEuropeanRegular;
@include SegoeUIWestEuropeanSemibold;
@include SegoeUIWestEuropeanSemilight;
@include ms-fontFamily-segoeUIWestEuropeanLight;
@include ms-fontFamily-segoeUIWestEuropeanRegular;
@include ms-fontFamily-segoeUIWestEuropeanSemibold;
@include ms-fontFamily-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;
@include ms-fontFamily-segoeUIArabicLight;
@include ms-fontFamily-segoeUIArabicRegular;
@include ms-fontFamily-segoeUIArabicSemibold;
@include ms-fontFamily-segoeUIArabicSemilight;

@include ms-fontFamily-segoeUICyrillicLight;
@include ms-fontFamily-segoeUICyrillicRegular;
@include ms-fontFamily-segoeUICyrillicSemibold;
@include ms-fontFamily-segoeUICyrillicSemilight;

@include ms-fontFamily-segoeUIEastEuropeanLight;
@include ms-fontFamily-segoeUIEastEuropeanRegular;
@include ms-fontFamily-segoeUIEastEuropeanSemibold;
@include ms-fontFamily-segoeUIEastEuropeanSemilight;

@include ms-fontFamily-segoeUIGreekLight;
@include ms-fontFamily-segoeUIGreekRegular;
@include ms-fontFamily-segoeUIGreekSemibold;
@include ms-fontFamily-segoeUIGreekSemilight;

@include ms-fontFamily-segoeUIHebrewLight;
@include ms-fontFamily-segoeUIHebrewRegular;
@include ms-fontFamily-segoeUIHebrewSemibold;
@include ms-fontFamily-segoeUIHebrewSemilight;

@include ms-fontFamily-segoeUIVietnameseLight;
@include ms-fontFamily-segoeUIVietnameseRegular;
@include ms-fontFamily-segoeUIVietnameseSemibold;
@include ms-fontFamily-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);
@include ms-fontFamilyOverride(jpn, $ms-font-stack-japanese);
@include ms-fontFamilyOverride(kor, $ms-font-stack-korean);
@include ms-fontFamilyOverride(cmn, $ms-font-stack-chinese-simplified);
@include ms-fontFamilyOverride(yue, $ms-font-stack-chinese-traditional);
@include ms-fontFamilyOverride(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);
@include ms-fontFamilyOverride(tha, $ms-font-stack-leelawadee);

// Arabic
// ara
@include language-override-system-fonts(ara, $ms-font-stack-arabic);
@include ms-fontFamilyOverride(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);
@include ms-fontFamilyOverride(ces, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(est, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(hrv, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(hun, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(kaz, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(lav, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(lit, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(pol, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(slk, $ms-font-stack-eastEuropean);
@include ms-fontFamilyOverride(tur, $ms-font-stack-eastEuropean);

// Cyrillic
// rus
@include language-override-system-fonts(rus, $ms-font-stack-cyrillic);
@include ms-fontFamilyOverride(rus, $ms-font-stack-cyrillic);

// Greek
// ell
@include language-override-system-fonts(ell, $ms-font-stack-greek);
@include ms-fontFamilyOverride(ell, $ms-font-stack-greek);

// Hebrew
// heb
@include language-override-system-fonts(heb, $ms-font-stack-hebrew);
@include ms-fontFamilyOverride(heb, $ms-font-stack-hebrew);

// Vietnamese
// vie
@include language-override-system-fonts(vie, $ms-font-stack-vietnamese);
@include ms-fontFamilyOverride(vie, $ms-font-stack-vietnamese);
Loading