Skip to content

Instantly share code, notes, and snippets.

@twoolie

twoolie/SassMeister-input-HTML.html

Created June 11, 2014 02:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save twoolie/9aefa3c3cf236e0b5a5e to your computer and use it in GitHub Desktop.
Save twoolie/9aefa3c3cf236e0b5a5e to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<body>
<a href class="btn btn-default">Default</a>
<a href class="btn btn-primary">Primary</a>
<a href class="btn btn-success">Success</a>
<a href class="btn btn-warning">Warning</a>
<a href class="btn btn-danger">Danger</a>
</body>
</html>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
//@import "normalize-scss"
@import "compass"
// colors
$soft-pink: #FF003C
$holland: #FF8A00
$over-easy: #FABE28
$bug-leg: #88C100
$one-day: #00C176
// color mappings
$color-default: #eee
$color-danger: $soft-pink
$color-primary: $one-day
$color-success: $bug-leg
$color-warning: $over-easy
body
padding: 20px !important
font-family: Ubuntu
font-size: 16px
.btn
display: inline-block
padding: .5em 1em
+border-radius(5px)
text-decoration: none
&.btn-default
color: black
background-color: $color-default
+text-shadow(0 1px 2px lighten($color-default,20%))
+box-shadow(0 2px 0 darken($color-default,10%))
&.btn-success
color: white
background-color: $color-success
+text-shadow(0 1px 2px darken($color-success,20%))
+box-shadow(0 2px 0 darken($color-success,10%))
&.btn-primary
color: white
background-color: $color-primary
+text-shadow(0 1px 2px darken($color-primary,20%))
+box-shadow(0 2px 0 darken($color-primary,10%))
&.btn-danger
color: white
background-color: $color-danger
+text-shadow(0 1px 2px darken($color-danger,20%))
+box-shadow(0 2px 0 darken($color-danger,10%))
&.btn-warning
color: white
background-color: $color-warning
+text-shadow(0 1px 3px darken($color-warning,30%))
+box-shadow(0 2px 0 darken($color-warning,20%))
Raw
SassMeister-output.css
body {
padding: 20px !important;
font-family: Ubuntu;
font-size: 16px;
}
.btn {
display: inline-block;
padding: 0.5em 1em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
.btn.btn-default {
color: black;
background-color: #eeeeee;
text-shadow: 0 1px 2px white;
-moz-box-shadow: 0 2px 0 #d4d4d4;
-webkit-box-shadow: 0 2px 0 #d4d4d4;
box-shadow: 0 2px 0 #d4d4d4;
}
.btn.btn-success {
color: white;
background-color: #88c100;
text-shadow: 0 1px 2px #405b00;
-moz-box-shadow: 0 2px 0 #648e00;
-webkit-box-shadow: 0 2px 0 #648e00;
box-shadow: 0 2px 0 #648e00;
}
.btn.btn-primary {
color: white;
background-color: #00c176;
text-shadow: 0 1px 2px #005b38;
-moz-box-shadow: 0 2px 0 #008e57;
-webkit-box-shadow: 0 2px 0 #008e57;
box-shadow: 0 2px 0 #008e57;
}
.btn.btn-danger {
color: white;
background-color: #ff003c;
text-shadow: 0 1px 2px #990024;
-moz-box-shadow: 0 2px 0 #cc0030;
-webkit-box-shadow: 0 2px 0 #cc0030;
box-shadow: 0 2px 0 #cc0030;
}
.btn.btn-warning {
color: white;
background-color: #fabe28;
text-shadow: 0 1px 3px #866103;
-moz-box-shadow: 0 2px 0 #b88404;
-webkit-box-shadow: 0 2px 0 #b88404;
box-shadow: 0 2px 0 #b88404;
}
Raw
SassMeister-rendered.html
<html>
<body>
<a href class="btn btn-default">Default</a>
<a href class="btn btn-primary">Primary</a>
<a href class="btn btn-success">Success</a>
<a href class="btn btn-warning">Warning</a>
<a href class="btn btn-danger">Danger</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment