This repository has been archived by the owner on Nov 27, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
_variables.scss
89 lines (70 loc) · 2.96 KB
/
_variables.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// Optionally include the different type of button css
$include-icon-text-btn: true !default;
$include-flat-btn: true !default;
$include-icon-btn: true !default;
$include-floating-box: true !default;
$include-help-text: $include-floating-box !default;
$include-hamburger-btn: true !default;
$include-floating-btn: true !default;
$include-ripple-btn: true !default;
$react-buttons-font: 'Roboto', sans-serif !default;
$button-transition-time: .15s !default;
$icon-text-btn-margin: 0.5em !default;
$icon-btn-padding: .5em !default;
$icon-btn-font-size: 24px !default;
$btn-text-color: #ecf0f1 !default; // white
$btn-default-color: #3498db !default; // blue
$btn-default-darker-color: #2980b9 !default; // darker blue
$btn-primary-color: #1abc9c !default; // green
$btn-primary-darker-color: #16a085 !default; // darker green
$btn-error-color: #e74c3c !default; // red
$btn-error-darker-color: #c0392b !default; // darker red
// Floating box
$floating-box-z-index: 8 !default;
$floating-box-arrow-size: 8px !default;
$floating-box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .29) !default;
$floating-box-top-offset: 100% !default;
$floating-box-right-offset: 100% !default;
$floating-box-bottom-offset: 100% !default;
$floating-box-left-offset: 100% !default;
$floating-box-padding: .5em !default;
// Help Text on buttons
$help-text-font: $react-buttons-font !default;
$help-text-font-size: .95rem !default;
$help-text-color: #ecf0f1 !default;
$help-text-background-color: #34495e !default;
$help-text-inverse-color: #000 !default;
$help-text-inverse-background-color: #fff !default;
// Floating buttons
$floating-btn-z-index: $floating-box-z-index - 1 !default;
$floating-btn-right: 1em !default;
$floating-btn-bottom: 1em !default;
$floating-btn-border-radius: 50% !default;
$floating-btn-font-size: 2.5rem !default;
$floating-btn-size: $floating-btn-font-size * 1.75 !default;
$floating-btn-box-shadow: 0 0 4px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .66) !default;
$floating-btn-classes: (
('default', $btn-text-color, $btn-default-color),
('primary', $btn-text-color, $btn-primary-color),
('error', $btn-text-color, $btn-error-color),
) !default;
// Flat buttons
$flat-btn-font: $react-buttons-font !default;
$flat-btn-padding: 1em 1.5em !default;
$flat-btn-border-size: 2px !default;
$flat-btn-active-offset: 1px !default;
$flat-btn-classes: (
('default', $btn-default-color, $btn-text-color, $btn-default-darker-color),
('primary', $btn-primary-color, $btn-text-color, $btn-primary-darker-color),
('error', $btn-error-color, $btn-text-color, $btn-error-darker-color),
) !default;
// Hamburger Button
$hamburger-btn-line-color: #000 !default;
$hamburger-btn-line-height: 2px !default;
$hamburger-btn-size-scale: 6px !default;
$hamburger-btn-line-scale: 0.5px !default;
$hamburger-btn-sizes: 'sm', 'md', 'lg', 'xl' !default;
// Ripple Button
$ripple-effect-duration: .3s !default;
$ripple-effect-bg: rgba(255, 255, 255, 0.3) !default;
$ripple-effect-final-scale: 2.5 !default;