Skip to content
Snippets Groups Projects
temperatureComparison.scss 1.18 KiB
Newer Older
  • Learn to ignore specific revisions
  • @import 'src/styles/base/color';
    @import 'src/styles/base/breakpoint';
    
    .temperatureComparison {
      display: flex;
    
      align-items: center;
    
      border-radius: 8px;
    
      padding: 8px 4px 8px 20px;
    
      box-shadow: 0px 4px 16px 0px $black-shadow;
      background-position: bottom right;
      background-repeat: no-repeat;
    
      height: 60px;
      transition: all 0.3s ease-in-out;
    
      &.loading {
        justify-content: center;
      }
    
    
      &.hot {
        background-image: url('../../../assets/png/temperatures/hot.svg'),
          linear-gradient(259deg, rgba(6, 29, 62, 0) 25.28%, #77aee0 121.36%),
          radial-gradient(
            185.82% 146.65% at 50% 79.83%,
            rgba(6, 29, 62, 0) 0%,
            #e0bc77 100%
          );
      }
      &.cold {
        background-image: url('../../../assets/png/temperatures/cold.svg'),
          radial-gradient(
            185.82% 146.65% at 50% 79.83%,
            rgba(6, 29, 62, 0) 0%,
            #77a3e0 100%
          );
      }
    
      .tc-content {
        text-align: left;
        flex-grow: 1;
        color: $white;
      }
    
    
      .buttonContainer {
        display: flex;
    
        align-items: flex-start;
        height: 100%;
    
        .info-icon {
          align-items: flex-start;
          padding: 0;
          position: relative;
          top: -4px;
          stroke: $white;
        }