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

refactor(action-sheet): removed unused styles, fixed hairlines

Browse Source 
references #689
This commit is contained in:
Brandy Carney
2015-12-04 11:46:07 -05:00
parent 1871b46f8d
commit a965277ef3
3 changed files with 38 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,28 +49,17 @@ ion-action-sheet {
margin: 0;
border-radius: 0;
border-color: $action-sheet-options-border-color;
}
.action-sheet-button.activated {
&.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;
}
}
.action-sheet-group {
background-color: #fff;
overflow: hidden;
.action-sheet-button:first-child:last-child {
border-width: 0;
}
}
.action-sheet-options {

64
ionic/components/action-sheet/modes/ios.scss
View File

@ -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,38 +70,8 @@ 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 {
@ -108,3 +81,10 @@ ion-action-sheet {
.action-sheet-cancel {
font-weight: bold;
}
&.hairlines {
.action-sheet-title,
.action-sheet-option {
border-bottom-width: 0.55px;
}
}

33
ionic/components/action-sheet/modes/md.scss
View File

@ -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;