diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss index 1de53d58ac..ad7ae28ce7 100644 --- a/ionic/components/action-sheet/action-sheet.scss +++ b/ionic/components/action-sheet/action-sheet.scss @@ -49,28 +49,17 @@ ion-action-sheet { margin: 0; border-radius: 0; border-color: $action-sheet-options-border-color; -} -.action-sheet-button.activated { - box-shadow: none; - border-color: $action-sheet-options-border-color; - background: $action-sheet-options-background-active-color; -} - -.action-sheet-title { - padding: 10px; - color: #8f8f8f; - text-align: center; - font-size: 13px; + &.activated { + box-shadow: none; + border-color: $action-sheet-options-border-color; + background: $action-sheet-options-background-active-color; + } } .action-sheet-group { background-color: #fff; overflow: hidden; - - .action-sheet-button:first-child:last-child { - border-width: 0; - } } .action-sheet-options { diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss index 3bca8bafc5..d809680ee2 100644 --- a/ionic/components/action-sheet/modes/ios.scss +++ b/ionic/components/action-sheet/modes/ios.scss @@ -15,11 +15,11 @@ $action-sheet-ios-title-color: #5f5f5f !default; $action-sheet-ios-title-font-size: 1.2rem !default; $action-sheet-ios-button-text-color: #007aff !default; -$action-sheet-ios-button-font-size: 2rem !default; +$action-sheet-ios-option-font-size: 2rem !default; +$action-sheet-ios-button-font-size: 21px !default; $action-sheet-ios-background-active-color: #e9e9e9 !default; $action-sheet-ios-destructive-button-text-color: #f53d3d !default; -$action-sheet-ios-icon-font-size: 1.4em !default; ion-action-sheet { @@ -33,19 +33,23 @@ ion-action-sheet { .action-sheet-group { margin-bottom: $action-sheet-ios-group-margin - 2; border-radius: $action-sheet-ios-border-radius; + + &:last-child { + margin-bottom: $action-sheet-ios-group-margin; + } } -.action-sheet-group:last-child { - margin-bottom: $action-sheet-ios-group-margin; +.action-sheet-title { + padding: 2rem; + font-size: $action-sheet-ios-title-font-size; + font-weight: 500; + color: $action-sheet-ios-title-color; + border-radius: 0; + text-align: center; } .action-sheet-title, .action-sheet-option { - min-height: $action-sheet-ios-height; - - background: $action-sheet-ios-background-color; - font-weight: 400; - border-bottom: 1px solid $action-sheet-ios-border-color; } @@ -53,8 +57,7 @@ ion-action-sheet { color: $action-sheet-ios-button-text-color; min-height: $action-sheet-ios-height; padding: $action-sheet-ios-padding; - font-size: 21px; - margin: 0; + font-size: $action-sheet-ios-button-font-size; background: transparent; @@ -67,44 +70,21 @@ ion-action-sheet { } } -.action-sheet-title { - padding: 2rem; - font-size: $action-sheet-ios-title-font-size; - font-weight: 500; - color: $action-sheet-ios-title-color; - border-radius: 0; -} - .action-sheet-option { - font-size: $action-sheet-ios-button-font-size; -} - -.action-sheet-title:first-child, -.action-sheet-button:first-child, -.action-sheet-group button:first-child { - border-top-left-radius: $action-sheet-ios-border-radius; - border-top-right-radius: $action-sheet-ios-border-radius; -} - -.action-sheet-title:last-child, -.action-sheet-button:last-child, -.action-sheet-group button:last-child { - border-bottom-left-radius: $action-sheet-ios-border-radius; - border-bottom-right-radius: $action-sheet-ios-border-radius; -} - - -&.hairlines .action-sheet { - .action-sheet-title, - .action-sheet-option { - border-bottom-width: 0.55px; - } + font-size: $action-sheet-ios-option-font-size; } .action-sheet-destructive { color: $action-sheet-ios-destructive-button-text-color; } -.action-sheet-cancel { +.action-sheet-cancel { font-weight: bold; } + +&.hairlines { + .action-sheet-title, + .action-sheet-option { + border-bottom-width: 0.55px; + } +} diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss index 1f26ce8509..923efbc38f 100644 --- a/ionic/components/action-sheet/modes/md.scss +++ b/ionic/components/action-sheet/modes/md.scss @@ -20,7 +20,6 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; ion-action-sheet { - margin: 0; icon { display: inline-block; @@ -32,9 +31,19 @@ ion-action-sheet { } } +.action-sheet-title { + padding: $action-sheet-md-title-padding; + font-size: $action-sheet-md-title-font-size; + color: $action-sheet-md-title-color; + text-align: left; +} + .action-sheet-button { + background-color: transparent; font-weight: normal; min-height: $action-sheet-md-height; + color: $action-sheet-md-button-text-color; + text-align: left; &.activated { background: $action-sheet-md-background-active-color; @@ -43,10 +52,6 @@ ion-action-sheet { } } -.action-sheet-container { - margin: 0; -} - .action-sheet-group { margin: 0; border-radius: 0; @@ -57,24 +62,6 @@ ion-action-sheet { } } -.action-sheet-title { - padding: $action-sheet-md-title-padding; - font-size: $action-sheet-md-title-font-size; - color: $action-sheet-md-title-color; -} - -.action-sheet-title, -.action-sheet-option, -.action-sheet-destructive, -.action-sheet-cancel .action-sheet-button { - text-align: left; - border-color: transparent; - font-size: $action-sheet-md-button-font-size; - color: $action-sheet-md-button-text-color; - box-shadow: none; - text-transform: none; -} - .action-sheet-cancel { background-color: $action-sheet-md-background-color; width: auto;