javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toolbar): style all slotted content in order not only buttons (#16617)

Browse Source 
- style all slotted content to order properly in a toolbar, not only buttons
- removes duplicated sass variables
- use current color in select so icon will inherit toolbar color

BREAKING CHANGES

- Removes `--icon-color` and `--placeholder-color` from select in favor of inheritance with opacity
This commit is contained in:
Brandy Carney
2018-12-07 17:55:59 -05:00
committed by GitHub
parent 0c61e79268
commit 86fc9a557e
19 changed files with 151 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -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

22
core/src/components/buttons/buttons.ios.scss
View File

@ -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;
}

39
core/src/components/buttons/buttons.ios.vars.scss
View File

@ -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;

24
core/src/components/buttons/buttons.md.scss
View File

@ -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;
}

36
core/src/components/buttons/buttons.md.vars.scss
View File

@ -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;

16
core/src/components/segment/test/bug/index.html
View File

@ -1,16 +0,0 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script>
<ion-segment>
<ion-segment-button value="all" checked>
<ion-label>
All
</ion-label>
</ion-segment-button>
<ion-segment-button value="favorites">
<ion-label>
Favorites
</ion-label>
</ion-segment-button>
</ion-segment>

4
core/src/components/select/readme.md
View File

@ -367,13 +367,11 @@ Type: `Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverE
## CSS Custom Properties
| Name | Description |
| --------------------- | ------------------------------------ |
| `--icon-color` | Color of the select icon |
| ------------------ | ---------------------------- |
| `--padding-bottom` | Bottom padding of the select |
| `--padding-end` | End padding of the select |
| `--padding-start` | Start padding of the select |
| `--padding-top` | Top padding of the select |
| `--placeholder-color` | Color of the select placeholder text |
----------------------------------------------

2
core/src/components/select/select.ios.scss
View File

@ -5,12 +5,10 @@
// --------------------------------------------------
:host {
--icon-color: #{$select-ios-icon-color};
--padding-top: #{$select-ios-padding-top};
--padding-end: #{$select-ios-padding-end};
--padding-bottom: #{$select-ios-padding-bottom};
--padding-start: #{$select-ios-padding-start};
--placeholder-color: #{$select-ios-placeholder-color};
}
.select-icon {

2
core/src/components/select/select.md.scss
View File

@ -5,12 +5,10 @@
// --------------------------------------------------
:host {
--icon-color: #{$select-md-icon-color};
--padding-top: #{$select-md-padding-top};
--padding-end: #{$select-md-padding-end};
--padding-bottom: #{$select-md-padding-bottom};
--padding-start: #{$select-md-padding-start};
--placeholder-color: #{$select-md-placeholder-color};
}
.select-icon {

12
core/src/components/select/select.scss
View File

@ -5,14 +5,11 @@
:host {
/**
* @prop --icon-color: Color of the select icon
* @prop --padding-top: Top padding of the select
* @prop --padding-end: End padding of the select
* @prop --padding-bottom: Bottom padding of the select
* @prop --padding-start: Start padding of the select
* @prop --placeholder-color: Color of the select placeholder text
*/
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
display: flex;
@ -40,7 +37,9 @@
}
.select-placeholder {
color: var(--placeholder-color);
color: currentColor;
opacity: .33;
}
button {
@ -78,6 +77,9 @@ button {
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: var(--icon-color);
color: currentColor;
opacity: .33;
pointer-events: none;
}

4
core/src/components/select/test/basic/index.html
View File

@ -57,7 +57,7 @@
<ion-list>
<ion-list-header>Select - Custom Interface Options</ion-list-header>
<ion-item color="dark">
<ion-item color="danger">
<ion-label>Alert</ion-label>
<ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
<ion-select-option value="bacon" selected>Bacon</ion-select-option>
@ -83,7 +83,7 @@
</ion-select>
</ion-item>
<ion-item color="dark">
<ion-item color="primary">
<ion-label>Action Sheet</ion-label>
<ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
<ion-select-option value="red">Red</ion-select-option>

4
core/src/components/select/test/standalone/index.html
View File

@ -73,9 +73,7 @@
<style>
.custom {
--color: crimson;
--icon-color: pink;
--placeholder-color: teal;
color: crimson;
}
</style>
</body>

23
core/src/components/toolbar/toolbar.ios.scss
View File

@ -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;
}

14
core/src/components/toolbar/toolbar.ios.vars.scss
View File

@ -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
// --------------------------------------------------

23
core/src/components/toolbar/toolbar.md.scss
View File

@ -36,3 +36,26 @@
--padding-start: 0;
--padding-end: 0;
}
// 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;
}

11
core/src/components/toolbar/toolbar.md.vars.scss
View File

@ -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;

76
core/src/themes/test/css-variables/css/oceanic.css
View File

@ -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;
}

49
core/src/themes/test/css-variables/index.html
View File

@ -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 @@
<ion-toolbar color="primary">
<ion-title>Lists</ion-title>
<div class="right-container">
<div slot="end" class="right-container">
<ion-label>Select a Theme:</ion-label>
<ion-select interface="popover" class="theme-picker">
<ion-select-option value="default" selected>Default</ion-select-option>
@ -129,13 +131,34 @@
<section>
<ion-list>
<ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
<ion-item><ion-label>Super Metroid</ion-label></ion-item>
<ion-item><ion-label>Mega Man X</ion-label></ion-item>
<ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
<ion-item><ion-label>Pac-Man</ion-label></ion-item>
<ion-item><ion-label>Super Mario World</ion-label></ion-item>
<ion-item><ion-label>Street Fighter II</ion-label></ion-item>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Super Metroid</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Street Fighter II</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item-divider>Sliding Items</ion-item-divider>
<ion-item-sliding>
<ion-item><ion-label>Half Life</ion-label></ion-item>
@ -299,7 +322,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Colors</ion-title>
<div class="right-container">
<div slot="end" class="right-container">
<ion-label>Select a Theme:</ion-label>
<ion-select interface="popover" class="theme-picker">
<ion-select-option value="default" selected>Default</ion-select-option>
@ -655,7 +678,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Other</ion-title>
<div class="right-container">
<div slot="end" class="right-container">
<ion-label>Select a Theme:</ion-label>
<ion-select interface="popover" class="theme-picker">
<ion-select-option value="default" selected>Default</ion-select-option>