1 // ----------------------------------------------------------------------------
3 // ----------------------------------------------------------------------------
4 .agora-label-styling() {
13 .agora-inline-label-styling() {
16 vertical-align: bottom;
20 & > input[type="checkbox"],
21 & > input[type="radio"] {
26 border: 1px solid @colorFieldBorder;
31 // ----------------------------------------------------------------------------
33 // ----------------------------------------------------------------------------
35 .button-colors( @bgColor, @highlightColor, @activeColor ) {
39 background-color: @highlightColor;
43 border-color: @colorWhite;
44 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px @colorWhite;
47 // Remove the inner border and padding in Firefox.
49 border-color: transparent;
57 background-color: @activeColor;
62 .button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) >= 70% ) {
63 color: @colorButtonText;
64 border: 1px solid @colorGray12;
69 // make sure that is isn't inheriting from a general rule
70 color: @colorButtonText;
74 background-color: @highlightColor;
78 color: @colorDisabledText;
80 // make sure disabled buttons don't have hover and active states
89 .button-colors( @bgColor, @highlightColor, @activeColor ) when ( lightness( @bgColor ) < 70% ) {
91 // border of the same color as background so that light background and
92 // dark background buttons are the same height and width
93 border: 1px solid @bgColor;
94 text-shadow: 0 1px rgba(0, 0, 0, .1);
97 background-color: @colorGray13;
98 border-color: @colorGray13;
100 // make sure disabled buttons don't have hover and active states
109 .button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
110 // Quiet buttons all start gray, and reveal
111 // constructive/progressive/destructive color on hover and active.
112 color: @colorButtonText;
116 background-color: transparent;
126 color: @colorDisabledText;