@basic-ui-components-stc/basic-ui-components 1.0.0

package/dist/assets/scss-old/angular-material/_popover.scss

@@ -0,0 +1,352 @@
+// mat-select-panel-wrap
+.mat-select-panel-wrap, .mat-menu-panel, .mat-autocomplete-panel{
+  --select-panel-bg-even: var(--white);
+  --select-panel-bg-odd: var(--white);
+  --select-panel-border: 1px solid var(--light-gray);
+  --select-panel-fs: .85rem;
+  --select-panel-fc: var(--black);
+  --select-panel-fc-active: var(--black);
+  --select-panel-fw: var(--font-regular);
+  --select-panel-fw-active: var(--font-medium);
+  --select-panel-min-height: 3.125rem;
+  --select-panel-min-width: inherit;
+  --select-panel-width: inherit;
+  --select-line-height: inherit;
+}
+
+.mat-select-panel-wrap{
+
+
+  .mat-select-panel {
+    border-radius: var(--box-radius) !important;
+    box-shadow: var(--box-shadow) !important;
+    margin-top: var(--default-size-sm);
+  }
+  .mat-option{
+    font-weight: var(--select-panel-fw);
+    font-size: var(--select-panel-fs) !important;
+    white-space: normal;
+    height: auto;
+    line-height: var(--select-line-height);
+    min-height: var(--select-panel-min-height);
+    min-width: var(--select-panel-min-width);
+    width: var(--select-panel-width);
+    color: var(--select-panel-fc) !important;
+    background: var(--select-panel-bg-odd) !important;
+    border-bottom: var(--select-panel-border);
+    transition: var(--default-transition);
+    &:nth-child(even){
+      --select-panel-bg-odd: var(--select-panel-bg-even);
+    }
+
+
+    &:last-child {
+      border-bottom: 0;
+    }
+    &.mat-active, &.mat-selected{
+      --select-panel-fc: var(--select-panel-fc-active);
+      --select-panel-fw: var(--select-panel-fw-active);
+    }
+  }
+}
+
+//mat-menu-panel
+
+.mat-menu-panel {
+  position: relative;
+
+  all: unset;
+
+  border-radius: var(--box-radius) !important;
+  box-shadow: var(--box-shadow) !important;
+  margin-top: var(--box-margin, auto);
+  background-color: var(--menu-bc, white) !important;
+  min-width: var(--select-panel-min-width) !important;
+  min-height: auto !important;
+  &.menu-icon{
+    width: 66px;
+    min-width: 65px;
+    padding-top: 0;
+    border-radius: 0;
+    .mat-menu-content{
+      min-width: 65px;
+    }
+  }
+
+  &.colors-menu{
+    --select-panel-width: 265px;
+    padding: 10px 15px;
+    background-color:var(--white);
+    border: 0;
+    box-shadow: -1px 3px 14px rgba(var(--rgb-black), 8%) !important;
+    .mat-menu-content {
+      border: 0;
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  &.actions-menu{
+    margin: -35px 35px;
+    width: 130px;
+    border-radius: 0;
+    .mat-menu-content {
+      min-width: 2.8125rem;
+
+      &:before {
+        display: none;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+  &.action-menu {
+    min-width: 2.8125rem;
+
+    .mat-menu-content {
+      min-width: 2.8125rem;
+
+      &:before {
+        display: none;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .mat-menu-content {
+
+    padding: 0 !important;
+
+    .mat-menu-item {
+      font-weight: var(--select-panel-fw);
+      font-size: var(--select-panel-fs) !important;
+      height: auto;
+      min-height: var(--select-panel-min-height);
+      min-width: inherit;
+      width: 100%;
+      color: var(--select-panel-fc) !important;
+      background: var(--select-panel-bg-odd) !important;
+      border-bottom: var(--select-panel-border);
+      transition: var(--default-transition);
+      &:nth-child(even){
+        --select-panel-bg-odd: var(--select-panel-bg-even);
+      }
+
+
+      &:last-child {
+        border-bottom: 0;
+      }
+      &:hover, &.active{
+        --select-panel-fc: var(--select-panel-fc-active);
+        //--select-panel-fw: var(--select-panel-fw-active);
+        --select-panel-bg-odd: var(--off-white);
+      }
+    }
+
+
+  }
+}
+
+.mat-autocomplete-panel{
+  border-radius: var(--box-radius) !important;
+  box-shadow: var(--box-shadow) !important;
+  min-width: var(--select-panel-min-width);
+
+  .mat-option{
+    background: transparent;
+    border-bottom: 1px solid var(--light-gray);
+    white-space: normal;
+    line-height: var(--select-line-height);
+    height: auto;
+    min-height: var(--select-panel-min-height);
+    font-size: var(--mat-option-fs, .85rem);
+    &:nth-child(even){
+      background-color: var(--light-gray);
+    }
+    &:last-child{
+      border-bottom: 0 !important;
+    }
+
+    &.mat-active, &.mat-selected{
+      color: var(--coral) !important;
+      //background-color: var(--light-gray) !important;
+    }
+
+    &.single-select{
+      height: 65px;
+
+
+      &.mat-selected{
+        .radio{
+          border-color: var(--coral);
+          &:before{
+            transform: scale(.7);
+          }
+        }
+      }
+      .mat-option-text{
+        display: flex;
+        align-items: center;
+      }
+      .radio{
+        min-width: 28px;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        border: 2px solid var(--black);
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: all .3s linear;
+        &:before{
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          transform: scale(0);
+          background-color: var(--coral);
+          transition: all .3s linear;
+        }
+      }
+
+    }
+
+    &.single-user{
+      height: 50px;
+      .mat-option-text{
+        display: flex;
+        align-items: center;
+      }
+      .radio, .mat-checkbox-inner-container{
+        display: none;
+      }
+
+    }
+
+    .mat-checkbox{
+      width: 100%;
+      .mat-checkbox-layout{
+        width: 100%;
+        .mat-checkbox-label{
+          flex-grow: 1;
+          .users-avatar{
+            justify-content: flex-start;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+.delegate-info-popup{
+  box-shadow: var(--box-shadow);
+  border-radius: var(--box-radius);
+  border-bottom: 5px solid var(--coral);
+  background-color: white;
+  display: flex;
+  padding: 1rem;
+  gap: 0.75rem;
+  margin-bottom: 10px;
+  max-width: 300px;
+  .delegate-info{
+    margin: 0 10px;
+
+  }
+  .user-info{
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+  }
+
+}
+
+
+.sat-popover-container{
+  &.sat-popover-above{
+    .default-popover{
+      &:before{
+        top: auto;
+        bottom: var(--arrow-position);
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &.sat-popover-before{
+    .default-popover{
+      &:before{
+        left: auto;
+        right: var(--arrow-position-x);
+      }
+    }
+  }
+
+  &.sat-popover-center{
+    .default-popover{
+      &:before{
+        left: auto;
+        right: calc(50% - (var(--arrow-position-x) / 2));
+        margin: 0;
+      }
+    }
+  }
+}
+
+
+
+.default-popover{
+  --popover-bc: var(--white);
+  --popover-radius: 6px;
+  --popover-border: 0;
+  --popover-padding: 0px;
+  --popover-margin: 0px;
+  --popover-shadow: -1px 4px 20px rgba(var(--rgb-black), .1);
+
+  --popover-before-width: 1rem;
+  --arrow-position-x: 1rem;
+  --arrow-position: calc(var(--popover-before-width) * -1);
+
+  position: relative;
+  background-color: var(--popover-bc);
+  padding: var(--popover-padding);
+  margin: var(--arrow-position-x) 0;
+  border: var(--popover-border);
+  border-radius: var(--popover-radius);
+  box-shadow: var(--popover-shadow);
+
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--arrow-position);
+    margin: 0 var(--arrow-position-x);
+    width: 0;
+    height: 0;
+    border-left: var(--popover-before-width) solid transparent;
+    border-right: var(--popover-before-width) solid transparent;
+    border-bottom: var(--popover-before-width) solid var(--popover-bc);
+    @media (max-width: 576px) {
+      content: none;
+    }
+  }
+
+
+}

package/dist/assets/scss-old/angular-material/_popups.scss

@@ -0,0 +1,125 @@
+.main-popup{
+  --popup-radius: 15px;
+  --popup-padding: 1rem;
+  --popup-width: inherit;
+  --popup-max-width: inherit;
+  --popup-min-width: inherit;
+  --popup-height: inherit;
+  --popup-max-height: inherit;
+  --popup-min-height: inherit;
+  --popup-title-bc: var(--light-gray);
+  --popup-title-height: 3.75rem;
+  --popup-title-padding: 1rem;
+  --popup-title-fc: var(--black);
+  --popup-title-fs: 1rem;
+  --popup-title-fw: var(--font-medium);
+
+
+  width: var(--popup-width) !important;
+  min-width: var(--popup-min-width) !important;
+  max-width: var(--popup-max-width) !important;
+  height: var(--popup-height) !important;
+  min-height: var(--popup-min-height) !important;
+  max-height: var(--popup-max-height) !important;
+
+  &.confirm-dialog{
+    --popup-max-width: 450px;
+    --popup-width: 100%;
+  }
+
+  .mat-dialog-container{
+    border-radius: var(--popup-radius);
+    padding: 0;
+  }
+  .popup-container{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: calc(100vh - 2rem);
+  }
+  .dialog-container{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .mat-dialog-title{
+    margin: 0 !important;
+    background-color: var(--popup-title-bc);
+    padding: var(--popup-title-padding);
+    min-height: var(--popup-title-height);
+    height: var(--popup-title-height);
+    .no-title{
+      --popup-title-bc: var(--white);
+    }
+    ds-button::part(base) {
+      --default-size: 35px;
+      --btn-min-width: var(--default-size);
+      --btn-width: var(--default-size);
+      --btn-height: var(--default-size);
+    }
+
+    h3{
+      font-size: var(--popup-title-fs);
+      font-weight: var(--popup-title-fw);
+      color: var(--popup-title-fc);
+      margin: 0;
+      flex-grow: 1;
+    }
+
+  }
+
+  .mat-dialog-content{
+    border-top: 0;
+    padding: var(--popup-padding);
+    overflow-y: auto;
+    //max-height: initial;
+    margin: 0;
+    flex-grow: 1;
+    max-height: initial;
+
+    .default-box{
+      border: 0 !important;
+      padding: 0 !important;
+    }
+  }
+
+  .mat-dialog-actions{
+    background-color:var(--white);
+    margin-bottom: 0 !important;
+    padding: 1.5rem 1rem;
+    min-height: auto;
+
+  }
+}
+
+
+@media (max-width: 576px){
+  .main-popup {
+    --popup-width: 100%;
+    --popup-max-width: 100%;
+    --popup-height: 100%;
+    --popup-radius: 0;
+
+    bottom: 0 !important;
+    position: absolute !important;
+    &.confirm-dialog{
+      --popup-height: auto;
+      --popup-max-width: none;
+      --popup-radius: 15px 15px 0 0;
+    }
+
+
+    .popup-container{
+      max-height: 100vh;
+    }
+
+    .mat-dialog-content {
+      max-height: none;
+
+    }
+    .mat-dialog-container {
+      overflow: hidden !important;
+    }
+  }
+}

package/dist/assets/scss-old/angular-material/_radiobox.scss

@@ -0,0 +1,40 @@
+.mat-radio-group{
+  grid-gap: 1rem;
+}
+
+.mat-radio-button{
+  --radio-border-width: 2px;
+  --radio-border: var(--gray);
+  --radio-border-active: var(--coral);
+  --radio-bg: var(--white);
+  --radio-bg-active: var(--coral);
+  --radio-size: 24px;
+  --radio-radius: 50%;
+
+  &.mat-radio-checked {
+    --radio-border: var(--radio-border-active);
+    --radio-bg: var(--radio-bg-active);
+
+  }
+  .mat-radio-label{
+    gap: 0.5rem;
+    .mat-radio-container {
+      width: var(--radio-size);
+      height: var(--radio-size);
+      .mat-radio-outer-circle {
+        width: inherit;
+        height: inherit;
+        border-color: var(--radio-border);
+      }
+      .mat-radio-inner-circle {
+        width: inherit;
+        height: inherit;
+        transform: scale(0.7);
+        background-color: var(--radio-bg);
+      }
+    }
+    .mat-radio-label-content{
+      padding: 0;
+    }
+  }
+}

package/dist/assets/scss-old/angular-material/_sidenav.scss

@@ -0,0 +1,46 @@
+.main-sidenav{
+  --sidenav-width: 500px;
+  --sidenav-title-bc: var(--light-gray);
+  --sidenav-title-height: 3.75rem;
+  --sidenav-title-padding: 1rem;
+  --sidenav-title-fc: var(--black);
+  --sidenav-title-fs: 1rem;
+  --sidenav-title-fw: var(--font-medium);
+
+  min-height: 100%;
+  max-height: 100vh;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: var(--sidenav-width);
+
+  @media (max-width: 768px){
+    --sidenav-width: 100vw !important;
+  }
+  .sidenav-title{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--sidenav-title-padding);
+    height: var(--sidenav-title-height);
+    background-color: var(--sidenav-title-bc);
+    gap: 1rem;
+
+    h3{
+      font-size: var(--sidenav-title-fs);
+      font-weight: var(--sidenav-title-fw);
+      color: var(--sidenav-title-fc);
+      margin: 0;
+      flex-grow: 1;
+    }
+  }
+  .sidenav-body{
+    flex-grow: 1;
+    overflow: auto;
+    padding: 1rem;
+    border-top: 1px solid  rgba(var(--rgb-light-gray),.46);
+  }
+  .sidenav-footer{
+    padding: 1rem;
+  }
+}

package/dist/assets/scss-old/angular-material/_slider.scss

@@ -0,0 +1,94 @@
+mat-slider {
+  width: 100%;
+  .video-controls & {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding: 0;
+  }
+  &.mat-slider-horizontal {
+    .mat-slider-wrapper {
+      height: 10px;
+      .volume-change &{
+        height: 5px;
+      }
+      .video-controls & {
+        left: 0;
+        right: 0;
+        top: 15px;
+      }
+
+      .mat-slider-track-wrapper {
+        height: 10px;
+        width: 100%;
+        .volume-change &{
+          height: 5px;
+        }
+        .mat-slider-track-background {
+          background-color: var(--light-gray);
+          height: 10px;
+          .volume-change &{
+            height: 5px;
+          }
+        }
+
+        .mat-slider-track-fill {
+          background-color: var(--coral);
+          height: 10px;
+          .volume-change &{
+            height: 5px;
+          }
+        }
+      }
+
+      .mat-slider-ticks-container {
+        display: none;
+      }
+
+      .mat-slider-thumb-container {
+        .mat-slider-thumb {
+          right: -12px;
+          bottom: -12px;
+          width: 24px;
+          height: 24px;
+          border: 0;
+          border-radius: 0;
+          background-color: var(--purple);
+          transform: scale(1) !important;
+          .video-controls & {
+            right: -8px;
+            bottom: -8px;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+          }
+          .volume-change & {
+            right: -5px;
+            bottom: -5px;
+            width: 10px;
+            height: 10px;
+          }
+        }
+
+        .mat-slider-thumb-label {
+          display: flex;
+          opacity: 1;
+          transform: none;
+          bottom: -40px;
+          top: auto;
+          background: transparent;
+          .video-controls & {
+            display: none !important;
+          }
+          .mat-slider-thumb-label-text {
+            opacity: 1;
+            transform: none;
+            color:var(--dark-gray);
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+}