N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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.
<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

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 ============================================== */
.btn {
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
.font-rem(14);
background-color: @black;
color: @white;
border: 2px solid @black !important;
.rounded(4px);
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @black;
}
&:active {
.translate(0, 2px);
}
display: inline-block;
margin-bottom: 20px;
padding: 8px 20px;
.font-rem(14);
background-color: @primary;
color: @white;
border-width: 2px !important;
border-style: solid !important;
border-color: @primary;
.rounded(3px);
&:visited {
color: @white;
}
&:hover {
background-color: @white;
color: @primary;
}
}
.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 {

16
assets/less/variables.less
View file

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