mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
240
core/src/components/button/button.ios.scss
Normal file
240
core/src/components/button/button.ios.scss
Normal file
@ -0,0 +1,240 @@
|
||||
@import "./button";
|
||||
@import "./button.ios.vars";
|
||||
|
||||
|
||||
// iOS Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-ios {
|
||||
@include border-radius($button-ios-border-radius);
|
||||
|
||||
@include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
|
||||
|
||||
@include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);
|
||||
|
||||
height: $button-ios-height;
|
||||
|
||||
font-family: $button-ios-font-family;
|
||||
font-size: $button-ios-font-size;
|
||||
|
||||
color: $button-ios-text-color;
|
||||
background-color: $button-ios-background-color;
|
||||
}
|
||||
|
||||
.button-ios.activated {
|
||||
background-color: $button-ios-background-color-activated;
|
||||
opacity: $button-ios-opacity-activated;
|
||||
}
|
||||
|
||||
.button-ios.focused {
|
||||
background-color: $button-ios-background-color-focused;
|
||||
}
|
||||
|
||||
.enable-hover .button-ios:hover {
|
||||
opacity: $button-ios-opacity-hover;
|
||||
}
|
||||
|
||||
a[disabled],
|
||||
button[disabled],
|
||||
.button[disabled] {
|
||||
opacity: $button-ios-opacity-disabled;
|
||||
}
|
||||
|
||||
|
||||
// iOS Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-default($color-name) {
|
||||
$bg-color: ion-color($colors-ios, $color-name, base, ios);
|
||||
$bg-color-activated: ion-color($colors-ios, $color-name, shade, ios);
|
||||
$bg-color-focused: ion-color($colors-ios, $color-name, shade, ios);
|
||||
$fg-color: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.button-ios-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.button-ios-#{$color-name}.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
|
||||
.button-ios-#{$color-name}.focused {
|
||||
background-color: $bg-color-focused;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large-ios {
|
||||
@include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);
|
||||
|
||||
height: $button-ios-large-height;
|
||||
|
||||
font-size: $button-ios-large-font-size;
|
||||
}
|
||||
|
||||
.button-small-ios {
|
||||
@include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);
|
||||
|
||||
height: $button-ios-small-height;
|
||||
|
||||
font-size: $button-ios-small-font-size;
|
||||
}
|
||||
|
||||
// iOS Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block-ios {
|
||||
@include margin-horizontal(0);
|
||||
}
|
||||
|
||||
// iOS Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full-ios {
|
||||
@include margin-horizontal(0);
|
||||
@include border-radius(0);
|
||||
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline-ios {
|
||||
@include border-radius($button-ios-outline-border-radius);
|
||||
|
||||
border-width: $button-ios-outline-border-width;
|
||||
border-style: $button-ios-outline-border-style;
|
||||
border-color: $button-ios-outline-border-color;
|
||||
color: $button-ios-outline-text-color;
|
||||
background-color: $button-ios-outline-background-color;
|
||||
}
|
||||
|
||||
.button-outline-ios.activated {
|
||||
color: $button-ios-outline-text-color-activated;
|
||||
background-color: $button-ios-outline-background-color-activated;
|
||||
opacity: $button-ios-outline-opacity-activated;
|
||||
}
|
||||
|
||||
.button-outline-ios.focused {
|
||||
background-color: $button-ios-outline-background-color-focused;
|
||||
}
|
||||
|
||||
.button-outline-ios.activated.focused {
|
||||
border-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
|
||||
background-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
|
||||
}
|
||||
|
||||
// iOS Outline Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-outline($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
$color-tint: ion-color($colors-ios, $color-name, shade, ios);
|
||||
$bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios);
|
||||
|
||||
.button-outline-ios-#{$color-name} {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
background-color: $button-ios-outline-background-color;
|
||||
}
|
||||
|
||||
.button-outline-ios-#{$color-name}.activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.button-outline-ios-#{$color-name}.focused {
|
||||
background-color: $bg-color-focused;
|
||||
}
|
||||
|
||||
.button-outline-ios-#{$color-name}.activated.focused {
|
||||
border-color: $color-tint;
|
||||
background-color: $color-tint;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-clear-ios {
|
||||
border-color: $button-ios-clear-border-color;
|
||||
color: $button-ios-background-color;
|
||||
background-color: $button-ios-clear-background-color;
|
||||
}
|
||||
|
||||
.button-clear-ios.activated {
|
||||
background-color: $button-ios-clear-background-color-activated;
|
||||
opacity: $button-ios-clear-opacity-activated;
|
||||
}
|
||||
|
||||
.button-clear-ios.focused {
|
||||
background-color: $button-ios-clear-background-color-focused;
|
||||
}
|
||||
|
||||
.enable-hover .button-clear-ios:hover {
|
||||
color: $button-ios-clear-text-color-hover;
|
||||
opacity: $button-ios-clear-opacity-hover;
|
||||
}
|
||||
|
||||
|
||||
// iOS Clear Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-clear($color-name) {
|
||||
$fg-color: ion-color($colors-ios, $color-name, base, ios);
|
||||
$bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios);
|
||||
|
||||
.button-clear-ios-#{$color-name} {
|
||||
border-color: $button-ios-clear-border-color;
|
||||
color: $fg-color;
|
||||
background-color: $button-ios-clear-background-color;
|
||||
}
|
||||
|
||||
.button-clear-ios-#{$color-name}.activated {
|
||||
opacity: $button-ios-clear-opacity-activated;
|
||||
}
|
||||
|
||||
.button-clear-ios-#{$color-name}.focused {
|
||||
background-color: $bg-color-focused;
|
||||
}
|
||||
|
||||
.enable-hover .button-clear-ios-#{$color-name}:hover {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round-ios {
|
||||
@include border-radius($button-ios-round-border-radius);
|
||||
|
||||
@include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start);
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
@include ios-button-default($color-name);
|
||||
@include ios-button-outline($color-name);
|
||||
@include ios-button-clear($color-name);
|
||||
}
|
||||
|
||||
|
||||
// iOS strong Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-strong-ios {
|
||||
font-weight: $button-ios-strong-font-weight;
|
||||
}
|
||||
Reference in New Issue
Block a user