@iamproperty/components 1.0.13 → 2.2.0

package/assets/sass/_functions/variables.scss

@@ -0,0 +1,411 @@
+// Declare global vars variable
+$vars: ();
+$varsMD: ();
+
+// #region Grid Breakpoints, layouts
+$grid-breakpoints: (
+  xs: 0,
+  sm: 36em, /* 576 */
+  md: 62em  /* 992 */
+);
+
+@each $bp, $value in $grid-breakpoints {
+
+  $vars: map-merge((
+    --breakpoint-#{$bp}: #{$value}
+  ), $vars);
+}
+
+$device-xs-width: 375;
+$device-sm-width: 768;
+$device-md-width: 1440;
+
+$container-max-widths: (
+  sm: 0,
+  md: 80em
+);
+
+$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
+// Default Bootstrap Theme vars
+$primary:       #00313c;
+$secondary:     #b4e6a5;
+$success:       #b4e6a5;
+$info:          #1ebee6;
+$warning:       #ffa500;
+$danger:        #dc3545;
+$light:         #ffd2d2;
+$dark:          #46003c;
+
+
+// Functional/state variables 
+$colour-body: #6f6f6f;
+$colour-muted: #9d9d9d;
+$colour-border: #6f6f6f;
+$colour-link: $primary;
+$colour-focus: #000000;
+$colour-hover: #000000;
+$colour-active: $success;
+$colour-selected: $success;
+
+$theme-colors: ();
+$theme-colors: map-merge((
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+), $theme-colors);
+
+
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+
+@each $color, $value in $theme-colors-rgb {
+
+  $vars: map-merge((
+    --colour-#{$color}-rgb: #{$value}
+  ), $vars);
+}
+@each $color, $value in $theme-colors-rgb {
+
+  $vars: map-merge((
+    --colour-#{$color}: rgba(var(--colour-#{$color}-rgb),var(--alpha,1))
+  ), $vars);
+}
+
+@each $color, $value in $theme-colors-rgb {
+
+  $vars: map-merge((
+    --colour-#{$color}-theme: rgba(var(--colour-#{$color}-rgb),var(--alpha,1))
+  ), $vars);
+}
+
+//  RGB Theme colours
+@function show-css-var($identifier) {
+  @return rgba(var(--colour-#{$identifier}-rgb),var(--bs-bg-opacity,1));
+}
+@function show-css-var-text($identifier) {
+  @return rgba(var(--colour-#{$identifier}-rgb),var(--bs-text-opacity,1));
+}
+$utilities-bg-colors: map-loop($utilities-colors, show-css-var, "$key");
+$utilities-text-colors: map-loop($utilities-colors, show-css-var-text, "$key");
+
+
+
+// Colours that we want setting but not used for Bootstraps mixins, i.e. .text-primary, .bg-muted
+$non-theme-colors: ();
+$non-theme-colors: map-merge((
+  "muted":      $colour-muted,
+  "border":           $colour-border,
+  "link":             $colour-link,
+  "focus":            $colour-focus,
+  "hover":            $colour-hover,
+  "active":           $colour-active,
+  "selected":         $colour-selected
+), $non-theme-colors);
+
+@each $color, $value in $non-theme-colors {
+
+  $vars: map-merge((
+    --colour-#{$color}-theme: #{$value},
+    --colour-#{$color}: #{'var(--colour-'+$color+'-theme)'}
+  ), $vars);
+}
+
+$vars: map-merge((
+  "--colour-body-rgb": to-rgb($colour-body),
+  "--colour-white-rgb": to-rgb(#ffffff),
+  "--colour-black-rgb": to-rgb(#000000),
+  "--colour-body":  rgba(var(--colour-body-rgb),var(--alpha,1)),
+  "--colour-white": rgba(var(--colour-white-rgb),var(--alpha,1)),
+  "--colour-black": rgba(var(--colour-black-rgb),var(--alpha,1))
+), $vars);
+
+$gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
+
+// #endregion
+
+
+
+// #region fonts
+
+$font-body: 'qanelasmedium', arial, sans-serif;
+$font-heading: 'qanelas_softextrabold', arial, sans-serif;
+
+$fonts: ();
+$fonts: map-merge((
+  "heading":   $font-heading,
+  "body":   $font-body
+), $fonts);
+
+
+@each $font, $value in $fonts {
+
+  $vars: map-merge((
+    --font-#{$font}: #{$value}
+  ), $vars);
+}
+
+// #endregion
+
+// #region Type
+
+$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: (
+  '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 {
+
+  $vars: map-merge((
+    --fs-#{$size}: #{$value}
+  ), $vars);
+}
+
+$headings-margin-bottom: clamp(1rem,0.5em,0.5em);
+$headings-font-style: normal;
+$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;
+  $headings-font-weight: 700;
+  $headings-color: $primary;
+}
+@else {
+  $headings-font-family: var(--font-heading);
+  $headings-font-weight: var(--heading-weight);
+  $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
+), $vars);
+
+$content-max-width: rem(820);
+$paragraph-margin-bottom: 2rem;
+
+// #endregion 
+
+// #region Buttons
+$btn-border-radius: 1rem;
+$btn-border-radius-sm:        1rem;
+$btn-border-radius-lg:        1rem;
+
+$btn-padding-y: 0.5rem;
+$btn-padding-x: 1.5rem;
+$btn-padding-y-sm: $btn-padding-y;
+$btn-padding-x-sm: $btn-padding-x;
+$btn-padding-y-md: $btn-padding-y;
+$btn-padding-x-md: $btn-padding-x;
+
+// #endregion
+
+// #region Forms
+// label
+$form-label-font-size: $h5-font-size;
+$form-label-font-weight: bold;
+$form-label-color: var(--colour-heading);
+$form-label-margin-bottom: 0.25rem;
+// input field
+$input-font-size: 1rem;
+$input-font-weight: normal;
+$input-line-height: 1.5;
+$input-padding-y: 0.75em;
+$input-padding-x: 1em;
+$input-border-radius: rem(10);
+$input-border-color: var(--colour-border);
+
+// sm
+$input-height-sm: null;
+$input-font-size-sm: #{rem(14)};
+$input-border-radius-sm: null; // Inherit default value
+$input-padding-y-sm: null;
+$input-padding-x-sm: null;
+
+// lg
+$input-height-lg: null;
+$input-font-size-lg: #{rem(24)};
+$input-border-radius-lg: false; // Inherit default value
+$input-padding-y-lg: null;
+$input-padding-x-lg: null;
+
+// Input group
+$input-group-addon-bg: white;
+$input-group-addon-border-color: var(--colour-border);
+
+
+
+// Select 
+$form-select-padding-y: $input-padding-y;
+//$form-select-indicator-padding
+$form-select-padding-x: #{$input-padding-x};
+$form-select-border-color: var(--colour-border);
+$form-select-border-radius: $input-border-radius;
+
+// Checkbox
+$form-check-input-width: 1.5rem;
+$form-check-min-height: #{rem(28)};
+$form-check-padding-start: 2rem;
+$form-check-margin-bottom: #{rem(16)};
+
+$form-check-input-border: 1px solid var(--colour-border);
+
+$form-check-input-checked-color:          $primary;
+$form-check-input-checked-bg-color:       var(--colour-success);
+$form-check-input-checked-border-color:   var(--colour-border);
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>");
+
+$form-check-input-indeterminate-color:          $primary;
+$form-check-input-indeterminate-bg-color:       var(--colour-success);
+$form-check-input-indeterminate-border-color:   var(--colour-success);
+$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>");
+
+$form-switch-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-border}'/></svg>");
+$form-switch-focus-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-focus}'/></svg>");
+$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$primary}'/></svg>");
+
+$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$primary}'/></svg>");
+
+
+// #endregion
+
+// #region Cards
+$card-border-width:                 0;
+$card-border-radius:                rem(10);
+$card-spacer-y: 1.5rem;
+$card-spacer-x: 1.25rem;
+
+
+$card-cap-padding-y: 1.5rem;
+$card-cap-padding-x: 1.25rem;
+
+
+
+$card-cap-bg: transparent;
+// #endregion card-variables
+
+// #region Icons
+$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='2px'></path></svg>");
+$icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
+$icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
+
+$vars: map-merge((
+  --icon-blank: #{escape-svg($icon-blank)},
+  --icon-sort: #{$icon-sort},
+  --icon-arrow: #{escape-svg($icon-arrow)},
+), $vars);
+// #endregion
+
+// #region pagination
+// Default
+$pagination-color: var(--colour-primary);
+$pagination-disabled-color: var(--colour-muted);
+$pagination-bg: transparent;
+$pagination-border-width: 1px;
+$pagination-border-color: var(--colour-border);
+
+// Hover and focus
+$pagination-hover-color: var(--colour-primary);
+$pagination-hover-bg: var(--colour-muted);
+$pagination-hover-border-color: var(--colour-border);
+$pagination-focus-color: var(--colour-primary);
+$pagination-focus-bg: var(--colour-muted);
+
+// Active
+$pagination-active-color: white;
+$pagination-active-bg: var(--colour-primary);
+$pagination-active-border-color: var(--colour-primary);
+
+// Disabled
+$pagination-disabled-bg: $pagination-bg;
+$pagination-disabled-border-color: $pagination-border-color;
+// #endregion
+
+// #region Accordion
+$accordion-button-padding-y: var(--accordion-y-padding);
+$accordion-button-padding-x: var(--accordion-indent);
+$accordion-button-color: var(--colour-primary);
+$accordion-button-bg: transparent;
+
+$accordion-icon-color: $primary;
+$accordion-icon-active-color: $primary;
+
+$accordion-button-icon: var(--icon-arrow);
+
+$accordion-button-active-color: var(--colour-primary);
+$accordion-button-active-bg: transparent;
+
+$accordion-border-color: var(--colour-border);
+$accordion-border-width: 1px;
+$accordion-bg: transparent;
+
+$accordion-body-padding-y: 1rem;
+$accordion-body-padding-x: var(--accordion-indent);
+
+// #endregion

package/assets/sass/components/accordion.scss

@@ -0,0 +1,195 @@
+// Accordion
+.accordion {
+  --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: 1rem;
+    --accordion-right-padding: 6rem;
+    --accordion-y-padding: 2rem;
+    --accordion-icon-size: #{rem(48)};
+    --accordion-icon-top: #{rem(20)};
+  }
+}
+
+.accordion-button {
+
+  padding: $accordion-button-padding-y var(--accordion-right-padding) $accordion-button-padding-y $accordion-button-padding-x;
+  color: $accordion-button-color;
+  text-align: left; // Reset button style
+  background-color: $accordion-button-bg;
+  overflow-anchor: none;
+  @include transition($accordion-transition);
+
+  --marker-bg: var(--colour-secondary);
+  cursor: pointer;
+  position: relative;
+
+  .badge {
+    vertical-align: bottom;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    margin-bottom: 0.1em;
+  }
+
+
+  &:before,
+  &:after {
+
+    content: "";
+    position: absolute;
+    right: var(--accordion-indent);
+    top: var(--accordion-icon-top);
+    margin-top: var(--accordion-icon-size-half);
+    width: var(--accordion-icon-size);
+    height: var(--accordion-icon-size);
+  }
+
+  &:before {
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    background: var(--marker-bg);
+    border-radius: 100%;
+  }
+
+  // Accordion icon
+  &::after {
+    background: currentColor;
+    mask-image: escape-svg($accordion-button-icon);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+  
+    -webkit-mask-image: escape-svg($accordion-button-icon);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+
+    @include transition($accordion-icon-transition);
+    transform: rotate(90deg);
+  }
+
+  &:hover,
+  &:focus {
+
+    --marker-bg: var(--colour-warning);
+    color: var(--colour-hover);
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    border-color: $accordion-button-focus-border-color;
+    outline: 0;
+    box-shadow: $accordion-button-focus-box-shadow;
+  }
+
+  [open] > summary > & {
+    color: $accordion-button-active-color;
+    background-color: $accordion-button-active-bg;
+    
+    &::after {
+      
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+// #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;
+}
+
+.accordion-item {
+  background-color: $accordion-bg;
+  border-bottom: $accordion-border-width solid $accordion-border-color;
+  margin-bottom: 2rem;
+
+  &:first-of-type {
+    border-top: $accordion-border-width solid $accordion-border-color;
+  }
+
+  & + .accordion-item {
+    margin-top: -2rem;
+  }
+}
+
+.accordion-body {
+  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