UNPKG

2.14 kBSCSSView Raw
1@if $enable-classes {
2
3/**
4 * Button Styles
5 */
6
7 // Button .secondary
8 button.secondary,
9 input.secondary[type="submit"],
10 input[type="reset"],
11 a.secondary[role="button"] {
12 background-color: var(--secondary);
13 color: var(--secondary-inverse);
14
15 &:hover,
16 &:active,
17 &:focus {
18 background-color: var(--secondary-hover);
19 }
20
21 &:focus {
22 box-shadow: 0 0 0 0.2rem var(--secondary-focus);
23 }
24 }
25
26
27 // Button .contrast
28 button.contrast,
29 input.contrast[type="submit"],
30 input.contrast[type="reset"],
31 a.contrast[role="button"] {
32 background-color: var(--contrast);
33 color: var(--contrast-inverse);
34
35 &:hover,
36 &:active,
37 &:focus {
38 background-color: var(--contrast-hover);
39 }
40
41 &:focus {
42 box-shadow: 0 0 0 0.2rem var(--contrast-focus);
43 }
44 }
45
46
47 // Button .outline
48 button.outline,
49 input.outline[type="submit"],
50 a.outline[role="button"] {
51 border: 1px solid var(--primary);
52 background-color: transparent;
53 color: var(--primary);
54
55 &:hover,
56 &:active,
57 &:focus {
58 border: 1px solid var(--primary-hover);
59 color: var(--primary-hover);
60 }
61 }
62
63
64 // Button .outline.secondary
65 button.outline.secondary,
66 input.outline.secondary[type="submit"],
67 input.outline[type="reset"],
68 a.outline.secondary[role="button"] {
69 border: 1px solid var(--secondary);
70 background-color: transparent;
71 color: var(--secondary);
72
73 &:hover,
74 &:active,
75 &:focus {
76 border: 1px solid var(--secondary-hover);
77 color: var(--secondary-hover);
78 }
79
80 &:focus {
81 box-shadow: 0 0 0 0.2rem var(--secondary-focus);
82 }
83 }
84
85
86 // Button .outline.contrast
87 button.outline.contrast,
88 input.outline.contrast[type="submit"],
89 input.outline.contrast[type="reset"],
90 a.outline.contrast[role="button"] {
91 border: 1px solid var(--contrast);
92 background-color: transparent;
93 color: var(--contrast);
94
95 &:hover,
96 &:active,
97 &:focus {
98 border: 1px solid var(--contrast-hover);
99 color: var(--contrast-hover);
100 }
101
102 &:focus {
103 box-shadow: 0 0 0 0.2rem var(--contrast-focus);
104 }
105 }
106}