76 lines
2.3 KiB
SCSS
76 lines
2.3 KiB
SCSS
|
//
|
||
|
|
// Button Group Variables
|
||
|
|
//
|
||
|
|
|
||
|
|
// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
|
||
|
|
$button-bar-margin-opposite: emCalc(10px) !default;
|
||
|
|
|
||
|
|
//
|
||
|
|
// Button Group Mixins
|
||
|
|
//
|
||
|
|
|
||
|
|
// We use this to add styles for a button group container
|
||
|
|
@mixin button-group-container($styles:true, $float:false) {
|
||
|
|
@if $styles {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
@include clearfix();
|
||
|
|
}
|
||
|
|
@if $float {
|
||
|
|
float: #{$default-float};
|
||
|
|
margin-#{$opposite-direction}: $button-bar-margin-opposite;
|
||
|
|
& div { overflow: hidden; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this to control styles for button groups
|
||
|
|
@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
|
||
|
|
|
||
|
|
// We use this to control the flow, or remove those styles completely.
|
||
|
|
@if $float {
|
||
|
|
margin: 0 0 0 -1px;
|
||
|
|
float: $float;
|
||
|
|
// Make sure the first child doesn't get the negative margin.
|
||
|
|
&:first-child { margin-#{$default-float}: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use these to control left and right radius on first/last buttons in the group.
|
||
|
|
@if $radius == true {
|
||
|
|
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
|
||
|
|
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $button-radius); }
|
||
|
|
}
|
||
|
|
@else if $radius {
|
||
|
|
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
|
||
|
|
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $radius); }
|
||
|
|
}
|
||
|
|
|
||
|
|
// We use this to make the buttons even width across their container
|
||
|
|
@if $even {
|
||
|
|
width: percentage((100/$even) / 100);
|
||
|
|
.button { width: 100%; }
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// Only include these CSS classes if $include-html-classes: true
|
||
|
|
@if $include-html-button-classes {
|
||
|
|
|
||
|
|
/* Button Groups */
|
||
|
|
.button-group { @include button-group-container;
|
||
|
|
|
||
|
|
&> * { @include button-group-style(); }
|
||
|
|
|
||
|
|
&.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
|
||
|
|
&.round > * { @include button-group-style($radius:$button-round, $float:null); }
|
||
|
|
|
||
|
|
@for $i from 2 through 8 {
|
||
|
|
&.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-bar {
|
||
|
|
@include clearfix;
|
||
|
|
.button-group { @include button-group-container($styles:false,$float:true); }
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|