javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-04-02 17:03:38 -05:00
parent f1bfac8ae7
commit b5b80b4116
1 changed files with 73 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/button/extensions/ios.scss
View File

@ -1,13 +1,11 @@
// iOS Buttons // iOS Button Variables
// -------------------------------------------------- // --------------------------------------------------
$button-ios-font-size: 1.4rem !default; $button-ios-font-size: 1.4rem !default;
$button-ios-padding: 0 10px !default; $button-ios-padding: 0 10px !default;
$button-ios-height: 29px !default; $button-ios-height: 29px !default;
$button-ios-text-color: #007aff !default;
$button-ios-border-width: 1px !default; $button-ios-border-width: 1px !default;
$button-ios-border-color: #007aff !default;
$button-ios-border-radius: 5px !default; $button-ios-border-radius: 5px !default;
$button-ios-large-font-size: 2rem !default; $button-ios-large-font-size: 2rem !default;
@ -21,18 +19,57 @@ $button-ios-small-padding: 4px !default;
$button-ios-small-icon-size: 16px !default; $button-ios-small-icon-size: 16px !default;
// iOS Button Mixins
// --------------------------------------------------
@mixin button-default($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
background-color: $bg-color;
border-color: $border-color;
color: $color;
&:hover,
&.hover {
opacity: 0.8;
color: $color;
text-decoration: none;
}
&.activated {
border-color: darken($border-color, 10%);
background-color: $active-bg-color;
}
}
@mixin button-clear($color) {
&.button-clear {
border-color: transparent;
background: none;
color: $color;
}
}
@mixin button-outline($color) {
&.button-outline {
border-color: $color;
background: transparent;
color: $color;
&.activated {
background-color: $color;
color: #fff;
}
}
}
// iOS Button
// --------------------------------------------------
.button-ios { .button-ios {
padding: $button-ios-padding; padding: $button-ios-padding;
height: $button-ios-height; height: $button-ios-height;
font-size: $button-ios-font-size; font-size: $button-ios-font-size;
border: $button-ios-border-width solid $button-ios-border-color;
border-radius: $button-ios-border-radius; border-radius: $button-ios-border-radius;
color: $button-ios-text-color;
&.button-large { &.button-large {
@ -45,9 +82,29 @@ $button-ios-small-icon-size: 16px !default;
&.button-small { &.button-small {
padding: 0 $button-ios-small-padding; padding: 0 $button-ios-small-padding;
min-width: $button-ios-small-height; min-width: ($button-ios-small-padding * 4);
min-height: $button-ios-small-height + 2; min-height: $button-ios-small-height + 2;
font-size: $button-ios-small-font-size; font-size: $button-ios-small-font-size;
} }
} }
// iOS Button Color Generation
// --------------------------------------------------
@each $color, $value in $colors {
.button-ios.button-#{$color} {
@include button-default(get-color($color, base),
get-color($color, dark),
inverse-tone($color),
get-color($color, dark),
get-color($color, inverse));
@include button-clear(get-color($color, dark));
@include button-outline(get-color($color, dark));
}
}