Aeroporto di Bologna - Design System

Selection: Expandable 

<div class="c-selection c-selection--expandable">
    <input class="c-selection__radio u-visuallyhidden" type="radio" name="payment-methor" id="Visa-31">
    <div class="text-container">
        <div class="c-selection__input"></div>
        <p class="c-selection__text">Lorem ipsum</p>
    </div>
    <label class="c-selection__label" for="Visa-31">
        <span class="u-visuallyhidden">Lorem ipsum</span>
    </label>
    <div class="c-selection__fold">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur culpa id, illo voluptas vel accusamus illum voluptatum libero, recusandae ducimus distinctio aliquam, est rem nulla provident asperiores minus enim at?
    </div>
</div>
 
{{ var "random-id-val" (randomNumber) }}

<div class="c-selection c-selection--expandable{{#if modifier}} {{modifier}}{{/if}}">
  <input class="c-selection__radio u-visuallyhidden" type="radio" name="{{ input.name }}" id="{{ input.id }}-{{random-id-val}}">
  <div class="text-container">
    <div class="c-selection__input"></div>
    <p class="c-selection__text">{{{ text }}}</p>
  </div>
  <label class="c-selection__label" for="{{ input.id }}-{{random-id-val}}">
    <span class="u-visuallyhidden">{{ text }}</span>
  </label>
  <div class="c-selection__fold">
    {{#> @partial-block }}
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur culpa id, illo voluptas vel accusamus illum voluptatum libero, recusandae ducimus distinctio aliquam, est rem nulla provident asperiores minus enim at?
  {{/ @partial-block }}
  </div>
</div>
 
{
  "text": "Lorem ipsum",
  "img": {
    "src": "/images/svgs/personal-data.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);

  // Changes border color when a radio/checkbox input within the component is checked
  &:has(.c-selection__radio:checked ~ .c-selection__label, .c-selection__checkbox:checked ~ .c-selection__label) {
    border: remify(1px) solid primary(sky, 100);
  }

  & * {
    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;
  }

}

/*------------------------------------*\
  Descriptive modifier
\*------------------------------------*/
.c-selection--descriptive {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: remify(16px);
  gap: remify(8px);

  * {
    position: initial;
  }

  .c-selection__text-block {
    flex: 1;
  }

  .c-selection__input-block {
    flex: 0;
  }

  .c-selection__text {
    text-align: left;
    @include font-scale(level-1-5);
    margin-top: remify(16px);
  }

  .heading-block {
    display: flex;
    align-items: center;
    gap: remify(8px);
  }
  
  .c-selection__title {
    @include font-scale(level-2, bold);
  }

  .c-selection__img {
    width: remify(40px);
    height: auto;
  }

  .c-selection__input {
    position: relative;
  }

}

/*------------------------------------*\
  Promo code
\*------------------------------------*/
.c-selection--promo-code {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  padding: remify(8px) remify(16px);
  background-color: secondary(basic-white, 100);

  @include min-screen(bp(phablet)) {
    padding: remify(16px);
  }

  .promo-code__value {
    @include font-scale(level-2, bold);

    &.mobile {
      @include min-screen(bp(phablet)) {
        display: none;
      }
    }

    &.desk {
      display: none;
      @include min-screen(bp(phablet)) {
        display: block;
      }
    }

  }

  .promo-code__due-date,
  .promo-code__id {
    @include font-scale(level-1-5);
  }

  .promo-code__id {
    color: primary(night, 80);
  }

  .promo-code__contents {
    margin-left: auto;
    text-align: right;

    @include min-screen(bp(phablet)) {
      display: flex;
      margin-left: initial;
      text-align: initial;
      flex: 1;
      justify-content: space-between;
    }
  }

}

/*------------------------------------*\
  Disabled
\*------------------------------------*/
.c-selection:has(input[disabled]) {
  cursor: not-allowed;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.6);
    border-radius: remify(12px);
    z-index: 10;
  }

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

No notes defined.