@iamproperty/components 2.0.1 → 2.3.1

package/assets/sass/_functions/utilities.scss

@@ -72,7 +72,7 @@ $utilities: map-merge(
     "float": null
   )
 );
-// #region
+// #endregion
 
 // #region Remove the responsive classes for the spacing utilities
 /*
@@ -196,3 +196,43 @@ $utilities: map-merge(
   )
 );
 //  #endregion
+
+// #region Gradient colours 
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "gradient-color": (
+      property: background-image,
+      class: gradient,
+      local-vars: (
+        "gradient-direction": 180deg
+      ),
+      values:
+      (
+        "secondary": linear-gradient(var(--bs-gradient-direction), var(--colour-secondary) 0, transparent 100%),
+        "primary": linear-gradient(var(--bs-gradient-direction), var(--colour-primary) 0, transparent 100%),
+        "info": linear-gradient(var(--bs-gradient-direction), var(--colour-info) 0, transparent 100%)
+      )
+    )
+  )
+);
+$utilities: map-merge(
+  $utilities,
+  (
+    "gradient-direction": (
+      css-var: true,
+      class: gradient-direction,
+      values:
+      (
+        "left": 90deg,
+        "right": -90deg,
+        "up": 360deg
+      )
+    )
+  )
+);
+
+
+
+// #endregion

package/assets/sass/_functions/variables.scss

@@ -1,7 +1,8 @@
 // Declare global vars variable
 $vars: ();
+$varsMD: ();
 
-// #region Grid Breakpoints 
+// #region Grid Breakpoints, layouts
 $grid-breakpoints: (
   xs: 0,
   sm: 36em, /* 576 */
@@ -26,6 +27,25 @@ $container-max-widths: (
 
 $grid-columns: 12;
 $grid-gutter-width: 1rem; // 15px
+
+$container-padding-x: 20;
+$container-padding-x-md: 60;
+$container-padding: var(--container-padding-top) rem($container-padding-x) var(--container-padding-bottom) rem($container-padding-x);
+$container-padding-md: var(--container-padding-top) rem($container-padding-x-md) var(--container-padding-bottom) rem($container-padding-x-md);
+
+$vars: map-merge((
+  "--container-padding-top": 0,
+  "--container-padding-bottom": #{rem(16)},
+  "--container-padding-x": #{rem($container-padding-x)},
+  "--container-padding-x-md": #{rem($container-padding-x-md)},
+  "--container-padding": $container-padding,
+  "--container-padding-md": $container-padding-md
+), $vars);
+
+$varsMD: map-merge((
+  "--container-padding": var(--container-padding-md),
+  "--container-padding-x": var(--container-padding-x-md)
+), $varsMD);
 // #endregion
 
 // #region Colours
@@ -130,7 +150,14 @@ $gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info)
 
 // #endregion
 
-
+// #region aspect ratios
+$aspect-ratios: (
+  "1x1": 100%,
+  "4x3": calc(3 / 4 * 100%),
+  "16x9": calc(9 / 16 * 100%),
+  "21x9": calc(9 / 21 * 100%)
+);
+// #endregion
 
 // #region fonts
 
@@ -154,23 +181,34 @@ $fonts: map-merge((
 // #endregion
 
 // #region Type
-$h1-font-size:                $font-size-base * 2;
-$h2-font-size:                $font-size-base * 1.5;
-$h3-font-size:                $font-size-base * 1.5;
-$h4-font-size:                $font-size-base * 1.25;
-$h5-font-size:                $font-size-base * 1.125;
-$h6-font-size:                $font-size-base * 1.125;
-// scss-docs-end font-variables
-
-// scss-docs-start font-sizes
+
+$type-scale-1: #{rem(100)};
+$type-scale-2: #{rem(60)};
+$type-scale-3: #{rem(40)};
+$type-scale-4: #{rem(32)};
+$type-scale-5: #{rem(28)};
+$type-scale-6: #{rem(16)};
+$type-scale-7: #{rem(14)};
+
+
+$h1-font-size: var(--fs-1);
+$h2-font-size: var(--fs-2);
+$h3-font-size: var(--fs-3);
+$h4-font-size: var(--fs-4);
+$h5-font-size: var(--fs-5);
+$h6-font-size: var(--fs-6);
+
 $font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size,
-  'badge': $badge-font-size
+  'display': $type-scale-3,
+  1: $type-scale-3,
+  2: $type-scale-4,
+  3: $type-scale-5,
+  4: $type-scale-6,
+  5: $type-scale-6,
+  6: $type-scale-6,
+  'badge': $badge-font-size,
+  'small': $type-scale-7,
+  'strapline': $type-scale-6
 );
 
 @each $size, $value in $font-sizes {
@@ -180,10 +218,10 @@ $font-sizes: (
   ), $vars);
 }
 
-$headings-margin-bottom: 0.5em;
+$headings-margin-bottom: clamp(1rem,0.5em,0.5em);
 $headings-font-style: normal;
-$headings-line-height: 1.2;
-
+$headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
+$display-line-height: $headings-line-height;
 
 @if $compatible == 'true' {
   $headings-font-family: $font-heading;
@@ -196,6 +234,21 @@ $headings-line-height: 1.2;
   $headings-color: var(--colour-primary);
 }
 
+$font-md-sizes: (
+  'display': $type-scale-1,
+  1: $type-scale-2,
+  2: $type-scale-3,
+  3: $type-scale-4,
+  4: $type-scale-5,
+  'strapline': $type-scale-5
+);
+
+@each $size, $value in $font-md-sizes {
+
+  $varsMD: map-merge((
+    --fs-#{$size}: #{$value}
+  ), $varsMD);
+}
 
 $vars: map-merge((
   --heading-weight: 700

package/assets/sass/components/accordion.scss

@@ -1,13 +1,13 @@
 // Accordion
 .accordion {
-  --accordion-indent: 0;
+  --accordion-indent: 0.75rem;
   --accordion-right-padding: 3rem;
   --accordion-y-padding: 1rem;
   --accordion-icon-size: #{rem(30)};
   --accordion-icon-top: #{rem(12)};
 
   @include media-breakpoint-up(md) {
-    --accordion-indent: 0.5rem;
+    //--accordion-indent: 1rem;
     --accordion-right-padding: 6rem;
     --accordion-y-padding: 2rem;
     --accordion-icon-size: #{rem(48)};
@@ -28,6 +28,14 @@
   cursor: pointer;
   position: relative;
 
+  .badge {
+    vertical-align: bottom;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    margin-bottom: 0.1em;
+  }
+
+
   &:before,
   &:after {
 
@@ -83,7 +91,7 @@
     box-shadow: $accordion-button-focus-box-shadow;
   }
 
-  [open] & {
+  [open] > summary > & {
     color: $accordion-button-active-color;
     background-color: $accordion-button-active-bg;
     
@@ -94,6 +102,32 @@
   }
 }
 
+// #region Coloured summary
+summary[class*="bg-"] {
+
+  .accordion-button {
+
+    border-bottom: 1px solid var(--colour-border);
+    margin-bottom: -1px;
+
+    &:before {
+      background: none!important;
+    }
+  }
+
+  &:hover .accordion-button {
+    opacity: 0.8;
+  }
+
+  & + .accordion-body {
+
+    padding-top: 2rem;
+  }
+}
+// #endregion
+
+
+
 .accordion-header {
   margin-bottom: 0;
 }
@@ -116,3 +150,46 @@
   text-align: left;
   padding: 0 $accordion-body-padding-x;
 }
+
+// #region Straight edge
+.accordion--straight {
+  > details > summary:not([class*="bg-"]) > .accordion-button,
+  > details > .accordion-body {
+    padding-left: 0!important;
+  }
+
+  > details > .accordion-body {
+    padding-right: 0!important;
+  }
+}
+// #endregion
+
+// #region Child accordion
+.accordion .accordion {
+
+  &:first-child {
+
+    padding-top: 1rem;
+  }
+
+  &:last-child {
+
+    padding-bottom: 2rem;
+  }
+
+  .accordion-button {
+    padding: 1rem 3rem 1rem var(--accordion-indent);
+
+    &:before,
+    &:after {
+      top: 0.75rem;
+      height: 2rem;
+      width: 2rem;
+      right: 0.5rem;
+    }
+    &:before {
+      background-color: var(--colour-light);
+    }
+  }
+}
+// #endregion