github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/cluster/components/visualization/visualizations.styl (about)

     1  // Copyright 2019 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  @require nib
    12  @require "~styl/base/palette.styl"
    13  @require "~src/components/core/index.styl"
    14  
    15  $viz-bottom = 65px
    16  $viz-sides = 62px
    17  
    18  .visualization
    19    position relative
    20    background-color white
    21    color $headings-color
    22    border-radius 5px
    23    border 1px solid rgba(0, 0, 0, .1)
    24    // prevents borders from doubling up
    25    margin-bottom 10px
    26  
    27    &__content
    28      padding 0 10px 15px
    29      height 200px
    30      &.visualization--loading
    31        display flex
    32        justify-content center
    33        align-items center
    34  
    35    &__header
    36      display flex
    37      justify-content center
    38      align-items center
    39      padding 15px 25px 0
    40  
    41    &__title
    42      font-size 14px
    43      font-family $font-family--bold
    44      color $body-color
    45  
    46    &__subtitle
    47      color $tooltip-color
    48      margin-left 5px
    49      font-size 12px
    50      font-family $font-family--base
    51  
    52    &__spinner
    53      width 40px
    54      height 40px
    55  
    56    &__tooltip
    57      width 36px  // Reserve space for 10px padding around centered 16px icon
    58      height 16px
    59  
    60    &__tooltip-hover-area
    61      width 100%
    62      padding 0px 10px
    63  
    64    &__info-icon
    65      width 16px
    66      height 16px
    67      border-radius 50%
    68      border 1px solid $tooltip-color
    69      font-size 12px
    70      line-height 14px  // Visual tweak to vertically center the "i"
    71      text-align center
    72      color $tooltip-color
    73  
    74    .hover-tooltip--hovered &__info-icon
    75      border-color $body-color
    76      color $body-color
    77  
    78    .icon-warning
    79      color $warning-color
    80  
    81  .linegraph
    82    height 100%
    83  
    84  .visualization--faded
    85    .visualization .number
    86    .nv-group
    87    .nv-areaWrap
    88      opacity .2
    89  
    90  .linked-guideline__line
    91    stroke $link-color