barbican-reset 2.57.0 → 2.59.0

package/package.json

@@ -112,5 +112,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "2.57.0"
+  "version": "2.59.0"
 }

package/scss/helpers/mixins/_br-card.scss

@@ -18,6 +18,7 @@
 }
 
 @mixin br-card-title {
+  font-size: $h1-font-size;
   margin: 0;
 }
 

package/scss/helpers/mixins/_br-footer.scss

@@ -16,7 +16,7 @@
 
   a:not([href="//www.cityoflondon.gov.uk"]) {
     @include focus {
-      @include focus-tabs-dark;
+      @include focus-tabs(white, black);
     }
   }
 }

package/scss/helpers/mixins/_buttons.scss

@@ -76,8 +76,7 @@
 @mixin btn-outline-header {
   @include outline-button($color: white,
     $background: $c-brand-generic,
-    $border: 0.125rem,
-  );
+    $border: 0.125rem);
   @include flex-button;
 }
 

package/scss/helpers/mixins/_focus.scss

@@ -36,19 +36,17 @@
   }
 }
 
-@mixin focus-tabs {
-  @include single-box($c-grey-l21);
-  background-color: $c-grey-l21;
-  // border-radius: 0;
-  color: $br-white;
+@mixin focus-tabs($background: $c-grey-l21, $color: white) {
+  @include single-box($background);
+  background-color: $background;
+  color: $color;
 }
 
-@mixin focus-tabs-dark {
-  @include single-box($br-white);
-  background-color: $br-white;
-  // border-radius: 0;
-  color: $black;
-}
+// @mixin focus-tabs-dark {
+//   @include single-box($br-white);
+//   background-color: $br-white;
+//   color: $black;
+// } // deprecated
 
 @mixin box-setup {
   position: relative;

package/scss/helpers/mixins/buttons/_solid.scss

@@ -1,3 +1,13 @@
+@mixin solid-button--color($color: white, $background: $c-brand-generic, $border: 1px) {
+  border: $border solid $background;
+  background-color: $background;
+  color: $color;
+
+  @include focus {
+    @include solid-button-focus($color, $background, $border);
+  }
+}
+
 @mixin solid-button($background: $c-brand-generic,
   $color: white,
   $border: 1px,
@@ -5,9 +15,8 @@
   $margin: false,
   $line-height: false,
   $font-size: false) {
-  border: $border solid $background;
-  background-color: $background;
-  color: $color;
+
+  @include solid-button--color($color, $background, $border);
 
   @if $line-height {
     line-height: $line-height;
@@ -29,18 +38,15 @@
     fill: currentColor;
   }
 
-  @include focus {
-    @include solid-button-focus($color, $background, $border);
-  }
-
   &.hide {
     visibility: hidden;
   }
 }
 
 @mixin solid-button-focus($color: white, $background: $c-brand-generic, $border: 1px) {
-  @include double-box($color, $background);
   border: $border solid $background;
+  outline: 2px solid $background;
   background-color: $background;
+  outline-offset: 3px;
   color: $color;
 }

package/scss/helpers/variables/colors/_grey.scss

@@ -1,8 +1,8 @@
-$black: hsl(0, 0%, 0%); // deprecate this for $c-grey-l11
+$black: #000000; // deprecate this for $c-grey-l11
 
-$c-grey-l11: hsl(0, 0%, 10%); // midnight
-$c-grey-l21: hsl(0, 0%, 20%); // night
-$c-grey-l44: hsl(0, 0%, 35%); // steel
-$c-grey-l65: hsl(0, 0%, 65%); // concrete
-$c-grey-l87: hsl(0, 0%, 85%); // pearl
-$c-grey-l96: hsl(0, 0%, 95%); // alpine
+$c-grey-l11: #1a1a1a; // midnight
+$c-grey-l21: #333333; // night
+$c-grey-l44: #595959; // steel
+$c-grey-l65: #a6a6a6; // concrete
+$c-grey-l87: #d9d9d9; // pearl
+$c-grey-l96: #f2f2f2; // alpine

package/scss/index.scss

@@ -6,7 +6,6 @@
 @import "font";
 @import "footer";
 @import "header";
-@import "klaro";
 @import "main";
 @import "table";
 

package/scss/_klaro.scss

@@ -1,473 +0,0 @@
-@mixin cm-button {
-  border-radius: $br-border-radius;
-  font-size: $font-size-sm;
-  background: $c-grey-l44;
-  padding: 0.5em 0.75em;
-  margin-right: 1em;
-  font-weight: bold;
-  color: $br-white;
-  cursor: pointer;
-  border: 0;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:last-of-type {
-    margin-right: 0;
-  }
-
-  &.focus-visible {
-    @include double-box($c-grey-l21, $br-white, md);
-  }
-
-  &.cm-btn-success {
-    background: $c-status-neutral;
-
-    &-var {
-      background: $c-status-neutral;
-    }
-  }
-}
-
-@mixin cookie-position($pos: right) {
-  position: fixed;
-  z-index: 999;
-  width: 100%;
-  bottom: 0;
-
-  @if $pos ==right {
-    right: 0;
-  }
-
-  @if $pos ==left {
-    left: 0;
-  }
-
-  @include large-up {
-    box-shadow: 0 4px 6px 0 rgba($black, 0.2), 5px 5px 10px 0 rgba($black, 0.2);
-    border-radius: $br-border-radius;
-    max-width: 28rem;
-    bottom: 1.25rem;
-
-    @if $pos ==right {
-      right: 1.25rem;
-    }
-
-    @if $pos ==left {
-      left: 1.25rem;
-    }
-  }
-}
-
-@mixin cookie-defaults {
-  font-size: $br-font-size-base;
-
-  a {
-    text-decoration: underline;
-    color: inherit;
-
-    &.focus-visible {
-      @include double-box($c-grey-l21, $c-grey-l96, md);
-      background-color: $c-grey-l21;
-      outline: none;
-    }
-  }
-
-  .slider {
-    box-shadow: 0 4px 6px 0 rgba($black, 0.2), 5px 5px 10px 0 rgba($black, 0.2);
-  }
-
-  .cm-switch {
-    display: inline-block;
-    position: relative;
-    height: 30px;
-    width: 50px;
-  }
-
-  .cm-list-title {
-    font-size: $font-size-sm;
-  }
-
-  .cm-list-description {
-    color: $c-grey-l65;
-    font-size: $font-size-sm;
-    padding-top: 0.25rem;
-  }
-
-  .cm-list-input {
-    position: absolute;
-    height: 30px;
-    width: 50px;
-    opacity: 0;
-    left: 0;
-    top: 0;
-
-    &:focus+.cm-list-label .slider {
-      @include double-box($c-grey-l21, $br-white);
-    }
-
-    &:checked+.cm-list-label .slider {
-      background-color: $c-status-neutral;
-
-      &::before {
-        -ms-transform: translateX(20px);
-        transform: translateX(20px);
-      }
-    }
-  }
-
-  .cm-list-label {
-    .cm-switch {
-      position: absolute;
-      left: 0;
-    }
-
-    .slider {
-      background-color: $c-grey-l44;
-      display: inline-block;
-      position: absolute;
-      cursor: pointer;
-      width: 50px;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-
-      &.round {
-        border-radius: 30px;
-
-        &::before {
-          border-radius: 50%;
-        }
-      }
-
-      &::before {
-        background-color: $br-white;
-        position: absolute;
-        transition: 0.3s;
-        height: 1.25rem;
-        width: 1.25rem;
-        content: "";
-        bottom: 5px;
-        left: 5px;
-      }
-    }
-  }
-
-  .cm-btn {
-    @include cm-button;
-  }
-}
-
-.klaro {
-  color: $c-grey-l96;
-
-  label {
-    margin-bottom: 0.25rem;
-  }
-
-  p:last-of-type {
-    margin-bottom: 0;
-  }
-
-  .cm-as-context-notice {
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-    height: 100%;
-  }
-
-  .cookie-modal {
-    @include cookie-defaults;
-    overflow: hidden;
-    position: fixed;
-    z-index: 1000;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-
-    a {
-      &:focus {
-        outline: none;
-      }
-
-      &.focus-visible {
-        @include double-box($c-grey-l21, $c-grey-l87);
-      }
-    }
-
-    &.cm-embedded {
-      position: relative;
-      height: inherit;
-      right: inherit;
-      width: inherit;
-      left: inherit;
-      z-index: 0;
-
-      .cm-modal.cm-klaro {
-        position: relative;
-        -ms-transform: none;
-        transform: none;
-      }
-    }
-
-    .cm-bg {
-      background: rgba($black, 0.5);
-      position: fixed;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-    }
-
-    .cm-modal {
-      &.cm-klaro {
-        background: $c-grey-l21;
-        color: $c-grey-l87;
-        box-shadow: 0 4px 6px 0 rgba($black, 0.2),
-          5px 5px 10px 0 rgba($black, 0.2);
-        transform: translateY(-50%);
-        max-height: 98%;
-        position: fixed;
-        overflow: auto;
-        z-index: 1001;
-        width: 100%;
-        top: 50%;
-
-        @include small-up {
-          border-radius: $br-border-radius;
-          position: relative;
-          max-width: 40rem;
-          margin: 0 auto;
-          height: auto;
-          width: auto;
-        }
-      }
-
-      .cm-header {
-        border-bottom: 1px solid $c-grey-l44;
-        padding: 1rem 3.15rem 1rem 1rem;
-        font-size: $font-size-sm;
-
-        h1 {
-          font-size: $h3-font-size;
-        }
-
-        p {
-          color: $c-grey-l65;
-        }
-      }
-
-      .cm-body {
-        padding: 1rem;
-
-        span {
-          display: inline-block;
-          width: auto;
-        }
-
-        ul {
-          display: block;
-
-          &.cm-purposes,
-          &.cm-services {
-            padding: 0;
-            margin: 0;
-
-            li.cm-purpose,
-            li.cm-service {
-              margin-bottom: 0.625rem;
-              vertical-align: middle;
-              padding-left: 3.75rem;
-              line-height: 1.25rem;
-              min-height: 2.5rem;
-              position: relative;
-              list-style: none;
-
-              &:first-child {
-                margin-top: 0;
-              }
-
-              &:last-of-type {
-                margin-bottom: 0;
-              }
-
-              span.cm-list-title {
-                font-weight: bold;
-              }
-
-              p.purposes {
-                display: none;
-              }
-
-              &.cm-toggle-all {
-                border-top: 1px solid $c-grey-l44;
-                padding-top: 1rem;
-              }
-            }
-
-            li.cm-purpose .cm-services .cm-content {
-              margin-left: -40px;
-              display: none;
-
-              &.expanded {
-                margin-top: 10px;
-                display: block;
-              }
-            }
-          }
-        }
-      }
-
-      .cm-footer {
-        border-top: 1px solid $c-grey-l44;
-        padding: 1rem;
-
-        .cm-powered-by {
-          display: none;
-        }
-      }
-
-      .cm-footer-buttons {
-        justify-content: space-between;
-        flex-flow: row;
-        display: flex;
-      }
-
-      .cm-list-label {
-        &.focus-visible {
-          @include double-box($c-grey-l21, $c-grey-l96);
-          outline: none;
-        }
-      }
-
-      .cm-required {
-        font-size: $font-size-sm;
-        margin-left: 0.25rem;
-      }
-
-      .hide {
-        border-style: none;
-        position: absolute;
-        background: none;
-        padding: 1.25rem;
-        line-height: $line-height-xs;
-        z-index: 1;
-        right: 0;
-        top: 0;
-
-        &:focus {
-          outline: none;
-        }
-
-        &.focus-visible {
-          outline: none;
-
-          svg {
-            @include double-box($c-grey-l21, $br-white, md);
-          }
-        }
-
-        svg {
-          stroke: $c-grey-l87;
-        }
-      }
-    }
-  }
-
-  .cookie-notice {
-    @include cookie-defaults;
-
-    &:not(.cookie-modal-notice) {
-      @include cookie-position;
-      background: $c-grey-l21;
-
-      .cn-body {
-        padding: 1.25rem;
-        margin-bottom: 0;
-        margin-right: 0;
-        bottom: 0;
-
-        @include large-up {
-          padding: 1rem;
-        }
-
-        p {
-          @include x-small-down {
-            margin-bottom: 0.5rem;
-          }
-
-          p {
-            color: $c-grey-l65;
-          }
-
-          &.cn-changes {
-            text-decoration: underline;
-          }
-        }
-
-        .cn-buttons {
-          display: inline-block;
-
-          @include x-small-down {
-            width: 100%;
-
-            button.cm-btn {
-              width: calc(50% - 0.5em);
-            }
-          }
-        }
-
-        .cn-learn-more {
-          border-radius: $br-border-radius;
-          font-size: $font-size-sm;
-          background: $c-grey-l44;
-          text-decoration: none;
-          display: inline-block;
-          font-weight: bold;
-          color: $br-white;
-          padding: 0.5rem;
-
-          @include small-down {
-            margin-bottom: 1rem;
-            margin-right: 0;
-            width: 10rem;
-          }
-
-          @include small-up {
-            margin-right: 1rem;
-          }
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .cn-ok {
-          padding-top: 1.5rem;
-
-          @include x-small-down {
-            text-align: center;
-          }
-        }
-      }
-    }
-
-    .cm-btn {
-      @include cm-button;
-    }
-  }
-
-  .context-notice {
-    @include cookie-defaults;
-  }
-}
-
-.cookie-confirmation {
-  @include cookie-position;
-  background: $c-status-neutral;
-  padding: 1rem;
-  color: $br-white;
-  opacity: 0;
-}