This repository has been archived by the owner on Sep 26, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
button-groups.styl
147 lines (109 loc) · 3.28 KB
/
button-groups.styl
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
// BUTTON GROUPS
// -------------
// Make the div behave like a button
.btn-group
position: relative
clearfix() // clears the floated buttons
ie7-restore-left-whitespace()
// Space out series of button groups
.btn-group + .btn-group
margin-left: 5px
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar
margin-top: ($baseLineHeight / 2)
margin-bottom: ($baseLineHeight / 2)
.btn-group
display: inline-block
ie7-inline-block()
// Float them, remove border radius, then re-add to first and last elements
.btn-group .btn
position: relative
float: left
margin-left: -1px
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-group .btn:first-child
margin-left: 0
-webkit-border-top-left-radius: 4px
-moz-border-radius-topleft: 4px
border-top-left-radius: 4px
-webkit-border-bottom-left-radius: 4px
-moz-border-radius-bottomleft: 4px
border-bottom-left-radius: 4px
.btn-group .btn:last-child,
.btn-group .dropdown-toggle
-webkit-border-top-right-radius: 4px
-moz-border-radius-topright: 4px
border-top-right-radius: 4px
-webkit-border-bottom-right-radius: 4px
-moz-border-radius-bottomright: 4px
border-bottom-right-radius: 4px
// Reset corners for large buttons
.btn-group .btn.large:first-child
margin-left: 0
-webkit-border-top-left-radius: 6px
-moz-border-radius-topleft: 6px
border-top-left-radius: 6px
-webkit-border-bottom-left-radius: 6px
-moz-border-radius-bottomleft: 6px
border-bottom-left-radius: 6px
.btn-group .btn.large:last-child,
.btn-group .large.dropdown-toggle
-webkit-border-top-right-radius: 6px
-moz-border-radius-topright: 6px
border-top-right-radius: 6px
-webkit-border-bottom-right-radius: 6px
-moz-border-radius-bottomright: 6px
border-bottom-right-radius: 6px
// On hover/focus/active, bring the proper btn to front
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active,
.btn-group .btn.active
z-index: 2
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle
outline: 0
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group .dropdown-toggle
padding-left: 8px
padding-right: 8px
$shadow = inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)
box-shadow($shadow)
*padding-top: 5px
*padding-bottom: 5px
.btn-group.open
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
*z-index: $zindexDropdown
// Reposition menu on open and round all corners
.dropdown-menu
display: block
margin-top: 1px
border-radius(5px)
.dropdown-toggle
background-image: none
$shadow = inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)
box-shadow($shadow)
// Reposition the caret
.btn .caret
margin-top: 7px
margin-left: 0
.btn:hover .caret,
.open.btn-group .caret
opacity(1)
// Account for other colors
.btn-primary,
.btn-danger,
.btn-info,
.btn-success
.btn-inverse
.caret
border-top-color: $white
opacity(.75)
// Small button dropdowns
.btn-small .caret
margin-top: 4px