javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix button-clear, outline

Browse Source
This commit is contained in:
Adam Bradley
2013-11-16 21:21:50 -06:00
parent 1cc8193bdf
commit 75d73d4973
2 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
dist/css/ionic.css vendored
View File

@ -4433,15 +4433,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #cccccc; } border-color: #cccccc; }
.button.button-light.button-clear { .button.button-light.button-clear {
color: white; color: #dddddd;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-light.button-outline { .button.button-light.button-outline {
background: transparent; background: transparent;
border-color: white; border-color: #dddddd;
color: white; } color: #dddddd; }
.button.button-light.button-outline.active, .button.button-light.button-outline:active { .button.button-light.button-outline.active, .button.button-light.button-outline:active {
background-color: white; background-color: #dddddd;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-stable { .button.button-stable {
@ -4456,15 +4456,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #a2a2a2; } border-color: #a2a2a2; }
.button.button-stable.button-clear { .button.button-stable.button-clear {
color: #f8f8f8; color: #b2b2b2;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-stable.button-outline { .button.button-stable.button-outline {
background: transparent; background: transparent;
border-color: #f8f8f8; border-color: #b2b2b2;
color: #f8f8f8; } color: #b2b2b2; }
.button.button-stable.button-outline.active, .button.button-stable.button-outline:active { .button.button-stable.button-outline.active, .button.button-stable.button-outline:active {
background-color: #f8f8f8; background-color: #b2b2b2;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-positive { .button.button-positive {
@ -4479,15 +4479,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #145dd7; } border-color: #145dd7; }
.button.button-positive.button-clear { .button.button-positive.button-clear {
color: #4a87ee; color: #145dd7;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-positive.button-outline { .button.button-positive.button-outline {
background: transparent; background: transparent;
border-color: #4a87ee; border-color: #145dd7;
color: #4a87ee; } color: #145dd7; }
.button.button-positive.button-outline.active, .button.button-positive.button-outline:active { .button.button-positive.button-outline.active, .button.button-positive.button-outline:active {
background-color: #4a87ee; background-color: #145dd7;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-calm { .button.button-calm {
@ -4502,15 +4502,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #1aaac3; } border-color: #1aaac3; }
.button.button-calm.button-clear { .button.button-calm.button-clear {
color: #43cee6; color: #1aaac3;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-calm.button-outline { .button.button-calm.button-outline {
background: transparent; background: transparent;
border-color: #43cee6; border-color: #1aaac3;
color: #43cee6; } color: #1aaac3; }
.button.button-calm.button-outline.active, .button.button-calm.button-outline:active { .button.button-calm.button-outline.active, .button.button-calm.button-outline:active {
background-color: #43cee6; background-color: #1aaac3;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-assertive { .button.button-assertive {
@ -4525,15 +4525,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #cc2511; } border-color: #cc2511; }
.button.button-assertive.button-clear { .button.button-assertive.button-clear {
color: #ef4e3a; color: #cc2511;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-assertive.button-outline { .button.button-assertive.button-outline {
background: transparent; background: transparent;
border-color: #ef4e3a; border-color: #cc2511;
color: #ef4e3a; } color: #cc2511; }
.button.button-assertive.button-outline.active, .button.button-assertive.button-outline:active { .button.button-assertive.button-outline.active, .button.button-assertive.button-outline:active {
background-color: #ef4e3a; background-color: #cc2511;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-balanced { .button.button-balanced {
@ -4548,15 +4548,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #478f24; } border-color: #478f24; }
.button.button-balanced.button-clear { .button.button-balanced.button-clear {
color: #66cc33; color: #478f24;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-balanced.button-outline { .button.button-balanced.button-outline {
background: transparent; background: transparent;
border-color: #66cc33; border-color: #478f24;
color: #66cc33; } color: #478f24; }
.button.button-balanced.button-outline.active, .button.button-balanced.button-outline:active { .button.button-balanced.button-outline.active, .button.button-balanced.button-outline:active {
background-color: #66cc33; background-color: #478f24;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-energized { .button.button-energized {
@ -4571,15 +4571,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #d39511; } border-color: #d39511; }
.button.button-energized.button-clear { .button.button-energized.button-clear {
color: #f0b840; color: #d39511;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-energized.button-outline { .button.button-energized.button-outline {
background: transparent; background: transparent;
border-color: #f0b840; border-color: #d39511;
color: #f0b840; } color: #d39511; }
.button.button-energized.button-outline.active, .button.button-energized.button-outline:active { .button.button-energized.button-outline.active, .button.button-energized.button-outline:active {
background-color: #f0b840; background-color: #d39511;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-royal { .button.button-royal {
@ -4594,15 +4594,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #552bdf; } border-color: #552bdf; }
.button.button-royal.button-clear { .button.button-royal.button-clear {
color: #8a6de9; color: #552bdf;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-royal.button-outline { .button.button-royal.button-outline {
background: transparent; background: transparent;
border-color: #8a6de9; border-color: #552bdf;
color: #8a6de9; } color: #552bdf; }
.button.button-royal.button-outline.active, .button.button-royal.button-outline:active { .button.button-royal.button-outline.active, .button.button-royal.button-outline:active {
background-color: #8a6de9; background-color: #552bdf;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-dark { .button.button-dark {
@ -4617,15 +4617,15 @@ input[type="range"] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: black; }
.button.button-dark.button-clear { .button.button-dark.button-clear {
color: #444444; color: #111111;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-dark.button-outline { .button.button-dark.button-outline {
background: transparent; background: transparent;
border-color: #444444; border-color: #111111;
color: #444444; } color: #111111; }
.button.button-dark.button-outline.active, .button.button-dark.button-outline:active { .button.button-dark.button-outline.active, .button.button-dark.button-outline:active {
background-color: #444444; background-color: #111111;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
@ -4672,7 +4672,7 @@ input[type="range"] {
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button-clear.button-clear { .button-clear.button-clear {
color: #f8f8f8; color: #b2b2b2;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button-clear:active, .button-clear.active { .button-clear:active, .button-clear.active {
@ -4685,10 +4685,10 @@ input[type="range"] {
box-shadow: none; } box-shadow: none; }
.button-outline.button-outline { .button-outline.button-outline {
background: transparent; background: transparent;
border-color: #f8f8f8; border-color: #b2b2b2;
color: #f8f8f8; } color: #b2b2b2; }
.button-outline.button-outline.active, .button-outline.button-outline:active { .button-outline.button-outline.active, .button-outline.button-outline:active {
background-color: #f8f8f8; background-color: #b2b2b2;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }

40
scss/_button.scss
View File

@ -45,56 +45,56 @@
&.button-light { &.button-light {
@include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text); @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
@include button-clear($button-light-bg); @include button-clear($button-light-border);
@include button-outline($button-light-bg); @include button-outline($button-light-border);
} }
&.button-stable { &.button-stable {
@include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text); @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
@include button-clear($button-stable-bg); @include button-clear($button-stable-border);
@include button-outline($button-stable-bg); @include button-outline($button-stable-border);
} }
&.button-positive { &.button-positive {
@include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text); @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
@include button-clear($button-positive-bg); @include button-clear($button-positive-border);
@include button-outline($button-positive-bg); @include button-outline($button-positive-border);
} }
&.button-calm { &.button-calm {
@include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text); @include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text);
@include button-clear($button-calm-bg); @include button-clear($button-calm-border);
@include button-outline($button-calm-bg); @include button-outline($button-calm-border);
} }
&.button-assertive { &.button-assertive {
@include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text); @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
@include button-clear($button-assertive-bg); @include button-clear($button-assertive-border);
@include button-outline($button-assertive-bg); @include button-outline($button-assertive-border);
} }
&.button-balanced { &.button-balanced {
@include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text); @include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text);
@include button-clear($button-balanced-bg); @include button-clear($button-balanced-border);
@include button-outline($button-balanced-bg); @include button-outline($button-balanced-border);
} }
&.button-energized { &.button-energized {
@include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text); @include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text);
@include button-clear($button-energized-bg); @include button-clear($button-energized-border);
@include button-outline($button-energized-bg); @include button-outline($button-energized-border);
} }
&.button-royal { &.button-royal {
@include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text); @include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text);
@include button-clear($button-royal-bg); @include button-clear($button-royal-border);
@include button-outline($button-royal-bg); @include button-outline($button-royal-border);
} }
&.button-dark { &.button-dark {
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text); @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
@include button-clear($button-dark-bg); @include button-clear($button-dark-border);
@include button-outline($button-dark-bg); @include button-outline($button-dark-border);
} }
} }
@ -144,7 +144,7 @@
} }
.button-clear { .button-clear {
@include button-clear($button-default-bg); @include button-clear($button-default-border);
@include transition(opacity .1s); @include transition(opacity .1s);
padding: 0 $button-clear-padding; padding: 0 $button-clear-padding;
max-height: $button-height; max-height: $button-height;
@ -158,7 +158,7 @@
} }
.button-outline { .button-outline {
@include button-outline($button-default-bg); @include button-outline($button-default-border);
@include transition(opacity .1s); @include transition(opacity .1s);
background: none; background: none;
box-shadow: none; box-shadow: none;