javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(actionsheet): improve styles/layout

Browse Source
This commit is contained in:
Adam Bradley
2014-12-31 13:38:17 -06:00
parent 5de1c1266d
commit 61a8353c76
3 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/angular/directive/actionSheet.js vendored
View File

@@ -33,14 +33,12 @@ IonicModule
template: '<div class="action-sheet-backdrop">' +
'<div class="action-sheet-wrapper">' +
'<div class="action-sheet">' +
'<div class="action-sheet-group">' +
'<div class="action-sheet-group action-sheet-options">' +
'<div class="action-sheet-title" ng-if="titleText" ng-bind-html="titleText"></div>' +
'<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-bind-html="button.text"></button>' +
'<button class="button action-sheet-option" ng-click="buttonClicked($index)" ng-repeat="button in buttons" ng-bind-html="button.text"></button>' +
'<button class="button destructive action-sheet-destructive" ng-if="destructiveText" ng-click="destructiveButtonClicked()" ng-bind-html="destructiveText"></button>' +
'</div>' +
'<div class="action-sheet-group" ng-if="destructiveText">' +
'<button class="button destructive" ng-click="destructiveButtonClicked()" ng-bind-html="destructiveText"></button>' +
'</div>' +
'<div class="action-sheet-group" ng-if="cancelText">' +
'<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">' +
'<button class="button" ng-click="cancel()" ng-bind-html="cancelText"></button>' +
'</div>' +
'</div>' +

45
scss/_action-sheet.scss
View File

@@ -14,7 +14,7 @@
background-color: rgba(0,0,0,0);
&.active {
background-color: rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.4);
}
}
@@ -31,8 +31,8 @@
}
.action-sheet {
margin-left: 15px;
margin-right: 15px;
margin-left: $sheet-margin;
margin-right: $sheet-margin;
width: auto;
z-index: $z-index-action-sheet;
overflow: hidden;
@@ -42,43 +42,62 @@
padding: 1px;
width: 100%;
border-radius: 0;
border-color: $sheet-options-borer-color;
background-color: transparent;
color: $positive;
color: $sheet-options-text-color;
font-size: 18px;
&:hover {
color: $sheet-options-text-color;
}
&.destructive {
color: $assertive;
&:hover {
color: $assertive;
}
}
}
.button.active, .button.activated {
box-shadow: none;
border-color: $sheet-options-borer-color;
color: $sheet-options-text-color;
background: $sheet-options-bg-active-color;
}
}
.action-sheet-title {
padding: 10px;
padding: $sheet-margin;
color: lighten($base-color, 40%);
text-align: center;
font-size: 12px;
}
.action-sheet-group {
margin-bottom: 5px;
margin-bottom: $sheet-margin;
border-radius: $sheet-border-radius;
background-color: #fff;
overflow: hidden;
.button {
border-width: 1px 0px 0px 0px;
border-radius: 0;
&.active {
background-color: transparent;
color: inherit;
}
}
.button:first-child:last-child {
border-width: 0;
}
}
.action-sheet-options {
background: $sheet-options-bg-color;
}
.action-sheet-cancel {
.button {
font-weight: 500;
}
}
.action-sheet-open {
pointer-events: none;

11
scss/_variables.scss
View File

@@ -603,12 +603,13 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab
// Action Sheets
// -------------------------------
$sheet-bg-color: rgba(255, 255, 255, 0.6) !default;
$sheet-opacity: 0.95 !default;
$sheet-margin: 8px !default;
$sheet-border-radius: 4px !default;
$sheet-border-radius: 3px 3px 3px 3px !default;
$sheet-border-radius-top: 3px 3px 0px 0px !default;
$sheet-border-radius-bottom: 0px 0px 3px 3px !default;
$sheet-options-bg-color: #f6f7f8 !default;
$sheet-options-bg-active-color: #ecedee !default;
$sheet-options-text-color: $positive !default;
$sheet-options-borer-color: #d1d3d6 !default;
// Popups