Aeroporto di Bologna - Design System

Selection: Default 

<div class="c-selection">
    <div class="c-selection__img-block">
        <img class="c-selection__img" src="/images/svgs/visa.svg" alt="Visa">
    </div>
    <div class="c-selection__text">
        Visa
    </div>
    <input class="c-selection__radio u-visuallyhidden" type="radio" name="payment-methor" id="Visa-52">
    <label class="c-selection__label" for="Visa-52">
        <span class="u-visuallyhidden">Visa</span>
    </label>
    <div class="c-selection__input"></div>
</div>
 
{{ var "random-id-val" (randomNumber) }}

<div class="c-selection{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-selection__img-block">
    <img class="c-selection__img" src="{{ img.src }}" alt="{{ img.alt }}">
  </div>
  <div class="c-selection__text">
    {{{ text }}}
    {{#if extra-text}}
    <p class="c-selection__extra-text">{{{ extra-text }}}</p>
    {{/if}}
  </div>
  {{#if input }}
    {{!-- <input class="c-selection__radio u-visuallyhidden" type="radio" name="{{ input.name }}" id="{{ input.id }}-{{random-id-val}}"> --}}
    <input class="c-selection__radio u-visuallyhidden" type="{{defaultValue input.type 'radio'}}" name="{{ input.name }}" id="{{ input.id }}-{{random-id-val}}">
    <label class="c-selection__label" for="{{ input.id }}-{{random-id-val}}">
      <span class="u-visuallyhidden">{{ text }}</span>
    </label>
    <div class="c-selection__input"></div>
  {{/if}}
</div>
 
{
  "text": "Visa",
  "img": {
    "src": "/images/svgs/visa.svg",
    "alt": "Visa"
  },
  "input": {
    "id": "Visa",
    "name": "payment-methor"
  }
}
  • Content: 
    .c-selection {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
  background-color: secondary(soft, 100);
  border: remify(1px) solid primary(night, 20);
  border-radius: remify(12px);
  padding: remify(16px);
  gap: remify(8px);

  & * {
    position: relative;
    z-index: 1;
  }

  @include min-screen(bp(tablet)) {
    flex-direction: column;
    justify-content: flex-start;
    padding: remify(24px);
  }

}

.c-selection__img-block {
  margin-left: auto;
  flex: 0 0 remify(45px);

  @include min-screen(bp(phablet)) {
    margin-left: initial;
    text-align: center;
    margin-bottom: remify(24px);
  }
}

.c-selection__img {
  width: remify(80px);

  @include min-screen(bp(phablet)) {
    width: auto;
    height: remify(45px);
  }
}

.c-selection__text,
.c-selection__extra-text {
 @include font-scale(level-2);
 text-align: left;
 color: secondary(text, 100);

 @include min-screen(bp(tablet)) {
  text-align: center;
 }
}

.c-selection__input {
  flex: 0 0 remify(24px);
  display: block;
  border: remify(1px) solid primary(night, 40);
  border-radius: 100%;
  height: remify(24px);
  width: remify(24px);
  position: relative;

  &:before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: remify(12px);
    width: remify(12px);
    top: remify(5px);
    left: remify(5px);
    margin: auto;
  }

}

.c-selection__input--checkbox {
  border-radius: remify(4px);
}

.c-selection__label {
  position: absolute !important;  // overrides default radio
  width: 100%;
  height: 100% !important;  // overrides default radio
  top: 0;
  left: 0;
  z-index: 9;
  cursor: pointer;
  background-image: none !important; // overrides default radio
}

.c-selection__radio:checked ~ .c-selection__input,
.c-selection__radio:checked ~ .text-container .c-selection__input,
.c-selection__checkbox:checked ~ .c-selection__input,
.c-selection__checkbox:checked ~ .text-container .c-selection__input {
  background-color: status(positive);
}

.c-selection__radio:checked ~ .c-selection__label,
.c-selection__checkbox:checked ~ .c-selection__label {
  border: remify(1px) solid primary(sky, 100);
  border-radius: remify(12px);
}

.c-selection__radio:checked ~ .c-selection__input:before,
.c-selection__radio:checked ~ .text-container .c-selection__input:before,
.c-selection__checkbox:checked ~ .c-selection__input:before,
.c-selection__checkbox:checked ~ .text-container .c-selection__input:before {
  background-color: #FFFFFF;
}

.c-selection__checkbox:checked ~ .c-selection__input:before,
.c-selection__checkbox:checked ~ .text-container .c-selection__input:before {
  content: "";
  width: remify(16px);
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACFSURBVHgBlZABDYAwDAQXFCBhEiYBCTgACXPAJOAACeBoOEBCaUMTmi7Luk+aNe1ftp9zHQKAEWvuYQjyWBk+pcEIjXhcWJ5Ht4Uj8IBfyQptAtr1cqUMDejUy8SLLGHsFwFlzlncJg30e0HPajmSMmbunyok4AilgrNIPTu6HnG+qeV7AQuZ3Dvt6WYdAAAAAElFTkSuQmCC');
}

.c-selection:has(.c-selection__extra-text) {
  .c-selection__img-block {
    @include max-screen(bp(tablet)) {
      display: none;
    }
  }
}

/*------------------------------------*
  Compact modifier
*------------------------------------*/
.c-selection--compact {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding: remify(16px);

  .c-selection__text {
    text-align: left;
  }

  .c-selection__img-block {
    margin-bottom: 0;
    margin-left: auto;
  }

  .c-selection__img {
    aspect-ratio: 1 / 1;
  }

}

/*------------------------------------*
  Responsive modifier
*------------------------------------*/
.c-selection--responsive {
  @include max-screen(bp(tablet)) {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: remify(16px);

    .c-selection__text {
      text-align: left;
    }

    .c-selection__img-block {
      margin-left: auto;
      margin-bottom: 0;
    }

    .c-selection__img {
      aspect-ratio: 1 / 1;
    }

  }

}

/*------------------------------------*\
  Expandable modifier
\*------------------------------------*/
.c-selection--expandable {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: remify(16px);

  .text-container {
    display: flex;
    align-items: center;
    gap: remify(8px);
  }

  .c-selection__input {
    margin-left: initial;
  }

  .c-selection__fold {
    display: none;
    flex: 1 0 100%;
    margin-top: remify(16px);
    position: relative;
    z-index: 100;
  }

  .c-selection__radio:checked ~ .c-selection__fold {
    display: block;
  }

}
  • URL: /components/raw/selection/_selection.scss
  • Filesystem Path: src/views/02-molecules/selection/_selection.scss
  • Size: 4.9 KB

No notes defined.