github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewButton.tsx (about)

     1  import {
     2    AnimDuration,
     3    Color,
     4    ColorRGBA,
     5    Font,
     6    mixinResetButtonStyle,
     7  } from "./style-helpers"
     8  
     9  export const OverviewButtonMixin = `
    10    ${mixinResetButtonStyle};
    11    font-family: ${Font.sansSerif};
    12    display: flex;
    13    align-items: center;
    14    padding: 8px 12px;
    15    margin: 0;
    16  
    17    background: transparent;
    18  
    19    border: 1px solid ${ColorRGBA(Color.grayLightest, 0.5)};
    20    box-sizing: border-box;
    21    border-radius: 4px;
    22    cursor: pointer;
    23    transition: color ${AnimDuration.default} ease,
    24      border-color ${AnimDuration.default} ease;
    25    color: ${Color.gray70};
    26  
    27    &.isEnabled {
    28      background: ${Color.gray70};
    29      color: ${Color.gray20};
    30      border-color: ${Color.grayDarker};
    31    }
    32    &.isEnabled.isRadio {
    33      pointer-events: none;
    34    }
    35  
    36    &:disabled {
    37      opacity: 0.33;
    38      border: 1px solid ${ColorRGBA(Color.grayLightest, 0.5)};
    39      color: ${Color.gray70};
    40    }
    41  
    42    & .fillStd {
    43      fill: ${Color.gray70};
    44      transition: fill ${AnimDuration.default} ease;
    45    }
    46    &.isEnabled .fillStd {
    47      fill: ${Color.gray20};
    48    }
    49  
    50    &:active,
    51    &:focus {
    52      outline: none;
    53      border-color: ${Color.grayLightest};
    54    }
    55    &.isEnabled:active,
    56    &.isEnabled:focus {
    57      outline: none;
    58      border-color: ${Color.gray10};
    59    }
    60  
    61    &:hover {
    62      color: ${Color.blue};
    63      border-color: ${Color.blue};
    64    }
    65    &:hover .fillStd {
    66      fill: ${Color.blue};
    67    }
    68    &.isEnabled:hover {
    69      color: ${Color.blueDark};
    70      border-color: ${Color.blueDark};
    71    }
    72    &.isEnabled:hover .fillStd {
    73      fill: ${Color.blue};
    74    }
    75  `