mediawiki.ui: Move remaining mixin to buttons.less; remove mixins.less
authorVolker E <volker.e@wikimedia.org>
Fri, 23 Nov 2018 19:24:53 +0000 (11:24 -0800)
committerJforrester <jforrester@wikimedia.org>
Fri, 23 Nov 2018 22:56:35 +0000 (22:56 +0000)
mediawiki.ui mixins are arbitrarily increasing code complexity.
Moving the remaining primary button mixin to the corresponding
buttons.less file and removing mixins.less as logical consequence.

Change-Id: I1299e210a7c8a403e859915bfed3ebecbf1f2f14

resources/src/mediawiki.less/mediawiki.ui/mixins.less [deleted file]
resources/src/mediawiki.ui/components/anchors.less
resources/src/mediawiki.ui/components/buttons.less
resources/src/mediawiki.ui/components/forms.less
resources/src/mediawiki.ui/components/inputs.less
resources/src/mediawiki.ui/components/text.less

diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less
deleted file mode 100644 (file)
index 44fd1ee..0000000
+++ /dev/null
@@ -1,44 +0,0 @@
-// ----------------------------------------------------------------------------
-// Button styling
-// ----------------------------------------------------------------------------
-
-.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
-       background-color: @bgColor;
-       color: #fff;
-       // border of the same color as background so that light background and
-       // dark background buttons are the same height and width
-       border: 1px solid @bgColor;
-
-       &:hover {
-               background-color: @highlightColor;
-               border-color: @highlightColor;
-       }
-
-       &:focus {
-               box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
-       }
-
-       &:active,
-       &.is-on,
-       &.mw-ui-checked {
-               background-color: @activeColor;
-               border-color: @activeColor;
-               box-shadow: none;
-       }
-
-       &:disabled {
-               background-color: @colorGray12;
-               color: #fff;
-               border-color: @colorGray12;
-
-               // Make sure disabled buttons don't have hover and active states
-               &:hover,
-               &:active,
-               &.mw-ui-checked {
-                       background-color: @colorGray12;
-                       color: #fff;
-                       border-color: @colorGray12;
-                       box-shadow: none;
-               }
-       }
-}
index 8e97c3e..4de2451 100644 (file)
@@ -1,6 +1,5 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // Helpers
 .mixin-mw-ui-anchor-styles( @mainColor ) {
index 4a0adbc..ecdcc46 100644 (file)
@@ -1,10 +1,51 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // Buttons
-//
-// All buttons start with mw-ui-button class, modified by other classes.
+// Helper mixins
+// Primary buttons mixin
+.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
+       background-color: @bgColor;
+       color: #fff;
+       // border of the same color as background so that light background and
+       // dark background buttons are the same height and width
+       border: 1px solid @bgColor;
+
+       &:hover {
+               background-color: @highlightColor;
+               border-color: @highlightColor;
+       }
+
+       &:focus {
+               box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
+       }
+
+       &:active,
+       &.is-on,
+       &.mw-ui-checked {
+               background-color: @activeColor;
+               border-color: @activeColor;
+               box-shadow: none;
+       }
+
+       &:disabled {
+               background-color: @colorGray12;
+               color: #fff;
+               border-color: @colorGray12;
+
+               // Make sure disabled buttons don't have hover and active states
+               &:hover,
+               &:active,
+               &.mw-ui-checked {
+                       background-color: @colorGray12;
+                       color: #fff;
+                       border-color: @colorGray12;
+                       box-shadow: none;
+               }
+       }
+}
+
+// All buttons start with `.mw-ui-button` class, modified by other classes.
 // It can be any element.  Due to a lack of a CSS reset, the exact styling of
 // the button depends on what type of element is used.
 // There are two kinds of buttons, the default is a "Call to Action" with an obvious border
index a018d4e..18ac318 100644 (file)
@@ -2,7 +2,6 @@
 
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // --------------------------------------------------------------------------
 // Layouts
index 4b8b1ee..55d15b1 100644 (file)
@@ -2,7 +2,6 @@
 
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 // Text inputs
 //
index a07aa68..e2264c6 100644 (file)
@@ -1,6 +1,5 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
-@import 'mediawiki.ui/mixins';
 
 /*
 Text & Anchors