atomatic/app/style/blocks.styl

An easy to use build and development tool for Atomic Design Systems, that works with rollup.js, Browserify, webpack and many more...

.icon-block
  padding-top 100%
  background $hexAlto
  height 0
  position relative
  svg
    absolute(50%, null, null, 50%)
    width 30%
    height @width
    display block
    transform translate(-50%, -50%)

.media-query-block
  padding $paddingNormal
  background #66BB6A
  opacity .15
  color $colorTextInvert
  min-width 240px

.color-block
  height 0
  margin 0
  padding-top 60%
  position relative
  z-index 1

  &:before
    absolute(-10px,-10px,0,-10px,'')
    background inherit
    box-shadow inset 0 0 2px 0 rgba($hexBlack, 0.1)

  &:after
    absolute(0,0,0,0,'')
    background url($transparentBackground)
    z-index -5

  &__title
    absolute(50%, 0, null, 0)
    padding 0 $paddingNormal
    transform translateY(-50%)
    text-align center

.forms
  margin-top $paddingLarge
  &:first-child
    margin-top 0

  &__head
    font-size 12px
    opacity .75
    padding-bottom 8px

  &__body
    padding-bottom 8px
    &:last-child
      padding-bottom 0

  &__notice
    font-size 12px

.fonts
  margin-top $paddingXLarge
  &:first-child
    margin-top 0
  &__head
    font-size 12px
    opacity .75
    padding-bottom @font-size
  &__body
    &&--xsmall
      font-size 13.6px
    &&--small
      font-size 16px
    &&--medium
      font-size 21.6px
    &&--large
      font-size 28px

  &__chars
    display flex
    flex-wrap wrap

  &__chars-item
    font-size 1.5rem
    flex 0 0 2.1em
    margin 0 -1px -1px 0
    padding $paddingNormal
    border $borderDefault
    text-align center
    line-height 1.3em
    vertical-align baseline