github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/styl/shame.styl

// Copyright 2019 The Cockroach Authors.
//
// Use of this software is governed by the Business Source License
// included in the file licenses/BSL.txt.
//
// As of the Change Date specified in that file, in accordance with
// the Business Source License, use of this software will be governed
// by the Apache License, Version 2.0, included in the file
// licenses/APL.txt.

// This is an attempt to override settings from the react-select component.
// react-select's css file uses rules with extremely high specificity, making
// numerous !important statements necessary.
// @stylint off

@require "../src/components/core/index.styl"

.Select.is-focused
  &:not(.is-open)
    .Select-control
      box-shadow none
      border none

.Select.is-focused
  &:not(.is-open)
    .Select-control
      box-shadow none
      border none

.Select-value, .Select-placeholder
  line-height inherit !important
  height auto !important
  position relative !important
  white-space nowrap !important
  max-width 250px !important
  padding 0 0 0 3px !important

.Select-control
  line-height inherit !important
  height auto !important
  border-width 0 !important
  background-color transparent !important
  width auto !important 
  &:hover
    box-shadow none

.Select-input
  line-height inherit !important
  height auto !important
  position absolute !important
  top 0 !important

.Select-input > input
  padding 0 !important

.Select-menu-outer
  width auto !important
  border none !important
  box-shadow 0 2px 4px rgba(0, 0, 0, .2) !important
  max-height 200px
  font-family Lato-Regular
  font-size 14px
  text-transform none
  letter-spacing 0
  border-radius 4px !important
  padding 0 0

.Select-menu, .Select-menu-outer
  max-height 350px

.Select-value-label
  display block !important
  cursor pointer

.Select-arrow
  border-top-color $adminui-grey-1 !important

.Select
  display block
  width 100%

.dropdown--side-arrows
  .Select
    padding 12px 24px !important
  .Select-arrow-zone
    display none

// NVD3 Style overrides.
.nvtooltip
  font-family Lato-Regular !important
  color $body-color !important
  padding 15px 20px !important
  background rgba(255, 255, 255, .98) !important
  border-radius 5px !important
  border 1px solid rgba(0, 0, 0, .1) !important
  box-shadow 0px 0px 4px rgba(0, 0, 0, .2)

.nvtooltip table
  margin 0 !important

.nvtooltip .legend-color-guide div
  width 7px !important
  height 7px !important
  border-radius 50% !important
  border none !important

.nvtooltip table tr.highlight td
  padding 2px 9px 2px 0 !important
  border none !important

.nvtooltip table tr.highlight td:first-child
  padding 2px 9px 2px 3rem

.nvtooltip strong
  font-weight 400 !important

.legend-subtext
  color $tooltip-color !important
  font-weight 300

.nvd3 .nv-axis
  .tick line
    stroke $table-border-color

  text
    fill $headings-color
    font-family Lato-Regular
    font-size 11px

  .nv-axislabel
    font-family Lato-Regular
    fill $headings-color

.nv-y .nv-axis .domain
  opacity 0

.nvd3 text
  opacity .6
  font-size 10px

.ant-divider
  background $button-border-color
  margin-left 0
  margin-right 22px
  &.ant-divider-vertical
    height auto

.ant-tooltip
  .ant-tooltip-inner
    font-size 12px
    border-radius 4px
    background-color $body-color
    font-family Lato-Regular
    color #fff
    box-shadow none
    padding 5px 8px
    min-width 0
    min-height 0
  &.preset-black
    .ant-tooltip-inner
      background-color #000
      pre
        font-family RobotoMono-Medium
        font-size 12px
        color #e7ecf3
        letter-spacing 0.7px
        line-height 24px
        ._text-bold
          font-family RobotoMono-Bold
          color #8dbcff

.ant-input, .ant-time-picker-input
  height 40px
  padding 0px 11px
  border-radius 3px
  border solid 1px $button-border-color
  &:focus
    border solid 1px $link-color
    box-shadow none
  &:hover
    border-color $link-color

.ant-time-picker-panel-combobox
  display flex

.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled)
  border-color $link-color

.ant-fullcalendar-header
  padding: 10px 4px
  text-align: center

.ant-fullcalendar
  font-size 12px
  font-family Lato-Regular

.ant-fullcalendar-selected-day
  .ant-fullcalendar-date
    background #eff5fe
    color #3a7ce1
    &:hover
      background #e0efff
      color $blue-color

.ant-fullcalendar-today 
  &.ant-fullcalendar-date
    color #3a7ce1
    border-color #3a7ce1
    &:hover
      background #eff5fd
  &.ant-fullcalendar-selected-day
    .ant-fullcalendar-date
      background #eff5fd
      &:hover
        background $grey4
        font-weight bold
  &.ant-fullcalendar-disabled-cell
    .ant-fullcalendar-date
      background #E7ECF3
      &:hover
        background #E7ECF3

.ant-fullcalendar-date, .ant-time-picker-panel li
  color #5F6C87
  font-family Lato-Regular
  font-size 12px
  &.ant-time-picker-panel-addon-option-disabled
    color #a3a5af
  &:hover
    background #f6f6f6
  &:focus
    color $link-color

.ant-time-picker-panel li
  display flex
  align-items center

.ant-fullcalendar-disabled-cell .ant-fullcalendar-date
  background #E7ECF3

.ant-fullcalendar-disabled-cell.ant-fullcalendar-today .ant-fullcalendar-date
  color #a3a5af
  font-weight bold
  border-color transparent
  &:before
    border 1px solid #a3a5af

.ant-btn-default, .ant-calendar-today-btn 
  width 100%
  font-family Lato-Bold
  color $link-color
  text-align center
  font-size 14px
  margin 0
  padding 0
  text-transform none
  border: 0;
  span
    line-height 1.71
    letter-spacing 0.1px

.ant-btn:focus
  color: $link-color

.ant-btn:after
  display: none !important;

.ant-btn-background-ghost
  box-shadow: none
  
.color
  &--link
    color $link
    &:hover
      text-decoration underline

.ant-checkbox-wrapper
  &:hover
    .ant-checkbox-inner
      border solid 1px $checkbox-border-hover
      background $popover-border-color
  .ant-checkbox-inner
    border solid 1px $checkbox-border
    border-radius 3px
  .ant-checkbox-checked
    &:hover
      .ant-checkbox-inner
        border solid 1px $link
        background $link
    .ant-checkbox-inner
      background-color $link
  span
    font-family SourceSansPro-SemiBold
    font-size 14px
    line-height 1.71
    letter-spacing 0.1px
    color $popover-color

.ant-pagination
  display flex
  justify-content center
  align-items flex-end
  margin 40px 0
  &.mini
    .ant-pagination-item, .ant-pagination-prev, .ant-pagination-next
      margin 0 5px
  .ant-pagination-item
    a
      color $body-color
      font-size 14px
      font-family Lato-Medium
      &:hover
        color $link-color
  .ant-pagination-item-active
    background transparent
    border-radius 2px
    border 1px solid $link-color
    a
      color $link-color
  .ant-pagination-next, .ant-pagination-prev
    .ant-pagination-item-link
      font-size 12px
      color $body-color
    &:hover
      .ant-pagination-item-link
        color $link-color
    &.ant-pagination-disabled
      .ant-pagination-item-link
        color #b8bbbc
      &:hover
        .ant-pagination-item-link
          color #b8bbbc

.drawer--preset-black
  display flex
  align-items center
  /* width */
  ::-webkit-scrollbar {
    width 7px
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background transparent
    border-radius 10px
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background #5f6c87
    border-radius 10px
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background #5f6c87ad
  }
  .ant-divider
    width 1px
    background #5f6c87
    margin: 0 15px
    height 14px
  .__actions
    button, a
      width auto
      color #f6f6f6
      font-size 12px
      font-family Lato-Bold
      line-height 2
      letter-spacing 0.1px
      &:hover
        color #5f6c87
  .ant-drawer-content
    overflow auto
  .ant-drawer-mask
    background-color transparent
  .ant-drawer-content-wrapper
    padding-left 80px
    box-shadow none !important
  .ant-drawer-content
    background #242a35
  .ant-drawer-header
    padding 15px 0
    margin 0 24px
    background transparent
    border-bottom: 1px solid #5f6c87;
  .ant-drawer-body
    padding 15px 20px
    margin 0 4px
    height 190px
    overflow-x hidde
    overflow-y auto
  .drawer__content
    color #f6f6f6
    font-family RobotoMono-Regular
    font-size 12px
    line-height 24px
    ._text-bold
      color #87beff
      font-family RobotoMono-Bold

.cockroach--tabs
  .ant-tabs-bar
    border-bottom 1px solid $grey2
  .ant-tabs-tab
    font-family SourceSansPro-Regular
    font-size 16px
    line-height 1.5
    letter-spacing normal
    color $placeholder
    &:hover
      color $adminui-grey-1 
  .ant-tabs-tab-active
    color $adminui-grey-1 
  .ant-tabs-ink-bar
    height 3px
    border-radius 40px
    background-color $blue

.page--header
  padding 0
  &__title
    font-family $font-family--base
    font-size 20px
    line-height 1.6
    letter-spacing -0.2px
    color $colors--neutral-8
    margin-bottom 25px