lcars_layout.styl #1

// LCARS Layout (Menus, Dividers, Elbows)

.{prefix}container
  background black
  padding container-padding
  size 100% 100%

// Side Menu
menu-height = 25px

.{prefix}menu,
ol.{prefix}menu,
ul.{prefix}menu
  margin-right menu-column-spacing
  &.left
    margin-right @margin-right
    margin-left 0
  &.right
    margin-left @margin-right
    margin-right 0
  & li
    display inline-block
    vertical-align top
    color black
    font-weight bold
    size 100% menu-height
    padding base-spacing
    margin-bottom base-spacing
    &.large-gap
      margin-bottom base-spacing*2
    &.tall
      height menu-height*3
    & a
      display block
      text-decoration none
      color inherit

/*
LCARS Dividers and Elbows
*/

lcars-orange = colors.orange
lcars-blue = colors.blue
far-spacer = divider-pattern-size - 3px
near-color-size = divider-pattern-size / 4
far-color-size = near-color-size + base-spacing

.{prefix}divider
  padding-top divider-height + base-spacing
  border-right 5px solid black
  background-repeat repeat-x
  background-size divider-pattern-size divider-height
  background-image linear-gradient(90deg, transparent far-spacer, black far-spacer), linear-gradient(90deg, lcars-blue near-color-size, transparent near-color-size), linear-gradient(90deg, transparent far-color-size, lcars-orange far-color-size)
  &.bottom
    padding-bottom @padding-top
    padding-top 0
    background-position bottom left
    min-height divider-height*4

// Color combo clases
create-divider-colors(colors)

.{prefix}elbow
  position relative
  width 100%
  height divider-height*4
  min-height @height
  background white
  & a
    display inline-block
    margin-top @height - (20px + base-spacing)
    padding base-spacing
  &:after
    content ''
    display block
    position absolute
    size menu-column-spacing divider-height*3
    background black
  &.left.bottom
    border-radius top left radius-size*3
    &:after
      absolute bottom right
      border-radius top left radius-size*3
  &.left.top
    border-radius bottom left radius-size*3
    & a
      display inline-block
      margin-top 0
      padding base-spacing
    &:after
      absolute top right
      border-radius bottom left radius-size*3
  &.right.bottom
    border-radius top right radius-size*3
    &:after
      absolute bottom left
      border-radius top right radius-size*3
    & a
      display inline-block
      margin-top @height - (20px + base-spacing)
      margin-left menu-column-spacing
      padding base-spacing
  &.right.top
    border-radius bottom right radius-size*3
    & a
      display inline-block
      margin-top 0
      margin-left menu-column-spacing
      padding base-spacing
    &:after
      absolute top left
      border-radius bottom right radius-size*3