stoptime/templates/sass/style.sass

/* CSS file for Stop… Camping Time! */

// Colours
$light-grey: #efefef
$medium-grey: #cfcfcf
$dark-grey: #9f9f9f
$light-red: #cb0000
$dark-red: #990000

/* General classes */
.right
  text-align: right

.float_left
  float: left
  margin-right: 50px

.clear
  clear: both
  padding-top: 10px

.billed
  text-decoration: line-through

.indent
  padding-left: 20px

.warn
  font-weight: bold
  color: $light-red

/* Basic elements */
a
  text-decoration: none
  color: $dark-red

  &:hover
    text-decoration: underline

body
  font-family: sans-serif
  font-size: 13px
  margin: 0px

h3
  margin: 10px 0px

/* Main layout */
#wrapper
  width: auto
  height: auto
  margin: 10px 10px

#content
  padding: 10px
  border: 1px solid
  background: $light-grey

ol#menu
  list-style: none
  padding: 0px
  margin: 5px

  li
    display: inline
    border: solid black
    border-width: 1px 1px 0 1px
    padding: 5px 10px
    margin: 0px 0.5em 0px 0px

    &.selected
      padding-bottom: 6px
      background: $light-grey

/* Table layout */
table
  padding: 3px 0px
  border-spacing: 0px 4px

  col.amount, col.hours, col.hourly_rate
    width: 10%
  col.flag
    width: 3%
  col.date
    width: 9%
  col.start_time, col.end_time
    width: 5%
  col.comment
    width: 20%
  col.customer
    width: 10%
  col.task
    width: 20%
  col.name, col.period
    width: 25%
  col.short_name
    width: 20%
  col.address
    width: 20%
  col.email, col.phone
    width: 15%
  col.number
    width: 7%

  &.overview
    width: 50%

  &.timeline
    width: 100%

  &.tasks
    width: 60%

  &.customers, &.invoice_select
    width: 75%

  &.invoices
    width: 50%

  td
    padding: 0px 5px
    vertical-align: top

  th
    padding: 0px 5px
    text-align: left
    background: $dark-grey

  tr
    &:hover
      background-color: $medium-grey

    &.total
      border-top: solid black

  td.key
    font-weight: bold
    width: 80px
    padding-bottom: 5px

  input
    width: 100%

  input[type="submit"], input[type="reset"], input[type="checkbox"]
    width: auto

/* Form layout */
form
  ol
    list-style: none
    padding: 1px 10px
    margin: 2px

    label
      width: 180px
      margin: 4px 10px 4px 0px
      float: left

    a, span
      margin: 4px 0px
      display: inline-block

  ol.radio
    margin-left: 195px
    padding: 0px

    label
      float: none

    input
      width: auto

  li
    padding-bottom: 5px
    vertical-align: top

  input[type="text"], select
    width: 250px