111 lines
3.4 KiB
SCSS
111 lines
3.4 KiB
SCSS
@import "blueprint/reset";
|
|
@import "base";
|
|
|
|
$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 box-shadow(darken($border_color, 40), 5px, 5px, 2px);
|
|
margin-bottom: 1em;
|
|
h2 {
|
|
font-family: Angelina;
|
|
margin: 0.5em 0 1em;
|
|
text-align: center; } }
|
|
|
|
.gutter {
|
|
display: block;
|
|
float: left;
|
|
width: 2.5%;
|
|
min-width: 20px;
|
|
content: " "; }
|
|
|
|
.example {
|
|
@include linear-gradient(color_stops(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("fresh-peas.jpg")} 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("fresh-peas.jpg")} 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 linear-gradient(color_stops(#d92626, #2626d9), left); }
|
|
.vertical {
|
|
@include linear-gradient(color_stops(#d92626, #2626d9)); }
|
|
.diagonal {
|
|
@include linear-gradient(color_stops(#d92626, #2626d9), unquote("right top")); }
|
|
.radial {
|
|
/* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
|
|
@include radial-gradient(color_stops(#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:
|
|
/* +radial-gradient(color_stops(#ddd, #aaa)) */
|
|
@include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
|
|
.radial-2 {
|
|
// A centered gradient
|
|
/* +radial-gradient(color_stops(#ddd, #aaa)) */
|
|
@include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
|
|
.radial-3 {
|
|
// A centered radial gradient at the top
|
|
/* +radial-gradient(color_stops(#ddd, #aaa), "top center") */
|
|
@include radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")); }
|
|
.radial-4 {
|
|
// A centered radial gradient with fixed color stops
|
|
/* +radial-gradient(color_stops(#ddd 20px, #aaa 50px)) */
|
|
@include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)); }
|
|
.radial-5 {
|
|
// A centered gradient with several color stops
|
|
/* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00)) */
|
|
@include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
|
|
.radial-6 {
|
|
// A centered gradient with color stops
|
|
/* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c)) */
|
|
@include radial-gradient(color_stops(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }
|