1@import 'bootstrap/dist/css/bootstrap.css';
2
3.btn {
4  padding-top: $spacer / 2;
5  padding-right: $spacer;
6  padding-bottom: $spacer / 2;
7  padding-left: $spacer;
8  display: inline-flex;
9  align-items: center;
10  justify-content: space-around;
11  svg {
12    margin-right: $spacer / 4;
13  }
14  &:disabled {
15    color: gray("600");
16    fill: currentColor;
17    box-shadow: none !important;
18    &:not(.btn-link) {
19      border-color: gray("400");
20      background-color: gray("400");
21    }
22  }
23}
24
25.btn-primary {
26  fill: currentColor;
27  &:focus,
28  &:not(:disabled):not(.disabled):active:focus {
29    border-color: $white;
30    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
31  }
32}
33
34.btn-secondary {
35  fill: currentColor;
36  &:focus,
37  &:not(:disabled):not(.disabled):active:focus {
38    border-color: $white;
39    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
40  }
41}
42
43// Global style for all button link
44.btn-link {
45  font-weight: $headings-font-weight;
46  fill: theme-color("primary");
47  text-decoration: none !important;
48  &:hover {
49    background-color: gray("200");
50    color: theme-color("primary");
51  }
52  &:active {
53    background-color: gray("300");
54  }
55  &:focus {
56    box-shadow: inset 0 0 0 2px theme-color("primary");
57    color: theme-color("primary");
58    outline: none;
59  }
60  &:disabled {
61    box-shadow: $btn-focus-box-shadow;
62  }
63}
64
65// Icon only buttons
66.btn-icon-only svg {
67  margin-right: 0;
68}
69
70// Datepicker, clear search and Password toggle buttons
71.input-action-btn,
72.btn-datepicker {
73  position: absolute;
74  right: 0;
75  top: 0;
76  //z-index: $zindex-dropdown + 1;
77}
78
79// Contain input buttons within input
80.btn-datepicker .dropdown-toggle,
81.input-action-btn {
82  padding: 7px;
83  margin: 1px;
84}