mirror of
https://github.com/pattern-lab/patternlab-php.git
synced 2025-01-17 06:08:23 +01:00
Added styleguide-specific.css for styles that should only appear within the Pattern Lab context
This commit is contained in:
Brad Frost
parent
6cf6821a0e
commit
d2a3110f41
4
.gitignore
vendored
4
.gitignore
vendored
@ -20,3 +20,7 @@ latest-change.txt
|
||||
|
||||
/public/styleguide/js/annotations-viewer.js
|
||||
/public/styleguide/js/code-viewer.js
|
||||
|
||||
/public/styleguide/css/states.css
|
||||
/public/styleguide/css/static.css
|
||||
/public/styleguide/css/static.scss
|
||||
|
||||
@ -1,404 +0,0 @@
|
||||
/*
|
||||
colors
|
||||
red: $orange; rgb(229,24,55)
|
||||
gray: #808080;
|
||||
*/
|
||||
|
||||
$orange : #bededf;
|
||||
|
||||
$max-width: 60em;
|
||||
|
||||
/************Reset**************/
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body, div, object, iframe, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
header, footer, nav, section, article, hgroup, figure {
|
||||
display: block;
|
||||
}
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
/************End Reset**************/
|
||||
|
||||
/************Global**************/
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
border-top: 20px solid #000;
|
||||
border-bottom: 20px solid #000;
|
||||
}
|
||||
a {
|
||||
color: #808080;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
img, object, video {
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
a img {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.4em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
h1 a, h2 a, h3 a {
|
||||
display: block;
|
||||
color: #000;
|
||||
}
|
||||
h1 a:hover, h2 a:hover, h3 a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5em solid #ddd;
|
||||
padding-left: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
small {
|
||||
color: $orange;
|
||||
}
|
||||
input[type=search] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
/************End Global**************/
|
||||
|
||||
/************Classes**************/
|
||||
.inactive {
|
||||
color: #ddd;
|
||||
}
|
||||
/************End Classes**************/
|
||||
|
||||
/************Structure**************/
|
||||
.container {
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[role=main] {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/*Footer*/
|
||||
[role=contentinfo] {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
margin: 0 -1em;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
max-width: $max-width;
|
||||
padding: 0 1em;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
/*End Footer*/
|
||||
|
||||
/*Grid*/
|
||||
.grid {
|
||||
margin: 0 -1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid > h2 {
|
||||
margin-left: 0.45em;
|
||||
}
|
||||
.grid > section {
|
||||
padding: 1em 1em 0.5em;
|
||||
}
|
||||
.grid > section:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid ul li {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.featured:after {
|
||||
content: "*";
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Fluid*/
|
||||
.fluid {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
/*Homepage*/
|
||||
.home h1 {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.intro {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.intro a:hover ,.intro a:focus {
|
||||
color: #000;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
.ani {
|
||||
position: relative;
|
||||
height: 15em;
|
||||
margin: 1em 0 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.ani div {
|
||||
width: 100%;
|
||||
}
|
||||
.ani div b {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
background: rgba(229,24,55,0.22);
|
||||
}
|
||||
|
||||
|
||||
/*Patterns*/
|
||||
.mod {
|
||||
padding: 1em;
|
||||
}
|
||||
.pattern {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #808080;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pattern-description h1 {
|
||||
font-size: 3.4em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.pattern-description {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pattern-description ul, .pattern-description ol {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.pattern-description li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/*Blog*/
|
||||
/*Blog Header*/
|
||||
.blog .container {
|
||||
max-width: 62em;
|
||||
}
|
||||
.blog header[role=banner] {
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
padding: 2em 0 1em;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.blog-logo {
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.blog-logo img {
|
||||
width: 3.3em;
|
||||
}
|
||||
.blog-logo a {
|
||||
color: #000;
|
||||
}
|
||||
.search-form {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.search-field {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #808080;
|
||||
outline: none;
|
||||
}
|
||||
.search-field:focus {
|
||||
background: $orange;
|
||||
color: #fff;
|
||||
}
|
||||
.search-field:focus::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-field:focus :-moz-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog .nav {
|
||||
clear: both;
|
||||
}
|
||||
.blog .nav a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
.blog .nav a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Posts*/
|
||||
.posts ol > li {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.posts h2 {
|
||||
font-size: 1.4em;
|
||||
margin: 0.28em 0 0.1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.posts h2 a {
|
||||
color: #000;
|
||||
}
|
||||
.posts h2 a:hover, .posts h2 a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
.permalink {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
.post-body a {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.posts blockquote {
|
||||
margin: 0 0 1em;
|
||||
color: #666;
|
||||
border-left: 0.25em solid #ccc;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.tags {
|
||||
float: left;
|
||||
}
|
||||
.tags li {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.posts ol > li .tags a, .permalink {
|
||||
color: #ccc;
|
||||
-webkit-transition: color 0.3s ease-out;
|
||||
-moz-transition: color 0.3s ease-out;
|
||||
-ms-transition: color 0.3s ease-out;
|
||||
-o-transition: color 0.3s ease-out;
|
||||
transition: color 0.3s ease-out;
|
||||
}
|
||||
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
|
||||
color: #808080;
|
||||
}
|
||||
.blog-nav {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.posts .blog-nav a {
|
||||
border: 0;
|
||||
}
|
||||
.nav-next {
|
||||
float: right;
|
||||
}
|
||||
.nav-prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 1.4em;
|
||||
}
|
||||
.sidebar div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.sidebar a {
|
||||
color: #808080;
|
||||
}
|
||||
.sidebar a:hover, .sidebar a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.top {
|
||||
clear: both;
|
||||
display: block;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.top:before {
|
||||
content: '▲';
|
||||
}
|
||||
|
||||
80
core/styleguide/css/styleguide-specific.css
Normal file
80
core/styleguide/css/styleguide-specific.css
Normal file
@ -0,0 +1,80 @@
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB-SPECIFIC STYLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
|
||||
* This is helpful for displaying demo styles for grids, animations, color swatches, etc
|
||||
* It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
|
||||
* These styles will not be your production CSS.
|
||||
*/
|
||||
/* Style Guide Interface Colors */
|
||||
/* Typography */
|
||||
/* Defaults */
|
||||
/* Dimensions */
|
||||
/* Breakpoints */
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: #dddddd;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 1em !important; }
|
||||
.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
|
||||
color: #dddddd;
|
||||
background: gray; }
|
||||
.demo .gi .gi, .demo .demo-block .gi {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #dddddd; }
|
||||
.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
|
||||
background: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.demo-animate {
|
||||
background: #ddd;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center; }
|
||||
|
||||
.animate-move {
|
||||
position: relative; }
|
||||
.animate-move .demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: gray; }
|
||||
.animate-move:hover > .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px; }
|
||||
|
||||
.sg-colors {
|
||||
overflow: hidden; }
|
||||
.sg-colors li {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0; }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-colors li {
|
||||
float: left;
|
||||
width: 5em; } }
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%; }
|
||||
@media all and (max-width: 30em) {
|
||||
.sg-swatch {
|
||||
float: left;
|
||||
margin-right: 0.3em; } }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-swatch {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em; } }
|
||||
|
||||
.sg-label {
|
||||
line-height: 1; }
|
||||
141
core/styleguide/css/styleguide-specific.scss
Normal file
141
core/styleguide/css/styleguide-specific.scss
Normal file
@ -0,0 +1,141 @@
|
||||
/*------------------------------------*\
|
||||
$PATTERN LAB-SPECIFIC STYLES
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
|
||||
* This is helpful for displaying demo styles for grids, animations, color swatches, etc
|
||||
* It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
|
||||
* These styles will not be your production CSS.
|
||||
*/
|
||||
|
||||
|
||||
/* Style Guide Interface Colors */
|
||||
$sg-primary : #222;
|
||||
$sg-secondary : #808080;
|
||||
$sg-tertiary : #ddd;
|
||||
$sg-quaternary : #fff;
|
||||
$sg-quinary : #999;
|
||||
$sg-tint : rgba(255,255,255,0.05);
|
||||
$sg-tint-2 : rgba(255,255,255,0.25);
|
||||
$sg-tone : rgba(0,0,0,0.1);
|
||||
$sg-tone-2 : rgba(0,0,0,0.3);
|
||||
|
||||
/* Typography */
|
||||
$sg-font-size-norm : 100%;
|
||||
$sg-font-size-sm : 70%;
|
||||
$sg-font-size-large : 120%;
|
||||
|
||||
/* Defaults */
|
||||
$sg-space : 1em;
|
||||
$sg-doublespace : $sg-space*2;
|
||||
$sg-pad : 1em;
|
||||
$sg-pad-half : $sg-pad/2;
|
||||
|
||||
/* Dimensions */
|
||||
$offset-top: 2em;
|
||||
|
||||
/* Breakpoints */
|
||||
$sg-bp-small : 24em;
|
||||
$sg-bp-small-2 : 30em;
|
||||
$sg-bp-med : 48em;
|
||||
$sg-bp-large : 72em;
|
||||
$sg-bp-xl : 80em;
|
||||
|
||||
$animate-quick: 0.2s;
|
||||
|
||||
|
||||
// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: $sg-tertiary;
|
||||
color: $sg-secondary;
|
||||
text-align: center;
|
||||
margin-bottom: $sg-pad-half;
|
||||
padding: 1em !important;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
color: $sg-tertiary;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
.gi {
|
||||
background: $sg-tone;
|
||||
color: $sg-tertiary;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: $sg-tone-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Demo box for animation
|
||||
.demo-animate {
|
||||
background: #ddd;
|
||||
padding: $sg-pad;
|
||||
margin-bottom: $sg-space;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//Animate Demo to show
|
||||
.animate-move {
|
||||
position: relative;
|
||||
|
||||
.demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style Guide color swatches
|
||||
.sg-colors {
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
border: 1px solid $sg-tertiary;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
width: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%;
|
||||
|
||||
@media all and (max-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sg-label {
|
||||
line-height: 1;
|
||||
}
|
||||
@ -478,35 +478,6 @@ span.sg-pattern-state:before {
|
||||
.sg-pattern-head a:hover {
|
||||
color: #222222; }
|
||||
|
||||
.sg-colors {
|
||||
overflow: hidden; }
|
||||
.sg-colors li {
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0; }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-colors li {
|
||||
float: left;
|
||||
width: 5em; } }
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%; }
|
||||
@media all and (max-width: 30em) {
|
||||
.sg-swatch {
|
||||
float: left;
|
||||
margin-right: 0.3em; } }
|
||||
@media all and (min-width: 30em) {
|
||||
.sg-swatch {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em; } }
|
||||
|
||||
.sg-label {
|
||||
line-height: 1; }
|
||||
|
||||
.sg-view-container {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@ -730,40 +701,3 @@ div.clear {
|
||||
|
||||
/******************************************************************/
|
||||
/* End Pattern Lab Interface code */
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: #dddddd;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 1em !important; }
|
||||
.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
|
||||
color: #dddddd;
|
||||
background: gray; }
|
||||
.demo .gi .gi, .demo .demo-block .gi {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #dddddd; }
|
||||
.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
|
||||
background: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.demo-animate {
|
||||
background: #dddddd;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center; }
|
||||
|
||||
.animate-move {
|
||||
position: relative; }
|
||||
.animate-move .demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: gray; }
|
||||
.animate-move:hover > .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px; }
|
||||
|
||||
@ -468,7 +468,7 @@ $animate-quick: 0.2s;
|
||||
}
|
||||
|
||||
//Pattern States (active, inprogress, complete, etc)
|
||||
|
||||
|
||||
/* basic styling */
|
||||
.sg-pattern-state:before {
|
||||
margin-right: 4px;
|
||||
@ -677,45 +677,6 @@ span.sg-pattern-state:before {
|
||||
}
|
||||
}
|
||||
|
||||
// Style Guide color swatches
|
||||
.sg-colors {
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
border: 1px solid $sg-tertiary;
|
||||
padding: 0.3em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
width: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sg-swatch {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
width: 50%;
|
||||
|
||||
@media all and (max-width: $sg-bp-small-2) {
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
@media all and (min-width: $sg-bp-small-2) {
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sg-label {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
//Annotations and code view container
|
||||
.sg-view-container {
|
||||
-moz-box-sizing: border-box;
|
||||
@ -989,60 +950,4 @@ div.clear {
|
||||
}
|
||||
|
||||
/******************************************************************/
|
||||
/* End Pattern Lab Interface code */
|
||||
|
||||
// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
|
||||
.demo {
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.demo .gi, .demo .demo-block {
|
||||
background: $sg-tertiary;
|
||||
color: $sg-secondary;
|
||||
text-align: center;
|
||||
margin-bottom: $sg-pad-half;
|
||||
padding: 1em !important;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
color: $sg-tertiary;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
.gi {
|
||||
background: $sg-tone;
|
||||
color: $sg-tertiary;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: $sg-tone-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Demo box for animation
|
||||
.demo-animate {
|
||||
background: $sg-tertiary;
|
||||
padding: $sg-pad;
|
||||
margin-bottom: $sg-space;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//Animate Demo to show
|
||||
.animate-move {
|
||||
position: relative;
|
||||
|
||||
.demo-shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: $sg-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .demo-shape {
|
||||
left: 100%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End Pattern Lab Interface code */
|
||||
@ -16,6 +16,7 @@
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
|
||||
<link rel="stylesheet" href="../../styleguide/css/styleguide.css?1393212425" media="all">
|
||||
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css?1393212425" media="all" />
|
||||
|
||||
|
||||
<!-- End Pattern Lab -->
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styleguide/css/styleguide.css?{{ cacheBuster }}" media="all" />
|
||||
<link rel="stylesheet" href="styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all" />
|
||||
<link rel="stylesheet" href="styleguide/css/vendor/typeahead.css?{{ cacheBuster }}" media="all" />
|
||||
<link rel="stylesheet" href="styleguide/css/vendor/prism.css?{{ cacheBuster }}" media="all" />
|
||||
|
||||
@ -85,7 +86,7 @@
|
||||
<div id="sg-comments-container"></div>
|
||||
</script>
|
||||
|
||||
<!-- the mess of javascript that is included to make things work -->
|
||||
<!-- Included JavaScript that makes everything work -->
|
||||
<script src="styleguide/js/vendor/prism.js?{{ cacheBuster }}"></script>
|
||||
<script src="styleguide/js/vendor/jwerty.js?{{ cacheBuster }}"></script>
|
||||
<script src="styleguide/js/vendor/classlist-polyfill.js?{{ cacheBuster}}"></script>
|
||||
|
||||
@ -6,4 +6,5 @@
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
|
||||
<link rel="stylesheet" href="../../styleguide/css/styleguide.css?{{ cacheBuster }}" media="all">
|
||||
<link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all" />
|
||||
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
/* basic styling */
|
||||
.sg-pattern-state:before {
|
||||
margin-right: 4px;
|
||||
content: "\2022";
|
||||
display: inline-block;
|
||||
margin-bottom: -4px;
|
||||
font-size: 18px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* nav styling */
|
||||
.sg-nav .sg-pattern-state:before {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: -4px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sg-sub-nav .sg-pattern-state:before {
|
||||
margin-left: -11px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* call out for pattern's pattern state */
|
||||
span.sg-pattern-state {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
span.sg-pattern-state:before {
|
||||
margin-bottom: -3px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* pattern states */
|
||||
.inprogress:before {
|
||||
color: #FF4136 !important;
|
||||
}
|
||||
|
||||
.inreview:before {
|
||||
color: #FFCC00 !important;
|
||||
}
|
||||
|
||||
.complete:before {
|
||||
color: #2ECC40 !important;
|
||||
}
|
||||
@ -1,374 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
colors
|
||||
red: $orange; rgb(229,24,55)
|
||||
gray: #808080;
|
||||
*/
|
||||
/************Reset**************/
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
html, body, div, object, iframe, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
header, footer, nav, section, article, hgroup, figure {
|
||||
display: block; }
|
||||
|
||||
legend {
|
||||
display: none; }
|
||||
|
||||
/************End Reset**************/
|
||||
/************Global**************/
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
border-top: 20px solid #000;
|
||||
border-bottom: 20px solid #000; }
|
||||
|
||||
a {
|
||||
color: #808080;
|
||||
text-decoration: none; }
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #bededf; }
|
||||
|
||||
p {
|
||||
margin: 0 0 1em; }
|
||||
|
||||
img, object, video {
|
||||
max-width: 100%;
|
||||
border: 0; }
|
||||
|
||||
a img {
|
||||
border: 0;
|
||||
outline: 0; }
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.2em; }
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.2em; }
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.4em;
|
||||
border-bottom: 1px solid #ccc; }
|
||||
|
||||
h1 a, h2 a, h3 a {
|
||||
display: block;
|
||||
color: #000; }
|
||||
|
||||
h1 a:hover, h2 a:hover, h3 a:hover {
|
||||
color: #bededf; }
|
||||
|
||||
blockquote {
|
||||
border-left: 0.5em solid #ddd;
|
||||
padding-left: 1em;
|
||||
margin-left: 1em; }
|
||||
|
||||
small {
|
||||
color: #bededf; }
|
||||
|
||||
input[type=search] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #808080; }
|
||||
|
||||
:-moz-placeholder {
|
||||
color: #808080; }
|
||||
|
||||
/************End Global**************/
|
||||
/************Classes**************/
|
||||
.inactive {
|
||||
color: #ddd; }
|
||||
|
||||
/************End Classes**************/
|
||||
/************Structure**************/
|
||||
.container {
|
||||
max-width: 60em;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
overflow: hidden; }
|
||||
|
||||
[role=main] {
|
||||
padding-bottom: 1em; }
|
||||
|
||||
/*Footer*/
|
||||
[role=contentinfo] {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
margin: 0 -1em;
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
[role=contentinfo] > div {
|
||||
max-width: 60em;
|
||||
padding: 0 1em;
|
||||
margin: 0 auto;
|
||||
overflow: hidden; }
|
||||
|
||||
/*End Footer*/
|
||||
/*Grid*/
|
||||
.grid {
|
||||
margin: 0 -1em;
|
||||
overflow: hidden; }
|
||||
|
||||
.grid:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out; }
|
||||
|
||||
.grid > h2 {
|
||||
margin-left: 0.45em; }
|
||||
|
||||
.grid > section {
|
||||
padding: 1em 1em 0.5em; }
|
||||
|
||||
.grid > section:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out; }
|
||||
|
||||
.grid ul {
|
||||
overflow: hidden; }
|
||||
|
||||
.grid ul li {
|
||||
margin-bottom: 0.3em; }
|
||||
|
||||
.featured:after {
|
||||
content: "*";
|
||||
color: #bededf; }
|
||||
|
||||
/*Fluid*/
|
||||
.fluid {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 40em; }
|
||||
|
||||
/*Homepage*/
|
||||
.home h1 {
|
||||
margin-bottom: 0.2em; }
|
||||
|
||||
.intro {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
margin: 0 auto; }
|
||||
|
||||
.intro a:hover, .intro a:focus {
|
||||
color: #000;
|
||||
border-bottom-color: #000; }
|
||||
|
||||
.ani {
|
||||
position: relative;
|
||||
height: 15em;
|
||||
margin: 1em 0 0;
|
||||
width: 100%;
|
||||
z-index: 0; }
|
||||
|
||||
.ani div {
|
||||
width: 100%; }
|
||||
|
||||
.ani div b {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
background: rgba(229, 24, 55, 0.22); }
|
||||
|
||||
/*Patterns*/
|
||||
.mod {
|
||||
padding: 1em; }
|
||||
|
||||
.pattern {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #808080;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden; }
|
||||
|
||||
.pattern-description h1 {
|
||||
font-size: 3.4em;
|
||||
margin-bottom: 0.5em; }
|
||||
|
||||
.pattern-description {
|
||||
max-width: 40em;
|
||||
margin: 0 auto; }
|
||||
|
||||
.pattern-description ul, .pattern-description ol {
|
||||
margin-bottom: 2em; }
|
||||
|
||||
.pattern-description li {
|
||||
margin-bottom: 1em; }
|
||||
|
||||
/*Blog*/
|
||||
/*Blog Header*/
|
||||
.blog .container {
|
||||
max-width: 62em; }
|
||||
|
||||
.blog header[role=banner] {
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
padding: 2em 0 1em;
|
||||
border-bottom: 1px solid #000; }
|
||||
|
||||
.blog-logo {
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 1em; }
|
||||
|
||||
.blog-logo img {
|
||||
width: 3.3em; }
|
||||
|
||||
.blog-logo a {
|
||||
color: #000; }
|
||||
|
||||
.search-form {
|
||||
width: 100%;
|
||||
margin-bottom: 1em; }
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #808080;
|
||||
outline: none; }
|
||||
|
||||
.search-field:focus {
|
||||
background: #bededf;
|
||||
color: #fff; }
|
||||
|
||||
.search-field:focus::-webkit-input-placeholder {
|
||||
color: #fff; }
|
||||
|
||||
.search-field:focus :-moz-placeholder {
|
||||
color: #fff; }
|
||||
|
||||
.blog .nav {
|
||||
clear: both; }
|
||||
|
||||
.blog .nav a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #000; }
|
||||
|
||||
.blog .nav a:hover {
|
||||
color: #bededf; }
|
||||
|
||||
/*Posts*/
|
||||
.posts ol > li {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden; }
|
||||
|
||||
.posts h2 {
|
||||
font-size: 1.4em;
|
||||
margin: 0.28em 0 0.1em;
|
||||
font-weight: normal; }
|
||||
|
||||
.posts h2 a {
|
||||
color: #000; }
|
||||
|
||||
.posts h2 a:hover, .posts h2 a:focus {
|
||||
color: #bededf; }
|
||||
|
||||
.permalink {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 1.2em; }
|
||||
|
||||
.post-body a {
|
||||
border-bottom: 1px solid #ccc; }
|
||||
|
||||
.posts blockquote {
|
||||
margin: 0 0 1em;
|
||||
color: #666;
|
||||
border-left: 0.25em solid #ccc;
|
||||
padding-left: 1em; }
|
||||
|
||||
.tags {
|
||||
float: left; }
|
||||
|
||||
.tags li {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-right: 0.5em; }
|
||||
|
||||
.posts ol > li .tags a, .permalink {
|
||||
color: #ccc;
|
||||
-webkit-transition: color 0.3s ease-out;
|
||||
-moz-transition: color 0.3s ease-out;
|
||||
-ms-transition: color 0.3s ease-out;
|
||||
-o-transition: color 0.3s ease-out;
|
||||
transition: color 0.3s ease-out; }
|
||||
|
||||
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
|
||||
color: #808080; }
|
||||
|
||||
.blog-nav {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding: 1em 0; }
|
||||
|
||||
.posts .blog-nav a {
|
||||
border: 0; }
|
||||
|
||||
.nav-next {
|
||||
float: right; }
|
||||
|
||||
.nav-prev {
|
||||
float: left; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 1.4em; }
|
||||
|
||||
.sidebar div {
|
||||
margin-bottom: 2em; }
|
||||
|
||||
.sidebar h3 {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #000; }
|
||||
|
||||
.sidebar a {
|
||||
color: #808080; }
|
||||
|
||||
.sidebar a:hover, .sidebar a:focus {
|
||||
color: #bededf; }
|
||||
|
||||
.top {
|
||||
clear: both;
|
||||
display: block;
|
||||
padding: 1em 0; }
|
||||
|
||||
.top:before {
|
||||
content: '▲'; }
|
||||
@ -1,404 +0,0 @@
|
||||
/*
|
||||
colors
|
||||
red: $orange; rgb(229,24,55)
|
||||
gray: #808080;
|
||||
*/
|
||||
|
||||
$orange : #bededf;
|
||||
|
||||
$max-width: 60em;
|
||||
|
||||
/************Reset**************/
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body, div, object, iframe, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
header, footer, nav, section, article, hgroup, figure {
|
||||
display: block;
|
||||
}
|
||||
legend {
|
||||
display: none;
|
||||
}
|
||||
/************End Reset**************/
|
||||
|
||||
/************Global**************/
|
||||
body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
padding: 0;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
border-top: 20px solid #000;
|
||||
border-bottom: 20px solid #000;
|
||||
}
|
||||
a {
|
||||
color: #808080;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
img, object, video {
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
a img {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1.1;
|
||||
padding-bottom: 0.4em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
h1 a, h2 a, h3 a {
|
||||
display: block;
|
||||
color: #000;
|
||||
}
|
||||
h1 a:hover, h2 a:hover, h3 a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5em solid #ddd;
|
||||
padding-left: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
small {
|
||||
color: $orange;
|
||||
}
|
||||
input[type=search] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
/************End Global**************/
|
||||
|
||||
/************Classes**************/
|
||||
.inactive {
|
||||
color: #ddd;
|
||||
}
|
||||
/************End Classes**************/
|
||||
|
||||
/************Structure**************/
|
||||
.container {
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[role=main] {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
/*Footer*/
|
||||
[role=contentinfo] {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
margin: 0 -1em;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
max-width: $max-width;
|
||||
padding: 0 1em;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
/*End Footer*/
|
||||
|
||||
/*Grid*/
|
||||
.grid {
|
||||
margin: 0 -1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid > h2 {
|
||||
margin-left: 0.45em;
|
||||
}
|
||||
.grid > section {
|
||||
padding: 1em 1em 0.5em;
|
||||
}
|
||||
.grid > section:target {
|
||||
-webkit-animation: fadeout 5s 1 ease-out;
|
||||
-moz-animation: fadeout 5s 1 ease-out;
|
||||
-o-animation: fadeout 5s 1 ease-out;
|
||||
animation: fadeout 5s 1 ease-out;
|
||||
}
|
||||
.grid ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid ul li {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.featured:after {
|
||||
content: "*";
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Fluid*/
|
||||
.fluid {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
/*Homepage*/
|
||||
.home h1 {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
.intro {
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.intro a:hover ,.intro a:focus {
|
||||
color: #000;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
.ani {
|
||||
position: relative;
|
||||
height: 15em;
|
||||
margin: 1em 0 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.ani div {
|
||||
width: 100%;
|
||||
}
|
||||
.ani div b {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
background: rgba(229,24,55,0.22);
|
||||
}
|
||||
|
||||
|
||||
/*Patterns*/
|
||||
.mod {
|
||||
padding: 1em;
|
||||
}
|
||||
.pattern {
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #808080;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.pattern-description h1 {
|
||||
font-size: 3.4em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.pattern-description {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pattern-description ul, .pattern-description ol {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.pattern-description li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/*Blog*/
|
||||
/*Blog Header*/
|
||||
.blog .container {
|
||||
max-width: 62em;
|
||||
}
|
||||
.blog header[role=banner] {
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
padding: 2em 0 1em;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.blog-logo {
|
||||
font-weight: normal;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.blog-logo img {
|
||||
width: 3.3em;
|
||||
}
|
||||
.blog-logo a {
|
||||
color: #000;
|
||||
}
|
||||
.search-form {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.search-field {
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #808080;
|
||||
outline: none;
|
||||
}
|
||||
.search-field:focus {
|
||||
background: $orange;
|
||||
color: #fff;
|
||||
}
|
||||
.search-field:focus::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-field:focus :-moz-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blog .nav {
|
||||
clear: both;
|
||||
}
|
||||
.blog .nav a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
.blog .nav a:hover {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
/*Posts*/
|
||||
.posts ol > li {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.posts h2 {
|
||||
font-size: 1.4em;
|
||||
margin: 0.28em 0 0.1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.posts h2 a {
|
||||
color: #000;
|
||||
}
|
||||
.posts h2 a:hover, .posts h2 a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
.permalink {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
.post-body a {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.posts blockquote {
|
||||
margin: 0 0 1em;
|
||||
color: #666;
|
||||
border-left: 0.25em solid #ccc;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.tags {
|
||||
float: left;
|
||||
}
|
||||
.tags li {
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.posts ol > li .tags a, .permalink {
|
||||
color: #ccc;
|
||||
-webkit-transition: color 0.3s ease-out;
|
||||
-moz-transition: color 0.3s ease-out;
|
||||
-ms-transition: color 0.3s ease-out;
|
||||
-o-transition: color 0.3s ease-out;
|
||||
transition: color 0.3s ease-out;
|
||||
}
|
||||
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
|
||||
color: #808080;
|
||||
}
|
||||
.blog-nav {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.posts .blog-nav a {
|
||||
border: 0;
|
||||
}
|
||||
.nav-next {
|
||||
float: right;
|
||||
}
|
||||
.nav-prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 1.4em;
|
||||
}
|
||||
.sidebar div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.sidebar a {
|
||||
color: #808080;
|
||||
}
|
||||
.sidebar a:hover, .sidebar a:focus {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.top {
|
||||
clear: both;
|
||||
display: block;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.top:before {
|
||||
content: '▲';
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user