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

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

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

28
scss/_button.scss
View File

@ -57,44 +57,44 @@
&.button-positive {
@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-outline($button-positive-border);
@include button-clear($button-positive-bg);
@include button-outline($button-positive-bg);
}
&.button-calm {
@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-outline($button-calm-border);
@include button-clear($button-calm-bg);
@include button-outline($button-calm-bg);
}
&.button-assertive {
@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-outline($button-assertive-border);
@include button-clear($button-assertive-bg);
@include button-outline($button-assertive-bg);
}
&.button-balanced {
@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-outline($button-balanced-border);
@include button-clear($button-balanced-bg);
@include button-outline($button-balanced-bg);
}
&.button-energized {
@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-outline($button-energized-border);
@include button-clear($button-energized-bg);
@include button-outline($button-energized-bg);
}
&.button-royal {
@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-outline($button-royal-border);
@include button-clear($button-royal-bg);
@include button-outline($button-royal-bg);
}
&.button-dark {
@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-outline($button-dark-border);
@include button-clear($button-dark-bg);
@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>
<p>
<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-positive button-clear button-block">.button-positive</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">
<link href="../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<body class="ionic-pseudo">
<section class="view">