Petar.petkovic has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/383358 )
Change subject: RCFilters: Use mixins and variables in Less files ...................................................................... RCFilters: Use mixins and variables in Less files Bug: T156164 Change-Id: Ie979926fe2fb0f840e5bd5dacedf254312a0aa17 --- M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less 17 files changed, 80 insertions(+), 62 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/58/383358/1 diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less index ba7a70e..9608ca4 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less @@ -1,5 +1,7 @@ @import 'mediawiki.mixins.animation'; @import 'mw.rcfilters.mixins'; +@import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; @rcfilters-spinner-width: 70px; @rcfilters-head-min-height: 250px; @@ -84,7 +86,7 @@ display: inline-block; width: 12px; height: 12px; - background-color: #c8ccd1; + background-color: @colorGray12; border-radius: 100%; .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both ); } @@ -128,13 +130,11 @@ 0%, 80%, 100% { - -webkit-transform: scale( 0.7 ); - transform: scale( 0.7 ); + .transform( scale( 0.7 ) ); } 40% { - background-color: #a2a9b1; - -webkit-transform: scale( 1 ); - transform: scale( 1 ); + background-color: @colorGray10; + .transform( scale( 1 ) ); } } @@ -142,13 +142,11 @@ 0%, 80%, 100% { - -moz-transform: scale( 0.7 ); - transform: scale( 0.7 ); + .transform( scale( 0.7 ) ); } 40% { - background-color: #a2a9b1; - -moz-transform: scale( 0.7 ); - transform: scale( 1 ); + background-color: @colorGray10; + .transform( scale( 1 ) ); } } @@ -156,10 +154,10 @@ 0%, 80%, 100% { - transform: scale( 0.7 ); + .transform( scale( 0.7 ) ); } 40% { - background-color: #a2a9b1; - transform: scale( 1 ); + background-color: @colorGray10; + .transform( scale( 1 ) ); } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less index 6c44cc4..5e9aa32 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less @@ -1,5 +1,6 @@ @import 'mediawiki.mixins'; @import 'mw.rcfilters.variables'; +@import 'mediawiki.ui/variables'; .animation-delay( ... ) { -webkit-animation-delay: @arguments; // Chrome 4-42, Safari 4-8, Opera 15-29, Android 2.1-4.4.4 @@ -8,7 +9,7 @@ } // This is a general mixin for a color circle -.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: #54595d, @emptyBackground: false ) { +.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) { .box-sizing( border-box ); min-width: @diameter; width: @diameter; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less index 555631b..fba4e9c 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less @@ -1,11 +1,12 @@ @import 'mw.rcfilters.mixins'; +@import 'mediawiki.ui/variables'; @keyframes fadeBlue { 60% { - border-top-color: #36c; + border-top-color: @colorProgressive; } 100% { - border-top-color: #c8ccd1; + border-top-color: @colorGray12; } } @@ -19,7 +20,7 @@ &-previousChangesIndicator { margin: 10px 0; - border-top: 2px solid #c8ccd1; + border-top: 2px solid @colorGray12; animation: 1s ease fadeBlue; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less index 83fe189..a9c2096 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less @@ -1,12 +1,12 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-filterMenuHeaderWidget { &-title { display: inline-block; font-size: 1.2em; padding: 0.75em 0 0.75em 0.5em; - // TODO: Unify colors with official design palette - color: #54595d; + color: @colorGray5; } &-helpIcon { @@ -16,8 +16,8 @@ } &-header { - border-bottom: 1px solid #c8ccd1; - background: #f8f9fa; + border-bottom: 1px solid @colorGray12; + background-color: @colorGray15; &-invert, &-highlight { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less index ea93247..4ae6a69 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less @@ -1,4 +1,5 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-filterMenuOptionWidget { &.oo-ui-flaggedElement-muted { @@ -7,19 +8,19 @@ // are also inverted, so if they are also selected, we // should make sure the selected background is shown rather // than the muted one - background-color: #f8f9fa; // Base90 AAA + background-color: @colorGray15; // Base90 AAA } .mw-rcfilters-ui-itemMenuOptionWidget-label-title, .mw-rcfilters-ui-itemMenuOptionWidget-label-desc { - color: #54595d; // Base20 AAA + color: @colorGray5; // Base20 AAA } &.oo-ui-optionWidget-highlighted { // Copying over styles from OOUI, since it must // override our 'muted' state - background-color: #eaecf0; - color: #000; + background-color: @colorGray14; + color: @colorGray1; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less index b6fb0bb..3e32c83 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less @@ -1,14 +1,15 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-filterMenuSectionOptionWidget { - background: #eaecf0; + background: @colorGray14; padding-bottom: 0.7em; &-header { padding: 0 0.75em; // Use a high specificity to override OOUI .oo-ui-optionWidget.oo-ui-labelElement &-title.oo-ui-labelElement-label { - color: #54595d; + color: @colorGray5; .box-sizing( border-box ); display: inline-block; } @@ -23,7 +24,7 @@ padding: 0; &:focus { - box-shadow: none; + .box-shadow( none ); outline: 0; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less index 4ecc22e..3fb1707 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less @@ -12,9 +12,9 @@ } &.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { - border: 1px solid #a2a9b1; + border: 1px solid @colorGray10; border-bottom: 0; - background-color: #f8f9fa; + background-color: @colorGray15; border-radius: 2px 2px 0 0; padding: 0.6em; margin-top: 1em; @@ -37,11 +37,11 @@ &-content { &-title { font-weight: bold; - color: #54595d; + color: @colorGray5; } &-savedQueryTitle { - color: #222; // Base10 + color: @colorGray2; // Base10 font-weight: bold; vertical-align: top; margin-left: 1em; @@ -62,7 +62,7 @@ width: 1em; &-widget.oo-ui-widget { - border: 1px solid #a2a9b1; + border: 1px solid @colorGray10; border-left-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; @@ -71,7 +71,7 @@ display: block; text-align: right; height: 2.5em; - box-sizing: border-box; + .box-sizing( border-box ); .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child { margin-left: 0; @@ -90,7 +90,7 @@ } &-emptyFilters { - color: #72777d; + color: @colorGray7; } &-cell-filters { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less index 0adec46..20b8385 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less @@ -1,4 +1,5 @@ @import 'mw.rcfilters.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-highlightColorPickerWidget { &-label { @@ -38,7 +39,7 @@ .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true ); // Override border to dashed - border: 1px dashed #54595d; + border: 1px dashed @colorGray5; &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less index 75ea061..1eefe9e 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less @@ -1,4 +1,5 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-itemMenuOptionWidget { min-height: 3.5em; @@ -6,11 +7,11 @@ .box-sizing( border-box ); &:not( :last-child ) { - border-bottom: 1px solid #eaecf0; // Base80 AAA + border-bottom: 1px solid @colorGray14; // Base80 AAA } &-view-namespaces { - border-top: 5px solid #c8ccd1; + border-top: 5px solid @colorGray12; &:first-child, &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk { @@ -19,7 +20,7 @@ } &:hover { - background-color: #f8f9fa; + background-color: @colorGray15; } .mw-rcfilters-ui-table { @@ -34,10 +35,10 @@ &-title { font-weight: bold; font-size: 1.15em; - color: #222; + color: @colorGray2; } &-desc { - color: #54595d; + color: @colorGray5; white-space: normal; } } @@ -61,7 +62,7 @@ &-excludeLabel { width: 5em; padding-left: 1em; - color: #54595d; // Base20 AAA + color: @colorGray5; // Base20 AAA } &-highlightButton { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less index 04f4174..67664b5 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.mixins'; + .mw-rcfilters-ui-liveUpdateButtonWidget { margin-left: 1em; @@ -26,15 +28,15 @@ @keyframes ripple { 0%, 35% { - transform: scale( 0 ); + .transform( scale( 0 ) ); opacity: 1; } 50% { - transform: scale( 1.5 ); + .transform( scale( 1.5 ) ); opacity: 0.8; } 100% { opacity: 0; - transform: scale( 4 ); + .transform( scale( 4 ) ); } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less index 24e062e..7dd78e7 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less @@ -1,4 +1,5 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-menuSelectWidget { z-index: auto; @@ -11,7 +12,7 @@ &-noresults { display: none; padding: 0.5em; - color: #54595d; + color: @colorGray5; .oo-ui-menuSelectWidget-invisible & { display: inline-block; @@ -24,8 +25,8 @@ &-footer { padding: 0.5em; - background-color: #f8f9fa; - border-top: 1px solid #c8ccd1; + background-color: @colorGray15; + border-top: 1px solid @colorGray12; & + & { border-top: 0; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less index aca3ea6..59750c9 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-rcTopSectionWidget { &-topLinks { &-table { @@ -34,7 +36,7 @@ &:not( .mw-collapsed ) { // Same as the legend - border: 1px solid #ddd; + border: 1px solid @colorGray12; } body:not( .mw-rcfilters-ui-initialized ) & { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less index 9dccc24..efe3e2f 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less @@ -1,11 +1,13 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-savedLinksListItemWidget { padding: 0 0.5em; line-height: normal; &:hover { // Mimicking optionWidget styles - background-color: #eaecf0; - color: #000; + background-color: @colorGray14; + color: @colorGray1; } .mw-rcfilters-ui-cell { @@ -42,7 +44,7 @@ overflow: hidden; cursor: pointer; margin-left: 0.5px; - color: #36c; // Accent50; + color: @colorProgressive; // Accent50; } &-icon, diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less index 2b713e1..e72fbda 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-savedLinksListWidget { &-menu { width: 100%; @@ -12,7 +14,7 @@ // Extra specificity needed to override OOUI rule that sets white-space: nowrap; // on labels inside options &.oo-ui-optionWidget .oo-ui-labelElement-label { - color: #72777d; + color: @colorGray7; white-space: normal; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less index 26ea64c..0a3631f 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less @@ -1,15 +1,16 @@ @import 'mw.rcfilters.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-tagItemWidget { // Background and color of the capsule widget need a bit // more specificity to override OOUI internals &.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled { // Muted state - background-color: #eaecf0; - border-color: #c8ccd1; + background-color: @colorGray14; + border-color: @colorGray12; .oo-ui-labelElement-label { - color: #72777d; + color: @colorGray7; } .oo-ui-buttonWidget { opacity: @muted-opacity; @@ -18,7 +19,7 @@ &.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled { .oo-ui-labelElement-label { - color: #b32424; + color: @colorDestructiveActive; } } @@ -28,12 +29,12 @@ // and will be available in the next OOUI release. .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled { background-color: #eaf3ff; - border-color: #36c; + border-color: @colorProgressive; } &-popup-content { padding: 0.5em; - color: #54595d; + color: @colorGray5; } &.oo-ui-labelElement .oo-ui-labelElement-label { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less index a6ce4cd..7fd3e46 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less @@ -1,6 +1,8 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-viewSwitchWidget { label.oo-ui-labelWidget { - color: #54595d; + color: @colorGray5; font-weight: bold; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less index 6fa3aa2..38742b7 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-watchlistTopSectionWidget { &-watchlistDetails { width: 100%; @@ -22,6 +24,6 @@ &-separator { margin-top: 1em; - border-top: 2px solid #eaecf0; // Base80 AAA + border-top: 2px solid @colorGray14; // Base80 AAA } } -- To view, visit https://gerrit.wikimedia.org/r/383358 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ie979926fe2fb0f840e5bd5dacedf254312a0aa17 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Petar.petkovic <ppetko...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits