danielres/expresto_BDD

//= require expressions

@import compass_twitter_bootstrap_awesome

@for $i from 1 through 16
  .span#{$i}
    float: left
    margin-left: 20px

.homepage
  .column
    &.expressions
      @extend .span5
    &.news
      @extend .span4
    &.comments
      @extend .span3

.expression.presenter
  .row
    .column
      div + div
        padding-top: 0
        margin-top: 20px
        border-top: 1px solid #eee
  .menus
    .manage.menu
      @extend .pull-right
    .share.menu
      @extend .pull-left
  .details
    .column
      &.first,
      &.second,
      &.third
        @extend .span4
  .examples, .tags, .illustrations, .similar
    @extend .span4

/* DEVELOPMENT HELPERS ********************/
span.todo
  background: transparentize(#882222, 0.9)

div.todo
  margin-bottom: 10px
  background: transparentize(#882222, 0.9)


/* GLOBAL *********************************/

h1, h2, h3, h4, h5, h6
  margin-top:    1.2em
  margin-bottom: 0.8em
  &.first
    margin-top: 0
h1, h2, h3, h4
  font-weight: normal
b,dt, h1, h2, h3
  color: #666
h3
  color: saturate(darken(#f1810c, 7%), 80%)
  +text-shadow
small, .small
  font-size: 10px
  line-height: 1.4
li hr
  margin: 5px 0
.muted a
  &:link,
  &:visited
    color: desaturate(#0088CC, 50%)
.icon-muted
  color: #ccc

/* GENERIC & EXTENDABLE CLASSES ***********/

.default-margin-top
  margin-bottom: 20px
.default-margin-bottom
  margin-bottom: 20px
.faded
  color: #999999
.alert-notice
  @extend .alert-info
.hidden
  position: absolute
  left: -9999px
  visibility: hidden
/* PAGE SETUP *****************************/

div.page
  @extend .container
  margin-top: 150px
  padding-bottom: 20px
  position: relative

/* PAGE COMPONENTS ************************/

// pagination
.page_entries_info
  @extend .faded
  @extend .default-margin-bottom

// forms
.custom-controls
  @extend .controls
  padding-top: 5px
.help-block, .help-inline
  color: #999
.form-horizontal .help-block
  margin-top: 0
  font-size: 90%
input, textarea, select, .uneditable-input
  width: 100%

/* MENUS **********************************/

.menus
  @extend .container
  li
    margin-right: 7px
.menu ul
  @extend .unstyled
.menu.add_expression
  clear: right
.menu.languages
  li
    a:link, a:visited
      background-color: #333
    a:hover
      background-color: #444
  position: relative
  top: 3px
  ul.nav
    @extend .nav-pills
.menu.pages
  position: fixed
  padding-left: 119px
  margin-top: -64px
  z-index: 1030
  .nav-tabs
    border-bottom: none
  li
    margin-right: 7px
  a
    padding: 6px 11px 5px
    background: #333
    color: gray
    border: none
    &:hover
      background: #444
      color: white
  li.active a:link,
  li.active a:visited
    color: #333
    background: white
    border: none
    padding-bottom: 10px

/* NAVBAR *********************************/

.navbar
  @extend .navbar-fixed-top

.navbar
  $shadow: -2px 2px 3px #aaa
  +bootstrap-box-shadow($shadow)

.navbar-inner
  .tagline
    font-size: 16px
    margin-top: 20px
    margin-bottom: 4px
    line-height: 1
  a.brand
    padding-left: 0
    padding-bottom: 0px
    margin-left: -12px
  .btn
    $shadow: -2px 2px 5px black
    +bootstrap-box-shadow($shadow)
  .btn-large
    padding: 9px 14px


/* FOOTER *********************************/

footer
  border-top: 1px solid #666
  padding-top: 15px
  $c1: #eee
  $c2: white
  background: $c1
  +bootstrap-gradient-vertical($c1, $c2)
  min-height: 100px

  ul
    +horizontal-list
    +float(right)
  li
    &:after
      content: '|'
      padding: 0 20px
    &:last-child:after
      content: ''
      padding: 0
  li.creation
    a
      display: inline
      font-weight: bold
      &:link,
      &:visited
        padding-left: 3px
        margin-right: 20px
        color: gray
      &:hover
        color: #005580
      &:after
        $size: 16px
        width: $size + 4px
        content: '.'
        text-indent: -999px
        text-decoration: none
        overflow: hidden
        background: url('/assets/pixarea-picto-small-24.png') no-repeat right bottom
        height: $size
        display: inline-block
        position: absolute
      &:hover:after
        background-position: right top

/* SPECIFIC STUFF *************************/

//
ul.expressions
  @extend .unstyled

// homepage
div.page
  body.home-index &:after
    content: '.'
    display: block
    width: 250px
    height: 250px
    position: absolute
    right: 0px
    bottom: -23px
    background: url('/assets/ggar-characters-x250.png') no-repeat right bottom

// avatar
.avatar
  +bootstrap-box-shadow(0 0 4px #aaa)
  border: 0 solid white
  border-width: 4px 4px 13px
  margin-left: 20px
  margin-bottom: 20px
  +bootstrap-rotate(2deg)
.avatar-small
  @extend .avatar
  border-width: 2px 2px 6px
  margin-left: 10px
  margin-bottom: 0px

// news
.secundary-text,
.secundary-text p
  font-size: 12px
  line-height: 1.4
  color: #444