barbican-reset 1.4.1 → 1.4.2

package/helpers/mixins/_buttons.scss

@@ -197,6 +197,16 @@
   }
 }
 
+@mixin btn-remove-gift {
+  @include media-breakpoint-down(xl) {
+    @include btn-remove;
+    width: 100%;
+  }
+  @include media-breakpoint-up(xl) {
+    @include btn-link;
+  }
+}
+
 @mixin btn-membership-card {
   @include button-outline(
     $color: $white,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_atomic.scss

@@ -54,6 +54,10 @@ $aligns: "left", "center", "right";
   margin-top: 0.5rem;
 }
 
+.margin-top-025 {
+  margin-top: 0.25rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }

package/scss/_btn.scss

@@ -52,6 +52,10 @@
     @include btn-remove-ticket;
   }
 
+  &.btn-remove-gift {
+    @include btn-remove-gift;
+  }
+
   &.btn-membership-card {
     @include btn-membership-card;
   }

package/scss/_custom-select.scss

@@ -0,0 +1,8 @@
+.custom-select {
+  background-color: $c-grey-alpine;
+  border-color: $c-grey-concrete;
+  border-radius: $border-radius;
+  padding: 0.75rem 0.5rem;
+  color: $c-grey-night;
+  width: 100%;
+}

package/scss/_promo.scss

@@ -0,0 +1,11 @@
+.promo-form {
+  @include basket-row-grid;
+  margin-top: 0.5rem;
+}
+
+.promo-added {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+}

package/scss/index.scss

@@ -13,6 +13,7 @@
 @import "loading-animation.scss";
 @import "close-icon.scss";
 @import "table/index.scss";
+@import "promo.scss";
 
 // bootstrap component styles
 @import "btn.scss";
@@ -20,6 +21,7 @@
 @import "card-group.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
+@import "custom-select.scss";
 @import "form.scss";
 @import "list.scss";
 @import "input.scss";

package/scss/table/_basket.scss

@@ -28,9 +28,4 @@ table.basket tr {
       width: 100%;
     } 
   }
-}
-
-table.basket .promo-form {
-  @include basket-row-grid;
-  margin-top: 0.5rem;
-}
+}

package/scss/table/_gifts.scss

@@ -0,0 +1,56 @@
+table.gifts {
+
+  $mq: xl;
+
+  thead {
+    @include media-breakpoint-down($mq) {
+      display: none;
+    }
+  }
+
+  th {
+    font-weight: 700;
+  }
+
+  tr {
+    @include media-breakpoint-up($mq) {
+      @include table-row;
+      grid-template-columns: 3fr 5fr 5fr 2fr 2fr;
+      display: grid;
+      gap: 0.75rem;
+  
+      label {
+        display: none;
+      }
+    }
+
+    @include media-breakpoint-down($mq) {
+      border-radius: $border-radius-lg;
+      border: 1px solid $c-grey-pearl;
+      display: block;
+      padding: 1rem;
+  
+      &:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+  
+      td {
+        justify-content: space-between;
+        display: flex;
+
+        &:not(:last-of-type) {
+          padding-bottom: 0.25rem;
+          padding-top: 0.25rem;
+        }
+
+        &:not(:first-of-type):not(:last-of-type) {
+          border-top: 1px solid $c-grey-pearl;
+        }
+  
+        &:last-of-type {
+          margin-top: 0.5rem;
+        }
+      }
+    }
+  }
+}

package/scss/table/index.scss

@@ -7,6 +7,7 @@
 @import "preferences.scss";
 @import "etickets.scss";
 @import "membership.scss";
+@import "gifts.scss";
 
 table {
   border-spacing: 0;