Contents

// MIT License
// Copyright (c) 2018 Kiryl Smalouski


// allow set values in app. 
// require @import instead require in app-stylesheet
$flex-classes-margin-vertical: 6px !default
$flex-classes-margin-horizontal: 10px !default

$flex-classes-padding-vertical: 6px !default
$flex-classes-padding-vertical: 10px !default

.flex
  display: flex
  box-sizing: border-box

  $fc-m-h: 10px
  $fc-m-v: 6px
  $fc-m: $fc-m-v $fc-m-h

  $fc-p-h: 10px
  $fc-p-v: 6px
  $fc-p: $fc-p-v $fc-p-h


  &.row
    flex-direction: row

    &.center
      justify-content: center

    &.middle
      align-items: center

    &.top
      align-items: flex-start

    &.bottom
      align-items: flex-end

    &.stretch
      align-items: stretch

  &.col
    flex-direction: column

    &.center
      align-items: center

    &.middle
      justify-content: center

    &.top
      justify-content: flex-start

    &.bottom
      justify-content: flex-end

    &.stretch
      align-items: stretch


  &.space-between
    justify-content: space-between

  &.can-wrap
    flex-wrap: wrap

  &.eq-childs
    & > *
      flex: 1 1


  // ------------------------
  //         margins
  // ------------------------
  &.m
    margin: $fc-m

  &.m-v
    margin-top: $fc-m-v
    margin-bottom: $fc-m-v

  &.m-h
    margin-left: $fc-m-h
    margin-right: $fc-m-h


  &.m-top
    margin-top: $fc-m-v

  &.m-bottom
    margin-bottom: $fc-m-v

  &.childs-m
    & > *
      margin: $fc-m

  &.childs-m-h
    & > *
      margin-left: $fc-m-h
      margin-right: $fc-m-h

  &.childs-m-v
    & > *
      margin-top: $fc-m-v
      margin-bottom: $fc-m-v


  // ------------------------
  //         paddings
  // ------------------------
  &.p
    padding: $fc-p

  &.p-top
    padding-top: $fc-p-v

  &.p-bottom
    padding-bottom: $fc-p-v

  &.p-v
    padding-top: $fc-p-v
    padding-bottom: $fc-p-v

  &.p-h
    padding-left: $fc-p-h
    padding-right: $fc-p-h

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
flex_classes-0.2.0	app/assets/stylesheets/flex_classes.sass