@iamproperty/components 3.7.6 → 3.7.8--beta

package/assets/sass/components/forms.scss

@@ -1,108 +1,537 @@
 @use "../_func" as *;
 
-.form-control__wrapper {
-  margin-bottom: 1.5rem;
-  max-width: $content-max-width;
-  position: relative;
+// #region Form label
+label {
+  font-size: rem(18);
+  line-height: rem(21);
+  margin-bottom: rem(8);
+  font-weight: normal;
+  color: var(--colour-heading);
+  display: block;
 
-  label {
-    display: block;
+  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio'])):after {
+    content: " (Optional)";
+  }
+}
+// #endregion
 
-    &[title]:after{
-
-      content: "";
-      display: inline-block;
-      margin-left: 0.25em;
-      margin-bottom: 0.1em;
-      width: 1em;
-      height: 1em;
-      vertical-align: text-bottom;
-      background: currentColor;
-      mask-image: var(--icon-question);
-      mask-size: 100%;
-      mask-repeat: no-repeat;
-      mask-position: 50% 50%;
-      -webkit-mask-image: var(--icon-question);
-      -webkit-mask-size: 100%;
-      -webkit-mask-repeat: no-repeat;
-      -webkit-mask-position: 50% 50%;
+// #region input field
+:is(input,textarea,output) {
+  display: block;
+  width: 100%;
+  max-width: $content-max-width;
+  display: block;
+  width: 100%;
+  padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
+  font-size: var(--input-fs, #{rem(16)});
+  line-height: var(--input-lh, #{rem(20)});
+  color: var(--colour-body);
+  background-color: var(--colour-canvas-2);
+  background-clip: padding-box;
+  border: 2px solid var(--colour-primary);
+  appearance: none; // Fix appearance for date inputs in Safari
+  border-radius: rem(8);
+  margin-bottom: rem(24);
+  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+
+  // TODO: review later
+  &[type="file"] {
+    overflow: hidden; // prevent pseudo element button overlap
+
+    &:not(:disabled):not([readonly]) {
+      cursor: pointer;
     }
   }
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  &:is(:focus,.focus):not(:disabled) {
+    border-color: var(--colour-info);
+    outline: 0;
+    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+  }
+
+  // Add some height to date inputs on iOS
+  // https://github.com/twbs/bootstrap/issues/23307
+  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+  &::-webkit-date-and-time-value {
+    // Multiply line-height by 1em if it has no unit
+    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+  }
+
+  // Disabled inputs
+  &:disabled {
+    background-color: #CCD6D8;
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  // File input buttons theming
+  &::file-selector-button {
+    padding: $input-padding-y $input-padding-x;
+    margin: (-$input-padding-y) (-$input-padding-x);
+    margin-inline-end: $input-padding-x;
+    color: $form-file-button-color;
+    @include gradient-bg($form-file-button-bg);
+    pointer-events: none;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: $input-border-width;
+    border-radius: 0; // stylelint-disable-line property-disallowed-list
+    @include transition($btn-transition);
+  }
+
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: $form-file-button-hover-bg;
+  }
+
 }
 
+textarea {
+  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px);
+  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px);
+}
+// #endregion
+
+
+// #region wrappers
+div:has(> label:first-child):has(> input) {
+  position: relative;
+  max-width: $content-max-width;
+  margin-bottom: rem(24);
+
+  &:has(input[readonly]):after{
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 300;
+    content: "\f023";
+    position: absolute;
+    font-size: var(--input-lh, #{rem(20)});
+    height: var(--input-lh, #{rem(20)});
+    width: var(--input-lh, #{rem(20)});
+    bottom: calc(var(--input-padding-block, #{rem(12)}) + 2px);
+    right: calc(var(--input-padding-block, #{rem(16)}) + 2px);
+    text-align: center;
+  }
+
+  input, output, .prefix, .suffix {
+    margin-bottom: 0;
+  }
 
-.form-control-inline {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
 
+  > *:not(input):not(output):not(.prefix):not(.suffix) {
+    flex-shrink: 0;
+    width: 100%;
+  }
+
+  :is(input,textarea,output) {
+    flex-shrink: 1;
+    flex-grow: 1;
+    width: 0;
+  }
+
+  input ~ *:not(output) {
+    order: 5;
+    margin-top: rem(8);
+  }
+
+  input[type="color"]{
+    width: 3rem;
+    flex-shrink: 0;
+    flex-grow: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    padding: 0;
+    overflow: hidden;
+
+  
+    &::-moz-color-swatch {
+      
+      border-radius: 0;
+      border: none;
+    }
+
+    &::-webkit-color-swatch {
+      
+      border-radius: 0;
+      border: none;
+    }
+  }
+
+  output {
+    border-left: none;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+  }
+}
+
+div:has(> :is(.form-control-sm, .input--sm)) {
+  
+  --input-fs: #{rem(14)};
+  --input-lh: #{rem(16)};
+  --input-padding-block: #{rem(10)};
+  --input-padding-inline: #{rem(14)};
+}
+div:has(> :is(.form-control-lg, .input--sm)) {
+  --input-fs: #{rem(24)};
+  --input-lh: #{rem(29)};
+  --input-padding-block: #{rem(20)};
+  --input-padding-inline: #{rem(22)};
+}
+
+div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input--inline)) { 
+
   label {
+    flex-shrink: 0;
     white-space: nowrap;
-    padding-right: 1rem;
+    width: fit-content!important;
+    margin: 0;
+    margin-inline-end: 1rem;
   }
 }
+// #endregion
+
+
 
-.form-control-color {
-  width: $form-color-width;
-  height: $form-color-width; // Override fixed browser height
+// #region prefix
+:is(.prefix, .suffix) {
+  display: inline-block;
+  width: auto;
+  padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
+  font-size: var(--input-fs, #{rem(16)});
+  line-height: var(--input-lh, #{rem(20)});
+  color: var(--colour-body);
+  background-color: var(--colour-primary-theme);
+  border: 2px solid var(--colour-primary);
+  color: var(--colour-white);
+  margin-bottom: 1rem;
+  border-end-start-radius: rem(8);
+  border-start-start-radius: rem(8);
+  min-width: calc(#{rem(20 + 12 + 12)} + 4px);
   overflow: hidden;
-  padding: 0;
+  white-space: nowrap;
+  text-align: center;
+  text-overflow: ellipsis;
+  position: relative;
+  
+  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+
+
+  &:after {
+    display: inline-block;
+    max-width: rem(20);
+  }
 
-  .input-group > & {
+  &[class*="fa-"] {
+    width: calc(#{rem(20 + 12 + 12)} + 4px);
+    padding-inline: 0;
+  }
 
-    flex: 0 0 3rem;
+  select {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
   }
 
-  &::-moz-color-swatch {
-    height: $form-color-width;
-    border-radius: 0;
-    border: none;
+  span {
+    display: none;
   }
 
-  &::-webkit-color-swatch {
-    height: $form-color-width;
-    border-radius: 0;
-    border: none;
+  select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
+  select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
+  select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
+  select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
+  select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
+  select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
+  select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
+  select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
+  select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
+  select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+
+    display: block;
+  }
+
+  select ~ span:after {
+    content: " \f078";
+    font-family: "Font Awesome 6 Pro";
+    font-size: 0.8em;
+    display: inline-block;
+    padding-left: 1em;
+  }
+
+  select:focus-visible ~ span:after {
+    content: "\f077";
   }
 }
 
+.prefix {
+  
+  border-right: none;
+}
 
-.input-group {
-  .form-range {
-    flex: 1 1 0;
-    height: auto;
-    margin-right: 1rem;
+.suffix {
+  
+  border-left: none;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: rem(8)!important;
+  border-end-end-radius: rem(8)!important;
+  order: 2;
+}
+
+.prefix span {
+  display: none;
+
+  small {
+    font-size: 0.8em;
   }
 }
 
+.prefix ~ :is(input,textarea,output) {
+  
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
 
-.form-control__wrapper.form-control--inline-text {
+.suffix ~ :is(input,textarea,output) {
+  order: 1;
+  
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+// #endregion
 
-  display: inline;
+// #region word counter
 
+input[maxlength] + span {
+
+  position: relative;
+
+  &:before {
+    
+    counter-reset: variable var(--char-count) var(--maxlength);
+    counter-reset: variable2 var(--maxlength);
+    content: attr(data-count) " / " counter(variable2);
+    float: right;
+    
+    margin: 0 0 1em 1em;
+  }
+}
+
+// #endregion
+
+
+// #region Form validation
+
+$icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 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='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
+
+$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>");
+
+
+.was-validated input:is(:invalid, .is-invalid) {
+
+  border-color: var(--colour-danger);
+
+  background-image: escape-svg($icon-error);
+  background-repeat: no-repeat;
+  background-position: right var(--input-padding-inline, #{rem(16)}) center;
+  background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
+  
+  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
+}
+
+.was-validated input:is(:valid, .is-valid) {
+
+  border-color: var(--colour-complete);
+
+  background-image: escape-svg($icon-tick);
+  background-repeat: no-repeat;
+  background-position: right var(--input-padding-inline, #{rem(16)}) center;
+  background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
+  
+  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
+}
+
+.invalid-feedback {
+  color: var(--colour-danger);
+  margin-top: rem(8);
+  background-image: escape-svg($icon-error);
+  background-repeat: no-repeat;
+  background-position: left top 1px;
+  background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
+  padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
+  display: none;
+}
+
+.was-validated:has(input:is(:invalid, .is-invalid)) .invalid-feedback {
+  display: block;
+}
+// #endregion
+
+// #region radio field 
+
+
+input[type="radio"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  margin: 0;
+}
+
+div:has(> input[type="radio"]) {
+  position: relative;
+}
+
+input[type="radio"] + label:not(:has(> iam-card)) {
+
+  --tick-colour: transparent;
+
+  color: var(--colour-heading);
+  position: relative;
+  font-size: rem(16);
+  line-height: rem(20);
+  padding-left: rem(40);
+  padding-top: rem(10);
+  padding-bottom: rem(10);
+  margin-bottom: rem(24);
+  margin-right: rem(24);
+  cursor: pointer;
+
+  &:before {
+    content: "";
+    border: 2px solid var(--colour-primary);
+    border-radius: 50%;
+    height: rem(24);
+    width: rem(24);
+    display: inline-block;
+    position: absolute;
+    top: rem(10 - 2);
+    left: 0;
+  }
+  
+  &:after {
+    content: ""!important;
+    background: var(--colour-info);
+    border-radius: 50%;
+    height: rem(14);
+    width: rem(14);
+    display: none;
+    position: absolute;
+    top: rem(15 - 2);
+    left: rem(5);
+  }
+
+  &.radio--tick {
+    &:before {
+      
+      content: "\f00c";
+      position: absolute;
+      font-size: 1.5em;
+      line-height: 1;
+      color: var(--tick-colour);
+      font-family: "Font Awesome 6 Pro";
+
+      background: none !important;
+      border: none!important;
+      outline: none!important;
+      left: 0.25rem;
+    }
+    
+
+    &:after {
+      display: none;
+    }
+  }
+}
+
+
+@media (forced-colors: active) {
+
+  input[type="radio"]:not(:checked) + label.radio--tick:not(:has(> iam-card)) {
+
+    &:before {
+    
+      display: none;
+    }
+  }
+}
+
+div:has(> input[type="radio"]:nth-of-type(2)) {
   label {
-    display: inline;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  select {  
-    display: inline;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-    background-color: transparent;
-    border: none;
-    padding: 0 5px;
-    margin: 0 -5px;
+    margin-bottom: 0rem;
+  }
+  margin-bottom: rem(24);
+}
+
+input[type="radio"]:checked + label {
+
+  --tick-colour: var(--colour-info);
+
+  &:before {
+    border-color: var(--colour-info);
+  }
+
+  &:after {
     display: inline-block;
-    width: auto;
-    padding-right: $form-select-padding-x;
-    background-position: right 0.2rem center;
+  }
+
+  iam-card {
+    --colour: var(--colour,var(--colour-info));
+  }
+}
+
+input[type="radio"]:checked:is(:focus,:hover,.focus) + label {
+
+  --tick-colour: var(--colour-info);
+}
+input[type="radio"]:is(:focus,:hover,.focus) + label {
+
+  --tick-colour: var(--colour-muted);
+
+  &:before {
+    background: var(--colour-light);
+    outline: rem(8) solid var(--colour-light);
+  }
+}
+input[type="radio"]:is(:active,.active) + label {
+
+  --tick-colour: var(--colour-light);
+
+  &:before {
+    background: #E0E0E0;
+    outline: rem(8) solid #E0E0E0;
+  }
+}
+
+// Disabled
+input[type="radio"]:disabled + label {
+
+  opacity: 0.4;
+  cursor: not-allowed;
+
+  > iam-card {
+    pointer-events: none;
+  }
+
+  &:before {
+    background-color: none!important;
+    outline: none!important;
+    border-color: var(--colour-primary)!important;
+  }
+  
+  &:after {
+    background-color: var(--colour-primary)!important;
   }
 }
+// #endregion
 
 // #region checkbox
 .form-check {
@@ -181,51 +610,6 @@ select[multiple]::-webkit-scrollbar-thumb {
 }
 // #endregion
 
-// #region prefix
-
-.form-control__wrapper :is(.prefix,.suffix) {
-
-  color: var(--colour-white);
-  background: var(--colour-primary);
-  padding: calc(0.75em + 1px) 1em;
-  font-size: 1rem;
-  font-weight: normal;
-  line-height: 1.5;
-  position: absolute;
-  bottom: 0px;
-}
-
-.form-control__wrapper .prefix {
-
-  border-top-left-radius: 0.625rem;
-  border-bottom-left-radius: 0.625rem;
-  left: 0;
-}
-
-.form-control__wrapper :is(.prefix-sm,.suffix-sm) {
-
-  font-size: var(--fs-small);
-}
-.form-control__wrapper :is(.prefix-lg,.suffix-lg) {
-
-  font-size: 1.5rem;
-}
-
-.form-control__wrapper .prefix + .form-control {
-  padding-left: em(64);
-}
-.form-control__wrapper .suffix + .form-control {
-  padding-right: em(64);
-}
-
-.form-control__wrapper .suffix {
-  left: auto;
-  right: 0;
-  border-top-right-radius: 0.625rem;
-  border-bottom-right-radius: 0.625rem;
-}
-
-// #endregion
 
 
 // #region large upload field
@@ -293,4 +677,4 @@ select[multiple]::-webkit-scrollbar-thumb {
     cursor: pointer;
   }
 }
-// #endrgion
+// #endregion