@iamproperty/components 1.0.13 → 2.2.0

package/assets/sass/_corefiles.scss

@@ -0,0 +1,58 @@
+// Foundations and elements
+@import "foundations/fonts.scss";
+//@import "../../node_modules/bootstrap/scss/root";
+@import "foundations/root.scss";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "foundations/reboot.scss";
+@import "foundations/brand.scss";
+@import "foundations/icons.scss";
+@import "foundations/circles.scss";
+@import "../../node_modules/bootstrap/scss/type";
+@import "elements/type.scss";
+@import "elements/lists.scss";
+@import "elements/tooltips.scss";
+@import "elements/media.scss";
+@import "../../node_modules/bootstrap/scss/images";
+// @import "../../node_modules/bootstrap/scss/containers";
+@import "elements/container.scss";
+@import "../../node_modules/bootstrap/scss/grid";
+// @import "../../node_modules/bootstrap/scss/tables";
+@import "elements/tables.scss";
+// #region Forms
+//@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/forms/labels";
+//@import "../../node_modules/bootstrap/scss/forms/form-text";
+@import "../../node_modules/bootstrap/scss/forms/form-control";
+@import "../../node_modules/bootstrap/scss/forms/form-select";
+@import "../../node_modules/bootstrap/scss/forms/form-check";
+@import "../../node_modules/bootstrap/scss/forms/form-range";
+//@import "../../node_modules/bootstrap/scss/forms/floating-labels";
+@import "../../node_modules/bootstrap/scss/forms/input-group";
+@import "../../node_modules/bootstrap/scss/forms/validation";
+@import "elements/forms.scss";
+// #endregion
+//@import "../../node_modules/bootstrap/scss/buttons";
+@import "elements/buttons";
+@import "elements/links.scss";
+@import "../../node_modules/bootstrap/scss/transitions";
+//@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/badge";
+
+// Helpers
+//@import "../../node_modules/bootstrap/scss/helpers";
+@import "../../node_modules/bootstrap/scss/helpers/clearfix";
+//@import "../../node_modules/bootstrap/scss/helpers/colored-links";
+//@import "../../node_modules/bootstrap/scss/helpers/ratio";
+@import "../../node_modules/bootstrap/scss/helpers/position";
+@import "../../node_modules/bootstrap/scss/helpers/stacks";
+@import "../../node_modules/bootstrap/scss/helpers/visually-hidden";
+//@import "../../node_modules/bootstrap/scss/helpers/stretched-link";
+@import "../../node_modules/bootstrap/scss/helpers/text-truncation";
+//@import "../../node_modules/bootstrap/scss/helpers/vr";
+
+
+// Utilities
+@import "../../node_modules/bootstrap/scss/utilities/api";
+// #endregion:Bootstrap 5

package/assets/sass/_func.scss

@@ -0,0 +1,9 @@
+$compatible: 'false'!default;
+@import "../../node_modules/bootstrap/scss/functions";
+@import "_functions/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "_functions/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "_functions/mixins";
+@import "../../node_modules/bootstrap/scss/utilities";
+@import "_functions/utilities";

package/assets/sass/_functions/functions.scss

@@ -0,0 +1,95 @@
+@use "sass:math";
+
+@function pow($x, $n) {
+  $ret: 1;
+    
+  @if $n >= 0 {
+    @for $i from 1 through $n {
+      $ret: $ret * $x;
+    } 
+  } @else {
+    @for $i from $n to 0 {
+      $ret: $ret/$x;
+    }
+  }
+  
+  @return $ret;
+}
+
+@function to-fixed($float, $digits: 2) {
+  $sass-precision: 5;
+  
+  @if $digits > $sass-precision {
+    @warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."
+    + "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."
+    + "See https://github.com/sass/sass/issues/1122 for further informations.";
+  }
+  
+  $pow: pow(10, $digits);
+  @return round($float * $pow)/$pow;
+}
+
+
+// converts pixels to em (context sets the current size of the font)
+@function em($pixels, $context: 16)
+{
+	@return #{$pixels/$context}em;
+}
+
+@function rem($pixels, $context: 16)
+{
+	@return #{$pixels/$context}rem;
+}
+
+@function vw($pixels, $context: 16)
+{
+	$size: 16/$pixels * 100;
+	@return #{to-fixed($size,5)}vw;
+}
+
+@function strip-px($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number/ ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+// prevent colours being changed via sass functions
+@function darken($colour, $percent)
+{
+	@return $colour;
+}
+
+@function lighten($colour, $percent)
+{
+	@return $colour;
+}
+
+@function saturate($colour, $percent)
+{
+	@return $colour;
+}
+@function desaturate($colour, $percent)
+{
+	@return $colour;
+}
+
+@function adjust-hue($colour, $percent)
+{
+	@return $colour;
+}
+
+@function tint($colour, $percent)
+{
+	@return $colour;
+}
+@function shade($colour, $percent)
+{
+	@return $colour;
+}
+
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints), null);
+}

package/assets/sass/_functions/mixins.scss

@@ -0,0 +1,109 @@
+
+// Example: @include prefix(transition, transform 1.5s, webkit ms o);
+@mixin prefix($property, $value, $prefixes: (webkit ms o))
+{
+	@each $prefix in $prefixes
+	{
+		#{'-' + $prefix + '-' + $property}: $value;
+	}
+	
+	// Output standard non-prefixed declaration
+	#{$property}: $value;
+}
+
+// Used to make it possible to use css properties but still support IE11
+@mixin var($property, $varName, $important:"", $compatible:$compatible) {
+
+  @if $compatible == 'true' {
+    #{$property}: map-get($vars, $varName) #{$important};
+  }
+  @else if $compatible == 'fallback' {
+      
+    #{$property}: map-get($vars, $varName) #{$important};
+    #{$property}: var(#{$varName}) #{$important};
+  }
+  @else {
+  #{$property}: var(#{$varName}) #{$important};
+  }
+}
+
+@mixin inline-text(){
+  p,
+  ul,
+  ol,
+  dd,
+  .body,
+  td {
+    @content;
+  }
+}
+
+@mixin invert-colours(){
+  [class*="bg-"].bg-dark:not(.prevent-invert) &,
+  [class*="bg-"].bg-danger:not(.prevent-invert) &,
+  [class*="bg-"].bg-primary:not(.prevent-invert) &,
+  .invert-colours & {
+    @content;
+  }
+}
+
+@mixin headers($includeClasses: 'false'){
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+
+  @if $includeClasses == 'true' {
+
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+      @content;
+    }
+  }
+}
+
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+
+    --bg-colour: var(--colour-#{str-replace($parent,'.bg-','')});
+    --bg-colour-tint: var(--colour-#{str-replace($parent,'.bg-','')}-tint);
+    
+    @include var(background-color,--colour-#{str-replace($parent,'.bg-','')},!important);
+  }
+}
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+
+    @include var(color,--colour-#{str-replace($parent,'.text-','')},"!important");
+  }
+}
+
+@mixin font-size($value, $compatible:$compatible) {
+  
+  $found: false;
+
+  @if $compatible == 'true' {
+    font-size: $value;
+  }
+  @else {
+    @each $size, $subvalue in $font-sizes {
+
+      @if($value == $subvalue and $found == false){
+        font-size: var(--fs-#{$size});
+        $found: true;
+      }
+    }
+    @if $found == false {
+      font-size: $value;
+    }
+  }
+
+}

package/assets/sass/_functions/utilities.scss

@@ -0,0 +1,238 @@
+// #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
+  )
+);
+// #endregion
+
+// #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
+
+// #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