<div id="booking-drawer" class="booking-drawer offcanvas offcanvas-end">
    <div class="offcanvas-header align-items-start">
        <div class="offcanvas-title d-flex gap-3 align-items-start">
            <img src="/images/samples/show-image/macintyre-small-square.png" alt="Michael M" class="booking-drawer--header-image">
            <div>
                <h3 class="h5 fw-semibold">Michael McIntyre's Big World Tour</h3>
                <p class="lh-sm my-1">
                    <strong class="text-uppercase">Edinburgh</strong>
                </p>
                <p class="lh-sm my-1">
                    Pleasance Courtyard,<br>
                    Pleasance Two
                </p>
                <p class="lh-sm">
                    (60 mins)
                </p>
            </div>
        </div>
        <button type="button" class="btn-close btn-secondary" data-bs-dismiss="offcanvas" data-bs-target="#booking-drawer" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body pt-0">
        <form>

            <div class="booking-form--performance-list p-3 border border-2 rounded mb-3 bg-white">
                <h2 class="h5 text-center text-uppercase">Select performance</h2>
                <div>
                    <select id="radio" name="radio" class="form-select" aria-label="Select">
                        <option selected>-- Choose one --</option>
                        <option value="0" disabled>Thu, 27/11/2019 - 14:30 SOLD OUT</option>
                        <option value="1">Fri, 28/11/2019 - 14:30 SELLING FAST</option>
                        <option value="2" disabled>Sat, 29/11/2019 - 14:30 SOLD OUT</option>
                        <option value="3">Sun, 30/11/2019 - 19:30 [£12.34]</option>
                    </select>
                </div>
                <p class="d-grid gap-2 my-2">
                    <button class="my-2 btn btn-primary">Book now</button>
                </p>
            </div>

            <p>
                Once purchased, all tickets are non-exchangeable and non-refundable.<br>
                Where applicable, a booking fee is charged at £1.25 per ticket, capped at £5.
            </p>

            <p>
                <a href="#" class="text-secondary chevron"><strong>Find out why we charge booking fees</strong></a>
            </p>

            <p>Tickets are held in the basket for a limited period of time</p>

        </form>
    </div>
</div>
<div id="booking-drawer" class="booking-drawer offcanvas offcanvas-end">
  <div class="offcanvas-header align-items-start">
    <div class="offcanvas-title d-flex gap-3 align-items-start">
      <img src="/images/samples/show-image/macintyre-small-square.png" alt="Michael M" class="booking-drawer--header-image">
      <div>
        <h3 class="h5 fw-semibold">Michael McIntyre's Big World Tour</h3>
        <p class="lh-sm my-1">
          <strong class="text-uppercase">Edinburgh</strong>
        </p>
        <p class="lh-sm my-1">
          Pleasance Courtyard,<br>
          Pleasance Two
        </p>
        <p class="lh-sm">
          (60 mins)
        </p>
      </div>
    </div>
    <button type="button" class="btn-close btn-secondary" data-bs-dismiss="offcanvas" data-bs-target="#booking-drawer" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body pt-0">
    {% render "@booking-form" %}
  </div>
</div>
/* No context defined. */
  • Content:
    .booking-drawer {
      background-color: rgba($gray-200, 0.9);
    
      &--header {
        &-image {
          width: 140px;
        }
      }
    }
  • URL: /components/raw/booking-drawer/booking-drawer.scss
  • Filesystem Path: src/components/02-structures/show-page/_booking-drawer/booking-drawer.scss
  • Size: 120 Bytes

No notes defined.