client/styles/definitions.styl

// color palette
uber-black = #09091a
uber-white = #C0C0C0
uber-blue = #11939A
uber-black-95 = #1C1B1B
uber-black-90 = #282727
uber-black-80 = #494949
uber-black-60 = #717171
uber-black-40 = #939393
uber-white-120 = #A6A5A5
uber-white-80 = #C6C6C6
uber-white-60 = #D6D6D5
uber-white-40 = #E5E5E4
uber-white-20 = #F1F1F1
uber-white-10 = #F8F8F9
uber-blue-120 = #108188
uber-blue-80 = #17b8be
uber-blue-60 = #47d3d9
uber-blue-40 = #a3e9ec
uber-blue-20 = #caf2f4
uber-blue-10 = #e8fafa
uber-orange = #CA3B27
uber-green = #629A41
uber-yellow = #ECAB20

// semantic colors
base-ui-color = uber-white-80
primary-color = uber-blue
secondary-color = #5879DA
tertiary-color = #1A3177
alt-row-color = uber-white-10
base-text-color = uber-black-80
disabled-color = uber-white-80
base-background-color = white
inverted-text-color = uber-white
inverted-header-color = white
inverted-background-color = uber-black
inverted-secondary-color = #222231

// layout spacing
inline-spacing-small = 8px
inline-spacing-medium = layout-spacing-tiny = 12px
inline-spacing-large = 16px
layout-spacing-small = 18px
layout-spacing-medium = 24px
layout-spacing-large = 32px
layout-spacing-huge = 40px
half-spacing-unit = layout-spacing-large
page-margin-x = 32px
page-margin-y = 20px

border-size = 1px
border-size-large = 2px
border-active-size = 2px
border-active-small-size = 2px
overlay-box-shadow-spread = 3px
rule-width = border-size
rule-style = border-style
rule-color = uber-white-40
input-border-color = uber-white-40
input-border = border-size solid input-border-color
input-border-active-color = uber-blue-120

primary-font-family = ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif
primary-font-weight-default = 400
secondary-font-family = ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif
secondary-font-weight-default = 200
secondary-narrow-font-family = ff-clan-web-pro-narrow, "Helvetica Neue", Helvetica, sans-serif
secondary-narrow-font-weight-default = 500
tertiary-font-family = "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
tertiary-font-weight-default = 300
monospace-font-family = "Menlo", "Consolas", Monaco, monospace, serif
monospace-font-weight-default = normal

base-font-size = 14px
base-line-height = 24px
base-font-size-palm = 14px
base-line-height-palm = 24px
base-text-align = none
font-weight-semibold = 500
font-weight-bold = 600
link-color = uber-blue
h1-spacing = 48px
h2-spacing = 40px
h3-spacing = 24px
h4-spacing = 20px
h5-spacing = 16px
h6-spacing = 12px
h6-text-transform = uppercase
label-font-size = 12px
form-control-height = 44px
form-control-height-small = 28px
form-control-height-large = 52px
form-control-padding = 8px 18px
form-control-padding-ends = 8px
form-control-padding-sides = 18px
transition-func = ease

lap-start = 481px
desk-start = 1024px
desk-wide-start = 1200px

top-nav-height = 60px // would be nice to calculate this
base-spacing-unit = base-line-height
list-name-field-width = 500px
datetime-col-width = 230px

smooth-transition = 200ms cubic-bezier(0.72, 0.01, 0.56, 1)

// mixins
one-liner-ellipsis()
  white-space nowrap
  overflow hidden
  text-overflow ellipsis

backtick()
  border 1px solid uber-white-80
  border-radius (border-size * 2)
  font-family monospace-font-family
  padding 2px
  font-size 0.8em

// ignore intrinsic size of children and only flex up to the size of the parent
flex-exactly-to-parent(direction = row)
  display flex
  flex 1
  min-width 0
  min-height 0
  flex-direction column unless direction is row

superlabel()
  position relative
  &::before
    text-transform uppercase
    position absolute
    top -11px
    font-size 11px
    color uber-black-60

action-button(color = primary-color)
  display inline-block
  padding 13px 21px
  transition all 400ms ease
  text-transform uppercase
  font-weight 600
  color white
  background-color color
  white-space nowrap
  &:hover:not([aria-disabled="true"])
    background-color darken(color, 20%)
  &[aria-disabled="true"]
    opacity 0.5
    cursor not-allowed

icon(charcode)
  &::before
    font-family 'uber-icons'
    content charcode
    margin-right 0.4em

icon-cancel()
  icon('\ea0b')
icon-check()
  icon('\ea15')
icon-cloud()
  icon('\ea17')
icon-delete()
  icon('\ea1e')
icon-download()
  icon('\ea21')
icon-history()
  icon('\ea6c')
icon-play()
  icon('\ea92')
icon-refresh()
  icon('\ea5a')
  &::before
    transform rotate(45deg)
icon-trips()
  icon('\ea6d')

paged-grid()
  .filters, span.error, span.no-results
    padding inline-spacing-large

  section.results
    overflow auto

history-item-color(color, alphapct)
  border-color color
  background-color alpha(color, alphapct)
  &.vis-selected
    background-color color
    color white

history-item-state-color(alphapct)
  history-item-color(primary-color, alphapct)
  &.completed
    history-item-color(uber-green, alphapct)
  &.failed, &.timedout
    history-item-color(uber-orange, alphapct)
  &.cancelled, &.canceled
    history-item-color(uber-black-90, alphapct)
    .vis-item-content
      text-decoration-line line-through