CSS recipes

CSS recipes.


using icons

global classes (text element is next to icon div)

this method doesn’t allow to have multiline text next to icon: icon and text divs are located on the same line - text will wrap to the next line below the line with icon div.

app/assets/stylesheets/globals/icons.sass:

@import v2/globals/variables
@import v2/mixins/retina

.success-icon
  +background_inline_retina('#{$image_global_path}/success', 'png', $w: 15px, $h: 16px)
  display: inline-block
  height: 16px
  margin-right: 5px
  vertical-align: baseline
  width: 15px

USAGE:

global classes (text element is nested in icon div)

this method allows to have multiline text next to icon: text element is located in icon div (div with icon as background).

app/assets/stylesheets/globals/icons.sass:

@import v2/globals/variables
@import v2/mixins/retina

.success-icon
  +background_inline_retina('#{$image_global_path}/success', 'png', $w: 15px, $h: 16px)
  display: inline-block
  min-height: 16px
  padding-left: 20px

USAGE:

even though this method allows for miltiline text html is a bit misleading: .success-icon div contains not only icon but text as well.

mixin with before pseudo-element

this method doesn’t allow to have multiline text next to icon.

app/assets/stylesheets/mixins/before_icon.sass:

@import v2/mixins/retina

=before_icon($image_path, $w: auto, $h: auto, $position: 0 0, $vertical_align: text-bottom)
  &::before
    +background_inline_retina($image_path, 'png', $w: $w, $h: $h, $position: $position)
    content: ''
    display: inline-block
    height: $h
    margin-right: 5px
    vertical-align: $vertical_align
    width: $w

USAGE: