talos

1
// stylelint-disable selector-no-qualifying-type
2

3
// Make the div behave like a button
4
.btn-group,
5
.btn-group-vertical {
6
  position: relative;
7
  display: inline-flex;
8
  vertical-align: middle; // match .btn alignment given font-size hack above
9

10
  > .btn {
11
    position: relative;
12
    flex: 1 1 auto;
13

14
    // Bring the hover, focused, and "active" buttons to the front to overlay
15
    // the borders properly
16
    @include hover() {
17
      z-index: 1;
18
    }
19
    &:focus,
20
    &:active,
21
    &.active {
22
      z-index: 1;
23
    }
24
  }
25
}
26

27
// Optional: Group multiple button groups together for a toolbar
28
.btn-toolbar {
29
  display: flex;
30
  flex-wrap: wrap;
31
  justify-content: flex-start;
32

33
  .input-group {
34
    width: auto;
35
  }
36
}
37

38
.btn-group {
39
  // Prevent double borders when buttons are next to each other
40
  > .btn:not(:first-child),
41
  > .btn-group:not(:first-child) {
42
    margin-left: -$btn-border-width;
43
  }
44

45
  // Reset rounded corners
46
  > .btn:not(:last-child):not(.dropdown-toggle),
47
  > .btn-group:not(:last-child) > .btn {
48
    @include border-right-radius(0);
49
  }
50

51
  > .btn:not(:first-child),
52
  > .btn-group:not(:first-child) > .btn {
53
    @include border-left-radius(0);
54
  }
55
}
56

57
// Sizing
58
//
59
// Remix the default button sizing classes into new ones for easier manipulation.
60

61
.btn-group-sm > .btn { @extend .btn-sm; }
62
.btn-group-lg > .btn { @extend .btn-lg; }
63

64

65
//
66
// Split button dropdowns
67
//
68

69
.dropdown-toggle-split {
70
  padding-right: $btn-padding-x * .75;
71
  padding-left: $btn-padding-x * .75;
72

73
  &::after,
74
  .dropup &::after,
75
  .dropright &::after {
76
    margin-left: 0;
77
  }
78

79
  .dropleft &::before {
80
    margin-right: 0;
81
  }
82
}
83

84
.btn-sm + .dropdown-toggle-split {
85
  padding-right: $btn-padding-x-sm * .75;
86
  padding-left: $btn-padding-x-sm * .75;
87
}
88

89
.btn-lg + .dropdown-toggle-split {
90
  padding-right: $btn-padding-x-lg * .75;
91
  padding-left: $btn-padding-x-lg * .75;
92
}
93

94

95
// The clickable button for toggling the menu
96
// Set the same inset shadow as the :active state
97
.btn-group.show .dropdown-toggle {
98
  @include box-shadow($btn-active-box-shadow);
99

100
  // Show no shadow for `.btn-link` since it has no other button styles.
101
  &.btn-link {
102
    @include box-shadow(none);
103
  }
104
}
105

106

107
//
108
// Vertical button groups
109
//
110

111
.btn-group-vertical {
112
  flex-direction: column;
113
  align-items: flex-start;
114
  justify-content: center;
115

116
  > .btn,
117
  > .btn-group {
118
    width: 100%;
119
  }
120

121
  > .btn:not(:first-child),
122
  > .btn-group:not(:first-child) {
123
    margin-top: -$btn-border-width;
124
  }
125

126
  // Reset rounded corners
127
  > .btn:not(:last-child):not(.dropdown-toggle),
128
  > .btn-group:not(:last-child) > .btn {
129
    @include border-bottom-radius(0);
130
  }
131

132
  > .btn:not(:first-child),
133
  > .btn-group:not(:first-child) > .btn {
134
    @include border-top-radius(0);
135
  }
136
}
137

138

139
// Checkbox and radio options
140
//
141
// In order to support the browser's form validation feedback, powered by the
142
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
143
// `display: none;` or `visibility: hidden;` as that also hides the popover.
144
// Simply visually hiding the inputs via `opacity` would leave them clickable in
145
// certain cases which is prevented by using `clip` and `pointer-events`.
146
// This way, we ensure a DOM element is visible to position the popover from.
147
//
148
// See https://github.com/twbs/bootstrap/pull/12794 and
149
// https://github.com/twbs/bootstrap/pull/14559 for more information.
150

151
.btn-group-toggle {
152
  > .btn,
153
  > .btn-group > .btn {
154
    margin-bottom: 0; // Override default `<label>` value
155

156
    input[type="radio"],
157
    input[type="checkbox"] {
158
      position: absolute;
159
      clip: rect(0, 0, 0, 0);
160
      pointer-events: none;
161
    }
162
  }
163
}
164