diff options
author | Pierre Schmitz <pierre@archlinux.de> | 2014-12-27 15:41:37 +0100 |
---|---|---|
committer | Pierre Schmitz <pierre@archlinux.de> | 2014-12-31 11:43:28 +0100 |
commit | c1f9b1f7b1b77776192048005dcc66dcf3df2bfb (patch) | |
tree | 2b38796e738dd74cb42ecd9bfd151803108386bc /resources/src/mediawiki.less/mediawiki.ui/mixins.less | |
parent | b88ab0086858470dd1f644e64cb4e4f62bb2be9b (diff) |
Update to MediaWiki 1.24.1
Diffstat (limited to 'resources/src/mediawiki.less/mediawiki.ui/mixins.less')
-rw-r--r-- | resources/src/mediawiki.less/mediawiki.ui/mixins.less | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less new file mode 100644 index 00000000..ec9888f2 --- /dev/null +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -0,0 +1,122 @@ +// ---------------------------------------------------------------------------- +// Form styling mixins +// ---------------------------------------------------------------------------- +.agora-label-styling() { + font-size: 0.9em; + color: @colorText; + + * { + font-weight: normal; + } +} + +.agora-inline-label-styling() { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + + font-weight: normal; + + & > input[type="checkbox"], + & > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0 0; + padding: 0; + border: 1px solid @colorFieldBorder; + cursor: pointer; + } +} + +// ---------------------------------------------------------------------------- +// Button styling +// ---------------------------------------------------------------------------- + +.button-colors(@bgColor) { + background: @bgColor; + + &:hover, + &:focus { + // 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%); + outline: none; + // remove outline in Firefox + &::-moz-focus-inner { + border-color: transparent; + } + } + + &: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%); + box-shadow: none; + } +} + +.button-colors(@bgColor) when (lightness(@bgColor) >= 70%) { + color: @colorButtonText; + border: 1px solid @colorGray12; + + &:disabled { + color: @colorDisabledText; + + // make sure disabled buttons don't have hover and active states + &:hover, + &:active { + background: @bgColor; + box-shadow: none; + } + } +} + +.button-colors(@bgColor) 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 (only top and bottom to + // make box shadow on hover cover the corners too) + border: 1px solid @bgColor; + border-left: none; + border-right: none; + text-shadow: 0 1px rgba(0, 0, 0, .1); + + &:disabled { + background: @colorGray12; + border-color: @colorGray12; + + // make sure disabled buttons don't have hover and active states + &:hover, + &:active, + &.mw-ui-checked { + box-shadow: none; + } + } +} + +.button-colors-quiet(@textColor) { + // Quiet buttons all start gray, and reveal + // constructive/progressive/destructive color on hover and active. + color: @colorButtonText; + + &:hover, + &:focus { + // lessphp doesn't implement tint, see above + // color: tint(@textColor, 20%); + color: mix(#fff, @textColor, 20%); + } + + &:active, + &.mw-ui-checked { + // lessphp doesn't implement shade, see above + // color: shade(@textColor, 20%); + color: mix(#000, @textColor, 20%); + } + + &:disabled { + color: @colorDisabledText; + } +} |