diff options
Diffstat (limited to 'resources/src/mediawiki.less')
| -rw-r--r-- | resources/src/mediawiki.less/mediawiki.mixins.less | 4 | ||||
| -rw-r--r-- | resources/src/mediawiki.less/mediawiki.ui/mixins.less | 29 | ||||
| -rw-r--r-- | resources/src/mediawiki.less/mediawiki.ui/variables.less | 13 |
3 files changed, 29 insertions, 17 deletions
diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less index 3366f1e1..79549c33 100644 --- a/resources/src/mediawiki.less/mediawiki.mixins.less +++ b/resources/src/mediawiki.less/mediawiki.mixins.less @@ -52,7 +52,7 @@ .list-style-image-svg(@svg, @fallback) { list-style-image: e('/* @embed */') url(@svg); /* Fallback to PNG bullet for IE 8 and below using CSS hack */ - list-style-image: e('/* @embed */') url(@fallback)\9; + list-style-image: e('/* @embed */') url(@fallback) e('\9'); } .transition(@value) { @@ -85,7 +85,7 @@ column-width: @value;// IE 10+ } -.column-break-inside-avoid { +.column-break-inside-avoid() { -webkit-column-break-inside: avoid; // Chrome Any, Safari 3+, Opera 11.1+ page-break-inside: avoid; // Firefox 1.5+ break-inside: avoid-column; // IE 10+ diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less index 2d684572..1b31956d 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -33,18 +33,17 @@ // Button styling // ---------------------------------------------------------------------------- -.button-colors(@bgColor) { +.button-colors(@bgColor, @highlightColor, @activeColor) { background: @bgColor; &:hover { // The inner bottom bevel should match the active background color. - box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%); - border-bottom-color: mix(#000, @bgColor, 20%); + background-color: @highlightColor; } &:focus { - border-color: rgba(0,0,0,0.2); - box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); + border-color: @colorWhite; + box-shadow: 0 0 0 1px @highlightColor; outline: none; // remove outline in Firefox @@ -55,15 +54,12 @@ &:active, &.mw-ui-checked { - // lessphp doesn't implement shade (https://github.com/leafo/lessphp/issues/528); - // it passes it through, then ResourceLoader drops it. - // background: shade(@bgColor, 20%); - background: mix(#000, @bgColor, 20%); + background: @activeColor; box-shadow: none; } } -.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) { +.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) { color: @colorButtonText; border: 1px solid @colorGray12; @@ -74,6 +70,10 @@ color: @colorButtonText; } + &:focus { + background-color: @highlightColor; + } + &:disabled { color: @colorDisabledText; @@ -86,7 +86,7 @@ } } -.button-colors(@bgColor) when (lightness(@bgColor) < 70%) { +.button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) < 70%) { color: #fff; // border of the same color as background so that light background and // dark background buttons are the same height and width @@ -106,21 +106,20 @@ } } -.button-colors-quiet(@textColor) { +.button-colors-quiet(@textColor, @highlightColor, @activeColor) { // Quiet buttons all start gray, and reveal // constructive/progressive/destructive color on hover and active. color: @colorButtonText; &:hover, &:focus { + background: transparent; color: @textColor; } &:active, &.mw-ui-checked { - // lessphp doesn't implement shade, see above - // color: shade(@textColor, 20%); - color: mix(#000, @textColor, 20%); + color: @activeColor; } &:disabled { diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less index e91302be..4b6bb48b 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/variables.less +++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less @@ -21,12 +21,18 @@ // Semantic background colors // Blue; for contextual use of a continuing action @colorProgressive: #347bff; +@colorProgressiveHighlight: #2962CC; +@colorProgressiveActive: #2962CC; // Green; for contextual use of a positive finalizing action @colorConstructive: #00af89; +@colorConstructiveHighlight: #008C6D; +@colorConstructiveActive: #008C6D; // Orange; for contextual use of returning to a past action @colorRegressive: #FF5D00; // Red; for contextual use of a negative action of high severity @colorDestructive: #d11d13; +@colorDestructiveHighlight: #A7170F; +@colorDestructiveActive: #A7170F; // Orange; for contextual use of a potentially negative action of medium severity @colorMediumSevere: #FF5D00; // Yellow; for contextual use of a potentially negative action of low severity @@ -41,6 +47,8 @@ @colorText: @colorGray2; @colorTextLight: @colorGray6; @colorButtonText: @colorGray5; +@colorButtonTextHighlight: @colorGray7; +@colorButtonTextActive: @colorGray7; @colorDisabledText: @colorGray12; @colorErrorText: #CC0000; @@ -60,3 +68,8 @@ // Global border radius to be used to buttons and inputs @borderRadius: 2px; + + +// Icon related variables +@iconSize: 1.5em; +@iconGutterWidth: 1em; |