Skip to content

Commit

Permalink
refactor(alert): add extra div to use as radio mark, fix Sass
Browse files Browse the repository at this point in the history 
Added spaces to separate groups of css, added variables, removed unused
css

BREAKING CHANGE: added Sass variables for alert

fixes ionic-team#5577
  • Loading branch information
@brandyscarney
brandyscarney committed Mar 14, 2016
1 parent 96375b6 commit 131c8c3
Show file tree
Hide file tree
Showing 7 changed files with 431 additions and 194 deletions.
2 changes: 1 addition & 1 deletion .scss-lint.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ linters:
enabled: true
ignore_unspecified: false
min_properties: 2
separate_groups: false
separate_groups: true
order:

# Box
Expand Down
191 changes: 130 additions & 61 deletions ionic/components/alert/alert.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,67 +9,91 @@ $alert-ios-border-radius: 13px !default;
$alert-ios-background: #f8f8f8 !default;
$alert-ios-box-shadow: none !default;

$alert-ios-head-text-align: center !default;
$alert-ios-head-padding: 12px 16px 7px !default;
$alert-ios-head-text-align: center !default;

$alert-ios-title-margin-top: 8px !default;
$alert-ios-title-font-weight: 600 !default;
$alert-ios-title-font-size: 17px !default;
$alert-ios-title-font-weight: 600 !default;

$alert-ios-sub-title-font-size: 14px !default;
$alert-ios-sub-title-text-color: #666 !default;

$alert-ios-message-padding: 0 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-text-align: center !default;
$alert-ios-message-text-color: inherit !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-padding: 6px !default;
$alert-ios-input-border-color: #ccc !default;
$alert-ios-input-border: 1px solid $alert-ios-input-border-color !default;
$alert-ios-input-border-radius: 4px !default;
$alert-ios-input-background-color: #fff !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-margin: 0 !default;
$alert-ios-button-min-width: 50% !default;
$alert-ios-button-min-height: 44px !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-border-radius: 0 !default;

$alert-ios-button-main-font-weight: bold !default;

$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-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-radio-min-width: 30px !default;

$alert-ios-radio-icon-top: 13px !default;
$alert-ios-radio-icon-left: 7px !default;
$alert-ios-radio-icon-width: 6px !default;
$alert-ios-radio-icon-height: 12px !default;
$alert-ios-radio-icon-border-width: 2px !default;
$alert-ios-radio-icon-border-style: solid !default;
$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default;
$alert-ios-radio-icon-transform: rotate(45deg) !default;

$alert-ios-checkbox-label-padding: 13px !default;

$alert-ios-checkbox-margin: 10px 6px 10px 16px !default;
$alert-ios-checkbox-size: 21px !default;
$alert-ios-checkbox-border-width: 1px !default;
$alert-ios-checkbox-border-style: solid !default;
$alert-ios-checkbox-border-radius: 50% !default;
$alert-ios-checkbox-border-color-off: $list-ios-border-color !default;
$alert-ios-checkbox-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-ios-checkbox-icon-top: 4px !default;
$alert-ios-checkbox-icon-left: 7px !default;
$alert-ios-checkbox-icon-width: 4px !default;
$alert-ios-checkbox-icon-height: 9px !default;
$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default;
$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default;
$alert-ios-checkbox-icon-border-color: $background-ios-color !default;
$alert-ios-checkbox-icon-transform: rotate(45deg) !default;


.alert-wrapper {
overflow: hidden;

max-width: $alert-ios-max-width;

border-radius: $alert-ios-border-radius;
background-color: $alert-ios-background;

Expand All @@ -82,11 +106,13 @@ $alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;

.alert-head {
padding: $alert-ios-head-padding;

text-align: $alert-ios-head-text-align;
}

.alert-title {
margin-top: $alert-ios-title-margin-top;

font-size: $alert-ios-title-font-size;
font-weight: $alert-ios-title-font-weight;
}
Expand All @@ -103,6 +129,7 @@ $alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;
.alert-message,
.alert-input-group {
padding: $alert-ios-message-padding;

font-size: $alert-ios-message-font-size;
text-align: $alert-ios-message-text-align;
color: $alert-ios-message-text-color;
Expand All @@ -123,9 +150,11 @@ $alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;
.alert-input {
margin-top: $alert-ios-input-margin-top;
padding: $alert-ios-input-padding;

border: $alert-ios-input-border;
border-radius: $alert-ios-input-border-radius;
background-color: $alert-ios-input-background-color;

-webkit-appearance: none;
}

Expand All @@ -136,12 +165,15 @@ $alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;
.alert-radio-group,
.alert-checkbox-group {
overflow: scroll;

max-height: $alert-ios-content-max-height;
border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;

border-top: $alert-ios-list-border-top;
}

.alert-tappable {
display: flex;

min-height: $alert-ios-button-min-height;
}

Expand All @@ -151,81 +183,113 @@ $alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;

.alert-radio-label {
overflow: hidden;

flex: 1;

order: 0;

padding: $alert-ios-radio-label-padding;

text-overflow: ellipsis;
white-space: nowrap;
}

// iOS Alert Radio Checkmark: Unchecked
// -----------------------------------------

.alert-radio-icon {
position: relative;

order: 1;
min-width: $alert-ios-radio-icon-min-width;

min-width: $alert-ios-radio-min-width;
}

.alert-radio[aria-checked=true] {
color: $alert-ios-button-text-color;
}

.alert-radio-icon::after {
position: absolute;
top: 13px;
left: 7px;
width: 4px;
height: 10px;
border-width: 2px;
border-top-width: 0;
border-left-width: 0;
border-style: solid;
border-color: $alert-ios-button-text-color;
content: "";
transform: rotate(45deg);
}

// iOS Alert Radio Checkmark: Checked
// -----------------------------------------

.alert-radio[aria-checked=true] .alert-radio-inner {
position: absolute;
top: $alert-ios-radio-icon-top;
left: $alert-ios-radio-icon-left;

width: $alert-ios-radio-icon-width;
height: $alert-ios-radio-icon-height;

border-width: $alert-ios-radio-icon-border-width;
border-top-width: 0;
border-left-width: 0;
border-style: $alert-ios-radio-icon-border-style;
border-color: $alert-ios-radio-icon-border-color;
transform: $alert-ios-radio-icon-transform;
}


// iOS Alert Checkbox
// iOS Alert Checkbox Label
// --------------------------------------------------

.alert-checkbox-label {
overflow: hidden;

flex: 1;
order: 0;
padding: 13px;
text-align: auto;

padding: $alert-ios-checkbox-label-padding;

text-overflow: ellipsis;
white-space: nowrap;
}


// iOS Alert Checkbox Outer Circle: Unchecked
// -----------------------------------------

.alert-checkbox-icon {
position: relative;
margin: 10px 6px 10px 16px;
width: $alert-ios-checkbox-icon-size;
height: $alert-ios-checkbox-icon-size;
border-width: $alert-ios-checkbox-icon-border-width;
border-style: $alert-ios-checkbox-icon-border-style;
border-radius: $alert-ios-checkbox-icon-border-radius;
border-color: $alert-ios-checkbox-icon-border-color-off;

margin: $alert-ios-checkbox-margin;

width: $alert-ios-checkbox-size;
height: $alert-ios-checkbox-size;

border-width: $alert-ios-checkbox-border-width;
border-style: $alert-ios-checkbox-border-style;
border-radius: $alert-ios-checkbox-border-radius;
border-color: $alert-ios-checkbox-border-color-off;
background-color: $alert-ios-checkbox-background-color-off;
}


// iOS Alert Checkbox Outer Circle: Checked
// -----------------------------------------

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

.alert-checkbox-inner {
position: absolute;
top: 4px;
left: 7px;
width: 4px;
height: 9px;
border-width: $alert-ios-checkbox-icon-checkmark-width;
border-top-width: 0;
border-left-width: 0;
border-style: $alert-ios-checkbox-icon-checkmark-style;
border-color: $alert-ios-checkbox-icon-checkmark-color;
transform: rotate(45deg);
}

// iOS Alert Checkbox Inner Checkmark: Checked
// -----------------------------------------

.alert-checkbox[aria-checked=true] .alert-checkbox-inner {
position: absolute;
top: $alert-ios-checkbox-icon-top;
left: $alert-ios-checkbox-icon-left;

width: $alert-ios-checkbox-icon-width;
height: $alert-ios-checkbox-icon-height;

border-width: $alert-ios-checkbox-icon-border-width;
border-top-width: 0;
border-left-width: 0;
border-style: $alert-ios-checkbox-icon-border-style;
border-color: $alert-ios-checkbox-icon-border-color;
transform: $alert-ios-checkbox-icon-transform;
}


Expand All @@ -234,15 +298,20 @@ $alert-ios-checkbox-icon-checkmark-color: $background-ios-color !default;

.alert-button-group {
flex-wrap: $alert-ios-button-group-flex-wrap;

margin-right: -$alert-ios-button-border-width;
}

.alert-button {
overflow: hidden;

flex: $alert-ios-button-flex;

margin: $alert-ios-button-margin;

min-width: $alert-ios-button-min-width;
height: $alert-ios-button-min-height;

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;
border-radius: $alert-ios-button-border-radius;
Expand Down
Loading

0 comments on commit 131c8c3

Please sign in to comment.