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

     1  // Copyright 2018 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  $dropdown-hover-color = darken($background-color, 2.5%)
    16  
    17  .dropdown
    18    padding 7.5px 9px 7.5px 19px;
    19    vertical-align middle
    20    border 1px solid $colors--neutral-4
    21    border-radius 3px
    22    white-space nowrap
    23    padding-right 10px
    24    color $colors--neutral-6
    25    cursor pointer
    26    position relative
    27    background $colors--neutral-0
    28    display flex
    29    align-items center
    30  
    31    .Select
    32      position initial
    33  
    34    .Select-menu-outer
    35      top calc(100% + 8px)
    36      padding 8px 0
    37  
    38    .Select-option
    39      font-size 14px
    40      line-height 22px
    41      font-family $font-family--base
    42      color $colors--neutral-7 !important
    43      padding 8px 30px 8px 16px
    44      &.is-focused, &.is-selected
    45        color $colors--primary-blue-3 !important
    46        background-color transparent
    47  
    48    .dropdown__title, .Select-value-label
    49      color $adminui-grey-1 !important
    50      font-family SourceSansPro-SemiBold
    51      font-size 14px
    52      line-height 1.71
    53      letter-spacing 0.1px
    54  
    55    &:hover
    56      .Select-arrow-zone
    57        path
    58          fill $colors--neutral-5
    59  
    60    &.dropdown--type-secondary
    61      &:hover
    62        border-color $colors--neutral-5
    63  
    64      &.dropdown__focused
    65        background-color $colors--neutral-1
    66        border 1px solid $colors--neutral-5
    67        box-shadow 0px 0px 3px 0px $colors--neutral-5
    68  
    69    &.dropdown--type-primary
    70      &:hover
    71        border-color $colors--neutral-5
    72  
    73      &.dropdown__focused
    74        border 1px solid $colors--primary-blue-3 
    75        box-shadow 0px 0px 3px 2px $colors--primary-blue-1
    76  
    77    .Select-arrow-zone
    78      color $adminui-blue-1-base
    79      .caret-down
    80        display flex
    81        justify-content flex-end
    82        align-items center
    83      .active
    84        path
    85          fill $color--primary-blue-4
    86    
    87    &._range
    88      width 423px
    89      padding 7px 9px
    90  
    91    &__title
    92      vertical-align middle
    93      display inline-block
    94      -webkit-user-select none
    95      -moz-user-select none
    96      -ms-user-select none
    97      user-select none
    98      letter-spacing 2px
    99      line-height 17px
   100    
   101    &__range-title
   102      display flex
   103      justify-content center
   104      align-items center
   105      background $colors--neutral-3
   106      width 34px
   107      text-align center
   108      border-radius 3px
   109      color $colors--neutral-7
   110      font-size 12px
   111      line-height 24px
   112      letter-spacing 0.1px
   113      font-family $font-family--bold
   114  
   115    &__select
   116      display inline-block
   117      vertical-align middle
   118      -webkit-user-select none
   119      -moz-user-select none
   120      -ms-user-select none
   121      user-select none
   122      letter-spacing 2px
   123      line-height 17px
   124  
   125    &__side-arrow
   126      font-family $font-family--bold
   127      display none
   128      color $adminui-grey-1
   129      cursor pointer
   130      -webkit-user-select none
   131      -moz-user-select none
   132      -ms-user-select: none;
   133      user-select: none;
   134  
   135      &:first-child
   136        border-right 1px solid $button-border-color
   137        padding 12px 24px
   138        border-top-left-radius 4px
   139        border-bottom-left-radius 4px
   140  
   141      &:last-child
   142        border-left 1px solid $button-border-color
   143        padding 12px 24px
   144        border-top-right-radius 4px
   145        border-bottom-right-radius 4px
   146  
   147      &--disabled
   148        background-color $table-border-color
   149        cursor auto
   150  
   151        polyline
   152          stroke $button-border-color
   153  
   154    &--side-arrows
   155      padding 0
   156  
   157      &:hover
   158        background-color transparent
   159  
   160      .dropdown__side-arrow
   161        display inline
   162  
   163        &:hover
   164          background-color $dropdown-hover-color
   165  .dropdown.full-size
   166    .Select-menu-outer, .Select-menu
   167      max-height 450px
   168  
   169  // NOTE: react-select styles can be found in styl/shame.styl