diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_buttons.scss')
| -rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_buttons.scss | 260 |
1 files changed, 260 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_buttons.scss b/source/bower_components/foundation/scss/foundation/components/_buttons.scss new file mode 100644 index 0000000..148340b --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_buttons.scss @@ -0,0 +1,260 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; + +// +// @variables +// +$include-html-button-classes: $include-html-classes !default; + +// We use these to build padding for buttons. +$button-tny: rem-calc(10) !default; +$button-sml: rem-calc(14) !default; +$button-med: rem-calc(16) !default; +$button-lrg: rem-calc(18) !default; + +// We use this to control the display property. +$button-display: inline-block !default; +$button-margin-bottom: rem-calc(20) !default; + +// We use these to control button text styles. +$button-font-family: $body-font-family !default; +$button-font-color: $white !default; +$button-font-color-alt: $oil !default; +$button-font-tny: rem-calc(11) !default; +$button-font-sml: rem-calc(13) !default; +$button-font-med: rem-calc(16) !default; +$button-font-lrg: rem-calc(20) !default; +$button-font-weight: $font-weight-normal !default; +$button-font-align: center !default; + +// We use these to control various hover effects. +$button-function-factor: -20% !default; + +// We use these to control button border styles. +$button-border-width: 0px !default; +$button-border-style: solid !default; +$button-bg-color: $primary-color !default; +$button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default; +$button-border-color: $button-bg-hover !default; +$secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default; +$secondary-button-border-color: $secondary-button-bg-hover !default; +$success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default; +$success-button-border-color: $success-button-bg-hover !default; +$alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default; +$alert-button-border-color: $alert-button-bg-hover !default; +$warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default; +$warning-button-border-color: $warning-button-bg-hover !default; +$info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default; +$info-button-border-color: $info-button-bg-hover !default; + +// We use this to set the default radius used throughout the core. +$button-radius: $global-radius !default; +$button-round: $global-rounded !default; + +// We use this to set default opacity and cursor for disabled buttons. +$button-disabled-opacity: 0.7 !default; +$button-disabled-cursor: $cursor-default-value !default; + + +// +// @MIXIN +// +// We use this mixin to create a default button base. +// +// $style - Sets base styles. Can be set to false. Default: true. +// $display - Used to control display property. Default: $button-display || inline-block + +@mixin button-base($style:true, $display:$button-display) { + @if $style { + border-style: $button-border-style; + border-width: $button-border-width; + cursor: $cursor-pointer-value; + font-family: $button-font-family; + font-weight: $button-font-weight; + line-height: normal; + margin: 0 0 $button-margin-bottom; + position: relative; + text-decoration: none; + text-align: $button-font-align; + -webkit-appearance: none; + -webkit-border-radius:0; + } + @if $display { display: $display; } +} + +// @MIXIN +// +// We use this mixin to add button size styles +// +// $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12) +// $full-width - We can set $full-width:true to remove side padding extend width - Default: false + +@mixin button-size($padding:$button-med, $full-width:false) { + + // We control which padding styles come through, + // these can be turned off by setting $padding:false + @if $padding { + padding-top: $padding; + padding-#{$opposite-direction}: $padding * 2; + padding-bottom: $padding + rem-calc(1); + padding-#{$default-float}: $padding * 2; + + // We control the font-size based on mixin input. + @if $padding == $button-med { font-size: $button-font-med; } + @else if $padding == $button-tny { font-size: $button-font-tny; } + @else if $padding == $button-sml { font-size: $button-font-sml; } + @else if $padding == $button-lrg { font-size: $button-font-lrg; } + } + + // We can set $full-width:true to remove side padding extend width. + @if $full-width { + // We still need to check if $padding is set. + @if $padding { + padding-top: $padding; + padding-bottom: $padding + rem-calc(1); + } @else if $padding == false { + padding-top:0; + padding-bottom:0; + } + padding-right: 0; + padding-left: 0; + width: 100%; + } +} + +// @MIXIN +// +// we use this mixin to create the button hover and border colors + +// @MIXIN +// +// We use this mixin to add button color styles +// +// $bg - Primary color set in settings file. Default: $button-bg. +// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true +// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false +// $bg-hover - Button Hover Background Color. Default: $button-bg-hover +// $border-color - Button Border Color. Default: $button-border-color +@mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) { + + // We control which background styles are used, + // these can be removed by setting $bg:false + @if $bg { + + @if $bg-hover == null { + $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor)); + } + + @if $border-color == null { + $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor)); + } + + // This find the lightness percentage of the background color. + $bg-lightness: lightness($bg); + $bg-hover-lightness: lightness($bg-hover); + + background-color: $bg; + border-color: $border-color; + &:hover, + &:focus { background-color: $bg-hover; } + + // We control the text color for you based on the background color. + color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color); + + &:hover, + &:focus { + color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color); + } + } + + // We can set $disabled:true to create a disabled transparent button. + @if $disabled { + cursor: $button-disabled-cursor; + opacity: $button-disabled-opacity; + box-shadow: none; + &:hover, + &:focus { background-color: $bg; } + } + + // We can control how much button radius is used. + @if $radius == true { @include radius($button-radius); } + @else if $radius { @include radius($radius); } + +} + +// @MIXIN +// +// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin" +// +// $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12) +// $bg - Primary color set in settings file. Default: $button-bg. +// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false. +// $full-width - We can set $full-width:true to remove side padding extend width. Default:false. +// $disabled - We can set $disabled:true to create a disabled transparent button. Default:false. +// $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false. +// $is-prefix - Not used? Default:false. +// $bg-hover - Button Hover Color - Default null - see button-style mixin +// $border-color - Button Border Color - Default null - see button-style mixin +// $transition - We can control whether or not to include the background-color transition property - Default:true. +@mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) { + @include button-base; + @include button-size($padding, $full-width); + @include button-style($bg, $radius, $disabled, $bg-hover, $border-color); + + @if $transition { + @include single-transition(background-color); + } +} + + +@include exports("button") { + @if $include-html-button-classes { + + // Default styles applied outside of media query + button, .button { + @include button-base; + @include button-size; + @include button-style; + + @include single-transition(background-color); + + &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); } + &.success { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); } + &.alert { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); } + &.warning { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); } + &.info { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); } + + &.large { @include button-size($padding:$button-lrg); } + &.small { @include button-size($padding:$button-sml); } + &.tiny { @include button-size($padding:$button-tny); } + &.expand { @include button-size($padding:null,$full-width:true); } + + &.left-align { text-align: left; text-indent: rem-calc(12); } + &.right-align { text-align: right; padding-right: rem-calc(12); } + + &.radius { @include button-style($bg:false, $radius:true); } + &.round { @include button-style($bg:false, $radius:$button-round); } + + &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color); + &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); } + &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); } + &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); } + &.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); } + &.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); } + } + } + + //firefox 2px fix + button::-moz-focus-inner {border:0; padding:0;} + + @media #{$medium-up} { + button, .button { + @include button-base($style:false, $display:inline-block); + @include button-size($padding:false, $full-width:false); + } + } + } +} |