handy sass file to generate a lot of usefull atomic css rules

_atoms.sass

=def-classes($attr, $values...)
  @each $val in $values
    .#{$attr}-#{$val}
      #{$attr}: #{$val}


@each $d in 0,1,2,4,8,16
  @each $attr in margin, padding
    .#{$attr}-#{$d}, .childs-#{$attr}-#{$d} > *
      #{$attr}: #{$d}em
    .#{$attr}-horizontal-#{$d} , .childs-#{$attr}-horizontal-#{$d} > *
      #{$attr}-right: #{$d}em
      #{$attr}-left: #{$d}em
    .#{$attr}-vertical-#{$d}, .childs-#{$attr}-vertical-#{$d} > *
      #{$attr}-top: #{$d}em
      #{$attr}-bottom: #{$d}em

    @each $side in top, right, bottom, left
      .#{$attr}-#{$side}-#{$d}, .childs-#{$attr}-#{$side}-#{$d} > *
        #{$attr}-#{$side}: #{$d}em

@each $side in top, bottom
  .childs-vertical-align-#{$side} > *
    vertical-align: #{$side}

+def-classes(align, left, right, center)
+def-classes(float, left, right)
+def-classes(display, block, inline-block, none)
+def-classes(position, relative, absolute)
.max-width-100
  max-width: 100%
.hidden
  visibility: hidden

.italic
  font-style: italic

.font-weight-normal
  font-weight: normal

.uppercase
  text-transform: uppercase
.underline
  text-decoration: underline

.color-primary
  color: $primary-color

// a vertical list
.vlist
  & > *
    display: block
    margin:  0
    &:first-child
      margin: 0!important
    &.vlist-element-gap
      margin-top: 2rem


// a horizontal list
.hlist
  & > *
    display: inline-block
    margin: 0
    &:last-child
      margin-right: 0


  &.hlist-comma-separated > *:not(:last-child)
    &:after
      content: ','

  &.hlist-dot-separated > *:not(:last-child)
    &:after
      content: '•'
      margin-left: 1rem

  &.hlist-separated
    > *:not(:last-child)
      &:after
        font-weight: 100
        font-size:   150%
        content: '|'
        margin-left: 0.3rem


// toggle-on-hover - CSS hide /show of children elements

%visible-state
  visibility: visible
  opacity:    1
  max-height: 9999px

%invisible-state
  visibility: hidden
  opacity:    0
  max-height: 0
  &.toggle-on-hover-preserve-height
    max-height: 9999px

$transition-time: 0
.on-hover-container
  .on-hover-show
    @extend %invisible-state
    //+transition(visibility 0s $transition-time, opacity $transition-time, max-height 0s $transition-time)
  .on-hover-hide
    @extend %visible-state
    //+transition(visibility 0s linear 0s, opacity $transition-time, max-height 0s linear 0s)

  &:hover
    & .on-hover-show
      @extend %visible-state
      //+transition(visibility 0s linear 0s, opacity $transition-time, max-height 0s linear 0s)
    & .on-hover-hide
      @extend %invisible-state
      //+transition(visibility 0s $transition-time, opacity $transition-time, max-height 0s $transition-time)


// this represents an icon on the left and some content on the right
// the css might look tricky, but works and fits perfectly good.

// sample markup:
// div.content-with-icon
//   div.cwi-icon
//    img ...
//  div.cwi-content
//    some content

// we use "block formatting context" so it is flexible on the icon width
// more info on: http://www.youtube.com/watch?v=8YtQwv1cUVs

// we should redo it with flex layout after it get good cross-browser support

.content-with-icon
  +clearfix

  .cwi-icon
    display: block
    vertical-align: top
    margin-right: 1rem
    float: left
    img
      max-width: none

  .cwi-content
    // disabled it, since it broke the jury descritiptions ..
    // +hyphenation                // word wrapping for the long words http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
    display:      table-cell    // "block formatting context"
    vertical-align: top
    line-height:  1
    width:        10000px       //makes it fill in the container

  //will make it break on smaller screens
  //&.cwi-responsive
  //  .cwi-icon
  //    float: none
  //  @media #{$small}
  //    .cwi-icon
  //      float: left


.stickable
  position: relative
  .stick-to-left, .stick-to-right, .stick-to-bottom, .stick-to-top
    position: absolute
  .stick-to-right
    right:  0
    top:    0
    bottom: 0
  .stick-to-left
    left:   0
    top:    0
    bottom: 0
  .stick-to-bottom
    left:   0
    right:  0
    bottom: 0
  .stick-to-top
    left:   0
    top:    0
    right:  0