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

     1  import styled from "styled-components"
     2  import BuildButton from "./BuildButton"
     3  import {
     4    AnimDuration,
     5    Color,
     6    mixinResetButtonStyle,
     7    overviewItemBorderRadius,
     8    SizeUnit,
     9  } from "./style-helpers"
    10  
    11  export const SidebarBuildButton = styled(BuildButton)`
    12    ${mixinResetButtonStyle};
    13    width: ${SizeUnit(1)};
    14    height: ${SizeUnit(1)};
    15    background-color: ${Color.gray40};
    16    border-bottom-left-radius: ${overviewItemBorderRadius};
    17    border-top-right-radius: ${overviewItemBorderRadius};
    18    display: flex;
    19    align-items: center;
    20    flex-shrink: 0;
    21    justify-content: center;
    22    opacity: 0;
    23    pointer-events: none;
    24  
    25    &.is-building {
    26      display: none;
    27    }
    28    &.is-clickable {
    29      pointer-events: auto;
    30      cursor: pointer;
    31    }
    32    &.is-clickable,
    33    &.is-queued {
    34      opacity: 1;
    35    }
    36    &.is-selected {
    37      background-color: ${Color.gray70};
    38    }
    39    &:hover {
    40      background-color: ${Color.gray20};
    41    }
    42    &.is-selected:hover {
    43      background-color: ${Color.grayLightest};
    44    }
    45    & .fillStd {
    46      transition: fill ${AnimDuration.default} ease;
    47      fill: ${Color.gray50};
    48    }
    49    &.is-manual .fillStd {
    50      fill: ${Color.blue};
    51    }
    52    &.is-selected .fillStd {
    53      fill: ${Color.black};
    54    }
    55    &:hover .fillStd {
    56      fill: ${Color.white};
    57    }
    58    &.is-selected:hover .fillStd {
    59      fill: ${Color.blueDark};
    60    }
    61    & .icon {
    62      transition: transform ${AnimDuration.short} linear;
    63      width: ${SizeUnit(0.75)};
    64      height: ${SizeUnit(0.75)};
    65    }
    66    &:active > svg {
    67      transform: scale(1.2);
    68    }
    69    &.is-queued > svg {
    70      animation: spin 1s linear infinite;
    71    }
    72  
    73    &.stop-button button {
    74      min-width: 0;
    75      border: 0;
    76      padding: 0;
    77    }
    78  `