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 @colorGray7;
31 // ----------------------------------------------------------------------------
33 // ----------------------------------------------------------------------------
35 .button-colors( @bgColor, @highlightColor, @activeColor ) {
36 background-color: @bgColor;
37 color: @colorButtonText;
38 border: 1px solid @colorFieldBorder;
40 // Make sure that `color` isn't inheriting from user-agent styles
42 color: @colorButtonText;
46 background-color: @highlightColor;
48 border-color: @colorGray10;
52 background-color: @highlightColor;
53 // Make sure that `color` isn't inheriting from user-agent styles
54 color: @colorButtonText;
55 border-color: @colorProgressive;
56 box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px #fff;
62 background-color: @activeColor;
64 border-color: @colorGray7;
69 background-color: @colorGray12;
71 border-color: @colorGray12;
73 // Make sure disabled buttons don't have hover and active states
76 background-color: @colorGray12;
79 border-color: @colorGray12;
84 .button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
85 background-color: @bgColor;
87 // border of the same color as background so that light background and
88 // dark background buttons are the same height and width
89 border: 1px solid @bgColor;
92 background-color: @highlightColor;
93 border-color: @highlightColor;
97 box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
103 background-color: @activeColor;
104 border-color: @activeColor;
109 background-color: @colorGray12;
111 border-color: @colorGray12;
113 // Make sure disabled buttons don't have hover and active states
117 background-color: @colorGray12;
119 border-color: @colorGray12;
125 .button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
126 // Quiet buttons all start gray, and reveal
127 // progressive/destructive color on hover and active.
128 color: @colorButtonText;
131 background-color: transparent;
132 color: @highlightColor;
141 background-color: transparent;
146 color: @colorDisabledText;