Skip to content

Instantly share code, notes, and snippets.

@SandyLudosky

SandyLudosky/SassMeister-input-HTML.html

Created November 30, 2014 22:36
Show Gist options
  • Save SandyLudosky/04a07fbc8f48e1f36ffc to your computer and use it in GitHub Desktop.
Save SandyLudosky/04a07fbc8f48e1f36ffc to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<body>
<div class="box"><h4>Grey Box</h4></div>
<div class="success"><h4>Green Box</h4></div>
<div class="error"><h4>Red Box</h4></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
// Place Holders & Extends
// Color Variables
$grey-light: #ddd;
$grey-dark: #444;
$red:#e74c3c;
$red-light: lighten($red, 20);
$red-dark: darken($red, 20);
$red-extradark: darken($red, 40);
$green: #2ecc71;
$green-light: lighten($green, 20);
$green-dark: darken($green, 50);
$green-extradark: darken($green, 80);
// Layout Variables
$margins: 2em;
$padding: 1em;
@mixin border_radius($radius:10px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-o-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
// custom css properties for success and error
@mixin custom ($width:1px, $border_color:$grey-dark, $bg_color:$grey-light, $text_color:$grey-dark ) {
border: $width solid $border_color;
background: $bg_color;
color: $text_color;
@include border_radius;
}
//Placeholders
%checkmark {
&:after{
content: "\2713 ";
margin-left: 1em;
}
}
h4 {
color: $grey-dark;
@extend %checkmark;
}
.box {
margin: $margins;
text-align: center;
@include custom;
}
.success {
@extend .box;
@include custom(1px, $green-extradark, $green-light,$green-extradark);
}
.error {
@extend .box;
@include custom(1px, $red-extradark, $red-light,$red-extradark);
a {
color: $red-dark;
&:hover, &:active, &:focus {
color: $red-extradark;
}
}
}
Raw
SassMeister-output.css
h4:after {
content: "\2713 ";
margin-left: 1em;
}
h4 {
color: #444444;
}
.box, .success, .error {
margin: 2em;
text-align: center;
border: 1px solid #444444;
background: #dddddd;
color: #444444;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.success {
border: 1px solid black;
background: #7ee2a8;
color: black;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.error {
border: 1px solid #4d100a;
background: #f29f97;
color: #4d100a;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
.error a {
color: #a82315;
}
.error a:hover, .error a:active, .error a:focus {
color: #4d100a;
}
Raw
SassMeister-rendered.html
<html>
<body>
<div class="box"><h4>Grey Box</h4></div>
<div class="success"><h4>Green Box</h4></div>
<div class="error"><h4>Red Box</h4></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment