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

     1  import styled from "styled-components"
     2  import BuildButton from "./BuildButton"
     3  import {
     4    AnimDuration,
     5    Color,
     6    mixinResetButtonStyle,
     7    SizeUnit,
     8  } from "./style-helpers"
     9  
    10  export const OverviewTableBuildButton = styled(BuildButton)`
    11    ${mixinResetButtonStyle};
    12    display: flex;
    13    align-items: center;
    14    justify-content: center;
    15  
    16    & .fillStd {
    17      transition: fill ${AnimDuration.default} ease;
    18      fill: ${Color.gray50};
    19    }
    20    &:hover .fillStd {
    21      fill: ${Color.white};
    22    }
    23    & .icon {
    24      transition: transform ${AnimDuration.short} linear;
    25      width: ${SizeUnit(0.75)};
    26      height: ${SizeUnit(0.75)};
    27    }
    28    &:active > svg {
    29      transform: scale(1.2);
    30    }
    31    &.is-building > svg {
    32      animation: spin 1s linear infinite;
    33    }
    34    &.is-queued > svg {
    35      animation: spin 1s linear infinite;
    36    }
    37    &.is-manual .fillStd {
    38      fill: ${Color.blue};
    39    }
    40  
    41    &.stop-button {
    42      display: block;
    43    }
    44    &.stop-button button {
    45      min-width: 0;
    46      border: 0;
    47      padding: 0;
    48    }
    49  `