mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 23:01:57 +08:00
feat(rtl): optimize the new mixins for smaller bundle, ltr separation (#11635)
* refactor(item): replaced item-left with item-start
replaced item-right with item-end
* style(item): fix spacing
* fix(item): add backwards support for left/right in ng-content
* fix(item): deprecated old variables, not breaking change
* feat(rtl): padding mixin
* feat(rtl): change all padding variables to start/end
add support for old variable names
* feat(rtl): replace all padding-side with start/end
* revert(functions): remove mixins
* feat(scss): add padding-horizontal and rtl functions (thanks brandy)
* feat(padding): use padding horizontal mixin everywhere
* feat(padding): use padding horizontal mixin everywhere
* fix(lint): change properties order. tests passing
* fix(sass-functions): reorder functions to avoid warning
* fix(scss): fix variable name
* perf(rtl): add check if need rtl selector
* feat(scss): add full padding function
* feat(scss): add border-radius mixin
* fix(rtl): change border-radius to use mixin
* perf(scss): only override if has something to override
* feat(scss): add margin scss variables for sides
* feat(scss): add margin mixin
* fix(scss): fix wrong support for 2/3 args
* feat(rtl): spread margins/paddings
* feat(rtl): spread margins/paddings
* feat(position): add rtl support for absolute
* fix(rtl): add missing calls
* fix(item): old attributes deprecated support
* revert(changelog): not intended to be changed
* fix(sass-functions): and not &&
* fix(padding): merge + missing padding
* style(): remove newline
* refactor(mixins): move mixins to mixins file
* style(): fix alignment
* fix(item): right padding should not be set
* fix(): incorrect defaults
* feat(scss-lint): disable some side variables
* fix(scss): lint passes
* feat(lint): disabled text-align
* fix(): correct variable name
* fix(fab): missed a comma
* fix(rtl): rtl method incorrect for multiple selectors
* fix(rtl): toolbar bad merge
* fix(rtl): icon-only is in px not em
* fix(rtl): toggle padding
* feat(rtl): correct notation for rtl custom
* Merge branch 'breaking-item' into start-end
# Conflicts:
# src/components/checkbox/checkbox.ios.scss
# src/components/checkbox/checkbox.md.scss
# src/components/checkbox/checkbox.wp.scss
# src/components/item/item.ios.scss
# src/components/item/item.md.scss
# src/components/item/item.wp.scss
# src/components/radio/radio.ios.scss
# src/components/radio/radio.md.scss
# src/components/radio/radio.wp.scss
# src/components/toggle/toggle.ios.scss
# src/components/toggle/toggle.md.scss
# src/components/toggle/toggle.wp.scss
* feat(rtl): optimize bundle result
* feat(float): use new standard
* feat(platform): gotta have direction on html
* fix(scss): add import + change code order
* fix(lint): passes
* fix(scss): fix for deprecated usages
* fix(scss): property use #{}
* fix(rtl): change css specificity, increase bundle size for multidirectional
* fix(scss): mixin manages priority
* fix(scss): select icon
* fix(scss): correct range variable
* fix(lint): unused import
* fix(multi-dir): things that ignore PropertySpelling must be under multi-dir
* fix(multi-dir): things that ignore PropertySpelling must be under multi-dir
* fix(include-rtl): change to app-direction, to be able to set rtl only apps
* fix(rtl): remove incorrect split-pane rtl behavior
* fix(menu): start needs position on rtl
* fix(float): renamed test file, add float mixin
* fix(scss-lint): lint excluded files
* fix(scss): add missing unit
* refactor(scss): change dir to direction, as the correct property name
* fix(app-direction): replace last usage of include-rtl
Closes: #11805 #11914
This commit is contained in:
Amit Moryossef
committed by
Brandy Carney
Brandy Carney
parent
ad40b3b86b
commit
f0c6948ef8
@ -5,11 +5,6 @@
|
||||
plugin_directories: ['.scss-linters']
|
||||
|
||||
exclude:
|
||||
- 'src/components/item/item.ios.scss'
|
||||
- 'src/components/item/item.md.scss'
|
||||
- 'src/components/list/list.ios.scss'
|
||||
- 'src/components/show-hide-when/**'
|
||||
- 'src/components/slides/**'
|
||||
- 'src/themes/ionic.mixins.scss'
|
||||
- 'src/themes/license.scss'
|
||||
- 'src/themes/util.scss'
|
||||
@ -61,11 +56,6 @@ linters:
|
||||
- justify-content
|
||||
- order
|
||||
-
|
||||
- margin-top
|
||||
- margin-bottom
|
||||
- padding-top
|
||||
- padding-bottom
|
||||
-
|
||||
- width
|
||||
- min-width
|
||||
- max-width
|
||||
@ -193,27 +183,31 @@ linters:
|
||||
enabled: true
|
||||
style: double_quotes
|
||||
|
||||
SelectorDepth:
|
||||
enabled: true
|
||||
max_depth: 5
|
||||
|
||||
PropertySpelling:
|
||||
extra_properties:
|
||||
- contain
|
||||
disabled_properties:
|
||||
- direction
|
||||
- right
|
||||
- left
|
||||
|
||||
- float
|
||||
|
||||
- padding
|
||||
- padding-left
|
||||
- padding-right
|
||||
|
||||
- padding-top
|
||||
- padding-bottom
|
||||
- margin
|
||||
- margin-left
|
||||
- margin-right
|
||||
|
||||
- margin-top
|
||||
- margin-bottom
|
||||
- border-radius
|
||||
- border-top-left-radius
|
||||
- border-top-right-radius
|
||||
- border-bottom-right-radius
|
||||
- border-bottom-left-radius
|
||||
|
||||
- text-align
|
||||
|
||||
@ -97,16 +97,15 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
|
||||
.action-sheet-ios .action-sheet-group {
|
||||
@include border-radius($action-sheet-ios-border-radius);
|
||||
@include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
|
||||
|
||||
background: $action-sheet-ios-background;
|
||||
}
|
||||
|
||||
.action-sheet-ios .action-sheet-group:last-child {
|
||||
margin-bottom: $action-sheet-ios-group-margin-bottom;
|
||||
@include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
|
||||
}
|
||||
|
||||
.action-sheet-ios .action-sheet-title {
|
||||
@ -137,7 +136,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
}
|
||||
|
||||
.action-sheet-ios .action-sheet-button.activated {
|
||||
margin-top: -$action-sheet-ios-button-border-width;
|
||||
@include margin(-$action-sheet-ios-button-border-width, null, null, null);
|
||||
|
||||
border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
|
||||
border-bottom-color: $action-sheet-ios-button-background-activated;
|
||||
|
||||
@ -328,7 +328,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
|
||||
}
|
||||
|
||||
.alert-ios .alert-title {
|
||||
margin-top: $alert-ios-title-margin-top;
|
||||
@include margin($alert-ios-title-margin-top, null, null, null);
|
||||
|
||||
font-size: $alert-ios-title-font-size;
|
||||
font-weight: $alert-ios-title-font-weight;
|
||||
|
||||
@ -414,7 +414,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||
}
|
||||
|
||||
.alert-md .alert-input:focus {
|
||||
margin-bottom: $alert-md-input-margin-bottom - 1;
|
||||
@include margin(null, null, $alert-md-input-margin-bottom - 1, null);
|
||||
|
||||
border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
|
||||
}
|
||||
|
||||
@ -35,9 +35,9 @@ ion-alert {
|
||||
}
|
||||
|
||||
ion-alert.alert-top {
|
||||
align-items: flex-start;
|
||||
@include padding(50px, null, null, null);
|
||||
|
||||
padding-top: 50px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
ion-alert input {
|
||||
|
||||
@ -608,7 +608,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
|
||||
}
|
||||
|
||||
.alert-wp .alert-button-group-vertical .alert-button {
|
||||
margin-top: $alert-wp-button-group-vertical-margin-top;
|
||||
@include margin($alert-wp-button-group-vertical-margin-top, null, null, null);
|
||||
|
||||
width: $alert-wp-button-group-vertical-width;
|
||||
}
|
||||
|
||||
@ -145,8 +145,7 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
@include margin(1.6rem, null, 1rem, null);
|
||||
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
@ -160,7 +159,7 @@ h6 {
|
||||
h5,
|
||||
h6 {
|
||||
&:first-child {
|
||||
margin-top: -.3rem;
|
||||
@include margin(-.3rem, null, null, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -168,17 +167,17 @@ h6 {
|
||||
h1 + h2,
|
||||
h1 + h3,
|
||||
h2 + h3 {
|
||||
margin-top: -.3rem;
|
||||
@include margin(-.3rem, null, null, null);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 2rem;
|
||||
@include margin(2rem, null, null, null);
|
||||
|
||||
font-size: $h1-font-size;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1.8rem;
|
||||
@include margin(1.8rem, null, null, null);
|
||||
|
||||
font-size: $h2-font-size;
|
||||
}
|
||||
@ -412,31 +411,19 @@ ion-footer {
|
||||
// Provide `[float-{bp}]` attributes for floating the element based
|
||||
// on the breakpoint
|
||||
[float#{$infix}-left] {
|
||||
// scss-lint:disable ImportantRule, PropertySpelling
|
||||
float: left !important;
|
||||
@include float(left, !important);
|
||||
}
|
||||
|
||||
[float#{$infix}-right] {
|
||||
// scss-lint:disable ImportantRule, PropertySpelling
|
||||
float: right !important;
|
||||
@include float(right, !important);
|
||||
}
|
||||
|
||||
[float#{$infix}-start] {
|
||||
// scss-lint:disable ImportantRule, PropertySpelling
|
||||
float: left !important;
|
||||
|
||||
@include rtl() {
|
||||
float: right !important;
|
||||
}
|
||||
@include float(start, !important);
|
||||
}
|
||||
|
||||
[float#{$infix}-end] {
|
||||
// scss-lint:disable ImportantRule, PropertySpelling
|
||||
float: right !important;
|
||||
|
||||
@include rtl() {
|
||||
float: left !important;
|
||||
}
|
||||
@include float(end, !important);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,51 +60,51 @@
|
||||
</ion-row>
|
||||
|
||||
<div class="float-elements-row">
|
||||
<div pull-left>pull-left</div>
|
||||
<div pull-sm-left>pull-sm-left</div>
|
||||
<div pull-md-left>pull-md-left</div>
|
||||
<div pull-lg-left>pull-lg-left</div>
|
||||
<div pull-xl-left>pull-xl-left</div>
|
||||
<div float-left>float-left</div>
|
||||
<div float-sm-left>float-sm-left</div>
|
||||
<div float-md-left>float-md-left</div>
|
||||
<div float-lg-left>float-lg-left</div>
|
||||
<div float-xl-left>float-xl-left</div>
|
||||
</div>
|
||||
|
||||
<div class="float-elements-row">
|
||||
<div pull-right>pull-right</div>
|
||||
<div pull-sm-right>pull-sm-right</div>
|
||||
<div pull-md-right>pull-md-right</div>
|
||||
<div pull-lg-right>pull-lg-right</div>
|
||||
<div pull-xl-right>pull-xl-right</div>
|
||||
<div float-right>float-right</div>
|
||||
<div float-sm-right>float-sm-right</div>
|
||||
<div float-md-right>float-md-right</div>
|
||||
<div float-lg-right>float-lg-right</div>
|
||||
<div float-xl-right>float-xl-right</div>
|
||||
</div>
|
||||
|
||||
<div class="float-elements-row">
|
||||
<div pull-start>pull-start</div>
|
||||
<div pull-sm-start>pull-sm-start</div>
|
||||
<div pull-md-start>pull-md-start</div>
|
||||
<div pull-lg-start>pull-lg-start</div>
|
||||
<div pull-xl-start>pull-xl-start</div>
|
||||
<div float-start>float-start</div>
|
||||
<div float-sm-start>float-sm-start</div>
|
||||
<div float-md-start>float-md-start</div>
|
||||
<div float-lg-start>float-lg-start</div>
|
||||
<div float-xl-start>float-xl-start</div>
|
||||
</div>
|
||||
|
||||
<div class="float-elements-row">
|
||||
<div pull-end>pull-end</div>
|
||||
<div pull-sm-end>pull-sm-end</div>
|
||||
<div pull-md-end>pull-md-end</div>
|
||||
<div pull-lg-end>pull-lg-end</div>
|
||||
<div pull-xl-end>pull-xl-end</div>
|
||||
<div float-end>float-end</div>
|
||||
<div float-sm-end>float-sm-end</div>
|
||||
<div float-md-end>float-md-end</div>
|
||||
<div float-lg-end>float-lg-end</div>
|
||||
<div float-xl-end>float-xl-end</div>
|
||||
</div>
|
||||
|
||||
<div class="float-elements-row" dir="rtl">
|
||||
<div pull-start>pull-start</div>
|
||||
<div pull-sm-start>pull-sm-start</div>
|
||||
<div pull-md-start>pull-md-start</div>
|
||||
<div pull-lg-start>pull-lg-start</div>
|
||||
<div pull-xl-start>pull-xl-start</div>
|
||||
<div float-start>float-start</div>
|
||||
<div float-sm-start>float-sm-start</div>
|
||||
<div float-md-start>float-md-start</div>
|
||||
<div float-lg-start>float-lg-start</div>
|
||||
<div float-xl-start>float-xl-start</div>
|
||||
</div>
|
||||
|
||||
<div class="float-elements-row" dir="rtl">
|
||||
<div pull-end>pull-end</div>
|
||||
<div pull-sm-end>pull-sm-end</div>
|
||||
<div pull-md-end>pull-md-end</div>
|
||||
<div pull-lg-end>pull-lg-end</div>
|
||||
<div pull-xl-end>pull-xl-end</div>
|
||||
<div float-end>float-end</div>
|
||||
<div float-sm-end>float-sm-end</div>
|
||||
<div float-md-end>float-md-end</div>
|
||||
<div float-lg-end>float-lg-end</div>
|
||||
<div float-xl-end>float-xl-end</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@ -133,7 +133,7 @@ $card-ios-header-color: #333 !default;
|
||||
}
|
||||
|
||||
.card-ios ion-list {
|
||||
margin-bottom: 0;
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.card-ios > .item:last-child,
|
||||
@ -165,7 +165,7 @@ $card-ios-header-color: #333 !default;
|
||||
|
||||
.card-header-ios + .card-content-ios,
|
||||
.card-ios .item + .card-content-ios {
|
||||
padding-top: 0;
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
.card .note-ios {
|
||||
@ -220,7 +220,7 @@ $card-ios-header-color: #333 !default;
|
||||
}
|
||||
|
||||
.card-ios + ion-card {
|
||||
margin-top: 0;
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -138,7 +138,7 @@ $card-md-header-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-md ion-list {
|
||||
margin-bottom: 0;
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.card-md > .item:last-child,
|
||||
@ -169,7 +169,7 @@ $card-md-header-color: #222 !default;
|
||||
|
||||
.card-header-md + .card-content-md,
|
||||
.card-md .item + .card-content-md {
|
||||
padding-top: 0;
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
.card .note-md {
|
||||
@ -229,7 +229,7 @@ $card-md-header-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-md + ion-card {
|
||||
margin-top: 0;
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -139,7 +139,7 @@ $card-wp-header-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-wp ion-list {
|
||||
margin-bottom: 0;
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.card-wp > .item:last-child,
|
||||
@ -171,7 +171,7 @@ $card-wp-header-color: #222 !default;
|
||||
|
||||
.card-header-wp + .card-content-wp,
|
||||
.card-wp .item + .card-content-wp {
|
||||
padding-top: 0;
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
.card .note-wp {
|
||||
@ -231,7 +231,7 @@ $card-wp-header-color: #222 !default;
|
||||
}
|
||||
|
||||
.card-wp + ion-card {
|
||||
margin-top: 0;
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -98,7 +98,7 @@ ion-app [no-padding] .scroll-content {
|
||||
|
||||
ion-app.#{$mode} [padding-top],
|
||||
ion-app.#{$mode} [padding-top] .scroll-content {
|
||||
padding-top: $content-padding;
|
||||
@include padding($content-padding, null, null, null);
|
||||
}
|
||||
|
||||
ion-app.#{$mode} [padding-left],
|
||||
@ -113,13 +113,12 @@ ion-app [no-padding] .scroll-content {
|
||||
|
||||
ion-app.#{$mode} [padding-bottom],
|
||||
ion-app.#{$mode} [padding-bottom] .scroll-content {
|
||||
padding-bottom: $content-padding;
|
||||
@include padding(null, null, $content-padding, null);
|
||||
}
|
||||
|
||||
ion-app.#{$mode} [padding-vertical],
|
||||
ion-app.#{$mode} [padding-vertical] .scroll-content {
|
||||
padding-top: $content-padding;
|
||||
padding-bottom: $content-padding;
|
||||
@include padding($content-padding, null, $content-padding, null);
|
||||
}
|
||||
|
||||
ion-app.#{$mode} [padding-horizontal],
|
||||
@ -145,7 +144,7 @@ ion-app [no-margin] .scroll-content {
|
||||
|
||||
ion-app.#{$mode} [margin-top],
|
||||
ion-app.#{$mode} [margin-top] .scroll-content {
|
||||
margin-top: $content-margin;
|
||||
@include margin($content-margin, null, null, null);
|
||||
}
|
||||
|
||||
ion-app.#{$mode} [margin-left],
|
||||
@ -172,13 +171,12 @@ ion-app [no-margin] .scroll-content {
|
||||
|
||||
ion-app.#{$mode} [margin-bottom],
|
||||
ion-app.#{$mode} [margin-bottom] .scroll-content {
|
||||
margin-bottom: $content-margin;
|
||||
@include margin(null, null, $content-margin, null);
|
||||
}
|
||||
|
||||
ion-app.#{$mode} [margin-vertical],
|
||||
ion-app.#{$mode} [margin-vertical] .scroll-content {
|
||||
margin-top: $content-margin;
|
||||
margin-bottom: $content-margin;
|
||||
@include margin($content-margin, null, $content-margin, null);
|
||||
}
|
||||
|
||||
ion-app.#{$mode} [margin-horizontal],
|
||||
|
||||
@ -79,14 +79,13 @@ ion-fab {
|
||||
|
||||
&[center] {
|
||||
@include position(null, null, null, 50%);
|
||||
|
||||
@include margin-horizontal(-$fab-size / 2, null);
|
||||
}
|
||||
|
||||
&[middle] {
|
||||
top: 50%;
|
||||
@include margin(-$fab-size / 2, null, null, null);
|
||||
|
||||
margin-top: -$fab-size / 2;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&[top] {
|
||||
@ -95,7 +94,9 @@ ion-fab {
|
||||
|
||||
&[right] {
|
||||
// scss-lint:disable PropertySpelling
|
||||
right: $fab-content-margin;
|
||||
@include multi-dir() {
|
||||
right: $fab-content-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&[end] {
|
||||
@ -108,7 +109,9 @@ ion-fab {
|
||||
|
||||
&[left] {
|
||||
// scss-lint:disable PropertySpelling
|
||||
left: $fab-content-margin;
|
||||
@include multi-dir() {
|
||||
left: $fab-content-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&[start] {
|
||||
|
||||
@ -60,10 +60,10 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
|
||||
|
||||
.item-ios {
|
||||
@include padding-horizontal($item-ios-padding-start, null);
|
||||
@include border-radius(0);
|
||||
|
||||
position: relative;
|
||||
|
||||
border-radius: 0;
|
||||
font-size: $item-ios-body-text-font-size;
|
||||
color: $list-ios-text-color;
|
||||
background-color: $list-ios-background-color;
|
||||
@ -119,7 +119,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
|
||||
.item-ios h5:last-child,
|
||||
.item-ios h6:last-child,
|
||||
.item-ios p:last-child {
|
||||
margin-bottom: 0;
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.item-ios.item-block .item-inner {
|
||||
@ -187,12 +187,12 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
|
||||
|
||||
.item-ios ion-avatar ion-img,
|
||||
.item-ios ion-avatar img {
|
||||
width: $item-ios-avatar-size;
|
||||
height: $item-ios-avatar-size;
|
||||
|
||||
border-radius: $item-ios-avatar-border-radius;
|
||||
@include border-radius($item-ios-avatar-border-radius);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: $item-ios-avatar-size;
|
||||
height: $item-ios-avatar-size;
|
||||
}
|
||||
|
||||
|
||||
@ -274,7 +274,7 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner {
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: color-shade($color-base);
|
||||
background-color: color-shade($color-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,10 +98,10 @@ $item-md-sliding-content-background: $list-md-background-color !default;
|
||||
}
|
||||
|
||||
.item-md p {
|
||||
overflow: inherit;
|
||||
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
overflow: inherit;
|
||||
|
||||
font-size: 1.4rem;
|
||||
line-height: normal;
|
||||
text-overflow: inherit;
|
||||
@ -196,12 +196,12 @@ $item-md-sliding-content-background: $list-md-background-color !default;
|
||||
|
||||
.item-md ion-avatar ion-img,
|
||||
.item-md ion-avatar img {
|
||||
width: $item-md-avatar-size;
|
||||
height: $item-md-avatar-size;
|
||||
|
||||
border-radius: $item-md-avatar-border-radius;
|
||||
@include border-radius($item-md-avatar-border-radius);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: $item-md-avatar-size;
|
||||
height: $item-md-avatar-size;
|
||||
}
|
||||
|
||||
|
||||
@ -239,11 +239,10 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner {
|
||||
.item-divider-md {
|
||||
@include padding-horizontal($item-md-padding-start, null);
|
||||
|
||||
color: $item-md-divider-color;
|
||||
background-color: $item-md-divider-background;
|
||||
|
||||
border-bottom: $item-md-divider-border-bottom;
|
||||
font-size: $item-md-divider-font-size;
|
||||
color: $item-md-divider-color;
|
||||
background-color: $item-md-divider-background;
|
||||
}
|
||||
|
||||
|
||||
@ -267,7 +266,7 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner {
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: color-shade($color-base);
|
||||
background-color: color-shade($color-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,13 +60,13 @@ $label-ios-margin-start: 0 !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.label-ios[stacked] {
|
||||
margin-bottom: 4px;
|
||||
@include margin(null, null, 4px, null);
|
||||
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.label-ios[floating] {
|
||||
margin-bottom: 0;
|
||||
@include margin(null, null, 0, null);
|
||||
|
||||
transform: translate3d(0, 27px, 0);
|
||||
transform-origin: left top;
|
||||
@ -90,8 +90,7 @@ $label-ios-margin-start: 0 !default;
|
||||
.item-ios.item-label-floating [item-right], // deprecated
|
||||
.item-ios.item-label-stacked [item-end],
|
||||
.item-ios.item-label-floating [item-end] {
|
||||
margin-top: $item-ios-padding-media-top - 2;
|
||||
margin-bottom: $item-ios-padding-media-bottom - 2;
|
||||
@include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null);
|
||||
}
|
||||
|
||||
.item-input-has-focus .label-ios[stacked],
|
||||
|
||||
@ -90,8 +90,7 @@ $label-md-margin-start: 0 !default;
|
||||
.item-md.item-label-floating [item-right], // deprecated
|
||||
.item-md.item-label-stacked [item-end],
|
||||
.item-md.item-label-floating [item-end] {
|
||||
margin-top: $item-md-padding-media-top - 2;
|
||||
margin-bottom: $item-md-padding-media-bottom - 2;
|
||||
@include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ ion-label[fixed] {
|
||||
|
||||
ion-label[stacked],
|
||||
ion-label[floating] {
|
||||
margin-bottom: 0;
|
||||
@include margin(null, null, 0, null);
|
||||
}
|
||||
|
||||
.item-label-stacked .input-wrapper,
|
||||
|
||||
@ -70,8 +70,7 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default;
|
||||
.item-wp.item-label-floating [item-right], // deprecated
|
||||
.item-wp.item-label-stacked [item-end],
|
||||
.item-wp.item-label-floating [item-end] {
|
||||
margin-top: $item-wp-padding-media-top + 4;
|
||||
margin-bottom: $item-wp-padding-media-top + 4;
|
||||
@include margin($item-wp-padding-media-top + 4, null, $item-wp-padding-media-top + 4, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -103,17 +103,17 @@ $list-ios-header-background-color: transparent !default;
|
||||
}
|
||||
|
||||
.list-ios ion-item-options .button {
|
||||
@include margin(0);
|
||||
@include border-radius(0);
|
||||
|
||||
display: inline-flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
@include margin(0);
|
||||
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -123,8 +123,8 @@ $list-ios-header-background-color: transparent !default;
|
||||
}
|
||||
|
||||
.list-ios:not([inset]) + .list-ios:not([inset]) ion-list-header {
|
||||
margin-top: -$list-ios-margin-top;
|
||||
padding-top: 0;
|
||||
@include margin(-$list-ios-margin-top, null, null, null);
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
@ -133,8 +133,7 @@ $list-ios-header-background-color: transparent !default;
|
||||
|
||||
.list-ios[inset] {
|
||||
@include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start);
|
||||
|
||||
border-radius: $list-inset-ios-border-radius;
|
||||
@include border-radius($list-inset-ios-border-radius);
|
||||
}
|
||||
|
||||
.list-ios[inset] ion-list-header {
|
||||
@ -160,7 +159,7 @@ $list-ios-header-background-color: transparent !default;
|
||||
}
|
||||
|
||||
.list-ios[inset] + ion-list[inset] {
|
||||
margin-top: 0;
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -116,7 +116,7 @@ $list-md-header-color: #757575 !default;
|
||||
}
|
||||
|
||||
.list-md + ion-list ion-list-header {
|
||||
margin-top: -$list-md-margin-top;
|
||||
@include margin(-$list-md-margin-top, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
@ -145,7 +145,7 @@ $list-md-header-color: #757575 !default;
|
||||
}
|
||||
|
||||
.list-md[inset] + ion-list[inset] {
|
||||
margin-top: 0;
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
.list-md[inset] ion-list-header {
|
||||
@ -168,8 +168,7 @@ $list-md-header-color: #757575 !default;
|
||||
|
||||
.list-header-md {
|
||||
@include padding-horizontal($list-md-header-padding-start, null);
|
||||
|
||||
margin-bottom: $list-md-header-margin-bottom;
|
||||
@include margin(null, null, $list-md-header-margin-bottom, null);
|
||||
|
||||
min-height: $list-md-header-min-height;
|
||||
|
||||
|
||||
@ -115,8 +115,8 @@ $list-wp-header-color: $list-wp-text-color !default;
|
||||
}
|
||||
|
||||
.list-wp + ion-list ion-list-header {
|
||||
margin-top: -$list-wp-margin-top;
|
||||
padding-top: 0;
|
||||
@include margin(-$list-wp-margin-top, null, null, null);
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
@ -145,7 +145,7 @@ $list-wp-header-color: $list-wp-text-color !default;
|
||||
}
|
||||
|
||||
.list-wp[inset] + ion-list[inset] {
|
||||
margin-top: 0;
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
.list-wp[inset] ion-list-header {
|
||||
|
||||
@ -47,6 +47,18 @@ ion-menu.show-menu {
|
||||
}
|
||||
|
||||
ion-menu[side=right] > .menu-inner {
|
||||
// scss-lint:disable PropertySpelling
|
||||
@include multi-dir() {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
ion-menu[side=start] > .menu-inner {
|
||||
@include position-horizontal(0, auto);
|
||||
}
|
||||
|
||||
ion-menu[side=end] > .menu-inner {
|
||||
@include position-horizontal(auto, 0);
|
||||
}
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ $range-ios-pin-padding-start: $range-ios-pin-padding-end !defaul
|
||||
}
|
||||
|
||||
.range-ios.range-has-pin {
|
||||
padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
|
||||
@include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null);
|
||||
}
|
||||
|
||||
.range-ios .range-slider {
|
||||
|
||||
@ -89,7 +89,7 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
|
||||
}
|
||||
|
||||
.range-md.range-has-pin {
|
||||
padding-top: $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical;
|
||||
@include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
|
||||
}
|
||||
|
||||
.range-md .range-slider {
|
||||
|
||||
@ -92,7 +92,7 @@ $range-wp-pin-padding-start: $range-wp-pin-padding-end !default;
|
||||
}
|
||||
|
||||
.range-wp.range-has-pin {
|
||||
padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding-top;
|
||||
@include padding($range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding-top, null, null, null);
|
||||
}
|
||||
|
||||
.range-wp .range-slider {
|
||||
|
||||
@ -43,7 +43,7 @@ ion-refresher {
|
||||
// when the refresher is let go or has completed
|
||||
// this transition is what is used to put the
|
||||
// scroll content back into it's original location
|
||||
margin-top: -1px;
|
||||
@include margin(-1px, null, null, null);
|
||||
|
||||
border-top: 1px solid $refresher-border-color;
|
||||
transition: transform 320ms cubic-bezier(.36, .66, .04, 1);
|
||||
|
||||
@ -43,11 +43,10 @@ $select-ios-placeholder-color: $select-ios-icon-color !default;
|
||||
|
||||
.select-ios .select-icon .select-icon-inner {
|
||||
@include position(50%, null, null, 5px);
|
||||
@include margin(-2px, null, null, null);
|
||||
|
||||
position: absolute;
|
||||
|
||||
margin-top: -2px;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
|
||||
@ -47,11 +47,10 @@ $select-md-placeholder-color: $select-md-icon-color !default;
|
||||
|
||||
.select-md .select-icon .select-icon-inner {
|
||||
@include position(50%, null, null, 5px);
|
||||
@include margin(-3px, null, null, null);
|
||||
|
||||
position: absolute;
|
||||
|
||||
margin-top: -3px;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
|
||||
@ -5,10 +5,12 @@
|
||||
|
||||
// Applied by the showWhen directive
|
||||
.hidden-show-when {
|
||||
// scss-lint:disable ImportantRule
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Applied by the hideWhen directive
|
||||
.hidden-hide-when {
|
||||
// scss-lint:disable ImportantRule
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -1,30 +1,34 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
/**
|
||||
* Adopted from Swiper
|
||||
* 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
|
||||
*/
|
||||
// Adopted from Swiper
|
||||
// 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
|
||||
|
||||
.swiper-container {
|
||||
@include margin-horizontal(auto);
|
||||
@include padding(0);
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Fix of Webkit flickering */
|
||||
// Fix of Webkit flickering
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-container-no-flexbox .swiper-slide {
|
||||
float: left;
|
||||
@include float(start);
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-wrapper {
|
||||
@ -32,18 +36,24 @@
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
@include padding(0);
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
|
||||
transition-property: transform;
|
||||
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.swiper-container-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.swiper-container-multirow > .swiper-wrapper {
|
||||
@ -57,13 +67,27 @@
|
||||
}
|
||||
|
||||
.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%;
|
||||
position: relative;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Auto Height */
|
||||
// Auto Height
|
||||
.swiper-container-autoheight,
|
||||
.swiper-container-autoheight .swiper-slide {
|
||||
height: auto;
|
||||
@ -71,49 +95,54 @@
|
||||
|
||||
.swiper-container-autoheight .swiper-wrapper {
|
||||
align-items: flex-start;
|
||||
|
||||
transition-property: transform, height;
|
||||
}
|
||||
|
||||
/* a11y */
|
||||
// a11y
|
||||
.swiper-container .swiper-notification {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
/* IE10 Windows Phone 8 Fixes */
|
||||
// IE10 Windows Phone 8 Fixes
|
||||
.swiper-wp8-horizontal {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.swiper-wp8-vertical {
|
||||
-ms-touch-action: pan-x;
|
||||
touch-action: pan-x;
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
// Arrows
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
@include position(50%, null, null, null);
|
||||
@include margin(-22px, null, null, null);
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
|
||||
width: 27px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
background-size: 27px 44px;
|
||||
background-position: center;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 27px 44px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swiper-button-prev.swiper-button-disabled,
|
||||
.swiper-button-next.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
cursor: auto;
|
||||
opacity: .35;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -151,14 +180,16 @@
|
||||
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 */
|
||||
// Pagination Styles
|
||||
.swiper-pagination {
|
||||
@include text-align(center);
|
||||
|
||||
position: absolute;
|
||||
transition: 300ms;
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10;
|
||||
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: 300ms;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -166,7 +197,7 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Common Styles */
|
||||
// Common Styles
|
||||
.swiper-pagination-fraction,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-container-horizontal > .swiper-pagination-bullets {
|
||||
@ -175,24 +206,28 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Bullets */
|
||||
// Bullets
|
||||
.swiper-pagination-bullet {
|
||||
@include border-radius(100%);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
opacity: .2;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
button.swiper-pagination-bullet {
|
||||
@include margin(0);
|
||||
@include padding(0);
|
||||
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
@include appearance(none);
|
||||
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
@ -204,8 +239,8 @@ button.swiper-pagination-bullet {
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #007aff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.swiper-pagination-white .swiper-pagination-bullet-active {
|
||||
@ -219,11 +254,12 @@ button.swiper-pagination-bullet {
|
||||
.swiper-container-vertical > .swiper-pagination-bullets {
|
||||
@include position(50%, 10px, null, null);
|
||||
|
||||
transform: translate3d(0px, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
@include margin(5px, 0);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -231,20 +267,23 @@ button.swiper-pagination-bullet {
|
||||
@include margin(0, 5px);
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
// Progress
|
||||
.swiper-pagination-progress {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
|
||||
background: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.swiper-pagination-progress .swiper-pagination-progressbar {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
background: #007aff;
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: #007aff;
|
||||
|
||||
transform: scale(0);
|
||||
transform-origin: left top;
|
||||
}
|
||||
@ -268,7 +307,7 @@ button.swiper-pagination-bullet {
|
||||
}
|
||||
|
||||
.swiper-pagination-progress.swiper-pagination-white {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
|
||||
@ -279,7 +318,7 @@ button.swiper-pagination-bullet {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* 3D Container */
|
||||
// 3D Container
|
||||
.swiper-container-3d {
|
||||
perspective: 1200px;
|
||||
}
|
||||
@ -301,36 +340,38 @@ button.swiper-pagination-bullet {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-left {
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-right {
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-top {
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
/* Coverflow */
|
||||
// Coverflow
|
||||
.swiper-container-coverflow .swiper-wrapper,
|
||||
.swiper-container-flip .swiper-wrapper {
|
||||
/* Windows 8 IE 10 fix */
|
||||
// Windows 8 IE 10 fix
|
||||
perspective: 1200px;
|
||||
}
|
||||
|
||||
/* Cube + Flip */
|
||||
// Cube + Flip
|
||||
.swiper-container-cube,
|
||||
.swiper-container-flip {
|
||||
overflow: visible;
|
||||
@ -338,9 +379,11 @@ button.swiper-pagination-bullet {
|
||||
|
||||
.swiper-container-cube .swiper-slide,
|
||||
.swiper-container-flip .swiper-slide {
|
||||
pointer-events: none;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
|
||||
backface-visibility: hidden;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-slide .swiper-slide,
|
||||
@ -364,15 +407,17 @@ button.swiper-pagination-bullet {
|
||||
.swiper-container-cube .swiper-slide-shadow-right,
|
||||
.swiper-container-flip .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Cube */
|
||||
// Cube
|
||||
.swiper-container-cube .swiper-slide {
|
||||
visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.swiper-container-cube.swiper-container-rtl .swiper-slide {
|
||||
@ -383,32 +428,35 @@ button.swiper-pagination-bullet {
|
||||
.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;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.swiper-container-cube .swiper-cube-shadow {
|
||||
@include position(null, null, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
-webkit-filter: blur(50px);
|
||||
opacity: .6;
|
||||
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Fade */
|
||||
// Fade
|
||||
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide {
|
||||
pointer-events: none;
|
||||
transition-property: opacity;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.swiper-container-fade .swiper-slide .swiper-slide {
|
||||
@ -423,11 +471,13 @@ button.swiper-pagination-bullet {
|
||||
.swiper-zoom-container {
|
||||
@include text-align(center);
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-zoom-container > img,
|
||||
@ -435,77 +485,88 @@ button.swiper-pagination-bullet {
|
||||
.swiper-zoom-container > canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
// Scrollbar
|
||||
.swiper-scrollbar {
|
||||
border-radius: 10px;
|
||||
@include border-radius(10px);
|
||||
|
||||
position: relative;
|
||||
|
||||
background: rgba(0, 0, 0, .1);
|
||||
|
||||
touch-action: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.swiper-container-horizontal > .swiper-scrollbar {
|
||||
@include position(null, null, null, 1%);
|
||||
@include position(null, null, 3px, 1%);
|
||||
|
||||
position: absolute;
|
||||
|
||||
bottom: 3px;
|
||||
z-index: 50;
|
||||
height: 5px;
|
||||
|
||||
width: 98%;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.swiper-container-vertical > .swiper-scrollbar {
|
||||
@include position(1%, 3px, null, null);
|
||||
|
||||
position: absolute;
|
||||
|
||||
z-index: 50;
|
||||
|
||||
width: 5px;
|
||||
height: 98%;
|
||||
}
|
||||
|
||||
.swiper-scrollbar-drag {
|
||||
@include position(0, null, null, 0);
|
||||
@include border-radius(10px);
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.swiper-scrollbar-cursor-drag {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/* Preloader */
|
||||
// Preloader
|
||||
.swiper-lazy-preloader {
|
||||
@include position(50%, null, null, 50%);
|
||||
@include margin(-21px, null, null, -21px);
|
||||
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
|
||||
transform-origin: 50%;
|
||||
|
||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader:after {
|
||||
.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-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader-white:after {
|
||||
.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");
|
||||
}
|
||||
|
||||
@ -515,56 +576,24 @@ button.swiper-pagination-bullet {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ion-slides {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-zoom {
|
||||
@include text-align(center);
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
@include padding(0);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
@include padding(0);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
@include text-align(center);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@ -20,10 +20,6 @@ $split-pane-side-max-width: 28% !default;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
[dir="rtl"] .split-pane {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.split-pane-side:not(ion-menu) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -80,8 +80,7 @@ $tabs-ios-tab-icon-size: 30px !default;
|
||||
}
|
||||
|
||||
.tabs-ios .tab-button-text {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1px;
|
||||
@include margin(0, null, 1px, null);
|
||||
|
||||
min-height: $tabs-ios-tab-font-size + 1;
|
||||
}
|
||||
@ -91,8 +90,7 @@ $tabs-ios-tab-icon-size: 30px !default;
|
||||
}
|
||||
|
||||
.tabs-ios .tab-button-icon {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 1px;
|
||||
@include margin(4px, null, 1px, null);
|
||||
|
||||
min-width: $tabs-ios-tab-icon-size + 5;
|
||||
height: $tabs-ios-tab-icon-size;
|
||||
|
||||
@ -162,12 +162,11 @@ $tabs-md-tab-icon-size: 2.4rem !default;
|
||||
}
|
||||
|
||||
.tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
@include margin(4px, null, 0, null);
|
||||
}
|
||||
|
||||
.tabs-md[tabsLayout=icon-bottom] .tab-button .tab-button-text {
|
||||
margin-top: 0;
|
||||
@include margin(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
@ -175,7 +174,7 @@ $tabs-md-tab-icon-size: 2.4rem !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.tabs-md .tab-button-icon {
|
||||
margin-top: 1px;
|
||||
@include margin(1px, null, null, null);
|
||||
|
||||
min-width: $tabs-md-tab-icon-size;
|
||||
|
||||
|
||||
@ -62,8 +62,7 @@
|
||||
}
|
||||
|
||||
.tab-button-text {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 2px;
|
||||
@include margin(3px, null, 2px, null);
|
||||
}
|
||||
|
||||
.tab-button-text,
|
||||
|
||||
@ -98,8 +98,7 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
.tabs-wp .tab-button-text {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
@include margin(5px, null);
|
||||
}
|
||||
|
||||
|
||||
@ -119,15 +118,14 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
|
||||
}
|
||||
|
||||
.tabs-wp[tabsLayout=icon-bottom] .tab-button {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
@include padding(8px, null, 8px, null);
|
||||
}
|
||||
|
||||
.tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
|
||||
.tabs-wp[tabsLayout=icon-left] .tab-button, // deprecated
|
||||
.tabs-wp[tabsLayout=icon-end] .tab-button,
|
||||
.tabs-wp[tabsLayout=icon-start] .tab-button {
|
||||
padding-bottom: 10px;
|
||||
@include padding(null, null, 10px, null);
|
||||
}
|
||||
|
||||
.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
|
||||
|
||||
@ -327,12 +327,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
|
||||
}
|
||||
|
||||
.back-button-icon-ios {
|
||||
@include margin(0);
|
||||
@include margin(-1px, 0, 0, 0);
|
||||
|
||||
display: inherit;
|
||||
|
||||
margin-top: -1px;
|
||||
|
||||
min-width: 18px;
|
||||
|
||||
font-size: 3.4rem;
|
||||
|
||||
@ -43,18 +43,18 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
|
||||
@mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {
|
||||
|
||||
> .toolbar.statusbar-padding:first-child {
|
||||
padding-top: calc(#{$cordova-statusbar-padding} + #{$toolbar-padding});
|
||||
@include padding(calc(#{$cordova-statusbar-padding} + #{$toolbar-padding}), null, null, null);
|
||||
|
||||
min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
|
||||
}
|
||||
|
||||
> ion-content.statusbar-padding:first-child .scroll-content {
|
||||
padding-top: $cordova-statusbar-padding;
|
||||
@include padding($cordova-statusbar-padding, null, null, null);
|
||||
}
|
||||
|
||||
> ion-content.statusbar-padding:first-child[padding] .scroll-content,
|
||||
> ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
|
||||
padding-top: calc(#{$content-padding} + #{$cordova-statusbar-padding});
|
||||
@include padding(calc(#{$content-padding} + #{$cordova-statusbar-padding}), null, null, null);
|
||||
}
|
||||
|
||||
}
|
||||
@ -67,7 +67,7 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
|
||||
|
||||
> .toolbar.statusbar-padding:first-child ion-segment,
|
||||
> .toolbar.statusbar-padding:first-child ion-title {
|
||||
padding-top: $cordova-statusbar-padding;
|
||||
@include padding($cordova-statusbar-padding, null, null, null);
|
||||
|
||||
height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
|
||||
min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
|
||||
|
||||
@ -1180,7 +1180,8 @@ export function setupPlatform(doc: HTMLDocument, platformConfigs: {[key: string]
|
||||
// set values from "document"
|
||||
const docElement = doc.documentElement;
|
||||
plt.setDocument(doc);
|
||||
plt.setDir(docElement.dir, false);
|
||||
const dir = docElement.dir;
|
||||
plt.setDir(dir || 'ltr', !dir);
|
||||
plt.setLang(docElement.lang, false);
|
||||
|
||||
// set css properties
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
@import "./ionic.mixins";
|
||||
|
||||
|
||||
// Global include-rtl
|
||||
$include-rtl: true !default;
|
||||
// Global app direction
|
||||
$app-direction: null !default;
|
||||
|
||||
|
||||
// Global font path
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@import "ionic.functions";
|
||||
|
||||
// Appearance
|
||||
// --------------------------------------------------
|
||||
@ -9,7 +10,6 @@
|
||||
appearance: $val;
|
||||
}
|
||||
|
||||
|
||||
// Input Placeholder
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -82,6 +82,15 @@
|
||||
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
@ -94,17 +103,6 @@
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
@ -118,18 +116,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
@ -143,6 +129,16 @@
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@ -157,16 +153,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
$include-rtl: true !default;
|
||||
@mixin multi-dir() {
|
||||
@if $app-direction == null {
|
||||
$root: #{&};
|
||||
@at-root [dir="ltr"], [dir="rtl"] {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl() {
|
||||
@if $include-rtl {
|
||||
@if $app-direction == null {
|
||||
$root: #{&};
|
||||
@at-root [dir="rtl"] {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
} @else if $app-direction == rtl {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr() {
|
||||
@if $app-direction == null {
|
||||
$root: #{&};
|
||||
@at-root [dir="ltr"] {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
} @else if $app-direction == ltr {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -184,96 +206,103 @@ $include-rtl: true !default;
|
||||
}
|
||||
}
|
||||
|
||||
// Add padding horizontal
|
||||
// @param {string} $start - amount to pad start
|
||||
// @param {string} $end - amount to pad end
|
||||
// Add property horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding-horizontal($start, $end: $start) {
|
||||
@if $start != null {
|
||||
padding-left: $start;
|
||||
}
|
||||
|
||||
@if $end != null {
|
||||
padding-right: $end;
|
||||
}
|
||||
|
||||
@if $start != $end {
|
||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||
@if $start == $end {
|
||||
@include multi-dir() {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
}
|
||||
@include rtl() {
|
||||
@if $start != null {
|
||||
padding-right: $start;
|
||||
} @else if $end != null {
|
||||
padding-right: initial;
|
||||
}
|
||||
#{$prop}-left: $end;
|
||||
#{$prop}-right: $start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $end != null {
|
||||
padding-left: $end;
|
||||
} @else if $start != null {
|
||||
padding-left: initial;
|
||||
// Add property for all directions
|
||||
// @param {string} $prop
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// @param {boolean} $content include content or use default
|
||||
// ----------------------------------------------------------
|
||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end, $content: false) {
|
||||
@if $top == $end and $top == $bottom and $top == $start {
|
||||
@include multi-dir() {
|
||||
#{$prop}: $top;
|
||||
}
|
||||
} @else if $top == $bottom and $end == $start and $top != null and $end != null {
|
||||
@include multi-dir() {
|
||||
#{$prop}: $top $end;
|
||||
}
|
||||
} @else if $end == $start and $top != null and $end != null and $bottom != null {
|
||||
@include multi-dir() {
|
||||
#{$prop}: $top $end $bottom;
|
||||
}
|
||||
} @else if $top != null and $end != null and $bottom != null and $start != null {
|
||||
@include ltr() {
|
||||
#{$prop}: $top $end $bottom $start;
|
||||
}
|
||||
@include rtl() {
|
||||
#{$prop}: $top $start $bottom $end;
|
||||
}
|
||||
} @else {
|
||||
@if $content == true { // TODO check if @content exists instead
|
||||
@content;
|
||||
} @else {
|
||||
@include property-horizontal($prop, $start, $end);
|
||||
@include multi-dir() {
|
||||
#{$prop}-top: $top;
|
||||
#{$prop}-bottom: $bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add padding for all sides
|
||||
// Add padding horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(padding, $start, $end);
|
||||
}
|
||||
|
||||
// Add padding for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@if ($top == $end and $top == $bottom and $top == $start) {
|
||||
padding: $top;
|
||||
} @else {
|
||||
@include padding-horizontal($start, $end);
|
||||
padding-top: $top;
|
||||
padding-bottom: $bottom;
|
||||
}
|
||||
@include property(padding, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add margin horizontal
|
||||
// @param {string} $start - amount to margin start
|
||||
// @param {string} $end - amount to margin end
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin-horizontal($start, $end: $start) {
|
||||
@if $start != null {
|
||||
margin-left: $start;
|
||||
}
|
||||
|
||||
@if $end != null {
|
||||
margin-right: $end;
|
||||
}
|
||||
|
||||
@if $start != $end {
|
||||
@include rtl() {
|
||||
@if $start != null {
|
||||
margin-right: $start;
|
||||
} @else if $end != null {
|
||||
margin-right: initial;
|
||||
}
|
||||
|
||||
@if $end != null {
|
||||
margin-left: $end;
|
||||
} @else if $start != null {
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include property-horizontal(margin, $start, $end);
|
||||
}
|
||||
|
||||
// Add margin for all sides
|
||||
// Add margin for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@if ($top == $end and $top == $bottom and $top == $start) {
|
||||
margin: $top;
|
||||
} @else {
|
||||
@include margin-horizontal($start, $end);
|
||||
margin-top: $top;
|
||||
margin-bottom: $bottom;
|
||||
}
|
||||
@include property(margin, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add position horizontal
|
||||
@ -281,32 +310,24 @@ $include-rtl: true !default;
|
||||
// @param {string} $end - amount to left: 0; end
|
||||
// ----------------------------------------------------------
|
||||
@mixin position-horizontal($start: null, $end: null) {
|
||||
@if $start != null {
|
||||
left: $start;
|
||||
}
|
||||
|
||||
@if $end != null {
|
||||
right: $end;
|
||||
}
|
||||
|
||||
@if $start != $end {
|
||||
@if $start == $end {
|
||||
@include multi-dir() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
@include rtl() {
|
||||
@if $start != null {
|
||||
right: $start;
|
||||
} @else if $end != null {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@if $end != null {
|
||||
left: $end;
|
||||
} @else if $start != null {
|
||||
left: auto;
|
||||
}
|
||||
left: $end;
|
||||
right: $start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add position for all sides
|
||||
// Add position for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
@ -314,69 +335,34 @@ $include-rtl: true !default;
|
||||
// ----------------------------------------------------------
|
||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
@if $top != null {
|
||||
top: $top;
|
||||
}
|
||||
@if $bottom != null {
|
||||
bottom: $bottom;
|
||||
}
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add correct border radius for ltr and rtl
|
||||
// Add border radius for all directions
|
||||
// @param {string} $top-start
|
||||
// @param {string} $top-end
|
||||
// @param {string} $bottom-end
|
||||
// @param {string} $bottom-start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
||||
@if ($top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start) {
|
||||
border-radius: $top-start;
|
||||
} @else {
|
||||
@if $top-start != null {
|
||||
@include property(border-radius, $top-start, $top-end, $bottom-end, $bottom-start, true) {
|
||||
@include ltr() {
|
||||
border-top-left-radius: $top-start;
|
||||
}
|
||||
|
||||
@if $top-end != null {
|
||||
border-top-right-radius: $top-end;
|
||||
}
|
||||
|
||||
@if $bottom-end != null {
|
||||
border-bottom-right-radius: $bottom-end;
|
||||
}
|
||||
|
||||
@if $bottom-start != null {
|
||||
border-bottom-left-radius: $bottom-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
@if $top-start != null {
|
||||
border-top-right-radius: $top-start;
|
||||
} @else if $top-end != null {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
@if $top-end != null {
|
||||
border-top-left-radius: $top-end;
|
||||
} @else if $top-start != null {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
@if $bottom-end != null {
|
||||
border-bottom-left-radius: $bottom-end;
|
||||
} @else if $bottom-start != null {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
@if $bottom-start != null {
|
||||
border-bottom-right-radius: $bottom-start;
|
||||
} @else if $bottom-end != null {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
border-top-left-radius: $top-end;
|
||||
border-top-right-radius: $top-start;
|
||||
border-bottom-right-radius: $bottom-start;
|
||||
border-bottom-left-radius: $bottom-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sets correct text align with support for old browsers
|
||||
// @param {string} $direction - text direction
|
||||
// @param {string} $decorator - !important
|
||||
@ -391,4 +377,48 @@ $include-rtl: true !default;
|
||||
} @else {
|
||||
text-align: $direction $decorator;
|
||||
}
|
||||
}
|
||||
|
||||
// Add direction for all directions
|
||||
// @param {string} $dir - Direction on LTR
|
||||
@mixin direction($dir) {
|
||||
$other-dir: null;
|
||||
|
||||
@if $dir == ltr {
|
||||
$other-dir: rtl;
|
||||
} @else {
|
||||
$other-dir: ltr;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
direction: $dir;
|
||||
}
|
||||
@include rtl() {
|
||||
direction: $other-dir;
|
||||
}
|
||||
}
|
||||
|
||||
// Add float for all directions
|
||||
// @param {string} $side
|
||||
// @param {string} $decorator - !important
|
||||
@mixin float($side, $decorator: null) {
|
||||
@if $side == start {
|
||||
@include ltr() {
|
||||
float: left $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: right $decorator;
|
||||
}
|
||||
} @else if $side == end {
|
||||
@include ltr() {
|
||||
float: right $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: left $decorator;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
float: $side $decorator;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user