javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): add custom properties and remove --ion-color overrides (#15463)

Browse Source 
- adds custom properties 
- removes the overrides of `--ion-color-*` variables
- documents the properties

references #14808 references #14853 references #14850
This commit is contained in:
Brandy Carney
2018-09-05 12:23:47 -04:00
committed by GitHub
parent 1f24370497
commit 3af43610bb
15 changed files with 489 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,12 @@
@import "./buttons";
// iOS Toolbar Button Default
// iOS Toolbar Default Button
// --------------------------------------------------
::slotted(*) .button {
--padding-top: 0;
--pading-bottom: 0;
--padding-bottom: 0;
--padding-start: 5px;
--padding-end: 5px;
--height: 32px;
@ -20,10 +20,31 @@
--border-radius: #{$toolbar-ios-button-border-radius};
}
// iOS Toolbar with Color Default Button
// --------------------------------------------------
:host-context(.ion-color)::slotted(*) .button {
--ion-color-base: currentColor;
--color: currentColor;
--color-activated: currentColor;
}
// iOS Toolbar Clear Button
// --------------------------------------------------
::slotted(*) .button-clear.activated {
color: $toolbar-ios-button-color;
}
// iOS Toolbar Button Solid
// --------------------------------------------------
::slotted(*) .button-solid-ios:hover {
opacity: .4;
}
// iOS Toolbar Button Icon
// --------------------------------------------------
::slotted(*) ion-icon[slot="start"] {
@ -56,41 +77,31 @@
pointer-events: none;
}
::slotted(*) .button.button-clear {
--height: 35px;
}
// iOS Toolbar Button Solid
// iOS Toolbar Menu Toggle
// --------------------------------------------------
::slotted(*) .button.button-solid-ios:hover {
opacity: .4;
}
// iOS Toolbar Menu Toggle
// --------------------------------------------------
// .button-menutoggle-ios {
// order: map-get($toolbar-order-ios, menu-toggle-start);
// .button-menutoggle-ios {
// order: map-get($toolbar-order-ios, menu-toggle-start);
// min-width: 36px;
// min-width: 36px;
// --margin-top: 0;
// --margin-bottom: 0;
// --margin-start: 6px;
// --margin-end: 6px;
// --margin-top: 0;
// --margin-bottom: 0;
// --margin-start: 6px;
// --margin-end: 6px;
// --padding-top: 0;
// --padding-bottom: 0;
// --padding-start: 0;
// --padding-end: 0;
// --padding-top: 0;
// --padding-bottom: 0;
// --padding-start: 0;
// --padding-end: 0;
// ion-icon {
// @include padding(0, 6px);
// ion-icon {
// @include padding(0, 6px);
// font-size: 28px;
// }
// }
// font-size: 28px;
// }
// }
// iOS Toolbar Button Placement
// --------------------------------------------------

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

@ -1,7 +1,7 @@
@import "./buttons.md.vars";
@import "./buttons";
// Material Design Toolbar Button Default
// Material Design Toolbar Default Button
// --------------------------------------------------
::slotted(*) .button {
@ -20,6 +20,49 @@
--border-radius: #{$toolbar-md-button-border-radius};
}
// Material Design Toolbar w/ Color Default Button
// --------------------------------------------------
:host-context(.ion-color)::slotted(*) .button {
--color: currentColor;
--color-activated: currentColor;
}
// Material Design Toolbar Solid Button
// --------------------------------------------------
::slotted(*) .button-solid {
--color: #{$toolbar-md-background-color};
--color-activated: #{$toolbar-md-background-color};
--background: #{$toolbar-md-text-color};
--background-activated: #{$toolbar-md-text-color};
}
// Material Design Toolbar Outline Button
// --------------------------------------------------
::slotted(*) .button-outline {
--color: #{$toolbar-md-text-color};
--color-activated: #{$toolbar-md-text-color};
--background: transparent;
--background-activated: transparent;
--border-color: #{$toolbar-md-text-color};
}
// Material Design Toolbar Clear Button
// --------------------------------------------------
::slotted(*) .button-clear {
--color: #{$toolbar-md-text-color};
--color-activated: #{$toolbar-md-text-color};
--background: transparent;
}
// Material Design Toolbar Button Icon
// --------------------------------------------------
::slotted(*) ion-icon[slot="start"] {
@ -46,18 +89,6 @@
pointer-events: none;
}
::slotted(*) .button.button-solid,
::slotted(*) .button.button-outline {
--ion-color-base: #{$toolbar-md-text-color};
--ion-color-contrast: #{$toolbar-md-background-color};
--ion-color-shade: #{$toolbar-md-text-color};
}
::slotted(*) .button.button-clear {
--ion-color-base: currentColor;
--height: 45px;
}
// Material Design Toolbar Button Placement
// --------------------------------------------------