mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
5e5c33a2d9
* fix(item): fix color input for item divider and list header - adds ItemDivider class to add color and mode css classes to item divider - adds e2e test for item divider colors - adds sass variables to improve control over list headers and item divider styles - fixes style for item divider so it will be styled regardless of being inside a list for md and wp modes references #8376 * refactor(popover): remove the background color styling from ion-content and item - change the default text color and background color to match the theme variables. This makes popover look better on dark theme and removes the nesting of styles that breaks list headers. fixes #8376
178 lines
4.1 KiB
SCSS
178 lines
4.1 KiB
SCSS
@import "../../themes/ionic.globals.wp";
|
|
|
|
// Windows List
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Margin top of the list
|
|
$list-wp-margin-top: 16px !default;
|
|
|
|
/// @prop - Margin right of the list
|
|
$list-wp-margin-right: 0 !default;
|
|
|
|
/// @prop - Margin bottom of the list
|
|
$list-wp-margin-bottom: 16px !default;
|
|
|
|
/// @prop - Margin left of the list
|
|
$list-wp-margin-left: 0 !default;
|
|
|
|
/// @prop - Margin top of the inset list
|
|
$list-inset-wp-margin-top: 16px !default;
|
|
|
|
/// @prop - Margin right of the inset list
|
|
$list-inset-wp-margin-right: 16px !default;
|
|
|
|
/// @prop - Margin bottom of the inset list
|
|
$list-inset-wp-margin-bottom: 16px !default;
|
|
|
|
/// @prop - Margin left of the inset list
|
|
$list-inset-wp-margin-left: 16px !default;
|
|
|
|
/// @prop - Border radius of the inset list
|
|
$list-inset-wp-border-radius: 2px !default;
|
|
|
|
/// @prop - Padding left of the header in a list
|
|
$list-wp-header-padding-left: $item-wp-padding-left !default;
|
|
|
|
/// @prop - Border bottom of the header in a list
|
|
$list-wp-header-border-bottom: 1px solid $list-wp-border-color !default;
|
|
|
|
/// @prop - Font size of the header in a list
|
|
$list-wp-header-font-size: 2rem !default;
|
|
|
|
/// @prop - Text color of the header in a list
|
|
$list-wp-header-color: $list-wp-text-color !default;
|
|
|
|
|
|
// Windows Default List
|
|
// --------------------------------------------------
|
|
|
|
.list-wp {
|
|
margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;
|
|
}
|
|
|
|
.list-wp .item-block .item-inner {
|
|
border-bottom: 1px solid $list-wp-border-color;
|
|
}
|
|
|
|
.list-wp > .item-block:first-child,
|
|
.list-wp > .item-wrapper:first-child .item-block {
|
|
border-top: 1px solid $list-wp-border-color;
|
|
}
|
|
|
|
.list-wp > .item-block:last-child,
|
|
.list-wp > .item-wrapper:last-child .item-block {
|
|
border-bottom: 1px solid $list-wp-border-color;
|
|
}
|
|
|
|
.list-wp > .item-block:last-child,
|
|
.list-wp > .item-wrapper:last-child {
|
|
ion-label,
|
|
.item-inner {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.list-wp > ion-input:last-child::after {
|
|
left: 0;
|
|
}
|
|
|
|
.list-wp ion-item-options .button {
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
margin: 1px 0;
|
|
|
|
height: calc(100% - 2px);
|
|
|
|
border: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.list-wp ion-item-options .button::before {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// If the item has the no-lines attribute remove the bottom border from:
|
|
// the item itself (for last-child items)
|
|
// the item-inner class (if it is not last)
|
|
.list-wp .item[no-lines],
|
|
.list-wp .item[no-lines] .item-inner {
|
|
border-width: 0;
|
|
}
|
|
|
|
.list-wp + ion-list ion-list-header {
|
|
margin-top: -$list-wp-margin-top;
|
|
padding-top: 0;
|
|
}
|
|
|
|
|
|
// Windows Insert List
|
|
// --------------------------------------------------
|
|
|
|
.list-wp[inset] {
|
|
margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left;
|
|
|
|
border-radius: $list-inset-wp-border-radius;
|
|
}
|
|
|
|
.list-wp[inset] .item:first-child {
|
|
border-top-width: 0;
|
|
border-top-left-radius: $list-inset-wp-border-radius;
|
|
border-top-right-radius: $list-inset-wp-border-radius;
|
|
}
|
|
|
|
.list-wp[inset] .item:last-child {
|
|
border-bottom-width: 0;
|
|
border-bottom-left-radius: $list-inset-wp-border-radius;
|
|
border-bottom-right-radius: $list-inset-wp-border-radius;
|
|
}
|
|
|
|
.list-wp[inset] .item-input {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.list-wp[inset] + ion-list[inset] {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.list-wp[inset] ion-list-header {
|
|
background-color: $list-wp-background-color;
|
|
}
|
|
|
|
|
|
// Windows No Lines List
|
|
// --------------------------------------------------
|
|
|
|
.list-wp[no-lines] .item,
|
|
.list-wp[no-lines] .item .item-inner {
|
|
border-width: 0;
|
|
}
|
|
|
|
|
|
// Windows List Header
|
|
// --------------------------------------------------
|
|
|
|
.list-header-wp {
|
|
padding-left: $list-wp-header-padding-left;
|
|
|
|
border-bottom: $list-wp-header-border-bottom;
|
|
font-size: $list-wp-header-font-size;
|
|
color: $list-wp-header-color;
|
|
}
|
|
|
|
|
|
// Generate Windows List Header Colors
|
|
// --------------------------------------------------
|
|
|
|
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
|
.list-header-wp-#{$color-name} {
|
|
color: $color-contrast;
|
|
background-color: $color-base;
|
|
}
|
|
}
|