@iamproperty/components 1.0.12 → 2.1.0

package/assets/sass/_functions/utilities.scss

@@ -0,0 +1,198 @@
+// #region Sizing
+/* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
+$utilities: map-merge(
+  $utilities,
+  (
+    "max-width": (
+      responsive: true,
+      property: max-width,
+      class: mw,
+      values: (
+        100: 100%,
+        fit-content: fit-content
+      )
+    )
+  )
+);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "object-fit": (
+      property: object-fit,
+      class: object,
+      values: (
+        cover: cover,
+        contain: contain
+      )
+    )
+  )
+);
+//  #endregion
+
+// #region Add to line height classes 
+$utilities: map-merge(
+  $utilities,
+  (
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        0: 0,
+        1: 1,
+        /*
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+        */
+      )
+    )
+  )
+);
+
+
+
+
+
+// #endregion
+
+// #region Remove Border colour utitlity classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "border-color": null
+  )
+);
+// #endregion
+
+// #region Remove floats - They are too unpredictable and it is preferred to use flex or grid
+$utilities: map-merge(
+  $utilities,
+  (
+    "float": null
+  )
+);
+// #region
+
+// #region Remove the responsive classes for the spacing utilities
+/*
+The spacing utilities are useful but could be mis-used. The spacing of elements should be defined via the elements/components CSS.
+But at times tweaks/fixes to spacing needs to be made and can prevent the need of duplicate CSS to be created.
+However our spacing rules should be consistant across devices and we shouldn't allow device specific 'fixes' to be made
+Removing the resposive classes aves around 8kbs
+*/
+$utilities: map-merge(
+  $utilities,
+  (
+    // Padding
+    "padding": map-merge(
+      map-get($utilities, "padding"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-x": map-merge(
+      map-get($utilities, "padding-x"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-y": map-merge(
+      map-get($utilities, "padding-y"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-top": map-merge(
+      map-get($utilities, "padding-top"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-end": map-merge(
+      map-get($utilities, "padding-end"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-bottom": map-merge(
+      map-get($utilities, "padding-bottom"),
+      (
+        responsive: false
+      ),
+    ),
+    "padding-start": map-merge(
+      map-get($utilities, "padding-start"),
+      (
+        responsive: false
+      ),
+    ),
+    // Margin
+    "margin": map-merge(
+      map-get($utilities, "margin"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-x": map-merge(
+      map-get($utilities, "margin-x"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-y": map-merge(
+      map-get($utilities, "margin-y"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-top": map-merge(
+      map-get($utilities, "margin-top"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-end": map-merge(
+      map-get($utilities, "margin-end"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-bottom": map-merge(
+      map-get($utilities, "margin-bottom"),
+      (
+        responsive: false
+      ),
+    ),
+    "margin-start": map-merge(
+      map-get($utilities, "margin-start"),
+      (
+        responsive: false
+      ),
+    ),
+    // Gap
+    "gap": map-merge(
+      map-get($utilities, "gap"),
+      (
+        responsive: false
+      ),
+    ),
+  )
+);
+// #endregion
+
+// #region Fonts
+$utilities: map-merge(
+  $utilities,
+  (
+    "font-body": (
+      responsive: false,
+      property: font-family,
+      class: font,
+      values: (
+        body: var(--font-body)
+      )
+    )
+  )
+);
+//  #endregion

package/assets/sass/_functions/variables.scss

@@ -0,0 +1,365 @@
+// Declare global vars variable
+$vars: ();
+
+// #region Grid Breakpoints 
+$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
+// #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
+$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
+$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
+);
+
+@each $size, $value in $font-sizes {
+
+  $vars: map-merge((
+    --fs-#{$size}: #{$value}
+  ), $vars);
+}
+
+$headings-margin-bottom: 0.5em;
+$headings-font-style: normal;
+$headings-line-height: 1.2;
+
+
+@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);
+}
+
+
+$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