diff --git a/core/api.txt b/core/api.txt index 40ace86872..24d0d6de69 100644 --- a/core/api.txt +++ b/core/api.txt @@ -950,12 +950,10 @@ ion-select,event,ionBlur,void,true ion-select,event,ionCancel,void,true ion-select,event,ionChange,SelectInputChangeEvent,true ion-select,event,ionFocus,void,true -ion-select,css-prop,--icon-color ion-select,css-prop,--padding-bottom ion-select,css-prop,--padding-end ion-select,css-prop,--padding-start ion-select,css-prop,--padding-top -ion-select,css-prop,--placeholder-color ion-skeleton-text ion-skeleton-text,prop,width,string,'100%',false diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index 13d779b27c..6406bb7f66 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -94,25 +94,3 @@ // } // } -// iOS Toolbar Button Placement -// -------------------------------------------------- - -:host([slot="start"]) { - order: map-get($toolbar-order-ios, buttons-start); -} - -:host([slot="secondary"]) { - order: map-get($toolbar-order-ios, buttons-secondary); -} - -:host([slot="primary"]) { - order: map-get($toolbar-order-ios, buttons-primary); - - text-align: end; -} - -:host([slot="end"]) { - order: map-get($toolbar-order-ios, buttons-end); - - text-align: end; -} diff --git a/core/src/components/buttons/buttons.ios.vars.scss b/core/src/components/buttons/buttons.ios.vars.scss index 7d46cb7ba8..e9784ca32b 100644 --- a/core/src/components/buttons/buttons.ios.vars.scss +++ b/core/src/components/buttons/buttons.ios.vars.scss @@ -1,40 +1,5 @@ @import "../../themes/ionic.globals.ios"; +@import "../toolbar/toolbar.ios.vars"; -// iOS Toolbar +// iOS Buttons // -------------------------------------------------- - -/// @prop - Order of the toolbar elements -$toolbar-order-ios: ( - back-button: 0, - menu-toggle-start: 1, - buttons-start: 2, - buttons-secondary: 3, - content: 4, - buttons-primary: 5, - buttons-end: 6, - menu-toggle-end: 7, -); - -/// @prop - Font size of the toolbar button -$toolbar-ios-button-font-size: 17px !default; - -/// @prop - Text color of the toolbar button -$toolbar-ios-button-color: ion-color(primary, base) !default; - -/// @prop - Background color of the toolbar button -$toolbar-ios-button-background-color: $toolbar-ios-background !default; - -/// @prop - Background color of the toolbar button when activated -$toolbar-ios-button-background-color-activated: $toolbar-ios-color-activated !default; - -/// @prop - Border radius of the toolbar button -$toolbar-ios-button-border-radius: 4px !default; - -/// @prop - Font weight of the strong toolbar button -$toolbar-ios-button-strong-font-weight: 600 !default; - -/// @prop - Fill color of the toolbar button icon -$toolbar-ios-button-icon-fill-color: currentColor !default; - -/// @prop - Filter of the translucent toolbar -$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index 42196c951c..f849c91959 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -87,27 +87,3 @@ font-size: 1.8em; } - - -// Material Design Toolbar Button Placement -// -------------------------------------------------- - -:host([slot="start"]) { - order: map-get($toolbar-order-md, buttons-start); -} - -:host([slot="secondary"]) { - order: map-get($toolbar-order-md, buttons-secondary); -} - -:host([slot="primary"]) { - order: map-get($toolbar-order-md, buttons-primary); - - text-align: end; -} - -:host([slot="end"]) { - order: map-get($toolbar-order-md, buttons-end); - - text-align: end; -} diff --git a/core/src/components/buttons/buttons.md.vars.scss b/core/src/components/buttons/buttons.md.vars.scss index 88d56d9722..55cba8ec54 100644 --- a/core/src/components/buttons/buttons.md.vars.scss +++ b/core/src/components/buttons/buttons.md.vars.scss @@ -1,37 +1,5 @@ @import "../../themes/ionic.globals.md"; +@import "../toolbar/toolbar.md.vars"; -// Material Design Toolbar +// Material Design Buttons // -------------------------------------------------- - -/// @prop - Order of the toolbar elements -$toolbar-order-md: ( - back-button: 0, - menu-toggle-start: 1, - buttons-start: 2, - content: 3, - buttons-secondary: 4, - buttons-primary: 5, - buttons-end: 6, - menu-toggle-end: 7, -); - -/// @prop - Font size of the toolbar button -$toolbar-md-button-font-size: 14px !default; - -/// @prop - Text color of the toolbar button -$toolbar-md-button-color: $toolbar-md-color !default; - -/// @prop - Background color of the toolbar button -$toolbar-md-button-background-color: $toolbar-md-background !default; - -/// @prop - Background color of the toolbar button when activated -$toolbar-md-button-background-color-activated: $toolbar-md-color-activated !default; - -/// @prop - Border radius of the toolbar button -$toolbar-md-button-border-radius: 2px !default; - -/// @prop - Fill color of the toolbar button icon -$toolbar-md-button-icon-fill-color: currentColor !default; - -/// @prop - Font weight of the strong toolbar button -$toolbar-md-button-strong-font-weight: bold !default; diff --git a/core/src/components/segment/test/bug/index.html b/core/src/components/segment/test/bug/index.html deleted file mode 100644 index aed8379cfb..0000000000 --- a/core/src/components/segment/test/bug/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - All - - - - - Favorites - - - diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 21fc5ce7dc..1c40a863de 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -366,14 +366,12 @@ Type: `Promise Select - Custom Interface Options - + Alert Bacon @@ -83,7 +83,7 @@ - + Action Sheet Red diff --git a/core/src/components/select/test/standalone/index.html b/core/src/components/select/test/standalone/index.html index 3b80b9182d..6f3cd36844 100644 --- a/core/src/components/select/test/standalone/index.html +++ b/core/src/components/select/test/standalone/index.html @@ -73,9 +73,7 @@ diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss index 3892f52021..a184f588cd 100644 --- a/core/src/components/toolbar/toolbar.ios.scss +++ b/core/src/components/toolbar/toolbar.ios.scss @@ -24,3 +24,26 @@ min-width: 0; } + +// iOS Toolbar Slot Placement +// -------------------------------------------------- + +::slotted([slot="start"]) { + order: map-get($toolbar-order-ios, slot-start); +} + +::slotted([slot="secondary"]) { + order: map-get($toolbar-order-ios, slot-secondary); +} + +::slotted([slot="primary"]) { + order: map-get($toolbar-order-ios, slot-primary); + + text-align: end; +} + +::slotted([slot="end"]) { + order: map-get($toolbar-order-ios, slot-end); + + text-align: end; +} diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss index f4f9ddd64d..d6ef5bfa25 100644 --- a/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/core/src/components/toolbar/toolbar.ios.vars.scss @@ -7,11 +7,11 @@ $toolbar-order-ios: ( back-button: 0, menu-toggle-start: 1, - buttons-start: 2, - buttons-secondary: 3, + slot-start: 2, + slot-secondary: 3, content: 4, - buttons-primary: 5, - buttons-end: 6, + slot-primary: 5, + slot-end: 6, menu-toggle-end: 7, ); @@ -27,12 +27,18 @@ $toolbar-ios-button-background-color: $toolbar-ios-background !def /// @prop - Background color of the toolbar button when activated $toolbar-ios-button-background-color-activated: $toolbar-ios-color-activated !default; +/// @prop - Border radius of the toolbar button +$toolbar-ios-button-border-radius: 4px !default; + /// @prop - Font weight of the strong toolbar button $toolbar-ios-button-strong-font-weight: 600 !default; /// @prop - Fill color of the toolbar button icon $toolbar-ios-button-icon-fill-color: currentColor !default; +/// @prop - Filter of the translucent toolbar +$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default; + // iOS Title // -------------------------------------------------- diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss index 53b86a8314..441b46f64e 100644 --- a/core/src/components/toolbar/toolbar.md.scss +++ b/core/src/components/toolbar/toolbar.md.scss @@ -35,4 +35,27 @@ --padding-bottom: 0; --padding-start: 0; --padding-end: 0; -} \ No newline at end of file +} + +// Material Design Toolbar Slot Placement +// -------------------------------------------------- + +::slotted([slot="start"]) { + order: map-get($toolbar-order-md, slot-start); +} + +::slotted([slot="secondary"]) { + order: map-get($toolbar-order-md, slot-secondary); +} + +::slotted([slot="primary"]) { + order: map-get($toolbar-order-md, slot-primary); + + text-align: end; +} + +::slotted([slot="end"]) { + order: map-get($toolbar-order-md, slot-end); + + text-align: end; +} diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss index be725ef3b4..5e8ce94ddf 100644 --- a/core/src/components/toolbar/toolbar.md.vars.scss +++ b/core/src/components/toolbar/toolbar.md.vars.scss @@ -7,11 +7,11 @@ $toolbar-order-md: ( back-button: 0, menu-toggle-start: 1, - buttons-start: 2, + slot-start: 2, content: 3, - buttons-secondary: 4, - buttons-primary: 5, - buttons-end: 6, + slot-secondary: 4, + slot-primary: 5, + slot-end: 6, menu-toggle-end: 7, ); @@ -27,6 +27,9 @@ $toolbar-md-button-background-color: $toolbar-md-background !defaul /// @prop - Background color of the toolbar button when activated $toolbar-md-button-background-color-activated: $toolbar-md-color-activated !default; +/// @prop - Border radius of the toolbar button +$toolbar-md-button-border-radius: 2px !default; + /// @prop - Fill color of the toolbar button icon $toolbar-md-button-icon-fill-color: currentColor !default; diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index 19e57068e8..30a6a57a16 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -104,4 +104,4 @@ :host(.toolbar-segment) { --min-height: auto; -} \ No newline at end of file +} diff --git a/core/src/themes/test/css-variables/css/oceanic.css b/core/src/themes/test/css-variables/css/oceanic.css index fdf66a66ba..d88fc8ed14 100644 --- a/core/src/themes/test/css-variables/css/oceanic.css +++ b/core/src/themes/test/css-variables/css/oceanic.css @@ -10,6 +10,7 @@ **/ :root { + /* Ionic Colors */ --ion-color-primary: #549ee7; --ion-color-primary-contrast: #fff; --ion-color-primary-contrast-rgb: 255,255,255; @@ -73,58 +74,13 @@ --ion-color-dark-shade: #070b0d; --ion-color-dark-tint: #343d46; + /* Component Colors */ --ion-backdrop-color: #1b2b34; --ion-overlay-background-color: #142129; - --ion-background-color: #1b2b34; - --ion-background-color-rgb: 27,43,52; - --ion-background-color-step-50: #26363e; - --ion-background-color-step-100: #324048; - --ion-background-color-step-150: #3d4b52; - --ion-background-color-step-200: #49555d; - --ion-background-color-step-250: #546067; - --ion-background-color-step-300: #5f6b71; - --ion-background-color-step-350: #6b757b; - --ion-background-color-step-400: #768085; - --ion-background-color-step-450: #828a8f; - --ion-background-color-step-500: #8d959a; - --ion-background-color-step-550: #98a0a4; - --ion-background-color-step-600: #a4aaae; - --ion-background-color-step-650: #afb5b8; - --ion-background-color-step-700: #bbbfc2; - --ion-background-color-step-750: #c6cacc; - --ion-background-color-step-800: #d1d5d6; - --ion-background-color-step-850: #dddfe1; - --ion-background-color-step-900: #e8eaeb; - --ion-background-color-step-950: #f4f4f5; - --ion-background-color-step-1000: #fff; - --ion-border-color: #1b2b34; --ion-box-shadow-color: #000; - --ion-text-color: #fff; - --ion-text-color-rgb: 255,255,255; - --ion-text-color-step-50: #f4f4f5; - --ion-text-color-step-100: #e8eaeb; - --ion-text-color-step-150: #dddfe1; - --ion-text-color-step-200: #d1d5d6; - --ion-text-color-step-250: #c6cacc; - --ion-text-color-step-300: #bbbfc2; - --ion-text-color-step-350: #afb5b8; - --ion-text-color-step-400: #a4aaae; - --ion-text-color-step-450: #98a0a4; - --ion-text-color-step-500: #8d959a; - --ion-text-color-step-550: #828a8f; - --ion-text-color-step-600: #768085; - --ion-text-color-step-650: #6b757b; - --ion-text-color-step-700: #5f6b71; - --ion-text-color-step-750: #546067; - --ion-text-color-step-800: #49555d; - --ion-text-color-step-850: #3d4b52; - --ion-text-color-step-900: #324048; - --ion-text-color-step-950: #26363e; - --ion-text-color-step-1000: #1b2b34; - --ion-tab-bar-background: #343d46; --ion-tab-bar-background-focused: #293039; --ion-tab-bar-color: #a7adba; @@ -136,4 +92,32 @@ --ion-item-background: #343d46; --ion-item-background-activated: #232b34; + + /* Background, Text, Step Colors */ + --ion-background-color: #1b2b34; + --ion-background-color-rgb: 27,43,52; + + --ion-text-color: #fff; + --ion-text-color-rgb: 255,255,255; + + --ion-color-step-50: #26363e; + --ion-color-step-100: #324048; + --ion-color-step-150: #3d4b52; + --ion-color-step-200: #49555d; + --ion-color-step-250: #546067; + --ion-color-step-300: #5f6b71; + --ion-color-step-350: #6b757b; + --ion-color-step-400: #768085; + --ion-color-step-450: #828a8f; + --ion-color-step-500: #8d959a; + --ion-color-step-550: #98a0a4; + --ion-color-step-600: #a4aaae; + --ion-color-step-650: #afb5b8; + --ion-color-step-700: #bbbfc2; + --ion-color-step-750: #c6cacc; + --ion-color-step-800: #d1d5d6; + --ion-color-step-850: #dddfe1; + --ion-color-step-900: #e8eaeb; + --ion-color-step-950: #f4f4f5; + --ion-color-step-1000: #fff; } diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html index d55c00c03f..297f0b88f2 100644 --- a/core/src/themes/test/css-variables/index.html +++ b/core/src/themes/test/css-variables/index.html @@ -23,13 +23,15 @@ .right-container { display: flex; - position: absolute; - top: 0; - right: 16px; height: 100%; align-items: center; } + .right-container ion-select { + padding-top: 0; + padding-bottom: 0; + } + ion-fab-button { display: inline-block; } @@ -68,7 +70,7 @@ Lists -
+
Select a Theme: Default @@ -129,13 +131,34 @@
- Pokémon Yellow - Super Metroid - Mega Man X - The Legend of Zelda - Pac-Man - Super Mario World - Street Fighter II + + Pokémon Yellow + Note + + + Super Metroid + Note + + + Mega Man X + Note + + + The Legend of Zelda + Note + + + Pac-Man + Note + + + Super Mario World + Note + + + Street Fighter II + Note + Sliding Items Half Life @@ -299,7 +322,7 @@ Colors -
+
Select a Theme: Default @@ -655,7 +678,7 @@ Other -
+
Select a Theme: Default