mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Button bars and default styles for header buttons
Added a new segmented button bar that stretches, also set the default styles for header buttons.
This commit is contained in:
Max Lynch
322
dist/ionic.css
vendored
322
dist/ionic.css
vendored
@ -170,10 +170,6 @@ ul {
|
|||||||
.button.button-block {
|
.button.button-block {
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 10px 0;
|
||||||
display: block; }
|
display: block; }
|
||||||
.button.button-clear {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 0px; }
|
|
||||||
|
|
||||||
.button-group {
|
.button-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -237,6 +233,32 @@ ul {
|
|||||||
-moz-border-radius-bottomleft: 0;
|
-moz-border-radius-bottomleft: 0;
|
||||||
border-bottom-left-radius: 0; }
|
border-bottom-left-radius: 0; }
|
||||||
|
|
||||||
|
.button-bar {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: box;
|
||||||
|
box-flex: 1;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
box-orient: horizontal;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-moz-box-orient: horizontal; }
|
||||||
|
|
||||||
|
.button-bar > .button {
|
||||||
|
box-flex: 1;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
width: 0;
|
||||||
|
line-height: 8px;
|
||||||
|
border-radius: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
border-width: 1px 0px 1px 1px; }
|
||||||
|
.button-bar > .button:last-child {
|
||||||
|
border-right-width: 1px; }
|
||||||
|
|
||||||
form {
|
form {
|
||||||
margin: 0 0 1.42857; }
|
margin: 0 0 1.42857; }
|
||||||
|
|
||||||
@ -1359,13 +1381,7 @@ main {
|
|||||||
.bar {
|
.bar {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0;
|
border-width: 0; }
|
||||||
/*
|
|
||||||
Disabled temporarily because it's annoying for testing.
|
|
||||||
@media screen and (orientation : landscape) {
|
|
||||||
padding: $barPaddingLandscape;
|
|
||||||
}
|
|
||||||
*/ }
|
|
||||||
.bar.bar-header {
|
.bar.bar-header {
|
||||||
border-bottom-width: 1px; }
|
border-bottom-width: 1px; }
|
||||||
.bar.bar-footer {
|
.bar.bar-footer {
|
||||||
@ -1419,112 +1435,204 @@ main {
|
|||||||
.bar.bar-dark .tab-item a {
|
.bar.bar-dark .tab-item a {
|
||||||
color: white; }
|
color: white; }
|
||||||
|
|
||||||
|
.bar-default .button {
|
||||||
|
color: #333333;
|
||||||
|
background-color: white;
|
||||||
|
border-color: #dddddd; }
|
||||||
|
.bar-default .button:hover {
|
||||||
|
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; }
|
||||||
|
|
||||||
|
.bar-secondary .button {
|
||||||
|
color: #333333;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border-color: #cccccc; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.bar-primary .button {
|
||||||
|
color: white;
|
||||||
|
background-color: #6999e9;
|
||||||
|
border-color: #5981c5; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.bar-info .button {
|
||||||
|
color: white;
|
||||||
|
background-color: #60d2e6;
|
||||||
|
border-color: #51b3c4; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.bar-success .button {
|
||||||
|
color: white;
|
||||||
|
background-color: #89c163;
|
||||||
|
border-color: #71a052; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.bar-warning .button {
|
||||||
|
color: white;
|
||||||
|
background-color: #f0b840;
|
||||||
|
border-color: #cf9a29; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.bar-danger .button {
|
||||||
|
color: white;
|
||||||
|
background-color: #de5645;
|
||||||
|
border-color: #bc4435; }
|
||||||
|
.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; }
|
||||||
|
|
||||||
|
.bar-dark .button {
|
||||||
|
color: white;
|
||||||
|
background-color: #444444;
|
||||||
|
border-color: #111111; }
|
||||||
|
.bar-dark .button:hover {
|
||||||
|
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);
|
||||||
|
border-color: black; }
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
color: #222222;
|
color: #222222;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
padding: 10px 15px; }
|
padding: 10px 15px; }
|
||||||
|
.button.button-default {
|
||||||
|
color: #333333;
|
||||||
|
background-color: white;
|
||||||
|
border-color: #dddddd; }
|
||||||
|
.button.button-default:hover {
|
||||||
|
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; }
|
||||||
|
.button.button-secondary {
|
||||||
|
color: #333333;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border-color: #cccccc; }
|
||||||
|
.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; }
|
||||||
|
.button.button-primary {
|
||||||
|
color: white;
|
||||||
|
background-color: #6999e9;
|
||||||
|
border-color: #5981c5; }
|
||||||
|
.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; }
|
||||||
|
.button.button-info {
|
||||||
|
color: white;
|
||||||
|
background-color: #60d2e6;
|
||||||
|
border-color: #51b3c4; }
|
||||||
|
.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; }
|
||||||
|
.button.button-success {
|
||||||
|
color: white;
|
||||||
|
background-color: #89c163;
|
||||||
|
border-color: #71a052; }
|
||||||
|
.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; }
|
||||||
|
.button.button-warning {
|
||||||
|
color: white;
|
||||||
|
background-color: #f0b840;
|
||||||
|
border-color: #cf9a29; }
|
||||||
|
.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; }
|
||||||
|
.button.button-danger {
|
||||||
|
color: white;
|
||||||
|
background-color: #de5645;
|
||||||
|
border-color: #bc4435; }
|
||||||
|
.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; }
|
||||||
|
.button.button-dark {
|
||||||
|
color: white;
|
||||||
|
background-color: #444444;
|
||||||
|
border-color: #111111; }
|
||||||
|
.button.button-dark:hover {
|
||||||
|
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);
|
||||||
|
border-color: black; }
|
||||||
|
.button.button-clear {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 0px; }
|
||||||
|
|
||||||
a.button {
|
a.button {
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
|
|
||||||
.button-default {
|
|
||||||
color: #333333;
|
|
||||||
background-color: white;
|
|
||||||
border-color: #dddddd; }
|
|
||||||
.button-default:hover {
|
|
||||||
color: #333333;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-default.active, .button-default:active {
|
|
||||||
background-color: #ebebeb;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: #c4c4c4; }
|
|
||||||
|
|
||||||
.button-secondary {
|
|
||||||
color: #333333;
|
|
||||||
background-color: whitesmoke;
|
|
||||||
border-color: #cccccc; }
|
|
||||||
.button-secondary:hover {
|
|
||||||
color: #333333;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-secondary.active, .button-secondary:active {
|
|
||||||
background-color: #e1e1e1;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: #b3b3b3; }
|
|
||||||
|
|
||||||
.button-primary {
|
|
||||||
color: white;
|
|
||||||
background-color: #6999e9;
|
|
||||||
border-color: #5981c5; }
|
|
||||||
.button-primary:hover {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-primary.active, .button-primary:active {
|
|
||||||
background-color: #4581e4;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: #3d67ae; }
|
|
||||||
|
|
||||||
.button-info {
|
|
||||||
color: white;
|
|
||||||
background-color: #60d2e6;
|
|
||||||
border-color: #51b3c4; }
|
|
||||||
.button-info:hover {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-info.active, .button-info:active {
|
|
||||||
background-color: #3dc8e0;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: #3998a9; }
|
|
||||||
|
|
||||||
.button-success {
|
|
||||||
color: white;
|
|
||||||
background-color: #89c163;
|
|
||||||
border-color: #71a052; }
|
|
||||||
.button-success:hover {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-success.active, .button-success:active {
|
|
||||||
background-color: #73b447;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: #597e41; }
|
|
||||||
|
|
||||||
.button-warning {
|
|
||||||
color: white;
|
|
||||||
background-color: #f0b840;
|
|
||||||
border-color: #cf9a29; }
|
|
||||||
.button-warning:hover {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-warning.active, .button-warning:active {
|
|
||||||
background-color: #edaa1a;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: #a47a21; }
|
|
||||||
|
|
||||||
.button-danger {
|
|
||||||
color: white;
|
|
||||||
background-color: #de5645;
|
|
||||||
border-color: #bc4435; }
|
|
||||||
.button-danger:hover {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-danger.active, .button-danger:active {
|
|
||||||
background-color: #d43926;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: #94362a; }
|
|
||||||
|
|
||||||
.button-dark {
|
|
||||||
color: white;
|
|
||||||
background-color: #444444;
|
|
||||||
border-color: #111111; }
|
|
||||||
.button-dark:hover {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none; }
|
|
||||||
.button-dark.active, .button-dark:active {
|
|
||||||
background-color: #303030;
|
|
||||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
|
|
||||||
border-color: black; }
|
|
||||||
|
|
||||||
.button-transparent {
|
.button-transparent {
|
||||||
background: transparent; }
|
background: transparent; }
|
||||||
|
|
||||||
|
|||||||
@ -24,11 +24,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="bar bar-header-secondary bar-dark">
|
<div class="bar bar-header-secondary bar-dark">
|
||||||
<div class="button-group">
|
<div class="button-bar">
|
||||||
<a class="button button-primary">Success</a>
|
<a class="button">Success</a>
|
||||||
<a class="button button-primary">Warning</a>
|
<a class="button">Warning</a>
|
||||||
<a class="button button-primary">Danger</a>
|
<a class="button">Danger</a>
|
||||||
<a class="button button-primary">Dark</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -62,3 +62,33 @@
|
|||||||
.button-group > .button-group:last-child > .button:first-child {
|
.button-group > .button-group:last-child > .button:first-child {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-bar {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: box;
|
||||||
|
|
||||||
|
@include box-flex(1);
|
||||||
|
@include box-orient(horizontal);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-bar > .button {
|
||||||
|
@include box-flex(1);
|
||||||
|
// Fix for box-flex width issue
|
||||||
|
width: 0;
|
||||||
|
|
||||||
|
line-height: 8px;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
border-width: 1px 0px 1px 1px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -10,10 +10,4 @@
|
|||||||
margin: $buttonBlockMargin;
|
margin: $buttonBlockMargin;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.button-clear {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: $buttonClearPadding;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -18,6 +18,7 @@
|
|||||||
color: $darkColor;
|
color: $darkColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.bar-secondary {
|
&.bar-secondary {
|
||||||
background-color: $barSecondaryBackground;
|
background-color: $barSecondaryBackground;
|
||||||
border-color: $barSecondaryBorderColor;
|
border-color: $barSecondaryBorderColor;
|
||||||
@ -77,11 +78,56 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
//
|
||||||
Disabled temporarily because it's annoying for testing.
|
//Disabled temporarily because it's annoying for testing.
|
||||||
@media screen and (orientation : landscape) {
|
//@media screen and (orientation : landscape) {
|
||||||
padding: $barPaddingLandscape;
|
//padding: $barPaddingLandscape;
|
||||||
}
|
//}
|
||||||
*/
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Default styles for buttons inside of styled bars
|
||||||
|
|
||||||
|
.bar-default {
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-secondary {
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-primary {
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar-info {
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar-success {
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar-warning {
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar-danger {
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar-dark {
|
||||||
|
// A default style for buttons
|
||||||
|
.button {
|
||||||
|
@include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,36 +4,42 @@
|
|||||||
border-width: $buttonBorderWidth;
|
border-width: $buttonBorderWidth;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
padding: $buttonPadding;
|
padding: $buttonPadding;
|
||||||
|
|
||||||
|
&.button-default {
|
||||||
|
@include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
|
||||||
|
}
|
||||||
|
&.button-secondary {
|
||||||
|
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
|
||||||
|
}
|
||||||
|
&.button-primary {
|
||||||
|
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
|
||||||
|
}
|
||||||
|
&.button-info {
|
||||||
|
@include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
|
||||||
|
}
|
||||||
|
&.button-success {
|
||||||
|
@include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
|
||||||
|
}
|
||||||
|
&.button-warning {
|
||||||
|
@include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
|
||||||
|
}
|
||||||
|
&.button-danger {
|
||||||
|
@include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
|
||||||
|
}
|
||||||
|
&.button-dark {
|
||||||
|
@include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
|
||||||
|
}
|
||||||
|
&.button-clear {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: $buttonClearPadding;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.button {
|
a.button {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-default {
|
|
||||||
@include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
|
|
||||||
}
|
|
||||||
.button-secondary {
|
|
||||||
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
|
|
||||||
}
|
|
||||||
.button-primary {
|
|
||||||
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
|
|
||||||
}
|
|
||||||
.button-info {
|
|
||||||
@include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
|
|
||||||
}
|
|
||||||
.button-success {
|
|
||||||
@include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
|
|
||||||
}
|
|
||||||
.button-warning {
|
|
||||||
@include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
|
|
||||||
}
|
|
||||||
.button-danger {
|
|
||||||
@include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
|
|
||||||
}
|
|
||||||
.button-dark {
|
|
||||||
@include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
|
|
||||||
}
|
|
||||||
.button-transparent {
|
.button-transparent {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user