diff options
Diffstat (limited to 'www/wiki/resources/src/mediawiki.less/mediawiki.ui/mixins.less')
-rw-r--r-- | www/wiki/resources/src/mediawiki.less/mediawiki.ui/mixins.less | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/www/wiki/resources/src/mediawiki.less/mediawiki.ui/mixins.less new file mode 100644 index 00000000..1e078bd6 --- /dev/null +++ b/www/wiki/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -0,0 +1,148 @@ +// ---------------------------------------------------------------------------- +// 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 @colorGray7; + cursor: pointer; + } +} + +// ---------------------------------------------------------------------------- +// Button styling +// ---------------------------------------------------------------------------- + +.button-colors( @bgColor, @highlightColor, @activeColor ) { + background-color: @bgColor; + color: @colorButtonText; + border: 1px solid @colorFieldBorder; + + // Make sure that `color` isn't inheriting from user-agent styles + &:visited { + color: @colorButtonText; + } + + &:hover { + background-color: @highlightColor; + color: @colorGray4; + border-color: @colorGray10; + } + + &:focus { + background-color: @highlightColor; + // Make sure that `color` isn't inheriting from user-agent styles + color: @colorButtonText; + border-color: @colorProgressive; + box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px #fff; + } + + &:active, + &.is-on, + &.mw-ui-checked { + background-color: @activeColor; + color: @colorGray1; + border-color: @colorGray7; + 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 { + background-color: @colorGray12; + color: #fff; + box-shadow: none; + border-color: @colorGray12; + } + } +} + +.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; + } + } +} + +.button-colors-quiet( @textColor, @highlightColor, @activeColor ) { + // Quiet buttons all start gray, and reveal + // progressive/destructive color on hover and active. + color: @colorButtonText; + + &:hover { + background-color: transparent; + color: @highlightColor; + } + + &:active, + &.mw-ui-checked { + color: @activeColor; + } + + &:focus { + background-color: transparent; + color: @textColor; + } + + &:disabled { + color: @colorDisabledText; + } +} |