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

     1  // Copyright 2020 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 '~src/components/core/index.styl'
    12  
    13  .crl-button
    14    border-radius 3px
    15    cursor pointer
    16    width max-content
    17  
    18  .crl-button--type-flat
    19    border solid 1px transparent
    20    background-color transparent
    21    color $colors--primary-blue-3
    22  
    23    &:hover
    24      color $colors--primary-blue-4
    25  
    26    &:active
    27      border solid 2px $colors--primary-blue-1
    28  
    29    &:focus
    30      outline none
    31      border solid 1px $colors--primary-blue-3
    32  
    33    &.crl-button--disabled
    34      color $colors--neutral-4
    35      pointer-events none
    36      cursor default
    37  
    38  .crl-button--type-primary
    39    background-color $colors--primary-green-3
    40    color $colors--white
    41    border solid 1px $colors--primary-green-3
    42  
    43    &:hover
    44      color $colors--white
    45  
    46    &:active
    47      border solid 1px $colors--primary-green-4
    48  
    49    &:focus
    50      outline none
    51      border solid 1px $colors--primary-green-4
    52  
    53    &.crl-button--disabled
    54      border solid 1px #c4e6ba
    55      background #c4e6ba
    56      color $colors--white
    57      pointer-events none
    58      cursor default
    59  
    60  
    61  .crl-button--type-secondary
    62    background-color $colors--white
    63    color $colors--primary-text
    64    border solid 1px $colors--neutral-4
    65  
    66    &:hover, &:active, &:focus
    67      color $colors--primary-text
    68      background $colors--neutral-1
    69  
    70    &:active
    71      border solid 1px $colors--neutral-5
    72  
    73    &:focus
    74      outline none
    75      border solid 1px $colors--neutral-5
    76  
    77    &.crl-button--disabled
    78      border solid 1px $colors--neutral-4
    79      background $colors--neutral-1
    80      color $colors--neutral-5
    81      pointer-events none
    82      cursor default
    83  
    84  .crl-button--size-default
    85    height $line-height--larger
    86    min-width $line-height--larger
    87    padding-left $spacing-small
    88    padding-right $spacing-small
    89  
    90  .crl-button--size-small
    91    height $line-height--medium
    92    min-width $line-height--medium
    93    padding 0 $spacing-xx-small
    94  
    95  .crl-button__container
    96    display flex
    97    flex-direction row
    98    flex-wrap nowrap
    99  
   100  .crl-button__icon--push-left
   101    order -1
   102  
   103  .crl-button__icon--push-right
   104    order 1
   105  
   106  .crl-button--link-to
   107    margin-bottom 17px
   108    .crl-button__content
   109      font-family $font-family--base
   110      font-size $font-size--medium
   111      line-height 22px
   112      letter-spacing 0.1px
   113      color $colors--neutral-7
   114      &:hover
   115        text-decoration underline
   116    img
   117      width 10px
   118      height 10px
   119      margin-right 10px
   120    &:focus
   121      border none