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

Updated button styles to Ben's taste

Browse Source
This commit is contained in:
Max Lynch
2013-09-25 11:33:29 -05:00
parent a8a2217182
commit 02db453c70
6 changed files with 147 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
dist/ionic.css vendored
View File

@ -1208,81 +1208,81 @@ address {
color: #333333; color: #333333;
text-decoration: none; } text-decoration: none; }
.bar-default .button.active, .bar-default .button:active { .bar-default .button.active, .bar-default .button:active {
background-color: #ebebeb; background-color: #fafafa;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #c4c4c4; } border-color: #bbbbbb; }
.bar-secondary .button { .bar-secondary .button {
color: #333333; color: #333333;
background-color: whitesmoke; background-color: whitesmoke;
border-color: #cccccc; } border-color: #bbbbbb; }
.bar-secondary .button:hover { .bar-secondary .button:hover {
color: #333333; color: #333333;
text-decoration: none; } text-decoration: none; }
.bar-secondary .button.active, .bar-secondary .button:active { .bar-secondary .button.active, .bar-secondary .button:active {
background-color: #e1e1e1; background-color: #e5e5e5;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #b3b3b3; } border-color: #999999; }
.bar-primary .button { .bar-primary .button {
color: white; color: white;
background-color: #6999e9; background-color: #4a87ee;
border-color: #5981c5; } border-color: #3b6dc2; }
.bar-primary .button:hover { .bar-primary .button:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.bar-primary .button.active, .bar-primary .button:active { .bar-primary .button.active, .bar-primary .button:active {
background-color: #4581e4; background-color: #4175ce;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3d67ae; } border-color: #32599c; }
.bar-info .button { .bar-info .button {
color: white; color: white;
background-color: #60d2e6; background-color: #43cee6;
border-color: #51b3c4; } border-color: #3bb3c8; }
.bar-info .button:hover { .bar-info .button:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.bar-info .button.active, .bar-info .button:active { .bar-info .button.active, .bar-info .button:active {
background-color: #3dc8e0; background-color: #3db8cd;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3998a9; } border-color: #3293a4; }
.bar-success .button { .bar-success .button {
color: white; color: white;
background-color: #89c163; background-color: #66cc33;
border-color: #71a052; } border-color: #5bb22f; }
.bar-success .button:hover { .bar-success .button:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.bar-success .button.active, .bar-success .button:active { .bar-success .button.active, .bar-success .button:active {
background-color: #73b447; background-color: #55aa2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #597e41; } border-color: #448922; }
.bar-warning .button { .bar-warning .button {
color: white; color: white;
background-color: #f0b840; background-color: #f0b840;
border-color: #cf9a29; } border-color: #d29f31; }
.bar-warning .button:hover { .bar-warning .button:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.bar-warning .button.active, .bar-warning .button:active { .bar-warning .button.active, .bar-warning .button:active {
background-color: #edaa1a; background-color: #e2a114;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #a47a21; } border-color: #b88517; }
.bar-danger .button { .bar-danger .button {
color: white; color: white;
background-color: #de5645; background-color: #ef4e3a;
border-color: #bc4435; } border-color: #c73927; }
.bar-danger .button:hover { .bar-danger .button:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.bar-danger .button.active, .bar-danger .button:active { .bar-danger .button.active, .bar-danger .button:active {
background-color: #d43926; background-color: #ce4331;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #94362a; } border-color: #9f3527; }
.bar-dark .button { .bar-dark .button {
color: white; color: white;
@ -1292,8 +1292,8 @@ address {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.bar-dark .button.active, .bar-dark .button:active { .bar-dark .button.active, .bar-dark .button:active {
background-color: #303030; background-color: #222222;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: black; }
.bar .button-icon { .bar .button-icon {
@ -1342,7 +1342,7 @@ address {
color: #333333; } color: #333333; }
.tabs.tabs-secondary { .tabs.tabs-secondary {
background-color: whitesmoke; background-color: whitesmoke;
border-color: #cccccc; border-color: #bbbbbb;
color: #333333; } color: #333333; }
.tabs.tabs-primary { .tabs.tabs-primary {
background-color: #6999e9; background-color: #6999e9;
@ -1465,15 +1465,15 @@ address {
border-color: #c4c4c4; } border-color: #c4c4c4; }
.list.list-success { .list.list-success {
color: white; color: white;
background-color: #89c163; background-color: #66cc33;
border-color: #89c163; } border-color: #66cc33; }
.list.list-success:hover { .list.list-success:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.list.list-success.active, .list.list-success:active { .list.list-success.active, .list.list-success:active {
background-color: #73b447; background-color: #56ab2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #6fac45; } border-color: #52a329; }
.list-item { .list-item {
position: relative; position: relative;
@ -1862,75 +1862,75 @@ input[type="checkbox"][readonly] {
color: #333333; color: #333333;
text-decoration: none; } text-decoration: none; }
.button.button-default.active, .button.button-default:active { .button.button-default.active, .button.button-default:active {
background-color: #ebebeb; background-color: #fafafa;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #c4c4c4; } border-color: #bbbbbb; }
.button.button-secondary { .button.button-secondary {
color: #333333; color: #333333;
background-color: whitesmoke; background-color: whitesmoke;
border-color: #cccccc; } border-color: #bbbbbb; }
.button.button-secondary:hover { .button.button-secondary:hover {
color: #333333; color: #333333;
text-decoration: none; } text-decoration: none; }
.button.button-secondary.active, .button.button-secondary:active { .button.button-secondary.active, .button.button-secondary:active {
background-color: #e1e1e1; background-color: #e5e5e5;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #b3b3b3; } border-color: #999999; }
.button.button-primary { .button.button-primary {
color: white; color: white;
background-color: #6999e9; background-color: #4a87ee;
border-color: #5981c5; } border-color: #3b6dc2; }
.button.button-primary:hover { .button.button-primary:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.button.button-primary.active, .button.button-primary:active { .button.button-primary.active, .button.button-primary:active {
background-color: #4581e4; background-color: #4175ce;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3d67ae; } border-color: #32599c; }
.button.button-info { .button.button-info {
color: white; color: white;
background-color: #60d2e6; background-color: #43cee6;
border-color: #51b3c4; } border-color: #3bb3c8; }
.button.button-info:hover { .button.button-info:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.button.button-info.active, .button.button-info:active { .button.button-info.active, .button.button-info:active {
background-color: #3dc8e0; background-color: #3db8cd;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3998a9; } border-color: #3293a4; }
.button.button-success { .button.button-success {
color: white; color: white;
background-color: #89c163; background-color: #66cc33;
border-color: #71a052; } border-color: #5bb22f; }
.button.button-success:hover { .button.button-success:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.button.button-success.active, .button.button-success:active { .button.button-success.active, .button.button-success:active {
background-color: #73b447; background-color: #55aa2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #597e41; } border-color: #448922; }
.button.button-warning { .button.button-warning {
color: white; color: white;
background-color: #f0b840; background-color: #f0b840;
border-color: #cf9a29; } border-color: #d29f31; }
.button.button-warning:hover { .button.button-warning:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.button.button-warning.active, .button.button-warning:active { .button.button-warning.active, .button.button-warning:active {
background-color: #edaa1a; background-color: #e2a114;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #a47a21; } border-color: #b88517; }
.button.button-danger { .button.button-danger {
color: white; color: white;
background-color: #de5645; background-color: #ef4e3a;
border-color: #bc4435; } border-color: #c73927; }
.button.button-danger:hover { .button.button-danger:hover {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.button.button-danger.active, .button.button-danger:active { .button.button-danger.active, .button.button-danger:active {
background-color: #d43926; background-color: #ce4331;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #94362a; } border-color: #9f3527; }
.button.button-dark { .button.button-dark {
color: white; color: white;
background-color: #444444; background-color: #444444;
@ -1939,8 +1939,8 @@ input[type="checkbox"][readonly] {
color: white; color: white;
text-decoration: none; } text-decoration: none; }
.button.button-dark.active, .button.button-dark:active { .button.button-dark.active, .button.button-dark:active {
background-color: #303030; background-color: #222222;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; } border-color: black; }
.button.button-icon { .button.button-icon {
border: none; border: none;
@ -1956,7 +1956,7 @@ a.button {
.button-transparent { .button-transparent {
background: transparent; } background: transparent; }
.button-borderless [class^="icon-"] { .button-clear [class^="icon-"] {
font-size: 24px; } font-size: 24px; }
.button-group { .button-group {

8
scss/_mixins.scss
View File

@ -2,7 +2,7 @@
// //
// Useful utilities and mixins for SCSS files. // Useful utilities and mixins for SCSS files.
@mixin button-style($bgColor, $borderColor, $color) { @mixin button-style($bgColor, $borderColor, $activeBgColor, $activeBorderColor, $color) {
color: $color; color: $color;
background-color: $bgColor; background-color: $bgColor;
border-color: $borderColor; border-color: $borderColor;
@ -18,9 +18,9 @@
//background-color: lighten($bgColor, 10%); //background-color: lighten($bgColor, 10%);
} }
&.active, &:active { &.active, &:active {
background-color: darken($bgColor, 8%); background-color: $activeBgColor;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12); box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
border-color: darken($borderColor, 10%); border-color: $activeBorderColor;
} }
} }

64
scss/_variables.scss
View File

@ -4,11 +4,11 @@
$brand-default: #fff; $brand-default: #fff;
$brand-secondary: #f5f5f5; $brand-secondary: #f5f5f5;
$brand-primary: #6999e9; $brand-primary: #4a87ee;
$brand-success: #89c163; $brand-info: #43cee6;
$brand-success: #66cc33;
$brand-warning: #f0b840; $brand-warning: #f0b840;
$brand-danger: #de5645; $brand-danger: #ef4e3a;
$brand-info: #60d2e6;
$brand-dark: #444; $brand-dark: #444;
@ -204,37 +204,45 @@ $button-font-size: 16px;
// Button block that has spacing // Button block that has spacing
$button-block-margin: 10px 0 10px 0; $button-block-margin: 10px 0 10px 0;
$button-default-bg: #fff; $button-default-bg: $brand-default;
$button-default-bg-active: #eee; $button-default-border: #ddd;
$buttonDefaultBorder: #ddd; $button-default-active-bg: #fafafa;
$button-default-active-border: #bbb;
$button-secondary-bg: #f5f5f5; $button-secondary-bg: $brand-secondary;
$button-secondary-bg-active: #eee; $button-secondary-border: #bbb;
$button-secondary-border: #ccc; $button-secondary-active-bg: #e5e5e5;
$button-secondary-active-border: #999;
$button-primary-bg: #6999e9; $button-primary-bg: $brand-primary;
$button-primary-bg-active: #eee; $button-primary-border: #3b6dc2;
$button-primary-border: #5981c5; $button-primary-active-bg: #4175ce;
$button-primary-active-border: #32599c;
$button-info-bg: #60d2e6; $button-info-bg: $brand-info;
$button-info-bg-active: #eee; $button-info-border: #3bb3c8;
$button-info-border: #51b3c4; $button-info-active-bg: #3db8cd;
$button-info-active-border: #3293a4;
$button-success-bg: #89c163; $button-success-bg: $brand-success;
$button-success-bg-active: #eee; $button-success-border: #5bb22f;
$button-success-border: #71a052; $button-success-active-bg: #55aa2b;
$button-success-active-border: #448922;
$button-warning-bg: #f0b840; $button-warning-bg: $brand-warning;
$button-warning-bg-active: #eee; $button-warning-border: #d29f31;
$button-warning-border: #cf9a29; $button-warning-active-bg: #e2a114;
$button-warning-active-border: #b88517;
$button-danger-bg: #de5645; $button-danger-bg: $brand-danger;
$button-danger-bg-active: #eee; $button-danger-border: #c73927;
$buttonDangerBorder: #bc4435; $button-danger-active-bg: #ce4331;
$button-danger-active-border: #9f3527;
$button-dark-bg: #444; $button-dark-bg: $brand-dark;
$button-dark-bg-active: #eee;
$button-dark-border: #111; $button-dark-border: #111;
$button-dark-active-bg: #222;
$button-dark-active-border: #000;
// Bars // Bars
@ -283,7 +291,7 @@ $tabs-default-bg: #fff;
$tabs-default-border-color: #ddd; $tabs-default-border-color: #ddd;
$tabs-secondary-bg: #f5f5f5; $tabs-secondary-bg: #f5f5f5;
$tabs-secondary-border-color: #ccc; $tabs-secondary-border-color: #bbb;
$tabs-primary-bg: #6999e9; $tabs-primary-bg: #6999e9;
$tabs-primary-border-color: #5981c5; $tabs-primary-border-color: #5981c5;

16
scss/ionic/_bar.scss
View File

@ -118,45 +118,45 @@
.bar-default { .bar-default {
.button { .button {
@include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark); @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
} }
} }
.bar-secondary { .bar-secondary {
.button { .button {
@include button-style($button-secondary-bg, $button-secondary-border, $gray-dark); @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
} }
} }
.bar-primary { .bar-primary {
.button { .button {
@include button-style($button-primary-bg, $button-primary-border, $white); @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
} }
} }
.bar-info { .bar-info {
.button { .button {
@include button-style($button-info-bg, $button-info-border, $white); @include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
} }
} }
.bar-success { .bar-success {
.button { .button {
@include button-style($button-success-bg, $button-success-border, $white); @include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
} }
} }
.bar-warning { .bar-warning {
.button { .button {
@include button-style($button-warning-bg, $button-warning-border, $white); @include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
} }
} }
.bar-danger { .bar-danger {
.button { .button {
@include button-style($button-danger-bg, $buttonDangerBorder, $white); @include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
} }
} }
.bar-dark { .bar-dark {
// A default style for buttons // A default style for buttons
.button { .button {
@include button-style($button-dark-bg, $button-dark-border, $white); @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
} }
} }

18
scss/ionic/_button.scss
View File

@ -29,28 +29,28 @@
} }
&.button-default { &.button-default {
@include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark); @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
} }
&.button-secondary { &.button-secondary {
@include button-style($button-secondary-bg, $button-secondary-border, $gray-dark); @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
} }
&.button-primary { &.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $white); @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
} }
&.button-info { &.button-info {
@include button-style($button-info-bg, $button-info-border, $white); @include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
} }
&.button-success { &.button-success {
@include button-style($button-success-bg, $button-success-border, $white); @include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
} }
&.button-warning { &.button-warning {
@include button-style($button-warning-bg, $button-warning-border, $white); @include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
} }
&.button-danger { &.button-danger {
@include button-style($button-danger-bg, $buttonDangerBorder, $white); @include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
} }
&.button-dark { &.button-dark {
@include button-style($button-dark-bg, $button-dark-border, $white); @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
} }
&.button-icon { &.button-icon {
@ -72,6 +72,6 @@ a.button {
background: transparent; background: transparent;
} }
.button-borderless [class^="icon-"] { .button-clear [class^="icon-"] {
font-size: 24px; font-size: 24px;
} }

18
test/buttons.html
View File

@ -26,11 +26,29 @@
<a class="button button-warning">Warning</a> <a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a> <a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a> <a class="button button-dark">Dark</a>
<a class="button button-icon"><i class="icon-home"></i></a>
<a class="button button-clear">Borderless</a>
</p> </p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> <p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main> </main>
</section> </section>
<script>
var buttons = document.querySelectorAll('.button');
var a;
for(var i = 0; i < buttons.length; i++) {
a = buttons[i];
a.addEventListener('touchstart', function() {
this.classList.add('active');
});
a.addEventListener('touchend', function() {
this.classList.remove('active');
});
a.addEventListener('touchcancel', function() {
this.classList.remove('active');
});
}
</script>
</body> </body>
</html> </html>