kleks/admin/static/css/common.styl

/* Common CSS that is imported into Admin and Site */

// apply a natural box layout model to all elements
*
  border-box()

body
  margin: 0
  padding: 0
  background: #fff
  color: $textColor
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif
  font-weight: $normalFont
  font-size: 16px
  letter-spacing: 0em
  word-spacing: 0.2em
  line-height: 1.5em

h1, h2, h3, h4, h5, h6
  color: $textDarkColor
  font-weight: $normalFont
  line-height: 1.2em
  margin: 0

h1
  font-size: 3.5em
h2
  font-size: 2.5em
h3
  font-size: 2em
h4
  font-size: 1.5em
h5
  font-size: 1.125em
  font-weight: $boldFont
h6
  font-size: 0.875em
  font-weight: $boldFont
  line-height: 1.5em

a
  color: $linkColor
  text-decoration: none
  cursor: pointer

  &:hover
    text-decoration: none
  
  &.button
    display: inline-block
    padding: 10px 20px
    background: $primaryColor
    color: #fff
    font-weight: $boldFont

    &.large
      font-size: 2em
      line-height: 1.2em
      padding: 14px 30px

strong
 font-weight: $boldFont

b
  font-weight: $heavyFont

small
  font-size: 0.875em
  line-height: 1em
  color: $lightGrey

span.label
  font-weight: $normalFont
  color: $lightGrey

blockquote
  position: relative
  border-right: 10px solid $primaryColor
  padding: 0 1.5em 0 3em
  margin: 1.5em 0
  text-align: right
  font-size: 1.125em
  font-weight: $normalFont
  &:before
    content: '“'
    position: absolute
    top: 0.2em
    left: 0
    color: $primaryColor
    font-size: 6em
    font-weight: $heavyFont

img
  display: inline-block
  border: 0

  &.left
    float: left
    margin: 0 1em 0.5em 0

  &.right
    float: right
    margin: 0 0 0.5em 1em

input[type='text'],
input[type='password'],
input[type='search'],
textarea,
select
  -webkit-appearance: none
  outline: none
  display: block
  width: 100%
  color: $textColor
  background: transparent
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif
  font-size: 1em
  font-weight: $normalFont
  word-spacing: 0.2em
  padding: 5px 0 5px 7px
  margin: 0
  border: 0
  border: 1px solid $faintGrey
  border-radius(0)

textarea
  max-width: 100%
  min-width: 50%
  height: 120px
  min-height: 60px
  padding: 5px 7px

input[type='submit'],
input[type='button'],
input[type='reset'],
button,
.button
  -webkit-appearance: none
  outline: none
  display: inline-block
  vertical-align: middle
  padding: 10px 30px
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif
  font-size: 1.1em
  font-weight: $boldFont
  color: #fff
  background: $primaryColor
  border: 0
  border-radius(0)
  cursor: pointer

  &:hover
    background: darken($primaryColor, 5%)
    
  &.plain
    color: $primaryColor
    background: #fff
    border: 1px solid $faintGrey

    &:hover
      background: lighten($faintGrey, 50%)

  &.small
    padding: 0px 10px
    font-size: 18px
    font-weight: $normalFont
    line-height: 1.5em

  &.glow
    outline: 4px solid rgba(yellow, 0.7)

  &.right-arrow
    iconic('\67', #fff, 'after')
    &:after
      margin-left: 0.5em

  &.left-arrow
    iconic('\66', #fff, 'before')
    &:before
      margin-right: 0.5em

::-webkit-input-placeholder
  color: #e3e3e3

table:not(.plain)
  width: 100%
  font-size: 0.9em
  line-height: 1.3em
  border-collapse: collapse

  th
    font-weight: $boldFont

  th, td
    padding: 5px 10px
    border: 1px solid $faintGrey
    text-align: left
    vertical-align: top

/* Custom style classes */

ul.grid-2
  list-style-type: none
  margin: 0
  padding: 0
  border-collapse: collapse
  clearfix()

  > li
    display: inline-block
    position: relative
    width: 48%
    padding: 0
    margin: 0.8em 0.5em 0 0
    vertical-align: top

  &.with-borders > li
    width: 47%
    padding: 1em
    margin: 0.5em 0.4em
    border: solid 1px $faintGrey
    
  &.no-margins > li
    margin: 0

ul.links
  list-style-type: none
  margin: 0
  padding: 0
  border-collapse: collapse

  > li
    padding: 0
    margin: 0.3em 0
    
    a
      display: block

  &.with-borders > li
    border: solid 1px $faintGrey
    
    a
      padding: 0.3em 0.5em

  &.no-margins > li
    margin: 0

/* Extra helper classes */

.primary-color
  color: $primaryColor

.primary-link
  color: $linkColor

.primary-background
  color: #fff
  background-color: $primaryColor

.primary-border
  border-color: $primaryColor

.normal
  font-weight: $normalFont

.bold
  font-weight: $boldFont

.float-right
  float: right

.float-left
  float: left

.clear
  clear: both

.clearfix
  clearfix()