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

refactor(sass): add Sass variables for action sheet and rename some

Browse Source 
also remove unused properties

references #5651
This commit is contained in:
Brandy Carney
2016-03-02 12:26:10 -05:00
parent 2ed20411c8
commit 50b7d7052d
4 changed files with 100 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,85 +4,91 @@
// iOS Action Sheet
// --------------------------------------------------
$action-sheet-ios-group-margin: 10px !default;
$action-sheet-ios-background-color: #f9f9f9 !default;
$action-sheet-ios-text-align: center !default;
$action-sheet-ios-padding: 0 10px !default;
$action-sheet-ios-group-margin-bottom: 10px !default;
$action-sheet-ios-background: #f9f9f9 !default;
$action-sheet-ios-border-color: #d6d6da !default;
$action-sheet-ios-border-radius: 13px !default;
$action-sheet-ios-title-padding: 1.5rem !default;
$action-sheet-ios-title-color: #8f8f8f !default;
$action-sheet-ios-title-font-size: 1.3rem !default;
$action-sheet-ios-title-font-weight: 400 !default;
$action-sheet-ios-title-border-radius: 0 !default;
$action-sheet-ios-button-height: 5.6rem !default;
$action-sheet-ios-button-min-height: 5.6rem !default;
$action-sheet-ios-button-padding: 18px !default;
$action-sheet-ios-button-text-color: #007aff !default;
$action-sheet-ios-button-font-size: 2rem !default;
$action-sheet-ios-button-border-width: 1px !default;
$action-sheet-ios-button-border-style: solid !default;
$action-sheet-ios-button-border-color: #d1d3d6 !default;
$action-sheet-ios-button-background-active-color: #ebebeb !default;
$action-sheet-ios-button-background: transparent !default;
$action-sheet-ios-button-background-activated: #ebebeb !default;
$action-sheet-ios-destructive-button-text-color: #f53d3d !default;
$action-sheet-ios-cancel-button-background-color: #fff !default;
$action-sheet-ios-button-destructive-text-color: #f53d3d !default;
$action-sheet-ios-button-cancel-background: #fff !default;
$action-sheet-ios-button-cancel-font-weight: 600 !default;
ion-action-sheet {
text-align: center;
text-align: $action-sheet-ios-text-align;
}
.action-sheet-container {
padding: 0 $action-sheet-ios-group-margin;
padding: $action-sheet-ios-padding;
}
.action-sheet-group {
overflow: hidden;
margin-bottom: $action-sheet-ios-group-margin - 2;
margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
border-radius: $action-sheet-ios-border-radius;
background: $action-sheet-ios-background-color;
background: $action-sheet-ios-background;
&:last-child {
margin-bottom: $action-sheet-ios-group-margin;
margin-bottom: $action-sheet-ios-group-margin-bottom;
}
}
.action-sheet-title {
padding: 1.5rem;
padding: $action-sheet-ios-title-padding;
font-size: $action-sheet-ios-title-font-size;
font-weight: 400;
color: $action-sheet-ios-title-color;
border-radius: 0;
text-align: center;
}
.action-sheet-title {
border-bottom: 1px solid $action-sheet-ios-border-color;
font-weight: $action-sheet-ios-title-font-weight;
border-radius: $action-sheet-ios-title-border-radius;
text-align: $action-sheet-ios-text-align;
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $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;
min-height: $action-sheet-ios-button-min-height;
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
font-size: $action-sheet-ios-button-font-size;
color: $action-sheet-ios-button-text-color;
background: transparent;
background: $action-sheet-ios-button-background;
&:last-child {
border-bottom: 0;
}
&.activated {
margin-top:-1px;
background: $action-sheet-ios-button-background-active-color;
border-bottom-color: $action-sheet-ios-button-background-active-color;
border-top:1px solid $action-sheet-ios-button-background-active-color;
margin-top: -$action-sheet-ios-button-border-width;
background: $action-sheet-ios-button-background-activated;
border-bottom-color: $action-sheet-ios-button-background-activated;
border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
}
}
.action-sheet-destructive {
color: $action-sheet-ios-destructive-button-text-color;
color: $action-sheet-ios-button-destructive-text-color;
}
.action-sheet-cancel {
font-weight: 600;
background: $action-sheet-ios-cancel-button-background-color;
font-weight: $action-sheet-ios-button-cancel-font-weight;
background: $action-sheet-ios-button-cancel-background;
}
&.hairlines {

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

@ -4,19 +4,25 @@
// Material Design Action Sheet
// --------------------------------------------------
$action-sheet-md-background-color: #fafafa !default;
$action-sheet-md-text-align: left !default;
$action-sheet-md-background: #fafafa !default;
$action-sheet-md-group-margin-bottom: 8px !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-button-height: 4.8rem !default;
$action-sheet-md-button-min-height: 4.8rem !default;
$action-sheet-md-button-text-color: #222 !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-background: transparent !default;
$action-sheet-md-button-background-activated: #f1f1f1 !default;
$action-sheet-md-icon-font-size: 2.4rem !default;
$action-sheet-md-icon-min-width: 24px !default;
$action-sheet-md-icon-text-align: center !default;
$action-sheet-md-icon-vertical-align: middle !default;
$action-sheet-md-icon-margin: 0 28px 0 0 !default;
@ -24,48 +30,35 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
padding: $action-sheet-md-title-padding;
font-size: $action-sheet-md-title-font-size;
color: $action-sheet-md-title-color;
text-align: left;
text-align: $action-sheet-md-text-align;
}
.action-sheet-button {
position: relative;
overflow: hidden;
padding: $action-sheet-md-button-padding;
min-height: $action-sheet-md-button-height;
min-height: $action-sheet-md-button-min-height;
font-size: $action-sheet-md-button-font-size;
font-weight: normal;
color: $action-sheet-md-button-text-color;
background-color: transparent;
text-align: left;
background: $action-sheet-md-button-background;
text-align: $action-sheet-md-text-align;
&.activated {
background: $action-sheet-md-button-background-active-color;
border-radius: 0;
box-shadow: none;
background: $action-sheet-md-button-background-activated;
}
}
.action-sheet-icon {
display: inline-block;
margin: $action-sheet-md-icon-margin;
min-width: 24px;
text-align: center;
vertical-align: middle;
min-width: $action-sheet-md-icon-min-width;
text-align: $action-sheet-md-icon-text-align;
vertical-align: $action-sheet-md-icon-vertical-align;
font-size: $action-sheet-md-icon-font-size;
}
.action-sheet-group {
overflow: hidden;
margin: 0;
border-radius: 0;
background-color: $action-sheet-md-background-color;
background: $action-sheet-md-background;
&:last-child .action-sheet-button {
margin-bottom: 8px;
margin-bottom: $action-sheet-md-group-margin-bottom;
}
}
.action-sheet-cancel {
background-color: $action-sheet-md-background-color;
border: none;
}

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

@ -4,45 +4,33 @@
// --------------------------------------------------
$action-sheet-width: 100% !default;
$action-sheet-max-width: 520px !default;
$action-sheet-max-width: 500px !default;
ion-action-sheet {
position: absolute;
width: $action-sheet-width;
height: $action-sheet-width;
z-index: $z-index-overlay;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: $z-index-overlay;
}
.action-sheet-wrapper {
position: absolute;
width: $action-sheet-width;
max-width: $action-sheet-max-width;
z-index: $z-index-overlay-wrapper;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: block;
max-width: 500px;
margin: auto;
transform: translate3d(0, 100%, 0);
}
.action-sheet-container {
width: auto;
overflow: hidden;
}
.action-sheet-button {
display: block;
width: 100%;
margin: 0;
border-radius: 0;
&.activated {
box-shadow: none;
}
width: $action-sheet-width;
}

34
ionic/components/action-sheet/test/basic/index.ts
View File

@ -1,4 +1,4 @@
import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ionic-angular';
import {App, Page, ActionSheet, Modal, NavController, ViewController, Platform} from 'ionic-angular';
@Page({
@ -7,31 +7,34 @@ import {App, Page, ActionSheet, Modal, NavController, ViewController} from 'ioni
class E2EPage {
result: string = '';
constructor(private nav: NavController) {}
constructor(private nav: NavController, private platform: Platform) {}
presentActionSheet1() {
this.result = '';
let actionSheet = ActionSheet.create({
title: 'Modify your album',
title: 'Albums',
buttons: [
{
text: 'Destructive',
text: 'Delete',
role: 'destructive',
icon: this.platform.is('android') ? 'trash' : null,
handler: () => {
console.log('Destructive clicked');
this.result = 'Destructive';
console.log('Delete clicked');
this.result = 'Deleted';
}
},
{
text: 'Archive',
text: 'Share',
icon: this.platform.is('android') ? 'share' : null,
handler: () => {
console.log('Archive clicked');
this.result = 'Archived';
console.log('Share clicked');
this.result = 'Shared';
}
},
{
text: 'Open Modal',
text: 'Play',
icon: this.platform.is('android') ? 'arrow-dropright-circle' : null,
handler: () => {
let modal = Modal.create(ModalPage);
this.nav.present(modal);
@ -40,9 +43,18 @@ class E2EPage {
return false;
}
},
{
text: 'Favorite',
icon: this.platform.is('android') ? 'heart' : null,
handler: () => {
console.log('Favorite clicked');
this.result = 'Favorited';
}
},
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
icon: this.platform.is('android') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
this.result = 'Canceled';
@ -94,7 +106,7 @@ class E2EPage {
@Page({
template: `
<ion-toolbar>
<ion-buttons>
<ion-buttons start>
<button (click)="dismiss()">Close</button>
</ion-buttons>
<ion-title>Modal</ion-title>