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

refactor(components): consistent css variables for size (#16600)

Browse Source 
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need.

- fixes a bug where the spinner color wasn't being set properly in loading
- adds css variables for customizing background, color, some borders in overlays
- fixes a bug where prefix, suffix are taking up too much width in picker

closes #16097
references ionic-team/ionic-docs#228

BREAKING CHANGES

## Core Components

Removes the `--width` and `--height` variables from the following components, in favor of CSS:

- Button
- FAB Button
- Checkbox
  - Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
- Radio
  - Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size.

## Overlay Components

The following components have all be converted to shadow (or scoped) and have CSS variables for width/height:

- Action Sheet _(scoped)_
- Alert  _(scoped)_
- Loading  _(scoped)_
- Menu _(shadow)_
- Modal  _(scoped)_
- Picker _(scoped)_
- Popover  _(scoped)_
- Toast _(shadow)_

The above components will now have the following CSS variables for consistency among overlays:

| Name              |
| ----------------- |
| `--height`        |
| `--max-height`    |
| `--max-width`     |
| `--min-height`    |
| `--min-width`     |
| `--width`         |

If the component does not set the value, it will default to `auto`.

## Removed CSS Variables

The following CSS properties have been removed:

| Component      | Property            | Reason                          |
| ---------------| --------------------| --------------------------------|
| **Button**     | `--height`          | Use CSS instead                 |
| **Button**     | `--margin-bottom`   | Use CSS instead                 |
| **Button**     | `--margin-end`      | Use CSS instead                 |
| **Button**     | `--margin-start`    | Use CSS instead                 |
| **Button**     | `--margin-top`      | Use CSS instead                 |
| **Button**     | `--width`           | Use CSS instead                 |
| **Checkbox**   | `--height`          | Use CSS or `--size`             |
| **Checkbox**   | `--width`           | Use CSS or `--size`             |
| **FAB Button** | `--width`           | Use CSS instead                 |
| **FAB Button** | `--height`          | Use CSS instead                 |
| **FAB Button** | `--margin-bottom`   | Use CSS instead                 |
| **FAB Button** | `--margin-end`      | Use CSS instead                 |
| **FAB Button** | `--margin-start`    | Use CSS instead                 |
| **FAB Button** | `--margin-top       | Use CSS instead                 |
| **Menu**       | `--width-small`     | Use a media query and `--width` |
| **Radio**      | `--width`           | Use CSS instead                 |
| **Radio**      | `--height`          | Use CSS instead                 |
| **Radio**      | `--inner-height`    | Calculated based on parent      |
| **Radio**      | `--inner-width`     | Calculated based on parent      |
This commit is contained in:
Brandy Carney
2018-12-14 15:45:14 -05:00
committed by GitHub
parent f93e4fdc64
commit 4053f386fd
77 changed files with 1525 additions and 820 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
core/src/components/picker/picker.md.scss
View File

@ -4,26 +4,25 @@
// Material Design Picker
// --------------------------------------------------
.picker-md .picker-wrapper {
height: $picker-md-height;
:host {
--background: #{$picker-md-background-color};
--border-width: #{$hairlines-width 0 0};
--border-color: #{$picker-md-border-color};
--height: #{$picker-md-height};
border-top: $hairlines-width solid $picker-md-border-color;
background: $picker-md-background-color;
color: $picker-md-option-text-color;
}
.picker-md .picker-toolbar {
.picker-toolbar {
display: flex;
justify-content: flex-end;
height: $picker-md-toolbar-height;
background: $picker-md-toolbar-background-color;
}
.picker-md .picker-button,
.picker-md .picker-button.activated {
.picker-button,
.picker-button.activated {
@include margin(0);
@include padding(0, 1.1em);
@ -40,58 +39,12 @@
box-shadow: none;
}
.picker-md .picker-columns {
.picker-columns {
height: $picker-md-height - $picker-md-toolbar-height;
perspective: 1800px;
}
.picker-md .picker-col {
@include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
transform-style: preserve-3d;
}
.picker-md .picker-prefix,
.picker-md .picker-suffix,
.picker-md .picker-opts {
top: $picker-md-option-offset-y;
transform-style: preserve-3d;
color: $picker-md-option-text-color;
font-size: $picker-md-option-font-size;
line-height: $picker-md-option-height;
pointer-events: none;
}
.picker-md .picker-opt {
@include margin(0);
@include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
height: 43px;
transition-timing-function: ease-out;
background: transparent;
color: $picker-md-option-text-color;
font-size: $picker-md-option-font-size;
line-height: $picker-md-option-height;
backface-visibility: hidden;
pointer-events: auto;
}
.picker-md .picker-prefix,
.picker-md .picker-suffix,
.picker-md .picker-opt.picker-opt-selected {
color: $picker-md-option-selected-color;
}
.picker-md .picker-above-highlight {
.picker-above-highlight {
@include position(0, null, null, 0);
@include transform(translate3d(0, 0, 90px));
@ -102,14 +55,15 @@
border-bottom: 1px solid $picker-md-border-color;
background: linear-gradient(to bottom,
$picker-md-top-background-color 20%,
$picker-md-bottom-background-color 100%);
background: linear-gradient(
to bottom,
$picker-md-top-background-color 20%,
$picker-md-bottom-background-color 100%);
z-index: 10;
}
.picker-md .picker-below-highlight {
.picker-below-highlight {
@include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0);
@include transform(translate3d(0, 0, 90px));
@ -120,9 +74,10 @@
border-top: 1px solid $picker-md-border-color;
background: linear-gradient(to top,
$picker-md-top-background-color 30%,
$picker-md-bottom-background-color 100%);
background: linear-gradient(
to top,
$picker-md-top-background-color 30%,
$picker-md-bottom-background-color 100%);
z-index: 11;
}