Michael Lando | 451a340 | 2017-02-19 10:28:42 +0200 | [diff] [blame^] | 1 | .w-sdc-btn { |
| 2 | .c_4; |
| 3 | .hand; |
| 4 | .border-radius(5px); |
| 5 | border: 0; |
| 6 | height: 38px; |
| 7 | line-height: 38px; |
| 8 | width: 195px; |
| 9 | margin: 0 6px; |
| 10 | padding: 0; |
| 11 | vertical-align: middle; |
| 12 | outline: none; |
| 13 | &:disabled { .bg_e; } |
| 14 | } |
| 15 | |
| 16 | .w-sdc-btn-small { |
| 17 | .c_9; |
| 18 | .hand; |
| 19 | .border-radius(5px); |
| 20 | border: 0; |
| 21 | height: 30px; |
| 22 | line-height: 30px; |
| 23 | width: 71px; |
| 24 | margin: 0 6px; |
| 25 | padding: 0; |
| 26 | outline: none; |
| 27 | vertical-align: middle; |
| 28 | position: relative; |
| 29 | &:disabled { .bg_e; } |
| 30 | } |
| 31 | |
| 32 | |
| 33 | |
| 34 | .w-sdc-btn-red-small{ |
| 35 | |
| 36 | .w-sdc-btn-small; |
| 37 | .bg_h; |
| 38 | &:hover:enabled { .bg_h_hover; } |
| 39 | padding-left: 15px; |
| 40 | |
| 41 | span { |
| 42 | position: absolute; |
| 43 | top: 7px; |
| 44 | left: 10px; |
| 45 | } |
| 46 | } |
| 47 | |
| 48 | .w-sdc-btn-green-small{ |
| 49 | .w-sdc-btn-small; |
| 50 | .bg_z; |
| 51 | &:hover:enabled { .bg_z_hover; } |
| 52 | |
| 53 | } |
| 54 | |
| 55 | |
| 56 | .w-sdc-btn-light-green { |
| 57 | .w-sdc-btn; |
| 58 | .bg_z; |
| 59 | &:hover:enabled { .bg_z_hover; } |
| 60 | } |
| 61 | |
| 62 | .w-sdc-btn-green { |
| 63 | .w-sdc-btn; |
| 64 | .bg_d; |
| 65 | &:hover:enabled { .bg_d_hover; } |
| 66 | } |
| 67 | |
| 68 | .w-sdc-btn-blue { |
| 69 | .w-sdc-btn; |
| 70 | .bg_a; |
| 71 | &:hover:enabled { .bg_a_hover; } |
| 72 | } |
| 73 | |
| 74 | .w-sdc-btn-dark-gray { |
| 75 | .w-sdc-btn; |
| 76 | .bg_i; |
| 77 | &:hover:enabled { .bg_i_hover; } |
| 78 | } |
| 79 | |
| 80 | .w-sdc-form-action { |
| 81 | .c_6; |
| 82 | //.bg_d; |
| 83 | background-color: #28bd6e; //TO DO: add to variables |
| 84 | .border-radius(5px); |
| 85 | .hand; |
| 86 | border: 0; |
| 87 | height: 38px; |
| 88 | line-height: 38px; |
| 89 | width: 264px; |
| 90 | |
| 91 | &:hover { background-color: #23aa63; } //TO DO: add to variables |
| 92 | &:disabled { background-color: #93deb6; } //TO DO: add to variables |
| 93 | } |
| 94 | |
| 95 | /* |
| 96 | CLASSIC BUTTON |
| 97 | Examples: |
| 98 | ------------------------------------------------------------------- |
| 99 | <button class="w-sdc-classic-btn blue">Text 1</button> |
| 100 | <button class="w-sdc-classic-btn green">Text 1</button> |
| 101 | <button class="w-sdc-classic-btn gray">Text 1</button> |
| 102 | <button class="w-sdc-classic-btn white">Text 1</button> |
| 103 | <button class="w-sdc-classic-btn blue disabled">Text 5</button> |
| 104 | */ |
| 105 | .w-sdc-classic-btn { |
| 106 | .p_14_m; |
| 107 | text-align: center; |
| 108 | .border-radius(2px); |
| 109 | border-style: solid; |
| 110 | border-width: 1px; |
| 111 | width: 94px; |
| 112 | height: 30px; |
| 113 | display: block; |
| 114 | vertical-align: middle; |
| 115 | line-height: 30px; |
| 116 | cursor: pointer; |
| 117 | text-decoration: none; |
| 118 | box-sizing: border-box; |
| 119 | .noselect; |
| 120 | position: relative; |
| 121 | |
| 122 | &:focus, |
| 123 | &:active:focus { |
| 124 | outline: 0 none; |
| 125 | } |
| 126 | |
| 127 | &.primary { |
| 128 | border-color: @main_color_b; |
| 129 | background-color: @main_color_a; |
| 130 | color: @main_color_p; |
| 131 | |
| 132 | &:hover { |
| 133 | background-color: #1ec2ff; |
| 134 | } |
| 135 | } |
| 136 | |
| 137 | &.white { |
| 138 | |
| 139 | } |
| 140 | |
| 141 | &.grey { |
| 142 | |
| 143 | } |
| 144 | |
| 145 | &.positive { |
| 146 | |
| 147 | } |
| 148 | |
| 149 | &.negative { |
| 150 | |
| 151 | } |
| 152 | |
| 153 | &.blue { |
| 154 | .c_7; |
| 155 | ._w-sdc-classic-btn-configuration(#036698, #3b7b9b, #023c59); // Normal |
| 156 | &:hover { ._w-sdc-classic-btn-configuration(#036698, #458eb2, #023c59); } // Hover |
| 157 | &:active { ._w-sdc-classic-btn-configuration(#036698, #336c88, #023c59); } // Pressed |
| 158 | &:focus { &:before { ._w-sdc-classic-btn-focus(#ffffff, 0px); } } // Focus |
| 159 | &:disabled, |
| 160 | &.disabled { |
| 161 | .c_7; |
| 162 | opacity: 0.3; |
| 163 | ._w-sdc-classic-btn-configuration(#036698, #3b7b9b, #023c59); // Disabled |
| 164 | } |
| 165 | } |
| 166 | |
| 167 | &.green { |
| 168 | .c_7; |
| 169 | ._w-sdc-classic-btn-configuration(#25a762, #28bd6e, #235600); // Normal |
| 170 | &:hover { ._w-sdc-classic-btn-configuration(#25a762, #2bcd77, #235600); } // Hover |
| 171 | &:active { ._w-sdc-classic-btn-configuration(#45a006, #24a862, #235600); } // Pressed |
| 172 | &:focus { &:before { ._w-sdc-classic-btn-focus(#ffffff, 0px); } } // Focus |
| 173 | &:disabled, |
| 174 | &.disabled { |
| 175 | .c_7; |
| 176 | opacity: 0.3; |
| 177 | ._w-sdc-classic-btn-configuration(#45a006, #28bd6e, #235600); // Disabled |
| 178 | } |
| 179 | } |
| 180 | |
| 181 | &.gray { |
| 182 | .b_7; |
| 183 | ._w-sdc-classic-btn-configuration(#d8d8d8, #f6f6f6, #aaaaaa); // Normal |
| 184 | &:hover { ._w-sdc-classic-btn-configuration(#d8d8d8, #ececec, #aaaaaa); } // Hover |
| 185 | &:active { ._w-sdc-classic-btn-configuration(#d8d8d8, #d7d7d7, #aaaaaa); } // Pressed |
| 186 | &:focus { &:before { ._w-sdc-classic-btn-focus(#666666, -1px); } } // Focus |
| 187 | &:disabled, |
| 188 | &.disabled { |
| 189 | .b_7; |
| 190 | opacity: 0.3; |
| 191 | ._w-sdc-classic-btn-configuration(#d8d8d8, #f6f6f6, #aaaaaa); // Disabled |
| 192 | } |
| 193 | } |
| 194 | |
| 195 | &.white { |
| 196 | .b_7; |
| 197 | ._w-sdc-classic-btn-configuration(#d8d8d8, #ffffff, #aaaaaa); // Normal |
| 198 | &:hover { ._w-sdc-classic-btn-configuration(#d8d8d8, #f6f6f6, #aaaaaa); } // Hover |
| 199 | &:active { ._w-sdc-classic-btn-configuration(#d8d8d8, #ececec, #aaaaaa); } // Pressed |
| 200 | &:focus { &:before { ._w-sdc-classic-btn-focus(#666666, -1px); } } // Focus |
| 201 | &:disabled, |
| 202 | &.disabled { |
| 203 | .b_7; |
| 204 | opacity: 0.3; |
| 205 | ._w-sdc-classic-btn-configuration(#d8d8d8, #ffffff, #aaaaaa); // Disabled |
| 206 | } |
| 207 | } |
| 208 | } |
| 209 | |
| 210 | ._w-sdc-classic-btn-configuration(@border-color; @background-color; @shadow-color) { |
| 211 | border-color: @border-color; |
| 212 | background-color: @background-color; |
| 213 | .box-shadow(0px 1px 0.99px 0.01px @shadow-color); |
| 214 | } |
| 215 | |
| 216 | ._w-sdc-classic-btn-focus(@border-color, @position) { |
| 217 | content: " "; |
| 218 | position: absolute; |
| 219 | top: @position; |
| 220 | left: @position; |
| 221 | right: @position; |
| 222 | bottom: -1px + @position; |
| 223 | border: 1px solid @border-color; |
| 224 | z-index: 1; |
| 225 | .border-radius(2px); |
| 226 | } |
| 227 | |
| 228 | /* |
| 229 | WIZARD STEP CIRCLE BUTTON |
| 230 | Examples: |
| 231 | ------------------------------------------------------------------- |
| 232 | <button class="w-sdc-wizard-step-btn">1</button> |
| 233 | <button class="w-sdc-wizard-step-btn selected">2</button> |
| 234 | <button class="w-sdc-wizard-step-btn valid">3</button> |
| 235 | <button class="w-sdc-wizard-step-btn">4</button> |
| 236 | <button class="w-sdc-wizard-step-btn disabled">5</button> |
| 237 | */ |
| 238 | .w-sdc-wizard-step-btn { |
| 239 | ._w-sdc-wizard-step-btn(18px); |
| 240 | } |
| 241 | ._w-sdc-wizard-step-btn(@circle-radius) { |
| 242 | // I'm not using border, so the text inside will be vertical aligned. |
| 243 | .circle(@circle-radius * 2, #f6f6f6); |
| 244 | .noselect; |
| 245 | outline: 0 none; |
| 246 | position: relative; |
| 247 | vertical-align: top; |
| 248 | cursor: pointer; |
| 249 | vertical-align: middle; |
| 250 | border: none; |
| 251 | .box-shadow(inset 0px 0px 0px 1px #d8d8d8); |
| 252 | .b_17; |
| 253 | |
| 254 | &:active { .box-shadow(none); background-color: #eaeaea;} // Pressed |
| 255 | &.disabled { color: #a8b3b9; cursor: default; } |
| 256 | &.disabled:active { .box-shadow(inset 0px 0px 0px 1px #d8d8d8); background-color: #f6f6f6; } |
| 257 | &.valid { |
| 258 | .circle(@circle-radius * 2, #ffffff); |
| 259 | .box-shadow(inset 0px 0px 0px 2px #28bd6e); |
| 260 | .b_17; |
| 261 | } |
| 262 | &.selected { |
| 263 | .c_17; |
| 264 | background-color: #3b7b9b; |
| 265 | .box-shadow(none); |
| 266 | &:active {background-color: #336c88;} // Pressed |
| 267 | } |
| 268 | } |
| 269 | |
| 270 | |
| 271 | |
| 272 | |
| 273 | |
| 274 | |