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

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

@@ -0,0 +1,384 @@
+// mat-select-panel-wrap
+.mdc-menu-surface, .mat-mdc-menu-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: 100%;
+  --select-line-height: inherit;
+
+  --mdc-theme-primary: var(--select-panel-fc-active);
+
+  border-radius: var(--box-radius) !important;
+  box-shadow: var(--box-shadow) !important;
+  margin-top: 0.3rem;
+  padding: 0 !important;
+
+  .mat-mdc-menu-content{
+    padding: 0;
+  }
+
+  .mdc-list-item, .mat-mdc-menu-item{
+    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;
+    }
+    &:hover{
+      --select-panel-bg-odd: var(--off-white);
+    }
+    &.mat-mdc-option-active, &.mat-mdc-selected{
+      --select-panel-fc: var(--select-panel-fc-active);
+      --select-panel-fw: var(--select-panel-fw-active);
+    }
+
+    &__primary-text{
+      flex-grow: 1;
+      line-height: 1.2;
+      unicode-bidi: plaintext;
+      text-align: left;
+      direction: ltr;
+      [dir=rtl] & {
+        text-align: right;
+        direction: rtl;
+      }
+    }
+
+    .mat-pseudo-checkbox-checked:after{
+      color: var(--green);
+    }
+  }
+}
+
+
+
+////mat-menu-panel
+//
+//.mat-mdc-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-mdc-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-mdc-menu-content {
+//      border: 0;
+//      &:before {
+//        display: none;
+//      }
+//    }
+//  }
+//
+//  &.actions-menu{
+//    margin: -35px 35px;
+//    width: 130px;
+//    border-radius: 0;
+//    .mat-mdc-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-mdc-menu-content {
+//      min-width: 2.8125rem;
+//
+//      &:before {
+//        display: none;
+//      }
+//
+//      button {
+//        display: flex;
+//        align-items: center;
+//        justify-content: center;
+//      }
+//    }
+//  }
+//
+//  .mat-mdc-menu-content {
+//
+//    padding: 0 !important;
+//
+//    .mat-mdc-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);
+//      }
+//    }
+//
+//
+//  }
+//}
+//
+///* TODO(mdc-migration): The following rule targets internal classes of autocomplete that may no longer apply for the MDC version.*/
+///* TODO(mdc-migration): The following rule targets internal classes of autocomplete that may no longer apply for the MDC version.*/
+///* TODO(mdc-migration): The following rule targets internal classes of autocomplete that may no longer apply for the MDC version.*/
+//.mat-autocomplete-panel{
+//  border-radius: var(--box-radius) !important;
+//  box-shadow: var(--box-shadow) !important;
+//  min-width: var(--select-panel-min-width);
+//
+//  .mat-mdc-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-mdc-selected{
+//      color: var(--coral) !important;
+//      //background-color: var(--light-gray) !important;
+//    }
+//
+//    &.single-select{
+//      height: 65px;
+//
+//
+//      &.mat-mdc-selected{
+//        .radio{
+//          border-color: var(--coral);
+//          &:before{
+//            transform: scale(.7);
+//          }
+//        }
+//      }
+//      /* TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version.*/
+//      .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;
+//      /* TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version.*/
+//      .mat-option-text{
+//        display: flex;
+//        align-items: center;
+//      }
+//      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+//      .radio, .mat-checkbox-inner-container{
+//        display: none;
+//      }
+//
+//    }
+//
+//    .mat-mdc-checkbox{
+//      width: 100%;
+//      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+//      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+//      .mat-checkbox-layout{
+//        width: 100%;
+//        /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+//        .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/angular-material/_popups.scss

@@ -0,0 +1,127 @@
+.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);
+
+  --mdc-dialog-container-shape: var(--popup-radius);
+
+
+  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-mdc-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-mdc-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-mdc-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-mdc-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-mdc-dialog-content {
+      max-height: none;
+
+    }
+    .mat-mdc-dialog-container {
+      overflow: hidden !important;
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+.mat-mdc-radio-group{
+  grid-gap: 1rem;
+  display: flex;
+}
+
+
+.mat-mdc-radio-button.mat-accent{
+  --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%;
+
+
+
+  --mdc-radio-disabled-selected-icon-color: #000;
+  --mdc-radio-disabled-unselected-icon-color: #000;
+  --mdc-radio-unselected-focus-icon-color: var(--dark-gray);
+  --mdc-radio-unselected-hover-icon-color: var(--dark-gray);
+  --mdc-radio-unselected-icon-color: var(--radio-border);
+  --mdc-radio-unselected-pressed-icon-color: var(--radio-border);
+  --mdc-radio-selected-focus-icon-color: var(--radio-border-active);
+  --mdc-radio-selected-hover-icon-color: var(--radio-border-active);
+  --mdc-radio-selected-icon-color: var(--radio-border-active);
+  --mdc-radio-selected-pressed-icon-color: var(--radio-border-active);
+  --mat-mdc-radio-ripple-color: #000;
+  --mat-mdc-radio-checked-ripple-color: var(--radio-border-active);
+
+  --mdc-radio-state-layer-size: 20px;
+
+  .mdc-form-field{
+    gap: .5rem;
+    >label{
+      font: inherit;
+      padding: 0;
+    }
+  }
+
+  .mat-mdc-radio-touch-target{
+    height: var(--mdc-radio-state-layer-size);
+    width: var(--mdc-radio-state-layer-size);
+  }
+
+  .mdc-radio{
+    transform: scale(1.2);
+  }
+
+  //.mdc-radio{
+  //  width: var(--mdc-radio-state-layer-size);
+  //  min-width: var(--mdc-radio-state-layer-size);
+  //  height: var(--mdc-radio-state-layer-size);
+  //  padding: 0;
+  //
+  //  &__background{
+  //    width: var(--mdc-radio-state-layer-size) !important;
+  //    min-width: var(--mdc-radio-state-layer-size) !important;
+  //    height: var(--mdc-radio-state-layer-size) !important;
+  //  }
+  //
+  //  &__inner-circle {
+  //    background: var(--mdc-radio-selected-icon-color);
+  //  }
+  //}
+
+}

package/dist/assets/scss/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;
+  }
+}