Add alternate button colors from HPSTR theme

- Fixes #40
This commit is contained in:
Michael Rose 2014-03-27 10:18:24 -04:00
parent 5af1ce2cce
commit 3c7ad2ea9c
4 changed files with 86 additions and 24 deletions

View file

@ -95,8 +95,15 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
Make any link standout more when applying the `.btn` class. Make any link standout more when applying the `.btn` class.
<div markdown="0"><a href="#" class="btn">This is a button</a></div> {% highlight html %}
<a href="#" class="btn btn-success">Success Button</a>
{% endhighlight %}
<div markdown="0"><a href="#" class="btn">Primary Button</a></div>
<div markdown="0"><a href="#" class="btn btn-success">Success Button</a></div>
<div markdown="0"><a href="#" class="btn btn-warning">Warning Button</a></div>
<div markdown="0"><a href="#" class="btn btn-danger">Danger Button</a></div>
<div markdown="0"><a href="#" class="btn btn-info">Info Button</a></div>
## Notices ## Notices

File diff suppressed because one or more lines are too long

View file

@ -51,19 +51,66 @@ svg:not(:root) {
margin-bottom: 20px; margin-bottom: 20px;
padding: 8px 20px; padding: 8px 20px;
.font-rem(14); .font-rem(14);
background-color: @black; background-color: @primary;
color: @white; color: @white;
border: 2px solid @black !important; border-width: 2px !important;
.rounded(4px); border-style: solid !important;
border-color: @primary;
.rounded(3px);
&:visited { &:visited {
color: @white; color: @white;
} }
&:hover { &:hover {
background-color: @white; background-color: @white;
color: @black; color: @primary;
} }
&:active { }
.translate(0, 2px); .btn-success {
background-color: @success;
color: @white;
border-color: @success;
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @success;
}
}
.btn-warning {
background-color: @warning;
color: @white;
border-color: @warning;
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @warning;
}
}
.btn-danger {
background-color: @danger;
color: @white;
border-color: @danger;
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @danger;
}
}
.btn-info {
background-color: @info;
color: @white;
border-color: @info;
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @info;
} }
} }
/* Well ================================================= */ /* Well ================================================= */

View file

@ -6,7 +6,7 @@
@code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; @code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
@alt-font: @base-font; @alt-font: @base-font;
// COLOR ==================================================== // COLOR ======================================================
@bodycolor : #fff; @bodycolor : #fff;
@body-color : @bodycolor; @body-color : @bodycolor;
@textcolor : #333332; @textcolor : #333332;
@ -18,7 +18,15 @@
@white : #fff; @white : #fff;
@black : #111; @black : #111;
@accentcolor : @black; @accentcolor : @black;
/* Links ================================================= */
// Buttons
@primary : @black;
@success : #5cb85c;
@warning : #dd8338;
@danger : #C64537;
@info : #308cbc;
// Links
@linkcolor : #343434; @linkcolor : #343434;
@link-color: @linkcolor; @link-color: @linkcolor;
@linkcolorhover : darken(@linkcolor, 10); @linkcolorhover : darken(@linkcolor, 10);