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

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

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

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

@ -4,68 +4,61 @@
// Material Design Action Sheet // 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-color: #757575 !default;
$action-sheet-md-title-font-size: 1.6rem !default; $action-sheet-md-title-font-size: 1.6rem !default;
$action-sheet-md-title-padding: 19px 16px 17px !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-text-color: #222 !default;
$action-sheet-md-button-font-size: 1.6rem !default; $action-sheet-md-button-font-size: 1.6rem !default;
$action-sheet-md-button-padding: 0 16px !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-font-size: 2.4rem !default;
$action-sheet-md-icon-margin: 0 28px 0 0 !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;
.action-sheet-title { .action-sheet-title {
padding: $action-sheet-md-title-padding; padding: $action-sheet-md-title-padding;
font-size: $action-sheet-md-title-font-size; font-size: $action-sheet-md-title-font-size;
color: $action-sheet-md-title-color; color: $action-sheet-md-title-color;
text-align: left; text-align: $action-sheet-md-text-align;
} }
.action-sheet-button { .action-sheet-button {
position: relative;
overflow: hidden;
padding: $action-sheet-md-button-padding; 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-size: $action-sheet-md-button-font-size;
font-weight: normal;
color: $action-sheet-md-button-text-color; color: $action-sheet-md-button-text-color;
background-color: transparent; background: $action-sheet-md-button-background;
text-align: left; text-align: $action-sheet-md-text-align;
&.activated { &.activated {
background: $action-sheet-md-button-background-active-color; background: $action-sheet-md-button-background-activated;
border-radius: 0;
box-shadow: none;
} }
} }
.action-sheet-icon { .action-sheet-icon {
display: inline-block;
margin: $action-sheet-md-icon-margin; margin: $action-sheet-md-icon-margin;
min-width: 24px; min-width: $action-sheet-md-icon-min-width;
text-align: center; text-align: $action-sheet-md-icon-text-align;
vertical-align: middle; vertical-align: $action-sheet-md-icon-vertical-align;
font-size: $action-sheet-md-icon-font-size; font-size: $action-sheet-md-icon-font-size;
} }
.action-sheet-group { .action-sheet-group {
overflow: hidden; overflow: hidden;
margin: 0; background: $action-sheet-md-background;
border-radius: 0;
background-color: $action-sheet-md-background-color;
&:last-child .action-sheet-button { &: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-width: 100% !default;
$action-sheet-max-width: 520px !default; $action-sheet-max-width: 500px !default;
ion-action-sheet { ion-action-sheet {
position: absolute; position: absolute;
width: $action-sheet-width;
height: $action-sheet-width;
z-index: $z-index-overlay;
top: 0; top: 0;
left: 0; left: 0;
width: 100%;
height: 100%;
display: block; display: block;
z-index: $z-index-overlay;
} }
.action-sheet-wrapper { .action-sheet-wrapper {
position: absolute; position: absolute;
width: $action-sheet-width;
max-width: $action-sheet-max-width;
z-index: $z-index-overlay-wrapper; z-index: $z-index-overlay-wrapper;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
width: 100%;
display: block; display: block;
max-width: 500px;
margin: auto; margin: auto;
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
.action-sheet-container {
width: auto;
overflow: hidden;
}
.action-sheet-button { .action-sheet-button {
display: block; width: $action-sheet-width;
width: 100%;
margin: 0;
border-radius: 0;
&.activated {
box-shadow: none;
}
} }

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