barbican-reset 2.32.0 → 2.34.0

package/patterns/views/blocks.pug

@@ -0,0 +1,7 @@
+extends ../layouts/main
+
+block content
+
+  +Section("Alerts")
+
+  include ../pages/alerts

package/patterns/views/index.pug

@@ -1,30 +1,7 @@
-extends layout
-include mixins
-block content 
-  h1 Color Palettes
-  
-  h2 Grey
-  ul.list.list-palette.grey
-    li.item.item-palette.l11
-    li.item.item-palette.l21
-    li.item.item-palette.l44
-    li.item.item-palette.l65
-    li.item.item-palette.l87
-    li.item.item-palette.l96
+extends ../layouts/main
 
-  h2 Brand
+block content
 
-  +Samples('Contemporary','contemporary-music')
-  +Samples('Theatre','theatre--dance')
-  +Samples('Talks','talks--events')
-  +Samples('Art','art--design')
-  +Samples('Programme','programme')
-  +Samples('Cinema','cinema')
-  +Samples('Shop','shop')
-  +Samples('Generic / Library / Tours / Hire','generic')
-  +Samples('Classical','classical-music')
-  +Samples('Membership','membership--support')
-      
-  h2 Sample
-  ul.list.list-palette.sample
-    li.item.item-palette
+  +Section("Colors")
+
+  include ../pages/colors

package/patterns/views/layouts.pug

@@ -0,0 +1,4 @@
+extends ../layouts/main
+
+block content
+  div Layouts

package/scss/_br-button.scss

@@ -0,0 +1,159 @@
+.btn {
+  @include setup-button;
+
+  &.btn-primary {
+    // solid orange
+    @include btn-primary;
+  }
+
+  &.btn-outline-primary {
+    // orange outline, fill on focus
+    @include btn-outline-primary;
+  }
+
+  &.btn-outline-header {
+    // orange outline, fill on focus
+    @include btn-outline-header;
+  }
+
+  &.btn-info {
+    // solid blue
+    @include btn-info;
+  }
+
+  &.btn-outline-info {
+    // blue outline, fill on focus
+    @include btn-outline-info;
+  }
+
+  &.btn-secondary {
+    // solid grey
+    @include btn-secondary;
+  }
+
+  &.btn-outline-secondary {
+    // grey outline, fill on focus
+    @include btn-outline-secondary;
+  }
+
+  &.btn-input-edit {
+    @include btn-input-edit;
+  }
+
+  &.btn-remove {
+    // solid grey, slim
+    @include btn-remove;
+  }
+
+  &.btn-link {
+    @include btn-link;
+  }
+
+  &.btn-video-help {
+    @include btn-video-help;
+  }
+
+  &.btn-exit {
+    @include btn-exit;
+  }
+
+  &.btn-remove-ticket {
+    @include btn-remove-ticket;
+  }
+
+  &.btn-remove-gift {
+    @include btn-remove-gift;
+  }
+
+  &.btn-membership-card {
+    @include btn-membership-card;
+  }
+
+  &.btn-video-login {
+    @include btn-video-login;
+  }
+
+  &.btn-cta {
+    @include btn-cta;
+  }
+
+  &.btn-carousel {
+    @include btn-carousel;
+  }
+
+  &.btn-invisible {
+    @include btn-invisible;
+  }
+
+  &.btn-returns {
+    // solid orange
+    @include btn-returns;
+  }
+
+  &.btn-cancel-returns {
+    // solid orange
+    @include btn-cancel-returns;
+  }
+
+  &.btn-resale {
+    // orange outline, fill on focus
+    @include btn-resale;
+  }
+
+  &.btn-radio {
+    border: 1px solid hsl(0deg, 0%, 65%);
+    padding: 0.75rem 0.75rem 0.625rem;
+    font-weight: 400;
+    margin: 0.25rem;
+
+    @include focus {
+      @include default-label-focus;
+    }
+  }
+
+  &.btn-menu {
+    @include btn-menu;
+  }
+
+  &.btn-basket {
+    @include btn-basket;
+  }
+
+  &.btn-discover {
+    @include btn-discover;
+  }
+
+  &.btn-membership-pill {
+    @include btn-membership-pill;
+  }
+
+  &.btn-priority-row {
+    @include btn-priority-row;
+  }
+
+  &.btn-login-to-book {
+    @include btn-login-to-book;
+  }
+
+  &.btn-sold-out {
+    @include btn-sold-out;
+  }
+
+  &.btn-add-membership-to-basket {
+    @include btn-add-membership-to-basket;
+  }
+
+  &.btn-remove-membership-from-basket {
+    @include btn-remove-membership-from-basket;
+  }
+
+  &.btn-additional-information {
+    @include btn-additional-information;
+  }
+
+  // modifyers
+
+  &.expand {
+    @include btn-expand;
+  }
+}

package/scss/_br-skiplink.scss

@@ -0,0 +1,3 @@
+.br-skiplink {
+  @include br-skiplink;
+}

package/scss/card/_confirm.scss

@@ -5,10 +5,8 @@
   margin-left: auto;
   max-width: 20rem;
 
-  $gap: 0.625rem;
-
   svg {
-    margin-bottom: $gap;
+    margin-bottom: 0.125rem;
   }
 
   .card-title {
@@ -22,6 +20,6 @@
   }
 
   .card-text {
-    margin-top: $gap;
+    margin-top: 1rem;
   }
 }

package/scss/index.scss

@@ -15,6 +15,7 @@
 @import "table";
 
 @import "br-alert";
+@import "br-button";
 @import "br-checkbox";
 @import "br-container";
 @import "br-footer";
@@ -25,10 +26,10 @@
 @import "br-promo";
 @import "br-radio";
 @import "br-select";
+@import "br-skiplink";
 @import "br-wrap";
 
 // bootstrap component styles
-@import "btn";
 @import "card/index";
 @import "card-deck";
 @import "form";

package/components/skip_link.vue

@@ -1,38 +0,0 @@
-<template>
-  <a :href="href" :class="$style.skiplink">
-    <slot></slot>
-  </a>
-</template>
-
-<script>
-export default {
-  name: "SkipLink",
-  props: {
-    href: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.skiplink {
-  border: 0.25rem solid $c-grey-l21;
-  border-radius: $border-radius-lg;
-  background-color: $white;
-  color: $c-grey-l21;
-  position: absolute;
-  padding: 0.5rem;
-  z-index: -1;
-  opacity: 0;
-  
-  @include focus {
-    outline: none;
-    opacity: 1;
-    z-index: 2;
-  }
-}
-
-</style>

package/patterns/views/layout.pug

@@ -1,8 +0,0 @@
-html
-  head
-    title Pattern Library | Barbican Reset
-    link(rel="stylesheet" href="/styles.css")
-  body
-    .br-container--outer
-      .br-container--inner
-        block content