-// ----------------------------------------------------------------------------
-// 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;
}
}
}
-
-.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;
- }
-}