src/components/blocks/supplements.css - main - merulaalba/RestoApp

src/components/blocks/supplements.css
133 строки4 KB
merulaalba
Add modal
19 июл 2026, 16:07
19 июл 2026, 16:07e01b80c
.supplements {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);

  .supplements__item {
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-600);
    border-radius: var(--small-spacing);
    text-align: center;
    overflow: hidden;
    transition: all 0.2s ease-in-out;

    &:hover,
    &:has(.supplements__input-wrapper input:checked):hover,
    &:has(.supplements__input-wrapper input:checked):focus-within {
      border-color: var(--color-neutral-100);
    }

    &:hover .supplements__description,
    &:focus-within .supplements__description,
    &:has(.supplements__input-wrapper input:checked):hover .supplements__description,
    &:has(.supplements__input-wrapper input:checked):focus-within .supplements__description {
      color: var(--color-neutral-800);
      background-color: var(--color-neutral-100);
      border-color: var(--color-neutral-100);
    }

    &:has(.supplements__input-wrapper input:checked):hover .supplements__input,
    &:has(.supplements__input-wrapper input:checked):focus-within .supplements__input {
      background-color: var(--color-neutral-100);
      border-color: var(--color-neutral-100);
    }

    &:has(.supplements__input-wrapper input:checked):hover .supplements__input::after,
    &:has(.supplements__input-wrapper input:checked):focus-within .supplements__input::after {
      background-image:url("../../assets/images/icons/icon-tick-checked.svg");
    }

    &:has(.supplements__input-wrapper input:checked) {
      border-color: var(--badge-active);
    }

    &:has(.supplements__input-wrapper input:checked) .supplements__description {
      background-color: var(--badge-active);
      border-color: var(--badge-active);
    }
  }

  .supplements__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 230px;
    grid-auto-rows: 230px;
    gap: var(--small-spacing);
  }

  .supplements__item {
    transition: all var(--transition-duration) ease;
  }

  .supplements__weight {
    position: absolute;
    top: var(--smallest-spacing);
    left: var(--smallest-spacing);
    font-size: var(--badge-text);
    line-height: var(--badge-line-height);
    font-weight: 600;
    padding: var(--smallest-spacing);
    color: var(--color-neutral-800);
    background-color: var(--badge-layout);
    border-radius: var(--smallest-spacing);
  }

  .supplements__img {
    width: 158px;
    height: 158px;
  }

  .supplements__description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--smallest-spacing);
    font-size: var(--badge-text);
    line-height: var(--badge-line-height);
    background-color: var(--color-neutral-700);
    flex-grow: 1;
    border-block-start: 1px solid var(--color-neutral-600);
  }

  .supplements__price {
    font-weight: 600;
  }

  .supplements__input-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;

    & input:checked+.supplements__input {
      background-color: var(--badge-active);
      border-color: var(--badge-active);
    }

    & input:checked+.supplements__input::after {
      position: absolute;
      content: "";
      width: 8px;
      height: 7px;
      background-image:url("../../assets/images/icons/icon-tick.svg");
    }
  }

  .supplements__input {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: var(--smallest-spacing);
    right: var(--smallest-spacing);
    width: 20px;
    height: 20px;
    background-color: var(--color-neutral-800);
    border: 1px solid #bbbbbb;
    border-radius: 6px;
  }
}