N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add alternate button colors from HPSTR theme

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_posts/2011-03-10-sample-post.md
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

2
assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

83
assets/less/elements.less
View file

@ -47,24 +47,71 @@ svg:not(:root) {
} }
/* Buttons ============================================== */ /* Buttons ============================================== */
.btn { .btn {
display: inline-block; display: inline-block;
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;
&:visited { border-color: @primary;
color: @white; .rounded(3px);
} &:visited {
&:hover { color: @white;
background-color: @white; }
color: @black; &:hover {
} background-color: @white;
&:active { color: @primary;
.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 ================================================= */
.well { .well {

16
assets/less/variables.less
View file

@ -6,19 +6,27 @@
@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;
@text-color : @textcolor; @text-color : @textcolor;
@border-color: @text-color; @border-color : @text-color;
@basecolor : #343434; @basecolor : #343434;
@compcolor : spin(@basecolor, 180); @compcolor : spin(@basecolor, 180);
@bordercolor : @basecolor; @bordercolor : @basecolor;
@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);