layout.styl

/**
Copyright 2015 The Cockroach Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied. See the License for the specific language governing
permissions and limitations under the License.

Author: Matt Tracy (matt@cockroachlabs.com)
*/

@require 'typography.styl'
@require '../modules/layout-vars.styl'
@require '../modules/palette.styl'

$topbar-border      = $secondary-gray-1
$last-updated-color = $secondary-gray-2
$subnav-background  = $secondary-gray-3

*
  margin 0
  padding 0
  box-sizing border-box

html
body
  height 100%
  background-color $secondary-gray-4
  min-width 700px

#page-container
  position relative
  min-height 100vh

#root
  position relative
  padding-left $nav-width
  min-height "calc(100vh - %s)" % $footer-height

  &:after
    content ""
    display table
    clear both

#content
  min-height 100%

.page
  position relative

.page.cluster
  min-width $chart-width

.page.help-us
  height 100%
  background-color white

.section
  padding 1rem 2rem

  &:after
    content ""
    display table
    clear both

  .topbar + &
    padding-top $top-bar-height + 10px
    width 100%

  .nav + &
    padding-top "calc(%s + 3rem)" % ($top-bar-height + $subnav-height)

  &.table
    margin 0
    padding-left 0
    padding-right 0

    .nav + &
      padding-top $top-bar-height + $subnav-height

  h1
    font-family Lato-Medium
    font-size 23px
    color $main-navy
    margin-top 10px
    margin-bottom 10px
    font-weight normal

  .header
    width calc(100% + 40px)
    height 88px
    background-color $secondary-gray-4
    margin -20px -20px 0 -21px
    padding 40px 30px
    border-bottom 1px solid $secondary-gray-1
    h1
      font-size 19px
      line-height 19px
      padding 0
      margin 0
    &:not(:first-child)
      border-top 1px solid $secondary-gray-1

  .form
    padding 40px 10px
    width 600px
    font-size 13px

    hr
      border 1px solid $secondary-gray-8
      margin 40px 0

input
  border-radius 5px
  border 1px solid $secondary-gray-1
  padding 15px
  font-size 12px
  font-family Lato-Medium
  margin-bottom 25px

  &:not([type=checkbox])
    width 47%
    margin-right 3%
    height 40px

  &[type=checkbox]
    display inline
    margin-right 15px
    padding-bottom 0
    margin-bottom 25px

  &.show-required
    &:invalid
      border-color $secondary-red-2
    &:invalid + span.status:after
        content "Required"
    &:invalid + * + span.icon:after
      content "\26A0"

span.status
  position absolute
  margin-left -65px
  margin-top 10px
  color $secondary-red-3

span.icon
  margin-top 10px
  color $secondary-red-4
  position absolute
  margin-left -15px

button
  width 100px
  height 40px
  border-radius 2px
  border 0
  background-color $secondary-blue
  color white
  font-family Lato-Medium
  font-size 14px
  letter-spacing .25px
  margin-right 20px

  &:hover
    background-color $secondary-blue-2

  &.right
    float right
    margin-right 3%

  &.cancel
    background-color $secondary-gray-12
    color $secondary-gray-13
    &:hover
      background-color $secondary-gray-14

.topbar
  padding 0 3rem 1rem
  background-color white
  border-bottom 1px solid $topbar-border
  height $top-bar-height
  width 100%
  position absolute
  top 0
  right 0
  z-index 1

  h2
    font-size 3rem
    font-family Lato-Medium
    color $main-navy
    line-height $top-bar-height
    padding-top 0
    margin-top 0
    display inline-block

    a
      text-decoration none
      color $main-gray

  img
    position relative
    top 8px

  .health
    text-transform uppercase
    display block
    font-size 11px
    letter-spacing 1px
    color $main-dark-gray

    span.health-icon
      display inline-block
      padding 0 3px
      height 21px
      border-radius 100%

    .icon-check-circle
      color $main-green
    .icon-x, .icon-stop-sign
      color $secondary-red
    .icon-skull
      background-color $secondary-gray-11
      color white

    *
      display inline

    .unreachable-text, .good
      position relative
      top -1.5px
      font-variant normal
      font-family Lato-Heavy
      color $secondary-red
    .good
      color $main-green

  .info-container
    display inline-block
    margin-left 25px

    .last-updated
      font-size 1rem
      font-family Lato-Regular
      color $last-updated-color
      letter-spacing .2px
    .health
      font-family Lato-Heavy
      div
        margin-left 5px
        position relative
        top 1px
        span.refreshing-text
          color $secondary-gray-2
          font-variant none

    strong
      font-family Lato-Bold

.page .nav
  padding 0 3rem 1rem
  background-color $subnav-background
  text-transform uppercase
  letter-spacing 2.17px
  border-bottom 1px solid $secondary-gray-1
  height $subnav-height
  position absolute
  top $top-bar-height
  right 0
  width 100%
  z-index 1

.sql-table
  margin 20 20

a.toggle
  font Lato-Bold
  font-size 1rem
  color $secondary-light-gray

.status
  font-size 9px
  &.missing
    color $secondary-red
  &.stale
    color $secondary-gold
  &.healthy
    color $main-green

.section.overview
  padding-left 3rem
  .charts
    width $chart-width
    &:first-child
      margin-top 10px

.section.node, .section.nodes
  .charts
    width $chart-width

    h2
      clear both
      padding-top 15px

      &:first-child
        padding-top 0

.banner
  width 100%
  background-color $secondary-blue
  transition height .2s ease-in, opacity .2s ease-in
  font-family Lato-Medium
  font-size 13px
  text-align center
  line-height 73px
  color white
  position relative

  &.helpus
    &.expanded
      height 73px

    &.hidden
      height 0

  // only show the first .banner
  // any .banner with a previous .banner as a sibling is hidden
  & ~ &
    height 0
    opacity 0

  button
    margin-left 15px
    background-color $secondary-gold
    height 33px
    text-shadow 1px 1px rgba(0, 0, 0, .24)
    &:hover
      background-color $secondary-gold-2

  .checkmark, .icon-warning
    font-size 15px
    margin-right 15px
    border-radius 100%
    border 2px solid white
    width 38px
    height 38px
    padding 5px 5px 5px 7px

  .icon-warning
    color $secondary-gold
    border 0
    vertical-align middle

  .close
    position absolute
    top 0
    right 3rem

.modal-container
  z-index 10

  &.close
    .screen, .modal
      transition opacity .2s ease-in
      opacity 0

  .screen
    position fixed
    top 0
    left 0
    bottom 0
    right 0
    background-color rgba(21, 31, 52, .8)
    z-index 10

  .modal
    position absolute
    width 700px
    height 620px
    background-color white
    top 20px
    z-index 20
    left 50%
    margin-left -350px
    border 8px solid rgba(21, 31, 52, .4)
    box-shadow 0 2px 4px rgba(0, 0, 0, .5)
    border-radius 4px
    background-clip padding-box
    padding 35px
    opacity 1
    transition height .4s ease-in, width .4s ease-in, opacity .2s ease-in, margin .4s ease-in

    &.hide-modal
      opacity 0

    &.thanks, &.thanks-pre
      width 500px
      height 375px
      margin-left -250px

    &.thanks
      button
        margin-left 52px

    h1, .intro, .thanks, button, form
      transition opacity .2s ease-in

    &.hide, &.thanks-pre
      h1, .intro, .thanks, button, form
        opacity 0
        transition opacity .2s ease-in


    h1
      color $main-green
      margin-bottom 5px
      margin-top 0
      width 100%
      text-align left
      font-size 33px
      font-family Lato-Regular

    .intro
      color $main-navy
      margin 15px 0 30px
      line-height 18px
      font-family Lato-Regular
      font-size 14px
      line-height 2.25rem

    .optin-text
      margin -17px 20px 20px 28px

    .thanks
      margin 35px 52px

      a
        color $main-navy

    .inputs
      background-color $secondary-gray-3
      margin 0 -35px
      padding 30px 30px 10px
      border-top 1px solid $secondary-gray-1
      border-bottom 1px solid $secondary-gray-1

    .close
      position absolute
      top 30px
      right 30px
      color $secondary-gray-9

    button
      margin 20px 0 35px 20px
      width auto
      padding 10px 25px

#content
  position relative

.saving
  display inline
  font-family Lato-Medium
  color $secondary-gray-2
  transition opacity .5s ease-in
  opacity 0
  &.no-animate
    transition opacity 0s
  &.failed
    opacity 1

.optin-text
  font-size 10px
  margin -17px 28px 20px
  line-height 1.8rem

.event-table-container
    background-color white
  .table-header
    padding 15px
    padding-left 3rem
    button, h1
      margin 0
      padding 0
      display inline
      margin-right 20px
    button.toggled, button.untoggled
      border 2px solid $secondary-blue
      height auto
      width auto
      padding 5px
      font-size 12px
    button.untoggled
      background-color white
      color $secondary-blue

  // TODO: if we want the green border from the mock, we should inline the svg
  .icon-info-filled
    color $main-green
    width 18px
    height 18px
    padding 0
    margin 0
    line-height 0

  .timestamp
    font-family Lato-Bold
    font-size 11px
    color $secondary-gray-10

.page.events
  .section
    padding 154px 0 0
  .event-table-container
    .table-header
      display none


.section
  .node-info, .store-info
    padding 0 0 20px 0

    h1
      padding-left 0

    .stats-table td
      border 0

  &.logs
    span
      margin 5px
    input:not([type=checkbox])
      width 100px
      height 20px
      margin 5px

  .num-ranges
    font-size 16px
    margin-bottom 2rem

table
  td:first-child
    padding-left 3rem

#footer
  height $footer-height
  padding-left 80px
  border-top 1px solid $secondary-gray-1

  .links
    width 600px
    margin auto
    a
      line-height $footer-height
      margin 20px
      text-decoration none
      color $main-gray

.tooltip
  position absolute
  z-index $tooltip-layer
  padding 35px
  border 1px solid $secondary-gray-1
  box-shadow 2px 2px 0 $secondary-gray-15
  border-radius 4px
  display none
  background-color white
  top 20px
  &.right
    left 95%
    right auto
  &.left
    right 15%
    left auto
    bottom 100%
    top auto
  .content
    font-size 11px
    color $secondary-gray-16
    font-family Lato-Regular
  .title
    font-size 13px
    color $main-navy
    font-family Lato-Heavy
    text-align center
    width 100%
    padding-bottom 5px

&.viz-tooltip
    width 250px


*:hover + .tooltip
  display block

div.charts
  div:last-child .visualization-wrapper .tooltip
    right 15%
    left auto
    bottom 100%
    top auto

  div:first-child .visualization-wrapper .tooltip
    left 95%
    right auto