foodsoft/public/stylesheets/sass/main.sass
2009-05-20 14:06:40 +02:00

495 lines
No EOL
8.6 KiB
Sass

// colors which are used in the foodsoft
!main_red = #ED0606
!hover_yellow = #ffff72
!boxContent = #e4eed6
!lightGrey = #efefef
!darkGreen = #78b74e
!lightGreen = #e4eed6
/* General rules ...
body
:background-color #fff
:color black
:margin 0
:padding 1% 0 0 0
:min-width 990px
:font-size 62.5%
:font-family verdana, arial, sans-serif
#loader
:position fixed
:top 1px
:right 1px
:background #FFF
:padding 10px
:color black
:border
:width 2px
:style solid
:color = !main_red
a, a:visited
:text-decoration underline
:color black
a:hover
:color = !main_red
h1, h2
:color = !main_red
h1
:font-size 2.2em
:line-height 0.8em
:padding 1em 0 5px 5%
:margin 0 0 1em 0
:border-bottom
:width 1px
:style dotted
:color = !main_red
h2
:font-size 1.4em
:margin-top .5em
h3
:font-size 1em
:margin-top 1.5em
input
:color #2e2e2e
abbr, acronym
:cursor help
input, textarea, select
border: 1px solid #D7D7D7
font-family: verdana, arial, helvetica, sans-serif
font-size: 0.9em
padding-left: .2em
padding-right: .2em
input:focus, textarea:focus, select:focus
border-color: #000
input[type="button"], input[type="submit"], input[type="reset"]
background: #EEEEEE none repeat scroll 0%
border: 1px outset #CCCCCC
color: #222222
padding: 0.1em 0.5em
font-size: 1em
font-weight: bold
min-width: 34px
select
max-width: 15em
option
border-top: 1px solid #D7D7D7
margin: .2em 0
span.click-me
cursor: pointer
.clear
clear: both
// ********************************* loginpage
#login
:margin auto
:width 27em
:font-size 1.2em
#login #meta
:margin-top 2em
:padding-top .3em
:border-top 1px dotted #ED0606
:color #2e2e2e
// ******************************** - Logo - head
#header
:margin 0
:padding 0
#logo
:background = !main_red
:height 1.1em
:width 8em
:padding 0 20px
:text-align left
:line-height 54px
:font-size 54px
:overflow hidden
:letter-spacing -3px
:margin 0
a, a:hover
:color white
:background-color = !main_red
:text-decoration none
a span
:color = !main_red
:background #FFF
:padding-right 0.1em
:font-weight bold
:border-top
:width 2px
:style dotted
:color = !main_red
#logininfo
:position absolute
:top 3px
:right 10px
:font-size 1em
ul
:list-style none
li
:margin 0 3px
:float left
a
:padding 0.2em
:color #737272
:font-weight bold
a:hover
:color = !main_red
// ************************************* box structure
#main
:background #FFF
:padding 0
:margin 0
// ************************************* infobar
#infobar
:width 10%
:min-width 5em
:float right
:padding 2.6em 1em
:margin 3em 0 0 0
:border-left 1px dotted #ED0606
:font-size 1.2em
h3
:color #ED0606
ul
:list-style none
li
:margin .3em 0 0 -3em
// ************************************ embedded menu
.menu, #start_nav
:border 2px solid #e3e3e3
:background #f5f5f5
:padding 0 10px 0px 5px
:float left
ul
:list-style-type none
:margin 0 0 0.2em 0
:padding 0
li
:border-bottom 1px solid #dedede
:color #666
:margin 0.8em 0 0 0
:font-weight bold
a:link, a:visited
:display block
:padding 0.25em 1em
:text-decoration none
:width 12em
a:hover, a:focus
:background-color #e3e3e3
ul
:margin 0
:padding 0
li
:border-top 1px solid #dedede
:border-bottom none
:margin 0
:font-weight normal
a:link, a:visited
:width 11.5em
:padding 0 1em 0.1em 1.5em
:font-weight normal
:text-decoration none
.menu
:position absolute
:top 100px
:right 1px
// ************************************** content
#content
:padding .5em 0 2.5em 0
:margin 0 0 0 1em
:background #FFF
:font-size 1.3em
:width 95%
:float left
/************************************ tables
table
:border-collapse collapse
// border2px solid #e3e3e3
:text-align left
:width 100%
:margin 0
thead th, tbody td, th, td
:padding 0.3em
thead tr
:background-color #efefef
th
:color black
tr.odd, tr.even
:border-top 1px solid #DDDDDD
tr.odd, tr.odd input
:background-color #F6F6F6
tr.even
:background-color #FBFBFB
tr.unavailable, tr.unavailable a
:color grey
tr.unavailable a:hover
:color #ED0606
tr.just_updated
:color #008000
tr.selected, tr.active
:background-color #ffffc2
tr.click-me
:cursor pointer
table.list
//:border 2px solid #78b74e
tr
:border 1px solid #e3e3e3
tbody tr:hover
:background-color #EEEEDD
table tfoot tr
:background-color #fff
td
:padding-top 0.8em
tr.edit_inline
:background-color = !hover_yellow
td, span
:padding 0.5em 0.2em
div.legend, div.legend table th
:color grey
:font-size .8em
:background none
form table
:border none
table.ordered_articles
:background-color #fff
tbody tr:hover
:background-color #EEEEDD
a
:display block
tr.results:hover
:background-color none
table
tfoot
:font-weight bold
td.currency, td.actions
:text-align right
:padding-right 0.5em
td.closed
background: url(/images/arrow_right_red.png) no-repeat center left
a
display: block
text-decoration: none
padding-left: 20px
td.open
background: url(/images/arrow_down_red.png) no-repeat center left
// ************************************* for edit formulars */
div.edit_form
:border 2px solid #e3e3e3
:background #f5f5f5
:padding 0 0.8em 0.8em 0.8em
:margin 5px 0
:color black
#edit_article, #edit_box
:position fixed
:top 5em
:left 10em
:width 55em
:background #FBFBFB
:padding 3em
:padding-top 1em
:border
:width 3px
:style solid
:color = !main_red
// ***************************************** other boxes */
// *********boxes in columns ****/
div.box
:border-left 2px solid #78b74e
:padding-left 5px
div.single_column, div.left_column, div.right_column
:margin .5em .5em 1.5em .5em
div.single_column
:width 100%
div.left_column
:width 40%
:float left
div.right_column
:margin-bottom 3em
:width 55%
:float right
// *********** content of boxes ******/
div.box_title
:background #78b74e
:padding 5px 10px
h2, h2 a
:color #FFF
:margin 0
h2
:font-size 1.3em
div.column_content
:background = !boxContent
:color black
:padding 10px
margin-bottom: 2em
h2
:color black
:font-size 1.3em
:margin 1em 0 0 0
#links
:float right
// for special pages
// index-page
// * article show
tr.current_price
:background #cdee9e
// **** maybe later for the very little spinner
li.check div.spinner
:display block
:height 5px
:width 21px
:background-image url(/images/dots-white.gif)
:line-height 16px
:float left
:margin-right 5px
:background-position center center
:background-repeat no-repeat
// ************************************* the order page */
span.used, span.unused
:font-weight bold
span.used
:color #008000
span.unused
:color #ed0606
span.total
:font-size 80%
table#order
:text-align center
input
:font-size 80%
th#col_required, th#col_tolerance
:width 145px
th#col_packages, th#col_left_units
:width 50px
td#col_left_units
:color #ed0606
td
:padding 0.6em
td.name, tr.note td
:text-align left
:padding-left 10px
tfoot
tr
:background-color = !lightGreen
td
:padding-right 10px
tr.note
:background-color #FBFBFB
:font-size 0.9em
:border-bottom 1px solid #DDDDDD
td
:padding-left 20px
// ********* Comments
#newComment
:margin 1em
.comment
:border-bottom 1px dotted black
:padding .5em 0 1em .5em
.timestamp
:font-size 0.8em
:color grey
// *************** Clearing Order Page ..
#editOrderNav
a
:color #fff
:font-weight bold
ul
:margin 0
:padding 0
li
:display inline
:list-style none
:margin-right 1em
// *************** Tasks ...
.accepted
color: green
font-weight: bold
.done, .done a, .done .accepted
color: grey
font-weight: normal
// ************** auto_complete
ul.autocomplete
.nick, .informal
margin: auto
.nick
font-weight: bold
.informal
color: grey
margin-left: 1em
// ******* to navigate easy to the next element, e.g. next order
#element_navigation
position: relative
top: -1em
left: 5%
// *** wiki
a.new_wiki_link
color: grey
#preview
border: 1px dotted grey
padding: 0 1em
#toc
float: right