app/assets/stylesheets/main.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
.click-me
cursor: pointer
.left
float: left
.right
float: right
.clear
clear: both
.description
color: grey
font-size: 0.9em
.hidden
display: none
.warning
background: yellow
font-weight: bold
padding: 1px 10px
// ********************************* loginpage
#login
:margin auto
:width 35em
: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 0 0 5px
:float left
a
:color #737272
:font-weight bold
a:hover
color: $main_red
// ************************************* box structure
#main
:background #FFF
:padding 0
:margin 0 15px 0 15px
// ************************************* 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
:background #FFF
:font-size 1.3em
:width 100%
: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.ignored
color: grey
tr.success
color: green
tr.failed
color: red
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: image-url('arrow_right_red.png') no-repeat center left
a
display: block
text-decoration: none
padding-left: 20px
td.open
background: image-url('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, #ajax_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
:width 100%
div.left_column
:width 40%
:float left
div.middle_column
:width 40%
:margin-left 10px
: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 image-url('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: 0.9em
font-weight: bolder
background-color: #78B74E
color: #fff
-moz-border-radius: 3px
-webkit-border-radius: 3px
padding: 0
th#col_required, th#col_tolerance
:width 145px
th#col_packages, th#col_left_units
:width 50px
td.quantity, td.tolerance
text-align: right
td#col_left_units
:color #ed0606
td
:padding 0.6em
td.name
:text-align left
:padding-left 10px
tfoot
tr
background-color: $lightGreen
td
:padding-right 10px
#order-footer, .article-info
text-align: left
z-index: 1
position: fixed
bottom: 0
background-color: #E4EED6
border-top: 2px solid #78B74E
//opacity: 0.95
#total-sum
width: 22em
margin: .5em 2em 0 0
float: right
#order-button
margin: .5em 0
input
background-color: #78B74E
color: #fff
-moz-border-radius: 3px
-webkit-border-radius: 3px
input:disabled
background-color: red
#order-footer
width: 100%
right: 0
left: 0
.article-info
z-index: 2
width: 45em
height: 8em
border: none
left: 30px
h3
text-align: center
margin: 0
margin-bottom: 5px
width: 100%
.right
width: 35%
.left
width: 60%
tr.order-article .article-info
display: none
tr.order-article:hover .article-info
display: block
// ********* 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%
// group stats
.stats-bar
height: 20px
min-width: 10px
border: 1px solid #DDDDDD
background-color: #fff
text-align: center
margin: 0 10px 10px 0
// *** wiki
#wiki_content
border-style: none
color: black
line-height: 1.5em
.wiki_show, .wiki_version, .wiki_new, .wiki_edit, .wiki_all
margin-top: 30px
padding: 10px
h1
padding-left: 0
padding-top: 10px
border-bottom:
:style solid
.column_content
margin-bottom: 0
#wiki_content
min-height: 400px
span.editsection
display: none
h2, h3, h4, h5, h6
background: transparent none repeat scroll 0 0
border-bottom: 1px solid #AAAAAA
padding-bottom: 0,17em
padding-top: 0,5em
font-weight: normal
font-size: 150%
color: black
h3, h4, h5, h6
border-bottom: medium none
font-weight: bold
h3
font-size: 132%
h4
font-size: 116%
ul
line-height: 1.5em
margin: 0.3em 0 0 1.5em
padding: 0
ol
line-height: 1.5em
margin: 0.3em 0 0 3.2em
padding: 0
list-style-image: none
li
margin-bottom: 0.1em
a.new_wiki_link
color: grey
#preview
border: 1px dotted grey
padding: 0 1em
#wikitoc
padding: 5px
margin-bottom: 2em
width: 25em
border: 1px solid grey
background-color: $lightGrey
h2
font-size: 1em
color: black
span a
font-size: 0.5em
color: grey
#breadcrump
font-size: 0.5em
margin-bottom: 5px
height: 1em
color: #ED0606
a
color: $main_red
text-decoration: none
a:hover
text-decoration: underline
#sidebar
float: right
width: 290px
#sidebar-links
margin-bottom: 18px
text-align: right
#subpages
border: 1px solid #78b74e
margin-top: 10px
padding: 0 0 0 0
#versions
margin-top: 10px
border: 1px solid #78b74e
#wiki-syntax-help
float: right
table
border-color: #78b74e
.wiki_version
#sidebar
margin-top: -23px
border: 1px solid #78b74e