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

package/dist/assets/scss/components/_toaster.scss

@@ -0,0 +1,109 @@
+.toast-container {
+  top: 12px !important;
+  right: 12px !important;
+  [dir=rtl] & {
+    left: 12px !important;
+    right: auto !important;
+  }
+  .ngx-toastr {
+    --toast-icon: "\e988";
+    --toast-icon-bc-color: var(--white);
+    --toast-icon-color: var(--black);
+    top: var(--toast-postion-top, 62px);
+    width: auto !important;
+    min-width: 320px;
+    max-width: 320px;
+    min-height: 82px;
+    padding: 1rem !important;
+    border-radius: var(--toast-radius, 6px) !important;
+    background-color:var(--white) !important;
+    color: var(--toast-title-color, black)!important;
+    height: auto;
+    border: 0;
+    margin: 0 0 10px!important;
+    display: grid !important;
+    //flex-direction: column;
+    column-gap: .75rem;
+    grid-template-areas: "icon title close"
+                          "icon message close";
+    // align-items: center;
+    //border-left: 7px solid transparent;
+    box-shadow: 0 13px 26px rgba(0, 0, 0, 0.11) !important;
+
+    &::before{
+      content: var(--toast-icon);
+      font-family: 'stc-font-icons';
+      min-width: 40px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      font-size: 1.5rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      color: var(--toast-icon-color);
+      background-color: var(--toast-icon-bc-color);
+      grid-area: icon;
+    }
+
+    &.toast-success{
+      --toast-icon: "\e93b";
+      --toast-icon-bc-color: rgba(var(--rgb-green), .1);
+      --toast-icon-color: var(--green);
+    }
+    &.toast-error{
+      --toast-icon: "\e945";
+      --toast-icon-bc-color: rgba(var(--rgb-red), .1);
+      --toast-icon-color: var(--red);
+    }
+
+    &.toast-warning{
+      --toast-icon: "\ea25";
+      --toast-icon-bc-color: rgba(var(--rgb-yellow), .1);
+      --toast-icon-color: var(--black);
+    }
+    &.toast-info{
+      --toast-icon: "\e928";
+      --toast-icon-bc-color: rgba(var(--rgb-sea-light), .1);
+      --toast-icon-color: var(--sea-light);
+    }
+
+
+    .toast-title, .toastr_title{
+      color: var(--black);
+      font-weight: var(--font-medium);
+      font-size: 0.85rem;
+      width: 200px;
+      grid-area: title
+    }
+
+
+
+    .toast-message, .toastr_message{
+      color: var(--dark-gray);
+      font-weight: var(--font-regular);
+      font-size: .85rem;
+      grid-area: message;
+      line-height: 1.3;
+      width: 200px;
+    }
+
+
+
+    .toast-close-button {
+      //position: absolute;
+      //right: 10px;
+      //top: 10px;
+      align-self: baseline;
+      float: none;
+      font-size: 20px;
+      color: var(--black);
+      text-shadow: none;
+      /* opacity: 0.8; */
+      font-weight: 400;
+      grid-area: close;
+    }
+
+  }
+}

package/dist/assets/scss/components/_user-list.scss

@@ -0,0 +1,40 @@
+.user-list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 1rem;
+  &--item {
+    min-width: auto;
+    border-radius: 4px;
+    //box-shadow: 0 7px 10px rgba(var(--rgb-black), .03);
+    background-color: var(--light-gray);
+  }
+  &--item::part(base) {
+    --user-card-align: center;
+    --user-card-padding: 0.5rem 1rem;
+
+    --user-card-gap: 0.5rem;
+  }
+  &--item::part(details) {
+    max-width: calc(100% - 50px - 0.6rem);
+    width: 100%;
+    overflow: hidden;
+
+    --user-details-gap: 0;
+  }
+  &--item::part(name) {
+    --user-fs: 0.75rem;
+    margin-bottom: 0.2rem;
+  }
+  &--item::part(name),
+  &--item::part(title) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    text-align: start;
+  }
+
+  ds-avatar::part(base) {
+    min-width: var(--default-size, 45px) !important;
+  }
+}