1 // ----------------------------------------------------------------------------
3 // ----------------------------------------------------------------------------
4 .agora-label-styling() {
13 .agora-inline-label-styling() {
16 vertical-align: bottom;
21 & > input[type="checkbox"],
22 & > input[type="radio"] {
27 border: 1px solid @colorFieldBorder;
32 // ----------------------------------------------------------------------------
34 // ----------------------------------------------------------------------------
36 .button-colors(@bgColor, @highlightColor, @activeColor) {
40 // The inner bottom bevel should match the active background color.
41 box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%);
42 border-bottom-color: @highlightColor;
46 border-color: rgba(0,0,0,0.2);
47 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
50 // remove outline in Firefox
52 border-color: transparent;
58 background: @activeColor;
63 .button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) >= 70%) {
64 color: @colorButtonText;
65 border: 1px solid @colorGray12;
70 // make sure that is isn't inheriting from a general rule
71 color: @colorButtonText;
75 color: @colorDisabledText;
77 // make sure disabled buttons don't have hover and active states
86 .button-colors(@bgColor, @highlightColor, @activeColor) when (lightness(@bgColor) < 70%) {
88 // border of the same color as background so that light background and
89 // dark background buttons are the same height and width
90 border: 1px solid @bgColor;
91 text-shadow: 0 1px rgba(0, 0, 0, .1);
94 background: @colorGray13;
95 border-color: @colorGray13;
97 // make sure disabled buttons don't have hover and active states
106 .button-colors-quiet(@textColor, @highlightColor, @activeColor) {
107 // Quiet buttons all start gray, and reveal
108 // constructive/progressive/destructive color on hover and active.
109 color: @colorButtonText;
122 color: @colorDisabledText;