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

change button clear/outline colors

Browse Source
This commit is contained in:
Adam Bradley
2013-11-18 09:04:12 -06:00
parent 6edfa82ae6
commit 76f3277c25
5 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
dist/css/ionic.css vendored
View File

@ -1,5 +1,5 @@
@charset "UTF-8"; @charset "UTF-8";
/* /*!
Ionicons, v1.3.5 Ionicons, v1.3.5
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
https://twitter.com/helloimben https://twitter.com/ionicframework https://twitter.com/helloimben https://twitter.com/ionicframework
@ -2045,7 +2045,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -4193,7 +4193,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
@ -4208,7 +4208,7 @@ input[type="checkbox"][readonly] {
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -4481,15 +4481,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: #145dd7; color: #4a87ee;
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: #145dd7; border-color: #4a87ee;
color: #145dd7; } color: #4a87ee; }
.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: #145dd7; background-color: #4a87ee;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-calm { .button.button-calm {
@ -4504,15 +4504,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: #1aaac3; color: #43cee6;
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: #1aaac3; border-color: #43cee6;
color: #1aaac3; } color: #43cee6; }
.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: #1aaac3; background-color: #43cee6;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-assertive { .button.button-assertive {
@ -4527,15 +4527,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: #cc2511; color: #ef4e3a;
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: #cc2511; border-color: #ef4e3a;
color: #cc2511; } color: #ef4e3a; }
.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: #cc2511; background-color: #ef4e3a;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-balanced { .button.button-balanced {
@ -4550,15 +4550,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: #478f24; color: #66cc33;
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: #478f24; border-color: #66cc33;
color: #478f24; } color: #66cc33; }
.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: #478f24; background-color: #66cc33;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-energized { .button.button-energized {
@ -4573,15 +4573,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: #d39511; color: #f0b840;
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: #d39511; border-color: #f0b840;
color: #d39511; } color: #f0b840; }
.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: #d39511; background-color: #f0b840;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-royal { .button.button-royal {
@ -4596,15 +4596,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: #552bdf; color: #8a6de9;
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: #552bdf; border-color: #8a6de9;
color: #552bdf; } color: #8a6de9; }
.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: #552bdf; background-color: #8a6de9;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
.button.button-dark { .button.button-dark {
@ -4619,15 +4619,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: #111111; color: #444444;
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: #111111; border-color: #444444;
color: #111111; } color: #444444; }
.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: #111111; background-color: #444444;
color: #fff; color: #fff;
box-shadow: none; } box-shadow: none; }
@ -4661,7 +4661,7 @@ input[type="range"] {
.button-icon:active, .button-icon.active { .button-icon:active, .button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button-icon .icon { .button-icon .icon {
font-size: 32px; } font-size: 32px; }

4
dist/css/themes/ionic-ios7.css vendored
View File

@ -118,7 +118,7 @@
right: 20px; right: 20px;
transition: 0.2s ease; transition: 0.2s ease;
transition-property: left, right; transition-property: left, right;
transition-delay: 0s, 0.05s; } transition-delay: 0s, .05s; }
.toggle :checked + .track { .toggle :checked + .track {
/* When the toggle is "on" */ /* When the toggle is "on" */
@ -133,4 +133,4 @@
right: 0; right: 0;
left: 20px; left: 20px;
-webkit-transform: none; -webkit-transform: none;
transition-delay: 0.05s, 0s; } transition-delay: .05s, 0s; }

28
scss/_button.scss
View File

@ -57,44 +57,44 @@
&.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-border); @include button-clear($button-positive-bg);
@include button-outline($button-positive-border); @include button-outline($button-positive-bg);
} }
&.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-border); @include button-clear($button-calm-bg);
@include button-outline($button-calm-border); @include button-outline($button-calm-bg);
} }
&.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-border); @include button-clear($button-assertive-bg);
@include button-outline($button-assertive-border); @include button-outline($button-assertive-bg);
} }
&.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-border); @include button-clear($button-balanced-bg);
@include button-outline($button-balanced-border); @include button-outline($button-balanced-bg);
} }
&.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-border); @include button-clear($button-energized-bg);
@include button-outline($button-energized-border); @include button-outline($button-energized-bg);
} }
&.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-border); @include button-clear($button-royal-bg);
@include button-outline($button-royal-border); @include button-outline($button-royal-bg);
} }
&.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-border); @include button-clear($button-dark-bg);
@include button-outline($button-dark-border); @include button-outline($button-dark-bg);
} }
} }

2
test/buttons.html
View File

@ -332,7 +332,7 @@
<h3>button.button-block.button-clear (parent w/ padding)</h3> <h3>button.button-block.button-clear (parent w/ padding)</h3>
<p> <p>
<button class="button button-clear button-block"><i class="icon ion-home"></i> Default</button> <button class="button button-clear button-block"><i class="icon ion-home"></i> Default</button>
<button class="button button-light button-clear block">.button-light</button> <button class="button button-light button-clear button-block">.button-light</button>
<button class="button button-stable button-clear button-block">.button-stable</button> <button class="button button-stable button-clear button-block">.button-stable</button>
<button class="button button-positive button-clear button-block">.button-positive</button> <button class="button button-positive button-clear button-block">.button-positive</button>
<button class="button button-calm button-clear button-block">.button-calm</button> <button class="button button-calm button-clear button-block">.button-calm</button>

2
test/input-text.html
View File

@ -7,7 +7,7 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet"> <link href="../dist/css/ionic.css" rel="stylesheet">
</head> </head>
<body> <body class="ionic-pseudo">
<section class="view"> <section class="view">