Skip to content

Commit

Permalink
refactor(sass): add Sass variables for alert, remove unused selectors
Browse files Browse the repository at this point in the history 
renames some sass variables to work towards a standard convention

references #5651
  • Loading branch information
@brandyscarney
brandyscarney committed Mar 3, 2016
1 parent 50b7d70 commit 374efde
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 76 deletions.
123 changes: 66 additions & 57 deletions ionic/components/alert/alert.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
// --------------------------------------------------

$alert-ios-max-width: 270px !default;
$alert-ios-background: rgba(0,0,0,0) !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-padding: 12px 16px 7px !default;

$alert-ios-title-margin-top: 8px !default;
$alert-ios-title-font-weight: 600 !default;
Expand All @@ -22,42 +22,56 @@ $alert-ios-message-padding: 0px 16px 21px !default;
$alert-ios-message-text-color: inherit !default;
$alert-ios-message-text-align: center !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-margin-top: 10px !default;
$alert-ios-input-background-color: #fff !default;
$alert-ios-input-border: 1px solid #ccc !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-width: 50% !default;
$alert-ios-button-font-size: 17px !default;
$alert-ios-button-text-color: map-get($colors-ios, primary) !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-width: 1px !default;
$alert-ios-button-border-style: solid !default;
$alert-ios-button-border-color: #dbdbdf !default;
$alert-ios-button-activated-background-color: #e9e9e9 !default;

$alert-checkbox-ios-icon-size: 21px !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;


ion-alert {
background: $alert-ios-background;
}

$alert-ios-button-main-font-weight: bold !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;


.alert-wrapper {
border-radius: $alert-ios-border-radius;
background-color: $alert-ios-background-color;
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;
}

Expand All @@ -66,8 +80,8 @@ ion-alert {
// --------------------------------------------------

.alert-head {
padding: $alert-ios-head-padding;
text-align: $alert-ios-head-text-align;
padding: $alert-ios-head-padding;
}

.alert-title {
Expand All @@ -94,10 +108,10 @@ ion-alert {
}

.alert-message {
max-height: 240px;
max-height: $alert-ios-content-max-height;

&:empty {
padding: 0 0 12px 0;
padding: $alert-ios-message-padding-empty;
}
}

Expand All @@ -120,8 +134,8 @@ ion-alert {

.alert-radio-group,
.alert-checkbox-group {
max-height: 240px;
border-top: 1px solid $alert-ios-button-border-color;
max-height: $alert-ios-content-max-height;
border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
overflow: scroll;
}

Expand All @@ -138,8 +152,7 @@ ion-alert {
.alert-radio-label {
flex: 1;
order: 0;
padding: 13px;
text-align: auto;
padding: $alert-ios-radio-label-padding;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
Expand All @@ -148,7 +161,7 @@ ion-alert {
.alert-radio-icon {
position: relative;
order: 1;
min-width: 30px;
min-width: $alert-ios-radio-icon-min-width;
}

.alert-radio[aria-checked=true] {
Expand Down Expand Up @@ -187,24 +200,24 @@ ion-alert {
.alert-checkbox-icon {
margin: 10px 6px 10px 16px;
position: relative;
width: $alert-checkbox-ios-icon-size;
height: $alert-checkbox-ios-icon-size;
border-radius: $alert-checkbox-ios-icon-border-radius;
border-width: $alert-checkbox-ios-icon-border-width;
border-style: $alert-checkbox-ios-icon-border-style;
border-color: $alert-checkbox-ios-icon-border-color-off;
background-color: $alert-checkbox-ios-background-color-off;
width: $alert-ios-checkbox-icon-size;
height: $alert-ios-checkbox-icon-size;
border-radius: $alert-ios-checkbox-icon-border-radius;
border-width: $alert-ios-checkbox-icon-border-width;
border-style: $alert-ios-checkbox-icon-border-style;
border-color: $alert-ios-checkbox-icon-border-color-off;
background-color: $alert-ios-checkbox-background-color-off;
}

.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
background-color: $alert-checkbox-ios-background-color-on;
border-color: $alert-checkbox-ios-icon-border-color-on;
background-color: $alert-ios-checkbox-background-color-on;
border-color: $alert-ios-checkbox-icon-border-color-on;

.alert-checkbox-inner {
position: absolute;
border-width: $alert-checkbox-ios-icon-checkmark-width;
border-style: $alert-checkbox-ios-icon-checkmark-style;
border-color: $alert-checkbox-ios-icon-checkmark-color;
border-width: $alert-ios-checkbox-icon-checkmark-width;
border-style: $alert-ios-checkbox-icon-checkmark-style;
border-color: $alert-ios-checkbox-icon-checkmark-color;
top: 4px;
left: 7px;
width: 4px;
Expand All @@ -220,34 +233,30 @@ ion-alert {
// --------------------------------------------------

.alert-button-group {
flex-wrap: wrap;
margin-right: -1px;
flex-wrap: $alert-ios-button-group-flex-wrap;
margin-right: -$alert-ios-button-border-width;
}

.alert-button {
margin: 0;
flex: 1 1 auto;
min-width: 50%;
margin: $alert-ios-button-margin;
flex: $alert-ios-button-flex;
min-width: $alert-ios-button-min-width;
font-size: $alert-ios-button-font-size;
height: $alert-ios-button-min-height;
border-radius: $alert-ios-button-border-radius;
border-top: 1px solid $alert-ios-button-border-color;
border-right: 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: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
color: $alert-ios-button-text-color;
background-color: $alert-ios-button-background-color;
overflow: hidden;

&:last-child {
font-weight: bold;
font-weight: $alert-ios-button-main-font-weight;
border-right: 0;
}

&.activated {
opacity: 1;
background-color: $alert-ios-button-activated-background-color;
}

&:hover:not(.disable-hover) {
opacity: 1;
background-color: $alert-ios-button-background-color-activated;
}
}

Expand Down
56 changes: 37 additions & 19 deletions ionic/components/alert/alert.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,36 @@ $alert-md-sub-title-font-size: 16px !default;
$alert-md-message-font-size: 15px !default;
$alert-md-message-padding: 0 24px 24px 24px !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: #000000 !default;
$alert-md-input-highlight-color: map-get($colors-md, primary) !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-background-color: transparent !default;
$alert-md-button-background-color-activated: rgba(158, 158, 158, 0.2) !default;
$alert-md-button-border-radius: 2px !default;
$alert-md-buttons-padding: 8px 8px 8px 24px !default;
$alert-md-buttons-justify-content: flex-end !default;
$alert-md-button-text-transform: uppercase !default;
$alert-md-button-text-align: right !default;


.alert-wrapper {
Expand Down Expand Up @@ -69,10 +86,10 @@ $alert-md-buttons-justify-content: flex-end !default;

.alert-message {
font-size: $alert-md-message-font-size;
max-height: 240px;
max-height: $alert-md-content-max-height;

&:empty {
padding: 0;
padding: $alert-md-message-padding-empty;
}
}

Expand All @@ -81,12 +98,12 @@ $alert-md-buttons-justify-content: flex-end !default;
// --------------------------------------------------

.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;
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 {
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;
}
}
Expand All @@ -100,7 +117,7 @@ $alert-md-buttons-justify-content: flex-end !default;
position: relative;
border-top: 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;
}

Expand Down Expand Up @@ -215,24 +232,25 @@ $alert-md-buttons-justify-content: flex-end !default;
// --------------------------------------------------

.alert-button-group {
padding: $alert-md-buttons-padding;
justify-content: $alert-md-buttons-justify-content;
flex-wrap: wrap-reverse;
padding: $alert-md-button-group-padding;
justify-content: $alert-md-button-group-justify-content;
flex-wrap: $alert-md-button-group-flex-wrap;
}

.alert-button {
position: relative;
overflow: hidden;
padding: 10px;
font-weight: 500;
padding: $alert-md-button-padding;
font-weight: $alert-md-button-font-weight;
color: $alert-md-button-text-color;
background-color: $alert-md-button-background-color;
border-radius: $alert-md-button-border-radius;
text-transform: uppercase;
text-align: right;
text-transform: $alert-md-button-text-transform;
text-align: $alert-md-button-text-align;

// necessary for ripple to work properly
position: relative;
overflow: hidden;

&.activated {
background-color: $alert-md-button-background-color-activated;
opacity: 1;
}
}

0 comments on commit 374efde

Please sign in to comment.