mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
9efa3ea3e6
BREAKING CHANGE:
Can now pass contrast to the colors map:
```
$colors-md: (
primary: (
base: #327eff,
contrast: yellow
),
secondary: (
base: #32db64,
contrast: hotpink
),
danger: #d91e18,
light: #f4f4f4,
dark: #222
) !default;
```
references #5445
341 lines
11 KiB
SCSS
341 lines
11 KiB
SCSS
@import "../../globals.md";
|
|
@import "./alert";
|
|
|
|
// Material Design Alerts
|
|
// --------------------------------------------------
|
|
|
|
$alert-md-max-width: 280px !default;
|
|
$alert-md-border-radius: 2px !default;
|
|
$alert-md-background-color: #fafafa !default;
|
|
$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
|
$alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default;
|
|
|
|
$alert-md-head-padding: 24px 24px 20px 24px !default;
|
|
$alert-md-head-text-align: left !default;
|
|
|
|
$alert-md-title-font-size: 22px !default;
|
|
|
|
$alert-md-sub-title-font-size: 16px !default;
|
|
|
|
$alert-md-message-padding: 0 24px 24px 24px !default;
|
|
$alert-md-message-font-size: 15px !default;
|
|
$alert-md-message-text-color: rgba(0, 0, 0, .5) !default;
|
|
$alert-md-message-padding-empty: 0 !default;
|
|
|
|
$alert-md-content-max-height: 240px !default;
|
|
|
|
$alert-md-input-border-width: 1px !default;
|
|
$alert-md-input-border-style: solid !default;
|
|
$alert-md-input-border-color: #dedede !default;
|
|
$alert-md-input-text-color: #000 !default;
|
|
|
|
$alert-md-input-border-width-focused: 2px !default;
|
|
$alert-md-input-border-style-focused: $alert-md-input-border-style !default;
|
|
$alert-md-input-border-color-focused: color($colors-md, primary) !default;
|
|
|
|
$alert-md-input-margin-top: 5px !default;
|
|
$alert-md-input-margin-right: 0 !default;
|
|
$alert-md-input-margin-bottom: 5px !default;
|
|
$alert-md-input-margin-left: 0 !default;
|
|
|
|
$alert-md-button-group-flex-wrap: wrap-reverse !default;
|
|
$alert-md-button-group-padding: 8px 8px 8px 24px !default;
|
|
$alert-md-button-group-justify-content: flex-end !default;
|
|
|
|
$alert-md-button-padding: 10px !default;
|
|
$alert-md-button-margin: 0 8px 0 0 !default;
|
|
$alert-md-button-font-weight: 500 !default;
|
|
$alert-md-button-text-color: color($colors-md, primary) !default;
|
|
$alert-md-button-background-color: transparent !default;
|
|
$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default;
|
|
$alert-md-button-border-radius: 2px !default;
|
|
$alert-md-button-text-transform: uppercase !default;
|
|
$alert-md-button-text-align: right !default;
|
|
|
|
$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default;
|
|
$alert-md-list-border-bottom: $alert-md-list-border-top !default;
|
|
|
|
$alert-md-radio-label-padding: 13px 26px !default;
|
|
|
|
$alert-md-radio-top: 13px !default;
|
|
$alert-md-radio-left: 13px !default;
|
|
$alert-md-radio-width: 16px !default;
|
|
$alert-md-radio-height: 16px !default;
|
|
$alert-md-radio-border-width: 2px !default;
|
|
$alert-md-radio-border-style: solid !default;
|
|
$alert-md-radio-border-radius: 50% !default;
|
|
$alert-md-radio-border-color-off: darken($list-md-border-color, 40%) !default;
|
|
$alert-md-radio-border-color-on: $alert-md-button-text-color !default;
|
|
|
|
$alert-md-radio-icon-top: 2px !default;
|
|
$alert-md-radio-icon-left: 2px !default;
|
|
$alert-md-radio-icon-width: 8px !default;
|
|
$alert-md-radio-icon-height: 8px !default;
|
|
$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default;
|
|
$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default;
|
|
$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default;
|
|
$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default;
|
|
|
|
$alert-md-checkbox-label-padding: 13px 26px !default;
|
|
|
|
$alert-md-checkbox-top: 13px !default;
|
|
$alert-md-checkbox-left: 13px !default;
|
|
$alert-md-checkbox-width: 16px !default;
|
|
$alert-md-checkbox-height: 16px !default;
|
|
$alert-md-checkbox-border-width: 2px !default;
|
|
$alert-md-checkbox-border-style: solid !default;
|
|
$alert-md-checkbox-border-radius: 2px !default;
|
|
$alert-md-checkbox-border-color-off: darken($list-md-border-color, 40%) !default;
|
|
$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default;
|
|
|
|
$alert-md-checkbox-icon-top: 0 !default;
|
|
$alert-md-checkbox-icon-left: 3px !default;
|
|
$alert-md-checkbox-icon-width: 6px !default;
|
|
$alert-md-checkbox-icon-height: 10px !default;
|
|
$alert-md-checkbox-icon-border-width: 2px !default;
|
|
$alert-md-checkbox-icon-border-style: solid !default;
|
|
$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default;
|
|
$alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
|
|
|
.alert-wrapper {
|
|
max-width: $alert-md-max-width;
|
|
|
|
border-radius: $alert-md-border-radius;
|
|
background-color: $alert-md-background-color;
|
|
|
|
box-shadow: $alert-md-box-shadow;
|
|
}
|
|
|
|
// Material Design Alert Header
|
|
// --------------------------------------------------
|
|
|
|
.alert-head {
|
|
padding: $alert-md-head-padding;
|
|
|
|
text-align: $alert-md-head-text-align;
|
|
}
|
|
|
|
.alert-title {
|
|
font-size: $alert-md-title-font-size;
|
|
}
|
|
|
|
.alert-sub-title {
|
|
font-size: $alert-md-sub-title-font-size;
|
|
}
|
|
|
|
|
|
// Material Design Alert Message
|
|
// --------------------------------------------------
|
|
|
|
.alert-message,
|
|
.alert-input-group {
|
|
padding: $alert-md-message-padding;
|
|
|
|
color: $alert-md-message-text-color;
|
|
}
|
|
|
|
.alert-message {
|
|
max-height: $alert-md-content-max-height;
|
|
|
|
font-size: $alert-md-message-font-size;
|
|
|
|
&:empty {
|
|
padding: $alert-md-message-padding-empty;
|
|
}
|
|
}
|
|
|
|
|
|
// Material Design Alert Input
|
|
// --------------------------------------------------
|
|
|
|
.alert-input {
|
|
margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
|
|
|
|
border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
|
|
color: $alert-md-input-text-color;
|
|
|
|
&:focus {
|
|
margin-bottom: $alert-md-input-margin-bottom - 1;
|
|
|
|
border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
|
|
}
|
|
}
|
|
|
|
|
|
// Material Design Alert Radio/Checkbox Group
|
|
// --------------------------------------------------
|
|
|
|
.alert-radio-group,
|
|
.alert-checkbox-group {
|
|
position: relative;
|
|
overflow: auto;
|
|
|
|
max-height: $alert-md-content-max-height;
|
|
|
|
border-top: $alert-md-list-border-top;
|
|
border-bottom: $alert-md-list-border-bottom;
|
|
}
|
|
|
|
.alert-tappable {
|
|
position: relative;
|
|
display: flex;
|
|
|
|
overflow: hidden;
|
|
|
|
// TODO this should be a variable that matches item
|
|
min-height: 4.4rem;
|
|
}
|
|
|
|
|
|
// Material Design Alert Radio
|
|
// --------------------------------------------------
|
|
|
|
.alert-radio-label {
|
|
overflow: hidden;
|
|
|
|
flex: 1;
|
|
|
|
padding: $alert-md-radio-label-padding;
|
|
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Material Design Alert Radio Unchecked Circle
|
|
// ---------------------------------------------------
|
|
|
|
.alert-radio-icon {
|
|
position: relative;
|
|
top: $alert-md-radio-top;
|
|
left: $alert-md-radio-left;
|
|
display: block;
|
|
|
|
width: $alert-md-radio-width;
|
|
height: $alert-md-radio-height;
|
|
|
|
border-width: $alert-md-radio-border-width;
|
|
border-style: $alert-md-radio-border-style;
|
|
border-radius: $alert-md-radio-border-radius;
|
|
border-color: $alert-md-radio-border-color-off;
|
|
}
|
|
|
|
// Material Design Alert Radio Checked Dot
|
|
// ---------------------------------------------------
|
|
|
|
.alert-radio-inner {
|
|
position: absolute;
|
|
top: $alert-md-radio-icon-top;
|
|
left: $alert-md-radio-icon-left;
|
|
|
|
width: $alert-md-radio-icon-width;
|
|
height: $alert-md-radio-icon-height;
|
|
|
|
border-radius: $alert-md-radio-icon-border-radius;
|
|
background-color: $alert-md-radio-border-color-on;
|
|
transform: $alert-md-radio-icon-transform-off;
|
|
transition: $alert-md-radio-icon-transition;
|
|
}
|
|
|
|
|
|
// Material Design Alert Radio Checked
|
|
// ---------------------------------------------------
|
|
|
|
.alert-radio[aria-checked=true] {
|
|
color: $alert-md-radio-border-color-on;
|
|
|
|
.alert-radio-icon {
|
|
border-color: $alert-md-radio-border-color-on;
|
|
}
|
|
}
|
|
|
|
.alert-radio[aria-checked=true] .alert-radio-inner {
|
|
transform: $alert-md-radio-icon-transform-on;
|
|
}
|
|
|
|
|
|
// Material Design Alert Checkbox Label
|
|
// --------------------------------------------------
|
|
|
|
.alert-checkbox-label {
|
|
overflow: hidden;
|
|
|
|
flex: 1;
|
|
|
|
padding: $alert-md-checkbox-label-padding;
|
|
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Material Design Alert Checkbox Outline: Unchecked
|
|
// --------------------------------------------------
|
|
|
|
.alert-checkbox-icon {
|
|
position: relative;
|
|
top: $alert-md-checkbox-top;
|
|
left: $alert-md-checkbox-left;
|
|
|
|
width: $alert-md-checkbox-width;
|
|
height: $alert-md-checkbox-height;
|
|
|
|
border-width: $alert-md-checkbox-border-width;
|
|
border-style: $alert-md-checkbox-border-style;
|
|
border-radius: $alert-md-checkbox-border-radius;
|
|
border-color: $alert-md-checkbox-border-color-off;
|
|
}
|
|
|
|
// Material Design Alert Checkbox Checkmark: Checked
|
|
// --------------------------------------------------
|
|
|
|
.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
|
|
border-color: $alert-md-checkbox-border-color-on;
|
|
background-color: $alert-md-checkbox-border-color-on;
|
|
}
|
|
|
|
.alert-checkbox[aria-checked=true] .alert-checkbox-inner {
|
|
position: absolute;
|
|
top: $alert-md-checkbox-icon-top;
|
|
left: $alert-md-checkbox-icon-left;
|
|
|
|
width: $alert-md-checkbox-icon-width;
|
|
height: $alert-md-checkbox-icon-height;
|
|
|
|
border-width: $alert-md-checkbox-icon-border-width;
|
|
border-top-width: 0;
|
|
border-left-width: 0;
|
|
border-style: $alert-md-checkbox-icon-border-style;
|
|
border-color: $alert-md-checkbox-icon-border-color;
|
|
transform: $alert-md-checkbox-icon-transform;
|
|
}
|
|
|
|
|
|
// Material Design Alert Button
|
|
// --------------------------------------------------
|
|
|
|
.alert-button-group {
|
|
flex-wrap: $alert-md-button-group-flex-wrap;
|
|
justify-content: $alert-md-button-group-justify-content;
|
|
|
|
padding: $alert-md-button-group-padding;
|
|
}
|
|
|
|
.alert-button {
|
|
// necessary for ripple to work properly
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
margin: $alert-md-button-margin;
|
|
padding: $alert-md-button-padding;
|
|
|
|
border-radius: $alert-md-button-border-radius;
|
|
font-weight: $alert-md-button-font-weight;
|
|
text-align: $alert-md-button-text-align;
|
|
text-transform: $alert-md-button-text-transform;
|
|
color: $alert-md-button-text-color;
|
|
background-color: $alert-md-button-background-color;
|
|
|
|
&.activated {
|
|
background-color: $alert-md-button-background-color-activated;
|
|
}
|
|
}
|