mirror of https://github.com/juliancwirko/abc.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
10 KiB
256 lines
10 KiB
// 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: 0 !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: .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 { |
|
-webkit-appearance: none; |
|
-moz-appearance: none; |
|
border-radius:0; |
|
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-align: $button-font-align; |
|
text-decoration: none; |
|
} |
|
@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: $padding ($padding * 2) ($padding + rem-calc(1)) ($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-bottom: $padding + rem-calc(1); |
|
padding-top: $padding; |
|
} @else if $padding == false { |
|
padding-bottom:0; |
|
padding-top:0; |
|
} |
|
padding-left: 0; |
|
padding-right: 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 - Background color. We can set $bg:false for a transparent background. Default: $primary-color. |
|
// $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false |
|
// $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 { |
|
box-shadow: none; |
|
cursor: $button-disabled-cursor; |
|
opacity: $button-disabled-opacity; |
|
&: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-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-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); |
|
} |
|
} |
|
} |
|
}
|
|
|