diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss index c73f8fb5af..1de53d58ac 100644 --- a/ionic/components/action-sheet/action-sheet.scss +++ b/ionic/components/action-sheet/action-sheet.scss @@ -41,25 +41,20 @@ ion-action-sheet { .action-sheet-container { width: auto; overflow: hidden; +} - button { - display: block; - padding: 1px; - width: 100%; - margin: 0; - border-radius: 0; - border-color: $action-sheet-options-border-color; - background-color: transparent; +.action-sheet-button { + display: block; + width: 100%; + margin: 0; + border-radius: 0; + border-color: $action-sheet-options-border-color; +} - color: $action-sheet-options-text-color; - font-size: 21px; - } - - button.activated { - box-shadow: none; - border-color: $action-sheet-options-border-color; - background: $action-sheet-options-background-active-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 { @@ -73,11 +68,7 @@ ion-action-sheet { background-color: #fff; overflow: hidden; - button { - border-width: 1px 0px 0px 0px; - } - - button:first-child:last-child { + .action-sheet-button:first-child:last-child { border-width: 0; } } diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 44b80682ea..068154b190 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -22,17 +22,17 @@ import {extend} from '../../util/util'; '
' + '
' + '
{{d.titleText}}
' + - '' + - '' + '
' + - '
' + - '' + diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss index 352a889ff4..3bca8bafc5 100644 --- a/ionic/components/action-sheet/modes/ios.scss +++ b/ionic/components/action-sheet/modes/ios.scss @@ -26,29 +26,8 @@ ion-action-sheet { text-align: center; } -ion-action-sheet button { - min-height: $action-sheet-ios-height; - padding: $action-sheet-ios-padding; - - margin: 0; - border: 0; - - background: transparent; - - &.activated { - background: $action-sheet-ios-background-active-color; - } -} - .action-sheet-container { padding: 0 $action-sheet-ios-group-margin; - - button.activated { - box-shadow: none; - border-color: $action-sheet-options-border-color; - color: $action-sheet-options-text-color; - background: $action-sheet-options-background-active-color; - } } .action-sheet-group { @@ -70,8 +49,22 @@ ion-action-sheet button { border-bottom: 1px solid $action-sheet-ios-border-color; } -.action-sheet-cancel button { - font-weight: bold; +.action-sheet-button { + color: $action-sheet-ios-button-text-color; + min-height: $action-sheet-ios-height; + padding: $action-sheet-ios-padding; + font-size: 21px; + margin: 0; + + background: transparent; + + &.activated { + background: $action-sheet-ios-background-active-color; + box-shadow: none; + border-color: $action-sheet-options-border-color; + color: $action-sheet-options-text-color; + background: $action-sheet-options-background-active-color; + } } .action-sheet-title { @@ -84,8 +77,6 @@ ion-action-sheet button { .action-sheet-option { font-size: $action-sheet-ios-button-font-size; - color: $action-sheet-ios-button-text-color; - border-radius: 0; } .action-sheet-title:first-child, @@ -110,6 +101,10 @@ ion-action-sheet button { } } -.action-sheet-destructive{ +.action-sheet-destructive { color: $action-sheet-ios-destructive-button-text-color; } + +.action-sheet-cancel { + font-weight: bold; +} diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss index 1680d4afc9..1f26ce8509 100644 --- a/ionic/components/action-sheet/modes/md.scss +++ b/ionic/components/action-sheet/modes/md.scss @@ -21,40 +21,18 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; ion-action-sheet { margin: 0; + + icon { + display: inline-block; + margin: $action-sheet-md-icon-margin; + min-width: 24px; + text-align: center; + vertical-align: middle; + font-size: $action-sheet-md-icon-font-size; + } } -.action-sheet-container { - margin: 0; -} - -.action-sheet-title, -.action-sheet-option, -.action-sheet-destructive, -.action-sheet-cancel 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; -} - -ion-action-sheet icon { - display: inline-block; - margin: $action-sheet-md-icon-margin; - min-width: 24px; - text-align: center; - vertical-align: middle; - font-size: $action-sheet-md-icon-font-size; -} - -.action-sheet-title { - padding: $action-sheet-md-title-padding; - font-size: $action-sheet-md-title-font-size; - color: $action-sheet-md-title-color; -} - -ion-action-sheet button { +.action-sheet-button { font-weight: normal; min-height: $action-sheet-md-height; @@ -65,16 +43,38 @@ ion-action-sheet button { } } +.action-sheet-container { + margin: 0; +} + .action-sheet-group { margin: 0; border-radius: 0; background-color: $action-sheet-md-background-color; - &:last-child button { + &:last-child .action-sheet-button { margin-bottom: 8px; } } +.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;