🍷 Digital Wine Cellar – Pattern Library

Basic flavours rating 

<div class="basic-flavours-container">
    <label class="flavour-range">
        <span>Acidity</span>
        <div class="range">
            <input type="range" value="8" min="0" max="100" id="acidity-156050d2-ed6d-bf9a-2afb-51ff284e414d">
        </div>
    </label>
    <label class="flavour-range">
        <span>Sweetness</span>
        <div class="range">
            <input type="range" value="14" min="0" max="100" id="sweetness-16a5f71b-7006-4be8-e7e1-45d70ab823ba">
        </div>
    </label>
    <label class="flavour-range">
        <span>Saltiness</span>
        <div class="range">
            <input type="range" value="35" min="0" max="100" id="saltiness-ae25a539-e233-da8f-2e00-ea426efcd352">
        </div>
    </label>
    <label class="flavour-range">
        <span>Bitterness</span>
        <div class="range">
            <input type="range" value="0" min="0" max="100" id="bitterness-bb5ef198-4680-e6bd-a7b8-2cdf743ba15f">
        </div>
    </label>
    <label class="flavour-range">
        <span>Umami</span>
        <div class="range">
            <input type="range" value="50" min="0" max="100" id="umami-2d935ee0-100b-9a28-d85a-c1055c401df7">
        </div>
    </label>
</div>
 
<div class="basic-flavours-container">
  <label class="flavour-range">
    <span>Acidity</span>
    <div class="range">
      <input type="range" value="8" min="0" max="100" id="acidity-{{random}}">
    </div>
  </label>
  <label class="flavour-range">
    <span>Sweetness</span>
    <div class="range">
      <input type="range" value="14" min="0" max="100" id="sweetness-{{random}}">
    </div>
  </label>
  <label class="flavour-range">
    <span>Saltiness</span>
    <div class="range">
      <input type="range" value="35" min="0" max="100" id="saltiness-{{random}}">
    </div>
  </label>
  <label class="flavour-range">
    <span>Bitterness</span>
    <div class="range">
      <input type="range" value="0" min="0" max="100" id="bitterness-{{random}}">
    </div>
  </label>
  <label class="flavour-range">
    <span>Umami</span>
    <div class="range">
      <input type="range" value="50" min="0" max="100" id="umami-{{random}}">
    </div>
  </label>
</div>
 
{
  "acidity": {
    "legend": "Acidity",
    "modifier": "slim inline",
    "group": "acidity",
    "radios": [
      {
        "label": "0"
      },
      {
        "label": 1
      },
      {
        "label": 2,
        "checked": true
      },
      {
        "label": 3
      },
      {
        "label": 4
      },
      {
        "label": 5
      }
    ]
  },
  "sweetness": {
    "legend": "Sweetness",
    "modifier": "slim inline",
    "group": "sweetness",
    "radios": [
      {
        "label": "0"
      },
      {
        "label": 1,
        "checked": true
      },
      {
        "label": 2
      },
      {
        "label": 3
      },
      {
        "label": 4
      },
      {
        "label": 5
      }
    ]
  },
  "saltiness": {
    "legend": "Saltiness",
    "modifier": "slim inline",
    "group": "saltiness",
    "radios": [
      {
        "label": "0"
      },
      {
        "label": 1
      },
      {
        "label": 2
      },
      {
        "label": 3
      },
      {
        "label": 4,
        "checked": true
      },
      {
        "label": 5
      }
    ]
  },
  "bitterness": {
    "legend": "Bitterness",
    "modifier": "slim inline",
    "group": "bitterness",
    "radios": [
      {
        "label": "0"
      },
      {
        "label": 1
      },
      {
        "label": 2
      },
      {
        "label": 3,
        "checked": true
      },
      {
        "label": 4
      },
      {
        "label": 5
      }
    ]
  },
  "umami": {
    "legend": "Umami",
    "modifier": "slim inline",
    "group": "umami",
    "radios": [
      {
        "label": "0",
        "checked": true
      },
      {
        "label": 1
      },
      {
        "label": 2
      },
      {
        "label": 3
      },
      {
        "label": 4
      },
      {
        "label": 5
      }
    ]
  }
}
  • Content: 
    @media screen {

  .basic-flavours-container {
    margin: 0.25em 0 1em;
  }

  .flavour-range {
    display: flex;
    justify-content: flex-start;
  }

  .flavour-range span {
    flex: 0 0 12ch;
    margin-right: 0.5em;
  }

  .flavour-range input[type="range"] {
    width: 100%;
  }

  .flavour-range .range {
    margin: 0;
    flex: 0 1 18rem;
    position: relative;
  }

  .flavour-range .range::before,
  .flavour-range .range::after {
    font-size: 0.75em;
    position: absolute;
    top: -1em;
  }

  .flavour-range .range::before {
    content: "Low";
    left: 0;
  }

  .flavour-range .range::after {
    content: "High";
    right: 0;
  }
}
  • URL: /components/raw/basic-flavours/basic-flavours.css
  • Filesystem Path: components/03_organisms/basic-flavours/basic-flavours.css
  • Size: 659 Bytes

No notes defined.