123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import "global";
- @import "buttons";
- //
- // Button Group Variables
- //
- $include-html-button-classes: $include-html-classes !default;
- // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
- $button-bar-margin-opposite: rem-calc(10) !default;
- $button-group-border-width: 1px !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;
- #{$default-float}: 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:false, $orientation:horizontal) {
- > button, .button {
- border-#{$default-float}: $button-group-border-width solid;
- border-color: rgba(255, 255, 255, 0.5);
- }
- &:first-child {
- button, .button {
- border-#{$default-float}: 0;
- }
- }
- // We use this to control the flow, or remove those styles completely.
- @if $float {
- margin: 0;
- float: $float;
- display: list-item;
- // Make sure the first child doesn't get the negative margin.
- &:first-child { margin-#{$default-float}: 0; }
- }
- @else {
- margin: 0 -2px;
- display: inline-block;
- }
- @if $orientation == vertical {
- display:block;
- margin:0;
- > button, .button {
- border-top: $button-group-border-width solid;
- border-color: rgba(255, 255, 255, 0.5);
- border-left-width: 0;
- margin:0;
- display: block;
- }
- > button {
- width: 100%;
- }
- &:first-child {
- button, .button {
- border-top: 0;
- }
- }
- }
- // We use these to control left and right radius on first/last buttons in the group.
- @if $radius == true {
- &,
- & > a,
- & > button,
- & > .button { @include radius(0); }
- &:first-child,
- &:first-child > a,
- &:first-child > button,
- &:first-child > .button {
- @if $orientation == vertical {
- @include side-radius(top, $button-radius);
- }
- @else {
- @include side-radius($default-float, $button-radius);
- }
- }
- &:last-child,
- &:last-child > a,
- &:last-child > button,
- &:last-child > .button {
- @if $orientation == vertical {
- @include side-radius(bottom, $button-radius);
- }
- @else {
- @include side-radius($opposite-direction, $button-radius);
- }
- }
- }
- @else if $radius {
- &,
- & > a,
- & > button,
- & > .button { @include radius(0); }
- &:first-child,
- &:first-child > a,
- &:first-child > button,
- &:first-child > .button {
- @if $orientation == vertical {
- @include side-radius(top, $radius);
- }
- @else {
- @include side-radius($default-float, $radius);
- }
- }
- &:last-child,
- &:last-child > a,
- &:last-child > button,
- &:last-child > .button {
- @if $orientation == vertical {
- @include side-radius(bottom, $radius);
- }
- @else {
- @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, .button { width: 100%; }
- }
- }
- @include exports("button-group") {
- @if $include-html-button-classes {
- .button-group { @include button-group-container;
- @for $i from 2 through 8 {
- &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
- }
-
- & > li { @include button-group-style(); }
- &.stack {
- & > li { @include button-group-style($orientation:vertical); float: none; }
- }
- &.stack-for-small {
- & > li {
- @include button-group-style($orientation:horizontal);
- @media #{$small-only} {
- @include button-group-style($orientation:vertical);
- }
- }
- }
- &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
- &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
- &.radius.stack-for-small > * {
- @media #{$medium-up} {
- @include button-group-style($radius:$button-radius, $orientation:horizontal);
- }
- @media #{$small-only} {
- @include button-group-style($radius:$button-radius, $orientation:vertical);
- }
- }
- &.round > * { @include button-group-style($radius:$button-round, $float:null); }
- &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
- &.round.stack-for-small > * {
- @media #{$medium-up} {
- @include button-group-style($radius:$button-round, $orientation:horizontal);
- }
- @media #{$small-only} {
- @include button-group-style($radius:$button-med, $orientation:vertical);
- }
- }
- }
- .button-bar {
- @include clearfix;
- .button-group { @include button-group-container($styles:false, $float:true); }
- }
- }
- }
|