@iamproperty/components 6.0.0 → 6.1.0--beta2

package/assets/sass/elements/forms.scss

@@ -4,6 +4,204 @@ $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' vie
 
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
 
+// #region RESETS
+
+
+label {
+  display: inline-block; // 1
+}
+
+// 1. Remove the margin in Firefox and Safari
+
+input,
+select,
+optgroup,
+textarea {
+  margin: 0; // 1
+  font-family: inherit;
+  @include font-size(inherit);
+  line-height: inherit;
+}
+
+// Remove the inheritance of text transform in Firefox
+select {
+  text-transform: none;
+}
+// Set the cursor for non-`<button>` buttons
+//
+// Details at https://github.com/twbs/bootstrap/pull/30562
+
+
+select {
+  // Remove the inheritance of word-wrap in Safari.
+  // See https://github.com/twbs/bootstrap/issues/24990
+  word-wrap: normal;
+
+  // Undo the opacity change from Chrome
+  &:disabled {
+    opacity: 1;
+  }
+}
+
+// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
+// See https://stackoverflow.com/a/54997118
+
+[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+// 3. Opinionated: add "hand" cursor to non-disabled button elements.
+
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
+
+textarea {
+  resize: vertical; // 1
+}
+
+// 1. Browsers set a default `min-width: min-content;` on fieldsets,
+//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+//    So we reset that to ensure fieldsets behave more like a standard block element.
+//    See https://github.com/twbs/bootstrap/issues/12359
+//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+fieldset {
+  min-width: 0; // 1
+  padding: 0; // 2
+  margin: 0; // 2
+  border: 0; // 2
+}
+
+// 1. By using `float: left`, the legend will behave like a block element.
+//    This way the border of a fieldset wraps around the legend if present.
+// 2. Fix wrapping bug.
+//    See https://github.com/twbs/bootstrap/issues/29712
+
+legend {
+  float: left; // 1
+  width: 100%;
+  padding: 0;
+  margin-bottom: $legend-margin-bottom;
+  @include font-size($legend-font-size);
+  font-weight: $legend-font-weight;
+  line-height: inherit;
+
+  + * {
+    clear: left; // 2
+  }
+}
+
+// Fix height of inputs with a type of datetime-local, date, month, week, or time
+// See https://github.com/twbs/bootstrap/issues/18842
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+// 1. Correct the outline style in Safari.
+// 2. This overrides the extra rounded corners on search inputs in iOS so that our
+//    `.form-control` class can properly style them. Note that this cannot simply
+//    be added to `.form-control` as it's not specific enough. For details, see
+//    https://github.com/twbs/bootstrap/issues/11586.
+
+[type="search"] {
+  outline-offset: -2px; // 1
+  -webkit-appearance: textfield; // 2
+}
+
+// 1. A few input types should stay LTR
+// See https://rtlstyling.com/posts/rtl-styling#form-inputs
+// 2. RTL only output
+// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+
+// Remove the inner padding in Chrome and Safari on macOS.
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// Remove padding around color pickers in webkit browsers
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+
+// 1. Inherit font family and line height for file input buttons
+// 2. Correct the inability to style clickable types in iOS and Safari.
+
+::file-selector-button {
+  font: inherit; // 1
+  -webkit-appearance: button; // 2
+}
+
+// Correct element displays
+
+output {
+  display: inline-block;
+}
+
+// Remove border from iframe
+
+iframe {
+  border: 0;
+}
+
+// Summary
+//
+// 1. Add the correct display in all browsers
+
+summary {
+  display: list-item; // 1
+  cursor: pointer;
+}
+
+
+// Progress
+//
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+progress {
+  vertical-align: baseline;
+}
+
+
+// Hidden attribute
+//
+// Always hide an element with the `hidden` HTML attribute.
+
+// #endregion
+
 // #region Form label
 :is(label:not(.tag),.label) {
   font-size: rem(18);
@@ -143,37 +341,51 @@ div:has(> label:first-child):has(> input) {
     margin-top: rem(8);
   }
 
-  input[type="color"]{
-    width: 3rem!important;
-    flex-shrink: 0!important;
-    flex-grow: 0!important;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    padding: 0;
-    overflow: hidden;
+}
 
-  
-    &::-moz-color-swatch {
-      
-      border-radius: 0;
-      border: none;
-    }
+// #region colors
 
-    &::-webkit-color-swatch {
-      
-      border-radius: 0;
-      border: none;
-    }
+input[type="color"]{
+  width: 3rem!important;
+  flex-shrink: 0!important;
+  flex-grow: 0!important;
+  border-start-end-radius: 0!important;
+  border-end-end-radius: 0!important;
+  padding: 0!important;
+  overflow: hidden;
+  cursor: pointer!important;
+
+
+  &::-moz-color-swatch {
+    
+    border-radius: 0;
+    border: none;
   }
 
-  output {
-    border-left: none!important;
-    border-end-start-radius: 0!important;
-    border-start-start-radius: 0!important;
-    margin: 0!important;
+  &::-webkit-color-swatch {
+    
+    border-radius: 0;
+    border: none;
   }
 }
 
+label :is(div,span,fieldset):has(input[type="color"] + output){
+  display: flex;
+}
+
+input[type="color"] + output {
+  border-left: none!important;
+  border-end-start-radius: 0!important;
+  border-start-start-radius: 0!important;
+  margin: 0!important;
+}
+
+output {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0 !important;
+}
+// #endregion
+
 div:has(> :is(.form-control-sm, .input--sm)) {
   
   --input-fs: #{rem(14)};
@@ -227,6 +439,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 // #region prefix
 :is(.prefix, .suffix) {
   display: none;
+  pointer-events: none;
 }
 @supports selector(:has(*)) {
 
@@ -340,6 +553,10 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     border-end-end-radius: 0!important;
   }
 }
+
+
+
+
 // #endregion
 
 // #region word counter

package/assets/sass/elements/links.scss

@@ -1,5 +1,31 @@
 @use "../_func.scss" as *;
 
+
+// #region reset
+a {
+  color: var(--#{$prefix}link-color);
+  text-decoration: $link-decoration;
+
+  &:hover {
+    color: var(--#{$prefix}link-hover-color);
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href).
+// It would be more straightforward to just use a[href] in previous block, but that
+// causes specificity issues in many other styles that are too complex to fix.
+// See https://github.com/twbs/bootstrap/issues/19402
+
+a:not([href]):not([class]) {
+  &,
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+// #endregion
+
 // global
 a {
   color: var(--colour-link);
@@ -106,7 +132,7 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
   background: none;
   padding:0;
   display: flex;
-
+  margin-bottom: 1.5rem;
 
   &:not([class*="col"]){
     margin: 0 0 rem(24) 0;
@@ -125,7 +151,4 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
   }
 }
 
-:is(.col,[class*="col-"]) > :is(a,button):has(.card, iam-card):first-child:last-child{
-  min-height: calc(100% - rem(24));
-}
 // #endregion

package/assets/sass/elements/lists.scss

@@ -1,5 +1,51 @@
 @use "../_func.scss" as *;
 
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: $dt-font-weight;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0; // 1
+}
+
+
+
+.list-unstyled {
+  @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include list-unstyled();
+}
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
+}
+
 @include is('ol, ul','','li'){
   max-width: $content-max-width;
 }

package/assets/sass/elements/media.scss

@@ -1,51 +1,23 @@
 @use "../_func" as *;
 
-@import "../../bootstrap/scss/_images.scss";
 
-img {
-  max-width: 100%;
+figure {
+  margin: 0 0 1rem;
 }
 
-.ratio {
-  > img:first-child:last-child {
-    object-fit: cover;
-  }
+img,
+svg {
+  vertical-align: middle;
 }
 
-// #region Youtube
-.youtube-embed {
 
-  a,
-  iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
 
-  a:before,
-  a:after {
-    display: none!important;
-  }
+img {
+  max-width: 100%;
+}
 
-  img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%,-50%);
+.ratio {
+  > img:first-child:last-child {
     object-fit: cover;
-    z-index: var(--index-base);
-  }
-
-  .btn-secondary {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    z-index: var(--index-focus);
   }
 }
-// #endregion