client/styles/base.styl

@require "./definitions"
@require "./animations"

*
  box-sizing border-box
  &::-webkit-scrollbar
    width 10px
    height 10px
  &::-webkit-scrollbar-thumb
    background-color alpha(uber-black-60, 0.5)
  brdr = 1px solid rgba(0, 0, 0, 0.15)
  &::-webkit-scrollbar-track
    background-color rgba(0, 0, 0, 0.1)
    box-shadow none
    &:horizontal
      border-top brdr
    &:vertical
      border-left brdr
  &::-webkit-scrollbar-corner
    border brdr

:focus
  outline lighten(uber-blue, 10%) auto 3px

@font-face
  font-family 'UberMove'
  src url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Regular.woff2') format('woff2'), url('https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMove-Regular.woff') format('woff')
  font-weight 400
  font-style normal
  font-display swap

body
  font-family primary-font-family
  font-size base-font-size
  color base-text-color

a
  text-decoration none
  transition all smooth-transition
  &[href]
    color uber-blue


h1
  font-size 44px
h2, h3, h4, h5
  padding 0.2em 0
h2
  font-size 36px
h3
  font-size 24px
h4
  font-size 22px
h5
  font-size 16px
  text-transform uppercase

a[target="_blank"]::after
  color transparent
  content '---'
  background-repeat no-repeat
  background-position center center
  background-image url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='14px' height='14px' fill='#11939A'><g><path d='M52 8H32l6.462 6.462L20 44l29.538-18.462L56 32V12a4 4 0 0 0-4-4z'></path><path d='M48 32.012V48H16V16h15.988l.578-.924L25.49 8H16a8 8 0 0 0-8 8v32a8 8 0 0 0 8 8h32a8 8 0 0 0 8-8v-9.49l-7.076-7.076-.924.578z'></path></g></svg>")

table
  width 100%
  border-collapse collapse

table > caption {
  color: black;
  padding: inline-spacing-medium inline-spacing-medium 0 inline-spacing-medium;
  font-size: 24px;
  font-weight: 500;
}

td, th
  padding inline-spacing-medium

th
  box-shadow: 0px 2px 0 0 uber-white-60;
  text-transform uppercase
  color black
  font-weight 500

li:nth-child(2n), tr:nth-child(2n)
  background-color alt-row-color

input, text-area
  font-family primary-font-family
  font-size base-font-size
  line-height base-line-height
  padding form-control-padding
  margin 0 inline-spacing-medium
  border input-border
  outline none
  &:focus
    border-color uber-blue

.field
  position relative
  display flex
  input
    flex 1 1 auto
    margin 0
  label
    position absolute
    padding 0 6px
    color uber-black-40
    top calc(50% - 8px)
    left 18px
    transition all 150ms linear
    pointer-events none
  input:not(:placeholder-shown) + label,
  input:focus + label
    top -4px
    left 6px
    color black
    background-color white
    transform scale(0.8)

pre, code
  font-family monospace-font-family
  font-weight 200
pre
  overflow auto
  border 1px solid uber-black-60
  background-color uber-white-20
  line-height 1em
  padding 6px

area-loader
  display block
  flex 1 1 100%
  position relative
  width 100%
  height 100%
area-loader, section.pending
  size = 32px
  &::after
    content ''
    display block
    position absolute
    width size
    height size
    border-radius size
    left "calc(50% - %s)" % (size/2)
    top "calc(25% - %s)" % (size/2)
    border 3px solid uber-blue
    border-bottom-color transparent
    animation spin 800ms linear infinite

.status-select
  width initial !important
  min-width 210px

.no-results, span.error
  line-height 3em
  text-align center
  font-size 18px
.no-results
  font-weight 200
span.error
  display block
  color uber-orange

section.workflow-list {
  overflow-y: hidden;
}