Finished SCSS conversion
This commit is contained in:
parent
4294551c95
commit
0b1467d62c
5
README
5
README
@ -1,6 +1,5 @@
|
|||||||
Skeleton > SCSS
|
Skeleton SCSS Conversion
|
||||||
======================
|
============================
|
||||||
I'll expand this and finish what I started when I have more time to spend on it.
|
|
||||||
|
|
||||||
Compile with:
|
Compile with:
|
||||||
sass scss/style.scss:stylesheets/style.css
|
sass scss/style.scss:stylesheets/style.css
|
@ -1,33 +1,19 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.2
|
|
||||||
* Copyright 2011, Dave Gamache
|
|
||||||
* www.getskeleton.com
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
* 6/20/2012
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* #Buttons
|
/* #Buttons
|
||||||
================================================== */
|
================================================== */
|
||||||
|
|
||||||
.button,
|
.button,
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
input[type="button"] {
|
input[type="button"] {
|
||||||
@include button_bg;
|
@include vertical-gradient($form_button_gradient_start, $form_button_gradient_end);
|
||||||
border: 1px solid #aaa;
|
@include button_border($form_button_border_rightbottom, $form_button_border_topleft);
|
||||||
border-top: 1px solid #ccc;
|
@include border-radius($form_button_border_radius);
|
||||||
border-left: 1px solid #ccc;
|
color: $form_button_text_colour;
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #444;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-shadow: 0 1px rgba(255, 255, 255, .75);
|
text-shadow: $form_button_text_shadow;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
@ -40,11 +26,9 @@ button:hover,
|
|||||||
input[type="submit"]:hover,
|
input[type="submit"]:hover,
|
||||||
input[type="reset"]:hover,
|
input[type="reset"]:hover,
|
||||||
input[type="button"]:hover {
|
input[type="button"]:hover {
|
||||||
@include button_hover_bg;
|
@include vertical-gradient($form_button_hover_gradient_start, $form_button_hover_gradient_end);
|
||||||
color: #222;
|
color: $form_button_hover_text_colour;
|
||||||
border: 1px solid #888;
|
@include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft);
|
||||||
border-top: 1px solid #aaa;
|
|
||||||
border-left: 1px solid #aaa;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:active,
|
.button:active,
|
||||||
@ -52,8 +36,8 @@ button:active,
|
|||||||
input[type="submit"]:active,
|
input[type="submit"]:active,
|
||||||
input[type="reset"]:active,
|
input[type="reset"]:active,
|
||||||
input[type="button"]:active {
|
input[type="button"]:active {
|
||||||
@include button_active_bg;
|
@include vertical-gradient($form_button_active_gradient_start, $form_button_active_gradient_end);
|
||||||
border: 1px solid #666;
|
border: $form_button_active_border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.full-width,
|
.button.full-width,
|
||||||
@ -90,20 +74,18 @@ input[type="password"],
|
|||||||
input[type="email"],
|
input[type="email"],
|
||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
border: 1px solid #ccc;
|
border: $form_input_border;
|
||||||
padding: 6px 4px;
|
padding: 6px 4px;
|
||||||
outline: none;
|
outline: none;
|
||||||
-moz-border-radius: 2px;
|
@include border-radius(2px);
|
||||||
-webkit-border-radius: 2px;
|
font: 13px $form_element_font;
|
||||||
border-radius: 2px;
|
color: $form_input_text_colour;
|
||||||
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
color: #777;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 210px;
|
width: 210px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background: #fff;
|
background: $form_input_background;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
@ -114,11 +96,9 @@ input[type="text"]:focus,
|
|||||||
input[type="password"]:focus,
|
input[type="password"]:focus,
|
||||||
input[type="email"]:focus,
|
input[type="email"]:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border: 1px solid #aaa;
|
border: $form_input_focus_border;
|
||||||
color: #444;
|
color: $form_input_focus_text_colour;
|
||||||
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
|
@include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2))
|
||||||
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
|
|
||||||
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
@ -144,5 +124,5 @@ label span,
|
|||||||
legend span {
|
legend span {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #444;
|
color: $form_label_legend_colour;
|
||||||
}
|
}
|
@ -1,12 +1,3 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.2
|
|
||||||
* Copyright 2011, Dave Gamache
|
|
||||||
* www.getskeleton.com
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
* 6/20/2012
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* #Base 960 Grid
|
/* #Base 960 Grid
|
||||||
================================================== */
|
================================================== */
|
||||||
|
|
||||||
@ -194,7 +185,6 @@
|
|||||||
.container .two-thirds.column { width: 420px; }
|
.container .two-thirds.column { width: 420px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* #Clearing
|
/* #Clearing
|
||||||
================================================== */
|
================================================== */
|
||||||
|
|
7
scss/_images.scss
Normal file
7
scss/_images.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/* #Images
|
||||||
|
================================================== */
|
||||||
|
|
||||||
|
img.scale-with-grid {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
15
scss/_links.scss
Normal file
15
scss/_links.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/* #Links
|
||||||
|
================================================== */
|
||||||
|
a, a:visited {
|
||||||
|
color: $link_colour;
|
||||||
|
text-decoration: underline;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: $link_hover_colour;
|
||||||
|
}
|
||||||
|
|
||||||
|
p a, p a:visited {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
@ -1,12 +1,3 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.2
|
|
||||||
* Copyright 2011, Dave Gamache
|
|
||||||
* www.getskeleton.com
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
* 6/20/2012
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* #Lists
|
/* #Lists
|
||||||
================================================== */
|
================================================== */
|
||||||
ul, ol {
|
ul, ol {
|
112
scss/_mixins.scss
Normal file
112
scss/_mixins.scss
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
@mixin button_border($rightbottom, $topleft) {
|
||||||
|
border: $rightbottom;
|
||||||
|
border-top: $topleft;
|
||||||
|
border-left: $topleft;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin col-count($colCount, $colSpacing) {
|
||||||
|
column-count: $colCount;
|
||||||
|
column-gap: $colSpacing;
|
||||||
|
-webkit-column-count: $colCount;
|
||||||
|
-webkit-column-gap: $colSpacing;
|
||||||
|
-moz-column-count: $colCount;
|
||||||
|
-moz-column-gap: $colSpacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin size($height, $width) {
|
||||||
|
height: $height;
|
||||||
|
width: $width;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin square($size) {
|
||||||
|
@include size($size, $size);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-radius($radius) {
|
||||||
|
border-radius: $radius;
|
||||||
|
-webkit-border-radius: $radius;
|
||||||
|
-moz-border-radius: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-top-left-radius($radius) {
|
||||||
|
border-top-left-radius: $radius;
|
||||||
|
-webkit-border-top-left-radius: $radius;
|
||||||
|
-moz-border-radius-topleft: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-top-right-radius($radius) {
|
||||||
|
border-top-right-radius: $radius;
|
||||||
|
-webkit-border-top-right-radius: $radius;
|
||||||
|
-moz-border-radius-topright: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-bottom-right-radius($radius) {
|
||||||
|
border-bottom-right-radius: $radius;
|
||||||
|
-webkit-border-bottom-right-radius: $radius;
|
||||||
|
-moz-border-radius-bottomright: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-bottom-left-radius($radius) {
|
||||||
|
border-bottom-left-radius: $radius;
|
||||||
|
-webkit-border-bottom-left-radius: $radius;
|
||||||
|
-moz-border-radius-bottomleft: $radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-top-radius($radius) {
|
||||||
|
@include border-top-right-radius($radius);
|
||||||
|
@include border-top-left-radius($radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-right-radius($radius) {
|
||||||
|
@include border-top-right-radius($radius);
|
||||||
|
@include border-bottom-right-radius($radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-bottom-radius($radius) {
|
||||||
|
@include border-bottom-right-radius($radius);
|
||||||
|
@include border-bottom-left-radius($radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin border-left-radius($radius) {
|
||||||
|
@include border-top-left-radius($radius);
|
||||||
|
@include border-bottom-left-radius($radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin background-size($size){
|
||||||
|
background-size: $size;
|
||||||
|
-webkit-background-size: $size;
|
||||||
|
-moz-background-size: $size;
|
||||||
|
-o-background-size: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-sizing($boxsize) {
|
||||||
|
box-sizing: $boxsize;
|
||||||
|
-webkit-box-sizing: $boxsize;
|
||||||
|
-moz-box-sizing: $boxsize;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin horizontal-gradient($startColour, $endColour) {
|
||||||
|
background-color: $endColour;
|
||||||
|
background-image: linear-gradient(to right, $startColour, $endColour);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
|
||||||
|
background-image: -webkit-linear-gradient(left, $startColour, $endColour);
|
||||||
|
background-image: -moz-linear-gradient(left, $startColour, $endColour);
|
||||||
|
background-image: -o-linear-gradient(left, $startColour, $endColour);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin vertical-gradient($startColour, $endColour) {
|
||||||
|
background-color: mix($startColour, $endColour, 60%);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
|
||||||
|
background-image: -webkit-linear-gradient(top, $startColour, $endColour);
|
||||||
|
background-image: -moz-linear-gradient(top, $startColour, $endColour);
|
||||||
|
background-image: -o-linear-gradient(top, $startColour, $endColour);
|
||||||
|
background-image: linear-gradient(to bottom, $startColour, $endColour);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-shadow($a, $b, $c, $colour) {
|
||||||
|
-moz-box-shadow: $a $b $c $colour;
|
||||||
|
-webkit-box-shadow: $a $b $c $colour;
|
||||||
|
box-shadow: $a $b $c $colour;
|
||||||
|
}
|
@ -1,12 +1,3 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.2
|
|
||||||
* Copyright 2011, Dave Gamache
|
|
||||||
* www.getskeleton.com
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
* 6/20/2012
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* #Reset & Basics (Inspired by E. Meyers)
|
/* #Reset & Basics (Inspired by E. Meyers)
|
||||||
================================================== */
|
================================================== */
|
||||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
@ -1,12 +1,3 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.2
|
|
||||||
* Copyright 2011, Dave Gamache
|
|
||||||
* www.getskeleton.com
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
* 6/20/2012
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* #Typography
|
/* #Typography
|
||||||
================================================== */
|
================================================== */
|
||||||
/* @font-face {
|
/* @font-face {
|
||||||
@ -21,8 +12,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: #181818;
|
color: $heading_colour;
|
||||||
font-family: "Georgia", "Times New Roman", serif;
|
font-family: $heading_font;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -99,20 +90,20 @@ small {
|
|||||||
blockquote, blockquote p {
|
blockquote, blockquote p {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
color: #777;
|
color: $blockquote_colour;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
padding: 9px 20px 0 19px;
|
padding: 9px 20px 0 19px;
|
||||||
border-left: 1px solid #ddd;
|
border-left: $blockquote_border_left;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote cite {
|
blockquote cite {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #555;
|
color: $blockquote_cite_colour;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote cite:before {
|
blockquote cite:before {
|
||||||
@ -120,11 +111,12 @@ blockquote cite:before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
|
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
|
||||||
color: #555;
|
color: $blockquote_cite_link_colour;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* not really typographical, but I couldnt find anywhere else to put it */
|
||||||
hr {
|
hr {
|
||||||
border: solid #ddd;
|
border: $hr_border;
|
||||||
border-width: 1px 0 0;
|
border-width: 1px 0 0;
|
||||||
clear: both;
|
clear: both;
|
||||||
margin: 10px 0 30px;
|
margin: 10px 0 30px;
|
43
scss/_variables.scss
Normal file
43
scss/_variables.scss
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
|
||||||
|
$form_button_border_radius: 3px;
|
||||||
|
$form_button_border_topleft: 1px solid #ccc;
|
||||||
|
$form_button_border_rightbottom: 1px solid #aaa;
|
||||||
|
$form_button_text_colour: #444;
|
||||||
|
$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75);
|
||||||
|
$form_button_gradient_start: rgba(255, 255, 255, .2);
|
||||||
|
$form_button_gradient_end: rgba(0, 0, 0, .2);
|
||||||
|
|
||||||
|
$form_button_hover_border_topleft: 1px solid #aaa;
|
||||||
|
$form_button_hover_border_rightbottom: 1px solid #888;
|
||||||
|
$form_button_hover_gradient_start: rgba(255, 255, 255, .3);
|
||||||
|
$form_button_hover_gradient_end: rgba(0, 0, 0, .3);
|
||||||
|
$form_button_hover_text_colour: #222;
|
||||||
|
|
||||||
|
$form_button_active_border: 1px solid #666;
|
||||||
|
$form_button_active_gradient_start: rgba(255, 255, 255, .2);
|
||||||
|
$form_button_active_gradient_end: rgba(0, 0, 0, .2);
|
||||||
|
|
||||||
|
$form_input_border: 1px solid #ccc;
|
||||||
|
$form_input_text_colour: #777;
|
||||||
|
$form_input_background: #fff;
|
||||||
|
|
||||||
|
$form_input_focus_border: 1px solid #aaa;
|
||||||
|
$form_input_focus_text_colour: #444;
|
||||||
|
|
||||||
|
$form_label_legend_colour: #444;
|
||||||
|
|
||||||
|
$link_colour: #333;
|
||||||
|
$link_hover_colour: #000;
|
||||||
|
|
||||||
|
$heading_font: "Georgia", "Times New Roman", serif;
|
||||||
|
$heading_colour: #181818;
|
||||||
|
|
||||||
|
$blockquote_colour: #777;
|
||||||
|
$blockquote_border_left: 1px solid #ddd;
|
||||||
|
$blockquote_cite_colour: #555;
|
||||||
|
$blockquote_cite_link_colour: #555;
|
||||||
|
|
||||||
|
$hr_border: solid #ddd;
|
||||||
|
|
||||||
|
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
@ -1,16 +0,0 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.2
|
|
||||||
* Copyright 2011, Dave Gamache
|
|
||||||
* www.getskeleton.com
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
* 6/20/2012
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* #Images
|
|
||||||
================================================== */
|
|
||||||
|
|
||||||
img.scale-with-grid {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
@ -1,24 +0,0 @@
|
|||||||
/*
|
|
||||||
* Skeleton V1.2
|
|
||||||
* Copyright 2011, Dave Gamache
|
|
||||||
* www.getskeleton.com
|
|
||||||
* Free to use under the MIT license.
|
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
|
||||||
* 6/20/2012
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* #Links
|
|
||||||
================================================== */
|
|
||||||
a, a:visited {
|
|
||||||
color: #333;
|
|
||||||
text-decoration: underline;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover, a:focus {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
p a, p a:visited {
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
@ -1,19 +1,24 @@
|
|||||||
/*
|
/*
|
||||||
* Skeleton V1.2
|
* Skeleton V1.2
|
||||||
* Copyright 2011, Dave Gamache
|
* Copyright 2011, Dave Gamache
|
||||||
|
*
|
||||||
|
* SCSS Conversion and Mixins by Nick Pack
|
||||||
|
*
|
||||||
* www.getskeleton.com
|
* www.getskeleton.com
|
||||||
* Free to use under the MIT license.
|
* Free to use under the MIT license.
|
||||||
* http://www.opensource.org/licenses/mit-license.php
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
* 6/20/2012
|
* 6/20/2012
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "reset.scss";
|
@import "_variables";
|
||||||
|
@import "_reset";
|
||||||
|
@import "_mixins";
|
||||||
|
|
||||||
/* #Basic Styles
|
/* #Basic Styles
|
||||||
================================================== */
|
================================================== */
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font: 14px/21px $body_font_family;
|
||||||
color: #444;
|
color: #444;
|
||||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
|
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
@ -21,44 +26,14 @@ body {
|
|||||||
|
|
||||||
/* #Forms
|
/* #Forms
|
||||||
================================================== */
|
================================================== */
|
||||||
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
|
|
||||||
@mixin button_bg {
|
|
||||||
background: #eee; /* Old browsers */
|
|
||||||
background: #eee -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* FF3.6+ */
|
|
||||||
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(0, 0, 0, .2))); /* Chrome,Safari4+ */
|
|
||||||
background: #eee -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: #eee -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* Opera11.10+ */
|
|
||||||
background: #eee -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* IE10+ */
|
|
||||||
background: #eee linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* W3C */
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button_hover_bg {
|
@import "_grid";
|
||||||
background: #ddd; /* Old browsers */
|
@import "_typography";
|
||||||
background: #ddd -moz-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* FF3.6+ */
|
@import "_links";
|
||||||
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .3)), color-stop(100%, rgba(0, 0, 0, .3))); /* Chrome,Safari4+ */
|
@import "_lists";
|
||||||
background: #ddd -webkit-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* Chrome10+,Safari5.1+ */
|
@import "_forms";
|
||||||
background: #ddd -o-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* Opera11.10+ */
|
@import "_images";
|
||||||
background: #ddd -ms-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* IE10+ */
|
|
||||||
background: #ddd linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* W3C */
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button_active_bg {
|
|
||||||
background: #ccc; /* Old browsers */
|
|
||||||
background: #ccc -moz-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* FF3.6+ */
|
|
||||||
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .35)), color-stop(100%, rgba(10, 10, 10, .4))); /* Chrome,Safari4+ */
|
|
||||||
background: #ccc -webkit-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: #ccc -o-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* Opera11.10+ */
|
|
||||||
background: #ccc -ms-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* IE10+ */
|
|
||||||
background: #ccc linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* W3C */
|
|
||||||
}
|
|
||||||
|
|
||||||
@import "grid.scss";
|
|
||||||
@import "typography.scss";
|
|
||||||
@import "links.scss";
|
|
||||||
@import "lists.scss";
|
|
||||||
@import "forms.scss";
|
|
||||||
@import "images.scss";
|
|
||||||
|
|
||||||
/* #Media Queries
|
/* #Media Queries
|
||||||
================================================== */
|
================================================== */
|
||||||
|
Loading…
Reference in New Issue
Block a user