-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbutton-groups.less
More file actions
executable file
·101 lines (86 loc) · 2.12 KB
/
Copy pathbutton-groups.less
File metadata and controls
executable file
·101 lines (86 loc) · 2.12 KB
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
.btn-group {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
}
&.btn-group-block {
width: 100%;
display: block;
}
.btn + .btn,
.btn-group + .btn {
border-left: 0px;
}
.btn + .btn-group,
.btn-group + .btn-group {
margin-left: -1px;
}
> .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
> .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
> .btn:last-child:not(:first-child),
> .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Justified button groups
&.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
> .btn,
> .btn-group {
text-align: center;
float: none;
display: table-cell;
width: 1%;
}
> .btn-group .btn {
width: 100%;
}
> .btn-group .dropdown-menu {
left: auto;
}
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
// Offset the first child's margin
margin-left: -5px;
&:extend(.clearfix all);
.btn,
.btn-group,
.input-group {
float: left;
}
> .btn,
> .btn-group,
> .input-group {
margin-left: 5px;
}
> .btn-toolbar {
float: left;
margin: 0px;
}
&.prepend {
margin-bottom: @gb-margin-base;
}
}