Skip to content

Commit

Permalink
refactor(sass): add Sass variables for action sheet and rename some
Browse files Browse the repository at this point in the history 
also remove unused properties

references #5651
  • Loading branch information
@brandyscarney
brandyscarney committed Mar 3, 2016
1 parent 2ed2041 commit 50b7d70
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 105 deletions.
88 changes: 47 additions & 41 deletions ionic/components/action-sheet/action-sheet.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,85 +4,91 @@
// iOS Action Sheet
// --------------------------------------------------

$action-sheet-ios-group-margin: 10px !default;
$action-sheet-ios-background-color: #f9f9f9 !default;

$action-sheet-ios-border-color: #d6d6da !default;
$action-sheet-ios-border-radius: 13px !default;

$action-sheet-ios-title-color: #8f8f8f !default;
$action-sheet-ios-title-font-size: 1.3rem !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-font-size: 2rem !default;
$action-sheet-ios-button-border-color: #d1d3d6 !default;
$action-sheet-ios-button-background-active-color: #ebebeb !default;

$action-sheet-ios-destructive-button-text-color: #f53d3d !default;
$action-sheet-ios-cancel-button-background-color: #fff !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-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: transparent !default;
$action-sheet-ios-button-background-activated: #ebebeb !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 {
Expand Down
61 changes: 27 additions & 34 deletions ionic/components/action-sheet/action-sheet.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,68 +4,61 @@
// 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-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-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-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: transparent !default;
$action-sheet-md-button-background-activated: #f1f1f1 !default;

$action-sheet-md-icon-font-size: 2.4rem !default;
$action-sheet-md-icon-margin: 0 28px 0 0 !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;


.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;
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 changes: 7 additions & 19 deletions ionic/components/action-sheet/action-sheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 23 additions & 11 deletions ionic/components/action-sheet/test/basic/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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);
Expand All @@ -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';
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 50b7d70

Please sign in to comment.