mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
chore(): remove all files that are duplicates of @ionic/core
This commit is contained in:
Josh Thomas
@ -1,28 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Button Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
.button ion-icon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ion-icon[slot="start"] {
|
||||
@include button-icon();
|
||||
|
||||
@include padding-horizontal(null, .3em);
|
||||
}
|
||||
|
||||
ion-icon[slot="end"] {
|
||||
@include button-icon();
|
||||
|
||||
@include padding-horizontal(.4em, null);
|
||||
}
|
||||
|
||||
ion-icon[slot="icon-only"] {
|
||||
@include padding(0);
|
||||
|
||||
font-size: 1.8em;
|
||||
line-height: .67;
|
||||
}
|
||||
@ -1,400 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./button";
|
||||
|
||||
// iOS Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-ios-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the button
|
||||
$button-ios-margin-top: .4rem !default;
|
||||
|
||||
/// @prop - Margin end of the button
|
||||
$button-ios-margin-end: .2rem !default;
|
||||
|
||||
/// @prop - Margin bottom of the button
|
||||
$button-ios-margin-bottom: .4rem !default;
|
||||
|
||||
/// @prop - Margin start of the button
|
||||
$button-ios-margin-start: .2rem !default;
|
||||
|
||||
// deprecated
|
||||
$button-ios-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the button
|
||||
$button-ios-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the button
|
||||
$button-ios-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the button
|
||||
$button-ios-padding-bottom: $button-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the button
|
||||
$button-ios-padding-start: $button-ios-padding-end !default;
|
||||
|
||||
/// @prop - Height of the button
|
||||
$button-ios-height: 2.8em !default;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-ios-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-ios-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$button-ios-background-color: color($colors-ios, primary) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$button-ios-text-color: color-contrast($colors-ios, $button-ios-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$button-ios-background-color-activated: color-shade($button-ios-background-color) !default;
|
||||
|
||||
/// @prop - Opacity of the activated button
|
||||
$button-ios-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Opacity of the button on hover
|
||||
$button-ios-opacity-hover: .8 !default;
|
||||
|
||||
|
||||
// iOS Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-ios-large-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the large button
|
||||
$button-ios-large-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the large button
|
||||
$button-ios-large-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the large button
|
||||
$button-ios-large-padding-bottom: $button-ios-large-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the large button
|
||||
$button-ios-large-padding-start: $button-ios-large-padding-end !default;
|
||||
|
||||
/// @prop - Height of the large button
|
||||
$button-ios-large-height: 2.8em !default;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-ios-large-font-size: 2rem !default;
|
||||
|
||||
|
||||
// iOS Small Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-ios-small-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the small button
|
||||
$button-ios-small-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the small button
|
||||
$button-ios-small-padding-end: .9em !default;
|
||||
|
||||
/// @prop - Padding bottom of the small button
|
||||
$button-ios-small-padding-bottom: $button-ios-small-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the small button
|
||||
$button-ios-small-padding-start: $button-ios-small-padding-end !default;
|
||||
|
||||
/// @prop - Height of the small button
|
||||
$button-ios-small-height: 2.1em !default;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
$button-ios-small-font-size: 1.3rem !default;
|
||||
|
||||
/// @prop - Font size of an icon in the small button
|
||||
$button-ios-small-icon-font-size: 1.3em !default;
|
||||
|
||||
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border width of the outline button
|
||||
$button-ios-outline-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the outline button
|
||||
$button-ios-outline-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the outline button
|
||||
$button-ios-outline-border-radius: $button-ios-border-radius !default;
|
||||
|
||||
/// @prop - Border color of the outline button
|
||||
$button-ios-outline-border-color: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Text color of the outline button
|
||||
$button-ios-outline-text-color: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Background color of the outline button
|
||||
$button-ios-outline-background-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the activated outline button
|
||||
$button-ios-outline-text-color-activated: color-contrast($colors-ios, $button-ios-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated outline button
|
||||
$button-ios-outline-background-color-activated: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Opacity of the activated outline button
|
||||
$button-ios-outline-opacity-activated: 1 !default;
|
||||
|
||||
|
||||
// iOS Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border color of the clear button
|
||||
$button-ios-clear-border-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the clear button
|
||||
$button-ios-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the activated clear button
|
||||
$button-ios-clear-background-color-activated: $button-ios-clear-background-color !default;
|
||||
|
||||
/// @prop - Opacity of the activated clear button
|
||||
$button-ios-clear-opacity-activated: .4 !default;
|
||||
|
||||
/// @prop - Text color of the clear button on hover
|
||||
$button-ios-clear-text-color-hover: $button-ios-background-color !default;
|
||||
|
||||
/// @prop - Opacity of the clear button on hover
|
||||
$button-ios-clear-opacity-hover: .6 !default;
|
||||
|
||||
|
||||
// iOS Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-ios-round-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-ios-round-padding-top: $button-round-padding-top !default;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-ios-round-padding-end: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-ios-round-padding-bottom: $button-round-padding-bottom !default;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-ios-round-padding-start: $button-round-padding-start !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-ios-round-border-radius: $button-round-border-radius !default;
|
||||
|
||||
|
||||
// iOS Decorator Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the strong button
|
||||
$button-ios-strong-font-weight: 600 !default;
|
||||
|
||||
|
||||
// iOS Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-ios {
|
||||
@include border-radius($button-ios-border-radius);
|
||||
|
||||
height: $button-ios-height;
|
||||
|
||||
font-size: $button-ios-font-size;
|
||||
|
||||
color: $button-ios-text-color;
|
||||
background-color: $button-ios-background-color;
|
||||
|
||||
@include deprecated-variable(margin, $button-ios-margin) {
|
||||
@include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $button-ios-padding) {
|
||||
@include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-ios.activated {
|
||||
background-color: $button-ios-background-color-activated;
|
||||
opacity: $button-ios-opacity-activated;
|
||||
}
|
||||
|
||||
.button-ios:hover:not(.disable-hover) {
|
||||
opacity: $button-ios-opacity-hover;
|
||||
}
|
||||
|
||||
|
||||
// iOS Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-default($color-name, $color-base, $color-contrast) {
|
||||
$bg-color: $color-base;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-ios-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.button-ios-#{$color-name}.activated {
|
||||
background-color: $bg-color-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large-ios {
|
||||
height: $button-ios-large-height;
|
||||
|
||||
font-size: $button-ios-large-font-size;
|
||||
|
||||
@include deprecated-variable(padding, $button-ios-large-padding) {
|
||||
@include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-small-ios {
|
||||
height: $button-ios-small-height;
|
||||
|
||||
font-size: $button-ios-small-font-size;
|
||||
|
||||
@include deprecated-variable(padding, $button-ios-small-padding) {
|
||||
@include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-small-ios ion-icon[slot="icon-only"] {
|
||||
font-size: $button-ios-small-icon-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;
|
||||
}
|
||||
|
||||
// iOS Outline Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 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:hover:not(.disable-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, $color-base, $color-contrast) {
|
||||
$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;
|
||||
}
|
||||
|
||||
.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-ios {
|
||||
@include border-radius($button-ios-round-border-radius);
|
||||
|
||||
@include deprecated-variable(padding, $button-ios-round-padding) {
|
||||
@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-base, $color-contrast in get-colors($colors-ios) {
|
||||
@include ios-button-default($color-name, $color-base, $color-contrast);
|
||||
@include ios-button-outline($color-name, $color-base, $color-contrast);
|
||||
@include ios-button-clear($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
|
||||
|
||||
// iOS strong Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-strong-ios {
|
||||
font-weight: $button-ios-strong-font-weight;
|
||||
}
|
||||
@ -1,516 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./button";
|
||||
|
||||
// Material Design Button
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// deprecated
|
||||
$button-md-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the button
|
||||
$button-md-margin-top: .4rem !default;
|
||||
|
||||
/// @prop - Margin end of the button
|
||||
$button-md-margin-end: .2rem !default;
|
||||
|
||||
/// @prop - Margin bottom of the button
|
||||
$button-md-margin-bottom: .4rem !default;
|
||||
|
||||
/// @prop - Margin start of the button
|
||||
$button-md-margin-start: .2rem !default;
|
||||
|
||||
// deprecated
|
||||
$button-md-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the button
|
||||
$button-md-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the button
|
||||
$button-md-padding-end: 1.1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the button
|
||||
$button-md-padding-bottom: $button-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the button
|
||||
$button-md-padding-start: $button-md-padding-end !default;
|
||||
|
||||
/// @prop - Height of the button
|
||||
$button-md-height: 3.6rem !default;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-md-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-md-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Font weight of the button text
|
||||
$button-md-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Capitalization of the button text
|
||||
$button-md-text-transform: uppercase !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$button-md-background-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$button-md-text-color: color-contrast($colors-md, $button-md-background-color) !default;
|
||||
|
||||
/// @prop - Box shadow of the button
|
||||
$button-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Duration of the transition of the button
|
||||
$button-md-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Speed curve of the transition of the button
|
||||
$button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
/// @prop - Background color of the button on hover
|
||||
$button-md-background-color-hover: $button-md-background-color !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$button-md-background-color-activated: color-shade($button-md-background-color) !default;
|
||||
|
||||
/// @prop - Opacity of the activated button
|
||||
$button-md-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Box shadow of the activated button
|
||||
$button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default;
|
||||
|
||||
/// @prop - Background color of the ripple on the button
|
||||
$button-md-ripple-background-color: #555 !default;
|
||||
|
||||
|
||||
// Material Design Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-md-large-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the large button
|
||||
$button-md-large-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the large button
|
||||
$button-md-large-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the large button
|
||||
$button-md-large-padding-bottom: $button-md-large-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the large button
|
||||
$button-md-large-padding-start: $button-md-large-padding-end !default;
|
||||
|
||||
/// @prop - Height of the large button
|
||||
$button-md-large-height: 2.8em !default;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-md-large-font-size: 2rem !default;
|
||||
|
||||
|
||||
// Material Design Small Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-md-small-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the small button
|
||||
$button-md-small-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the small button
|
||||
$button-md-small-padding-end: .9em !default;
|
||||
|
||||
/// @prop - Padding bottom of the small button
|
||||
$button-md-small-padding-bottom: $button-md-small-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the small button
|
||||
$button-md-small-padding-start: $button-md-small-padding-end !default;
|
||||
|
||||
/// @prop - Height of the small button
|
||||
$button-md-small-height: 2.1em !default;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
$button-md-small-font-size: 1.3rem !default;
|
||||
|
||||
/// @prop - Font size of an icon in the small button
|
||||
$button-md-small-icon-font-size: 1.4em !default;
|
||||
|
||||
|
||||
// Material Design Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border width of the outline button
|
||||
$button-md-outline-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the outline button
|
||||
$button-md-outline-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color of the outline button
|
||||
$button-md-outline-border-color: $button-md-background-color !default;
|
||||
|
||||
/// @prop - Text color of the outline button
|
||||
$button-md-outline-text-color: $button-md-background-color !default;
|
||||
|
||||
/// @prop - Background color of the outline button
|
||||
$button-md-outline-background-color: transparent !default;
|
||||
|
||||
/// @prop - Box shadow of the outline button
|
||||
$button-md-outline-box-shadow: none !default;
|
||||
|
||||
/// @prop - Background color of the outline button on hover
|
||||
$button-md-outline-background-color-hover: rgba(158, 158, 158, .1) !default;
|
||||
|
||||
/// @prop - Background color of the activated outline button
|
||||
$button-md-outline-background-color-activated: transparent !default;
|
||||
|
||||
/// @prop - Box shadow of the activated outline button
|
||||
$button-md-outline-box-shadow-activated: none !default;
|
||||
|
||||
/// @prop - Opacity of the activated outline button
|
||||
$button-md-outline-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Background color of the ripple on the outline button
|
||||
$button-md-outline-ripple-background-color: $button-md-background-color !default;
|
||||
|
||||
|
||||
// Material Design Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border color of the clear button
|
||||
$button-md-clear-border-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the clear button
|
||||
$button-md-clear-text-color: $button-md-background-color !default;
|
||||
|
||||
/// @prop - Background color of the clear button
|
||||
$button-md-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Box shadow of the clear button
|
||||
$button-md-clear-box-shadow: none !default;
|
||||
|
||||
/// @prop - Opacity of the clear button
|
||||
$button-md-clear-opacity: 1 !default;
|
||||
|
||||
/// @prop - Background color of the activated clear button
|
||||
$button-md-clear-background-color-activated: rgba(158, 158, 158, .2) !default;
|
||||
|
||||
/// @prop - Box shadow of the activated clear button
|
||||
$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default;
|
||||
|
||||
/// @prop - Background color of the clear button on hover
|
||||
$button-md-clear-background-color-hover: rgba(158, 158, 158, .1) !default;
|
||||
|
||||
/// @prop - Background color of the ripple on the clear button
|
||||
$button-md-clear-ripple-background-color: #999 !default;
|
||||
|
||||
|
||||
// Material Design Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-md-round-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-md-round-padding-top: $button-round-padding-top !default;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-md-round-padding-end: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-md-round-padding-bottom: $button-round-padding-bottom !default;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-md-round-padding-start: $button-round-padding-start !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-md-round-border-radius: $button-round-border-radius !default;
|
||||
|
||||
|
||||
// Material Design Decorator Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the strong button
|
||||
$button-md-strong-font-weight: bold !default;
|
||||
|
||||
|
||||
// Material Design Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-md {
|
||||
@include border-radius($button-md-border-radius);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
height: $button-md-height;
|
||||
|
||||
font-size: $button-md-font-size;
|
||||
font-weight: $button-md-font-weight;
|
||||
|
||||
text-transform: $button-md-text-transform;
|
||||
color: $button-md-text-color;
|
||||
background-color: $button-md-background-color;
|
||||
box-shadow: $button-md-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;
|
||||
|
||||
@include deprecated-variable(margin, $button-md-margin) {
|
||||
@include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $button-md-padding) {
|
||||
@include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-md:hover:not(.disable-hover) {
|
||||
background-color: $button-md-background-color-hover;
|
||||
}
|
||||
|
||||
.button-md.activated {
|
||||
background-color: $button-md-background-color-activated;
|
||||
box-shadow: $button-md-box-shadow-activated;
|
||||
}
|
||||
|
||||
.button-md .button-effect {
|
||||
background-color: $button-md-text-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-default($color-name, $color-base, $color-contrast) {
|
||||
$bg-color: $color-base;
|
||||
$bg-color-activated: color-shade($bg-color);
|
||||
$fg-color: $color-contrast;
|
||||
|
||||
.button-md-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.button-md-#{$color-name}:hover:not(.disable-hover) {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.button-md-#{$color-name}.activated {
|
||||
background-color: $bg-color-activated;
|
||||
opacity: $button-md-opacity-activated;
|
||||
}
|
||||
|
||||
.button-md-#{$color-name} .button-effect {
|
||||
background-color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-large-md {
|
||||
height: $button-md-large-height;
|
||||
|
||||
font-size: $button-md-large-font-size;
|
||||
|
||||
@include deprecated-variable(padding, $button-md-large-padding) {
|
||||
@include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-small-md {
|
||||
height: $button-md-small-height;
|
||||
|
||||
font-size: $button-md-small-font-size;
|
||||
|
||||
@include deprecated-variable(padding, $button-md-small-padding) {
|
||||
@include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-small-md ion-icon[slot="icon-only"] {
|
||||
font-size: $button-md-small-icon-font-size;
|
||||
}
|
||||
|
||||
// Material Design Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block-md {
|
||||
@include margin-horizontal(0);
|
||||
}
|
||||
|
||||
// Material Design Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full-md {
|
||||
@include margin-horizontal(0);
|
||||
@include border-radius(0);
|
||||
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
// Material Design Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.button-outline-md:hover:not(.disable-hover) {
|
||||
background-color: $button-md-outline-background-color-hover;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.button-outline-md .button-effect {
|
||||
background-color: $button-md-outline-ripple-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Outline Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-outline($color-name, $color-base, $color-contrast) {
|
||||
$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;
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
|
||||
.button-clear-md.activated {
|
||||
background-color: $button-md-clear-background-color-activated;
|
||||
box-shadow: $button-md-clear-box-shadow-activated;
|
||||
}
|
||||
|
||||
.button-clear-md:hover:not(.disable-hover) {
|
||||
background-color: $button-md-clear-background-color-hover;
|
||||
}
|
||||
|
||||
.button-clear-md .button-effect {
|
||||
background-color: $button-md-clear-ripple-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Clear Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-button-clear($color-name, $color-base, $color-contrast) {
|
||||
$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;
|
||||
}
|
||||
|
||||
.button-clear-md-#{$color-name}.activated {
|
||||
background-color: $button-md-clear-background-color-activated;
|
||||
box-shadow: $button-md-clear-box-shadow-activated;
|
||||
}
|
||||
|
||||
.button-clear-md-#{$color-name}:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round-md {
|
||||
@include border-radius($button-md-round-border-radius);
|
||||
|
||||
@include deprecated-variable(padding, $button-md-round-padding) {
|
||||
@include padding($button-md-round-padding-top, $button-md-round-padding-end, $button-md-round-padding-bottom, $button-md-round-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-md ion-icon[slot="icon-only"] {
|
||||
@include 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.
|
||||
|
||||
.button-effect {
|
||||
@include border-radius(50%);
|
||||
@include transform-origin(center, center);
|
||||
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
display: none;
|
||||
|
||||
background-color: $button-md-ripple-background-color;
|
||||
opacity: .2;
|
||||
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
@include multi-dir() {
|
||||
// scss-lint:disable PropertySpelling
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.md .button-effect {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
@include md-button-default($color-name, $color-base, $color-contrast);
|
||||
@include md-button-outline($color-name, $color-base, $color-contrast);
|
||||
@include md-button-clear($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
|
||||
|
||||
// MD strong Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-strong-md {
|
||||
font-weight: $button-md-strong-font-weight;
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
@import "button-icon";
|
||||
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-round-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-round-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-round-padding-end: 2.6rem !default;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-round-padding-bottom: $button-round-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-round-padding-start: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-round-border-radius: 64px !default;
|
||||
|
||||
|
||||
.button {
|
||||
@include text-align(center);
|
||||
@include appearance(none);
|
||||
|
||||
visibility: visible;
|
||||
border: 0;
|
||||
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
text-transform: none;
|
||||
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
vertical-align: top; // the better option for most scenarios
|
||||
vertical-align: -webkit-baseline-middle; // the best for those that support it
|
||||
|
||||
transition: background-color, opacity 100ms linear;
|
||||
|
||||
font-kerning: none;
|
||||
user-select: none;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
[ion-button] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[disabled],
|
||||
button[disabled],
|
||||
[ion-button][disabled] {
|
||||
cursor: default;
|
||||
opacity: .4;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block {
|
||||
display: block;
|
||||
clear: both;
|
||||
|
||||
width: 100%;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.button-block::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
// Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
// Full Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full.button-outline {
|
||||
@include border-radius(0);
|
||||
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
@ -1,311 +0,0 @@
|
||||
import { Component, h, Prop } from '../index';
|
||||
import { CssClassObject } from '../../util/interfaces';
|
||||
|
||||
/**
|
||||
* @name Button
|
||||
* @module ionic
|
||||
* @description
|
||||
* Buttons are simple components in Ionic. They can consist of text and icons
|
||||
* and be enhanced by a wide range of attributes.
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* ```html
|
||||
*
|
||||
* <!-- Colors -->
|
||||
* <ion-button>Default</ion-button>
|
||||
*
|
||||
* <ion-button color="secondary">Secondary</ion-button>
|
||||
*
|
||||
* <ion-button color="danger">Danger</ion-button>
|
||||
*
|
||||
* <ion-button color="light">Light</ion-button>
|
||||
*
|
||||
* <ion-button color="dark">Dark</ion-button>
|
||||
*
|
||||
* <!-- Shapes -->
|
||||
* <ion-button full>Full Button</ion-button>
|
||||
*
|
||||
* <ion-button block>Block Button</ion-button>
|
||||
*
|
||||
* <ion-button round>Round Button</ion-button>
|
||||
*
|
||||
* <!-- Outline -->
|
||||
* <ion-button full outline>Outline + Full</ion-button>
|
||||
*
|
||||
* <ion-button block outline>Outline + Block</ion-button>
|
||||
*
|
||||
* <ion-button round outline>Outline + Round</ion-button>
|
||||
*
|
||||
* <!-- Icons -->
|
||||
* <ion-button>
|
||||
* <ion-icon slot="start" name="star"></ion-icon>
|
||||
* Left Icon
|
||||
* </ion-button>
|
||||
*
|
||||
* <ion-button>
|
||||
* Right Icon
|
||||
* <ion-icon slot="end" name="star"></ion-icon>
|
||||
* </ion-button>
|
||||
*
|
||||
* <ion-button>
|
||||
* <ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
* </ion-button>
|
||||
*
|
||||
* <!-- Sizes -->
|
||||
* <ion-button large>Large</ion-button>
|
||||
*
|
||||
* <ion-button>Default</ion-button>
|
||||
*
|
||||
* <ion-button small>Small</ion-button>
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-button',
|
||||
styleUrls: {
|
||||
ios: 'button.ios.scss',
|
||||
md: 'button.md.scss',
|
||||
wp: 'button.wp.scss'
|
||||
}
|
||||
})
|
||||
export class Button {
|
||||
$el: HTMLElement;
|
||||
|
||||
@Prop() itemButton: boolean = false;
|
||||
|
||||
@Prop() href: string;
|
||||
|
||||
/**
|
||||
* @Prop {string} The type of button.
|
||||
* Possible values are: `"button"`, `"bar-button"`.
|
||||
*/
|
||||
@Prop() buttonType: string = 'button';
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates the large button size.
|
||||
* Type: size
|
||||
*/
|
||||
@Prop() large: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates the small button size.
|
||||
* Type: size
|
||||
*/
|
||||
@Prop() small: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
|
||||
* Type: size
|
||||
*/
|
||||
@Prop() default: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, sets the button into a disabled state.
|
||||
*/
|
||||
@Prop() disabled: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a transparent button style with a border.
|
||||
* Type: style
|
||||
*/
|
||||
@Prop() outline: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a transparent button style without a border.
|
||||
* Type: style
|
||||
*/
|
||||
@Prop() clear: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
|
||||
* Type: style
|
||||
*/
|
||||
@Prop() solid: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a button with rounded corners.
|
||||
* Type: shape
|
||||
*/
|
||||
@Prop() round: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a button style that fills the available width.
|
||||
* Type: display
|
||||
*/
|
||||
@Prop() block: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a button style that fills the available width without
|
||||
* a left and right border.
|
||||
* Type: display
|
||||
*/
|
||||
@Prop() full: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a button with a heavier font weight.
|
||||
* Type: decorator
|
||||
*/
|
||||
@Prop() strong: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {string} The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md' | 'wp';
|
||||
|
||||
/**
|
||||
* @Prop {string} The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the classes based on the button type
|
||||
* e.g. alert-button, action-sheet-button
|
||||
*/
|
||||
getButtonClassList(buttonType: string, mode: string): string[] {
|
||||
if (!buttonType) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
buttonType,
|
||||
`${buttonType}-${mode}`
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the classes based on the type
|
||||
* e.g. block, full, round, large
|
||||
*/
|
||||
getClassList(buttonType: string, type: string, mode: string): string[] {
|
||||
if (!type) {
|
||||
return [];
|
||||
}
|
||||
type = type.toLocaleLowerCase();
|
||||
return [
|
||||
`${buttonType}-${type}`,
|
||||
`${buttonType}-${type}-${mode}`
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the classes for the color
|
||||
*/
|
||||
getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
|
||||
style = (buttonType !== 'bar-button' && style === 'solid') ? 'default' : style;
|
||||
let className =
|
||||
buttonType +
|
||||
((style && style !== 'default') ?
|
||||
'-' + style.toLowerCase() :
|
||||
'');
|
||||
|
||||
// special case for a default bar button
|
||||
// if the bar button is default it should get the style
|
||||
// but if a color is passed the style shouldn't be added
|
||||
if (buttonType === 'bar-button' && style === 'default') {
|
||||
className = buttonType;
|
||||
if (!color) {
|
||||
className += '-' + style.toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
return [`${className}-${mode}`].concat(
|
||||
color ? `${className}-${mode}-${color}` : []
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the classes for the style
|
||||
* e.g. outline, clear, solid
|
||||
*/
|
||||
getStyleClassList(buttonType: string): string[] {
|
||||
let classList = [].concat(
|
||||
this.outline ? this.getColorClassList(this.color, buttonType, 'outline', this.mode) : [],
|
||||
this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : [],
|
||||
this.solid ? this.getColorClassList(this.color, buttonType, 'solid', this.mode) : []
|
||||
);
|
||||
|
||||
if (classList.length === 0) {
|
||||
classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
|
||||
}
|
||||
|
||||
return classList;
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the item classes for the button
|
||||
*/
|
||||
getItemClassList(size: string) {
|
||||
let classList = [].concat(
|
||||
this.itemButton && !size ? 'item-button' : []
|
||||
);
|
||||
|
||||
return classList;
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the element classes to add to the child element
|
||||
*/
|
||||
getElementClassList() {
|
||||
let classList = [].concat(
|
||||
this.$el.className.length ? this.$el.className.split(' ') : []
|
||||
);
|
||||
|
||||
return classList;
|
||||
}
|
||||
|
||||
render() {
|
||||
const size =
|
||||
(this.large ? 'large' : null) ||
|
||||
(this.small ? 'small' : null) ||
|
||||
(this.default ? 'default' : null);
|
||||
|
||||
const shape = (this.round ? 'round' : null);
|
||||
|
||||
const display =
|
||||
(this.block ? 'block' : null) ||
|
||||
(this.full ? 'full' : null);
|
||||
|
||||
const decorator = (this.strong ? 'strong' : null);
|
||||
|
||||
const buttonClasses: CssClassObject = []
|
||||
.concat(
|
||||
this.getButtonClassList(this.buttonType, this.mode),
|
||||
this.getClassList(this.buttonType, shape, this.mode),
|
||||
this.getClassList(this.buttonType, display, this.mode),
|
||||
this.getClassList(this.buttonType, size, this.mode),
|
||||
this.getClassList(this.buttonType, decorator, this.mode),
|
||||
this.getStyleClassList(this.buttonType),
|
||||
this.getItemClassList(size),
|
||||
this.getElementClassList()
|
||||
)
|
||||
.reduce((prevValue, cssClass) => {
|
||||
prevValue[cssClass] = true;
|
||||
return prevValue;
|
||||
}, {});
|
||||
|
||||
const TagType = this.href ? 'a' : 'button';
|
||||
|
||||
return (
|
||||
<TagType class={buttonClasses} disabled={this.disabled}>
|
||||
<span class='button-inner'>
|
||||
<slot name='icon-only'></slot>
|
||||
<slot name='start'></slot>
|
||||
<slot></slot>
|
||||
<slot name='end'></slot>
|
||||
</span>
|
||||
<div class='button-effect'></div>
|
||||
</TagType>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,403 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./button";
|
||||
|
||||
// Windows Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-wp-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the button
|
||||
$button-wp-margin-top: .4rem !default;
|
||||
|
||||
/// @prop - Margin end of the button
|
||||
$button-wp-margin-end: .2rem !default;
|
||||
|
||||
/// @prop - Margin bottom of the button
|
||||
$button-wp-margin-bottom: .4rem !default;
|
||||
|
||||
/// @prop - Margin start of the button
|
||||
$button-wp-margin-start: .2rem !default;
|
||||
|
||||
// deprecated
|
||||
$button-wp-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the button
|
||||
$button-wp-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the button
|
||||
$button-wp-padding-end: 1.1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the button
|
||||
$button-wp-padding-bottom: $button-wp-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the button
|
||||
$button-wp-padding-start: $button-wp-padding-end !default;
|
||||
|
||||
/// @prop - Height of the button
|
||||
$button-wp-height: 3.6rem !default;
|
||||
|
||||
/// @prop - Border width of the button
|
||||
$button-wp-border-width: 3px !default;
|
||||
|
||||
/// @prop - Border style of the button
|
||||
$button-wp-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color of the button
|
||||
$button-wp-border-color: transparent !default;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-wp-border-radius: 0 !default;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-wp-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$button-wp-background-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$button-wp-text-color: color-contrast($colors-wp, $button-wp-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$button-wp-background-color-activated: color-shade($button-wp-background-color) !default;
|
||||
|
||||
|
||||
// Windows Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-wp-large-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the large button
|
||||
$button-wp-large-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the large button
|
||||
$button-wp-large-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the large button
|
||||
$button-wp-large-padding-bottom: $button-wp-large-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the large button
|
||||
$button-wp-large-padding-start: $button-wp-large-padding-end !default;
|
||||
|
||||
/// @prop - Height of the large button
|
||||
$button-wp-large-height: 2.8em !default;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-wp-large-font-size: 2rem !default;
|
||||
|
||||
|
||||
// Windows Small Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-wp-small-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the small button
|
||||
$button-wp-small-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the small button
|
||||
$button-wp-small-padding-end: .9em !default;
|
||||
|
||||
/// @prop - Padding bottom of the small button
|
||||
$button-wp-small-padding-bottom: $button-wp-small-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the small button
|
||||
$button-wp-small-padding-start: $button-wp-small-padding-end !default;
|
||||
|
||||
/// @prop - Height of the small button
|
||||
$button-wp-small-height: 2.1em !default;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
$button-wp-small-font-size: 1.3rem !default;
|
||||
|
||||
/// @prop - Font size of an icon in the small button
|
||||
$button-wp-small-icon-font-size: 1.4em !default;
|
||||
|
||||
|
||||
// Windows Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border width of the outline button
|
||||
$button-wp-outline-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the outline button
|
||||
$button-wp-outline-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color of the outline button
|
||||
$button-wp-outline-border-color: $button-wp-background-color !default;
|
||||
|
||||
/// @prop - Text color of the outline button
|
||||
$button-wp-outline-text-color: $button-wp-background-color !default;
|
||||
|
||||
/// @prop - Background color of the outline button
|
||||
$button-wp-outline-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the activated outline button
|
||||
$button-wp-outline-background-color-activated: $button-wp-background-color !default;
|
||||
|
||||
/// @prop - Opacity of the background color of the activated outline button
|
||||
$button-wp-outline-background-color-opacity-activated: .16 !default;
|
||||
|
||||
|
||||
// Windows Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the clear button
|
||||
$button-wp-clear-text-color: $button-wp-background-color !default;
|
||||
|
||||
/// @prop - Background color of the clear button
|
||||
$button-wp-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the activated clear button
|
||||
$button-wp-clear-background-color-activated: rgba(158, 158, 158, .2) !default;
|
||||
|
||||
/// @prop - Background color of the clear button on hover
|
||||
$button-wp-clear-background-color-hover: rgba(158, 158, 158, .1) !default;
|
||||
|
||||
|
||||
// Windows Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// deprecated
|
||||
$button-wp-round-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-wp-round-padding-top: $button-round-padding-top !default;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-wp-round-padding-end: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-wp-round-padding-bottom: $button-round-padding-bottom !default;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-wp-round-padding-start: $button-round-padding-start !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-wp-round-border-radius: $button-round-border-radius !default;
|
||||
|
||||
|
||||
// Material Design Decorator Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the strong button
|
||||
$button-wp-strong-font-weight: bold !default;
|
||||
|
||||
|
||||
// Windows Default Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-wp {
|
||||
@include border-radius($button-wp-border-radius);
|
||||
|
||||
height: $button-wp-height;
|
||||
|
||||
border: $button-wp-border-width $button-wp-border-style $button-wp-border-color;
|
||||
|
||||
font-size: $button-wp-font-size;
|
||||
|
||||
color: $button-wp-text-color;
|
||||
background-color: $button-wp-background-color;
|
||||
|
||||
@include deprecated-variable(margin, $button-wp-margin) {
|
||||
@include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $button-wp-padding) {
|
||||
@include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-wp:hover:not(.disable-hover) {
|
||||
border-color: $button-wp-background-color-activated;
|
||||
background-color: $button-wp-background-color;
|
||||
}
|
||||
|
||||
.button-wp.activated {
|
||||
background-color: $button-wp-background-color-activated;
|
||||
}
|
||||
|
||||
|
||||
// Windows Default Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@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-wp-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.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-wp {
|
||||
height: $button-wp-large-height;
|
||||
|
||||
font-size: $button-wp-large-font-size;
|
||||
|
||||
@include deprecated-variable(padding, $button-wp-large-padding) {
|
||||
@include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-small-wp {
|
||||
height: $button-wp-small-height;
|
||||
|
||||
font-size: $button-wp-small-font-size;
|
||||
|
||||
@include deprecated-variable(padding, $button-wp-small-padding) {
|
||||
@include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-small-wp ion-icon[slot="icon-only"] {
|
||||
font-size: $button-wp-small-icon-font-size;
|
||||
}
|
||||
|
||||
// Windows Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-block-wp {
|
||||
@include margin-horizontal(0);
|
||||
}
|
||||
|
||||
// Windows Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-full-wp {
|
||||
@include margin-horizontal(0);
|
||||
@include border-radius(0);
|
||||
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
// Windows Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.button-outline-wp:hover:not(.disable-hover) {
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
|
||||
.button-outline-wp.activated {
|
||||
background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity-activated);
|
||||
}
|
||||
|
||||
|
||||
// Windows Outline Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin wp-button-outline($color-name, $color-base, $color-contrast) {
|
||||
$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;
|
||||
}
|
||||
|
||||
.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-wp {
|
||||
color: $button-wp-clear-text-color;
|
||||
background-color: $button-wp-clear-background-color;
|
||||
}
|
||||
|
||||
.button-clear-wp.activated {
|
||||
background-color: $button-wp-clear-background-color-activated;
|
||||
}
|
||||
|
||||
.button-clear-wp:hover:not(.disable-hover) {
|
||||
background-color: $button-wp-clear-background-color-hover;
|
||||
}
|
||||
|
||||
|
||||
// Windows Clear Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin wp-button-clear($color-name, $color-base, $color-contrast) {
|
||||
$fg-color: $color-base;
|
||||
|
||||
.button-clear-wp-#{$color-name} {
|
||||
color: $fg-color;
|
||||
background-color: $button-wp-clear-background-color;
|
||||
}
|
||||
|
||||
.button-clear-wp-#{$color-name}.activated {
|
||||
background-color: $button-wp-clear-background-color-activated;
|
||||
}
|
||||
|
||||
.button-clear-wp-#{$color-name}:hover:not(.disable-hover) {
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Windows Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-round-wp {
|
||||
@include border-radius($button-wp-round-border-radius);
|
||||
|
||||
@include deprecated-variable(padding, $button-wp-round-padding) {
|
||||
@include padding($button-wp-round-padding-top, $button-wp-round-padding-end, $button-wp-round-padding-bottom, $button-wp-round-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.button-wp ion-icon[slot="icon-only"] {
|
||||
@include padding(0);
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
@include wp-button-default($color-name, $color-base, $color-contrast);
|
||||
@include wp-button-outline($color-name, $color-base, $color-contrast);
|
||||
@include wp-button-clear($color-name, $color-base, $color-contrast);
|
||||
}
|
||||
|
||||
|
||||
// WP strong Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-strong-wp {
|
||||
font-weight: $button-wp-strong-font-weight;
|
||||
}
|
||||
Reference in New Issue
Block a user