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

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
core/src/components/button/button.scss
View File

@ -3,38 +3,165 @@
// Button
// --------------------------------------------------
.button {
:host {
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
--ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)};
--ion-color-shade: #{ion-color(primary, shade)};
--ripple-color: currentColor;
}
:host([disabled]) {
pointer-events: none;
}
// Solid Button
// --------------------------------------------------
:host(.button-solid) {
color: #{current-color(contrast)};
--background: #{current-color(base)};
}
// Outline Button
// --------------------------------------------------
:host(.button-outline) {
color: #{current-color(base)};
--border-color: #{current-color(base)};
--background: transparent;
}
// Clear Button
// --------------------------------------------------
:host(.button-clear) {
color: #{current-color(base)};
--border-width: 0;
--background: transparent;
}
// Block Button
// --------------------------------------------------
:host(.button-block) .button-native {
@include margin-horizontal(0);
display: block;
clear: both;
width: 100%;
contain: strict;
}
:host(.button-block) .button-native::after {
clear: both;
}
// Full Button
// --------------------------------------------------
:host(.button-full) .button-native {
@include margin-horizontal(0);
display: block;
width: 100%;
contain: strict;
}
:host(.button-full:not(.button-round)) .button-native {
@include border-radius(0);
border-right-width: 0;
border-left-width: 0;
}
.button-native {
@include font-smoothing();
@include text-align(center);
@include appearance(none);
@include border-radius(var(--border-radius));
@include margin(
var(--margin-top),
var(--margin-end),
var(--margin-bottom),
var(--margin-start)
);
@include padding(
var(--padding-top),
var(--padding-end),
var(--padding-bottom),
var(--padding-start)
);
position: relative;
z-index: 0;
display: inline-block;
overflow: hidden;
border: 0;
height: var(--height);
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: 1;
text-decoration: none;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
text-decoration: inherit;
text-overflow: inherit;
text-transform: inherit;
white-space: inherit;
color: inherit;
background: var(--background);
box-shadow: var(--box-shadow);
cursor: pointer;
opacity: var(--opacity);
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
transition: background-color, opacity 100ms linear;
transition: var(--transition);
font-kerning: none;
user-select: none;
text-align: inherit;
contain: content;
appearance: none;
}
.button:active,
.button:focus {
.button-native[disabled] {
cursor: default;
opacity: .5;
pointer-events: none;
}
// .button > .button-container:hover {
// opacity: var(--opacity-hover);
// }
.button-native:active,
.button-native:focus {
outline: none;
}
@ -51,72 +178,31 @@
}
a[disabled],
button[disabled],
.button[disabled] {
cursor: default;
pointer-events: none;
}
// Block Button
// --------------------------------------------------
.button-block {
display: block;
clear: both;
width: 100%;
contain: strict;
}
.button-block::after {
clear: both;
}
// Full Button
// --------------------------------------------------
.button-full {
display: block;
width: 100%;
contain: strict;
}
// Full Outline Button
// --------------------------------------------------
.button-full.button-outline {
@include border-radius(0);
border-right-width: 0;
border-left-width: 0;
}
// Button Icons
// --------------------------------------------------
.button ion-icon {
::slotted(ion-icon) {
font-size: 1.4em;
pointer-events: none;
}
.button ion-icon[slot="start"] {
::slotted(ion-icon[slot="start"]) {
@include margin(0, .3em, 0, -.3em);
}
.button ion-icon[slot="end"] {
::slotted(ion-icon[slot="end"]) {
@include margin(0, -.2em, 0, .3em);
}
.button ion-icon[slot="icon-only"] {
::slotted(ion-icon[slot="icon-only"]) {
font-size: 1.8em;
}
// Button Ripple effect
// --------------------------------------------------
ion-ripple-effect {
color: var(--ripple-color);
}