@iamproperty/components 1.0.12 → 2.1.0

package/assets/sass/elements/buttons.scss

@@ -0,0 +1,263 @@
+.btn {
+  --btn-bg: var(--colour-warning);
+  --btn-outline: var(--colour-warning);
+  --btn-text: var(--colour-primary);
+
+  --btn-bg-hover: white;
+  --btn-outline-hover: var(--colour-warning);
+  --btn-text-hover: var(--colour-primary);
+
+  --btn-bg-active: white;
+  --btn-outline-active: var(--colour-primary);
+  --btn-text-active: var(--colour-primary);
+
+  display: inline-block;
+  font-weight: 600;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background: var(--btn-bg);
+  border: 2px solid var(--btn-outline);
+  color: var(--btn-text);
+  font-family: var(--font-heading);
+  font-size: 1rem;
+  line-height: 1.25;
+  padding: em(12) em(28);
+  border-radius: rem(20);
+  margin-bottom: rem(24);
+  margin-right: rem(16);
+  transition: background-color .5s, color .5s;
+  height: auto;
+
+  a:hover &,
+  a:focus &,
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+    border-radius: rem(20);
+    
+    background: var(--btn-bg-hover);
+    border-color: var(--btn-outline-hover);
+    color: var(--btn-text-hover);
+  }
+
+  a:active &,
+  a.active &,
+  &:active,
+  &.active,
+  *:checked + &,
+  details[open] & {
+    --btn-colour: var(--btn-active-colour);
+    @include box-shadow($btn-active-box-shadow);
+    border-radius: rem(20);
+    transition: 0s;
+
+    background: var(--btn-bg-active);
+    border-color: var(--btn-outline-active);
+    color: var(--btn-text-active);
+
+    &:focus {
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
+  }
+
+  a:disabled &,
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  
+  &.btn-secondary {
+
+    --btn-bg: var(--colour-secondary);
+    --btn-outline: var(--colour-secondary);
+    --btn-outline-hover: var(--colour-secondary);
+  }
+
+  &.btn-tertiary,
+  &.btn-tag:not(.btn-primary):not(.btn-secondary) {
+
+    --btn-bg: transparent;
+    --btn-bg-hover: var(--colour-primary);
+    --btn-bg-active: var(--colour-primary);
+    --btn-outline: var(--colour-primary);
+    --btn-outline-hover: var(--colour-primary);
+    --btn-text-hover:  #ffffff;
+    --btn-text-active: #ffffff;
+  }
+
+  [class*="bg-"]:not(.prevent-invert) & {
+
+    --btn-bg: var(--colour-primary);
+    --btn-bg-hover: transparent;
+    --btn-bg-active: transparent;
+    --btn-outline: var(--colour-primary);
+    --btn-outline-hover: var(--colour-primary);
+    --btn-text-hover:  var(--colour-primary);
+    --btn-text:  #ffffff;
+
+    &.btn-tertiary,
+    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
+
+      --btn-bg: transparent;
+      --btn-bg-hover: var(--colour-primary);
+      --btn-text:  var(--colour-primary);
+      --btn-text-hover:  #ffffff;
+    }
+  }
+
+  > .icon {
+    display: inline-block;
+    margin-right: 0.5em;
+    margin-left: 0.5em;
+  }
+
+  @include invert-colours {
+    
+    --btn-bg: #ffffff;
+    --btn-bg-hover: transparent;
+    --btn-outline: #ffffff;
+    --btn-outline-hover: #ffffff;
+    --btn-text-hover:  #ffffff;
+    --btn-text:  var(--colour-primary-theme);
+
+    &.btn-tertiary,
+    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
+
+      --btn-bg: transparent;
+      --btn-bg-hover: #ffffff;
+      --btn-text:  #ffffff;
+      --btn-text-hover:  var(--colour-primary-theme);
+    }
+  }
+
+  [class*="bg-"].bg-light:not(.prevent-invert) & {
+    
+    --btn-bg: #ffffff;
+    --btn-bg-hover: transparent;
+    --btn-outline: #ffffff;
+    --btn-outline-hover: var(--colour-dark-theme);
+    --btn-text-hover: var(--colour-dark-theme);
+    --btn-text: var(--colour-dark-theme);
+
+    &.btn-tertiary,
+    &.btn-tag:not(.btn-primary):not(.btn-secondary) {
+
+      --btn-bg: transparent;
+      --btn-bg-hover: #ffffff;
+      --btn-text:  var(--colour-dark-theme);
+      --btn-outline:  var(--colour-dark-theme);
+      --btn-outline-hover: #ffffff;
+      --btn-text-hover:  var(--colour-dark-theme);
+    }
+  }
+}
+
+// #region button small and tag
+.btn-sm {
+
+  padding: em(6) em(12);
+}
+
+.btn-tag {
+  // btn tag also uses the styles of btn-tertiary by default, see above
+  padding: em(6) em(12);
+  margin-bottom: 0.5rem;
+  margin-right: 0.5rem;
+}
+// #endregion
+
+// #region Direction button
+.btn-next, 
+.btn-prev {
+  --marker-bg: var(--colour-secondary);
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  background: var(--marker-bg);
+  border-radius: 100%;
+  width: rem(36);
+  height: rem(36);
+
+  @include media-breakpoint-up(md) {
+
+    width: rem(48);
+    height: rem(48);
+  }
+  text-indent: -300rem;
+  overflow: hidden;
+  border: none;
+  position: relative;
+  margin: 0 rem(8);
+  padding: 0;
+
+  &:disabled {
+    opacity: 0.8;
+    pointer-events: none;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: escape-svg($accordion-button-icon);
+    mask-size: 50%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 60%;
+    -webkit-mask-image: escape-svg($accordion-button-icon);
+    -webkit-mask-size: 50%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 55% 50%;
+    transform: rotate(0deg);
+  }
+
+  &:hover,
+  &:focus {
+
+    background: var(--colour-warning);
+    color: var(--colour-hover);
+    border-radius: 100%;
+  }
+
+  &:active {
+    border-radius: 100%;
+  }
+}
+
+.btn-prev {
+  &:after {
+
+    transform: rotate(180deg);
+  }
+}
+// #endregion
+
+// #region button group 
+.btn-group {
+
+  flex-wrap: wrap;
+
+  > .btn {
+    margin-right: 0;
+    padding: 0.75rem;
+  }
+
+  > .btn:last-of-type {
+
+    border-top-right-radius: rem(20)!important;
+    border-bottom-right-radius: rem(20)!important;
+  }
+
+  > *:not(.btn) {
+    width: 100%;
+  }
+}
+
+// #endregion

package/assets/sass/elements/container.scss

@@ -0,0 +1,134 @@
+// #region container
+.container {
+
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 rem(20) rem(16) rem(20);
+  width: 100%;
+  max-width: rem(1440);
+  
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-top: 0;
+    content-visiblity: unset!important; /* We only want to delay the painting of top level containers */
+  }
+
+  &[class*="bg-"] {
+    padding-top: rem(48);
+    padding-bottom: rem(32);
+  }
+
+  &[class*="bg-"] + .container:not([class*="bg-"]) {
+
+    padding-top: rem(32);
+  }
+
+  @include media-breakpoint-up(md) {
+    padding: 0 rem(60) rem(16) rem(60);
+
+    &[class*="bg-"] {
+      padding-top: rem(48);
+      padding-bottom: rem(32);
+    }
+  }
+
+  // Fix the clearing for containers
+  &:before {
+    display: table;
+    clear: both;
+    content: "";
+  }
+  &:after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}
+// #endregion
+
+// #region Circles
+.container {
+  position: relative;
+  z-index: 1;
+
+
+  &[class*="circle-pattern-"] {
+    overflow: hidden;
+  }
+
+  > .circle {
+
+    position: absolute;
+    z-index: -1;
+    border-width: 3px;
+  }
+
+  // Default pattern
+  &:not([class*="circle-pattern-"]) > .circle {
+    font-size: rem(300);
+    top: rem(-75);
+    left: rem(-200);
+  }
+
+  &:not([class*="circle-pattern-"]) > .circle ~ .circle {
+
+    font-size: rem(350);
+    top: auto;
+    left: auto;
+    right: rem(-100);
+    bottom: rem(-200);
+  }
+
+  @include media-breakpoint-up(sm) {
+    &:not([class*="circle-pattern-"]) > .circle {
+      font-size: rem(450);
+      top: rem(-50);
+      left: rem(-175);
+    }
+  
+    &:not([class*="circle-pattern-"]) > .circle ~ .circle {
+  
+      font-size: rem(500);
+      right: rem(-150);
+      bottom: rem(-150);
+    }
+  }
+
+  // Pattern 2
+  &.circle-pattern-2 > .circle {
+    font-size: rem(300);
+    top: rem(-75);
+    right: rem(-200);
+  }
+
+  &.circle-pattern-2 > .circle ~ .circle {
+    font-size: rem(450);
+    top: auto;
+    bottom: rem(-50);
+    left: rem(-175);
+  }
+
+  @include media-breakpoint-up(sm) {
+    &.circle-pattern-2 > .circle {
+      font-size: rem(450);
+      top: rem(-75);
+      right: rem(-200);
+    }
+    &.circle-pattern-2 > .circle ~ .circle {
+      font-size: rem(500);
+      bottom: rem(-75);
+      left: rem(-200);
+    }
+  }
+
+  // Desktop container adjustment
+  @include media-breakpoint-up(md) {
+    > .circle {
+      margin-left: rem(60);
+      margin-right: rem(60);
+    }
+  }
+}
+// #endregion

package/assets/sass/elements/forms.scss

@@ -0,0 +1,128 @@
+.form-control__wrapper {
+  margin-bottom: 1.5rem;
+  max-width: $content-max-width;
+
+  label {
+    display: block;
+
+  }
+}
+
+
+.form-control-inline {
+  display: flex;
+  align-items: center;
+
+  label {
+    white-space: nowrap;
+    padding-right: 1rem;
+  }
+}
+
+.form-control-color {
+  width: $form-color-width;
+  height: $form-color-width; // Override fixed browser height
+  overflow: hidden;
+  padding: 0;
+
+  .input-group > & {
+
+    flex: 0 0 3rem;
+  }
+
+  &::-moz-color-swatch {
+    height: $form-color-width;
+    border-radius: 0;
+    border: none;
+  }
+
+  &::-webkit-color-swatch {
+    height: $form-color-width;
+    border-radius: 0;
+    border: none;
+  }
+}
+
+
+.input-group {
+  .form-range {
+    flex: 1 1 0;
+    height: auto;
+    margin-right: 1rem;
+  }
+}
+
+// #region checkbox
+.form-check {
+
+  input,
+  label {
+    cursor: pointer;
+  }
+
+  input:not([disabled]) + label:hover,
+  input:not([disabled]):hover + label,
+  input:not([disabled]):focus + label {
+
+    color: var(--colour-hover);
+    border-color: var(--colour-hover);
+  }
+}
+.form-check + .form-check {
+  margin-top: -0.5rem;
+}
+
+.form-check-label {
+  float: left;
+}
+
+.form-check-label + .form-check-input {
+
+  margin-left: 1rem;
+  margin-right: 0.5rem;
+}
+
+// #endregion
+
+// #region Conditional reveal
+.conditional {
+  display: none;
+}
+
+input:checked + .conditional,
+input:checked + label + .conditional {
+  display: block;
+  clear: both;
+}
+
+input:not([class*="conditional-input-"]):nth-of-type(1):checked ~ .conditional-1,
+input:not([class*="conditional-input-"]):nth-of-type(2):checked ~ .conditional-2,
+input:not([class*="conditional-input-"]):nth-of-type(3):checked ~ .conditional-3,
+input:not([class*="conditional-input-"]):nth-of-type(4):checked ~ .conditional-4,
+input:not([class*="conditional-input-"]):nth-of-type(5):checked ~ .conditional-5,
+input.conditional-input-1:checked ~ .conditional-1,
+input.conditional-input-2:checked ~ .conditional-2,
+input.conditional-input-3:checked ~ .conditional-3,
+input.conditional-input-4:checked ~ .conditional-4,
+input.conditional-input-5:checked ~ .conditional-5 {
+  display: block;
+  clear: both;
+}
+// #endregion
+
+// #region Multi-select
+select[multiple] {
+  border-radius: 0.35rem;
+}
+select[multiple]::-webkit-scrollbar {
+  width: 0.7rem; // manage scrollbar width here
+}
+select[multiple]::-webkit-scrollbar * {
+  background-color:transparent; // manage scrollbar background color here
+}
+select[multiple]::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  //background-color:#000000!important; // manage scrollbar thumb background color here
+  border-radius: 0.35rem;
+}
+// #endregion

package/assets/sass/elements/links.scss

@@ -0,0 +1,95 @@
+a,
+.link {
+  @include var (color, --colour-link);
+  display: inline-block;
+  min-height: em(28);
+  margin-bottom: rem(16);
+  position: relative;
+  text-decoration: none;
+  
+  &:not(.text-decoration-none):not(.btn):before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+    @include var(background-color,--colour-underline);
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+    -webkit-transition: .3s ease-in;
+    transition: .3s ease-in;
+  }
+
+  &:not(.text-decoration-none):not(.btn):hover:before,
+  .card:hover &:before,
+  details[open] &:not(.text-decoration-none):not(.btn):before {
+    width: 0%;
+  }
+
+  &:hover,
+  &:focus,
+  .card:hover &,
+  .card:focus &  {
+    @include var (color, --colour-hover);
+  }
+
+  &:active,
+  &.active,
+  .card:active & {
+    @include var (color, --colour-active);
+  }
+
+  &[target="_blank"]:after {
+    
+    content: "";
+    height: 1em;    
+    width: 1em;
+    margin-left: 0.5em;
+    margin-right: -0.2em;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: -0.15em;
+
+    mask-image: var(--icon-blank);
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+    mask-position: 0 0;
+  
+    -webkit-mask-image: var(--icon-blank);
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 0 0;
+    background-color: currentColor;
+  }
+  
+}
+@include inline-text(){
+  a {
+    min-height: none;
+    display: inline;
+    margin-bottom: 0;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--colour-underline);
+
+    &:hover,
+    &:focus,
+    &:active{
+
+      text-decoration: none;
+    }
+  
+    &:before {
+
+      display: none;
+    }
+
+    &[target="_blank"]:after {
+      margin-left: 0.25em;
+      margin-right: 0.2em;
+    }
+  }
+}

package/assets/sass/elements/lists.scss

@@ -0,0 +1,21 @@
+.breadcrumb {
+
+  font-size: rem(14);
+  padding-left: 0;
+  list-style: none;
+
+  li {
+    display: inline-block;
+
+    &:not(:first-child):before {
+      content: "\00A0/\00A0";
+      font-weight: bold;
+      color: var(--colour-link);
+    }
+
+    a {
+      text-decoration: none;
+      text-transform: uppercase;
+    }
+  }
+}

package/assets/sass/elements/media.scss

@@ -0,0 +1,3 @@
+img {
+  max-width: 100%;
+}