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

fix color inheritance, core components should not contain colors

Browse Source
This commit is contained in:
Adam Bradley
2015-12-04 23:23:55 -06:00
parent 78a3ce12b1
commit d8f235d09d
38 changed files with 313 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/button/button-clear.scss
View File

@@ -6,15 +6,10 @@
.button-clear {
border-color: transparent;
background: transparent;
color: color-shade($button-color);
&.activated {
opacity: 0.4;
background: transparent;
}
&:hover:not(.disable-hover) {
opacity: 0.6;
color: color-shade($button-color);
}
}

16
ionic/components/button/button-outline.scss
View File

@@ -1,16 +0,0 @@
@import "../../globals.core";
// Outline Button
// --------------------------------------------------
.button-outline {
border: 1px solid $button-color;
background: transparent;
color: $button-color;
&.activated {
opacity: 1;
color: $background-color;
background-color: $button-color;
}
}

46
ionic/components/button/button.scss
View File

@@ -1,5 +1,8 @@
@import "../../globals.core";
// Buttons
// --------------------------------------------------
$button-font-size: 1.6rem !default;
$button-margin: 0.4rem 0.2rem !default;
$button-padding: 0 1em !default;
@@ -9,10 +12,6 @@ $button-border-radius: 4px !default;
$button-round-padding: 0 2.6rem !default;
$button-round-border-radius: 64px !default;
$button-color: map-get($colors, primary) !default;
$button-color-activated: color-shade($button-color) !default;
$button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default;
.button-disabled {
opacity: 0.4;
@@ -59,17 +58,6 @@ a.button {
cursor: pointer;
@include user-select-none();
@include appearance(none);
background: $button-color;
color: $button-text-color;
&:hover:not(.disable-hover) {
opacity: $button-hover-opacity;
text-decoration: none;
}
&.activated {
opacity: 1;
background-color: $button-color-activated;
}
}
// Button Types
@@ -123,31 +111,3 @@ a.button {
// button-disabled should stand alone(?)
// button-sizes should stand alone (button-small, button-large, etc)
// button-fab errrrr
// Default Button Color Mixin
// --------------------------------------------------
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
background-color: $bg-color;
color: $text-color;
&.activated {
background-color: $bg-color-activated;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$text-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $text-color);
}
}

158
ionic/components/button/button_OLD.scss
View File

@@ -1,158 +0,0 @@
@import "../../globals.core";
// Button Variables
// --------------------------------------------------
$button-font-size: 1.6rem !default;
$button-margin: 0.4rem 0.2rem !default;
$button-padding: 0 1em !default;
$button-height: 2.8em !default;
$button-border-radius: 4px !default;
$button-round-padding: 0 2.6rem !default;
$button-round-border-radius: 64px !default;
$button-color: color(primary) !default;
$button-color-activated: color-shade($button-color) !default;
$button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default;
// Default Button
// --------------------------------------------------
button,
[button] {
position: relative;
display: inline-flex;
flex-shrink: 0;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
transition: background-color, opacity 100ms linear;
margin: $button-margin;
padding: $button-padding;
min-height: $button-height;
line-height: 1;
border: 1px solid #ccc;
border: transparent;
border-radius: $button-border-radius;
font-size: $button-font-size;
font-family: inherit;
font-variant: inherit;
font-style: inherit;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
text-transform: none;
vertical-align: top; // the better option for most scenarios
vertical-align: -webkit-baseline-middle; // the best for those that support it
cursor: pointer;
@include user-select-none();
@include appearance(none);
background: $button-color;
color: $button-text-color;
&:hover:not(.disable-hover) {
opacity: $button-hover-opacity;
text-decoration: none;
}
&.activated {
opacity: 1;
background-color: $button-color-activated;
}
// Button Types
// --------------------------------------------------
&[block] {
display: flex;
clear: both;
margin-right: 0;
margin-left: 0;
width: 100%;
&:after {
clear: both;
}
}
&[full] {
width: 100%;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
&[outline] {
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
}
&[round] {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
&[disabled] {
opacity: 0.4;
cursor: default !important;
pointer-events: none;
}
}
a[button] {
text-decoration: none;
}
[padding] > button[block]:first-child,
[padding] > [button][block]:first-child {
margin-top: 0;
}
// Default Button Color Mixin
// --------------------------------------------------
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
background-color: $bg-color;
color: $text-color;
&.activated {
background-color: $bg-color-activated;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
button[#{$color-name}],
[button][#{$color-name}] {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$text-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $text-color);
}
}

89
ionic/components/button/modes/ios.scss
View File

@@ -3,23 +3,102 @@
@import "../button-clear";
@import "../button-fab";
@import "../button-icon";
@import "../button-outline";
@import "../button-size";
// iOS Button (largely the core button styles)
// iOS Button
// --------------------------------------------------
$button-ios-color: map-get($colors-ios, primary) !default;
$button-ios-color-activated: color-shade($button-ios-color) !default;
$button-ios-text-color: inverse($button-ios-color) !default;
$button-ios-hover-opacity: 0.8 !default;
.button {
background: $button-ios-color;
color: $button-ios-text-color;
&:hover:not(.disable-hover) {
opacity: $button-ios-hover-opacity;
text-decoration: none;
}
&.activated {
opacity: 1;
background-color: $button-ios-color-activated;
}
}
.button-block {
// This fixes an issue with flexbox and button on iOS Safari. See #225
display: block;
}
// Clear Button
// --------------------------------------------------
.button-clear {
color: color-shade($button-ios-color);
&:hover:not(.disable-hover) {
opacity: 0.6;
color: color-shade($button-ios-color);
}
}
// Outline Button
// --------------------------------------------------
.button-outline {
border: 1px solid $button-ios-color;
background: transparent;
color: $button-ios-color;
&.activated {
opacity: 1;
color: $background-ios-color;
background-color: $button-ios-color;
}
}
// Default Button Color Mixin
// --------------------------------------------------
@mixin button-default($bg-color, $bg-color-activated, $fg-color) {
background-color: $bg-color;
color: $fg-color;
&.activated {
background-color: $bg-color-activated;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$fg-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $fg-color);
}
}
// Generate Clear Button Colors
// --------------------------------------------------
// TODO primary activated is wrong
@each $color-name, $color-value in $colors {
@each $color-name, $color-value in $colors-ios {
$fg-color: color-shade($color-value);
@@ -52,7 +131,7 @@
color: $fg-color;
&.activated {
color: $background-color;
color: $background-ios-color;
background-color: $fg-color;
}
@@ -62,7 +141,7 @@
// Outline Clear Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
@each $color-name, $color-value in $colors-ios {
.button-outline-#{$color-name} {

26
ionic/components/button/modes/md.scss
View File

@@ -3,7 +3,6 @@
@import "../button-clear";
@import "../button-fab";
@import "../button-icon";
@import "../button-outline";
@import "../button-size";
// Material Design Button
@@ -25,6 +24,11 @@ $button-md-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
$button-md-color: map-get($colors-md, primary) !default;
$button-md-color-activated: color-shade($button-md-color) !default;
$button-md-text-color: inverse($button-md-color) !default;
$button-md-hover-opacity: 0.8 !default;
.button {
border-radius: $button-md-border-radius;
@@ -93,7 +97,7 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
}
md-ripple {
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
background: rgba( red($button-md-color), green($button-md-color), blue($button-md-color), 0.1);
}
}
@@ -108,6 +112,22 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
}
}
// Outline Button
// --------------------------------------------------
.button-outline {
border: 1px solid $button-md-color;
background: transparent;
color: $button-md-color;
&.activated {
opacity: 1;
color: $background-md-color;
background-color: $button-md-color;
}
}
// Material Design Button Color Mixin
// --------------------------------------------------
@@ -138,7 +158,7 @@ $button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
// Generate Material Design Button Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
@each $color-name, $color-value in $colors-md {
@include button-theme-md($color-name, $color-value);