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

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

8
scss/_mixins.scss
View File

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

64
scss/_variables.scss
View File

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

16
scss/ionic/_bar.scss
View File

@ -118,45 +118,45 @@
.bar-default {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
.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 {
// A default style for buttons
.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 {
@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 {
@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 {
@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 {
@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 {
@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 {
@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 {
@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 {
@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 {
@ -72,6 +72,6 @@ a.button {
background: transparent;
}
.button-borderless [class^="icon-"] {
.button-clear [class^="icon-"] {
font-size: 24px;
}

18
test/buttons.html
View File

@ -26,11 +26,29 @@
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</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><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>
</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>
</html>