@iamproperty/components 3.0.0 → 3.2.0

package/assets/sass/foundations/reboot.scss

@@ -1,131 +1,131 @@
-@use "../_func" as *;
-
-@import "../../../node_modules/bootstrap/scss/_reboot.scss";
-
-/* Reset & Defaults - Most of the resets/normailization stuff is done by Bootstrap */
-html {
-
-  -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  font-size: vw($device-xs-width);
-  scroll-padding-top: rem(100);
-  
-  @include media-breakpoint-up(sm) {
-    font-size: vw($device-sm-width);
-  }
-  @include media-breakpoint-up(md) {
-    font-size: vw($device-md-width);
-  }
-
-  @if $mobileOnly != "true" {
-    @media (min-width: #{em(1440)}) {
-        font-size: 100%;
-    }
-
-    @media print {
-      font-size: 16px;
-    }
-  }
-  /*
-  @media (min-width: #{em(1440)}) {
-    font-size: vw(1440);
-  }
-  @media (min-width: #{em(1600)}) {
-    font-size: 111.11%;
-  }
-  @media (min-width: #{em(1800)}) {
-    font-size: 125%;
-  }
-  */
-}
-
-body {
-
-  font-family: 'qanelasmedium', arial, sans-serif;
-  @include var(color,--colour-body);
-  width: 100%;
-  line-height: 1.5;
-  height: 100%;
-  //overflow-y: scroll;
-  //overflow-x: hidden;
-}
-
-@media (hover: none) {
-  body {
-    height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-}
-
-#app {
-  min-height: 100%;
-}
-
-body > footer,
-body > #app > footer {
-  position: sticky;
-  top: 100vh;
-}
-
-address {
-  margin: 0;
-}
-
-button {
-  font-size: inherit;
-}
-
-button:focus {
-  border-radius: initial;
-  outline: 2px auto -webkit-focus-ring-color;
-}
-
-hr {
-  border: 0;
-  color: transparent;
-  margin: 0;
-  border-bottom: none;
-  background-color: currentColor;
-  opacity: 1;
-  clear:both;
-
-  &:after {
-    display: table;
-    clear: both;
-    content: "";
-  }
-}
-
-input[type="search" i]::-webkit-search-cancel-button {
-
-  appearance: none;
-}
-
-[list]::-webkit-calendar-picker-indicator {
-  display: none!important;
-}
-
-img {
-  max-width: 100%;
-}
-
-// Details reset
-summary {list-style: none}
-summary::-webkit-details-marker {display: none; }
-
-details summary { 
-  cursor: pointer;
-}
-
-details summary > * {
-  display: inline;
-}
-
-details {
-  width: 100%;
+@use "../_func" as *;
+
+@import "../../../node_modules/bootstrap/scss/_reboot.scss";
+
+/* Reset & Defaults - Most of the resets/normailization stuff is done by Bootstrap */
+html {
+
+  -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  font-size: vw($device-xs-width);
+  scroll-padding-top: rem(100);
+  
+  @include media-breakpoint-up(sm) {
+    font-size: vw($device-sm-width);
+  }
+  @include media-breakpoint-up(md) {
+    font-size: vw($device-md-width);
+  }
+
+  @if $mobileOnly != "true" {
+    @media (min-width: #{em(1440)}) {
+        font-size: 100%;
+    }
+
+    @media print {
+      font-size: 16px;
+    }
+  }
+  /*
+  @media (min-width: #{em(1440)}) {
+    font-size: vw(1440);
+  }
+  @media (min-width: #{em(1600)}) {
+    font-size: 111.11%;
+  }
+  @media (min-width: #{em(1800)}) {
+    font-size: 125%;
+  }
+  */
+}
+
+body {
+
+  font-family: 'qanelasmedium', arial, sans-serif;
+  @include var(color,--colour-body);
+  width: 100%;
+  line-height: 1.5;
+  height: 100%;
+  //overflow-y: scroll;
+  //overflow-x: hidden;
+}
+
+@media (hover: none) {
+  body {
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+}
+
+#app {
+  min-height: 100%;
+}
+
+body > footer,
+body > #app > footer {
+  position: sticky;
+  top: 100vh;
+}
+
+address {
+  margin: 0;
+}
+
+button {
+  font-size: inherit;
+}
+
+button:focus {
+  border-radius: initial;
+  outline: 2px auto -webkit-focus-ring-color;
+}
+
+hr {
+  border: 0;
+  color: transparent;
+  margin: 0;
+  border-bottom: none;
+  background-color: currentColor;
+  opacity: 1;
+  clear:both;
+
+  &:after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}
+
+input[type="search" i]::-webkit-search-cancel-button {
+
+  appearance: none;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none!important;
+}
+
+img {
+  max-width: 100%;
+}
+
+// Details reset
+summary {list-style: none}
+summary::-webkit-details-marker {display: none; }
+
+details summary { 
+  cursor: pointer;
+}
+
+details summary > * {
+  display: inline;
+}
+
+details {
+  width: 100%;
 }

package/assets/sass/foundations/root.scss

@@ -1,107 +1,126 @@
-@use "../func" as *;
-
-@import "../../../node_modules/bootstrap/scss/_root.scss";
-
-:root {
-  // Print out the $vars array setup in the variables file so they can be used as CSS vars
-  // Custom variable values only support SassScript inside `#{}`.
-  @each $var, $value in $vars {
-    #{$var}: #{$value};
-  }
-
-  // Add in media query based updates to the global vars like updating the heading 1 font size
-  @include media-breakpoint-up(md) {
-    
-    @each $var, $value in $varsMD {
-      #{$var}: #{$value};
-    }
-  }
-
-  // Extra vars needed
-  --body-bg: white;
-  --colour-underline: var(--colour-primary);
-  --colour-heading: var(--colour-primary);
-  --alpha: var(--bg-opacity,1);
-  --#{$variable-prefix}gradient: #{$gradient};
-  --content-max-width: #{$content-max-width};
-  --colour-brand: var(--colour-primary);
-
-  /* Button colours */
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
-}
-
-// Dark mode; functional colours get updated
-@media screen and (prefers-color-scheme: dark) {
-  :root {
-    --body-bg: var(--colour-primary);
-    --colour-admin: var(--colour-primary);
-    @include invert-colours();
-  }
-
-  body .text-primary {
-    color: white!important;
-  }
-
-  body .bg-white {
-    background-color: transparent!important;
-  }
-}
-
-@media screen {
-
-  // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
-
-    @include reset-colours();
-
-    --colour-body: var(--colour-primary);
-    --colour-heading: var(--colour-primary);
-    color: var(--colour-body);
-
-    --btn-bg: var(--colour-primary);
-    --btn-text: var(--colour-white);
-    --colour-underline: var(--colour-primary);
-
-    .btn-secondary {
-
-      --btn-text: var(--colour-primary);
-    }
-    
-  }
-
-  
-
-  // Slight colour adjustments on the light background to match brand guidelines
-  .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
-    --body-bg: var(--colour-light);
-    --colour-heading: var(--colour-dark);
-    color: var(--colour-dark);
-  }
-
-  // Override the colours when on a dark background, similiar to dark mode but on a module level
-  .bg-primary:not(.prevent-invert),
-  .bg-dark:not(.prevent-invert),
-  .bg-danger:not(.prevent-invert),
-  .bg-black:not(.prevent-invert),
-  .invert-colours {
-    
-    @if $compatible != "true" {
-      
-      @include invert-colours();
-    }
-    color: white;
-  }
-
-  // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
-  .bg-dark:not(.prevent-invert),
-  .bg-danger:not(.prevent-invert),
-  .bg-black:not(.prevent-invert),
-  .invert-colours {
-    
-    --colour-underline: white;
-  }
+@use "../func" as *;
+
+@import "../../../node_modules/bootstrap/scss/_root.scss";
+
+:root {
+  // Print out the $vars array setup in the variables file so they can be used as CSS vars
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $var, $value in $vars {
+    #{$var}: #{$value};
+  }
+
+  // Add in media query based updates to the global vars like updating the heading 1 font size
+  @include media-breakpoint-up(md) {
+    
+    @each $var, $value in $varsMD {
+      #{$var}: #{$value};
+    }
+  }
+
+  // Extra vars needed
+  --body-bg: white;
+  --colour-underline: var(--colour-primary);
+  --colour-heading: var(--colour-primary);
+  --alpha: var(--bg-opacity,1);
+  --#{$variable-prefix}gradient: #{$gradient};
+  --content-max-width: #{$content-max-width};
+  --colour-brand: var(--colour-primary);
+
+  /* Button colours */
+  --btn-bg: var(--colour-warning);
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-primary);
+  --btn-tertiary-bg: var(--colour-primary);
+  --btn-tertiary-hover-text: white;
+}
+
+// Dark mode; functional colours get updated
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --body-bg: var(--colour-primary);
+    --colour-admin: var(--colour-primary);
+    @include invert-colours();
+  }
+
+  body .text-primary {
+    color: white!important;
+  }
+
+  body .bg-white {
+    background-color: transparent!important;
+  }
+}
+
+@media screen {
+
+  // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
+  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-black):not(.invert-colours):not(.bg-white):not(.bg-admin) {
+
+    @include reset-colours();
+
+    --colour-body: var(--colour-primary);
+    --colour-heading: var(--colour-primary);
+    color: var(--colour-body);
+
+    --btn-bg: var(--colour-primary);
+    --btn-text: var(--colour-white);
+    --colour-underline: var(--colour-primary);
+
+    .btn-secondary {
+
+      --btn-text: var(--colour-primary);
+    }
+    
+  }
+
+  
+
+  // Slight colour adjustments on the light background to match brand guidelines
+  .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
+    --body-bg: var(--colour-light);
+    --colour-heading: var(--colour-dark);
+    color: var(--colour-dark);
+  }
+
+  // Override the colours when on a dark background, similiar to dark mode but on a module level
+  .bg-primary:not(.prevent-invert),
+  .bg-dark:not(.prevent-invert),
+  .bg-danger:not(.prevent-invert),
+  .bg-black:not(.prevent-invert),
+  .invert-colours {
+    
+    @if $compatible != "true" {
+      
+      @include invert-colours();
+    }
+    color: white;
+  }
+
+  // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
+  .bg-dark:not(.prevent-invert),
+  .bg-danger:not(.prevent-invert),
+  .bg-black:not(.prevent-invert),
+  .invert-colours {
+    
+    --colour-underline: white;
+  }
+}
+
+
+
+@include media-breakpoint-up(md) {
+
+  .invert-colours-md {
+    
+    @if $compatible != "true" {
+      
+      @include invert-colours();
+    }
+    color: white;
+    --colour-underline: white;
+  }
+
+  [class*="bg-"].bg-md-transparent {
+    background: transparent!important;
+  }
 }

package/assets/sass/main.scss

@@ -1,7 +1,7 @@
-@charset "UTF-8";
-
-@use "_fonts";
-@use "_corefiles";
-@use "_forms";
-@use "_components";
-@use "_print";
+@charset "UTF-8";
+
+@use "_fonts";
+@use "_corefiles";
+@use "_forms";
+@use "_components";
+@use "_print";