-
Notifications
You must be signed in to change notification settings - Fork 6
/
_component.buttons.scss
126 lines (108 loc) · 2.79 KB
/
_component.buttons.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// Variant constructor
@mixin button-variant($state) {
background-color: color($state);
color: color($state, alt);
&:hover {
background-color: darken(color($state), 10);
color: color($state, alt);
}
&:disabled,
&.disabled,
&.is-disabled {
color: color($state, alt);
}
&.btn--naked {
color: color($state, dark);
}
}
// Button Constructor
%btn {
@include button-variant('base');
cursor: pointer;
display: inline-block;
font-family: $font-family-base;
font-size: $font-size-base;
line-height: normal;
padding: $padding-large-vertical $padding-large-vertical ($padding-large-vertical - 1);
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
// Base buttons
.btn {
@extend %btn;
border: 0;
&:focus,
&:focus:hover {
@include pulsar-button-focused;
}
&:disabled,
&.disabled,
&.is-disabled {
opacity: .5;
pointer-events: none;
}
.icon,
[class*=icon-] {
font-size: 14px;
}
}
// State variations
@each $state, $state-color, $state-color-alt in $state-colors {
@if $state != 'base' {
.btn--#{'' + $state} {
@include button-variant($state);
}
}
}
// Outline button styles
.btn--outline {
background: none;
border: 1px solid var(--color-base-alt);
color: var(--color-base-alt);
padding-bottom: $padding-large-vertical - 2;
padding-top: $padding-large-vertical - 1;
// Double chain focus states to stop outline state variation overriding background colour
&.btn--outline:focus,
&.btn--outline:hover:focus {
@include pulsar-button-focused;
border-color: var(--color-black);
box-shadow: 0 0 0 1px var(--color-black);
}
@each $state, $state-color, $state-color-alt in $state-colors {
@if $state != 'base' {
&.btn--#{'' + $state} {
border-color: $state-color;
color: color($state, dark);
&:hover {
background-color: $state-color;
color: $state-color-alt;
}
&:disabled,
&.disabled,
&.is-disabled {
color: color($state, dark);
}
}
}
}
}
// Naked button styles
.btn--naked {
background: none;
border: 0;
&:hover {
background: none;
}
}
// Small buttons
.btn--small {
font-size: $font-size-medium;
padding: $padding-small-vertical $padding-small-vertical ($padding-small-vertical - 1);
&.btn--outline {
padding: ($padding-small-vertical - 1) $padding-small-vertical ($padding-small-vertical - 2);
}
}