blob: 2a7b816925f271bef930415102c77a6215512131 (
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
|
.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 {
fill: currentColor;
&:focus,
&:not(:disabled):not(.disabled):active:focus {
border-color: $white;
box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
}
}
.btn-secondary {
fill: currentColor;
&:focus,
&:not(:disabled):not(.disabled):active:focus {
border-color: $white;
box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
}
}
// 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;
}
|
