mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(ionic): update to latest ionic master css for the web components
This commit is contained in:
Brandy Carney
@ -16,7 +16,8 @@ $badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background
|
||||
|
||||
|
||||
.badge-ios {
|
||||
border-radius: $badge-ios-border-radius;
|
||||
@include border-radius($badge-ios-border-radius);
|
||||
|
||||
color: $badge-ios-text-color;
|
||||
background-color: $badge-ios-background-color;
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@ $badge-md-text-color: color-contrast($colors-md, $badge-md-backgro
|
||||
|
||||
|
||||
.badge-md {
|
||||
border-radius: $badge-md-border-radius;
|
||||
@include border-radius($badge-md-border-radius);
|
||||
|
||||
color: $badge-md-text-color;
|
||||
background-color: $badge-md-background-color;
|
||||
}
|
||||
@ -33,3 +34,4 @@ $badge-md-text-color: color-contrast($colors-md, $badge-md-backgro
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -12,9 +12,10 @@ $badge-font-weight: bold !default;
|
||||
|
||||
|
||||
ion-badge {
|
||||
display: inline-block;
|
||||
@include padding(3px, 8px);
|
||||
@include text-align(center);
|
||||
|
||||
padding: 3px 8px;
|
||||
display: inline-block;
|
||||
|
||||
min-width: 10px;
|
||||
|
||||
@ -22,7 +23,6 @@ ion-badge {
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
|
||||
@ -35,4 +35,4 @@ ion-badge.upgraded {
|
||||
|
||||
ion-badge:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@ $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-backgro
|
||||
|
||||
|
||||
.badge-wp {
|
||||
border-radius: $badge-wp-border-radius;
|
||||
@include border-radius($badge-wp-border-radius);
|
||||
|
||||
color: $badge-wp-text-color;
|
||||
background-color: $badge-wp-background-color;
|
||||
}
|
||||
@ -33,3 +34,4 @@ $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-backgro
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -5,29 +5,38 @@
|
||||
// iOS Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-ios-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding right of the card
|
||||
// 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;
|
||||
|
||||
/// @prop - Padding left of the card
|
||||
// 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 {
|
||||
padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
|
||||
@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 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card Content Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -8,14 +8,18 @@
|
||||
/// @prop - Padding top of the card
|
||||
$card-md-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding right of the card
|
||||
// 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;
|
||||
|
||||
/// @prop - Padding left of the card
|
||||
// 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;
|
||||
@ -25,7 +29,7 @@ $card-md-line-height: 1.5 !default;
|
||||
|
||||
|
||||
.card-content-md {
|
||||
padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
|
||||
@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;
|
||||
|
||||
@ -8,14 +8,18 @@
|
||||
/// @prop - Padding top of the card
|
||||
$card-wp-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding right of the card
|
||||
// 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;
|
||||
|
||||
/// @prop - Padding left of the card
|
||||
// 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;
|
||||
@ -25,13 +29,14 @@ $card-wp-line-height: 1.5 !default;
|
||||
|
||||
|
||||
.card-content-wp {
|
||||
padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
|
||||
@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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Generate Windows Card Content Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -11,19 +11,33 @@ $card-ios-header-font-size: 1.6rem !default;
|
||||
/// @prop - Font weight of the card header
|
||||
$card-ios-header-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Padding of the card header
|
||||
$card-ios-header-padding: 16px !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 {
|
||||
padding: $card-ios-header-padding;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,18 +8,32 @@
|
||||
/// @prop - Font size of the card header
|
||||
$card-md-header-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Padding of the card header
|
||||
$card-md-header-padding: 16px !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 {
|
||||
padding: $card-md-header-padding;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,19 +8,33 @@
|
||||
/// @prop - Font size of the card header
|
||||
$card-wp-header-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Padding of the card header
|
||||
$card-wp-header-padding: 16px !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 {
|
||||
padding: $card-wp-header-padding;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,11 +8,35 @@
|
||||
/// @prop - Font size of the card title
|
||||
$card-ios-title-font-size: 1.8rem !default;
|
||||
|
||||
/// @prop - Padding of the card title
|
||||
$card-ios-title-padding: 8px 0 8px 0 !default;
|
||||
// deprecated
|
||||
$card-ios-title-padding: null !default;
|
||||
|
||||
/// @prop - Margin of the card title
|
||||
$card-ios-title-margin: 2px 0 2px !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;
|
||||
@ -21,12 +45,17 @@ $card-ios-title-text-color: #222 !default;
|
||||
.card-title-ios {
|
||||
display: block;
|
||||
|
||||
margin: $card-ios-title-margin;
|
||||
padding: $card-ios-title-padding;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,11 +8,35 @@
|
||||
/// @prop - Font size of the card title
|
||||
$card-md-title-font-size: 2.4rem !default;
|
||||
|
||||
/// @prop - Padding of the card title
|
||||
$card-md-title-padding: 8px 0 8px 0 !default;
|
||||
// deprecated
|
||||
$card-md-title-padding: null !default;
|
||||
|
||||
/// @prop - Margin of the card title
|
||||
$card-md-title-margin: 2px 0 2px !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;
|
||||
@ -21,12 +45,17 @@ $card-md-title-text-color: #222 !default;
|
||||
.card-title-md {
|
||||
display: block;
|
||||
|
||||
margin: $card-md-title-margin;
|
||||
padding: $card-md-title-padding;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,11 +8,35 @@
|
||||
/// @prop - Font size of card title
|
||||
$card-wp-title-font-size: 2.4rem !default;
|
||||
|
||||
/// @prop - Padding of the card title
|
||||
$card-wp-title-padding: 8px 0 8px 0 !default;
|
||||
// deprecated
|
||||
$card-wp-title-padding: null !default;
|
||||
|
||||
/// @prop - Margin of the card title
|
||||
$card-wp-title-margin: 2px 0 !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;
|
||||
@ -21,12 +45,17 @@ $card-wp-title-text-color: #222 !default;
|
||||
.card-title-wp {
|
||||
display: block;
|
||||
|
||||
margin: $card-wp-title-margin;
|
||||
padding: $card-wp-title-padding;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,14 +8,18 @@
|
||||
/// @prop - Margin top of the card
|
||||
$card-ios-margin-top: 12px !default;
|
||||
|
||||
/// @prop - Margin right of the card
|
||||
// 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;
|
||||
|
||||
/// @prop - Margin left of the card
|
||||
// deprecated
|
||||
$card-ios-margin-left: 12px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-ios-margin-start: $card-ios-margin-left;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-ios-padding-media-top: 10px !default;
|
||||
@ -43,11 +47,11 @@ $card-ios-text-color: #666 !default;
|
||||
|
||||
|
||||
.card-ios {
|
||||
margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
|
||||
@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-right + $card-ios-margin-left)});
|
||||
width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
|
||||
|
||||
border-radius: $card-ios-border-radius;
|
||||
font-size: $card-ios-font-size;
|
||||
|
||||
background: $card-ios-background-color;
|
||||
@ -68,24 +72,19 @@ $card-ios-text-color: #666 !default;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.card-header-ios + .card-content-ios,
|
||||
.card-ios .item + .card-content-ios {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.card .note-ios {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card-ios h1 {
|
||||
margin: 0 0 2px;
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-ios h2 {
|
||||
margin: 2px 0;
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
@ -95,14 +94,14 @@ $card-ios-text-color: #666 !default;
|
||||
.card-ios h4,
|
||||
.card-ios h5,
|
||||
.card-ios h6 {
|
||||
margin: 2px 0;
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.card-ios p {
|
||||
margin: 0 0 2px;
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 1.4rem;
|
||||
color: $card-ios-text-color;
|
||||
|
||||
@ -8,14 +8,18 @@
|
||||
/// @prop - Margin top of the card
|
||||
$card-md-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Margin right of the card
|
||||
// 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;
|
||||
|
||||
/// @prop - Margin left of the card
|
||||
// deprecated
|
||||
$card-md-margin-left: 10px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-md-margin-start: $card-md-margin-left;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-md-padding-media-top: 10px !default;
|
||||
@ -49,11 +53,11 @@ $card-md-text-color: #222 !default;
|
||||
|
||||
|
||||
.card-md {
|
||||
margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
|
||||
@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-right + $card-md-margin-left)});
|
||||
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
|
||||
|
||||
border-radius: $card-md-border-radius;
|
||||
font-size: $card-md-font-size;
|
||||
|
||||
background: $card-md-background-color;
|
||||
@ -84,7 +88,7 @@ $card-md-text-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-md h1 {
|
||||
margin: 0 0 2px;
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
@ -92,7 +96,7 @@ $card-md-text-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-md h2 {
|
||||
margin: 2px 0;
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
@ -103,7 +107,7 @@ $card-md-text-color: #222 !default;
|
||||
.card-md h4,
|
||||
.card-md h5,
|
||||
.card-md h6 {
|
||||
margin: 2px 0;
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
@ -111,7 +115,7 @@ $card-md-text-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-md p {
|
||||
margin: 0 0 2px;
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
|
||||
@ -8,14 +8,18 @@
|
||||
/// @prop - Margin top of the card
|
||||
$card-wp-margin-top: 8px !default;
|
||||
|
||||
/// @prop - Margin right of the card
|
||||
// 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;
|
||||
|
||||
/// @prop - Margin left of the card
|
||||
// deprecated
|
||||
$card-wp-margin-left: 8px !default;
|
||||
/// @prop - Margin start of the card
|
||||
$card-wp-margin-start: $card-wp-margin-left;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-wp-padding-media-top: 10px !default;
|
||||
@ -52,11 +56,11 @@ $card-wp-text-color: #222 !default;
|
||||
|
||||
|
||||
.card-wp {
|
||||
margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left;
|
||||
@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-right + $card-wp-margin-left)});
|
||||
width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
|
||||
|
||||
border-radius: $card-wp-border-radius;
|
||||
font-size: $card-wp-font-size;
|
||||
|
||||
background: $card-wp-background-color;
|
||||
@ -87,7 +91,7 @@ $card-wp-text-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-wp h1 {
|
||||
margin: 0 0 2px;
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
@ -95,7 +99,7 @@ $card-wp-text-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-wp h2 {
|
||||
margin: 2px 0;
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
@ -106,7 +110,7 @@ $card-wp-text-color: #222 !default;
|
||||
.card-wp h4,
|
||||
.card-wp h5,
|
||||
.card-wp h6 {
|
||||
margin: 2px 0;
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
@ -114,7 +118,7 @@ $card-wp-text-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-wp p {
|
||||
margin: 0 0 2px;
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
|
||||
@ -50,12 +50,35 @@ $toggle-ios-transition-duration: 300ms !default;
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-ios-disabled-opacity: .3 !default;
|
||||
|
||||
/// @prop - Padding of the toggle positioned on the left in an item
|
||||
$toggle-ios-item-left-padding: 6px 16px 5px 0 !default;
|
||||
// deprecated
|
||||
$toggle-ios-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding of the toggle positioned on the right in an item
|
||||
$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !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
|
||||
// -----------------------------------------
|
||||
@ -76,14 +99,14 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon {
|
||||
@include border-radius($toggle-ios-border-radius);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: $toggle-ios-border-radius;
|
||||
|
||||
background-color: $toggle-ios-border-color-off;
|
||||
transition: background-color $toggle-ios-transition-duration;
|
||||
|
||||
@ -95,13 +118,11 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-ios .toggle-icon::before {
|
||||
position: absolute;
|
||||
top: $toggle-ios-border-width;
|
||||
right: $toggle-ios-border-width;
|
||||
bottom: $toggle-ios-border-width;
|
||||
left: $toggle-ios-border-width;
|
||||
@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;
|
||||
|
||||
border-radius: $toggle-ios-border-radius;
|
||||
background-color: $toggle-ios-background-color-off;
|
||||
|
||||
content: "";
|
||||
@ -114,14 +135,14 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
// -----------------------------------------
|
||||
|
||||
.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;
|
||||
top: $toggle-ios-border-width;
|
||||
left: $toggle-ios-border-width;
|
||||
|
||||
width: $toggle-ios-handle-width;
|
||||
height: $toggle-ios-handle-height;
|
||||
|
||||
border-radius: $toggle-ios-handle-border-radius;
|
||||
background-color: $toggle-ios-handle-background-color;
|
||||
box-shadow: $toggle-ios-handle-box-shadow;
|
||||
|
||||
@ -157,6 +178,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
|
||||
}
|
||||
|
||||
|
||||
// iOS Toggle Background Oval: Activated and Checked
|
||||
// -----------------------------------------
|
||||
|
||||
@ -179,7 +201,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
.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
|
||||
left: $toggle-ios-border-width - 6;
|
||||
@include position-horizontal($toggle-ios-border-width - 6, null);
|
||||
}
|
||||
|
||||
|
||||
@ -198,12 +220,17 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
|
||||
// -----------------------------------------
|
||||
|
||||
.item-ios .toggle-ios {
|
||||
margin: $toggle-ios-media-margin;
|
||||
padding: $toggle-ios-item-right-padding;
|
||||
@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"] {
|
||||
padding: $toggle-ios-item-left-padding;
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -38,8 +38,20 @@ $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;
|
||||
|
||||
/// @prop - Margin of the toggle
|
||||
$toggle-md-media-margin: 0 !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;
|
||||
@ -47,15 +59,50 @@ $toggle-md-transition-duration: 300ms !default;
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-md-disabled-opacity: .3 !default;
|
||||
|
||||
/// @prop - Padding of standalone toggle
|
||||
$toggle-md-padding: 12px !default;
|
||||
// deprecated
|
||||
$toggle-md-padding: null !default;
|
||||
|
||||
/// @prop - Padding of the toggle positioned on the left in an item
|
||||
$toggle-md-item-left-padding: 12px 18px 12px 2px !default;
|
||||
/// @prop - Padding top of standalone toggle
|
||||
$toggle-md-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding of the toggle positioned on the right in an item
|
||||
$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !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
|
||||
// -----------------------------------------
|
||||
@ -63,14 +110,16 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
|
||||
.toggle-md {
|
||||
position: relative;
|
||||
|
||||
padding: $toggle-md-padding;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -78,13 +127,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-md .toggle-icon {
|
||||
@include border-radius($toggle-md-track-height);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: $toggle-md-track-height;
|
||||
background-color: $toggle-md-track-background-color-off;
|
||||
|
||||
transition: background-color $toggle-md-transition-duration;
|
||||
@ -97,14 +147,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
|
||||
// -----------------------------------------
|
||||
|
||||
.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;
|
||||
top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
|
||||
left: 0;
|
||||
|
||||
width: $toggle-md-handle-width;
|
||||
height: $toggle-md-handle-height;
|
||||
|
||||
border-radius: $toggle-md-handle-border-radius;
|
||||
background-color: $toggle-md-handle-background-color-off;
|
||||
|
||||
box-shadow: $toggle-md-handle-box-shadow;
|
||||
@ -154,18 +204,25 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
|
||||
// -----------------------------------------
|
||||
|
||||
.item-md .toggle-md {
|
||||
margin: $toggle-md-media-margin;
|
||||
padding: $toggle-md-item-right-padding;
|
||||
|
||||
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"] {
|
||||
padding: $toggle-md-item-left-padding;
|
||||
@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 {
|
||||
margin-left: 0;
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -16,23 +16,24 @@ ion-toggle.upgraded {
|
||||
|
||||
ion-toggle ion-gesture {
|
||||
display: block;
|
||||
visibility: inherit;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
.toggle-cover {
|
||||
@include position-horizontal(0, null);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
outline: none;
|
||||
|
||||
font-family: inherit;
|
||||
font-style: inherit;
|
||||
@ -41,6 +42,6 @@ ion-toggle ion-gesture {
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -62,12 +62,35 @@ $toggle-wp-transition-duration: 300ms !default;
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-wp-disabled-opacity: .3 !default;
|
||||
|
||||
/// @prop - Padding of the toggle positioned on the left in an item
|
||||
$toggle-wp-item-left-padding: 12px 18px 12px 2px !default;
|
||||
// deprecated
|
||||
$toggle-wp-item-left-padding: null !default;
|
||||
|
||||
/// @prop - Padding of the toggle positioned on the right in an item
|
||||
$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !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
|
||||
// -----------------------------------------
|
||||
@ -88,6 +111,8 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
|
||||
// -----------------------------------------
|
||||
|
||||
.toggle-wp .toggle-icon {
|
||||
@include border-radius($toggle-wp-track-height);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
@ -95,7 +120,6 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
|
||||
height: 100%;
|
||||
|
||||
border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
|
||||
border-radius: $toggle-wp-track-height;
|
||||
background-color: $toggle-wp-track-background-color-off;
|
||||
|
||||
pointer-events: none;
|
||||
@ -108,14 +132,14 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
|
||||
// -----------------------------------------
|
||||
|
||||
.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;
|
||||
top: $toggle-wp-handle-top;
|
||||
left: $toggle-wp-handle-left;
|
||||
|
||||
width: $toggle-wp-handle-width;
|
||||
height: $toggle-wp-handle-height;
|
||||
|
||||
border-radius: $toggle-wp-handle-border-radius;
|
||||
background-color: $toggle-wp-handle-background-color-off;
|
||||
|
||||
transition-duration: $toggle-wp-transition-duration;
|
||||
@ -162,18 +186,23 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
|
||||
// -----------------------------------------
|
||||
|
||||
.item-wp .toggle-wp {
|
||||
margin: $toggle-wp-media-margin;
|
||||
padding: $toggle-wp-item-right-padding;
|
||||
@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"] {
|
||||
padding: $toggle-wp-item-left-padding;
|
||||
@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 {
|
||||
margin-left: 0;
|
||||
@include margin-horizontal(0, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user