diff --git a/.scss-lint.yml b/.scss-lint.yml index 13253e0ab60..75a8d881337 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -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 diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss index c95aa3393b5..682c854831b 100644 --- a/src/components/action-sheet/action-sheet.ios.scss +++ b/src/components/action-sheet/action-sheet.ios.scss @@ -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; diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss index 75d83908aca..6ff9f588974 100644 --- a/src/components/alert/alert.ios.scss +++ b/src/components/alert/alert.ios.scss @@ -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; diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss index 3921b43d178..17529faf6c7 100644 --- a/src/components/alert/alert.md.scss +++ b/src/components/alert/alert.md.scss @@ -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; } diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 30165b00838..3d0f7fadfcc 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -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 { diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss index c20bf270ccc..9a97cff3086 100644 --- a/src/components/alert/alert.wp.scss +++ b/src/components/alert/alert.wp.scss @@ -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; } diff --git a/src/components/app/app.scss b/src/components/app/app.scss index 7beadc430a9..e9a67557f24 100644 --- a/src/components/app/app.scss +++ b/src/components/app/app.scss @@ -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); } } } diff --git a/src/components/app/test/utilities/pages/root-page/root-page.html b/src/components/app/test/utilities/pages/root-page/root-page.html index 04fb9247db7..41f2a4a8025 100644 --- a/src/components/app/test/utilities/pages/root-page/root-page.html +++ b/src/components/app/test/utilities/pages/root-page/root-page.html @@ -60,51 +60,51 @@
-
pull-left
-
pull-sm-left
-
pull-md-left
-
pull-lg-left
-
pull-xl-left
+
float-left
+
float-sm-left
+
float-md-left
+
float-lg-left
+
float-xl-left
-
pull-right
-
pull-sm-right
-
pull-md-right
-
pull-lg-right
-
pull-xl-right
+
float-right
+
float-sm-right
+
float-md-right
+
float-lg-right
+
float-xl-right
-
pull-start
-
pull-sm-start
-
pull-md-start
-
pull-lg-start
-
pull-xl-start
+
float-start
+
float-sm-start
+
float-md-start
+
float-lg-start
+
float-xl-start
-
pull-end
-
pull-sm-end
-
pull-md-end
-
pull-lg-end
-
pull-xl-end
+
float-end
+
float-sm-end
+
float-md-end
+
float-lg-end
+
float-xl-end
-
pull-start
-
pull-sm-start
-
pull-md-start
-
pull-lg-start
-
pull-xl-start
+
float-start
+
float-sm-start
+
float-md-start
+
float-lg-start
+
float-xl-start
-
pull-end
-
pull-sm-end
-
pull-md-end
-
pull-lg-end
-
pull-xl-end
+
float-end
+
float-sm-end
+
float-md-end
+
float-lg-end
+
float-xl-end
diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss index 84b217cf498..6147b151a32 100644 --- a/src/components/card/card.ios.scss +++ b/src/components/card/card.ios.scss @@ -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); } diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss index 6018f8c8f5c..1258a1eef04 100644 --- a/src/components/card/card.md.scss +++ b/src/components/card/card.md.scss @@ -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); } diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss index 8cf0dbe881e..703a9648a59 100644 --- a/src/components/card/card.wp.scss +++ b/src/components/card/card.wp.scss @@ -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); } diff --git a/src/components/content/content.scss b/src/components/content/content.scss index 93241c51d52..2dba358a7c1 100644 --- a/src/components/content/content.scss +++ b/src/components/content/content.scss @@ -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], diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss index 97c7213ddf9..02ec0931a4a 100755 --- a/src/components/fab/fab.scss +++ b/src/components/fab/fab.scss @@ -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] { diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index 16ed2d8cca6..4d36539f59e 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -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); } } } diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 3c8456e5970..7230a0f2b29 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -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); } } } diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 17a506e5fd7..fe8aaa5f1ca 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -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], diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index df0889732b2..daaf5edd4c2 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -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); } diff --git a/src/components/label/label.scss b/src/components/label/label.scss index 3da376a995f..658e3bcba8d 100644 --- a/src/components/label/label.scss +++ b/src/components/label/label.scss @@ -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, diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index 6c4b26bb851..0f6c1c09cec 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -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); } diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss index 60c9a393194..a7f6bc1cd86 100644 --- a/src/components/list/list.ios.scss +++ b/src/components/list/list.ios.scss @@ -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); } diff --git a/src/components/list/list.md.scss b/src/components/list/list.md.scss index 013a8f3486c..b4737e2e6c3 100644 --- a/src/components/list/list.md.scss +++ b/src/components/list/list.md.scss @@ -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; diff --git a/src/components/list/list.wp.scss b/src/components/list/list.wp.scss index 772ae92ece8..bf3fc2e46aa 100644 --- a/src/components/list/list.wp.scss +++ b/src/components/list/list.wp.scss @@ -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 { diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss index e6448e2af3f..ab44d46f5bd 100644 --- a/src/components/menu/menu.scss +++ b/src/components/menu/menu.scss @@ -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); } diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss index b1bda739e6d..f0b9225a0f5 100644 --- a/src/components/range/range.ios.scss +++ b/src/components/range/range.ios.scss @@ -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 { diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss index b477305671a..94bd0ca0136 100644 --- a/src/components/range/range.md.scss +++ b/src/components/range/range.md.scss @@ -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 { diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss index 0ab71a1b0d4..0bee7d6e6cd 100644 --- a/src/components/range/range.wp.scss +++ b/src/components/range/range.wp.scss @@ -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 { diff --git a/src/components/refresher/refresher.scss b/src/components/refresher/refresher.scss index 154f4f15597..ec8f19933a0 100644 --- a/src/components/refresher/refresher.scss +++ b/src/components/refresher/refresher.scss @@ -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); diff --git a/src/components/select/select.ios.scss b/src/components/select/select.ios.scss index 5b98d71ddd8..7c4505f6269 100644 --- a/src/components/select/select.ios.scss +++ b/src/components/select/select.ios.scss @@ -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; diff --git a/src/components/select/select.md.scss b/src/components/select/select.md.scss index 325327cbad6..d54ba00ab24 100644 --- a/src/components/select/select.md.scss +++ b/src/components/select/select.md.scss @@ -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; diff --git a/src/components/show-hide-when/show-hide-when.scss b/src/components/show-hide-when/show-hide-when.scss index de39f65458a..a4f60f60b2d 100644 --- a/src/components/show-hide-when/show-hide-when.scss +++ b/src/components/show-hide-when/show-hide-when.scss @@ -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; } diff --git a/src/components/slides/slides.scss b/src/components/slides/slides.scss index 825158b7ad9..1424ff5dd57 100644 --- a/src/components/slides/slides.scss +++ b/src/components/slides/slides.scss @@ -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; - width: 100%; - height: 100%; z-index: 1; + display: flex; + + width: 100%; + height: 100%; + 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; - pointer-events: none; opacity: 0; - z-index: -1000; + + pointer-events: none; } -/* 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); + @include appearance(none); - border: none; + border: 0; box-shadow: none; - @include appearance(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); - width: 100%; - height: 100%; display: flex; - justify-content: center; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; } .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%; } diff --git a/src/components/split-pane/split-pane.scss b/src/components/split-pane/split-pane.scss index 7054687d317..897451f8383 100644 --- a/src/components/split-pane/split-pane.scss +++ b/src/components/split-pane/split-pane.scss @@ -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; } diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss index 7003c866f64..4307620a982 100644 --- a/src/components/tabs/tabs.ios.scss +++ b/src/components/tabs/tabs.ios.scss @@ -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; diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss index 59f2e7f3f9f..c5970e7b2ea 100644 --- a/src/components/tabs/tabs.md.scss +++ b/src/components/tabs/tabs.md.scss @@ -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; diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index a2989afffea..32923b0d094 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -62,8 +62,7 @@ } .tab-button-text { - margin-top: 3px; - margin-bottom: 2px; + @include margin(3px, null, 2px, null); } .tab-button-text, diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss index 2d4e05f22bf..e12f6c3923a 100644 --- a/src/components/tabs/tabs.wp.scss +++ b/src/components/tabs/tabs.wp.scss @@ -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 diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index c518be15fa6..1d4d810a454 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -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; diff --git a/src/platform/cordova.scss b/src/platform/cordova.scss index 56980f7f6dc..c459a53542a 100644 --- a/src/platform/cordova.scss +++ b/src/platform/cordova.scss @@ -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}); diff --git a/src/platform/platform.ts b/src/platform/platform.ts index de28541d13d..a67c0f15d66 100644 --- a/src/platform/platform.ts +++ b/src/platform/platform.ts @@ -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 diff --git a/src/themes/ionic.globals.scss b/src/themes/ionic.globals.scss index e2c2644f6d8..c6729e1ac8e 100644 --- a/src/themes/ionic.globals.scss +++ b/src/themes/ionic.globals.scss @@ -11,8 +11,8 @@ @import "./ionic.mixins"; -// Global include-rtl -$include-rtl: true !default; +// Global app direction +$app-direction: null !default; // Global font path diff --git a/src/themes/ionic.mixins.scss b/src/themes/ionic.mixins.scss index 218f1ea99ae..4d942b60202 100644 --- a/src/themes/ionic.mixins.scss +++ b/src/themes/ionic.mixins.scss @@ -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; +@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() { + #{$prop}-left: $end; + #{$prop}-right: $start; + } } +} - @if $start != $end { +// 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() { - @if $start != null { - padding-right: $start; - } @else if $end != null { - padding-right: initial; - } - - @if $end != null { - padding-left: $end; - } @else if $start != null { - padding-left: initial; + #{$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; + } + } } \ No newline at end of file