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

refactor(sass): add Sass variables for alert, remove unused selectors

Browse Source 
renames some sass variables to work towards a standard convention

references #5651
This commit is contained in:
Brandy Carney
2016-03-03 12:28:50 -05:00
parent 50b7d7052d
commit 374efde03f
2 changed files with 102 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
ionic/components/alert/alert.ios.scss
View File

@ -5,12 +5,12 @@
// -------------------------------------------------- // --------------------------------------------------
$alert-ios-max-width: 270px !default; $alert-ios-max-width: 270px !default;
$alert-ios-background: rgba(0,0,0,0) !default;
$alert-ios-border-radius: 13px !default; $alert-ios-border-radius: 13px !default;
$alert-ios-background-color: #f8f8f8 !default; $alert-ios-background: #f8f8f8 !default;
$alert-ios-box-shadow: none !default;
$alert-ios-head-padding: 12px 16px 7px !default;
$alert-ios-head-text-align: center !default; $alert-ios-head-text-align: center !default;
$alert-ios-head-padding: 12px 16px 7px !default;
$alert-ios-title-margin-top: 8px !default; $alert-ios-title-margin-top: 8px !default;
$alert-ios-title-font-weight: 600 !default; $alert-ios-title-font-weight: 600 !default;
@ -22,6 +22,9 @@ $alert-ios-message-padding: 0px 16px 21px !default;
$alert-ios-message-text-color: inherit !default; $alert-ios-message-text-color: inherit !default;
$alert-ios-message-text-align: center !default; $alert-ios-message-text-align: center !default;
$alert-ios-message-font-size: 13px !default; $alert-ios-message-font-size: 13px !default;
$alert-ios-message-padding-empty: 0 0 12px 0 !default;
$alert-ios-content-max-height: 240px !default;
$alert-ios-input-padding: 6px !default; $alert-ios-input-padding: 6px !default;
$alert-ios-input-margin-top: 10px !default; $alert-ios-input-margin-top: 10px !default;
@ -29,35 +32,46 @@ $alert-ios-input-background-color: #fff !default;
$alert-ios-input-border: 1px solid #ccc !default; $alert-ios-input-border: 1px solid #ccc !default;
$alert-ios-input-border-radius: 4px !default; $alert-ios-input-border-radius: 4px !default;
$alert-ios-button-group-flex-wrap: wrap !default;
$alert-ios-button-margin: 0 !default;
$alert-ios-button-flex: 1 1 auto !default;
$alert-ios-button-min-height: 44px !default; $alert-ios-button-min-height: 44px !default;
$alert-ios-button-min-width: 50% !default;
$alert-ios-button-font-size: 17px !default; $alert-ios-button-font-size: 17px !default;
$alert-ios-button-text-color: map-get($colors-ios, primary) !default; $alert-ios-button-text-color: map-get($colors-ios, primary) !default;
$alert-ios-button-background-color: transparent !default; $alert-ios-button-background-color: transparent !default;
$alert-ios-button-background-color-activated: #e9e9e9 !default;
$alert-ios-button-border-radius: 0 !default; $alert-ios-button-border-radius: 0 !default;
$alert-ios-button-border-width: 1px !default;
$alert-ios-button-border-style: solid !default;
$alert-ios-button-border-color: #dbdbdf !default; $alert-ios-button-border-color: #dbdbdf !default;
$alert-ios-button-activated-background-color: #e9e9e9 !default;
$alert-checkbox-ios-icon-size: 21px !default; $alert-ios-button-main-font-weight: bold !default;
$alert-checkbox-ios-icon-border-radius: 50% !default;
$alert-checkbox-ios-icon-border-width: 1px !default;
$alert-checkbox-ios-icon-border-style: solid !default;
$alert-checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
$alert-checkbox-ios-icon-border-color-on: map-get($colors-ios, primary) !default;
$alert-checkbox-ios-background-color-off: $list-ios-background-color !default;
$alert-checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
$alert-checkbox-ios-icon-checkmark-width: $alert-checkbox-ios-icon-border-width !default;
$alert-checkbox-ios-icon-checkmark-style: $alert-checkbox-ios-icon-border-style !default;
$alert-checkbox-ios-icon-checkmark-color: $background-ios-color !default;
$alert-ios-radio-label-padding: 13px !default;
$alert-ios-radio-icon-min-width: 30px !default;
$alert-ios-checkbox-icon-size: 21px !default;
$alert-ios-checkbox-icon-border-radius: 50% !default;
$alert-ios-checkbox-icon-border-width: 1px !default;
$alert-ios-checkbox-icon-border-style: solid !default;
$alert-ios-checkbox-icon-border-color-off: $list-ios-border-color !default;
$alert-ios-checkbox-icon-border-color-on: map-get($colors-ios, primary) !default;
$alert-ios-checkbox-background-color-off: $list-ios-background-color !default;
$alert-ios-checkbox-background-color-on: map-get($colors-ios, primary) !default;
$alert-ios-checkbox-icon-checkmark-width: $alert-ios-checkbox-icon-border-width !default;
$alert-ios-checkbox-icon-checkmark-style: $alert-ios-checkbox-icon-border-style !default;
$alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;
ion-alert {
background: $alert-ios-background;
}
.alert-wrapper { .alert-wrapper {
border-radius: $alert-ios-border-radius;
background-color: $alert-ios-background-color;
max-width: $alert-ios-max-width; max-width: $alert-ios-max-width;
border-radius: $alert-ios-border-radius;
background-color: $alert-ios-background;
box-shadow: $alert-ios-box-shadow;
overflow: hidden; overflow: hidden;
} }
@ -66,8 +80,8 @@ ion-alert {
// -------------------------------------------------- // --------------------------------------------------
.alert-head { .alert-head {
padding: $alert-ios-head-padding;
text-align: $alert-ios-head-text-align; text-align: $alert-ios-head-text-align;
padding: $alert-ios-head-padding;
} }
.alert-title { .alert-title {
@ -94,10 +108,10 @@ ion-alert {
} }
.alert-message { .alert-message {
max-height: 240px; max-height: $alert-ios-content-max-height;
&:empty { &:empty {
padding: 0 0 12px 0; padding: $alert-ios-message-padding-empty;
} }
} }
@ -120,8 +134,8 @@ ion-alert {
.alert-radio-group, .alert-radio-group,
.alert-checkbox-group { .alert-checkbox-group {
max-height: 240px; max-height: $alert-ios-content-max-height;
border-top: 1px solid $alert-ios-button-border-color; border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
overflow: scroll; overflow: scroll;
} }
@ -138,8 +152,7 @@ ion-alert {
.alert-radio-label { .alert-radio-label {
flex: 1; flex: 1;
order: 0; order: 0;
padding: 13px; padding: $alert-ios-radio-label-padding;
text-align: auto;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -148,7 +161,7 @@ ion-alert {
.alert-radio-icon { .alert-radio-icon {
position: relative; position: relative;
order: 1; order: 1;
min-width: 30px; min-width: $alert-ios-radio-icon-min-width;
} }
.alert-radio[aria-checked=true] { .alert-radio[aria-checked=true] {
@ -187,24 +200,24 @@ ion-alert {
.alert-checkbox-icon { .alert-checkbox-icon {
margin: 10px 6px 10px 16px; margin: 10px 6px 10px 16px;
position: relative; position: relative;
width: $alert-checkbox-ios-icon-size; width: $alert-ios-checkbox-icon-size;
height: $alert-checkbox-ios-icon-size; height: $alert-ios-checkbox-icon-size;
border-radius: $alert-checkbox-ios-icon-border-radius; border-radius: $alert-ios-checkbox-icon-border-radius;
border-width: $alert-checkbox-ios-icon-border-width; border-width: $alert-ios-checkbox-icon-border-width;
border-style: $alert-checkbox-ios-icon-border-style; border-style: $alert-ios-checkbox-icon-border-style;
border-color: $alert-checkbox-ios-icon-border-color-off; border-color: $alert-ios-checkbox-icon-border-color-off;
background-color: $alert-checkbox-ios-background-color-off; background-color: $alert-ios-checkbox-background-color-off;
} }
.alert-checkbox[aria-checked=true] .alert-checkbox-icon { .alert-checkbox[aria-checked=true] .alert-checkbox-icon {
background-color: $alert-checkbox-ios-background-color-on; background-color: $alert-ios-checkbox-background-color-on;
border-color: $alert-checkbox-ios-icon-border-color-on; border-color: $alert-ios-checkbox-icon-border-color-on;
.alert-checkbox-inner { .alert-checkbox-inner {
position: absolute; position: absolute;
border-width: $alert-checkbox-ios-icon-checkmark-width; border-width: $alert-ios-checkbox-icon-checkmark-width;
border-style: $alert-checkbox-ios-icon-checkmark-style; border-style: $alert-ios-checkbox-icon-checkmark-style;
border-color: $alert-checkbox-ios-icon-checkmark-color; border-color: $alert-ios-checkbox-icon-checkmark-color;
top: 4px; top: 4px;
left: 7px; left: 7px;
width: 4px; width: 4px;
@ -220,34 +233,30 @@ ion-alert {
// -------------------------------------------------- // --------------------------------------------------
.alert-button-group { .alert-button-group {
flex-wrap: wrap; flex-wrap: $alert-ios-button-group-flex-wrap;
margin-right: -1px; margin-right: -$alert-ios-button-border-width;
} }
.alert-button { .alert-button {
margin: 0; margin: $alert-ios-button-margin;
flex: 1 1 auto; flex: $alert-ios-button-flex;
min-width: 50%; min-width: $alert-ios-button-min-width;
font-size: $alert-ios-button-font-size; font-size: $alert-ios-button-font-size;
height: $alert-ios-button-min-height; height: $alert-ios-button-min-height;
border-radius: $alert-ios-button-border-radius; border-radius: $alert-ios-button-border-radius;
border-top: 1px solid $alert-ios-button-border-color; border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
border-right: 1px solid $alert-ios-button-border-color; border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
color: $alert-ios-button-text-color; color: $alert-ios-button-text-color;
background-color: $alert-ios-button-background-color; background-color: $alert-ios-button-background-color;
overflow: hidden;
&:last-child { &:last-child {
font-weight: bold; font-weight: $alert-ios-button-main-font-weight;
border-right: 0; border-right: 0;
} }
&.activated { &.activated {
opacity: 1; background-color: $alert-ios-button-background-color-activated;
background-color: $alert-ios-button-activated-background-color;
}
&:hover:not(.disable-hover) {
opacity: 1;
} }
} }

60
ionic/components/alert/alert.md.scss
View File

@ -18,19 +18,36 @@ $alert-md-sub-title-font-size: 16px !default;
$alert-md-message-font-size: 15px !default; $alert-md-message-font-size: 15px !default;
$alert-md-message-padding: 0 24px 24px 24px !default; $alert-md-message-padding: 0 24px 24px 24px !default;
$alert-md-message-text-color: rgba(0,0,0,.5) !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-border-color: #dedede !default;
$alert-md-input-text-color: #000000 !default; $alert-md-input-text-color: #000000 !default;
$alert-md-input-highlight-color: map-get($colors-md, primary) !default;
$alert-md-input-margin-top: 5px !default;
$alert-md-input-margin-bottom: 5px !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: map-get($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-font-weight: 500 !default;
$alert-md-button-text-color: map-get($colors-md, primary) !default; $alert-md-button-text-color: map-get($colors-md, primary) !default;
$alert-md-button-background-color: transparent !default; $alert-md-button-background-color: transparent !default;
$alert-md-button-background-color-activated: rgba(158, 158, 158, 0.2) !default; $alert-md-button-background-color-activated: rgba(158, 158, 158, 0.2) !default;
$alert-md-button-border-radius: 2px !default; $alert-md-button-border-radius: 2px !default;
$alert-md-buttons-padding: 8px 8px 8px 24px !default; $alert-md-button-text-transform: uppercase !default;
$alert-md-buttons-justify-content: flex-end !default; $alert-md-button-text-align: right !default;
.alert-wrapper { .alert-wrapper {
@ -69,10 +86,10 @@ $alert-md-buttons-justify-content: flex-end !default;
.alert-message { .alert-message {
font-size: $alert-md-message-font-size; font-size: $alert-md-message-font-size;
max-height: 240px; max-height: $alert-md-content-max-height;
&:empty { &:empty {
padding: 0; padding: $alert-md-message-padding-empty;
} }
} }
@ -81,12 +98,12 @@ $alert-md-buttons-justify-content: flex-end !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-input { .alert-input {
border-bottom: 1px solid $alert-md-input-border-color; border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
color: $alert-md-input-text-color; color: $alert-md-input-text-color;
margin: $alert-md-input-margin-top 0 $alert-md-input-margin-bottom 0; margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
&:focus { &:focus {
border-bottom: 2px solid $alert-md-input-highlight-color; border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
margin-bottom: $alert-md-input-margin-bottom - 1; margin-bottom: $alert-md-input-margin-bottom - 1;
} }
} }
@ -100,7 +117,7 @@ $alert-md-buttons-justify-content: flex-end !default;
position: relative; position: relative;
border-top: 1px solid $alert-md-input-border-color; border-top: 1px solid $alert-md-input-border-color;
border-bottom: 1px solid $alert-md-input-border-color; border-bottom: 1px solid $alert-md-input-border-color;
max-height: 240px; max-height: $alert-md-content-max-height;
overflow: auto; overflow: auto;
} }
@ -215,24 +232,25 @@ $alert-md-buttons-justify-content: flex-end !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-button-group { .alert-button-group {
padding: $alert-md-buttons-padding; padding: $alert-md-button-group-padding;
justify-content: $alert-md-buttons-justify-content; justify-content: $alert-md-button-group-justify-content;
flex-wrap: wrap-reverse; flex-wrap: $alert-md-button-group-flex-wrap;
} }
.alert-button { .alert-button {
position: relative; padding: $alert-md-button-padding;
overflow: hidden; font-weight: $alert-md-button-font-weight;
padding: 10px;
font-weight: 500;
color: $alert-md-button-text-color; color: $alert-md-button-text-color;
background-color: $alert-md-button-background-color; background-color: $alert-md-button-background-color;
border-radius: $alert-md-button-border-radius; border-radius: $alert-md-button-border-radius;
text-transform: uppercase; text-transform: $alert-md-button-text-transform;
text-align: right; text-align: $alert-md-button-text-align;
// necessary for ripple to work properly
position: relative;
overflow: hidden;
&.activated { &.activated {
background-color: $alert-md-button-background-color-activated; background-color: $alert-md-button-background-color-activated;
opacity: 1;
} }
} }