barbican-reset 3.20.0 → 3.22.0

package/scss/mixins/buttons/custom/_outline-primary.scss

@@ -0,0 +1,10 @@
+@use "../../../mixins/buttons/outline" as *;
+@use "../../../mixins/focus" as *;
+
+@mixin btn-outline-primary($border-width: var(--border-width-sm)) {
+  @include outline-button($border-width: $border-width);
+
+  @include focus {
+    @include outline-button-focus($border-width: $border-width);
+  }
+}

package/scss/mixins/buttons/custom/_outline-secondary.scss

@@ -0,0 +1,5 @@
+@use "../../../mixins/buttons/outline" as *;
+
+@mixin btn-outline-secondary {
+  @include outline-button(var(--color-black-60-lighten));
+}

package/scss/mixins/buttons/custom/_primary.scss

@@ -0,0 +1,14 @@
+@use "../../../mixins/buttons/solid" as *;
+
+@mixin btn-primary($min-width: true) {
+  @include solid-button;
+
+  @if $min-width {
+    min-width: var(--width-icon);
+  }
+
+  &[disabled="disabled"] {
+    @include solid-button(var(--color-black-60-lighten));
+    cursor: not-allowed;
+  }
+}

package/scss/mixins/buttons/custom/_secondary.scss

@@ -0,0 +1,5 @@
+@use "../../../mixins/buttons/solid" as *;
+
+@mixin btn-secondary {
+  @include solid-button(var(--color-black-60-lighten));
+}

package/scss/mixins/buttons/custom/_see-tickets-info.scss

@@ -0,0 +1,18 @@
+@use "outline-secondary" as *;
+
+@mixin btn-see-tickets-info {
+  @include btn-outline-secondary;
+
+  & {
+    margin-top: var(--margin-lg);
+    padding: var(--padding-md);
+    text-align: left;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-brand-generic-15-lighten);
+      border-color: var(--color-brand-generic-90-darken);
+      color: var(--color-brand-generic-90-darken);
+    }
+  }
+}

package/scss/mixins/card/_default.scss

@@ -0,0 +1,13 @@
+@use "../../mixins/breakpoints" as *;
+
+@mixin br-card--default {
+  width: 100%;
+
+  +.br-card.default {
+    margin-top: var(--margin-lg);
+
+    @include large-up {
+      margin-top: var(--margin-xl);
+    }
+  }
+}

package/scss/mixins/card/_inline.scss

@@ -0,0 +1,4 @@
+@mixin br-card--inline {
+  margin: var(--margin-sm);
+  display: inline-block;
+}

package/scss/mixins/card/_navcard.scss

@@ -0,0 +1,66 @@
+@use "../../mixins/breakpoints" as *;
+
+@mixin br-card--navcard {
+  cursor: pointer;
+  display: block;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-brand-generic-15-lighten);
+    outline-color: var(--color-brand-generic-90-darken);
+    outline-offset: calc(var(--border-width-sm) * -1);
+    color: var(--color-brand-generic-90-darken);
+    outline-width: var(--border-width-lg);
+    outline-style: solid;
+  }
+
+  &:active {
+    transform: var(--scale-click);
+  }
+
+  &:not(.ticket) {
+    text-decoration: underline;
+
+    .br-card-body {
+      gap: var(--gap-md);
+      display: flex;
+    }
+
+    .br-card-title+.br-card-text {
+      margin-top: var(--margin-sm);
+    }
+  }
+
+  svg {
+    flex: none;
+  }
+
+  @include small-up {
+    .br-card-body.center {
+      align-items: center;
+    }
+
+    .br-card-body:not(.center) svg {
+      margin-top: var(--margin-xs);
+    }
+  }
+
+  @include small-down {
+    .br-card-body {
+      align-items: center;
+    }
+
+    .br-card-text {
+      display: none;
+    }
+  }
+
+  @include medium-up {
+    &:not(.ticket) {
+      .br-card-title+.br-card-text {
+        margin-top: var(--margin-md);
+      }
+    }
+
+  }
+}

package/scss/mixins/card/_navitem.scss

@@ -0,0 +1,51 @@
+@use "../../mixins/breakpoints" as *;
+@use "navcard" as *;
+
+@mixin br-card--navitem {
+  @include br-card--navcard;
+
+  & {
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+
+  &.router-link-exact-active {
+    outline-offset: calc(var(--border-width-sm) * -1);
+    background-color: var(--color-brand-generic);
+    outline-color: var(--color-brand-generic);
+    border-color: var(--color-brand-generic);
+    outline-width: var(--border-width-lg);
+    outline-style: solid;
+    cursor: default;
+    color: white;
+  }
+
+  &:not(.router-link-active):hover {
+    color: var(--color-brand-generic-90-darken);
+    outline-color: var(--color-brand-generic);
+    text-decoration: underline;
+    border-color: currentColor;
+  }
+
+  &:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:not(:first-child) {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-top-width: 0;
+  }
+
+  .br-card-body {
+    padding-bottom: var(--padding-md);
+    padding-right: var(--padding-lg);
+    padding-left: var(--padding-lg);
+    padding-top: var(--padding-md);
+  }
+}

package/scss/mixins/card/_navlink.scss

@@ -0,0 +1,30 @@
+@use "../../mixins/breakpoints" as *;
+@use "navcard" as *;
+
+@mixin br-card--navlink {
+  @include br-card--navcard;
+
+  @include small-down {
+    background-color: transparent;
+    justify-self: start;
+    border-radius: 0;
+    border-width: 0;
+
+    &:hover,
+    &:focus {
+      background-color: var(--color-black-80-lighten);
+      outline-color: var(--color-black-80-lighten);
+      outline-width: 0.25rem;
+      outline-style: solid;
+      color: white;
+    }
+
+    .br-card-body {
+      padding: 0;
+    }
+
+    svg {
+      display: none;
+    }
+  }
+}

package/scss/mixins/card/_ticket.scss

@@ -0,0 +1,11 @@
+@use "../../mixins/breakpoints" as *;
+
+@mixin br-card--ticket {
+  .br-card-title {
+    font-size: var(--font-size-h4);
+  }
+
+  .br-card-text {
+    margin-top: var(--margin-xs);
+  }
+}

package/components/BrNavCard.vue

@@ -1,56 +0,0 @@
-<template>
-  <a v-if="to.startsWith('http')" :href="to" :class="generateClasses">
-    <br-card class="navcard">
-      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
-        <div v-if="$slots.icon" class="wrap-navcard-icon">
-          <slot name="icon" />
-        </div>
-        <div>
-          <br-card-title v-if="$slots.title">
-            <slot name="title" />
-          </br-card-title>
-          <br-card-text v-if="$slots.text">
-            <slot name="text" />
-          </br-card-text>
-        </div>
-      </div>
-    </br-card>
-  </a>
-    <router-link v-else class="link-navcard" :to="{ name: to }">
-    <br-card class="navcard">
-      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
-        <div v-if="$slots.icon" class="wrap-navcard-icon">
-          <slot name="icon" />
-        </div>
-        <div>
-          <br-card-title v-if="$slots.title">
-            <slot name="title" />
-          </br-card-title>
-          <br-card-text v-if="$slots.text">
-            <slot name="text" />
-          </br-card-text>
-        </div>
-      </div>
-    </br-card>
-  </router-link>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-
-const generateClasses = computed(() => {
-  let result = ['link-navcard']
-
-  if (props.class) result.push(props.class)
-
-  return result
-})
-
-const props = defineProps({
-  to: {
-    type: String,
-    required: true,
-  },
-  class: String
-})
-</script>

package/components/BrNavCardWrap.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="br-nav-card-wrap">
-    <slot />
-  </div>
-</template>

package/components/BrNavLink.vue

@@ -1,21 +0,0 @@
-<template>
-  <div v-if="$route.matched.some(({ name }) => name === to)" class="br-navlink">
-    {{ title }}
-  </div>
-  <a v-else-if="to.slice(0, 4) == 'http'" :href="to" class="br-navlink">
-    {{ title }}
-  </a>
-  <router-link v-else :to="{ name: to }" class="br-navlink">
-    {{ title }}
-  </router-link>
-</template>
-
-<script setup>
-const props = defineProps({
-  title: String,
-  to: {
-    type: String,
-    required: true
-  },
-})
-</script>

package/components/EventSummary.vue

@@ -1,149 +0,0 @@
-<template>
-  <div :class="wrapperClasses">
-    <img :class="$style.image" v-bind:src="data.image" alt="" />
-    <div :class="$style.event_info">
-      <div :class="$style.title">{{ data.title }}</div>
-      <div :class="$style.date_time">{{ data.date_formatted }}</div>
-      <div :class="$style.venue">{{ data.venue }}</div>
-      <br-button
-        v-if="!basket && hasSeeInside"
-        variant="link"
-        :class="$style.show_SeeInside"
-        @click="showSeeInside = !showSeeInside"
-        >See inside</br-button
-      >
-    </div>
-    <div
-      :class="$style.SeeInside"
-      v-if="!basket && hasSeeInside && showSeeInside">
-      <see-inside
-        v-if="!basket && hasSeeInside"
-        :data="data.see_inside"
-        @closeSeeInside="showSeeInside = !showSeeInside"></see-inside>
-    </div>
-  </div>
-</template>
-
-<script>
-import SeeInside from '#components/SeeInside.vue'
-
-export default {
-  components: { SeeInside },
-  props: {
-    data: {
-      type: Object,
-      required: true,
-    },
-    basket: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showSeeInside: false,
-    }
-  },
-  computed: {
-    wrapperClasses() {
-      return [
-        this.$style.EventSummary,
-        this.basket ? this.$style.in_basket : '',
-      ]
-    },
-    hasSeeInside() {
-      return this.data.see_inside.length > 0
-    },
-  },
-}
-</script>
-
-<style lang="scss" module>
-@use '#styles/helpers' as *;
-
-@mixin title {
-  font-weight: bold;
-}
-
-@mixin subtitle {
-  @include title;
-
-  & {
-    font-size: var(--font-size-h5);
-    color: var(--color-black-50-lighten);
-    font-weight: 400;
-  }
-
-  @include medium-up {
-    font-size: var(--font-size-h4);
-  }
-}
-
-.title {
-  @include title;
-
-  & {
-    font-size: var(--font-size-h2);
-    margin-bottom: var(--margin-md);
-  }
-}
-
-.date_time {
-  @include subtitle;
-
-  & {
-    margin-bottom: var(--margin-xs);
-  }
-}
-
-.venue {
-  @include subtitle;
-}
-
-.show_SeeInside {
-  margin-top: var(--margin-sm);
-  margin-bottom: var(--margin-sm);
-}
-
-.EventSummary {
-  @include medium-up {
-    display: grid;
-    grid-template-columns: 20rem auto;
-    grid-template-rows: auto auto auto;
-
-    column-gap: var(--gap-xl);
-  }
-  &.in_basket {
-    grid-template-columns: 16rem auto;
-  }
-}
-
-.image {
-  grid-row-start: 1;
-  grid-row-end: 4;
-  border: var(--border-width-sm) solid var(--color-black-10-lighten);
-  border-radius: var(--border-radius-lg);
-  max-width: 100%;
-  width: 100%;
-  margin-bottom: var(--gap-xl);
-
-  @include medium-up {
-    margin-bottom: 0;
-  }
-}
-
-.event_info {
-  grid-row-end: 2;
-}
-
-.SeeInside {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  margin-top: var(--margin-lg);
-
-  @include large-up {
-    margin-top: 0;
-    grid-column-start: 2;
-  }
-}
-</style>

package/components/FluidIframe.vue

@@ -1,39 +0,0 @@
-<template>
-  <div :class="$style.component">
-    <iframe
-      scrolling="auto"
-      allowfullscreen
-      frameborder="0"
-      height="100%"
-      width="100%"
-      :src="src"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    src: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<style lang="scss" module>
-@use "#styles/helpers" as *;
-
-.component {
-  border-radius: var(--border-radius-lg);
-  padding-top: 56.25%;
-  position: relative;
-  overflow: hidden;
-}
-
-.component > iframe {
-  position: absolute;
-  @include inset(0);
-}
-</style>

package/components/SeeInside.vue

@@ -1,134 +0,0 @@
-<template>
-  <div :class="$style.SeeInside">
-    <div :class="$style.SeeInside_content">
-      <div :class="$style.venue_sections">
-        <div :class="$style.sections_title">
-          <span v-if="multipleSeeInside">Section:</span>
-          <br-button
-            variant="exit"
-            @click="$emit('closeSeeInside')"
-            :class="$style.close_mobile">
-            <close-icon />
-          </br-button>
-        </div>
-        <template v-if="multipleSeeInside">
-          <br-button
-            variant="link"
-            :class="{
-              [$style.venue_section]: true,
-              [$style.venue_section_active]: visibleMapIndex == index,
-            }"
-            v-for="(item, index) in data"
-            :key="'section-' + index"
-            @click="visibleMapIndex = index"
-            >{{ item.title }}</br-button
-          >
-        </template>
-
-        <br-button
-          @click="$emit('closeSeeInside')"
-          variant="exit"
-          :class="$style.close_desktop">
-          <close-icon />
-        </br-button>
-      </div>
-      <div v-for="(item, index) in data" :key="index">
-        <div
-          :class="$style.SeeInside_map"
-          v-if="visibleMapIndex == index || !multipleSeeInside"
-          v-html="item.markup"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import BrButton from '#components/BrButton.vue'
-import CloseIcon from '#icons/close.vue'
-
-export default {
-  components: {
-    BrButton,
-    CloseIcon,
-  },
-  data() {
-    return {
-      visibleMapIndex: null,
-    }
-  },
-  props: {
-    data: {
-      type: Array,
-      required: true,
-    },
-  },
-  computed: {
-    multipleSeeInside() {
-      return this.data.length > 1
-    },
-  },
-}
-</script>
-
-<style lang="scss" module>
-@use '#styles/helpers' as *;
-
-.SeeInside_content {
-  padding: var(--padding-lg);
-  border: var(--border-width-sm) solid var(--color-black-10-lighten);
-  border-radius: var(--border-radius-sm);
-}
-
-.sections_title {
-  display: flex;
-
-  span {
-    padding-top: 0.125rem;
-    width: 100%;
-
-    @include small-up {
-      width: auto;
-    }
-  }
-  .close_mobile {
-    margin-left: auto;
-
-    @include small-up {
-      display: none;
-    }
-  }
-}
-
-.venue_sections {
-  flex-direction: column;
-  min-height: 1.75rem;
-  gap: var(--gap-md);
-  display: flex;
-
-  @include small-up {
-    flex-direction: row;
-  }
-
-  .venue_section {
-    margin-right: var(--margin-lg);
-  }
-  .venue_section_active {
-    text-decoration: none;
-  }
-}
-
-.close_desktop {
-  margin-left: auto;
-
-  @include small-down {
-    display: none;
-  }
-}
-
-.SeeInside_map {
-  margin-top: var(--margin-lg);
-  iframe {
-    width: 100%;
-  }
-}
-</style>