From f7eb3aec028e11c71745cd3e58ff206d4ce602ce Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 6 Sep 2016 12:01:33 -0700 Subject: [PATCH 1/4] Un-nesting CSS --- src/components/Breadcrumb/Breadcrumb.scss | 180 +++++++++++----------- src/components/Check/Check.scss | 47 +++--- 2 files changed, 111 insertions(+), 116 deletions(-) diff --git a/src/components/Breadcrumb/Breadcrumb.scss b/src/components/Breadcrumb/Breadcrumb.scss index 52da224092422c..980d626639da91 100644 --- a/src/components/Breadcrumb/Breadcrumb.scss +++ b/src/components/Breadcrumb/Breadcrumb.scss @@ -16,119 +16,115 @@ $Breadcrumb-itemMaxWidth-sm: 116px; .ms-Breadcrumb { @include ms-baseFont; margin: 23px 0 1px; +} - .ms-Breadcrumb-list { - white-space: nowrap; - padding: 0; - margin: 0; - } - - .ms-Breadcrumb-chevron { - font-size: $ms-font-size-s; - color: $ms-color-neutralSecondary; - vertical-align: top; - margin: 11px 7px; - } +.ms-Breadcrumb-list { + white-space: nowrap; + padding: 0; + margin: 0; +} - .ms-Breadcrumb-listItem { - list-style-type: none; - vertical-align: top; - margin: 0; - padding: 0; - display: inline-block; - position: relative; +.ms-Breadcrumb-chevron { + font-size: $ms-font-size-s; + color: $ms-color-neutralSecondary; + vertical-align: top; + margin: 11px 7px; +} - &:last-of-type { - .ms-Breadcrumb-chevron { - display: none; - } - } +.ms-Breadcrumb-listItem { + list-style-type: none; + vertical-align: top; + margin: 0; + padding: 0; + display: inline-block; + position: relative; - .ms-Breadcrumb-itemLink { - @include focus-border; - @include ms-font-xl; - color: $ms-color-neutralPrimary; - display: inline-block; - padding: 0 4px; - max-width: $Breadcrumb-itemMaxWidth; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - vertical-align: top; + &:last-of-type { + .ms-Breadcrumb-chevron { + display: none; } } - .ms-Breadcrumb-overflow { + .ms-Breadcrumb-itemLink { + @include focus-border; + @include ms-font-xl; + color: $ms-color-neutralPrimary; display: inline-block; - position: relative; - - .ms-Breadcrumb-overflowButton { - font-size: $Breadcrumb-overflowButtonSize; - display: inline-block; - color: $Breadcrumb-overflowButtonColor; - padding: 8px; - cursor: pointer; - vertical-align: top; - } + padding: 0 4px; + max-width: $Breadcrumb-itemMaxWidth; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + vertical-align: top; } +} - .ms-Breadcrumb-itemLink, - .ms-Breadcrumb-overflowButton { - text-decoration: none; - outline: transparent; +.ms-Breadcrumb-overflow { + display: inline-block; + position: relative; +} - &:hover { - background-color: $selectedHoverBackgroundColor; - color: $Breadcrumb-buttonHoverColor; - cursor: pointer; - } +.ms-Breadcrumb-overflowButton { + font-size: $Breadcrumb-overflowButtonSize; + display: inline-block; + color: $Breadcrumb-overflowButtonColor; + padding: 8px; + cursor: pointer; + vertical-align: top; +} - &:focus { - outline: $ms-color-neutralSecondaryAlt solid 1px; - color: $ms-color-neutralDark; - } +.ms-Breadcrumb-itemLink, +.ms-Breadcrumb-overflowButton { + text-decoration: none; + outline: transparent; - &:active { - outline: transparent; - background-color: $selectedActiveBackgroundColor; - color: $selectedActiveForegroundColor; - } + &:hover { + background-color: $selectedHoverBackgroundColor; + color: $Breadcrumb-buttonHoverColor; + cursor: pointer; } - @media screen and (max-width: $ms-screen-md-max) { - margin: 11px 0 1px; + &:focus { + outline: $ms-color-neutralSecondaryAlt solid 1px; + color: $ms-color-neutralDark; + } - .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { - font-size: $ms-font-size-l; - } + &:active { + outline: transparent; + background-color: $selectedActiveBackgroundColor; + color: $selectedActiveForegroundColor; + } +} - .ms-Breadcrumb-chevron { - font-size: $ms-font-size-mi; - margin: 8px 5px; - } +@media screen and (max-width: $ms-screen-md-max) { + margin: 11px 0 1px; - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - font-size: $ms-font-size-m-plus; - padding: 5px 4px; - } - } + .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-l; } - @media screen and (max-width: $ms-screen-sm-max) { - .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { - font-size: $ms-font-size-m; - max-width: $Breadcrumb-itemMaxWidth-sm; - } + .ms-Breadcrumb-chevron { + font-size: $ms-font-size-mi; + margin: 8px 5px; + } - .ms-Breadcrumb-chevron { - margin: 5px 4px; - } + .ms-Breadcrumb-overflowButton { + font-size: $ms-font-size-m-plus; + padding: 5px 4px; + } +} - .ms-Breadcrumb-overflow { - .ms-Breadcrumb-overflowButton { - padding: 2px 4px; - } - } +@media screen and (max-width: $ms-screen-sm-max) { + .ms-Breadcrumb-listItem .ms-Breadcrumb-itemLink { + font-size: $ms-font-size-m; + max-width: $Breadcrumb-itemMaxWidth-sm; + } + + .ms-Breadcrumb-chevron { + margin: 5px 4px; + } + + .ms-Breadcrumb-overflowButton { + padding: 2px 4px; } } diff --git a/src/components/Check/Check.scss b/src/components/Check/Check.scss index bf4c39cd179ff9..b84c48583025e3 100644 --- a/src/components/Check/Check.scss +++ b/src/components/Check/Check.scss @@ -17,25 +17,6 @@ $checkBoxHeight: 20px; height: $checkBoxHeight; text-align: center; - .ms-Check-background { - &:before { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: inline-block; - margin: auto; - height: $checkBoxHeight - 2px; - width: $checkBoxHeight - 2px; - background: $ms-color-white; - border: 1px solid $ms-color-neutralTertiaryAlt; - border-radius: 50%; - content: ' '; - } - - } - &.is-checked { .ms-Check-background { &:before { @@ -55,13 +36,31 @@ $checkBoxHeight: 20px; opacity: 1; } } +} - .ms-Check-check { +.ms-Check-check { + left: 0; + right: 0; + position: absolute; + line-height: $checkBoxHeight; + color: $ms-color-neutralTertiaryAlt; + opacity: 0; +} + +.ms-Check-background { + &:before { + position: absolute; + top: 0; + bottom: 0; left: 0; right: 0; - position: absolute; - line-height: $checkBoxHeight; - color: $ms-color-neutralTertiaryAlt; - opacity: 0; + display: inline-block; + margin: auto; + height: $checkBoxHeight - 2px; + width: $checkBoxHeight - 2px; + background: $ms-color-white; + border: 1px solid $ms-color-neutralTertiaryAlt; + border-radius: 50%; + content: ' '; } } \ No newline at end of file From aa47fb865e1db9e9f0d7f93775dc3ed5b87f0b90 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 6 Sep 2016 13:44:59 -0700 Subject: [PATCH 2/4] Dropdown more consistent --- src/components/Dropdown/Dropdown.scss | 18 +++++++++++------- src/components/Dropdown/Dropdown.tsx | 2 +- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index d4b32dda095551..6287487b922a25 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -9,6 +9,8 @@ $Dropdown-selectedItem-bg: $ms-color-neutralQuaternaryAlt; $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; +$DropDown-height: 32px; +$DropDown-item-height: 36px; // Mixin for high contrast mode link states @mixin highContrastListItemState { @@ -150,10 +152,10 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; color: $ms-color-neutralDark; font-size: $ms-icon-size-s; position: absolute; - right: 13px; - bottom: 9px; - z-index: 1; + top: 0px; + @include right(12px); pointer-events: none; + line-height: $DropDown-height; } // Style the new, replacement component @@ -163,8 +165,9 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; border: 1px solid $ms-color-neutralTertiaryAlt; cursor: pointer; display: block; - height: 32px; - padding: 5px 32px 0 10px; + height: $DropDown-height; + line-height: $DropDown-height - 2px; // height minus the border + @include padding(0, $DropDown-height, 0, 12px); position: relative; overflow: hidden; } @@ -215,8 +218,9 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; box-sizing: border-box; cursor: pointer; display: block; - height: 36px; - padding: 7px 10px; + height: $DropDown-item-height; + line-height: $DropDown-item-height - 2px; // height minus the border + padding: 0px 12px; position: relative; border: 1px solid transparent; white-space: nowrap; diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 12c3415759ee60..a336776059ddb4 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -101,8 +101,8 @@ export class Dropdown extends React.Component { aria-activedescendant={ selectedIndex >= 0 ? (id + '-list' + selectedIndex) : (id + '-list') } aria-controls={ id + '-list' } > - { selectedOption ? selectedOption.text : '' } +
    this._optionList = c } id={ id + '-list' } className='ms-Dropdown-items' From a27ff763c608382c35d45a95062411b4c6f7aefd Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 6 Sep 2016 14:30:28 -0700 Subject: [PATCH 3/4] Persona RTL fixes --- src/components/Persona/Persona.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index d5ae74cfdb2d87..78fd52305ef24f 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -171,10 +171,10 @@ $ms-Persona-presenceSizeXl: 28px; .ms-Persona-image { display: table-cell; - margin-right: 10px; + @include margin-right(10px); position: absolute; top: 0; - left: 0; + @include left(0); width: 100%; height: 100%; border-radius: 50%; @@ -582,7 +582,7 @@ $ms-Persona-presenceSizeXl: 28px; height: 100%; position: absolute; top: 0; - left: 0; + @include left(0); box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset; border-radius: 50%; } @@ -595,7 +595,7 @@ $ms-Persona-presenceSizeXl: 28px; transform: rotate(-45deg); position: absolute; top: 5px; - left: 0; + @include left(0); } } From 2b4b935f6a7885d71bca10a842222c08659e66ec Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 6 Sep 2016 15:46:16 -0700 Subject: [PATCH 4/4] RTL fixes --- src/components/Callout/Callout.scss | 17 ++++++++--------- src/components/GroupedList/GroupHeader.scss | 2 +- src/components/Pivot/Pivot.scss | 2 +- src/components/SearchBox/SearchBox.scss | 2 +- src/components/Spinner/Spinner.scss | 21 ++------------------- src/components/TextField/TextField.scss | 10 +++++----- 6 files changed, 18 insertions(+), 36 deletions(-) diff --git a/src/components/Callout/Callout.scss b/src/components/Callout/Callout.scss index 91fee50c3f89fa..a97fe707774b8d 100644 --- a/src/components/Callout/Callout.scss +++ b/src/components/Callout/Callout.scss @@ -75,15 +75,15 @@ $Callout-beak-slant-width: 28px; .ms-Link.ms-Link--hero { position: relative; - left: -8px; // Move link inline with body text + @include left(-8px); // Move link inline with body text } } .ms-Callout-action { position: relative; top: 4px; - left: -8px; - margin-left: 0 !important; + @include left(-8px); + @include margin-left(0); &:hover .ms-Callout-actionIcon, &:focus .ms-Callout-actionIcon { @@ -92,18 +92,17 @@ $Callout-beak-slant-width: 28px; } .ms-Callout-button { - margin-right: 12px; + @include margin-right(12px); } //= Modifier: Close button callout // .ms-Callout.ms-Callout--close { .ms-Callout-title { - margin-right: 20px; // Avoid overlap with close button + @include margin-right(20px); // Avoid overlap with close button } } - //= Modifier: OOBE (Out of box experience) callout // .ms-Callout.ms-Callout--OOBE { @@ -152,8 +151,8 @@ $Callout-beak-slant-width: 28px; &.ms-Callout--arrowBottom { &:before, &:after { - left: 40px; - right: auto; + @include left(40px); + @include right(auto); } } @@ -161,7 +160,7 @@ $Callout-beak-slant-width: 28px; &.ms-Callout--arrowLeft { &:before, &:after { - top: calc('50% - 10px'); + top: calc(50% - 10px); } } diff --git a/src/components/GroupedList/GroupHeader.scss b/src/components/GroupedList/GroupHeader.scss index d954028a019af7..20df3e21fde7f7 100644 --- a/src/components/GroupedList/GroupHeader.scss +++ b/src/components/GroupedList/GroupHeader.scss @@ -91,7 +91,7 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); display: inline-block; position: relative; top: -16px; - left: -26px; + @include left(-26px); font-size: $ms-icon-size-l; color: $ms-color-neutralSecondaryAlt; transition: transform $ms-duration2 $groupHeader-ease-in-back, opacity $ms-duration4 $groupHeader-ease-out-sine; diff --git a/src/components/Pivot/Pivot.scss b/src/components/Pivot/Pivot.scss index a0b407e8b55d79..2855457404ab15 100644 --- a/src/components/Pivot/Pivot.scss +++ b/src/components/Pivot/Pivot.scss @@ -32,7 +32,7 @@ font-size: $ms-font-size-m; font-weight: $ms-font-weight-regular; line-height: 40px; - margin-right: 8px; + @include margin-right(8px); padding: 0 8px; text-align: center; position: relative; diff --git a/src/components/SearchBox/SearchBox.scss b/src/components/SearchBox/SearchBox.scss index 0bf875d64f9f62..41057fafc1fcdf 100644 --- a/src/components/SearchBox/SearchBox.scss +++ b/src/components/SearchBox/SearchBox.scss @@ -85,7 +85,7 @@ $SearchBox-height: 36px; transition: padding-left $ms-duration1; &:focus { - padding: 6px 32px 7px 10px; + @include padding-right(32px); border-color: $ms-color-themeDarker; } diff --git a/src/components/Spinner/Spinner.scss b/src/components/Spinner/Spinner.scss index adcd9f1ed8b7f2..9ca9e53ebf05f3 100644 --- a/src/components/Spinner/Spinner.scss +++ b/src/components/Spinner/Spinner.scss @@ -17,7 +17,7 @@ height: 28px; .ms-Spinner-label { - left: 34px; + @include left(34px); top: 6px; } } @@ -42,25 +42,8 @@ @include ms-font-s; position: relative; color: $ms-color-themePrimary; - left: 28px; - top: 2px; -} - -// TODO: Remove overrides below. - -/** - Change from Fabric - RTL support -*/ -.ms-Spinner { - &.ms-Spinner--large { - .ms-Spinner-label { - @include left(34px); - } - } -} - -.ms-Spinner-label { @include left(28px); + top: 2px; } /** diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index cc2f27c84657b3..e406cb031ee851 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -62,7 +62,7 @@ font-size: $ms-font-size-m; color: $ms-color-neutralPrimary; height: 32px; - padding: 6px 12px 7px; + @include padding(6px, 12px, 7px, 12px); width: 100%; min-width: 180px; outline: 0; @@ -132,10 +132,10 @@ .ms-Label { font-size: $ms-font-size-m; - margin-right: 8px; + @include margin-right(8px); display: table-cell; vertical-align: top; - padding-left: 12px; + @include padding-left(12px); padding-top: 9px; height: 32px; width: 1%; @@ -144,9 +144,9 @@ .ms-TextField-field { border: 0; - float: left; + @include float(left); display: table-cell; - text-align: left; + @include text-align(left); padding-top: 8px; padding-bottom: 3px;