@iamproperty/components 3.4.7 → 3.5.0

package/assets/sass/components/buttons.scss

@@ -1,252 +0,0 @@
-@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";

package/assets/sass/components/panel.scss

@@ -1,161 +0,0 @@
-@use "../_func" as *;
-
-.admin-panel {
-  --panel-gutter: 1rem;
-  --panel-tab-colour: #fafafa;
-  background: var(--body-bg);
-
-  &.bg-secondary{
-
-    background-color: rgba(#b4e6a5,0.3) !important;
-  }
-
-  @media screen and (prefers-color-scheme: dark) {
-
-    --panel-tab-colour: transparent;
-  }
-
-  @include media-breakpoint-up(md) {
-
-    --panel-gutter: 1.5rem;
-  }
-
-  padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
-  border: 1px solid var(--colour-border-light);
-  border-top: 3px solid var(--colour-secondary);
-  margin-bottom: 2rem;
-
-  &:empty {
-    display: none;
-  }
-
-  > *:not(.note-feed):first-child {
-    margin-top: var(--panel-gutter);
-  }
-
-  > *:last-child:not(details) {
-    margin-bottom: var(--panel-gutter);
-  }
-
-  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
-    border-bottom: 2px solid var(--colour-border-light);
-    font-size: var(--fs-4);
-    line-height: 1;
-    letter-spacing: 1;
-    padding: var(--panel-gutter) var(--panel-gutter) var(--panel-gutter) var(--panel-gutter);
-    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
-    display: block;
-  }
-
-  > .table__wrapper,
-  > .note-feed > .table__wrapper,
-  > .tabs > details > .table__wrapper {
-
-    margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
-    padding: 0 var(--panel-gutter) 0 var(--panel-gutter);
-    min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
-    
-    table {
-
-      margin: 0 calc(var(--panel-gutter) * -1) var(--panel-gutter) calc(var(--panel-gutter) * -1);
-      min-width: calc(100% + var(--panel-gutter) + var(--panel-gutter));
-      padding-right: 0;
-
-    }
-
-    tr {
-      :is(th, td) {
-        padding-left: var(--panel-gutter);
-        padding-right: var(--panel-gutter);
-      }
-    }
-
-    &:first-child {
-      margin-top: 0;
-
-      thead tr:first-child {
-
-        border-top: none;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-
-      tbody tr:last-child {
-
-        border-bottom: none;
-      }
-    }
-  }
-
-  // Table margin top override
-  :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .admin-panel__links, .tabs__links) + :is(.table__wrapper, table, .note-feed) {
-    margin-top: calc(var(--panel-gutter) * -1);
-
-    tr:first-child {
-
-      border-top: none;
-    }
-  }
-}
-
-[class*="col"] .admin-panel:first-child:last-child {
-
-  min-height: calc(100% - 2rem);
-}
-
-.admin-panel .admin-panel__links {
-
-  margin-top: -3px!important;
-  margin-left: calc(var(--panel-gutter) * -1);
-  margin-right: calc(var(--panel-gutter) * -1);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--body-bg);
-  border-bottom: 2px solid var(--colour-border-light);
-  margin-bottom: var(--panel-gutter);
-
-  @include media-breakpoint-up(sm) {
-
-    flex-direction: row;
-    border-top: 1px solid var(--colour-border-light);
-  }
-
-  :is(a, label) {
-    padding: var(--panel-gutter);
-    margin: 0;
-    width: 100%;
-    background: var(--panel-tab-colour);
-    border-top: 1px solid var(--colour-border-light);
-    border-left: 3px solid var(--panel-tab-border, #fafafa);
-
-    &:before {
-      display: none;
-    }
-
-    @include media-breakpoint-up(sm) {
-
-      margin-right: 0!important;
-
-      &:first-child{
-        border-left: none!important;
-      }
-
-      &:not(:first-child){
-
-        border-left: 1px solid var(--colour-border-light)!important;
-      }
-
-      border-top: 3px solid var(--panel-tab-border, #fafafa);
-    }
-  }
-
-  .current {
-    
-    --is-current: 1;
-    --panel-tab-colour: var(--body-bg);;
-    --panel-tab-border: var(--colour-secondary);
-    pointer-events: none;
-  }
-}