From 03c5f67b33abf582fd3eec8a4efa39cb87982472 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 7 Feb 2018 18:35:31 -0500 Subject: [PATCH] fix(item-sliding): separate option styles and remove button dependency --- .../item-option/item-option.ios.scss | 42 +++++ .../item-option/item-option.ios.vars.scss | 16 ++ .../item-option/item-option.md.scss | 34 ++++ .../item-option/item-option.md.vars.scss | 16 ++ .../components/item-option/item-option.scss | 93 +++++++++++ .../components/item-option/item-option.tsx | 6 +- .../item-option/item-option.vars.scss | 4 + .../item-options/item-options.ios.scss | 17 ++ .../item-options/item-options.ios.vars.scss | 4 + .../item-options/item-options.md.scss | 17 ++ .../item-options/item-options.md.vars.scss | 4 + .../components/item-options/item-options.scss | 75 +++++++++ .../components/item-options/item-options.tsx | 6 +- .../item-options/item-options.vars.scss | 4 + .../item-sliding/item-sliding.ios.scss | 50 ------ .../item-sliding/item-sliding.ios.vars.scss | 12 -- .../item-sliding/item-sliding.md.scss | 40 ----- .../item-sliding/item-sliding.md.vars.scss | 12 -- .../components/item-sliding/item-sliding.scss | 147 ------------------ 19 files changed, 336 insertions(+), 263 deletions(-) create mode 100644 packages/core/src/components/item-option/item-option.ios.scss create mode 100644 packages/core/src/components/item-option/item-option.ios.vars.scss create mode 100644 packages/core/src/components/item-option/item-option.md.scss create mode 100644 packages/core/src/components/item-option/item-option.md.vars.scss create mode 100644 packages/core/src/components/item-option/item-option.scss create mode 100644 packages/core/src/components/item-option/item-option.vars.scss create mode 100644 packages/core/src/components/item-options/item-options.ios.scss create mode 100644 packages/core/src/components/item-options/item-options.ios.vars.scss create mode 100644 packages/core/src/components/item-options/item-options.md.scss create mode 100644 packages/core/src/components/item-options/item-options.md.vars.scss create mode 100644 packages/core/src/components/item-options/item-options.scss create mode 100644 packages/core/src/components/item-options/item-options.vars.scss diff --git a/packages/core/src/components/item-option/item-option.ios.scss b/packages/core/src/components/item-option/item-option.ios.scss new file mode 100644 index 0000000000..7c26d094da --- /dev/null +++ b/packages/core/src/components/item-option/item-option.ios.scss @@ -0,0 +1,42 @@ +@import "./item-option"; +@import "./item-option.ios.vars"; + +// iOS Item Option +// -------------------------------------------------- + +.item-option-ios { + font-size: $item-option-button-ios-font-size; + color: $item-option-button-ios-text-color; + background-color: $item-option-button-ios-background-color; +} + +.item-option-ios .icon { + fill: $item-option-button-ios-icon-color; +} + +.list-ios .item-options-right ion-item-option:last-child { + @include safe-area-padding-horizontal(null, .7em); +} + +.list-ios .item-options-left ion-item-option:first-child { + @include safe-area-padding-horizontal(.7em, null); +} + + +// Generate iOS Option Button Colors +// -------------------------------------------------- + +@each $color-name, $color-value in $colors-ios { + $color-base: ion-color($colors-ios, $color-name, base, ios); + $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); + $color-shade: ion-color($colors-ios, $color-name, tint, ios); + + .item-option-ios-#{$color-name} { + color: $color-contrast; + background-color: $color-base; + } + + .item-option-ios-#{$color-name} .icon { + fill: $color-contrast; + } +} diff --git a/packages/core/src/components/item-option/item-option.ios.vars.scss b/packages/core/src/components/item-option/item-option.ios.vars.scss new file mode 100644 index 0000000000..84c4342b48 --- /dev/null +++ b/packages/core/src/components/item-option/item-option.ios.vars.scss @@ -0,0 +1,16 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Item Option +// -------------------------------------------------- + +/// @prop - Font size of the item option button +$item-option-button-ios-font-size: 16px !default; + +/// @prop - Background color of the item option button +$item-option-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default; + +/// @prop - Text color of the item option button +$item-option-button-ios-text-color: ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default; + +/// @prop - color of the item option button icon +$item-option-button-ios-icon-color: ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default; diff --git a/packages/core/src/components/item-option/item-option.md.scss b/packages/core/src/components/item-option/item-option.md.scss new file mode 100644 index 0000000000..344004e1ac --- /dev/null +++ b/packages/core/src/components/item-option/item-option.md.scss @@ -0,0 +1,34 @@ +@import "./item-option"; +@import "./item-option.md.vars"; + +// Material Design Item Option +// -------------------------------------------------- + +.item-option-md { + font-size: $item-option-button-md-font-size; + color: $item-option-button-md-text-color; + background-color: $item-option-button-md-background-color; +} + +.item-option-md .icon { + fill: $item-option-button-md-icon-color; +} + + +// Generate Material Design Option Button Colors +// -------------------------------------------------- + +@each $color-name, $color-value in $colors-md { + $color-base: ion-color($colors-md, $color-name, base, md); + $color-contrast: ion-color($colors-md, $color-name, contrast, md); + $color-shade: ion-color($colors-md, $color-name, tint, md); + + .item-option-md-#{$color-name} { + color: $color-contrast; + background-color: $color-base; + } + + .item-option-md-#{$color-name} .icon { + fill: $color-contrast; + } +} diff --git a/packages/core/src/components/item-option/item-option.md.vars.scss b/packages/core/src/components/item-option/item-option.md.vars.scss new file mode 100644 index 0000000000..ac4f541e80 --- /dev/null +++ b/packages/core/src/components/item-option/item-option.md.vars.scss @@ -0,0 +1,16 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Item Option +// -------------------------------------------------- + +/// @prop - Font size of the sliding option button +$item-option-button-md-font-size: 14px !default; + +/// @prop - Background color of the sliding option button +$item-option-button-md-background-color: ion-color($colors-md, primary, base, md) !default; + +/// @prop - Text color of the sliding option button +$item-option-button-md-text-color: ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default; + +/// @prop - color of the sliding option button icon +$item-option-button-md-icon-color: ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default; diff --git a/packages/core/src/components/item-option/item-option.scss b/packages/core/src/components/item-option/item-option.scss new file mode 100644 index 0000000000..a2f6ab180a --- /dev/null +++ b/packages/core/src/components/item-option/item-option.scss @@ -0,0 +1,93 @@ +@import "./item-option.vars"; + +// Item Option +// -------------------------------------------------- + +ion-item-option { + @include padding(0, .7em); + + position: relative; + display: flex; + + align-items: center; + + min-width: 60px; +} + +.item-option-button { + @include position(0, 0, 0, 0); + @include margin(0); + @include padding(0); + @include border-radius(0); + + position: absolute; + + border: 0; + background: none; +} + +ion-item-options:not([icon-start]) ion-item-option:not([icon-only]) { + .item-option-button-inner { + flex-direction: column; + } +} + +.item-option-button-inner { + display: flex; + + flex-flow: row nowrap; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; +} + + +// Item Expandable Animation +// -------------------------------------------------- + +ion-item-option[expandable] { + flex-shrink: 0; + + transition-duration: 0; + transition-property: none; + transition-timing-function: cubic-bezier(.65, .05, .36, 1); +} + +ion-item-sliding.active-swipe-right ion-item-option[expandable] { + transition-duration: .6s; + transition-property: padding-left; + + @include multi-dir() { + // scss-lint:disable PropertySpelling + padding-left: 90%; + } + + @include ltr() { + order: 1; + } + + @include rtl() { + order: -1; + } +} + +ion-item-sliding.active-swipe-left ion-item-option[expandable] { + transition-duration: .6s; + transition-property: padding-right; + + @include multi-dir() { + // scss-lint:disable PropertySpelling + padding-right: 90%; + } + + @include ltr() { + order: -1; + } + + @include rtl() { + order: 1; + } +} diff --git a/packages/core/src/components/item-option/item-option.tsx b/packages/core/src/components/item-option/item-option.tsx index c6d58118bf..ac219a2c66 100644 --- a/packages/core/src/components/item-option/item-option.tsx +++ b/packages/core/src/components/item-option/item-option.tsx @@ -5,6 +5,10 @@ import { Component, Prop } from '@stencil/core'; tag: 'ion-item-option', host: { theme: 'item-option' + }, + styleUrls: { + ios: 'item-option.ios.scss', + md: 'item-option.md.scss' } }) export class ItemOption { @@ -55,7 +59,7 @@ export class ItemOption { disabled={this.disabled} href={this.href} onClick={this.clickedOptionButton.bind(this)}>, - + ]; diff --git a/packages/core/src/components/item-option/item-option.vars.scss b/packages/core/src/components/item-option/item-option.vars.scss new file mode 100644 index 0000000000..bf9f10b867 --- /dev/null +++ b/packages/core/src/components/item-option/item-option.vars.scss @@ -0,0 +1,4 @@ +@import "../../themes/ionic.globals"; + +// Item Option +// -------------------------------------------------- diff --git a/packages/core/src/components/item-options/item-options.ios.scss b/packages/core/src/components/item-options/item-options.ios.scss new file mode 100644 index 0000000000..7b550c50f4 --- /dev/null +++ b/packages/core/src/components/item-options/item-options.ios.scss @@ -0,0 +1,17 @@ +@import "./item-options"; +@import "./item-options.ios.vars"; + +// iOS Item Options +// -------------------------------------------------- + +.list-ios ion-item-options { + border-bottom: $hairlines-width solid $item-ios-border-color; +} + + +// iOS No Lines List +// -------------------------------------------------- + +.list-ios[no-lines] ion-item-options { + border-width: 0; +} diff --git a/packages/core/src/components/item-options/item-options.ios.vars.scss b/packages/core/src/components/item-options/item-options.ios.vars.scss new file mode 100644 index 0000000000..17c2826a89 --- /dev/null +++ b/packages/core/src/components/item-options/item-options.ios.vars.scss @@ -0,0 +1,4 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Item Options +// -------------------------------------------------- diff --git a/packages/core/src/components/item-options/item-options.md.scss b/packages/core/src/components/item-options/item-options.md.scss new file mode 100644 index 0000000000..907f85a4de --- /dev/null +++ b/packages/core/src/components/item-options/item-options.md.scss @@ -0,0 +1,17 @@ +@import "./item-options"; +@import "./item-options.md.vars"; + +// Material Design Item Options +// -------------------------------------------------- + +.list-md ion-item-options { + border-bottom: 1px solid $item-md-border-color; +} + + +// Material Design No Lines List +// -------------------------------------------------- + +.list-md[no-lines] ion-item-options { + border-width: 0; +} diff --git a/packages/core/src/components/item-options/item-options.md.vars.scss b/packages/core/src/components/item-options/item-options.md.vars.scss new file mode 100644 index 0000000000..2c5477c08f --- /dev/null +++ b/packages/core/src/components/item-options/item-options.md.vars.scss @@ -0,0 +1,4 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Item Options +// -------------------------------------------------- diff --git a/packages/core/src/components/item-options/item-options.scss b/packages/core/src/components/item-options/item-options.scss new file mode 100644 index 0000000000..b01fe0fbc4 --- /dev/null +++ b/packages/core/src/components/item-options/item-options.scss @@ -0,0 +1,75 @@ +@import "./item-options.vars"; + +// Item Options +// -------------------------------------------------- + +ion-item-options { + position: absolute; + z-index: $z-index-item-options; + display: none; + + height: 100%; + + font-size: 14px; + visibility: hidden; + + @include multi-dir() { + // scss-lint:disable PropertySpelling + top: 0; + + right: 0; + } + + @include ltr() { + justify-content: flex-end; + } + + @include rtl() { + justify-content: flex-start; + + &:not([side=right]) { + // scss-lint:disable PropertySpelling + right: auto; + left: 0; + + justify-content: flex-end; + } + } +} + +ion-item-options[side=left] { + @include multi-dir() { + // scss-lint:disable PropertySpelling + right: auto; + left: 0; + } + + @include ltr() { + justify-content: flex-start; + } + + @include rtl() { + justify-content: flex-end; + } +} + +ion-item-sliding.active-slide { + @include rtl() { + &.active-options-left ion-item-options:not([side=right]) { + width: 100%; + + visibility: visible; + } + } + + ion-item-options { + display: flex; + } + + &.active-options-left ion-item-options[side=left], + &.active-options-right ion-item-options:not([side=left]) { + width: 100%; + + visibility: visible; + } +} diff --git a/packages/core/src/components/item-options/item-options.tsx b/packages/core/src/components/item-options/item-options.tsx index c97fbce08b..9a26be7ff1 100644 --- a/packages/core/src/components/item-options/item-options.tsx +++ b/packages/core/src/components/item-options/item-options.tsx @@ -3,7 +3,11 @@ import { Side, isRightSide } from '../../utils/helpers'; @Component({ - tag: 'ion-item-options' + tag: 'ion-item-options', + styleUrls: { + ios: 'item-options.ios.scss', + md: 'item-options.md.scss' + } }) export class ItemOptions { @Element() private el: HTMLElement; diff --git a/packages/core/src/components/item-options/item-options.vars.scss b/packages/core/src/components/item-options/item-options.vars.scss new file mode 100644 index 0000000000..b004661675 --- /dev/null +++ b/packages/core/src/components/item-options/item-options.vars.scss @@ -0,0 +1,4 @@ +@import "../../themes/ionic.globals"; + +// Item Options +// -------------------------------------------------- diff --git a/packages/core/src/components/item-sliding/item-sliding.ios.scss b/packages/core/src/components/item-sliding/item-sliding.ios.scss index bbc2e5f098..f2ad888239 100644 --- a/packages/core/src/components/item-sliding/item-sliding.ios.scss +++ b/packages/core/src/components/item-sliding/item-sliding.ios.scss @@ -7,53 +7,3 @@ .list-ios ion-item-sliding { background-color: $item-ios-sliding-content-background; } - -.list-ios ion-item-options { - border-bottom: $hairlines-width solid $item-ios-border-color; -} - -.list-ios .item-options-right ion-item-option:last-child { - @include safe-area-padding-horizontal(null, .7em); -} - -.list-ios .item-options-left ion-item-option:first-child { - @include safe-area-padding-horizontal(.7em, null); -} - - -.item-option-ios { - font-size: $item-ios-sliding-button-font-size; - color: $item-ios-sliding-button-text-color; - background-color: $item-ios-sliding-button-background-color; -} - -.item-option-ios .icon { - fill: $item-ios-sliding-button-icon-color; -} - - -// iOS No Lines List -// -------------------------------------------------- - -.list-ios[no-lines] ion-item-options { - border-width: 0; -} - - -// Generate iOS Option Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-ios { - $color-base: ion-color($colors-ios, $color-name, base, ios); - $color-contrast: ion-color($colors-ios, $color-name, contrast, ios); - $color-shade: ion-color($colors-ios, $color-name, tint, ios); - - .item-option-ios-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .item-option-ios-#{$color-name} .icon { - fill: $color-contrast; - } -} diff --git a/packages/core/src/components/item-sliding/item-sliding.ios.vars.scss b/packages/core/src/components/item-sliding/item-sliding.ios.vars.scss index 0cf3186786..d76362c3b7 100644 --- a/packages/core/src/components/item-sliding/item-sliding.ios.vars.scss +++ b/packages/core/src/components/item-sliding/item-sliding.ios.vars.scss @@ -5,15 +5,3 @@ /// @prop - Background for the sliding content $item-ios-sliding-content-background: $item-ios-background-color !default; - -/// @prop - Font size of the sliding option button -$item-ios-sliding-button-font-size: 16px !default; - -/// @prop - Background color of the sliding option button -$item-ios-sliding-button-background-color: ion-color($colors-ios, primary, base, ios) !default; - -/// @prop - Text color of the sliding option button -$item-ios-sliding-button-text-color: ion-color($colors-ios, $item-ios-sliding-button-background-color, contrast, ios) !default; - -/// @prop - color of the sliding option button icon -$item-ios-sliding-button-icon-color: ion-color($colors-ios, $item-ios-sliding-button-background-color, contrast, ios) !default; diff --git a/packages/core/src/components/item-sliding/item-sliding.md.scss b/packages/core/src/components/item-sliding/item-sliding.md.scss index 247d9d1fc9..1b284c17db 100644 --- a/packages/core/src/components/item-sliding/item-sliding.md.scss +++ b/packages/core/src/components/item-sliding/item-sliding.md.scss @@ -7,43 +7,3 @@ .list-md ion-item-sliding { background-color: $item-md-sliding-content-background; } - -.list-md ion-item-options { - border-bottom: 1px solid $item-md-border-color; -} - -.item-option-md { - font-size: $item-md-sliding-button-font-size; - color: $item-md-sliding-button-text-color; - background-color: $item-md-sliding-button-background-color; -} - -.item-option-md .icon { - fill: $item-md-sliding-button-icon-color; -} - -// Material Design No Lines List -// -------------------------------------------------- - -.list-md[no-lines] ion-item-options { - border-width: 0; -} - - -// Generate Material Design Option Button Colors -// -------------------------------------------------- - -@each $color-name, $color-value in $colors-md { - $color-base: ion-color($colors-md, $color-name, base, md); - $color-contrast: ion-color($colors-md, $color-name, contrast, md); - $color-shade: ion-color($colors-md, $color-name, tint, md); - - .item-option-md-#{$color-name} { - color: $color-contrast; - background-color: $color-base; - } - - .item-option-md-#{$color-name} .icon { - fill: $color-contrast; - } -} diff --git a/packages/core/src/components/item-sliding/item-sliding.md.vars.scss b/packages/core/src/components/item-sliding/item-sliding.md.vars.scss index cdf72f8438..11c21a04aa 100644 --- a/packages/core/src/components/item-sliding/item-sliding.md.vars.scss +++ b/packages/core/src/components/item-sliding/item-sliding.md.vars.scss @@ -5,15 +5,3 @@ /// @prop - Background for the sliding content $item-md-sliding-content-background: $item-md-background-color !default; - -/// @prop - Font size of the sliding option button -$item-md-sliding-button-font-size: 14px !default; - -/// @prop - Background color of the sliding option button -$item-md-sliding-button-background-color: ion-color($colors-md, primary, base, md) !default; - -/// @prop - Text color of the sliding option button -$item-md-sliding-button-text-color: ion-color($colors-md, $item-md-sliding-button-background-color, contrast, md) !default; - -/// @prop - color of the sliding option button icon -$item-md-sliding-button-icon-color: ion-color($colors-md, $item-md-sliding-button-background-color, contrast, md) !default; diff --git a/packages/core/src/components/item-sliding/item-sliding.scss b/packages/core/src/components/item-sliding/item-sliding.scss index c11d4efdb5..de412c2a33 100644 --- a/packages/core/src/components/item-sliding/item-sliding.scss +++ b/packages/core/src/components/item-sliding/item-sliding.scss @@ -2,7 +2,6 @@ // Item Sliding // -------------------------------------------------- -// The hidden right-side buttons that can be exposed under a list item with dragging. ion-item-sliding { position: relative; @@ -12,95 +11,7 @@ ion-item-sliding { width: 100%; } -ion-item-options { - position: absolute; - z-index: $z-index-item-options; - display: none; - - height: 100%; - - font-size: 14px; - visibility: hidden; - - @include multi-dir() { - // scss-lint:disable PropertySpelling - top: 0; - - right: 0; - } - - @include ltr() { - justify-content: flex-end; - } - - @include rtl() { - justify-content: flex-start; - - &:not([side=right]) { - // scss-lint:disable PropertySpelling - right: auto; - left: 0; - - justify-content: flex-end; - } - } -} - -ion-item-options[side=left] { - @include multi-dir() { - // scss-lint:disable PropertySpelling - right: auto; - left: 0; - } - - @include ltr() { - justify-content: flex-start; - } - - @include rtl() { - justify-content: flex-end; - } -} - - -ion-item-option { - @include padding(0, .7em); - - position: relative; - display: flex; - - align-items: center; - - min-width: 60px; -} - -.item-option-button { - @include position(0, 0, 0, 0); - @include margin(0); - @include padding(0); - @include border-radius(0); - - position: absolute; - - border: 0; - background: none; -} - -ion-item-options:not([icon-start]) ion-item-option:not([icon-only]) { - .button-inner { - flex-direction: column; - } -} - ion-item-sliding.active-slide { - @include rtl() { - &.active-options-left ion-item-options:not([side=right]) { - width: 100%; - - visibility: visible; - } - } - ion-item, ion-item.activated { position: relative; @@ -113,62 +24,4 @@ ion-item-sliding.active-slide { will-change: transform; } - - ion-item-options { - display: flex; - } - - &.active-options-left ion-item-options[side=left], - &.active-options-right ion-item-options:not([side=left]) { - width: 100%; - - visibility: visible; - } -} - -// Item Expandable Animation -// -------------------------------------------------- - -ion-item-option[expandable] { - flex-shrink: 0; - - transition-duration: 0; - transition-property: none; - transition-timing-function: cubic-bezier(.65, .05, .36, 1); -} - -ion-item-sliding.active-swipe-right ion-item-option[expandable] { - transition-duration: .6s; - transition-property: padding-left; - - @include multi-dir() { - // scss-lint:disable PropertySpelling - padding-left: 90%; - } - - @include ltr() { - order: 1; - } - - @include rtl() { - order: -1; - } -} - -ion-item-sliding.active-swipe-left ion-item-option[expandable] { - transition-duration: .6s; - transition-property: padding-right; - - @include multi-dir() { - // scss-lint:disable PropertySpelling - padding-right: 90%; - } - - @include ltr() { - order: -1; - } - - @include rtl() { - order: 1; - } }