mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
move button colors to ios button
This commit is contained in:
@ -18,30 +18,3 @@
|
|||||||
color: color-shade($button-color);
|
color: color-shade($button-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Generate Clear Button Colors
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// TODO primary activated is wrong
|
|
||||||
@each $color-name, $color-value in auxiliary-colors() {
|
|
||||||
|
|
||||||
$fg-color: color-shade($color-value);
|
|
||||||
|
|
||||||
.button-clear-#{$color-name} {
|
|
||||||
border-color: transparent;
|
|
||||||
background: transparent;
|
|
||||||
color: $fg-color;
|
|
||||||
|
|
||||||
&.activated {
|
|
||||||
opacity: 0.4;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(.disable-hover) {
|
|
||||||
color: color-shade($fg-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
@ -14,35 +14,3 @@
|
|||||||
background-color: $button-color;
|
background-color: $button-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Outline Button Color Mixin
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
@mixin button-outline($fg-color) {
|
|
||||||
|
|
||||||
border-color: $fg-color;
|
|
||||||
background: transparent;
|
|
||||||
color: $fg-color;
|
|
||||||
|
|
||||||
&.activated {
|
|
||||||
color: $background-color;
|
|
||||||
background-color: $fg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Outline Clear Button Colors
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
@each $color-name, $color-value in auxiliary-colors() {
|
|
||||||
|
|
||||||
.button-outline-#{$color-name} {
|
|
||||||
|
|
||||||
$fg-color: color-shade($color-value, 5%);
|
|
||||||
@include button-outline($fg-color);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
@ -9,7 +9,7 @@ $button-border-radius: 4px !default;
|
|||||||
$button-round-padding: 0 2.6rem !default;
|
$button-round-padding: 0 2.6rem !default;
|
||||||
$button-round-border-radius: 64px !default;
|
$button-round-border-radius: 64px !default;
|
||||||
|
|
||||||
$button-color: color(primary) !default;
|
$button-color: map-get($colors, primary) !default;
|
||||||
$button-color-activated: color-shade($button-color) !default;
|
$button-color-activated: color-shade($button-color) !default;
|
||||||
$button-text-color: inverse($button-color) !default;
|
$button-text-color: inverse($button-color) !default;
|
||||||
$button-hover-opacity: 0.8 !default;
|
$button-hover-opacity: 0.8 !default;
|
||||||
|
@ -13,3 +13,62 @@
|
|||||||
// This fixes an issue with flexbox and button on iOS Safari. See #225
|
// This fixes an issue with flexbox and button on iOS Safari. See #225
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Generate Clear Button Colors
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// TODO primary activated is wrong
|
||||||
|
@each $color-name, $color-value in $colors {
|
||||||
|
|
||||||
|
$fg-color: color-shade($color-value);
|
||||||
|
|
||||||
|
.button-clear-#{$color-name} {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
color: $fg-color;
|
||||||
|
|
||||||
|
&.activated {
|
||||||
|
opacity: 0.4;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(.disable-hover) {
|
||||||
|
color: color-shade($fg-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Outline Button Color Mixin
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
@mixin button-outline($fg-color) {
|
||||||
|
|
||||||
|
border-color: $fg-color;
|
||||||
|
background: transparent;
|
||||||
|
color: $fg-color;
|
||||||
|
|
||||||
|
&.activated {
|
||||||
|
color: $background-color;
|
||||||
|
background-color: $fg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Outline Clear Button Colors
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
@each $color-name, $color-value in $colors {
|
||||||
|
|
||||||
|
.button-outline-#{$color-name} {
|
||||||
|
|
||||||
|
$fg-color: color-shade($color-value, 5%);
|
||||||
|
@include button-outline($fg-color);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@ -138,7 +138,7 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
|
|||||||
// Generate Material Design Button Auxiliary Colors
|
// Generate Material Design Button Auxiliary Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@each $color-name, $color-value in auxiliary-colors() {
|
@each $color-name, $color-value in $colors {
|
||||||
|
|
||||||
@include button-theme-md($color-name, $color-value);
|
@include button-theme-md($color-name, $color-value);
|
||||||
|
|
||||||
|
@ -7,8 +7,8 @@
|
|||||||
$checkbox-ios-icon-size: 21px !default;
|
$checkbox-ios-icon-size: 21px !default;
|
||||||
$checkbox-ios-background-color-off: $list-background-color !default;
|
$checkbox-ios-background-color-off: $list-background-color !default;
|
||||||
$checkbox-ios-border-color-off: $list-border-color !default;
|
$checkbox-ios-border-color-off: $list-border-color !default;
|
||||||
$checkbox-ios-background-color-on: color(primary) !default;
|
$checkbox-ios-background-color-on: map-get($colors, primary) !default;
|
||||||
$checkbox-ios-border-color-on: color(primary) !default;
|
$checkbox-ios-border-color-on: map-get($colors, primary) !default;
|
||||||
$checkbox-ios-checkmark-color-on: $background-color !default;
|
$checkbox-ios-checkmark-color-on: $background-color !default;
|
||||||
|
|
||||||
|
|
||||||
@ -70,7 +70,7 @@ checkbox-icon {
|
|||||||
// Generate iOS Checkbox Auxiliary Colors
|
// Generate iOS Checkbox Auxiliary Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@each $color-name, $value in auxiliary-colors() {
|
@each $color-name, $value in $colors {
|
||||||
|
|
||||||
@include checkbox-theme-ios($color-name, $value);
|
@include checkbox-theme-ios($color-name, $value);
|
||||||
|
|
||||||
|
@ -79,7 +79,7 @@ checkbox-icon {
|
|||||||
// Generate Material Design Checkbox Auxiliary Colors
|
// Generate Material Design Checkbox Auxiliary Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@each $color-name, $color-value in auxiliary-colors() {
|
@each $color-name, $color-value in $colors {
|
||||||
|
|
||||||
@include checkbox-theme-md($color-name, $color-value);
|
@include checkbox-theme-md($color-name, $color-value);
|
||||||
|
|
||||||
|
@ -68,7 +68,7 @@ radio-icon {
|
|||||||
// Generate iOS Radio Auxiliary Colors
|
// Generate iOS Radio Auxiliary Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@each $color-name, $color-value in auxiliary-colors() {
|
@each $color-name, $color-value in $colors {
|
||||||
|
|
||||||
@include radio-theme-ios($color-name, $color-value);
|
@include radio-theme-ios($color-name, $color-value);
|
||||||
|
|
||||||
|
@ -88,7 +88,7 @@ media-radio {
|
|||||||
// Generate Material Design Radio Auxiliary Colors
|
// Generate Material Design Radio Auxiliary Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@each $color-name, $color-value in auxiliary-colors() {
|
@each $color-name, $color-value in $colors {
|
||||||
|
|
||||||
@include radio-theme-md($color-name, $color-value);
|
@include radio-theme-md($color-name, $color-value);
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ $segment-button-ios-bg-color: transparent !default;
|
|||||||
$segment-button-ios-font-size: 1.3rem !default;
|
$segment-button-ios-font-size: 1.3rem !default;
|
||||||
$segment-button-ios-border-radius: 4px !default;
|
$segment-button-ios-border-radius: 4px !default;
|
||||||
|
|
||||||
$segment-button-ios-bg-color-activated: color(primary) !default;
|
$segment-button-ios-bg-color-activated: map-get($colors, primary) !default;
|
||||||
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
|
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
|
||||||
$segment-button-ios-activated-transition: 100ms all linear !default;
|
$segment-button-ios-activated-transition: 100ms all linear !default;
|
||||||
$segment-button-ios-hover-opacity: 0.16 !default;
|
$segment-button-ios-hover-opacity: 0.16 !default;
|
||||||
|
@ -145,7 +145,7 @@ ion-switch {
|
|||||||
// Generate iOS Switch Auxiliary Colors
|
// Generate iOS Switch Auxiliary Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@each $color-name, $value in auxiliary-colors() {
|
@each $color-name, $value in $colors {
|
||||||
|
|
||||||
@include switch-theme-ios($color-name, $value);
|
@include switch-theme-ios($color-name, $value);
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
// Material Design Switch
|
// Material Design Switch
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
$switch-md-active-color: color(primary) !default;
|
$switch-md-active-color: map-get($colors, primary) !default;
|
||||||
|
|
||||||
$switch-md-track-width: 36px !default;
|
$switch-md-track-width: 36px !default;
|
||||||
$switch-md-track-height: 14px !default;
|
$switch-md-track-height: 14px !default;
|
||||||
@ -105,7 +105,7 @@ ion-switch {
|
|||||||
// Generate Material Design Switch Auxiliary Colors
|
// Generate Material Design Switch Auxiliary Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@each $color-name, $value in auxiliary-colors() {
|
@each $color-name, $value in $colors {
|
||||||
|
|
||||||
@include switch-theme-md($color-name, $value);
|
@include switch-theme-md($color-name, $value);
|
||||||
|
|
||||||
|
@ -1,29 +0,0 @@
|
|||||||
|
|
||||||
// Dark Theme
|
|
||||||
// ----------------------------------
|
|
||||||
|
|
||||||
$colors: (
|
|
||||||
|
|
||||||
primary: #387ef5,
|
|
||||||
secondary: #32db64,
|
|
||||||
danger: #f53d3d,
|
|
||||||
light: #fff,
|
|
||||||
dark: #333,
|
|
||||||
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
|
|
||||||
$text-color: #fff !default;
|
|
||||||
$background-color: #222 !default;
|
|
||||||
|
|
||||||
$list-text-color: $text-color !default;
|
|
||||||
$list-background-color: $background-color !default;
|
|
||||||
$list-border-color: #666 !default;
|
|
||||||
|
|
||||||
$link-color: map-get($colors, primary) !default;
|
|
||||||
|
|
||||||
$toolbar-background-color: #111 !default;
|
|
||||||
$toolbar-border-color: #000 !default;
|
|
||||||
$toolbar-text-color: $text-color !default;
|
|
||||||
$toolbar-active-color: $link-color !default;
|
|
||||||
$toolbar-inactive-color: #8c8c8c !default;
|
|
@ -28,16 +28,3 @@ $toolbar-border-color: #b2b2b2 !default;
|
|||||||
$toolbar-text-color: $text-color !default;
|
$toolbar-text-color: $text-color !default;
|
||||||
$toolbar-active-color: $link-color !default;
|
$toolbar-active-color: $link-color !default;
|
||||||
$toolbar-inactive-color: #8c8c8c !default;
|
$toolbar-inactive-color: #8c8c8c !default;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@function color($color-name) {
|
|
||||||
@return map-get($colors, $color-name);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@function auxiliary-colors() {
|
|
||||||
// get a map of all the colors, except "primary"
|
|
||||||
@return map-remove($colors, primary);
|
|
||||||
}
|
|
||||||
|
Reference in New Issue
Block a user