mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore(): remove all files that are duplicates of @ionic/core
This commit is contained in:
Josh Thomas
0
packages/ionic-angular/src/components/avatar/.save
Normal file
0
packages/ionic-angular/src/components/avatar/.save
Normal file
@@ -1,6 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./avatar";
|
||||
|
||||
|
||||
// iOS Avatar
|
||||
// --------------------------------------------------
|
||||
@@ -1,6 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./avatar";
|
||||
|
||||
|
||||
// Material Design Avatar
|
||||
// --------------------------------------------------
|
||||
@@ -1,9 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Avatar
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-avatar {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
|
||||
|
||||
/**
|
||||
* @name Avatar
|
||||
* @module ionic
|
||||
* @description
|
||||
* An Avatar is a component that creates a circular image for an item.
|
||||
* Avatars can be placed on the left or right side of an item with the `item-start` or `item-end` directive.
|
||||
* @see {@link /docs/components/#avatar-list Avatar Component Docs}
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-avatar',
|
||||
styleUrls: {
|
||||
ios: 'avatar.ios.scss',
|
||||
md: 'avatar.md.scss',
|
||||
wp: 'avatar.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'avatar'
|
||||
}
|
||||
})
|
||||
export class Avatar {
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./avatar";
|
||||
|
||||
|
||||
// Windows Avatar
|
||||
// --------------------------------------------------
|
||||
@@ -1,37 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./badge";
|
||||
|
||||
|
||||
// Material Design Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Background color of the badge
|
||||
$badge-md-background-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Text color of the badge
|
||||
$badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default;
|
||||
|
||||
|
||||
.badge-md {
|
||||
@include border-radius($badge-md-border-radius);
|
||||
|
||||
color: $badge-md-text-color;
|
||||
background-color: $badge-md-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Badge Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.badge-md-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the badge
|
||||
$badge-font-size: 1.3rem !default;
|
||||
|
||||
/// @prop - Font weight of the badge
|
||||
$badge-font-weight: bold !default;
|
||||
|
||||
|
||||
ion-badge {
|
||||
@include padding(3px, 8px);
|
||||
@include text-align(center);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
min-width: 10px;
|
||||
|
||||
font-size: $badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
ion-badge:empty {
|
||||
display: none;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-badge',
|
||||
styleUrls: {
|
||||
ios: 'badge.ios.scss',
|
||||
md: 'badge.md.scss',
|
||||
wp: 'badge.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'badge'
|
||||
}
|
||||
})
|
||||
export class Badge {
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./badge";
|
||||
|
||||
|
||||
// Windows Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-wp-border-radius: 0 !default;
|
||||
|
||||
/// @prop - Background color of the badge
|
||||
$badge-wp-background-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Text color of the badge
|
||||
$badge-wp-text-color: color-contrast($colors-wp, $badge-wp-background-color) !default;
|
||||
|
||||
|
||||
.badge-wp {
|
||||
@include border-radius($badge-wp-border-radius);
|
||||
|
||||
color: $badge-wp-text-color;
|
||||
background-color: $badge-wp-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Badge Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
.badge-wp-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
0
packages/ionic-angular/src/components/buttons/.save
Normal file
0
packages/ionic-angular/src/components/buttons/.save
Normal file
@@ -1,24 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-buttons',
|
||||
host: {
|
||||
theme: 'bar-buttons'
|
||||
}
|
||||
})
|
||||
export class Buttons {
|
||||
$el: HTMLElement;
|
||||
|
||||
ionViewWillLoad() {
|
||||
// Add bar-button classes to each ion-button
|
||||
const buttons = this.$el.querySelectorAll('ion-button') as any;
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].setAttribute('button-type', 'bar-button');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./card-content";
|
||||
|
||||
|
||||
// iOS Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-ios-padding-top: 13px !default;
|
||||
|
||||
// deprecated
|
||||
$card-ios-padding-right: 16px !default;
|
||||
/// @prop - Padding end of the card
|
||||
$card-ios-padding-end: $card-ios-padding-right;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-ios-padding-bottom: 14px !default;
|
||||
|
||||
// deprecated
|
||||
$card-ios-padding-left: 16px !default;
|
||||
/// @prop - Padding start of the card
|
||||
$card-ios-padding-start: $card-ios-padding-left;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
|
||||
|
||||
.card-content-ios {
|
||||
@include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);
|
||||
|
||||
font-size: $card-ios-font-size;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-header-ios + .card-content-ios,
|
||||
.card-ios .item + .card-content-ios {
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card Content Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.card-ios-#{$color-name} {
|
||||
.card-content-ios {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
.card-content-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./card-content";
|
||||
|
||||
|
||||
// Material Design Card Content
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-md-padding-top: 13px !default;
|
||||
|
||||
// deprecated
|
||||
$card-md-padding-right: 16px !default;
|
||||
/// @prop - Padding right of the card
|
||||
$card-md-padding-end: $card-md-padding-right;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-md-padding-bottom: 13px !default;
|
||||
|
||||
// deprecated
|
||||
$card-md-padding-left: 16px !default;
|
||||
/// @prop - Padding start of the card
|
||||
$card-md-padding-start: $card-md-padding-left;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-md-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Line height of the card
|
||||
$card-md-line-height: 1.5 !default;
|
||||
|
||||
|
||||
.card-content-md {
|
||||
@include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);
|
||||
|
||||
font-size: $card-md-font-size;
|
||||
line-height: $card-md-line-height;
|
||||
}
|
||||
|
||||
.card-header-md + .card-content-md,
|
||||
.card-md .item + .card-content-md {
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Card Content Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.card-md-#{$color-name} {
|
||||
|
||||
.card-content-md {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
.card-content-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Card Content
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-card-content {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-card-content',
|
||||
styleUrls: {
|
||||
ios: 'card-content.ios.scss',
|
||||
md: 'card-content.md.scss',
|
||||
wp: 'card-content.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'card-content'
|
||||
}
|
||||
})
|
||||
export class CardContent {
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./card-content";
|
||||
|
||||
|
||||
// Windows Card Content
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-wp-padding-top: 13px !default;
|
||||
|
||||
// deprecated
|
||||
$card-wp-padding-right: 16px !default;
|
||||
/// @prop - Padding end of the card
|
||||
$card-wp-padding-end: $card-wp-padding-right;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-wp-padding-bottom: 13px !default;
|
||||
|
||||
// deprecated
|
||||
$card-wp-padding-left: 16px !default;
|
||||
/// @prop - Padding start of the card
|
||||
$card-wp-padding-start: $card-wp-padding-left;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-wp-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Line height of the card
|
||||
$card-wp-line-height: 1.5 !default;
|
||||
|
||||
|
||||
.card-content-wp {
|
||||
@include padding($card-wp-padding-top, $card-wp-padding-end, $card-wp-padding-bottom, $card-wp-padding-start);
|
||||
|
||||
font-size: $card-wp-font-size;
|
||||
line-height: $card-wp-line-height;
|
||||
}
|
||||
|
||||
.card-header-wp + .card-content-wp,
|
||||
.card-wp .item + .card-content-wp {
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Card Content Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
.card-wp-#{$color-name} {
|
||||
|
||||
.card-content-wp {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
.card-content-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./card-header";
|
||||
|
||||
|
||||
// iOS Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card header
|
||||
$card-ios-header-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Font weight of the card header
|
||||
$card-ios-header-font-weight: 500 !default;
|
||||
|
||||
// deprecated
|
||||
$card-ios-header-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the card header
|
||||
$card-ios-header-padding-top: 16px !default;
|
||||
|
||||
/// @prop - Padding end of the card header
|
||||
$card-ios-header-padding-end: $card-ios-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card header
|
||||
$card-ios-header-padding-bottom: $card-ios-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card header
|
||||
$card-ios-header-padding-start: $card-ios-header-padding-end !default;
|
||||
|
||||
/// @prop - Color of the card header
|
||||
$card-ios-header-color: #333 !default;
|
||||
|
||||
|
||||
.card-header-ios {
|
||||
font-size: $card-ios-header-font-size;
|
||||
font-weight: $card-ios-header-font-weight;
|
||||
color: $card-ios-header-color;
|
||||
|
||||
@include deprecated-variable(padding, $card-ios-header-padding) {
|
||||
@include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card Header Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.card-ios-#{$color-name} {
|
||||
|
||||
.card-header-ios {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
.card-header-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./card-header";
|
||||
|
||||
|
||||
// Material Design Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card header
|
||||
$card-md-header-font-size: 1.6rem !default;
|
||||
|
||||
// deprecated
|
||||
$card-md-header-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the card header
|
||||
$card-md-header-padding-top: 16px !default;
|
||||
|
||||
/// @prop - Padding end of the card header
|
||||
$card-md-header-padding-end: $card-md-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card header
|
||||
$card-md-header-padding-bottom: $card-md-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card header
|
||||
$card-md-header-padding-start: $card-md-header-padding-end !default;
|
||||
|
||||
/// @prop - Color of the card header
|
||||
$card-md-header-color: #222 !default;
|
||||
|
||||
|
||||
.card-header-md {
|
||||
font-size: $card-md-header-font-size;
|
||||
color: $card-md-header-color;
|
||||
|
||||
@include deprecated-variable(padding, $card-md-header-padding) {
|
||||
@include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Card Header Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.card-md-#{$color-name} {
|
||||
|
||||
.card-header-md {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
.card-header-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-card-header {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-card-header',
|
||||
styleUrls: {
|
||||
ios: 'card-header.ios.scss',
|
||||
md: 'card-header.md.scss',
|
||||
wp: 'card-header.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'card-header'
|
||||
}
|
||||
})
|
||||
export class CardHeader {
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./card-header";
|
||||
|
||||
|
||||
// Windows Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card header
|
||||
$card-wp-header-font-size: 1.6rem !default;
|
||||
|
||||
// deprecated
|
||||
$card-wp-header-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the card header
|
||||
$card-wp-header-padding-top: 16px !default;
|
||||
|
||||
/// @prop - Padding end of the card header
|
||||
$card-wp-header-padding-end: $card-wp-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card header
|
||||
$card-wp-header-padding-bottom: $card-wp-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card header
|
||||
$card-wp-header-padding-start: $card-wp-header-padding-end !default;
|
||||
|
||||
/// @prop - Color of the card header
|
||||
$card-wp-header-color: #222 !default;
|
||||
|
||||
|
||||
.card-header-wp {
|
||||
font-size: $card-wp-header-font-size;
|
||||
|
||||
color: $card-wp-header-color;
|
||||
|
||||
@include deprecated-variable(padding, $card-wp-header-padding) {
|
||||
@include padding($card-wp-header-padding-top, $card-wp-header-padding-end, $card-wp-header-padding-bottom, $card-wp-header-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Card Header Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
.card-wp-#{$color-name} {
|
||||
|
||||
.card-header-wp {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
.card-header-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./card-title";
|
||||
|
||||
|
||||
// iOS Card Title
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card title
|
||||
$card-ios-title-font-size: 1.8rem !default;
|
||||
|
||||
// deprecated
|
||||
$card-ios-title-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the card title
|
||||
$card-ios-title-padding-top: 8px !default;
|
||||
|
||||
/// @prop - Padding end of the card title
|
||||
$card-ios-title-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the card title
|
||||
$card-ios-title-padding-bottom: 8px !default;
|
||||
|
||||
/// @prop - Padding start of the card title
|
||||
$card-ios-title-padding-start: 0 !default;
|
||||
|
||||
// deprecated
|
||||
$card-ios-title-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the card title
|
||||
$card-ios-title-margin-top: 2px !default;
|
||||
|
||||
/// @prop - Margin end of the card title
|
||||
$card-ios-title-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the card title
|
||||
$card-ios-title-margin-bottom: 2px !default;
|
||||
|
||||
/// @prop - Margin start of the card title
|
||||
$card-ios-title-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Color of the card title
|
||||
$card-ios-title-text-color: #222 !default;
|
||||
|
||||
|
||||
.card-title-ios {
|
||||
display: block;
|
||||
|
||||
font-size: $card-ios-title-font-size;
|
||||
line-height: 1.2;
|
||||
color: $card-ios-title-text-color;
|
||||
|
||||
@include deprecated-variable(margin, $card-ios-title-margin) {
|
||||
@include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $card-ios-title-padding) {
|
||||
@include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card Title Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.card-ios-#{$color-name} {
|
||||
|
||||
.card-title-ios {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
.card-title-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./card-title";
|
||||
|
||||
|
||||
// Material Design Card Title
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card title
|
||||
$card-md-title-font-size: 2.4rem !default;
|
||||
|
||||
// deprecated
|
||||
$card-md-title-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the card title
|
||||
$card-md-title-padding-top: 8px !default;
|
||||
|
||||
/// @prop - Padding end of the card title
|
||||
$card-md-title-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the card title
|
||||
$card-md-title-padding-bottom: 8px !default;
|
||||
|
||||
/// @prop - Padding start of the card title
|
||||
$card-md-title-padding-start: 0 !default;
|
||||
|
||||
// deprecated
|
||||
$card-md-title-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the card title
|
||||
$card-md-title-margin-top: 2px !default;
|
||||
|
||||
/// @prop - Margin end of the card title
|
||||
$card-md-title-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the card title
|
||||
$card-md-title-margin-bottom: 2px !default;
|
||||
|
||||
/// @prop - Margin start of the card title
|
||||
$card-md-title-margin-start: $card-md-title-margin-end !default;
|
||||
|
||||
/// @prop - Color of the card title
|
||||
$card-md-title-text-color: #222 !default;
|
||||
|
||||
|
||||
.card-title-md {
|
||||
display: block;
|
||||
|
||||
font-size: $card-md-title-font-size;
|
||||
line-height: 1.2;
|
||||
color: $card-md-title-text-color;
|
||||
|
||||
@include deprecated-variable(margin, $card-md-title-margin) {
|
||||
@include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $card-md-title-padding) {
|
||||
@include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Card Title Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.card-md-#{$color-name} {
|
||||
|
||||
.card-title-md {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
.card-title-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Card Title
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-card-title {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-card-title',
|
||||
styleUrls: {
|
||||
ios: 'card-title.ios.scss',
|
||||
md: 'card-title.md.scss',
|
||||
wp: 'card-title.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'card-title'
|
||||
}
|
||||
})
|
||||
export class CardTitle {
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./card-title";
|
||||
|
||||
|
||||
// Windows Card Title
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of card title
|
||||
$card-wp-title-font-size: 2.4rem !default;
|
||||
|
||||
// deprecated
|
||||
$card-wp-title-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the card title
|
||||
$card-wp-title-padding-top: 8px !default;
|
||||
|
||||
/// @prop - Padding end of the card title
|
||||
$card-wp-title-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the card title
|
||||
$card-wp-title-padding-bottom: 8px !default;
|
||||
|
||||
/// @prop - Padding start of the card title
|
||||
$card-wp-title-padding-start: 0 !default;
|
||||
|
||||
// deprecated
|
||||
$card-wp-title-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the card title
|
||||
$card-wp-title-margin-top: 2px !default;
|
||||
|
||||
/// @prop - Margin end of the card title
|
||||
$card-wp-title-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the card title
|
||||
$card-wp-title-margin-bottom: $card-wp-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the card title
|
||||
$card-wp-title-margin-start: $card-wp-title-margin-end !default;
|
||||
|
||||
/// @prop - Color of the card title
|
||||
$card-wp-title-text-color: #222 !default;
|
||||
|
||||
|
||||
.card-title-wp {
|
||||
display: block;
|
||||
|
||||
font-size: $card-wp-title-font-size;
|
||||
line-height: 1.2;
|
||||
color: $card-wp-title-text-color;
|
||||
|
||||
@include deprecated-variable(margin, $card-wp-title-margin) {
|
||||
@include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $card-wp-title-padding) {
|
||||
@include padding($card-wp-title-padding-top, $card-wp-title-padding-end, $card-wp-title-padding-bottom, $card-wp-title-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Card Title Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
.card-wp-#{$color-name} {
|
||||
|
||||
.card-title-wp {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
.card-title-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./card";
|
||||
|
||||
|
||||
// iOS Card
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the card
|
||||
$card-ios-margin-top: 12px !default;
|
||||
|
||||
// deprecated
|
||||
$card-ios-margin-right: 12px !default;
|
||||
/// @prop - Margin end of the card
|
||||
$card-ios-margin-end: $card-ios-margin-right !default;
|
||||
|
||||
/// @prop - Margin bottom of the card
|
||||
$card-ios-margin-bottom: 12px !default;
|
||||
|
||||
// deprecated
|
||||
$card-ios-margin-left: 12px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-ios-margin-start: $card-ios-margin-left !default;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-ios-padding-media-top: 10px !default;
|
||||
|
||||
/// @prop - Padding bottom of the media on the card
|
||||
$card-ios-padding-media-bottom: 9px !default;
|
||||
|
||||
/// @prop - Background color of the card
|
||||
$card-ios-background-color: $list-ios-background-color !default;
|
||||
|
||||
/// @prop - Box shadow color of the card
|
||||
$card-ios-box-shadow-color: rgba(0, 0, 0, .3) !default;
|
||||
|
||||
/// @prop - Box shadow of the card
|
||||
$card-ios-box-shadow: 0 1px 2px $card-ios-box-shadow-color !default;
|
||||
|
||||
/// @prop - Border radius of the card
|
||||
$card-ios-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Color of the card text
|
||||
$card-ios-text-color: #666 !default;
|
||||
|
||||
|
||||
.card-ios {
|
||||
@include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
|
||||
@include border-radius($card-ios-border-radius);
|
||||
|
||||
width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
|
||||
|
||||
font-size: $card-ios-font-size;
|
||||
|
||||
background: $card-ios-background-color;
|
||||
box-shadow: $card-ios-box-shadow;
|
||||
}
|
||||
|
||||
.card-ios ion-list {
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.card-ios > .item:last-child,
|
||||
.card-ios > .item:last-child .item-inner,
|
||||
.card-ios > .item-wrapper:last-child .item {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-ios .item-ios.item-block .item-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card .note-ios {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card-ios h1 {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-ios h2 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-ios h3,
|
||||
.card-ios h4,
|
||||
.card-ios h5,
|
||||
.card-ios h6 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-ios p {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 1.4rem;
|
||||
color: $card-ios-text-color;
|
||||
}
|
||||
|
||||
.card-ios + ion-card {
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.card-ios .text-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
.card-ios-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
|
||||
p {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
.text-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,156 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./card";
|
||||
|
||||
|
||||
// Material Design Card
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the card
|
||||
$card-md-margin-top: 10px !default;
|
||||
|
||||
// deprecated
|
||||
$card-md-margin-right: 10px !default;
|
||||
/// @prop - Margin end of the card
|
||||
$card-md-margin-end: $card-md-margin-right !default;
|
||||
|
||||
/// @prop - Margin bottom of the card
|
||||
$card-md-margin-bottom: 10px !default;
|
||||
|
||||
// deprecated
|
||||
$card-md-margin-left: 10px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-md-margin-start: $card-md-margin-left !default;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-md-padding-media-top: 10px !default;
|
||||
|
||||
/// @prop - Padding bottom of the media on the card
|
||||
$card-md-padding-media-bottom: 10px !default;
|
||||
|
||||
/// @prop - Size of the card avatar
|
||||
$card-md-avatar-size: 4rem !default;
|
||||
|
||||
/// @prop - Size of the card thumbnail
|
||||
$card-md-thumbnail-size: 8rem !default;
|
||||
|
||||
/// @prop - Background color of the card
|
||||
$card-md-background-color: $list-md-background-color !default;
|
||||
|
||||
/// @prop - Box shadow of the card
|
||||
$card-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 - Border radius of the card
|
||||
$card-md-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-md-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Line height of the card
|
||||
$card-md-line-height: 1.5 !default;
|
||||
|
||||
/// @prop - Color of the card text
|
||||
$card-md-text-color: #222 !default;
|
||||
|
||||
|
||||
.card-md {
|
||||
@include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
|
||||
@include border-radius($card-md-border-radius);
|
||||
|
||||
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
|
||||
|
||||
font-size: $card-md-font-size;
|
||||
|
||||
background: $card-md-background-color;
|
||||
box-shadow: $card-md-box-shadow;
|
||||
}
|
||||
|
||||
.card-md ion-list {
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.card-md > .item:last-child,
|
||||
.card-md > .item:last-child .item-inner,
|
||||
.card-md > .item-wrapper:last-child .item {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-md .item-md.item-block .item-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card .note-md {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card-md h1 {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
.card-md h2 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
.card-md h3,
|
||||
.card-md h4,
|
||||
.card-md h5,
|
||||
.card-md h6 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
.card-md p {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
.card-md + ion-card {
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Card Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.card-md .text-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
.card-md-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
.text-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Card
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-card {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ion-card img {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-card',
|
||||
styleUrls: {
|
||||
ios: 'card.ios.scss',
|
||||
md: 'card.md.scss',
|
||||
wp: 'card.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'card'
|
||||
}
|
||||
})
|
||||
export class Card {
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./card";
|
||||
|
||||
|
||||
// Windows Card
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the card
|
||||
$card-wp-margin-top: 8px !default;
|
||||
|
||||
// deprecated
|
||||
$card-wp-margin-right: 8px !default;
|
||||
/// @prop - Margin end of the card
|
||||
$card-wp-margin-end: $card-wp-margin-right !default;
|
||||
|
||||
/// @prop - Margin bottom of the card
|
||||
$card-wp-margin-bottom: 8px !default;
|
||||
|
||||
// deprecated
|
||||
$card-wp-margin-left: 8px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-wp-margin-start: $card-wp-margin-left !default;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-wp-padding-media-top: 10px !default;
|
||||
|
||||
/// @prop - Padding bottom of the media on the card
|
||||
$card-wp-padding-media-bottom: 10px !default;
|
||||
|
||||
/// @prop - Size of the card avatar
|
||||
$card-wp-avatar-size: 4rem !default;
|
||||
|
||||
/// @prop - Size of the card thumbnail
|
||||
$card-wp-thumbnail-size: 8rem !default;
|
||||
|
||||
/// @prop - Background color of the card
|
||||
$card-wp-background-color: $list-wp-background-color !default;
|
||||
|
||||
/// @prop - Box shadow color of the card
|
||||
$card-wp-box-shadow-color: rgba(0, 0, 0, .2) !default;
|
||||
|
||||
/// @prop - Box shadow of the card
|
||||
$card-wp-box-shadow: 0 1px 1px 1px $card-wp-box-shadow-color !default;
|
||||
|
||||
/// @prop - Border radius of the card
|
||||
$card-wp-border-radius: 1px !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-wp-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Line height of the card
|
||||
$card-wp-line-height: 1.5 !default;
|
||||
|
||||
/// @prop - Color of the card text
|
||||
$card-wp-text-color: #222 !default;
|
||||
|
||||
|
||||
.card-wp {
|
||||
@include margin($card-wp-margin-top, $card-wp-margin-end, $card-wp-margin-bottom, $card-wp-margin-start);
|
||||
@include border-radius($card-wp-border-radius);
|
||||
|
||||
width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
|
||||
|
||||
font-size: $card-wp-font-size;
|
||||
|
||||
background: $card-wp-background-color;
|
||||
box-shadow: $card-wp-box-shadow;
|
||||
}
|
||||
|
||||
.card-wp ion-list {
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.card-wp > .item:last-child,
|
||||
.card-wp > .item:last-child .item-inner,
|
||||
.card-wp > .item-wrapper:last-child .item {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-wp .item-wp.item-block .item-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card .note-wp {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card-wp h1 {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
color: $card-wp-text-color;
|
||||
}
|
||||
|
||||
.card-wp h2 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
color: $card-wp-text-color;
|
||||
}
|
||||
|
||||
.card-wp h3,
|
||||
.card-wp h4,
|
||||
.card-wp h5,
|
||||
.card-wp h6 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: $card-wp-text-color;
|
||||
}
|
||||
|
||||
.card-wp p {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
color: $card-wp-text-color;
|
||||
}
|
||||
|
||||
.card-wp + ion-card {
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Card Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
.card-wp .text-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
.card-wp-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
.text-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./icon";
|
||||
|
||||
// iOS Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Generate iOS Icon Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.icon-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./icon";
|
||||
|
||||
// Material Design Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Generate Material Design Icon Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.icon-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
@import "../../fonts/ionicons";
|
||||
|
||||
// Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-icon {
|
||||
display: inline-block;
|
||||
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
ion-icon[small] {
|
||||
min-height: 1.1em;
|
||||
|
||||
font-size: 1.1em;
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
import { Component, h, Ionic, Prop, State } from '../index';
|
||||
import { CssClassObject, VNodeData } from '../../util/interfaces';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-icon',
|
||||
styleUrls: {
|
||||
ios: 'icon.ios.scss',
|
||||
md: 'icon.md.scss',
|
||||
wp: 'icon.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'icon'
|
||||
}
|
||||
})
|
||||
export class Icon {
|
||||
mode: string;
|
||||
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* @input {string} Specifies the label to use for accessibility. Defaults to the icon name.
|
||||
*/
|
||||
@State() label: string = '';
|
||||
|
||||
/**
|
||||
* @input {string} Specifies the mode to use for the icon.
|
||||
*/
|
||||
@State() iconMode: string = '';
|
||||
|
||||
/**
|
||||
* @input {string} Specifies which icon to use. The appropriate icon will be used based on the mode.
|
||||
* For more information, see [Ionicons](/docs/ionicons/).
|
||||
*/
|
||||
@Prop() name: string = '';
|
||||
|
||||
/**
|
||||
* @input {string} Specifies which icon to use on `ios` mode.
|
||||
*/
|
||||
@Prop() ios: string = '';
|
||||
|
||||
/**
|
||||
* @input {string} Specifies which icon to use on `md` mode.
|
||||
*/
|
||||
@Prop() md: string = '';
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, the icon is styled with an "active" appearance.
|
||||
* An active icon is filled in, and an inactive icon is the outline of the icon.
|
||||
* The `isActive` property is largely used by the tabbar. Only affects `ios` icons.
|
||||
*/
|
||||
@Prop() isActive: boolean = null;
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, the icon is hidden.
|
||||
*/
|
||||
@Prop() hidden: boolean = false;
|
||||
|
||||
getElementClass(): string {
|
||||
let iconName: string;
|
||||
|
||||
// If no name was passed set iconName to null
|
||||
if (!this.name) {
|
||||
iconName = null;
|
||||
} else if (!(/^md-|^ios-|^logo-/.test(this.name))) {
|
||||
// this does not have one of the defaults
|
||||
// so lets auto add in the mode prefix for them
|
||||
iconName = this.iconMode + '-' + this.name;
|
||||
} else if (this.name) {
|
||||
iconName = this.name;
|
||||
}
|
||||
|
||||
// If an icon was passed in using the ios or md attributes
|
||||
// set the iconName to whatever was passed in
|
||||
if (this.ios && this.iconMode === 'ios') {
|
||||
iconName = this.ios;
|
||||
} else if (this.md && this.iconMode === 'md') {
|
||||
iconName = this.md;
|
||||
}
|
||||
|
||||
if ((iconName === null) || (this.hidden === true)) {
|
||||
console.warn('Icon is hidden.');
|
||||
return 'hide';
|
||||
}
|
||||
|
||||
let iconMode = iconName.split('-', 2)[0];
|
||||
if (
|
||||
iconMode === 'ios' &&
|
||||
this.isActive === false &&
|
||||
iconName.indexOf('logo-') < 0 &&
|
||||
iconName.indexOf('-outline') < 0) {
|
||||
iconName += '-outline';
|
||||
}
|
||||
|
||||
let label = iconName
|
||||
.replace('ios-', '')
|
||||
.replace('md-', '')
|
||||
.replace('-', ' ');
|
||||
this.label = label;
|
||||
|
||||
return `ion-${iconName}`;
|
||||
}
|
||||
|
||||
hostData(): VNodeData {
|
||||
// TODO set the right iconMode based on the config
|
||||
let iconMode = this.mode === 'md' ? 'md' : 'ios';
|
||||
this.iconMode = iconMode || Ionic.config.get('iconMode');
|
||||
|
||||
const iconClasses: CssClassObject = []
|
||||
.concat(
|
||||
this.getElementClass(),
|
||||
)
|
||||
.reduce((prevValue, cssClass) => {
|
||||
prevValue[cssClass] = true;
|
||||
return prevValue;
|
||||
}, {});
|
||||
|
||||
return {
|
||||
class: iconClasses,
|
||||
attrs: {
|
||||
'role': 'img'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./icon";
|
||||
|
||||
// Windows Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Generate Windows Icon Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
.icon-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
|
||||
import * as interfaces from '../util/interfaces';
|
||||
|
||||
|
||||
export declare const Component: interfaces.ComponentDecorator;
|
||||
|
||||
export declare const h: interfaces.Hyperscript;
|
||||
|
||||
export declare const Ionic: interfaces.Ionic;
|
||||
|
||||
export declare const Listen: interfaces.ListenDecorator;
|
||||
|
||||
export declare const Method: interfaces.MethodDecorator;
|
||||
|
||||
export declare const Prop: interfaces.PropDecorator;
|
||||
|
||||
export declare const State: interfaces.StateDecorator;
|
||||
|
||||
export declare const Watch: interfaces.WatchDecorator;
|
||||
@@ -1,47 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Slide
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-zoom {
|
||||
@include text-align(center);
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
|
||||
// Center slide text vertically
|
||||
display: flex;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Component, h } from '../index';
|
||||
import { VNodeData } from '../../util/interfaces';
|
||||
|
||||
/**
|
||||
* @name Slide
|
||||
* @description
|
||||
* The Slide component is a child component of [Slides](../Slides). The template
|
||||
* should be written as `ion-slide`. Any slide content should be written
|
||||
* in this component and it should be used in conjunction with [Slides](../Slides).
|
||||
*
|
||||
* See the [Slides API Docs](../Slides) for more usage information.
|
||||
*
|
||||
* @demo /docs/demos/src/slides/
|
||||
* @see {@link /docs/api/components/slides/Slides/ Slides API Docs}
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-slide',
|
||||
styleUrls: 'slide.scss'
|
||||
})
|
||||
export class Slide {
|
||||
hostData(): VNodeData {
|
||||
return {
|
||||
class: {
|
||||
'slide-zoom': true,
|
||||
'swiper-slide': true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@@ -1,575 +0,0 @@
|
||||
/**
|
||||
* Swiper 3.4.2
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
*
|
||||
* http://www.idangero.us/swiper/
|
||||
*
|
||||
* Copyright 2017, Vladimir Kharlampidi
|
||||
* The iDangero.us
|
||||
* http://www.idangero.us/
|
||||
*
|
||||
* Licensed under MIT
|
||||
*
|
||||
* Released on: March 10, 2017
|
||||
*/
|
||||
.swiper-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Fix of Webkit flickering */
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper-container-no-flexbox .swiper-slide {
|
||||
float: left;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-wrapper {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-moz-transition-property: -moz-transform;
|
||||
-o-transition-property: -o-transform;
|
||||
-ms-transition-property: -ms-transform;
|
||||
transition-property: transform;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.swiper-container-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
-webkit-transform: translate3d(0px, 0, 0);
|
||||
-moz-transform: translate3d(0px, 0, 0);
|
||||
-o-transform: translate(0px, 0px);
|
||||
-ms-transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0px, 0, 0);
|
||||
}
|
||||
.swiper-container-multirow > .swiper-wrapper {
|
||||
-webkit-box-lines: multiple;
|
||||
-moz-box-lines: multiple;
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.swiper-container-free-mode > .swiper-wrapper {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
-ms-transition-timing-function: ease-out;
|
||||
-o-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
/* Auto Height */
|
||||
.swiper-container-autoheight,
|
||||
.swiper-container-autoheight .swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
.swiper-container-autoheight .swiper-wrapper {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
-webkit-transition-property: -webkit-transform, height;
|
||||
-moz-transition-property: -moz-transform;
|
||||
-o-transition-property: -o-transform;
|
||||
-ms-transition-property: -ms-transform;
|
||||
transition-property: transform, height;
|
||||
}
|
||||
/* a11y */
|
||||
.swiper-container .swiper-notification {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
/* IE10 Windows Phone 8 Fixes */
|
||||
.swiper-wp8-horizontal {
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.swiper-wp8-vertical {
|
||||
-ms-touch-action: pan-x;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
/* Arrows */
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 27px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
-moz-background-size: 27px 44px;
|
||||
-webkit-background-size: 27px 44px;
|
||||
background-size: 27px 44px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.swiper-button-prev.swiper-button-disabled,
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-container-rtl .swiper-button-next {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
.swiper-button-prev.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-prev.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-next.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-next,
|
||||
.swiper-container-rtl .swiper-button-prev {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
.swiper-button-next.swiper-button-black,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.swiper-button-next.swiper-button-white,
|
||||
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
/* Pagination Styles */
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
-webkit-transition: 300ms;
|
||||
-moz-transition: 300ms;
|
||||
-o-transition: 300ms;
|
||||
transition: 300ms;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
/* Common Styles */
|
||||
.swiper-pagination-fraction,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/* Bullets */
|
||||
.swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor: pointer;
|
||||
}
|
||||
.swiper-pagination-white .swiper-pagination-bullet {
|
||||
background: #fff;
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #007aff;
|
||||
}
|
||||
.swiper-pagination-white .swiper-pagination-bullet-active {
|
||||
background: #fff;
|
||||
}
|
||||
.swiper-pagination-black .swiper-pagination-bullet-active {
|
||||
background: #000;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translate3d(0px, -50%, 0);
|
||||
-moz-transform: translate3d(0px, -50%, 0);
|
||||
-o-transform: translate(0px, -50%);
|
||||
-ms-transform: translate3d(0px, -50%, 0);
|
||||
transform: translate3d(0px, -50%, 0);
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 5px;
|
||||
}
|
||||
/* Progress */
|
||||
.swiper-pagination-progress {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
}
|
||||
.swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
background: #007aff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transform-origin: left top;
|
||||
-moz-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
-o-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
-webkit-transform-origin: right top;
|
||||
-moz-transform-origin: right top;
|
||||
-ms-transform-origin: right top;
|
||||
-o-transform-origin: right top;
|
||||
transform-origin: right top;
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-pagination-progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-progress {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-pagination-progress.swiper-pagination-white {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
|
||||
background: #fff;
|
||||
}
|
||||
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
|
||||
background: #000;
|
||||
}
|
||||
/* 3D Container */
|
||||
.swiper-container-3d {
|
||||
-webkit-perspective: 1200px;
|
||||
-moz-perspective: 1200px;
|
||||
-o-perspective: 1200px;
|
||||
perspective: 1200px;
|
||||
}
|
||||
.swiper-container-3d .swiper-wrapper,
|
||||
.swiper-container-3d .swiper-slide,
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom,
|
||||
.swiper-container-3d .swiper-cube-shadow {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-ms-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-left,
|
||||
.swiper-container-3d .swiper-slide-shadow-right,
|
||||
.swiper-container-3d .swiper-slide-shadow-top,
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-left {
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-right {
|
||||
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-top {
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
||||
/* Safari 4+, Chrome */
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
||||
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 3.6-15 */
|
||||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Opera 11.10-12.00 */
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
||||
}
|
||||
/* Coverflow */
|
||||
.swiper-container-coverflow .swiper-wrapper,
|
||||
.swiper-container-flip .swiper-wrapper {
|
||||
/* Windows 8 IE 10 fix */
|
||||
-ms-perspective: 1200px;
|
||||
}
|
||||
/* Cube + Flip */
|
||||
.swiper-container-cube,
|
||||
.swiper-container-flip {
|
||||
overflow: visible;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide,
|
||||
.swiper-container-flip .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide .swiper-slide,
|
||||
.swiper-container-flip .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
|
||||
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-shadow-top,
|
||||
.swiper-container-flip .swiper-slide-shadow-top,
|
||||
.swiper-container-cube .swiper-slide-shadow-bottom,
|
||||
.swiper-container-flip .swiper-slide-shadow-bottom,
|
||||
.swiper-container-cube .swiper-slide-shadow-left,
|
||||
.swiper-container-flip .swiper-slide-shadow-left,
|
||||
.swiper-container-cube .swiper-slide-shadow-right,
|
||||
.swiper-container-flip .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
/* Cube */
|
||||
.swiper-container-cube .swiper-slide {
|
||||
visibility: hidden;
|
||||
-webkit-transform-origin: 0 0;
|
||||
-moz-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-container-cube.swiper-container-rtl .swiper-slide {
|
||||
-webkit-transform-origin: 100% 0;
|
||||
-moz-transform-origin: 100% 0;
|
||||
-ms-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
.swiper-container-cube .swiper-slide-active,
|
||||
.swiper-container-cube .swiper-slide-next,
|
||||
.swiper-container-cube .swiper-slide-prev,
|
||||
.swiper-container-cube .swiper-slide-next + .swiper-slide {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
.swiper-container-cube .swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
/* Fade */
|
||||
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
-moz-transition-timing-function: ease-out;
|
||||
-ms-transition-timing-function: ease-out;
|
||||
-o-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide {
|
||||
pointer-events: none;
|
||||
-webkit-transition-property: opacity;
|
||||
-moz-transition-property: opacity;
|
||||
-o-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide .swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
.swiper-container-fade .swiper-slide-active,
|
||||
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.swiper-zoom-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.swiper-zoom-container > img,
|
||||
.swiper-zoom-container > svg,
|
||||
.swiper-zoom-container > canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
/* Scrollbar */
|
||||
.swiper-scrollbar {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.swiper-container-horizontal > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
bottom: 3px;
|
||||
z-index: 50;
|
||||
height: 5px;
|
||||
width: 98%;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-scrollbar {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 1%;
|
||||
z-index: 50;
|
||||
width: 5px;
|
||||
height: 98%;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor: move;
|
||||
}
|
||||
/* Preloader */
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
-webkit-transform-origin: 50%;
|
||||
-moz-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
}
|
||||
.swiper-lazy-preloader:after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
background-position: 50%;
|
||||
-webkit-background-size: 100%;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.swiper-lazy-preloader-white:after {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
@-webkit-keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
@import "./slides-import";
|
||||
|
||||
|
||||
// Slides
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
ion-slides {
|
||||
display: block;
|
||||
}
|
||||
@@ -1,524 +0,0 @@
|
||||
import { Component, h, Ionic, Prop } from '../index';
|
||||
import { Swiper } from '../../vendor/swiper';
|
||||
|
||||
/**
|
||||
* @name Slides
|
||||
* @description
|
||||
* The Slides component is a multi-section container. Each section can be swiped
|
||||
* or dragged between. It contains any number of [Slide](../Slide) components.
|
||||
*
|
||||
*
|
||||
* Adopted from Swiper.js:
|
||||
* The most modern mobile touch slider and framework with
|
||||
* hardware accelerated transitions.
|
||||
*
|
||||
* http://www.idangero.us/swiper/
|
||||
*
|
||||
* Copyright 2016, Vladimir Kharlampidi
|
||||
* The iDangero.us
|
||||
* http://www.idangero.us/
|
||||
*
|
||||
* Licensed under MIT
|
||||
*/
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-slides',
|
||||
styleUrls: 'slides.scss'
|
||||
})
|
||||
export class Slides {
|
||||
swiper: any;
|
||||
$el: HTMLElement;
|
||||
|
||||
/**
|
||||
* @input {string} The animation effect of the slides.
|
||||
* Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`.
|
||||
* Default: `slide`.
|
||||
*/
|
||||
@Prop() effect: string = 'slide';
|
||||
|
||||
/**
|
||||
* @input {number} Delay between transitions (in milliseconds). If this
|
||||
* parameter is not passed, autoplay is disabled. Default does
|
||||
* not have a value and does not autoplay.
|
||||
* Default: `null`.
|
||||
*/
|
||||
@Prop() autoplay: number;
|
||||
|
||||
/**
|
||||
* @input {Slides} Pass another Slides instance or array of Slides instances
|
||||
* that should be controlled by this Slides instance.
|
||||
* Default: `null`.
|
||||
*/
|
||||
@Prop() control: Slides | Slides[] = null;
|
||||
|
||||
/**
|
||||
* @input {string} Swipe direction: 'horizontal' or 'vertical'.
|
||||
* Default: `horizontal`.
|
||||
*/
|
||||
@Prop() direction: 'horizontal' | 'vertical' = 'horizontal';
|
||||
|
||||
/**
|
||||
* @input {number} Index number of initial slide. Default: `0`.
|
||||
*/
|
||||
@Prop() initialSlide: number = 0;
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, continuously loop from the last slide to the
|
||||
* first slide.
|
||||
*/
|
||||
@Prop() loop: boolean = false;
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, show the pager.
|
||||
*/
|
||||
@Prop() pager: boolean;
|
||||
|
||||
/**
|
||||
* @input {string} Type of pagination. Possible values are:
|
||||
* `bullets`, `fraction`, `progress`. Default: `bullets`.
|
||||
* (Note that the pager will not show unless `pager` input
|
||||
* is set to true).
|
||||
*/
|
||||
@Prop() paginationType: string = 'bullets';
|
||||
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, allows you to use "parallaxed" elements inside of
|
||||
* slider.
|
||||
*/
|
||||
@Prop() parallax: boolean = false;
|
||||
|
||||
/**
|
||||
* @input {number} Slides per view. Slides visible at the same time. Default: `1`.
|
||||
*/
|
||||
@Prop() slidesPerView: number | 'auto' = 1;
|
||||
|
||||
/**
|
||||
* @input {number} Distance between slides in px. Default: `0`.
|
||||
*/
|
||||
@Prop() spaceBetween: number = 0;
|
||||
|
||||
/**
|
||||
* @input {number} Duration of transition between slides
|
||||
* (in milliseconds). Default: `300`.
|
||||
*/
|
||||
@Prop() speed: number = 300;
|
||||
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, enables zooming functionality.
|
||||
*/
|
||||
@Prop() zoom: boolean;
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, enables keyboard control
|
||||
*/
|
||||
@Prop() keyboardControl: boolean;
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class='swiper-container' data-dir='rtl'>
|
||||
<div class='swiper-wrapper'>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class={{
|
||||
'swiper-pagination': true,
|
||||
'hide': !this.pager
|
||||
}}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Height of container.
|
||||
*/
|
||||
height: number;
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Width of container.
|
||||
*/
|
||||
width: number;
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Enabled this option and swiper will be operated as usual except it will
|
||||
* not move, real translate values on wrapper will not be set. Useful when
|
||||
* you may need to create custom slide transition.
|
||||
*/
|
||||
virtualTranslate = false;
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Set to true to round values of slides width and height to prevent blurry
|
||||
* texts on usual resolution screens (if you have such)
|
||||
*/
|
||||
roundLengths = false;
|
||||
|
||||
// Slides grid
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
originalEvent: any;
|
||||
|
||||
emitEvent(eventName: string) {
|
||||
return (data: any) => {
|
||||
Ionic.emit(this, eventName, data);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Private properties only useful to this class.
|
||||
* ------------------------------------
|
||||
*/
|
||||
private _init: boolean;
|
||||
private _tmr: number;
|
||||
|
||||
/**
|
||||
* Properties that are exposed publically but no docs.
|
||||
* ------------------------------------
|
||||
*/
|
||||
/** @hidden */
|
||||
container: HTMLElement;
|
||||
/** @hidden */
|
||||
id: number;
|
||||
/** @hidden */
|
||||
renderedHeight: number;
|
||||
/** @hidden */
|
||||
renderedWidth: number;
|
||||
/** @hidden */
|
||||
slideId: string;
|
||||
/** @hidden */
|
||||
swipeDirection: string;
|
||||
/** @hidden */
|
||||
velocity: number;
|
||||
|
||||
|
||||
/**
|
||||
* Properties which are for internal use only
|
||||
* and not exposed to the public
|
||||
* ------------------------------------
|
||||
*/
|
||||
|
||||
/** @hidden */
|
||||
nextButton: HTMLElement;
|
||||
/** @hidden */
|
||||
prevButton: HTMLElement;
|
||||
|
||||
|
||||
|
||||
constructor(
|
||||
) {
|
||||
this.id = ++slidesId;
|
||||
this.slideId = 'slides-' + this.id;
|
||||
}
|
||||
|
||||
private _initSlides() {
|
||||
if (!this._init) {
|
||||
console.debug(`ion-slides, init`);
|
||||
|
||||
this.container = this.$el.children[0] as HTMLElement;
|
||||
|
||||
var swiperOptions = {
|
||||
height: this.height,
|
||||
width: this.width,
|
||||
virtualTranslate: this.virtualTranslate,
|
||||
roundLengths: this.roundLengths,
|
||||
originalEvent: this.originalEvent,
|
||||
autoplay: this.autoplay,
|
||||
direction: this.direction,
|
||||
initialSlide: this.initialSlide,
|
||||
loop: this.loop,
|
||||
pager: this.pager,
|
||||
paginationType: this.paginationType,
|
||||
parallax: this.parallax,
|
||||
slidesPerView: this.slidesPerView,
|
||||
spaceBetween: this.spaceBetween,
|
||||
speed: this.speed,
|
||||
zoom: this.zoom,
|
||||
slidesPerColumn: 1,
|
||||
slidesPerColumnFill: 'column',
|
||||
slidesPerGroup: 1,
|
||||
centeredSlides: false,
|
||||
slidesOffsetBefore: 0,
|
||||
slidesOffsetAfter: 0,
|
||||
touchEventsTarget: 'container',
|
||||
autoplayDisableOnInteraction: true,
|
||||
autoplayStopOnLast: false,
|
||||
freeMode: false,
|
||||
freeModeMomentum: true,
|
||||
freeModeMomentumRatio: 1,
|
||||
freeModeMomentumBounce: true,
|
||||
freeModeMomentumBounceRatio: 1,
|
||||
freeModeMomentumVelocityRatio: 1,
|
||||
freeModeSticky: false,
|
||||
freeModeMinimumVelocity: 0.02,
|
||||
autoHeight: false,
|
||||
setWrapperSize: false,
|
||||
zoomMax: 3,
|
||||
zoomMin: 1,
|
||||
zoomToggle: true,
|
||||
touchRatio: 1,
|
||||
touchAngle: 45,
|
||||
simulateTouch: true,
|
||||
shortSwipes: true,
|
||||
longSwipes: true,
|
||||
longSwipesRatio: 0.5,
|
||||
longSwipesMs: 300,
|
||||
followFinger: true,
|
||||
onlyExternal: false,
|
||||
threshold: 0,
|
||||
touchMoveStopPropagation: true,
|
||||
touchReleaseOnEdges: false,
|
||||
iOSEdgeSwipeDetection: false,
|
||||
iOSEdgeSwipeThreshold: 20,
|
||||
paginationClickable: false,
|
||||
paginationHide: false,
|
||||
resistance: true,
|
||||
resistanceRatio: 0.85,
|
||||
watchSlidesProgress: false,
|
||||
watchSlidesVisibility: false,
|
||||
preventClicks: true,
|
||||
preventClicksPropagation: true,
|
||||
slideToClickedSlide: false,
|
||||
loopAdditionalSlides: 0,
|
||||
noSwiping: true,
|
||||
runCallbacksOnInit: true,
|
||||
controlBy: 'slide',
|
||||
controlInverse: false,
|
||||
keyboardControl: true,
|
||||
coverflow: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
modifier: 1,
|
||||
slideShadows: true
|
||||
},
|
||||
flip: {
|
||||
slideShadows: true,
|
||||
limitRotation: true
|
||||
},
|
||||
cube: {
|
||||
slideShadows: true,
|
||||
shadow: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94
|
||||
},
|
||||
fade: {
|
||||
crossFade: false
|
||||
},
|
||||
prevSlideMessage: 'Previous slide',
|
||||
nextSlideMessage: 'Next slide',
|
||||
firstSlideMessage: 'This is the first slide',
|
||||
lastSlideMessage: 'This is the last slide',
|
||||
onSlideChangeStart: this.emitEvent('ionSlideWillChange'),
|
||||
onSlideChangeEnd: this.emitEvent('ionSlideDidChange'),
|
||||
onAutoplay: this.emitEvent('ionSlideAutoplay'),
|
||||
onAutoplayStart: this.emitEvent('ionSlideAutoplayStart'),
|
||||
onAutoplayStop: this.emitEvent('ionSlideAutoplayStop'),
|
||||
onSlideNextStart: this.emitEvent('ionSlideNextStarto'),
|
||||
onSlidePrevStart: this.emitEvent('ionSlidePrevStart'),
|
||||
onSlideNextEnd: this.emitEvent('ionSlideNextEnd'),
|
||||
onSlidePrevEnd: this.emitEvent('ionSlidePrevEnd'),
|
||||
onTransitionStart: this.emitEvent('ionSlideTransitionStart'),
|
||||
onTransitionEnd: this.emitEvent('ionSlideTransitionEnd'),
|
||||
onTap: this.emitEvent('ionSlideTap'),
|
||||
onDoubleTap: this.emitEvent('ionSlideDoubleTap'),
|
||||
onProgress: this.emitEvent('ionSlideProgress'),
|
||||
onSliderMove: this.emitEvent('ionSlideDrag'),
|
||||
onReachBeginning: this.emitEvent('ionSlideReachStart'),
|
||||
onReachEnd: this.emitEvent('ionSlideReachEnd'),
|
||||
onTouchStart: this.emitEvent('ionSlideTouchStart'),
|
||||
onTouchEnd: this.emitEvent('ionSlideTouchEnd')
|
||||
};
|
||||
|
||||
// init swiper core
|
||||
this.swiper = new Swiper(this.container, swiperOptions);
|
||||
|
||||
if (this.keyboardControl) {
|
||||
// init keyboard event listeners
|
||||
this.enableKeyboardControl(true);
|
||||
}
|
||||
|
||||
this._init = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
ionViewDidLoad() {
|
||||
/**
|
||||
* TODO: This should change because currently ionViewDidLoad fires independent of whether the
|
||||
* child components are ready.
|
||||
*/
|
||||
setTimeout(() => {
|
||||
this._initSlides();
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the underlying slider implementation. Call this if you've added or removed
|
||||
* child slides.
|
||||
*/
|
||||
update(debounce = 300) {
|
||||
if (this._init) {
|
||||
window.clearTimeout(this._tmr);
|
||||
this._tmr = window.setTimeout(() => {
|
||||
this.swiper.update();
|
||||
|
||||
// Don't allow pager to show with > 10 slides
|
||||
if (this.length() > 10) {
|
||||
this.paginationType = undefined;
|
||||
}
|
||||
}, debounce);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to the specified slide.
|
||||
*
|
||||
* @param {number} index The index number of the slide.
|
||||
* @param {number} [speed] Transition duration (in ms).
|
||||
* @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
|
||||
*/
|
||||
slideTo(index: number, speed?: number, runCallbacks?: boolean) {
|
||||
this.swiper.slideTo(index, speed, runCallbacks);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to the next slide.
|
||||
*
|
||||
* @param {number} [speed] Transition duration (in ms).
|
||||
* @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
|
||||
*/
|
||||
slideNext(speed?: number, runCallbacks?: boolean) {
|
||||
this.swiper.slideNext(runCallbacks, speed);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to the previous slide.
|
||||
*
|
||||
* @param {number} [speed] Transition duration (in ms).
|
||||
* @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
|
||||
*/
|
||||
slidePrev(speed?: number, runCallbacks?: boolean) {
|
||||
this.swiper.slidePrev(runCallbacks, speed);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the index of the active slide.
|
||||
*
|
||||
* @returns {number} The index number of the current slide.
|
||||
*/
|
||||
getActiveIndex(): number {
|
||||
return this.swiper.activeIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the index of the previous slide.
|
||||
*
|
||||
* @returns {number} The index number of the previous slide.
|
||||
*/
|
||||
getPreviousIndex(): number {
|
||||
return this.swiper.previousIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the total number of slides.
|
||||
*
|
||||
* @returns {number} The total number of slides.
|
||||
*/
|
||||
length(): number {
|
||||
return this.swiper.slides.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get whether or not the current slide is the last slide.
|
||||
*
|
||||
* @returns {boolean} If the slide is the last slide or not.
|
||||
*/
|
||||
isEnd(): boolean {
|
||||
return this.isEnd();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get whether or not the current slide is the first slide.
|
||||
*
|
||||
* @returns {boolean} If the slide is the first slide or not.
|
||||
*/
|
||||
isBeginning(): boolean {
|
||||
return this.isBeginning();
|
||||
}
|
||||
|
||||
/**
|
||||
* Start auto play.
|
||||
*/
|
||||
startAutoplay() {
|
||||
this.swiper.startAutoplay();
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop auto play.
|
||||
*/
|
||||
stopAutoplay() {
|
||||
this.swiper.stopAutoplay();
|
||||
}
|
||||
|
||||
/**
|
||||
* Lock or unlock the ability to slide to the next slides.
|
||||
*/
|
||||
lockSwipeToNext(shouldLockSwipeToNext: boolean) {
|
||||
if (shouldLockSwipeToNext) {
|
||||
return this.swiper.lockSwipeToNext();
|
||||
}
|
||||
this.swiper.unlockSwipeToNext();
|
||||
}
|
||||
|
||||
/**
|
||||
* Lock or unlock the ability to slide to the previous slides.
|
||||
*/
|
||||
lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
|
||||
if (shouldLockSwipeToPrev) {
|
||||
return this.swiper.lockSwipeToPrev();
|
||||
}
|
||||
this.swiper.unlockSwipeToPrev();
|
||||
}
|
||||
|
||||
/**
|
||||
* Lock or unlock the ability to slide to change slides.
|
||||
*/
|
||||
lockSwipes(shouldLockSwipes: boolean) {
|
||||
if (shouldLockSwipes) {
|
||||
return this.swiper.lockSwipes();
|
||||
}
|
||||
this.swiper.unlockSwipes();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable or disable keyboard control.
|
||||
*/
|
||||
enableKeyboardControl(shouldEnableKeyboard: boolean) {
|
||||
if (shouldEnableKeyboard) {
|
||||
return this.swiper.enableKeyboardControl();
|
||||
}
|
||||
this.swiper.disableKeyboardControl();
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
*/
|
||||
ionViewDidUnload() {
|
||||
this._init = false;
|
||||
|
||||
this.swiper.destroy(true, true);
|
||||
this.enableKeyboardControl(false);
|
||||
}
|
||||
}
|
||||
|
||||
let slidesId = -1;
|
||||
@@ -1,253 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./toggle";
|
||||
|
||||
|
||||
// iOS Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the toggle
|
||||
$toggle-ios-width: 51px !default;
|
||||
|
||||
/// @prop - Height of the toggle
|
||||
$toggle-ios-height: 32px !default;
|
||||
|
||||
/// @prop - Border width of the toggle
|
||||
$toggle-ios-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border radius of the toggle
|
||||
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
|
||||
|
||||
/// @prop - Background color of the unchecked toggle
|
||||
$toggle-ios-background-color-off: $list-ios-background-color !default;
|
||||
|
||||
/// @prop - Border color of the unchecked toggle
|
||||
$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle
|
||||
$toggle-ios-background-color-on: color($colors-ios, primary) !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
|
||||
|
||||
/// @prop - Box shadow of the toggle handle
|
||||
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
|
||||
|
||||
/// @prop - Background color of the toggle handle
|
||||
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
|
||||
|
||||
/// @prop - Margin of the toggle handle
|
||||
$toggle-ios-media-margin: 0 !default;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-ios-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-ios-disabled-opacity: .3 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-ios-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-top: 6px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-bottom: 5px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the start in an item
|
||||
$toggle-ios-item-start-padding-start: 0 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-ios-item-right-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-top: 6px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-end: ($item-ios-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-bottom: 5px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the end in an item
|
||||
$toggle-ios-item-end-padding-start: $item-ios-padding-start !default;
|
||||
|
||||
// iOS Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios {
|
||||
position: relative;
|
||||
|
||||
width: $toggle-ios-width;
|
||||
height: $toggle-ios-height;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon {
|
||||
@include border-radius($toggle-ios-border-radius);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: $toggle-ios-border-color-off;
|
||||
transition: background-color $toggle-ios-transition-duration;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon::before {
|
||||
@include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
|
||||
@include border-radius($toggle-ios-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
background-color: $toggle-ios-background-color-off;
|
||||
|
||||
content: "";
|
||||
transform: scale3d(1, 1, 1);
|
||||
transition: transform $toggle-ios-transition-duration;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-inner {
|
||||
@include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
|
||||
@include border-radius($toggle-ios-handle-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: $toggle-ios-handle-width;
|
||||
height: $toggle-ios-handle-height;
|
||||
|
||||
background-color: $toggle-ios-handle-background-color;
|
||||
box-shadow: $toggle-ios-handle-box-shadow;
|
||||
|
||||
transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
|
||||
|
||||
will-change: transform;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-checked .toggle-icon {
|
||||
background-color: $toggle-ios-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Activated or Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated .toggle-icon::before,
|
||||
.toggle-ios.toggle-checked .toggle-icon::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-checked .toggle-inner {
|
||||
@include transform(translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0));
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated.toggle-checked .toggle-inner::before {
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Activated and Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated .toggle-inner {
|
||||
width: $toggle-ios-handle-width + 6;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Inner Knob: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-activated.toggle-checked .toggle-inner {
|
||||
// when pressing down on the toggle and IS checked
|
||||
// make the knob wider and move it left a bit
|
||||
@include position-horizontal($toggle-ios-border-width - 6, null);
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios.toggle-disabled,
|
||||
.item-ios.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-ios-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item-ios .toggle-ios {
|
||||
@include margin($toggle-ios-media-margin);
|
||||
|
||||
@include deprecated-variable(padding, $toggle-ios-item-right-padding) {
|
||||
@include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-ios .toggle-ios[slot="start"] {
|
||||
@include deprecated-variable(padding, $toggle-ios-item-left-padding) {
|
||||
@include padding($toggle-ios-item-start-padding-top, $toggle-ios-item-start-padding-end, $toggle-ios-item-start-padding-bottom, $toggle-ios-item-start-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-toggle-theme($color-name, $color-base) {
|
||||
|
||||
.toggle-ios-#{$color-name}.toggle-checked .toggle-icon {
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Toggle Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
@include ios-toggle-theme($color-name, $color-base);
|
||||
}
|
||||
@@ -1,251 +0,0 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./toggle";
|
||||
|
||||
|
||||
// Material Design Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the active toggle
|
||||
$toggle-md-active-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Width of the toggle track
|
||||
$toggle-md-track-width: 36px !default;
|
||||
|
||||
/// @prop - Height of the toggle track
|
||||
$toggle-md-track-height: 14px !default;
|
||||
|
||||
/// @prop - Background color of the toggle track
|
||||
$toggle-md-track-background-color-off: $list-md-border-color !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle track
|
||||
$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-md-handle-width: 20px !default;
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-md-handle-height: 20px !default;
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-md-handle-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Box shadow of the toggle handle
|
||||
$toggle-md-handle-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 - Background color of the toggle handle
|
||||
$toggle-md-handle-background-color-off: $background-md-color !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle handle
|
||||
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-media-margin: null !default;
|
||||
|
||||
/// @prop - Margin top of the toggle
|
||||
$toggle-md-media-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the toggle
|
||||
$toggle-md-media-margin-end: $toggle-md-media-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the toggle
|
||||
$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the toggle
|
||||
$toggle-md-media-margin-start: $toggle-md-media-margin-end !default;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-md-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-md-disabled-opacity: .3 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of standalone toggle
|
||||
$toggle-md-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of standalone toggle
|
||||
$toggle-md-padding-end: $toggle-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of standalone toggle
|
||||
$toggle-md-padding-bottom: $toggle-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of standalone toggle
|
||||
$toggle-md-padding-start: $toggle-md-padding-end !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-end: 18px !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start the toggle positioned on the start in an item
|
||||
$toggle-md-item-start-padding-start: 2px !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-md-item-right-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the end in an item
|
||||
$toggle-md-item-end-padding-start: $item-md-padding-start !default;
|
||||
|
||||
// Material Design Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md {
|
||||
position: relative;
|
||||
|
||||
width: $toggle-md-track-width;
|
||||
height: $toggle-md-track-height;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: strict;
|
||||
|
||||
@include deprecated-variable(padding, $toggle-md-padding) {
|
||||
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md .toggle-icon {
|
||||
@include border-radius($toggle-md-track-height);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: $toggle-md-track-background-color-off;
|
||||
|
||||
transition: background-color $toggle-md-transition-duration;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md .toggle-inner {
|
||||
@include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
|
||||
@include border-radius($toggle-md-handle-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: $toggle-md-handle-width;
|
||||
height: $toggle-md-handle-height;
|
||||
|
||||
background-color: $toggle-md-handle-background-color-off;
|
||||
|
||||
box-shadow: $toggle-md-handle-box-shadow;
|
||||
|
||||
transition-duration: $toggle-md-transition-duration;
|
||||
transition-property: transform, background-color;
|
||||
|
||||
will-change: transform, background-color;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-checked .toggle-icon {
|
||||
background-color: $toggle-md-track-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-checked .toggle-inner {
|
||||
@include transform(translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0));
|
||||
|
||||
background-color: $toggle-md-handle-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md.toggle-disabled,
|
||||
.item-md.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-md.toggle-disabled ion-radio {
|
||||
opacity: $toggle-md-disabled-opacity;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item-md .toggle-md {
|
||||
cursor: pointer;
|
||||
|
||||
@include deprecated-variable(margin, $toggle-md-media-margin) {
|
||||
@include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start);
|
||||
}
|
||||
|
||||
@include deprecated-variable(padding, $toggle-md-item-right-padding) {
|
||||
@include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-md .toggle-md[slot="start"] {
|
||||
@include deprecated-variable(padding, $toggle-md-item-left-padding) {
|
||||
@include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-md.item-toggle ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin toggle-theme-md($color-name, $color-base) {
|
||||
|
||||
.toggle-md-#{$color-name}.toggle-checked .toggle-icon {
|
||||
background-color: lighten($color-base, 25%);
|
||||
}
|
||||
|
||||
.toggle-md-#{$color-name}.toggle-checked .toggle-inner {
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Toggle Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
@include toggle-theme-md($color-name, $color-base);
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-toggle {
|
||||
display: inline-block;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
ion-toggle ion-gesture {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
.toggle-cover {
|
||||
@include position-horizontal(0, null);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
outline: none;
|
||||
|
||||
font-family: inherit;
|
||||
font-style: inherit;
|
||||
font-variant: inherit;
|
||||
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,179 +0,0 @@
|
||||
import { BooleanInputComponent, GestureDetail, VNodeData } from '../../util/interfaces';
|
||||
import { Component, h, Ionic, Listen, Prop, Watch } from '../index';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-toggle',
|
||||
styleUrls: {
|
||||
ios: 'toggle.ios.scss',
|
||||
md: 'toggle.md.scss',
|
||||
wp: 'toggle.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'toggle'
|
||||
}
|
||||
})
|
||||
export class Toggle implements BooleanInputComponent {
|
||||
activated: boolean = false;
|
||||
hasFocus: boolean = false;
|
||||
id: string;
|
||||
labelId: string;
|
||||
startX: number;
|
||||
styleTmr: any;
|
||||
|
||||
@Prop() color: string;
|
||||
@Prop() mode: string;
|
||||
@Prop() checked: boolean = false;
|
||||
@Prop() disabled: boolean = false;
|
||||
@Prop() value: string;
|
||||
|
||||
ionViewDidLoad() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@Watch('checked')
|
||||
changed(val: boolean) {
|
||||
Ionic.emit(this, 'ionChange', { detail: { checked: val } });
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
@Watch('disabled')
|
||||
disableChanged() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
private emitStyle() {
|
||||
clearTimeout(this.styleTmr);
|
||||
|
||||
this.styleTmr = setTimeout(() => {
|
||||
Ionic.emit(this, 'ionStyle', {
|
||||
detail: {
|
||||
'toggle-disabled': this.disabled,
|
||||
'toggle-checked': this.checked,
|
||||
'toggle-activated': this.activated,
|
||||
'toggle-focus': this.hasFocus
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private canStart() {
|
||||
return !this.disabled;
|
||||
}
|
||||
|
||||
|
||||
private onDragStart(detail: GestureDetail) {
|
||||
this.startX = detail.startX;
|
||||
this.fireFocus();
|
||||
}
|
||||
|
||||
|
||||
private onDragMove(detail: GestureDetail) {
|
||||
if (this.checked) {
|
||||
if (detail.currentX + 15 < this.startX) {
|
||||
this.checked = false;
|
||||
this.activated = true;
|
||||
this.startX = detail.currentX;
|
||||
}
|
||||
|
||||
} else if (detail.currentX - 15 > this.startX) {
|
||||
this.checked = true;
|
||||
this.activated = (detail.currentX < this.startX + 5);
|
||||
this.startX = detail.currentX;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private onDragEnd(detail: GestureDetail) {
|
||||
if (this.checked) {
|
||||
if (detail.startX + 4 > detail.currentX) {
|
||||
this.checked = false;
|
||||
}
|
||||
|
||||
} else if (detail.startX - 4 < detail.currentX) {
|
||||
this.checked = true;
|
||||
}
|
||||
|
||||
this.activated = false;
|
||||
this.fireBlur();
|
||||
this.startX = null;
|
||||
}
|
||||
|
||||
|
||||
@Listen('keydown.space')
|
||||
onSpace(ev: KeyboardEvent) {
|
||||
this.toggle();
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (!this.disabled) {
|
||||
this.checked = !this.checked;
|
||||
this.fireFocus();
|
||||
}
|
||||
return this.checked;
|
||||
}
|
||||
|
||||
|
||||
fireFocus() {
|
||||
if (!this.hasFocus) {
|
||||
this.hasFocus = true;
|
||||
Ionic.emit(this, 'ionFocus');
|
||||
this.emitStyle();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
fireBlur() {
|
||||
if (this.hasFocus) {
|
||||
this.hasFocus = false;
|
||||
Ionic.emit(this, 'ionBlur');
|
||||
this.emitStyle();
|
||||
}
|
||||
}
|
||||
|
||||
hostData(): VNodeData {
|
||||
return {
|
||||
class: {
|
||||
'toggle-activated': this.activated,
|
||||
'toggle-checked': this.checked,
|
||||
'toggle-disabled': this.disabled
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ion-gesture props={{
|
||||
'canStart': this.canStart.bind(this),
|
||||
'onStart': this.onDragStart.bind(this),
|
||||
'onMove': this.onDragMove.bind(this),
|
||||
'onEnd': this.onDragEnd.bind(this),
|
||||
'onPress': this.toggle.bind(this),
|
||||
'gestureName': 'toggle',
|
||||
'gesturePriority': 30,
|
||||
'type': 'pan,press',
|
||||
'direction': 'x',
|
||||
'threshold': 20,
|
||||
'attachTo': 'parent'
|
||||
}}>
|
||||
<div class='toggle-icon'>
|
||||
<div class='toggle-inner'></div>
|
||||
</div>
|
||||
<div
|
||||
class='toggle-cover'
|
||||
attrs={{
|
||||
'id': this.id,
|
||||
'aria-checked': this.checked ? 'true' : false,
|
||||
'aria-disabled': this.disabled ? 'true' : false,
|
||||
'aria-labelledby': this.labelId,
|
||||
'role': 'checkbox',
|
||||
'tabindex': 0
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</ion-gesture>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,233 +0,0 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./toggle";
|
||||
|
||||
|
||||
// Windows Toggle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the toggle
|
||||
$toggle-wp-inactive-color: #323232 !default;
|
||||
|
||||
/// @prop - Color of the checked toggle
|
||||
$toggle-wp-active-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Width of the toggle track
|
||||
$toggle-wp-track-width: 40px !default;
|
||||
|
||||
/// @prop - Height of the toggle track
|
||||
$toggle-wp-track-height: 18px !default;
|
||||
|
||||
/// @prop - Background color of the toggle track
|
||||
$toggle-wp-track-background-color-off: transparent !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle track
|
||||
$toggle-wp-track-background-color-on: $toggle-wp-active-color !default;
|
||||
|
||||
/// @prop - Border width of the toggle track
|
||||
$toggle-wp-track-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border color of the toggle track
|
||||
$toggle-wp-track-border-color-off: $toggle-wp-inactive-color !default;
|
||||
|
||||
/// @prop - Border color of the checked toggle track
|
||||
$toggle-wp-track-border-color-on: $toggle-wp-active-color !default;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-wp-handle-width: 10px !default;
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-wp-handle-height: 10px !default;
|
||||
|
||||
/// @prop - Top of the toggle handle
|
||||
$toggle-wp-handle-top: 2px !default;
|
||||
|
||||
/// @prop - Left of the toggle handle
|
||||
$toggle-wp-handle-left: 2px !default;
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-wp-handle-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Background color of the toggle handle
|
||||
$toggle-wp-handle-background-color-off: $toggle-wp-inactive-color !default;
|
||||
|
||||
/// @prop - Background color of the checked toggle handle
|
||||
$toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-active-color) !default;
|
||||
|
||||
/// @prop - Margin of the toggle
|
||||
$toggle-wp-media-margin: 0 !default;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-wp-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-wp-disabled-opacity: .3 !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-wp-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-end: 18px !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start the toggle positioned on the start in an item
|
||||
$toggle-wp-item-start-padding-start: 2px !default;
|
||||
|
||||
// deprecated
|
||||
$toggle-wp-item-right-padding: null !default;
|
||||
|
||||
/// @prop - Padding top of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-end: ($item-wp-padding-end / 2) !default;
|
||||
|
||||
/// @prop - Padding bottom of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start of the toggle positioned on the end in an item
|
||||
$toggle-wp-item-end-padding-start: $item-wp-padding-start !default;
|
||||
|
||||
// Windows Toggle
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp {
|
||||
position: relative;
|
||||
|
||||
width: $toggle-wp-track-width;
|
||||
height: $toggle-wp-track-height;
|
||||
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Background Track: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp .toggle-icon {
|
||||
@include border-radius($toggle-wp-track-height);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
|
||||
background-color: $toggle-wp-track-background-color-off;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Inner Knob: Unchecked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp .toggle-inner {
|
||||
@include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left);
|
||||
@include border-radius($toggle-wp-handle-border-radius);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: $toggle-wp-handle-width;
|
||||
height: $toggle-wp-handle-height;
|
||||
|
||||
background-color: $toggle-wp-handle-background-color-off;
|
||||
|
||||
transition-duration: $toggle-wp-transition-duration;
|
||||
transition-property: transform, background-color;
|
||||
|
||||
will-change: transform, background-color;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Background Track: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp.toggle-checked .toggle-icon {
|
||||
border-color: $toggle-wp-track-background-color-on;
|
||||
background-color: $toggle-wp-track-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Inner Knob: Checked
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp.toggle-checked .toggle-inner {
|
||||
@include transform(translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0));
|
||||
|
||||
background-color: $toggle-wp-handle-background-color-on;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle: Disabled
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp.toggle-disabled,
|
||||
.item-wp.item-toggle-disabled ion-label {
|
||||
opacity: $toggle-wp-disabled-opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toggle-wp.toggle-disabled ion-radio {
|
||||
opacity: $toggle-wp-disabled-opacity;
|
||||
}
|
||||
|
||||
|
||||
// Windows Toggle Within An Item
|
||||
// -----------------------------------------
|
||||
|
||||
.item-wp .toggle-wp {
|
||||
@include margin($toggle-wp-media-margin);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
@include deprecated-variable(padding, $toggle-wp-item-right-padding) {
|
||||
@include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-wp .toggle-wp[slot="start"] {
|
||||
@include deprecated-variable(padding, $toggle-wp-item-left-padding) {
|
||||
@include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start);
|
||||
}
|
||||
}
|
||||
|
||||
.item-wp.item-toggle ion-label {
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
// Windows Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin toggle-theme-wp($color-name, $color-base, $color-contrast) {
|
||||
|
||||
.toggle-wp-#{$color-name}.toggle-checked .toggle-icon {
|
||||
border-color: $color-base;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.toggle-wp-#{$color-name}.toggle-checked .toggle-inner {
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate Windows Toggle Auxiliary Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
@include toggle-theme-wp($color-name, $color-base, $color-contrast);
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user