Permalink
Fetching contributors…
Cannot retrieve contributors at this time
194 lines (157 sloc) 6.34 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("button-group") {
#{$buttonGroup-class} {
@include reset-inline-block;
@include reset-list;
@include clear-fix;
white-space: nowrap;
> li,
> #{$button-class} {
float: $align-direction;
border-radius: 0;
&:hover,
&.is-active { z-index: 1; }
}
> li {
position: relative;
list-style: none;
#{$button-class} {
display: block;
border-radius: 0;
}
}
//----- Effects -----//
&#{$shape-round-class} {
@include button-group-first-child {
border-top-#{$align-direction}-radius: $round;
border-bottom-#{$align-direction}-radius: $round;
}
@include button-group-last-child {
border-top-#{$align-opposite-direction}-radius: $round;
border-bottom-#{$align-opposite-direction}-radius: $round;
}
}
@if index($buttonGroup-effects, "pill") {
&#{$shape-pill-class} {
border-radius: $pill;
@include button-group-first-child {
border-top-#{$align-direction}-radius: $pill;
border-bottom-#{$align-direction}-radius: $pill;
}
@include button-group-last-child {
border-top-#{$align-opposite-direction}-radius: $pill;
border-bottom-#{$align-opposite-direction}-radius: $pill;
}
}
}
@if index($buttonGroup-effects, "skew") {
&#{$shape-skew-class} {
border-top-#{$align-direction}-radius: $skew;
border-top-#{$align-opposite-direction}-radius: $skew;
border-bottom-#{$align-direction}-radius: 0;
border-bottom-#{$align-opposite-direction}-radius: 0;
@include button-group-first-child {
border-top-#{$align-direction}-radius: $skew;
border-bottom-#{$align-direction}-radius: 0;
}
@include button-group-last-child {
border-top-#{$align-opposite-direction}-radius: $skew;
border-bottom-#{$align-opposite-direction}-radius: 0;
}
}
}
}
// Space out groups
#{$buttonGroup-class} + #{$buttonGroup-class} {
margin-#{$align-direction}: $margin;
}
//-------------------- Modifiers --------------------//
@if index($buttonGroup-modifiers, "vertical") {
#{$buttonGroup-class-modifier-vertical} {
vertical-align: top;
> li,
> #{$button-class} {
float: none;
display: block;
width: 100%;
max-width: 100%;
&:hover { z-index: 1; }
}
&#{$shape-round-class},
&#{$shape-pill-class},
&#{$shape-skew-class},
&#{$shape-skew-class}-reverse {
#{$button-class} { border-radius: 0; }
}
//----- Effects -----//
&#{$shape-round-class} {
#{$button-class}:first-child,
#{$button-class}:last-child { border-radius: 0; }
@include button-group-first-child {
border-top-#{$align-direction}-radius: $round;
border-top-#{$align-opposite-direction}-radius: $round;
}
@include button-group-last-child {
border-bottom-#{$align-direction}-radius: $round;
border-bottom-#{$align-opposite-direction}-radius: $round;
}
}
@if index($buttonGroup-effects, "pill") {
&#{$shape-pill-class} {
border-radius: $pill;
@include button-group-first-child {
border-top-#{$align-direction}-radius: $pill;
border-top-#{$align-opposite-direction}-radius: $pill;
border-bottom-#{$align-direction}-radius: 0;
border-bottom-#{$align-opposite-direction}-radius: 0;
}
@include button-group-last-child {
border-top-#{$align-direction}-radius: 0;
border-top-#{$align-opposite-direction}-radius: 0;
border-bottom-#{$align-direction}-radius: $pill;
border-bottom-#{$align-opposite-direction}-radius: $pill;
}
}
}
@if index($buttonGroup-effects, "skew") {
&#{$shape-skew-class} {
border-top-#{$align-direction}-radius: $skew-y 1.5rem;
border-bottom-#{$align-direction}-radius: $skew-y 1.5rem;
@include button-group-first-child {
border-top-#{$align-direction}-radius: $skew-reverse;
}
@include button-group-last-child {
border-bottom-#{$align-direction}-radius: $skew-reverse;
border-top-#{$align-opposite-direction}-radius: 0;
}
}
&#{$shape-skew-class}-reverse {
border-top-#{$align-opposite-direction}-radius: $skew-y 1.25rem;
border-bottom-#{$align-opposite-direction}-radius: $skew-y 1.25rem;
@include button-group-first-child {
border-top-#{$align-opposite-direction}-radius: $skew-reverse;
}
@include button-group-last-child {
border-bottom-#{$align-opposite-direction}-radius: $skew-reverse;
}
}
}
}
}
@if index($buttonGroup-modifiers, "justified") {
#{$buttonGroup-class-modifier-justified} {
display: table;
width: 100%;
> li,
> #{$button-class} {
float: none;
display: table-cell;
}
}
}
}