tahnik/devRantron

// !compileOnSave


.columns
  display: flex
  height: 100vh
  width: 100%
  span.custom_columns
    display: flex
    height: 100vh
  .add_column
    position: absolute
    bottom: 0px
    right: 13px
    display: flex
    .items_holder
      overflow-x: hidden
      padding: 2rem 0
      .items
        display: flex
        transition: all 0.5s cubic-bezier(.3,.51,.17,1)
        .add_button
          padding: 0.7rem
          margin: 0 5px
          height: auto
    .plus_button
      width: 50px
      padding: 0.7rem 0
      margin: 2rem 5px
      height: auto
.column
  height: 100vh
  overflow: hidden
  margin: 0 0.5rem
  width: 100%
  display: flex
  flex-direction: column
  align-items: center
  z-index: 9
  .no_items
    display: flex
    justify-content: center
    color: white
    margin-top: 5rem
    font-size: 1.3rem
  .items_container
    overflow-x: hidden
    overflow-y: scroll
    width: 100%
    display: flex
    flex-direction: column
    align-items: center
    padding: 0rem 0rem 1rem 0rem
    height: calc(100vh - 2.8rem)
  .column_topbar
    height: 30px
    overflow: hidden
    margin: 0.7rem 20px 0.4rem 0
    display: flex
    .right_navs
      flex: 2
      padding: 3px 0 0 0
      color: inherit
      display: flex
      justify-content: flex-end
      span
        display: flex
        align-items: center
        margin: 0 5px
        i
          font-size: 1.2rem
          opacity: 0.4
          transition: all 0.1s
          &:hover
            transform: scale(1.2)
            opacity: 1
            cursor: pointer
          &:active
            transform: scale(1)
    .left_navs
      flex: 8
      .primary
        flex: 0 0 20px
        display: flex
        align-items: center
        padding: 5px 0.4rem
        transition: all 0.5s
        span
          margin: 0 1rem 0 0
          color: inherit
          opacity: 0.4
          transition: all 0.1s
          text-transform: capitalize
          &:hover
            cursor: pointer
            transform: scale(1.2)
          &:active
            transform: scale(1)
        span.active
          opacity: 1
          transform: scale(1.2)
      .secondary
        flex: 0 0 20px
        display: flex
        align-items: center
        padding: 5px 0.4rem
        transition: all 0.5s
        span
          margin: 0 1rem 0 0;
          color: inherit
          opacity: 0.4
          transition: all 0.1s
          text-transform: capitalize
          &:hover
            cursor: pointer
            transform: scale(1.2)
          &:active
            transform: scale(1)
        span.active
          opacity: 1
          transform: scale(1.2)