1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/button-groups.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,227 @@
1.4 +//
1.5 +// Button groups
1.6 +// --------------------------------------------------
1.7 +
1.8 +// Make the div behave like a button
1.9 +.btn-group,
1.10 +.btn-group-vertical {
1.11 + position: relative;
1.12 + display: inline-block;
1.13 + vertical-align: middle; // match .btn alignment given font-size hack above
1.14 + > .btn {
1.15 + position: relative;
1.16 + float: left;
1.17 + // Bring the "active" button to the front
1.18 + &:hover,
1.19 + &:focus,
1.20 + &:active,
1.21 + &.active {
1.22 + z-index: 2;
1.23 + }
1.24 + &:focus {
1.25 + // Remove focus outline when dropdown JS adds it after closing the menu
1.26 + outline: none;
1.27 + }
1.28 + }
1.29 +}
1.30 +
1.31 +// Prevent double borders when buttons are next to each other
1.32 +.btn-group {
1.33 + .btn + .btn,
1.34 + .btn + .btn-group,
1.35 + .btn-group + .btn,
1.36 + .btn-group + .btn-group {
1.37 + margin-left: -1px;
1.38 + }
1.39 +}
1.40 +
1.41 +// Optional: Group multiple button groups together for a toolbar
1.42 +.btn-toolbar {
1.43 + .clearfix();
1.44 +
1.45 + .btn-group {
1.46 + float: left;
1.47 + }
1.48 + // Space out series of button groups
1.49 + > .btn,
1.50 + > .btn-group {
1.51 + + .btn,
1.52 + + .btn-group {
1.53 + margin-left: 5px;
1.54 + }
1.55 + }
1.56 +}
1.57 +
1.58 +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
1.59 + border-radius: 0;
1.60 +}
1.61 +
1.62 +// 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
1.63 +.btn-group > .btn:first-child {
1.64 + margin-left: 0;
1.65 + &:not(:last-child):not(.dropdown-toggle) {
1.66 + .border-right-radius(0);
1.67 + }
1.68 +}
1.69 +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
1.70 +.btn-group > .btn:last-child:not(:first-child),
1.71 +.btn-group > .dropdown-toggle:not(:first-child) {
1.72 + .border-left-radius(0);
1.73 +}
1.74 +
1.75 +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
1.76 +.btn-group > .btn-group {
1.77 + float: left;
1.78 +}
1.79 +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
1.80 + border-radius: 0;
1.81 +}
1.82 +.btn-group > .btn-group:first-child {
1.83 + > .btn:last-child,
1.84 + > .dropdown-toggle {
1.85 + .border-right-radius(0);
1.86 + }
1.87 +}
1.88 +.btn-group > .btn-group:last-child > .btn:first-child {
1.89 + .border-left-radius(0);
1.90 +}
1.91 +
1.92 +// On active and open, don't show outline
1.93 +.btn-group .dropdown-toggle:active,
1.94 +.btn-group.open .dropdown-toggle {
1.95 + outline: 0;
1.96 +}
1.97 +
1.98 +
1.99 +// Sizing
1.100 +//
1.101 +// Remix the default button sizing classes into new ones for easier manipulation.
1.102 +
1.103 +.btn-group-xs > .btn { .btn-xs(); }
1.104 +.btn-group-sm > .btn { .btn-sm(); }
1.105 +.btn-group-lg > .btn { .btn-lg(); }
1.106 +
1.107 +
1.108 +// Split button dropdowns
1.109 +// ----------------------
1.110 +
1.111 +// Give the line between buttons some depth
1.112 +.btn-group > .btn + .dropdown-toggle {
1.113 + padding-left: 8px;
1.114 + padding-right: 8px;
1.115 +}
1.116 +.btn-group > .btn-lg + .dropdown-toggle {
1.117 + padding-left: 12px;
1.118 + padding-right: 12px;
1.119 +}
1.120 +
1.121 +// The clickable button for toggling the menu
1.122 +// Remove the gradient and set the same inset shadow as the :active state
1.123 +.btn-group.open .dropdown-toggle {
1.124 + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
1.125 +
1.126 + // Show no shadow for `.btn-link` since it has no other button styles.
1.127 + &.btn-link {
1.128 + .box-shadow(none);
1.129 + }
1.130 +}
1.131 +
1.132 +
1.133 +// Reposition the caret
1.134 +.btn .caret {
1.135 + margin-left: 0;
1.136 +}
1.137 +// Carets in other button sizes
1.138 +.btn-lg .caret {
1.139 + border-width: @caret-width-large @caret-width-large 0;
1.140 + border-bottom-width: 0;
1.141 +}
1.142 +// Upside down carets for .dropup
1.143 +.dropup .btn-lg .caret {
1.144 + border-width: 0 @caret-width-large @caret-width-large;
1.145 +}
1.146 +
1.147 +
1.148 +// Vertical button groups
1.149 +// ----------------------
1.150 +
1.151 +.btn-group-vertical {
1.152 + > .btn,
1.153 + > .btn-group,
1.154 + > .btn-group > .btn {
1.155 + display: block;
1.156 + float: none;
1.157 + width: 100%;
1.158 + max-width: 100%;
1.159 + }
1.160 +
1.161 + // Clear floats so dropdown menus can be properly placed
1.162 + > .btn-group {
1.163 + .clearfix();
1.164 + > .btn {
1.165 + float: none;
1.166 + }
1.167 + }
1.168 +
1.169 + > .btn + .btn,
1.170 + > .btn + .btn-group,
1.171 + > .btn-group + .btn,
1.172 + > .btn-group + .btn-group {
1.173 + margin-top: -1px;
1.174 + margin-left: 0;
1.175 + }
1.176 +}
1.177 +
1.178 +.btn-group-vertical > .btn {
1.179 + &:not(:first-child):not(:last-child) {
1.180 + border-radius: 0;
1.181 + }
1.182 + &:first-child:not(:last-child) {
1.183 + border-top-right-radius: @border-radius-base;
1.184 + .border-bottom-radius(0);
1.185 + }
1.186 + &:last-child:not(:first-child) {
1.187 + border-bottom-left-radius: @border-radius-base;
1.188 + .border-top-radius(0);
1.189 + }
1.190 +}
1.191 +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
1.192 + border-radius: 0;
1.193 +}
1.194 +.btn-group-vertical > .btn-group:first-child {
1.195 + > .btn:last-child,
1.196 + > .dropdown-toggle {
1.197 + .border-bottom-radius(0);
1.198 + }
1.199 +}
1.200 +.btn-group-vertical > .btn-group:last-child > .btn:first-child {
1.201 + .border-top-radius(0);
1.202 +}
1.203 +
1.204 +
1.205 +
1.206 +// Justified button groups
1.207 +// ----------------------
1.208 +
1.209 +.btn-group-justified {
1.210 + display: table;
1.211 + width: 100%;
1.212 + table-layout: fixed;
1.213 + border-collapse: separate;
1.214 + > .btn,
1.215 + > .btn-group {
1.216 + float: none;
1.217 + display: table-cell;
1.218 + width: 1%;
1.219 + }
1.220 + > .btn-group .btn {
1.221 + width: 100%;
1.222 + }
1.223 +}
1.224 +
1.225 +
1.226 +// Checkbox and radio options
1.227 +[data-toggle="buttons"] > .btn > input[type="radio"],
1.228 +[data-toggle="buttons"] > .btn > input[type="checkbox"] {
1.229 + display: none;
1.230 +}