<div class="modal-wrapper js-modal" id="country-selector" role="dialog" aria-modal="false">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--country-selector">
        <div class="modal__inner">
            <button class="modal__close js-modal-close-button" aria-label="close">
        <svg class="icon icon--close-large" alt="">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

      </button>
            <h2 class="modal__title">Choose Your Country</h2>
            <div class="modal__content">
                <p class="modal__description">Please select your location to experience mauijim.com</p>
                <div class="js-country-selector-wrapper">
                    <div class="country-selector js-country-selector">

                        <span class="country-selector__chosen-region js-country-selector-chosen-region">North America</span>
                        <div class="country-selector__map js-country-selector-map" style="background-image:url('/assets/images/world-map-north-america.png');"></div>

                        <div class="accordion-tabs accordion-tabs--country-selector js-accordion-tabs">
                            <div class="accordion-tabs__tabs" role="tablist">
                                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-north-america" aria-expanded="true" aria-controls="panel-north-america" role="tab" data-tab="north-america" data-map="/assets/images/world-map-north-america.png"
                                    data-value="North America">
            North America
        </button>
                                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-europe" aria-expanded="false" aria-controls="panel-europe" role="tab" data-tab="europe" data-map="/assets/images/world-map-europe.png" data-value="Europe">
            Europe
        </button>
                                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-africa" aria-expanded="false" aria-controls="panel-africa" role="tab" data-tab="africa" data-map="/assets/images/world-map-africa.png" data-value="Africa">
            Africa
        </button>
                                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-middle-east" aria-expanded="false" aria-controls="panel-middle-east" role="tab" data-tab="middle-east" data-map="/assets/images/world-map-middle-east.png"
                                    data-value="Middle East">
            Middle East
        </button>
                                <button class="accordion-tabs__tab js-accordion-tabs-tab js-country-selector-tab-button" id="tab-asia-pacific" aria-expanded="false" aria-controls="panel-asia-pacific" role="tab" data-tab="asia-pacific" data-map="/assets/images/world-map-asia-pacific.png"
                                    data-value="Asia Pacific">
            Asia Pacific
        </button>
                            </div>

                            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab">
                                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-north-america" aria-expanded="true" aria-controls="panel-north-america" role="tab" data-tab="north-america">
          North America
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--north-america js-country-selector-region js-country-selector-region--default" id="panel-north-america" aria-labelledby="tab-north-america"
                                    aria-hidden="false" role="tabpanel" data-tab="north-america">
                                    <ul class="country-selector__region-list country-selector__region-list--north-america">
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">American Samoa</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Canada</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Guam</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Mexico</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Puerto Rico</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">United States</a>
                                        </li>
                                        <li class="country-selector__country  js-country-selector-last-country">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Virgin Islands US</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab country-selector__tab--three-col">
                                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-europe" aria-expanded="false" aria-controls="panel-europe" role="tab" data-tab="europe">
          Europe
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--europe js-country-selector-region" id="panel-europe" aria-labelledby="tab-europe" aria-hidden="true" role="tabpanel" data-tab="europe">
                                    <ul class="country-selector__region-list country-selector__region-list--europe">
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Austria</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Belgium</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Croatia</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Cyprus</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Czech Republic</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Denmark</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Estonia</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Finland</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">France</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Germany</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Greece</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Hungary</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Ireland</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Italy</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Luxembourg</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Malta</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Netherlands</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Norway</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Poland</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Portugal</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Romania</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Slovakia</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Slovenia</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Spain</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Sweden</a>
                                        </li>
                                        <li class="country-selector__country  js-country-selector-last-country">
                                            <a class="country-selector__country-link" href="#" tabindex="0">United Kingdom</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab">
                                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-africa" aria-expanded="false" aria-controls="panel-africa" role="tab" data-tab="africa">
          Africa
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--africa js-country-selector-region" id="panel-africa" aria-labelledby="tab-africa" aria-hidden="true" role="tabpanel" data-tab="africa">
                                    <ul class="country-selector__region-list country-selector__region-list--africa">
                                        <li class="country-selector__country  js-country-selector-last-country">
                                            <a class="country-selector__country-link" href="#" tabindex="0">South Africa</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab">
                                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-middle-east" aria-expanded="false" aria-controls="panel-middle-east" role="tab" data-tab="middle-east">
          Middle East
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--middle-east js-country-selector-region" id="panel-middle-east" aria-labelledby="tab-middle-east" aria-hidden="true" role="tabpanel" data-tab="middle-east">
                                    <ul class="country-selector__region-list country-selector__region-list--middle-east">
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Saudi Arabia</a>
                                        </li>
                                        <li class="country-selector__country  js-country-selector-last-country">
                                            <a class="country-selector__country-link" href="#" tabindex="0">United Arab Emirates</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="accordion-tabs__content-wrapper js-accordion-tabs-content-wrapper country-selector__tab country-selector__tab--two-col">
                                <button class="accordion-tabs__accordion-control js-accordion-tabs-accordion-control" id="tab-asia-pacific" aria-expanded="false" aria-controls="panel-asia-pacific" role="tab" data-tab="asia-pacific">
          Asia Pacific
          <svg class="icon icon--arrow-down" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          <svg class="icon icon--arrow-up" alt="">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

        </button>
                                <div class="accordion-tabs__content js-accordion-tabs-content country-selector__region country-selector__region--asia-pacific js-country-selector-region" id="panel-asia-pacific" aria-labelledby="tab-asia-pacific" aria-hidden="true" role="tabpanel" data-tab="asia-pacific">
                                    <ul class="country-selector__region-list country-selector__region-list--asia-pacific">
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Australia</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Hong Kong</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Singapore</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Malaysia</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Thailand</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">South Korea</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Japan</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Indonesia</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Philippines</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Taiwan</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">Vietnam</a>
                                        </li>
                                        <li class="country-selector__country ">
                                            <a class="country-selector__country-link" href="#" tabindex="0">India</a>
                                        </li>
                                        <li class="country-selector__country  js-country-selector-last-country">
                                            <a class="country-selector__country-link" href="#" tabindex="0">New Zealand</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal" id="{{id}}" role="dialog" aria-modal="false">
  <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" aria-label="close">
        {{render '@icons--close-large'}}
      </button>
      {{#if title}}
      <h2 class="modal__title">{{title}}</h2>
      {{/if}}
      <div class="modal__content">
        {{#if description}}
        <p class="modal__description">{{description}}</p>
        {{/if}}
        {{render (dynamicVariant 'country-selector' countrySelectorVariant)}}
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "country-selector",
  "title": "Choose Your Country",
  "description": "Please select your location to experience mauijim.com",
  "countrySelectorVariant": "maui-jim"
}
  • Content:
    .modal.modal--country-selector {
      @include breakpoint($breakpoint-sm-only) {
        .js-country-selector-wrapper--open-tab & {
          .modal__title {
            opacity: 0;
          }
    
          .modal__title--chosen-region {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            opacity: 1;
          }
        }
    
        .modal__description {
          letter-spacing: 0;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .modal__inner {
          height: 665px;
          overflow: hidden;
        }
    
        .modal__content {
          padding: 10px 20px;
        }
    
        .modal__description {
          display: none;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .modal__title {
          line-height: 3.5rem;
        }
      }
    }
    
  • URL: /components/raw/country-selector-modal/country-selector.scss
  • Filesystem Path: src/components/01-elements/modals/country-selector-modal/country-selector.scss
  • Size: 737 Bytes

There are no notes for this item.