109 lines
3.1 KiB
SCSS
109 lines
3.1 KiB
SCSS
@import "blueprint/reset";
|
|
@import "base";
|
|
@import "fancy-fonts";
|
|
|
|
$border_color: #aaaaaa;
|
|
|
|
#container {
|
|
@include container; }
|
|
|
|
$min_width: 340px;
|
|
|
|
.examples {
|
|
margin-bottom: 1em;
|
|
@include row;
|
|
min-width: $min_width * 3 + 20px * 2 + 20px; }
|
|
|
|
h1 {
|
|
text-align: center; }
|
|
|
|
.example, .gutter {
|
|
min-height: 21em; }
|
|
|
|
.example {
|
|
@include column;
|
|
width: 30%;
|
|
min-width: $min_width;
|
|
border: 4px solid #{$border_color};
|
|
@include border-radius(0.667em);
|
|
@include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px);
|
|
margin-bottom: 1em;
|
|
h2 {
|
|
margin: 0.5em 0 1em;
|
|
text-align: center; } }
|
|
|
|
.inset {
|
|
@include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset);
|
|
}
|
|
|
|
.gutter {
|
|
display: block;
|
|
float: left;
|
|
width: 2.5%;
|
|
min-width: 20px;
|
|
content: " "; }
|
|
|
|
.example {
|
|
@include background-image(linear-gradient(white, #cccccc));
|
|
pre {
|
|
padding: 1em;
|
|
margin: 1em;
|
|
color: white;
|
|
text-shadow: 1px 1px 2px black;
|
|
font-weight: bold; } }
|
|
|
|
#background-clip {
|
|
pre {
|
|
background: transparent #{image_url("example.png")} no-repeat;
|
|
border: 1em solid rgba(255, 0, 0, 0.25); }
|
|
.padding-box {
|
|
@include background-clip(padding-box);
|
|
@include background-origin(padding-box); }
|
|
.border-box {
|
|
@include background-clip(border-box);
|
|
@include background-origin(border-box); } }
|
|
|
|
#background-size {
|
|
pre {
|
|
background: transparent #{image_url("example.png")} no-repeat;
|
|
border: 1em solid #{mix(red, white, 0.5)};
|
|
border: 1em solid rgba(255, 0, 0, 0.25); }
|
|
.top-left {
|
|
@include background-size(50% 50%); }
|
|
.centered {
|
|
@include background-size(50% 50%);
|
|
background-position: center center; } }
|
|
|
|
#gradients {
|
|
.horizontal {
|
|
@include background-image(left, linear-gradient(#d92626, #2626d9)); }
|
|
.vertical {
|
|
@include background-image(linear-gradient(#d92626, #2626d9)); }
|
|
.diagonal {
|
|
@include background-image(linear-gradient(right top, #d92626, #2626d9)); }
|
|
.radial {
|
|
/* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
|
|
@include background-image(radial-gradient(#d92626 10px, #2626d9 150px));
|
|
// +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
|
|
// background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
|
|
// background-color: #2626d9
|
|
}
|
|
.radial-1 {
|
|
// A default radial gradient:
|
|
@include background-image(radial-gradient(#dddddd, #aaaaaa)); }
|
|
.radial-2 {
|
|
// A centered gradient
|
|
@include background-image(radial-gradient(#dddddd, #aaaaaa)); }
|
|
.radial-3 {
|
|
// A centered radial gradient at the top
|
|
@include background-image(radial-gradient(top center, #dddddd, #aaaaaa)); }
|
|
.radial-4 {
|
|
// A centered radial gradient with fixed color stops
|
|
@include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50px)); }
|
|
.radial-5 {
|
|
// A centered gradient with several color stops
|
|
@include background-image(radial-gradient(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
|
|
.radial-6 {
|
|
// A centered gradient with color stops
|
|
@include background-image(radial-gradient(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }
|