m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 09:56:51 +01:00
Code

icon button fixes, closes #14

Browse Source
This commit is contained in:
Matthias Kretschmann 2014-07-13 01:08:55 +02:00
parent cc8da26f92
commit 0aa8df2005
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
View File

@ -22,7 +22,11 @@ The above picture might be blurry depending on the device you're using so here's
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project. They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a> <a class="btn btn-primary icon icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a> <a class="btn icon icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a> <p class="clearfix">
<a class="btn btn-primary col2" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
<a class="btn btn-primary col2 icon icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a>
<a class="btn col2 icon icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
</p>
## Usage ## Usage

10
_src/assets/styl/buttons.styl
View File

@ -26,7 +26,7 @@
font-weight: $headings-font-weight font-weight: $headings-font-weight
color: $brand-grey color: $brand-grey
text-transform: uppercase text-transform: uppercase
box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7) box-shadow: 0 1px 3px rgba($brand-grey-light, .2), inset 0 1px 0 rgba(255,255,255,.7)
&:hover, &:hover,
&:focus &:focus
@ -51,6 +51,14 @@
opacity: .6 opacity: .6
box-shadow: none box-shadow: none
// grid buttons
&.col2,
&.col3
margin-bottom: ($line-height-computed/2)
@media $breakpoint2
margin-bottom: 0
.btn span .btn span
font-size: .9em font-size: .9em
color: rgba(19, 56, 50, .6) color: rgba(19, 56, 50, .6)

8
_src/assets/styl/icons.styl
View File

@ -28,13 +28,11 @@
.btn& .btn&
font-size: 18px font-size: 18px
margin-right: .3em margin-right: .3em
top: .1em margin-left: -.3em
top: .15em
position: relative position: relative
vertical-align: baseline vertical-align: baseline
line-height: inherit color: inherit
.btn-primary&
color: darken($link-color, 15%)
.icon-twitter:before .icon-twitter:before
content: "\e600" content: "\e600"