Skip to content

Commit

Permalink
refactor(button): update sass variable naming for all modes
Browse files Browse the repository at this point in the history 
references #5651
references #7466
references ionic-team/ionic-site#613
  • Loading branch information
@brandyscarney
brandyscarney committed Aug 9, 2016
1 parent a535b7a commit 5a3395d
Show file tree
Hide file tree
Showing 5 changed files with 470 additions and 156 deletions.
2 changes: 1 addition & 1 deletion src/components/button/button-fab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// FABulous Buttons (Floating Action Button from material)
// --------------------------------------------------

/// @prop - Width and height of the fab button
$button-fab-size: 56px !default;


Expand All @@ -14,7 +15,6 @@ $button-fab-size: 56px !default;
min-width: 0;
height: $button-fab-size;

border-radius: 50%;
font-size: 14px;
line-height: $button-fab-size;
vertical-align: middle;
Expand Down
201 changes: 152 additions & 49 deletions src/components/button/button.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,127 @@
// iOS Button
// --------------------------------------------------

$button-ios-margin: .4rem .2rem !default;
$button-ios-padding: 0 1em !default;
$button-ios-font-size: 1.6rem !default;
$button-ios-height: 2.8em !default;
$button-ios-color: color($colors-ios, primary) !default;
$button-ios-color-activated: color-shade($button-ios-color) !default;
$button-ios-text-color: color-contrast($colors-ios, $button-ios-color) !default;
$button-ios-hover-opacity: .8 !default;
$button-ios-border-radius: 4px !default;

$button-ios-large-font-size: 2rem !default;
$button-ios-large-height: 2.8em !default;
$button-ios-large-padding: 1em !default;
$button-ios-small-font-size: 1.3rem !default;
$button-ios-small-height: 2.1em !default;
$button-ios-small-padding: .9em !default;
$button-ios-small-icon-font-size: 1.3em !default;
/// @prop - Margin of the button
$button-ios-margin: .4rem .2rem !default;

/// @prop - Padding of the button
$button-ios-padding: 0 1em !default;

/// @prop - Height of the button
$button-ios-height: 2.8em !default;

/// @prop - Border radius of the button
$button-ios-border-radius: 4px !default;

/// @prop - Font size of the button text
$button-ios-font-size: 1.6rem !default;

/// @prop - Background color of the button
$button-ios-background-color: color($colors-ios, primary) !default;

/// @prop - Text color of the button
$button-ios-text-color: color-contrast($colors-ios, $button-ios-background-color) !default;

/// @prop - Background color of the activated button
$button-ios-background-color-activated: color-shade($button-ios-background-color) !default;

/// @prop - Opacity of the activated button
$button-ios-opacity-activated: 1 !default;

/// @prop - Opacity of the button on hover
$button-ios-opacity-hover: .8 !default;


// iOS Large Button
// --------------------------------------------------

/// @prop - Padding of the large button
$button-ios-large-padding: 0 1em !default;

/// @prop - Height of the large button
$button-ios-large-height: 2.8em !default;

/// @prop - Font size of the large button
$button-ios-large-font-size: 2rem !default;


// iOS Small Button
// --------------------------------------------------

/// @prop - Padding of the small button
$button-ios-small-padding: 0 .9em !default;

/// @prop - Height of the small button
$button-ios-small-height: 2.1em !default;

/// @prop - Font size of the small button
$button-ios-small-font-size: 1.3rem !default;

/// @prop - Font size of an icon in the small button
$button-ios-small-icon-font-size: 1.3em !default;


// iOS Outline Button
// --------------------------------------------------

/// @prop - Border width of the outline button
$button-ios-outline-border-width: 1px !default;

/// @prop - Border style of the outline button
$button-ios-outline-border-style: solid !default;

/// @prop - Border radius of the outline button
$button-ios-outline-border-radius: $button-ios-border-radius !default;

/// @prop - Border color of the outline button
$button-ios-outline-border-color: $button-ios-background-color !default;

/// @prop - Text color of the outline button
$button-ios-outline-text-color: $button-ios-background-color !default;

/// @prop - Background color of the outline button
$button-ios-outline-background-color: transparent !default;

/// @prop - Text color of the activated outline button
$button-ios-outline-text-color-activated: color-contrast($colors-ios, $button-ios-background-color) !default;

/// @prop - Background color of the activated outline button
$button-ios-outline-background-color-activated: $button-ios-background-color !default;

/// @prop - Opacity of the activated outline button
$button-ios-outline-opacity-activated: 1 !default;


// iOS Clear Button
// --------------------------------------------------

/// @prop - Border color of the clear button
$button-ios-clear-border-color: transparent !default;

/// @prop - Background color of the clear button
$button-ios-clear-background-color: transparent !default;

/// @prop - Background color of the activated clear button
$button-ios-clear-background-color-activated: $button-ios-clear-background-color !default;

/// @prop - Opacity of the activated clear button
$button-ios-clear-opacity-activated: .4 !default;

/// @prop - Text color of the clear button on hover
$button-ios-clear-text-color-hover: $button-ios-background-color !default;

/// @prop - Opacity of the clear button on hover
$button-ios-clear-opacity-hover: .6 !default;


// iOS Round Button
// --------------------------------------------------

/// @prop - Padding of the round button
$button-ios-round-padding: $button-round-padding !default;

/// @prop - Border radius of the round button
$button-ios-round-border-radius: $button-round-border-radius !default;


// iOS Default Button
Expand All @@ -36,16 +140,15 @@ $button-ios-small-icon-font-size: 1.3em !default;
font-size: $button-ios-font-size;

color: $button-ios-text-color;
background-color: $button-ios-color;
background-color: $button-ios-background-color;

&:hover:not(.disable-hover) {
text-decoration: none;
opacity: $button-ios-hover-opacity;
&.activated {
background-color: $button-ios-background-color-activated;
opacity: $button-ios-opacity-activated;
}

&.activated {
background-color: $button-ios-color-activated;
opacity: 1;
&:hover:not(.disable-hover) {
opacity: $button-ios-opacity-hover;
}
}

Expand Down Expand Up @@ -75,15 +178,15 @@ $button-ios-small-icon-font-size: 1.3em !default;
// --------------------------------------------------

.button-large {
padding: 0 $button-ios-large-padding;
padding: $button-ios-large-padding;

height: $button-ios-large-height;

font-size: $button-ios-large-font-size;
}

.button-small {
padding: 0 $button-ios-small-padding;
padding: $button-ios-small-padding;

height: $button-ios-small-height;

Expand Down Expand Up @@ -118,17 +221,17 @@ $button-ios-small-icon-font-size: 1.3em !default;
// --------------------------------------------------

.button-outline {
border-width: 1px;
border-style: solid;
border-radius: 4px;
border-color: $button-ios-color;
color: $button-ios-color;
background-color: transparent;
border-width: $button-ios-outline-border-width;
border-style: $button-ios-outline-border-style;
border-radius: $button-ios-outline-border-radius;
border-color: $button-ios-outline-border-color;
color: $button-ios-outline-text-color;
background-color: $button-ios-outline-background-color;

&.activated {
color: color-contrast($colors-ios, $button-ios-color);
background-color: $button-ios-color;
opacity: 1;
color: $button-ios-outline-text-color-activated;
background-color: $button-ios-outline-background-color-activated;
opacity: $button-ios-outline-opacity-activated;
}
}

Expand All @@ -140,7 +243,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
.button-outline-#{$color-name} {
border-color: $color-base;
color: $color-base;
background-color: transparent;
background-color: $button-ios-outline-background-color;

&.activated {
color: $color-contrast;
Expand All @@ -155,18 +258,18 @@ $button-ios-small-icon-font-size: 1.3em !default;
// --------------------------------------------------

.button-clear {
border-color: transparent;
color: $button-ios-color;
background-color: transparent;
border-color: $button-ios-clear-border-color;
color: $button-ios-background-color;
background-color: $button-ios-clear-background-color;

&.activated {
background-color: transparent;
opacity: .4;
background-color: $button-ios-clear-background-color-activated;
opacity: $button-ios-clear-opacity-activated;
}

&:hover:not(.disable-hover) {
color: $button-ios-color;
opacity: .6;
color: $button-ios-clear-text-color-hover;
opacity: $button-ios-clear-opacity-hover;
}
}

Expand All @@ -178,12 +281,12 @@ $button-ios-small-icon-font-size: 1.3em !default;

.button-clear-#{$color-name} {
$fg-color: $color-base;
border-color: transparent;
border-color: $button-ios-clear-border-color;
color: $fg-color;
background-color: transparent;
background-color: $button-ios-clear-background-color;

&.activated {
opacity: .4;
opacity: $button-ios-clear-opacity-activated;
}

&:hover:not(.disable-hover) {
Expand All @@ -197,14 +300,14 @@ $button-ios-small-icon-font-size: 1.3em !default;
// --------------------------------------------------

.button-round {
padding: $button-round-padding;
padding: $button-ios-round-padding;

border-radius: $button-round-border-radius;
border-radius: $button-ios-round-border-radius;
}


// iOS does not use the button effect
ion-button-effect {
// iOS does not use the button effect
display: none;
}

Expand Down
Loading

0 comments on commit 5a3395d

Please sign in to comment.