@iamproperty/components 3.0.0 → 3.2.0

package/assets/sass/elements/buttons.scss

@@ -1,210 +1,252 @@
-@use "../_func.scss" as *;
-
-.btn {
-
-  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-bg);
-  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: transparent;
-    border-color: var(--btn-bg)!important;
-    color: var(--btn-hover-text);
-  }
-
-  a:active &,
-  a.active &,
-  &:active,
-  &.active {
-    
-    border-radius: rem(20);
-    transition: 0s;
-    background: transparent;
-    border-color: var(--btn-text);
-    color: var(--btn-hover-text);
-
-    &: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-tertiary,
-  &.btn-tag:not(.btn-primary):not(.btn-secondary) {
-
-    background: var(--btn-tertiary-bg);
-    border-color: var(--btn-hover-text) !important;
-    color: var(--btn-tertiary-hover-text);
-
-    &:not(:hover):not(:focus) {
-
-      background: transparent;
-      color: var(--colour-link);
-      border-color: var(--btn-hover-text);
-    }
-  }
-
-  &.btn-tag.btn-primary {
-    --btn-bg: var(--colour-warning);
-  }
-}
-
-input:checked + .btn:not(:hover):not(:focus),
-details[open] > summary.btn:first-child {
-  
-  transition: 0s;
-  background: var(--btn-tertiary-bg);
-  border-color: var(--btn-hover-text);
-  color: var(--btn-tertiary-hover-text);
-
-  &:focus {
-    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-  }
-}
-
-input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active),
-input:checked + .btn-tag:not(.btn-primary):not(.btn-secondary):not(:hover):not(:focus):not(:active) {
-  background: var(--btn-tertiary-bg);
-  border-color: var(--btn-hover-text);
-  color: var(--btn-tertiary-hover-text);
-}
-
-
-// #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
-
+@use "../_func.scss" as *;
+
+.btn {
+
+  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-bg);
+  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: all .5s, color .5s;
+  height: auto;
+
+  a:hover &,
+  a:focus &,
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+    border-radius: rem(20);
+    background: transparent;
+    border-color: var(--btn-bg)!important;
+    color: var(--btn-hover-text);
+  }
+
+  a:active &,
+  a.active &,
+  &:active,
+  &.active {
+    
+    border-radius: rem(20);
+    transition: 0s;
+    background: transparent;
+    border-color: var(--btn-text);
+    color: var(--btn-hover-text);
+
+    &: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-tertiary,
+  &.btn-tag:not(.btn-primary):not(.btn-secondary) {
+
+    background: var(--btn-tertiary-bg);
+    border-color: var(--btn-hover-text) !important;
+    color: var(--btn-tertiary-hover-text);
+
+    &:not(:hover):not(:focus) {
+
+      background: transparent;
+      color: var(--colour-link);
+      border-color: var(--btn-hover-text);
+    }
+  }
+
+  &.btn-tag.btn-primary {
+    --btn-bg: var(--colour-warning);
+  }
+
+  &.btn-admin:not(:hover):not(:focus) {
+    background: var(--colour-admin);
+    border-color: var(--colour-admin)!important;
+  }
+}
+
+input:checked + .btn:not(:hover):not(:focus),
+details[open] > summary.btn:first-child {
+  
+  transition: 0s;
+  background: var(--btn-tertiary-bg);
+  border-color: var(--btn-hover-text);
+  color: var(--btn-tertiary-hover-text);
+
+  &:focus {
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+  }
+}
+
+input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active),
+input:checked + .btn-tag:not(.btn-primary):not(.btn-secondary):not(:hover):not(:focus):not(:active) {
+  background: var(--colour-selected);
+  border-color: var(--colour-selected)!important;
+  color: var(--colour-primary);
+}
+
+
+// #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%;
+  }
+}
+
+.btn-group--admin {
+
+  position: relative;
+
+  &:before {
+    content: "";
+    width: calc(100% - 2px);
+    height: rem(48);
+    background-color: var(--colour-admin)!important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: 0.5rem!important;
+  }
+
+  > .btn:not(:hover):not(:focus) {
+    border-radius: 0.5rem!important;
+    background: var(--colour-admin);
+
+    border-color: var(--colour-admin)!important;
+  }
+
+  > .btn:is(:hover, :focus) {
+    border-radius: 0.5rem!important;
+    background: var(--colour-selected);
+
+    border-color: var(--colour-admin)!important;
+    color: var(--colour-primary);
+  }
+
+  > input:checked + .btn-tertiary:not(:hover):not(:focus):not(:active) {
+    border-color: var(--colour-admin)!important;
+
+  }
+}
+// #endregion
+
 @import "../../../node_modules/bootstrap/scss/_button-group.scss";