mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(css): scope component css to mode
This commit is contained in:
Brandy Carney
committed by
Adam Bradley
Adam Bradley
parent
a154d837a0
commit
750cde38e2
@@ -1,5 +1,4 @@
|
||||
@import "../../globals.ios";
|
||||
@import "./button";
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Button
|
||||
// --------------------------------------------------
|
||||
@@ -138,7 +137,7 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
// iOS Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button {
|
||||
.button-ios {
|
||||
margin: $button-ios-margin;
|
||||
padding: $button-ios-padding;
|
||||
|
||||
@@ -149,15 +148,15 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
|
||||
color: $button-ios-text-color;
|
||||
background-color: $button-ios-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-ios-background-color-activated;
|
||||
opacity: $button-ios-opacity-activated;
|
||||
}
|
||||
.button-ios.activated {
|
||||
background-color: $button-ios-background-color-activated;
|
||||
opacity: $button-ios-opacity-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-ios-opacity-hover;
|
||||
}
|
||||
.button-ios:hover:not(.disable-hover) {
|
||||
opacity: $button-ios-opacity-hover;
|
||||
}
|
||||
|
||||
|
||||
@@ -165,27 +164,25 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-default($color-name, $color-base, $color-contrast) {
|
||||
$background-color: $color-base;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-#{$color-name} {
|
||||
$background-color: $color-base;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-ios-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $background-color;
|
||||
|
||||
&.activated {
|
||||
background-color: $background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
.button-ios-#{$color-name}.activated {
|
||||
background-color: $background-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large {
|
||||
.button-large-ios {
|
||||
padding: $button-ios-large-padding;
|
||||
|
||||
height: $button-ios-large-height;
|
||||
@@ -193,22 +190,22 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
font-size: $button-ios-large-font-size;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
.button-small-ios {
|
||||
padding: $button-ios-small-padding;
|
||||
|
||||
height: $button-ios-small-height;
|
||||
|
||||
font-size: $button-ios-small-font-size;
|
||||
}
|
||||
|
||||
&[icon-only] ion-icon {
|
||||
font-size: $button-ios-small-icon-font-size;
|
||||
}
|
||||
.button-small-ios[icon-only] ion-icon {
|
||||
font-size: $button-ios-small-icon-font-size;
|
||||
}
|
||||
|
||||
// iOS Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
.button-block-ios {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -216,7 +213,7 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
// iOS Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
.button-full-ios {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
@@ -228,19 +225,19 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
.button-outline-ios {
|
||||
border-width: $button-ios-outline-border-width;
|
||||
border-style: $button-ios-outline-border-style;
|
||||
border-radius: $button-ios-outline-border-radius;
|
||||
border-color: $button-ios-outline-border-color;
|
||||
color: $button-ios-outline-text-color;
|
||||
background-color: $button-ios-outline-background-color;
|
||||
}
|
||||
|
||||
&.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.activated {
|
||||
color: $button-ios-outline-text-color-activated;
|
||||
background-color: $button-ios-outline-background-color-activated;
|
||||
opacity: $button-ios-outline-opacity-activated;
|
||||
}
|
||||
|
||||
// iOS Outline Button Color Mixin
|
||||
@@ -248,15 +245,15 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
|
||||
@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.button-outline-#{$color-name} {
|
||||
.button-outline-ios-#{$color-name} {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
background-color: $button-ios-outline-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
.button-outline-ios-#{$color-name}.activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -265,20 +262,20 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
// iOS Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-clear {
|
||||
.button-clear-ios {
|
||||
border-color: $button-ios-clear-border-color;
|
||||
color: $button-ios-background-color;
|
||||
background-color: $button-ios-clear-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-ios-clear-background-color-activated;
|
||||
opacity: $button-ios-clear-opacity-activated;
|
||||
}
|
||||
.button-clear-ios.activated {
|
||||
background-color: $button-ios-clear-background-color-activated;
|
||||
opacity: $button-ios-clear-opacity-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: $button-ios-clear-text-color-hover;
|
||||
opacity: $button-ios-clear-opacity-hover;
|
||||
}
|
||||
.button-clear-ios:hover:not(.disable-hover) {
|
||||
color: $button-ios-clear-text-color-hover;
|
||||
opacity: $button-ios-clear-opacity-hover;
|
||||
}
|
||||
|
||||
|
||||
@@ -286,28 +283,28 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
|
||||
$fg-color: $color-base;
|
||||
|
||||
.button-clear-#{$color-name} {
|
||||
$fg-color: $color-base;
|
||||
.button-clear-ios-#{$color-name} {
|
||||
border-color: $button-ios-clear-border-color;
|
||||
color: $fg-color;
|
||||
background-color: $button-ios-clear-background-color;
|
||||
|
||||
&.activated {
|
||||
opacity: $button-ios-clear-opacity-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button-clear-ios-#{$color-name}.activated {
|
||||
opacity: $button-ios-clear-opacity-activated;
|
||||
}
|
||||
|
||||
.button-clear-ios-#{$color-name}:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round {
|
||||
.button-round-ios {
|
||||
padding: $button-ios-round-padding;
|
||||
|
||||
border-radius: $button-ios-round-border-radius;
|
||||
@@ -317,15 +314,10 @@ $button-ios-fab-border-radius: 50% !default;
|
||||
// iOS FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-fab {
|
||||
.button-fab-ios {
|
||||
border-radius: $button-ios-fab-border-radius;
|
||||
}
|
||||
|
||||
// iOS does not use the button effect
|
||||
ion-button-effect {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Button Colors
|
||||
// --------------------------------------------------
|
||||
@@ -335,10 +327,3 @@ ion-button-effect {
|
||||
@include ios-button-outline($color-name, $color-base, $color-contrast);
|
||||
@include ios-button-clear($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
|
||||
|
||||
// Core Button Overrides
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "./button-fab";
|
||||
@import "./button-icon";
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@import "../../globals.md";
|
||||
@import "./button";
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Button
|
||||
// --------------------------------------------------
|
||||
@@ -179,7 +178,7 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// Material Design Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button {
|
||||
.button-md {
|
||||
margin: $button-md-margin;
|
||||
padding: $button-md-padding;
|
||||
|
||||
@@ -198,19 +197,19 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
|
||||
background-color $button-md-transition-duration $button-md-transition-timing-function,
|
||||
color $button-md-transition-duration $button-md-transition-timing-function;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-background-color-hover;
|
||||
}
|
||||
.button-md:hover:not(.disable-hover) {
|
||||
background-color: $button-md-background-color-hover;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-background-color-activated;
|
||||
box-shadow: $button-md-box-shadow-activated;
|
||||
}
|
||||
.button-md.activated {
|
||||
background-color: $button-md-background-color-activated;
|
||||
box-shadow: $button-md-box-shadow-activated;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
background-color: $button-md-text-color;
|
||||
}
|
||||
.button-md .button-effect {
|
||||
background-color: $button-md-text-color;
|
||||
}
|
||||
|
||||
|
||||
@@ -218,36 +217,34 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-default($color-name, $color-base, $color-contrast) {
|
||||
$background-color: $color-base;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-#{$color-name} {
|
||||
$background-color: $color-base;
|
||||
$background-color-activated: color-shade($background-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-md-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $background-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $background-color-activated;
|
||||
opacity: $button-md-opacity-activated;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button-md-#{$color-name}:hover:not(.disable-hover) {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
.button-md-#{$color-name}.activated {
|
||||
background-color: $background-color-activated;
|
||||
opacity: $button-md-opacity-activated;
|
||||
}
|
||||
|
||||
.button-md-#{$color-name} .button-effect {
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large {
|
||||
.button-large-md {
|
||||
padding: $button-md-large-padding;
|
||||
|
||||
height: $button-md-large-height;
|
||||
@@ -255,22 +252,22 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
font-size: $button-md-large-font-size;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
.button-small-md {
|
||||
padding: $button-md-small-padding;
|
||||
|
||||
height: $button-md-small-height;
|
||||
|
||||
font-size: $button-md-small-font-size;
|
||||
}
|
||||
|
||||
&[icon-only] ion-icon {
|
||||
font-size: $button-md-small-icon-font-size;
|
||||
}
|
||||
.button-small-md[icon-only] ion-icon {
|
||||
font-size: $button-md-small-icon-font-size;
|
||||
}
|
||||
|
||||
// Material Design Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
.button-block-md {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -278,7 +275,7 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// Material Design Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
.button-full-md {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
@@ -290,27 +287,27 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// Material Design Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
.button-outline-md {
|
||||
border-width: $button-md-outline-border-width;
|
||||
border-style: $button-md-outline-border-style;
|
||||
border-color: $button-md-outline-border-color;
|
||||
color: $button-md-outline-text-color;
|
||||
background-color: $button-md-outline-background-color;
|
||||
box-shadow: $button-md-outline-box-shadow;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-outline-background-color-hover;
|
||||
}
|
||||
.button-outline-md:hover:not(.disable-hover) {
|
||||
background-color: $button-md-outline-background-color-hover;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-outline-background-color-activated;
|
||||
box-shadow: $button-md-outline-box-shadow-activated;
|
||||
opacity: $button-md-outline-opacity-activated;
|
||||
}
|
||||
.button-outline-md.activated {
|
||||
background-color: $button-md-outline-background-color-activated;
|
||||
box-shadow: $button-md-outline-box-shadow-activated;
|
||||
opacity: $button-md-outline-opacity-activated;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
background-color: $button-md-outline-ripple-background-color;
|
||||
}
|
||||
.button-outline-md .button-effect {
|
||||
background-color: $button-md-outline-ripple-background-color;
|
||||
}
|
||||
|
||||
|
||||
@@ -318,51 +315,50 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-outline($color-name, $color-base, $color-contrast) {
|
||||
$fg-color: color-shade($color-base, 5%);
|
||||
|
||||
.button-outline-#{$color-name} {
|
||||
$fg-color: color-shade($color-base, 5%);
|
||||
.button-outline-md-#{$color-name} {
|
||||
border-color: $fg-color;
|
||||
color: $fg-color;
|
||||
background-color: $button-md-outline-background-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-outline-background-color-hover;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-outline-background-color-activated;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button-outline-md-#{$color-name}:hover:not(.disable-hover) {
|
||||
background-color: $button-md-outline-background-color-hover;
|
||||
}
|
||||
|
||||
.button-outline-md-#{$color-name}.activated {
|
||||
background-color: $button-md-outline-background-color-activated;
|
||||
}
|
||||
|
||||
.button-outline-md-#{$color-name} .button-effect {
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-clear {
|
||||
.button-clear-md {
|
||||
border-color: $button-md-clear-border-color;
|
||||
color: $button-md-background-color;
|
||||
background-color: $button-md-clear-background-color;
|
||||
box-shadow: $button-md-clear-box-shadow;
|
||||
opacity: $button-md-clear-opacity;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-clear-background-color-activated;
|
||||
box-shadow: $button-md-clear-box-shadow-activated;
|
||||
}
|
||||
.button-clear-md.activated {
|
||||
background-color: $button-md-clear-background-color-activated;
|
||||
box-shadow: $button-md-clear-box-shadow-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-clear-background-color-hover;
|
||||
}
|
||||
.button-clear-md:hover:not(.disable-hover) {
|
||||
background-color: $button-md-clear-background-color-hover;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
background-color: $button-md-clear-ripple-background-color;
|
||||
}
|
||||
.button-clear-md .button-effect {
|
||||
background-color: $button-md-clear-ripple-background-color;
|
||||
}
|
||||
|
||||
|
||||
@@ -370,21 +366,21 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-clear($color-name, $color-base, $color-contrast) {
|
||||
$fg-color: $color-base;
|
||||
|
||||
.button-clear-#{$color-name} {
|
||||
$fg-color: $color-base;
|
||||
.button-clear-md-#{$color-name} {
|
||||
border-color: $button-md-clear-border-color;
|
||||
color: $fg-color;
|
||||
background-color: $button-md-clear-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-clear-background-color-activated;
|
||||
box-shadow: $button-md-clear-box-shadow-activated;
|
||||
}
|
||||
.button-clear-md-#{$color-name}.activated {
|
||||
background-color: $button-md-clear-background-color-activated;
|
||||
box-shadow: $button-md-clear-box-shadow-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
.button-clear-md-#{$color-name}:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -392,7 +388,7 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// Material Design Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round {
|
||||
.button-round-md {
|
||||
padding: $button-md-round-padding;
|
||||
|
||||
border-radius: $button-md-round-border-radius;
|
||||
@@ -402,31 +398,33 @@ $button-md-fab-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4),
|
||||
// Material Design FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-fab {
|
||||
.button-fab-md {
|
||||
border-radius: $button-md-fab-border-radius;
|
||||
box-shadow: $button-md-fab-box-shadow;
|
||||
|
||||
transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
|
||||
background-color $button-md-transition-duration $button-md-transition-timing-function,
|
||||
color $button-md-transition-duration $button-md-transition-timing-function;
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-fab-box-shadow-activated;
|
||||
}
|
||||
}
|
||||
|
||||
[icon-only] {
|
||||
.button-fab-md.activated {
|
||||
box-shadow: $button-md-fab-box-shadow-activated;
|
||||
}
|
||||
|
||||
.button-md [icon-only] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Ripple Effect
|
||||
// --------------------------------------------------
|
||||
// Only Material uses the button effect, so by default
|
||||
// it's display none, and .md sets to display block.
|
||||
|
||||
ion-button-effect {
|
||||
.button-effect {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
display: none;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -438,6 +436,10 @@ ion-button-effect {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.md .button-effect {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Button Colors
|
||||
// --------------------------------------------------
|
||||
@@ -447,10 +449,3 @@ ion-button-effect {
|
||||
@include md-button-outline($color-name, $color-base, $color-contrast);
|
||||
@include md-button-clear($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
|
||||
|
||||
// Core Button Overrides
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "./button-fab";
|
||||
@import "./button-icon";
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@import "../../globals.wp";
|
||||
@import "./button";
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
|
||||
// Windows Button
|
||||
// --------------------------------------------------
|
||||
@@ -128,7 +127,7 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// Windows Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button {
|
||||
.button-wp {
|
||||
margin: $button-wp-margin;
|
||||
padding: $button-wp-padding;
|
||||
|
||||
@@ -141,15 +140,15 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
|
||||
color: $button-wp-text-color;
|
||||
background-color: $button-wp-background-color;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
border-color: $button-wp-background-color-activated;
|
||||
background-color: $button-wp-background-color;
|
||||
}
|
||||
.button-wp:hover:not(.disable-hover) {
|
||||
border-color: $button-wp-background-color-activated;
|
||||
background-color: $button-wp-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-wp-background-color-activated;
|
||||
}
|
||||
.button-wp.activated {
|
||||
background-color: $button-wp-background-color-activated;
|
||||
}
|
||||
|
||||
|
||||
@@ -157,32 +156,30 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin wp-button-default($color-name, $color-base, $color-contrast) {
|
||||
$bg-color: $color-base;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-#{$color-name} {
|
||||
$bg-color: $color-base;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-wp-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
border-color: $bg-color-activated;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
.button-wp-#{$color-name}:hover:not(.disable-hover) {
|
||||
border-color: $bg-color-activated;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.button-wp-#{$color-name}.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Windows Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large {
|
||||
.button-large-wp {
|
||||
padding: $button-wp-large-padding;
|
||||
|
||||
height: $button-wp-large-height;
|
||||
@@ -190,22 +187,22 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
font-size: $button-wp-large-font-size;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
.button-small-wp {
|
||||
padding: $button-wp-small-padding;
|
||||
|
||||
height: $button-wp-small-height;
|
||||
|
||||
font-size: $button-wp-small-font-size;
|
||||
}
|
||||
|
||||
&[icon-only] ion-icon {
|
||||
font-size: $button-wp-small-icon-font-size;
|
||||
}
|
||||
.button-small-wp[icon-only] ion-icon {
|
||||
font-size: $button-wp-small-icon-font-size;
|
||||
}
|
||||
|
||||
// Windows Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
.button-block-wp {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@@ -213,7 +210,7 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// Windows Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
.button-full-wp {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
@@ -225,20 +222,20 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// Windows Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-outline {
|
||||
.button-outline-wp {
|
||||
border-width: $button-wp-outline-border-width;
|
||||
border-style: $button-wp-outline-border-style;
|
||||
border-color: $button-wp-outline-border-color;
|
||||
color: $button-wp-outline-text-color;
|
||||
background-color: $button-wp-outline-background-color;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
.button-outline-wp:hover:not(.disable-hover) {
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity-activated);
|
||||
}
|
||||
.button-outline-wp.activated {
|
||||
background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity-activated);
|
||||
}
|
||||
|
||||
|
||||
@@ -246,40 +243,39 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin wp-button-outline($color-name, $color-base, $color-contrast) {
|
||||
$fg-color: color-shade($color-base, 5%);
|
||||
|
||||
.button-outline-#{$color-name} {
|
||||
$fg-color: color-shade($color-base, 5%);
|
||||
.button-outline-wp-#{$color-name} {
|
||||
border-color: $fg-color;
|
||||
color: $fg-color;
|
||||
background-color: $button-wp-outline-background-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
border-color: $fg-color;
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: rgba($fg-color, $button-wp-outline-background-color-opacity-activated);
|
||||
}
|
||||
}
|
||||
|
||||
.button-outline-wp-#{$color-name}:hover:not(.disable-hover) {
|
||||
border-color: $fg-color;
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
|
||||
.button-outline-wp-#{$color-name}.activated {
|
||||
background-color: rgba($fg-color, $button-wp-outline-background-color-opacity-activated);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Windows Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-clear {
|
||||
.button-clear-wp {
|
||||
color: $button-wp-clear-text-color;
|
||||
background-color: $button-wp-clear-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-wp-clear-background-color-activated;
|
||||
}
|
||||
.button-clear-wp.activated {
|
||||
background-color: $button-wp-clear-background-color-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
.button-clear-wp:hover:not(.disable-hover) {
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
|
||||
|
||||
@@ -287,19 +283,19 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin wp-button-clear($color-name, $color-base, $color-contrast) {
|
||||
$fg-color: $color-base;
|
||||
|
||||
.button-clear-#{$color-name} {
|
||||
$fg-color: $color-base;
|
||||
.button-clear-wp-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $button-wp-clear-background-color;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: $button-wp-clear-background-color-activated;
|
||||
}
|
||||
.button-clear-wp-#{$color-name}.activated {
|
||||
background-color: $button-wp-clear-background-color-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
.button-clear-wp-#{$color-name}:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -307,7 +303,7 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// Windows Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round {
|
||||
.button-round-wp {
|
||||
padding: $button-wp-round-padding;
|
||||
|
||||
border-radius: $button-wp-round-border-radius;
|
||||
@@ -317,18 +313,14 @@ $button-wp-fab-border-radius: 50% !default;
|
||||
// Windows FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-fab {
|
||||
.button-fab-wp {
|
||||
border-radius: $button-wp-fab-border-radius;
|
||||
}
|
||||
|
||||
[icon-only] {
|
||||
.button-wp [icon-only] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ion-button-effect {
|
||||
// wp does not use the button effect
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Generate Windows Button Colors
|
||||
// --------------------------------------------------
|
||||
@@ -338,10 +330,3 @@ ion-button-effect {
|
||||
@include wp-button-outline($color-name, $color-base, $color-contrast);
|
||||
@include wp-button-clear($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
|
||||
|
||||
// Core Button Overrides
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "./button-fab";
|
||||
@import "./button-icon";
|
||||
|
||||
Reference in New Issue
Block a user