<div class="modal-wrapper js-modal" id="language-selector">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--language-selector">
        <div class="modal__inner">
            <button class="modal__close js-modal-close-button">
        <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

      </button>
            <span class="modal__title">Choose Your Language</span>
            <div class="modal__content">
                <p class="modal__description">Please select your language to experience mauijim.com</p>
                <ul class="language-selector">
                    <li class="language-selector__language">
                        <a class="language-selector__language-link" href="#">English</a>
                    </li>
                    <li class="language-selector__language">
                        <a class="language-selector__language-link" href="#">French</a>
                    </li>
                    <li class="language-selector__language">
                        <a class="language-selector__language-link" href="#">German</a>
                    </li>
                    <li class="language-selector__language">
                        <a class="language-selector__language-link" href="#">Italian</a>
                    </li>
                    <li class="language-selector__language">
                        <a class="language-selector__language-link" href="#">Mexican Spanish</a>
                    </li>
                    <li class="language-selector__language">
                        <a class="language-selector__language-link" href="#">Spanish</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal" id="{{id}}">
  <div class="modal-overlay js-modal-overlay"></div>
  <div class="modal modal--{{id}}">
    <div class="modal__inner">
      <button class="modal__close js-modal-close-button">
        {{render '@icons--close-large'}}
      </button>
      {{#if title}}
      <span class="modal__title">{{title}}</span>
      {{/if}}
      <div class="modal__content">
        {{#if description}}
        <p class="modal__description">{{description}}</p>
        {{/if}}
        <ul class="language-selector">
          {{#each languages}}
          <li class="language-selector__language">
            <a class="language-selector__language-link" href="#">{{this}}</a>
          </li>
          {{/each}}
        </ul>
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "language-selector",
  "title": "Choose Your Language",
  "description": "Please select your language to experience mauijim.com",
  "languages": [
    "English",
    "French",
    "German",
    "Italian",
    "Mexican Spanish",
    "Spanish"
  ]
}
  • Content:
    .modal.modal--language-selector {
      @include breakpoint($breakpoint-md) {
        .modal__inner {
          max-width: 700px;
          padding-bottom: 70px;
          overflow: hidden;
        }
    
        .modal__content {
          max-width: 400px;
          margin: 0 auto;
          padding: 10px 0;
        }
      }
    }
    
    .language-selector {
      @include reset-list;
      font-size: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        display: inline-block;
        columns: 180px 2;
        column-gap: $gutter-width;
        column-rule: 1px solid $color-light;
        font-size: 1.4rem;
      }
    }
    
    .language-selector__language-link {
      display: block;
      padding: 5px 0;
      transition: $transition-standard;
      color: $color-darkest;
      text-decoration: none;
    
      &:hover {
        color: $color-primary;
      }
    
      @include breakpoint($breakpoint-md) {
        line-height: 2.0rem;
      }
    }
    
  • URL: /components/raw/language-selector/language-selector.scss
  • Filesystem Path: src/components/01-elements/modals/language-selector/language-selector.scss
  • Size: 812 Bytes

There are no notes for this item.