blob: 210aef9005dd20f32bda79f9897568ea7b3d0f06 (
plain)
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
|
.btn {
// padding-top: $spacer / 2;
// padding-right: $spacer;
// padding-bottom: $spacer / 2;
// padding-left: $spacer;
display: inline-flex;
align-items: center;
justify-content: space-around;
svg {
// margin-right: $spacer / 4;
}
&:disabled {
color: gray("600");
fill: currentColor;
box-shadow: none !important;
&:not(.btn-link) {
border-color: gray("400");
background-color: gray("400");
}
}
}
.btn-primary {
background-color: $button-colour;
border-radius: 8px;
border: none;
font-family: Inter;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 20px;
&:hover {
background-color: $button-colour-hover;
}
&:not(:disabled):not(.disabled):active:focus,
&:focus-visible {
border: none;
box-shadow: none;
background-color: $button-colour-click;
}
&:focus {
border: none;
box-shadow: none;
background-color: $button-colour;
}
&:active {
border: none;
box-shadow: none;
background-color: $button-colour;
}
}
.btn-secondary {
fill: currentColor;
&:focus,
&:not(:disabled):not(.disabled):active:focus {
border-color: $white;
box-shadow: inset 0 0 0 2px theme-color('secondary');
}
}
// Global style for all button link
.btn-link {
font-weight: $headings-font-weight;
fill: theme-color("primary");
text-decoration: none !important;
&:hover {
background-color: gray("200");
color: theme-color("primary");
}
&:active {
background-color: gray("300");
}
&:focus {
// box-shadow: inset 0 0 0 2px theme-color("primary");
// color: theme-color("primary");
// outline: none;
}
&:disabled {
box-shadow: $btn-focus-box-shadow;
}
}
// Icon only buttons
.btn-icon-only svg {
margin-right: 0;
}
// Datepicker, clear search and Password toggle buttons
.input-action-btn,
.btn-datepicker {
position: absolute;
right: 0;
top: 0;
z-index: $zindex-dropdown + 1;
}
// Contain input buttons within input
.btn-datepicker .dropdown-toggle,
.input-action-btn {
padding: 7px;
margin: 1px;
}
|
