added compass, added some basic stylesheets

This commit is contained in:
B Mathis
2009-10-18 20:10:45 -05:00
parent 82d0251da1
commit d8d51719fb
33 changed files with 691 additions and 8 deletions

View File

@ -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

View File

@ -0,0 +1,4 @@
@import main/theme.sass
@import main/layout.sass
@import main/form.sass
@import main/flash_messages.sass

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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