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

refactor(actionSheet): cleanup css, reduce classes

Browse Source
This commit is contained in:
Adam Bradley
2016-01-04 13:11:46 -06:00
parent 3315303b3e
commit aada9cc7c4
4 changed files with 37 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ionic/components/action-sheet/action-sheet.ios.scss
View File

@ -7,17 +7,18 @@
$action-sheet-ios-group-margin: 10px !default; $action-sheet-ios-group-margin: 10px !default;
$action-sheet-ios-background-color: rgba(243,243,243,.95) !default; $action-sheet-ios-background-color: rgba(243,243,243,.95) !default;
$action-sheet-ios-height: 5.6rem !default;
$action-sheet-ios-padding: 18px !default;
$action-sheet-ios-border-color: #d6d6da !default; $action-sheet-ios-border-color: #d6d6da !default;
$action-sheet-ios-border-radius: 13px !default; $action-sheet-ios-border-radius: 13px !default;
$action-sheet-ios-title-color: #5f5f5f !default; $action-sheet-ios-title-color: #5f5f5f !default;
$action-sheet-ios-title-font-size: 1.2rem !default; $action-sheet-ios-title-font-size: 1.2rem !default;
$action-sheet-ios-button-height: 5.6rem !default;
$action-sheet-ios-button-padding: 18px !default;
$action-sheet-ios-button-text-color: #007aff !default; $action-sheet-ios-button-text-color: #007aff !default;
$action-sheet-ios-button-font-size: 2rem !default; $action-sheet-ios-button-font-size: 2rem !default;
$action-sheet-ios-background-active-color: #e9e9e9 !default; $action-sheet-ios-button-border-color: #d1d3d6 !default;
$action-sheet-ios-button-background-active-color: #e9e9e9 !default;
$action-sheet-ios-destructive-button-text-color: #f53d3d !default; $action-sheet-ios-destructive-button-text-color: #f53d3d !default;
@ -31,8 +32,10 @@ ion-action-sheet {
} }
.action-sheet-group { .action-sheet-group {
overflow: hidden;
margin-bottom: $action-sheet-ios-group-margin - 2; margin-bottom: $action-sheet-ios-group-margin - 2;
border-radius: $action-sheet-ios-border-radius; border-radius: $action-sheet-ios-border-radius;
background: $action-sheet-ios-background-color;
&:last-child { &:last-child {
margin-bottom: $action-sheet-ios-group-margin; margin-bottom: $action-sheet-ios-group-margin;
@ -48,29 +51,24 @@ ion-action-sheet {
text-align: center; text-align: center;
} }
.action-sheet-title, .action-sheet-title {
.action-sheet-option {
border-bottom: 1px solid $action-sheet-ios-border-color; border-bottom: 1px solid $action-sheet-ios-border-color;
}
.action-sheet-button {
padding: $action-sheet-ios-button-padding;
min-height: $action-sheet-ios-button-height;
border-bottom: 1px solid $action-sheet-ios-border-color;
font-size: $action-sheet-ios-button-font-size;
color: $action-sheet-ios-button-text-color;
background: transparent;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
}
.action-sheet-button {
color: $action-sheet-ios-button-text-color;
min-height: $action-sheet-ios-height;
padding: $action-sheet-ios-padding;
font-size: $action-sheet-ios-button-font-size;
background: transparent;
&.activated { &.activated {
background: $action-sheet-ios-background-active-color; background: $action-sheet-ios-button-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;
} }
} }
@ -84,7 +82,7 @@ ion-action-sheet {
&.hairlines { &.hairlines {
.action-sheet-title, .action-sheet-title,
.action-sheet-option { .action-sheet-button {
border-bottom-width: 0.55px; border-bottom-width: 0.55px;
} }
} }

29
ionic/components/action-sheet/action-sheet.md.scss
View File

@ -4,21 +4,20 @@
// Material Design Action Sheet // Material Design Action Sheet
// -------------------------------------------------- // --------------------------------------------------
$action-sheet-md-background-color: #fafafa !default; $action-sheet-md-background-color: #fafafa !default;
$action-sheet-md-height: 4.8rem !default; $action-sheet-md-title-color: #757575 !default;
$action-sheet-md-title-font-size: 1.6rem !default;
$action-sheet-md-title-padding: 19px 16px 17px !default;
$action-sheet-md-title-color: #757575 !default; $action-sheet-md-button-height: 4.8rem !default;
$action-sheet-md-title-font-size: 1.6rem !default; $action-sheet-md-button-text-color: #222 !default;
$action-sheet-md-title-padding: 19px 16px 17px !default; $action-sheet-md-button-font-size: 1.6rem !default;
$action-sheet-md-button-padding: 0 16px !default;
$action-sheet-md-button-background-active-color: #f1f1f1 !default;
$action-sheet-md-button-text-color: #222 !default; $action-sheet-md-icon-font-size: 2.4rem !default;
$action-sheet-md-button-font-size: 1.6rem !default; $action-sheet-md-icon-margin: 0 28px 0 0 !default;
$action-sheet-md-button-padding: 0 16px !default;
$action-sheet-md-background-active-color: #f1f1f1 !default;
$action-sheet-md-icon-font-size: 2.4rem !default;
$action-sheet-md-icon-margin: 0 28px 0 0 !default;
.action-sheet-title { .action-sheet-title {
@ -32,7 +31,7 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: $action-sheet-md-button-padding; padding: $action-sheet-md-button-padding;
min-height: $action-sheet-md-height; min-height: $action-sheet-md-button-height;
font-size: $action-sheet-md-button-font-size; font-size: $action-sheet-md-button-font-size;
font-weight: normal; font-weight: normal;
color: $action-sheet-md-button-text-color; color: $action-sheet-md-button-text-color;
@ -40,7 +39,7 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
text-align: left; text-align: left;
&.activated { &.activated {
background: $action-sheet-md-background-active-color; background: $action-sheet-md-button-background-active-color;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
} }
@ -56,6 +55,7 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
} }
.action-sheet-group { .action-sheet-group {
overflow: hidden;
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
background-color: $action-sheet-md-background-color; background-color: $action-sheet-md-background-color;
@ -67,6 +67,5 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
.action-sheet-cancel { .action-sheet-cancel {
background-color: $action-sheet-md-background-color; background-color: $action-sheet-md-background-color;
width: auto;
border: none; border: none;
} }

19
ionic/components/action-sheet/action-sheet.scss
View File

@ -5,13 +5,6 @@
$action-sheet-width: 100% !default; $action-sheet-width: 100% !default;
$action-sheet-max-width: 520px !default; $action-sheet-max-width: 520px !default;
$action-sheet-background-color: rgba(243,243,243,.95) !default;
$action-sheet-button-text-color: #007aff !default;
$action-sheet-options-background-color: #f1f2f3 !default;
$action-sheet-options-background-active-color: #e4e5e7 !default;
$action-sheet-options-text-color: #007aff !default;
$action-sheet-options-border-color: #d1d3d6 !default;
ion-action-sheet { ion-action-sheet {
@ -48,20 +41,8 @@ ion-action-sheet {
width: 100%; width: 100%;
margin: 0; margin: 0;
border-radius: 0; border-radius: 0;
border-color: $action-sheet-options-border-color;
&.activated { &.activated {
box-shadow: none; 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-options {
background: $action-sheet-options-background-color;
}

7
ionic/components/action-sheet/action-sheet.ts
View File

@ -130,10 +130,10 @@ import {Animation} from '../../animations/animation';
'<div (click)="dismiss()" tappable disable-activated class="backdrop" role="presentation"></div>' + '<div (click)="dismiss()" tappable disable-activated class="backdrop" role="presentation"></div>' +
'<div class="action-sheet-wrapper">' + '<div class="action-sheet-wrapper">' +
'<div class="action-sheet-container">' + '<div class="action-sheet-container">' +
'<div class="action-sheet-group action-sheet-options">' + '<div class="action-sheet-group">' +
'<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' + '<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' + '<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button action-sheet-option disable-hover" [ngClass]="b.cssClass">' + '<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
'<icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></icon> ' + '<icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></icon> ' +
'{{b.text}}' + '{{b.text}}' +
'</button>' + '</button>' +
@ -195,6 +195,9 @@ class ActionSheetCmp {
if (typeof button === 'string') { if (typeof button === 'string') {
button = { text: button }; button = { text: button };
} }
if (!button.cssClass) {
button.cssClass = '';
}
if (button.style === 'cancel') { if (button.style === 'cancel') {
this.d.cancelButton = button; this.d.cancelButton = button;