1
/// Padding of a button, must be defined with a shorthand for vertical and horizontal values e.g. ".5rem .5rem"
3
$buttonPadding: .5rem 1rem;
5
/// Width of a button having an icon with no label
7
$buttonIconOnlyWidth: 2.357rem;
9
/// Padding of a button having an icon with no label
11
$buttonIconOnlyPadding: .5rem 0;
13
/// Background of a button
15
$buttonBg: $primaryColor;
17
/// Text color of a button
19
$buttonTextColor: $primaryTextColor;
23
$buttonBorder: 1px solid $primaryColor;
25
/// Background of a button in hover state
27
$buttonHoverBg: $primaryDarkColor;
29
/// Text color of a button in hover state
31
$buttonTextHoverColor: $primaryTextColor;
33
/// Border color of a button in hover state
35
$buttonHoverBorderColor: $primaryDarkColor;
37
/// Background of a button in pressed state
39
$buttonActiveBg: $primaryDarkerColor;
41
/// Color of a button in pressed state
43
$buttonTextActiveColor: $primaryTextColor;
45
/// Border color of a button in pressed state
47
$buttonActiveBorderColor: $primaryDarkerColor;
49
/// Shadow of a raised button
51
$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
53
/// Border radius of a rounded button
55
$roundedButtonBorderRadius: 2rem;
57
/// Alpha level of a text button background in hover state
59
$textButtonHoverBgOpacity:.04;
61
/// Alpha level of a text button background in active state
63
$textButtonActiveBgOpacity:.16;
65
/// Border style of a outlined button
67
$outlinedButtonBorder:1px solid;
69
/// Text color of a plain text button
71
$plainButtonTextColor:#6c757d;
73
/// Background color of a plain text button in hover state
75
$plainButtonHoverBgColor:#e9ecef;
77
/// Background color of a plain text button in active state
79
$plainButtonActiveBgColor:#dee2e6;
81
/// Background of a secondary button
83
$secondaryButtonBg: #607D8B;
85
/// Text color of a secondary button
87
$secondaryButtonTextColor: #ffffff;
89
/// Border of a secondary button
91
$secondaryButtonBorder: 1px solid #607D8B;
93
/// Background of a secondary button in hover state
95
$secondaryButtonHoverBg: #546E7A;
97
/// Text color of a secondary button in hover state
99
$secondaryButtonTextHoverColor: #ffffff;
101
/// Border color of a secondary button in hover state
103
$secondaryButtonHoverBorderColor: #546E7A;
105
/// Background of a secondary button in pressed state
107
$secondaryButtonActiveBg: #455A64;
109
/// Text color of a secondary button in pressed state
111
$secondaryButtonTextActiveColor: #ffffff;
113
/// Border color of a secondary button in pressed state
115
$secondaryButtonActiveBorderColor: #455A64;
117
/// Box shadow of a secondary button in focused state
119
$secondaryButtonFocusShadow: 0 0 0 0.2rem #B0BEC5;
121
/// Background of an info button
123
$infoButtonBg: #03A9F4;
125
/// Text color of an info button
127
$infoButtonTextColor: #ffffff;
129
/// Border of an info button
131
$infoButtonBorder: 1px solid #03A9F4;
133
/// Background of an info button in hover state
135
$infoButtonHoverBg: #039BE5;
137
/// Text color of an info button in hover state
139
$infoButtonTextHoverColor: #ffffff;
141
/// Border color of an info button in hover state
143
$infoButtonHoverBorderColor: #039BE5;
145
/// Background of an info button in pressed state
147
$infoButtonActiveBg: #0288D1;
149
/// Text color of an info button in pressed state
151
$infoButtonTextActiveColor: #ffffff;
153
/// Border color of an info button in pressed state
155
$infoButtonActiveBorderColor: #0288D1;
157
/// Box shadow of an info button in focused state
159
$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%);
161
/// Background of a success button
163
$successButtonBg: #4CAF50;
165
/// Text color of a success button
167
$successButtonTextColor: #ffffff;
169
/// Border of a success button
171
$successButtonBorder: 1px solid #4CAF50;
173
/// Background of a success button in hover state
175
$successButtonHoverBg: #43A047;
177
/// Text color of a success button in hover state
179
$successButtonTextHoverColor: #ffffff;
181
/// Border color of a success button in hover state
183
$successButtonHoverBorderColor: #43A047;
185
/// Background of a success button in pressed state
187
$successButtonActiveBg: #388E3C;
189
/// Text Color of a success button in pressed state
191
$successButtonTextActiveColor: #ffffff;
193
/// Border color of a success button in pressed state
195
$successButtonActiveBorderColor: #388E3C;
197
/// Box shadow of a success button in focused state
199
$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);
201
/// Background of a warning button
203
$warningButtonBg: #FFC107;
205
/// Text color of a warning button
207
$warningButtonTextColor: $textColor;
209
/// Border of a warning button
211
$warningButtonBorder: 1px solid #FFC107;
213
/// Background of a warning button in hover state
215
$warningButtonHoverBg: #FFB300;
217
/// Text color of a warning button in hover state
219
$warningButtonTextHoverColor: $textColor;
221
/// Border color of a warning button in hover state
223
$warningButtonHoverBorderColor: #FFB300;
225
/// Background of a warning button in pressed state
227
$warningButtonActiveBg: #FFA000;
229
/// Text color of a warning button in pressed state
231
$warningButtonTextActiveColor: $textColor;
233
/// Border color of a warning button in pressed state
235
$warningButtonActiveBorderColor: #FFA000;
237
/// Box shadow of a warning button in focused state
239
$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%);
241
/// Background of a help button
243
$helpButtonBg:#9C27B0;
245
/// Text color of a help button
247
$helpButtonTextColor:#ffffff;
249
/// Border of a help button
251
$helpButtonBorder:1px solid #9C27B0;
253
/// Background of a help help in hover state
255
$helpButtonHoverBg:#8E24AA;
257
/// Text color of a help button in hover state
259
$helpButtonTextHoverColor:#ffffff;
261
/// Border color of a help button in hover state
263
$helpButtonHoverBorderColor:#8E24AA;
265
/// Background of a help button in pressed state
267
$helpButtonActiveBg:#7B1FA2;
269
/// Text color of a help button in pressed state
271
$helpButtonTextActiveColor:#ffffff;
273
/// Border color of a help button in pressed state
275
$helpButtonActiveBorderColor:#7B1FA2;
277
/// Box shadow of a help button in focused state
279
$helpButtonFocusShadow:0 0 0 0.2rem #CE93D8;
281
/// Background of a danger button
283
$dangerButtonBg: #f44336;
285
/// Text color of a danger button
287
$dangerButtonTextColor: #ffffff;
289
/// Border of a danger button
291
$dangerButtonBorder: 1px solid #f44336;
293
/// Background of a danger button in hover state
295
$dangerButtonHoverBg: #e53935;
297
/// Text color of a danger button in hover state
299
$dangerButtonTextHoverColor: #ffffff;
301
/// Border color of a danger button in hover state
303
$dangerButtonHoverBorderColor: #e53935;
305
/// Background of a danger button in pressed state
307
$dangerButtonActiveBg: #d32f2f;
309
/// Text color of a danger button in pressed state
311
$dangerButtonTextActiveColor: #ffffff;
313
/// Border color of a danger button in pressed state
315
$dangerButtonActiveBorderColor: #d32f2f;
317
/// Box shadow of a danger button in focused state
319
$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%);
321
/// Text color of a link button
323
$linkButtonColor:$primaryDarkerColor;
325
/// Text color of a link button in hover state
327
$linkButtonHoverColor:$primaryDarkerColor;
329
/// Text decoration of a link button in hover state
331
$linkButtonTextHoverDecoration:underline;
333
/// Box shadow of a link button in focused state
335
$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;
337
/// Background of a toggle button
339
$toggleButtonBg: #ffffff;
341
/// Border of a toggle button
343
$toggleButtonBorder: 1px solid #ced4da;
345
/// Text color of a toggle button
347
$toggleButtonTextColor: $textColor;
349
/// Icon color of a toggle button
351
$toggleButtonIconColor: $textSecondaryColor;
353
/// Background of a toggle button in hover state
355
$toggleButtonHoverBg: #e9ecef;
357
/// Border color of a toggle button in hover state
359
$toggleButtonHoverBorderColor: #ced4da;
361
/// Text color of a toggle button in hover state
363
$toggleButtonTextHoverColor: $textColor;
365
/// Icon color of a toggle button in hover state
367
$toggleButtonIconHoverColor: $textSecondaryColor;
369
/// Background of a toggle button in selected state
371
$toggleButtonActiveBg: $primaryColor;
373
/// Border color of a toggle button in selected state
375
$toggleButtonActiveBorderColor: $primaryColor;
377
/// Text color of a toggle button in selected state
379
$toggleButtonTextActiveColor: $primaryTextColor;
381
/// Icon color of a toggle button in selected state
383
$toggleButtonIconActiveColor: $primaryTextColor;
385
/// Hover background of a toggle button in selected state
387
$toggleButtonActiveHoverBg: $primaryDarkColor;
389
/// Hover border color of a toggle button in selected state
391
$toggleButtonActiveHoverBorderColor: $primaryDarkColor;
393
/// Hover text color of a toggle button in selected state
395
$toggleButtonTextActiveHoverColor: $primaryTextColor;
397
/// Hover icon of a toggle button in selected state
399
$toggleButtonIconActiveHoverColor: $primaryTextColor;
401
/// Width of the speed dial button
403
$speedDialButtonWidth: 4rem;
405
/// Height of the speed dial button
407
$speedDialButtonHeight: 4rem;
409
/// Icon size of the speed dial button
411
$speedDialButtonIconFontSize: 1.3rem;
413
/// Width of a speed dial item
415
$speedDialActionWidth: 3rem;
417
/// Height of a speed dial item
419
$speedDialActionHeight: 3rem;
421
/// Background color of a speed dial item
423
$speedDialActionBg: #ffffff;
425
/// Background color of a speed dial item in hover state
427
$speedDialActionHoverBg: #F5F5F5;
429
/// Text color of a speed dial item
431
$speedDialActionTextColor: #212121;
433
/// Text color of a speed dial item in hover state
435
$speedDialActionTextHoverColor: #212121;