mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-01-01 01:16:26 +00:00
added compass, added some basic stylesheets
This commit is contained in:
16
source/stylesheets/partials/_base.sass
Normal file
16
source/stylesheets/partials/_base.sass
Normal 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
|
||||
4
source/stylesheets/partials/_main.sass
Normal file
4
source/stylesheets/partials/_main.sass
Normal file
@ -0,0 +1,4 @@
|
||||
@import main/theme.sass
|
||||
@import main/layout.sass
|
||||
@import main/form.sass
|
||||
@import main/flash_messages.sass
|
||||
26
source/stylesheets/partials/base/_typography.sass
Normal file
26
source/stylesheets/partials/base/_typography.sass
Normal 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
|
||||
36
source/stylesheets/partials/main/_flash_messages.sass
Normal file
36
source/stylesheets/partials/main/_flash_messages.sass
Normal 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
|
||||
61
source/stylesheets/partials/main/_form.sass
Normal file
61
source/stylesheets/partials/main/_form.sass
Normal 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
|
||||
62
source/stylesheets/partials/main/_layout.sass
Normal file
62
source/stylesheets/partials/main/_layout.sass
Normal 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
|
||||
50
source/stylesheets/partials/main/_theme.sass
Normal file
50
source/stylesheets/partials/main/_theme.sass
Normal 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
|
||||
Reference in New Issue
Block a user