B Mathis
15 years ago
33 changed files with 691 additions and 8 deletions
@ -1 +1,2 @@ |
|||
site |
|||
source/stylesheets/.sass-cache |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: Groove Pocket |
|||
--- |
|||
|
|||
> You can't hold no groove if you ain't got no pocket! |
|||
@ -0,0 +1,7 @@ |
|||
--- |
|||
title: Latin Rocks! |
|||
--- |
|||
|
|||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. |
|||
|
|||
Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla. |
|||
@ -0,0 +1,9 @@ |
|||
@import library/reset.sass |
|||
@import library/clearfix.sass |
|||
@import library/border_radius.sass |
|||
@import library/box_shadow.sass |
|||
@import library/list_borders.sass |
|||
@import library/typography.sass |
|||
@import library/link_colors.sass |
|||
@import library/gradient.sass |
|||
@import library/button_style.sass |
|||
@ -0,0 +1,47 @@ |
|||
!default_border_radius ||= 5px |
|||
|
|||
// Round all borders by amount |
|||
=border-radius(!radius = !default_border_radius) |
|||
border-radius= !radius |
|||
-moz-border-radius= !radius |
|||
-webkit-border-radius= !radius |
|||
|
|||
// Round radius at position by amount. |
|||
// values for !vert: "top", "bottom" |
|||
// values for !horz: "left", "right |
|||
=border-corner-radius(!vert, !horz, !radius = !default_border_radius) |
|||
border-#{!vert}-#{!horz}-radius= !radius |
|||
-moz-border-radius-#{!vert}#{!horz}= !radius |
|||
-webkit-border-#{!vert}-#{!horz}-radius= !radius |
|||
|
|||
=border-top-left-radius(!radius = !default_border_radius) |
|||
+border-corner-radius("top", "left", !radius) |
|||
|
|||
=border-top-right-radius(!radius = !default_border_radius) |
|||
+border-corner-radius("top", "right", !radius) |
|||
|
|||
=border-bottom-left-radius(!radius = !default_border_radius) |
|||
+border-corner-radius("bottom", "left", !radius) |
|||
|
|||
=border-bottom-right-radius(!radius = !default_border_radius) |
|||
+border-corner-radius("bottom", "right", !radius) |
|||
|
|||
// Round top corners by amount |
|||
=border-top-radius(!radius = !default_border_radius) |
|||
+border-top-left-radius(!radius) |
|||
+border-top-right-radius(!radius) |
|||
|
|||
// Round right corners by amount |
|||
=border-right-radius(!radius = !default_border_radius) |
|||
+border-top-right-radius(!radius) |
|||
+border-bottom-right-radius(!radius) |
|||
|
|||
// Round bottom corners by amount |
|||
=border-bottom-radius(!radius = !default_border_radius) |
|||
+border-bottom-left-radius(!radius) |
|||
+border-bottom-right-radius(!radius) |
|||
|
|||
// Round left corners by amount |
|||
=border-left-radius(!radius = !default_border_radius) |
|||
+border-top-left-radius(!radius) |
|||
+border-bottom-left-radius(!radius) |
|||
@ -0,0 +1,10 @@ |
|||
!default_box_shadow_color = #333 |
|||
!default_box_shadow_x_offset = 1px |
|||
!default_box_shadow_y_offset = 1px |
|||
!default_box_shadow_blur_radius = 8px |
|||
|
|||
=box-shadow(!color = !default_box_shadow_color, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset, !blur_radius = !default_box_shadow_blur_radius) |
|||
box-shadow= !x_offset !y_offset !blur_radius !color |
|||
-webkit-box-shadow= !x_offset !y_offset !blur_radius !color |
|||
-moz-box-shadow= !x_offset !y_offset !blur_radius !color |
|||
|
|||
@ -0,0 +1,45 @@ |
|||
=btn-border-color(!color) |
|||
border-color= darken(!color, 25) |
|||
|
|||
=btn-text-shadow(!color) |
|||
!text_shadow = darken(!color, 25) |
|||
text-shadow= !text_shadow "1px 1px 1px" |
|||
|
|||
=btn-style(!color) |
|||
!color1 = lighten(!color, 30) |
|||
!color2 = darken(!color, 20) |
|||
+h-linear-gradient(!color1, !color2) |
|||
background-color= !color |
|||
+btn-border-color(!color) |
|||
+btn-text-shadow(!color) |
|||
|
|||
=btn-style-hover(!color) |
|||
!color = lighten(!color, 8) |
|||
!color1 = lighten(!color, 22) |
|||
!color2 = darken(!color, 38) |
|||
+h-linear-gradient(!color1, !color2) |
|||
background-color= !color |
|||
+btn-border-color(!color) |
|||
+btn-text-shadow(!color) |
|||
|
|||
=btn-style-active(!color) |
|||
!color = darken(!color, 5) |
|||
!color1 = lighten(!color, 25) |
|||
!color2 = darken(!color, 35) |
|||
+h-linear-gradient(!color1, !color2) |
|||
background-color= !color |
|||
+btn-border-color(!color) |
|||
+btn-text-shadow(!color) |
|||
|
|||
=btn-structure(!font_size, !border_width, !line_height = !font_size *1.2) |
|||
!v_padding = floor(!font_size/2.5) |
|||
!h_padding = floor(!font_size) |
|||
!v_padding_active = !v_padding - 1px |
|||
!h_padding_active = !h_padding - 1px |
|||
border-width= !border_width |
|||
font-size= !font_size |
|||
padding= !v_padding !h_padding |
|||
line-height= !line_height |
|||
&:active |
|||
border-width= !border_width + 1px |
|||
padding= !v_padding_active !h_padding_active |
|||
@ -0,0 +1,24 @@ |
|||
// based on compass clearfix |
|||
|
|||
@import _hacks.sass |
|||
|
|||
// Extends the element to enclose any floats it contains. |
|||
// This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container. |
|||
// Recommendations include using this in conjunction with a width: |
|||
// http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html |
|||
=clearfix |
|||
:overflow hidden |
|||
+has-layout |
|||
|
|||
// Extends the element to enclose any floats it contains. |
|||
// This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS. |
|||
// http://www.positioniseverything.net/easyclearing.html |
|||
=pie-clearfix |
|||
&:after |
|||
:content " " |
|||
:display block |
|||
:height 0 |
|||
:clear both |
|||
:overflow hidden |
|||
:visibility hidden |
|||
+has-layout |
|||
@ -0,0 +1,16 @@ |
|||
// based on compass float |
|||
|
|||
@import modules/_clearfix.sass |
|||
|
|||
// Available as alternate syntax with just +float |
|||
=float(!side = "left") |
|||
:display inline |
|||
:float= !side |
|||
|
|||
// Implementation of float:left with fix for double-margin bug |
|||
=float-left |
|||
+float("left") |
|||
|
|||
// Implementation of float:right with fix for double-margin bug |
|||
=float-right |
|||
+float("right") |
|||
@ -0,0 +1,15 @@ |
|||
=linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop1 = 0, !color_stop1_pos = .3, !color_stop_2 = 0, !color_stop2_pos = .9) |
|||
!gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})" |
|||
//@if !color_stop1 != 0 |
|||
// !gradient += "color-stop(#{!color_stop1_pos}, #{!color_stop1})" |
|||
background= "-webkit-gradient(linear, #{!gradient})" |
|||
background= "-moz-linear-gradient(#{!gradient})" |
|||
|
|||
=h-linear-gradient(!color1, !color2) |
|||
+linear-gradient("left top", "left bottom", !color1, !color2) |
|||
|
|||
=v-linear-gradient(!color1, !color2) |
|||
+linear-gradient("left top", "right top", !color1, !color2) |
|||
|
|||
//=h-three-color-gradient(!color1, !color2, !color3, !color3_pos = .5) |
|||
// +linear-gradient("left top", "left bottom", !color1, !color2, !color3, !color3_pos) |
|||
@ -0,0 +1,8 @@ |
|||
// based on compass hacks |
|||
|
|||
=has-layout |
|||
// This makes ie6 get layout |
|||
:display inline-block |
|||
// and this puts it back to block |
|||
& |
|||
:display block |
|||
@ -0,0 +1,24 @@ |
|||
!default_link_color ||= #165B94 |
|||
!default_link_color_hover ||= #fff |
|||
!default_link_color_alt ||= #91D5F1 |
|||
!default_link_color_hover_alt ||= #000 |
|||
|
|||
=link-color(!hover = true) |
|||
+link-color-style(!default_link_color, !default_link_color_hover, !default_link_color, !hover) |
|||
|
|||
=link-color-alt(!hover = true) |
|||
+link-color-style(!default_link_color_alt, !default_link_color_hover_alt, !default_link_color_alt, !hover) |
|||
|
|||
=link-color-heading(!link_color = "inherit", !hover_bg_color = #ccc) |
|||
+link-color-style(!link_color,) |
|||
|
|||
=link-color-style(!color = !default_link_color, !color_hover = !default_link_color_hover, !link_hover_bg = !color, !hover = true) |
|||
color= !color |
|||
padding: 2px |
|||
margin: 0 -2px |
|||
+border-radius(3px) |
|||
@if !hover |
|||
&:hover |
|||
background-color= !link_hover_bg |
|||
color= !color_hover |
|||
text-decoration: none |
|||
@ -0,0 +1,7 @@ |
|||
=list-borders(!color1,!color2) |
|||
border-left= "1px solid" !color1 |
|||
border-right= "1px solid" !color2 |
|||
&.alpha |
|||
border-left: none |
|||
&.omega |
|||
border-right: 0 |
|||
@ -0,0 +1,18 @@ |
|||
//** |
|||
Provides cross-browser css opacity. |
|||
@param !opacity |
|||
A number between 0 and 1, where 0 is transparent and 1 is opaque. |
|||
=opacity(!opacity) |
|||
:opacity= !opacity |
|||
:-moz-opacity= !opacity |
|||
:-khtml-opacity= !opacity |
|||
:-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")" |
|||
:filter= "alpha(opacity=" + round(!opacity*100) + ")" |
|||
|
|||
// Make an element completely transparent. |
|||
=transparent |
|||
+opacity(0) |
|||
|
|||
// Make an element completely opaque. |
|||
=opaque |
|||
+opacity(1) |
|||
@ -0,0 +1,58 @@ |
|||
// Borrowed from the blueprint reset |
|||
|
|||
// Global reset rules. |
|||
// For more specific resets, use the reset mixins provided below |
|||
=global-reset |
|||
html, body |
|||
+reset |
|||
+nested-reset |
|||
|
|||
// Reset all elements within some selector scope.To reset the selector itself, |
|||
// mixin the appropriate reset mixin for that element type as well. This could be |
|||
// useful if you want to style a part of your page in a dramatically different way. |
|||
=nested-reset |
|||
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, |
|||
pre, a, abbr, acronym, address, code, del, dfn, em, img, |
|||
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr |
|||
+reset |
|||
blockquote, q |
|||
+reset-quotation |
|||
th, td, caption |
|||
+reset-table-cell |
|||
table |
|||
+reset-table |
|||
a img |
|||
:border none |
|||
|
|||
=reset-box-model |
|||
:margin 0 |
|||
:padding 0 |
|||
:border 0 |
|||
|
|||
=reset |
|||
+reset-box-model |
|||
:font |
|||
:weight inherit |
|||
:style inherit |
|||
:size 100% |
|||
:family inherit |
|||
:vertical-align baseline |
|||
|
|||
=reset-quotation |
|||
+reset |
|||
:quotes "" "" |
|||
&:before, |
|||
&:after |
|||
:content "" |
|||
|
|||
=reset-table-cell |
|||
+reset |
|||
:text-align left |
|||
:font-weight normal |
|||
:vertical-align middle |
|||
|
|||
=reset-table |
|||
+reset |
|||
:border-collapse separate |
|||
:border-spacing 0 |
|||
:vertical-align middle |
|||
@ -0,0 +1,4 @@ |
|||
=sprite-column-hover-row(!col, !row_hover=2, !width=!sprite_default_size, !height=!sprite_default_size, !margin=!sprite_default_margin) |
|||
+sprite-position(!col, 1, !width, !height, !margin) |
|||
&:hover |
|||
+sprite-position(!col, !row_hover, !width, !height, !margin) |
|||
@ -0,0 +1,52 @@ |
|||
//** |
|||
Example 1: |
|||
a.twitter |
|||
+sprite-img("icons-32.png", 1) |
|||
a.facebook |
|||
+sprite-img("icons-32png", 2) |
|||
... |
|||
Example 2: |
|||
a |
|||
+sprite-background("icons-32.png") |
|||
a.twitter |
|||
+sprite-column(1) |
|||
a.facebook |
|||
+sprite-row(2) |
|||
... |
|||
|
|||
!sprite_default_size ||= 32px |
|||
!sprite_default_margin ||= 0px |
|||
!sprite_image_default_width ||= !sprite_default_size |
|||
!sprite_image_default_height ||= !sprite_default_size |
|||
|
|||
|
|||
// Sets all the rules for a sprite from a given sprite image to show just one of the sprites. |
|||
// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning. |
|||
=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin) |
|||
+sprite-background(!img, !width, !height) |
|||
+sprite-position(!col, !row, !width, !height, !margin) |
|||
|
|||
// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region. |
|||
=sprite-background(!img, !width = !sprite_default_size, !height = !width) |
|||
+sprite-background-rectangle(!img, !width, !height) |
|||
|
|||
// Sets rules common for all sprites, assumes a rectangular region. |
|||
=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height) |
|||
:background= image_url(!img) "no-repeat" |
|||
:width= !width |
|||
:height= !height |
|||
:overflow hidden |
|||
|
|||
// Allows horizontal sprite positioning optimized for a single row of sprites. |
|||
=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin) |
|||
+sprite-position(!col, 1, !width, 0px, !margin) |
|||
|
|||
// Allows vertical sprite positioning optimized for a single column of sprites. |
|||
=sprite-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin) |
|||
+sprite-position(1, !row, 0px, !height, !margin) |
|||
|
|||
// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites. |
|||
=sprite-position(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin) |
|||
!x = ((!col - 1) * -!width) - ((!col - 1) * !margin) |
|||
!y = ((!row - 1) * -!height) - ((!row - 1) * !margin) |
|||
:background-position= !x !y |
|||
@ -0,0 +1,67 @@ |
|||
!base_font_size ||= 14px |
|||
!base_font_size_small ||= 12px |
|||
!h6 ||= !base_font_size |
|||
!h5 ||= ceil(!h6*1.1) |
|||
!h4 ||= ceil(!h5*1.1) |
|||
!h3 ||= ceil(!h4*1.2) |
|||
!h2 ||= ceil(!h3*1.25) |
|||
!h1 ||= ceil(!h2*1.255) |
|||
|
|||
=set-heading-sizes(!font_size = !base_font_size) |
|||
!h6 = !font_size |
|||
!h5 = ceil(!h6*1.1) |
|||
!h4 = ceil(!h5*1.1) |
|||
!h3 = ceil(!h4*1.2) |
|||
!h2 = ceil(!h3*1.25) |
|||
!h1 = ceil(!h2*1.255) |
|||
h1, h2, h3, h4 |
|||
&:first-child |
|||
margin-top: 0 |
|||
h1 |
|||
font-size= !h1 |
|||
margin-bottom= !h2/2 |
|||
line-height= !h1 * 1.2 |
|||
h2 |
|||
font-size= !h2 |
|||
margin= !h2/2 0 !h2/2 |
|||
line-height= !h2 * 1.2 |
|||
h3 |
|||
font-size= !h3 |
|||
margin= !h2/2 0 !h2/2 |
|||
line-height= !h3 * 1.2 |
|||
h4 |
|||
font-size= !h4 |
|||
margin= !h4/2 0 !h4/2 |
|||
line-height= !h4 * 1.2 |
|||
h5 |
|||
font-size= !h5 |
|||
margin= !h4/2 0 !h4/2 |
|||
line-height= !h5 * 1.2 |
|||
h6 |
|||
font-size= !h6 |
|||
margin= !h4/2 0 !h4/2 |
|||
line-height= !h6 * 1.2 |
|||
|
|||
=typography-defaults(!font_size = !base_font_size) |
|||
line-height= ceil(!font_size * 1.5) |
|||
p |
|||
padding-bottom= !font_size * 2 |
|||
h1,h2,h3,h4,h5,h6 |
|||
font-weight: bold |
|||
em |
|||
font-style: italic |
|||
strong |
|||
font-weight: bold |
|||
span.highlight, em.highlight, strong.highlight |
|||
background-color: #ff6 |
|||
padding: 2px |
|||
margin: 0 -2px |
|||
ul, ol, dl |
|||
list-style: inside |
|||
margin= 0 0 (!font_size) |
|||
li |
|||
padding: 0 0 2px |
|||
small |
|||
font-size= floor(!font_size * .85) |
|||
big |
|||
font-size= floor(!font_size * 1.25) |
|||
@ -0,0 +1,16 @@ |
|||
//compass default reset |
|||
+global-reset |
|||
//my reset |
|||
button |
|||
margin: 0 |
|||
padding: 0 |
|||
background: none |
|||
border: none |
|||
cursor: pointer |
|||
|
|||
button::-moz-focus-inner |
|||
border: none |
|||
padding: 0 |
|||
|
|||
@import compass/utilities.sass |
|||
@import base/typography.sass |
|||
@ -0,0 +1,4 @@ |
|||
@import main/theme.sass |
|||
@import main/layout.sass |
|||
@import main/form.sass |
|||
@import main/flash_messages.sass |
|||
@ -0,0 +1,26 @@ |
|||
!base_font_size = 15px |
|||
!base_font_size_small = 13px |
|||
!default_border_radius = 6px |
|||
|
|||
=heading-font |
|||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif |
|||
=sans-font |
|||
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif |
|||
=serif-font |
|||
font-family: Baskerville, "Times New Roman", Times, Georgia, serif |
|||
=fixed-font |
|||
font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace |
|||
|
|||
body |
|||
font-size= !base_font_size |
|||
+set-heading-sizes |
|||
+typography-defaults |
|||
+sans-font |
|||
|
|||
h1,h2,h3,h4,h5,h6 |
|||
color: #333 |
|||
letter-spacing: -1px |
|||
font-weight: bold |
|||
ol li |
|||
list-style: decimal |
|||
margin-left: 1.9em |
|||
@ -0,0 +1,36 @@ |
|||
!flash_notice ||= #00529B |
|||
!flash_success ||= #4F8A10 |
|||
!flash_warning ||= #FBF4BD |
|||
!flash_error ||= #D8000C |
|||
!flash_notice_bg ||= #BDE5F8 |
|||
!flash_success_bg ||= #DFF2BF |
|||
!flash_warning_bg ||= #FBF4BD |
|||
!flash_error_bg ||= #FFD9DA |
|||
|
|||
=flash-message-style |
|||
+flash-message-structure |
|||
&.notice |
|||
+flash-color(!flash_notice, !flash_notice_bg) |
|||
&.success |
|||
+flash-color(!flash_success, !flash_success_bg) |
|||
&.warning |
|||
+flash-color(!flash_warning, !flash_warning_bg) |
|||
&.error |
|||
+flash-color(!flash_error, !flash_error_bg) |
|||
|
|||
=flash-message-structure |
|||
background-repeat: no-repeat |
|||
background-position: 10px center |
|||
border: 1px dashed |
|||
padding: 10px 15px |
|||
margin: 0 0 15px |
|||
|
|||
=flash-color(!color, !bg = 0) |
|||
color= !color |
|||
@if !bg == 0 |
|||
background-color= desaturate(lighten(adjust_hue(!color, -10), 83), 20) |
|||
@else |
|||
background-color= !bg |
|||
|
|||
#flash |
|||
+flash-message-style |
|||
@ -0,0 +1,61 @@ |
|||
#page |
|||
form |
|||
clear: both |
|||
padding-bottom= !pad |
|||
fieldset, fieldset input.textbox, fieldset textarea |
|||
+border-radius |
|||
fieldset |
|||
background-color= !fieldset_bg |
|||
width: 480px |
|||
border= "1px solid" !fieldset_border |
|||
padding: 35px 25px 20px |
|||
margin-bottom= !pad*2.2 |
|||
label |
|||
font-size: 90% |
|||
display: block |
|||
padding-bottom: 4px |
|||
select |
|||
font-size: 110% |
|||
input.textbox, textarea |
|||
font-size: 115% |
|||
color= !textinput_color |
|||
background-color= !textinput_bg |
|||
|
|||
width: 70% |
|||
padding: 6px 8px |
|||
outline: 0 |
|||
display: inline-block |
|||
|
|||
border: 1px solid |
|||
border-top-color= !textinput_border_top |
|||
border-bottom-color= !textinput_border_bottom |
|||
border-left-color= !textinput_border_left |
|||
border-right-color= !textinput_border_right |
|||
|
|||
&:focus |
|||
background= !textinput_bg_focus |
|||
border-color= !textinput_border_focus |
|||
|
|||
input.checkbox, label.checkbox |
|||
display: inline-block |
|||
p |
|||
+clearfix |
|||
padding= 0 8px !pad |
|||
input.wrong:focus |
|||
outline: 2px solid #d0a5a5 |
|||
background: #fef2f2 |
|||
button |
|||
+border-radius(5px) |
|||
+btn-style(!blue_btn) |
|||
+btn-structure(18px, 1px) |
|||
color= !default_button_text_color |
|||
border: |
|||
width: 1px |
|||
style: solid |
|||
&:hover, &:focus |
|||
+btn-style-hover(!blue_btn) |
|||
outline: none |
|||
&:active |
|||
+btn-style-active(!blue_btn) |
|||
a.cancel |
|||
color= !cancel_link |
|||
@ -0,0 +1,62 @@ |
|||
!page_width = 560px |
|||
!pad = 15px |
|||
!default_border_radius = 4px |
|||
|
|||
html body |
|||
background-color= !body_bg |
|||
color= !body_color |
|||
a |
|||
color= !link_color |
|||
|
|||
#header |
|||
background-color= !header_bg |
|||
border-bottom= "1px solid" !header_border |
|||
padding: 20px 0 |
|||
a.title |
|||
font-size= !h3 |
|||
display: inline-block |
|||
color= !header_nav |
|||
text-decoration: none |
|||
#header_nav |
|||
float: right |
|||
+horizontal-list |
|||
a |
|||
color: #ccc |
|||
li.alpha a |
|||
color: #f2f2f2 |
|||
|
|||
.page_width |
|||
width= !page_width |
|||
margin: 0 auto |
|||
padding: |
|||
left: 30px |
|||
right: 30px |
|||
|
|||
#page |
|||
background-color= !page_bg |
|||
border-top= "1px solid" !page_border |
|||
padding: 25px 0 |
|||
|
|||
#subnav |
|||
+clearfix |
|||
margin: -25px 0 25px |
|||
padding: 10px 0 |
|||
background-color= !subnav_bg |
|||
border-bottom= "1px solid" !subnav_border |
|||
font-size: 85% |
|||
#account |
|||
float: right |
|||
a |
|||
color= !subnav_logout_color |
|||
display: inline-block |
|||
padding-left: 10px |
|||
margin-left: 8px |
|||
border-left= "1px solid" #aaa |
|||
|
|||
#footer |
|||
font-size= !base_font_size_small |
|||
clear: both |
|||
padding: 15px 0 |
|||
color= !footer_color |
|||
+h-linear-gradient(darken(!body_bg, 25), !body_bg) |
|||
border-top= "4px solid" !footer_bg |
|||
@ -0,0 +1,50 @@ |
|||
// Main Section Colors |
|||
!body_color = #333 |
|||
!body_bg = #323232 |
|||
!test = darken(!body_bg, 20) |
|||
!header_bg = #323232 |
|||
!header_border = #181818 |
|||
!header_nav = #ddd |
|||
!header_nav_hover = #fff |
|||
!page_border = #fff |
|||
!page_bg = #ececec |
|||
!footer_color = #999 |
|||
!footer_bg = #444 |
|||
!subnav_bg = #fff |
|||
!subnav_border = #ccc |
|||
!subnav_link_color = #333 |
|||
!subnav_logout_color = #777 |
|||
|
|||
// Link Colors |
|||
!link_color = #165B94 |
|||
|
|||
// Form Colors |
|||
!fieldset_bg = #fff |
|||
!fieldset_border = #c3c3c3 |
|||
|
|||
!textinput_color = #333 |
|||
!textinput_bg = #f4f4f4 |
|||
!textinput_bg_focus = #fefeee |
|||
|
|||
!textinput_border_top = #aaa |
|||
!textinput_border_bottom = #c6c6c6 |
|||
!textinput_border_left = #c3c3c3 |
|||
!textinput_border_right = #c3c3c3 |
|||
!textinput_border_focus = #989898 |
|||
|
|||
!cancel_link = #555 |
|||
|
|||
// Button Colors |
|||
!default_button_text_color = #fff |
|||
!default_button_bg = yellow |
|||
!blue_btn = desaturate(adjust_hue(!default_button_bg, -16), 25) |
|||
|
|||
// Flash Message Colors |
|||
!flash_notice = #00529B |
|||
!flash_notice_bg = #BDE5F8 |
|||
!flash_success = #4F8A10 |
|||
!flash_success_bg = #DFF2BF |
|||
!flash_warning = #FBF4BD |
|||
!flash_warning_bg = #FBF4BD |
|||
!flash_error = #D8000C |
|||
!flash_error_bg = #FFD9DA |
|||
@ -0,0 +1,3 @@ |
|||
@import library.sass |
|||
@import partials/base.sass |
|||
@import partials/main.sass |
|||
Loading…
Reference in new issue