@annalib/anna-core 1.0.0 → 1.0.2

package/src/lib/anna-common-scss/_customDropdown.scss

@@ -0,0 +1,129 @@
+@import "./colors", "./fonts";
+
+//Common styling
+#dropdown-trigger {
+  height: 1.875rem;
+  background: white;
+  border-radius: 2px;
+  border: 1px solid $lightGray-8;
+  width: 100%;
+  text-align: left;
+  &:disabled{
+    background-color: $gray74;
+    opacity: 0.5;
+    & .placeholder, .icon {
+      color: #000;
+    }
+  }
+}
+
+.placeholder {
+  color: $gray74;
+  @include fonts(Roboto, 14px, normal, normal, normal, normal, normal);
+}
+
+// #dropdown-trigger:disabled .placeholder {
+//   color: #000;
+// }
+
+.icon {
+  font-size: 1.125rem;
+  float: right;
+}
+
+.search-bar {
+  margin: 9px 7px 8px 7px;
+  border: 1px solid $pinkSwan;
+  height: 1.875rem;
+  border-radius: 2px;
+  input {
+    outline: none;
+    border: none;
+    position: relative;
+    bottom: 4px;
+    width: calc(100% - 29px);
+  }
+
+  .search-icon {
+    font-size: 1.125rem;
+    color: $lightGray-7;
+    margin: 5px;
+  }
+
+  .close-icon{
+    cursor: pointer;
+  }
+}
+
+ul {
+  overflow-y: auto;
+  padding-left: 0;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  max-height: calc(50vh - 80px) !important;
+  // min-heightw: 70px;
+}
+
+li {
+  list-style-type: none;
+  cursor: pointer;
+  padding-inline: 6px;
+  @include fonts(Roboto, 14px, normal, normal, normal, 2.14, normal);
+  color: #4a4a4a;
+  @extend .ellipsify;
+  width: 100%;
+}
+
+ul::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+ul::-webkit-scrollbar-track {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+ul::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+li:hover {
+  // color: white;
+  background: #ebebeb;
+}
+
+li.active {
+  color: white;
+  background: $primary-color;
+}
+
+span.selected-item{
+    background: transparent;
+    @include fonts(Roboto, 14px, normal, normal, normal, normal, normal);
+    color: #4a4a4a;
+    @extend .ellipsify;
+    width: calc(100% - 22px);
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.ellipsify{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+::ng-deep .cdk-overlay-container{
+  z-index: 1051;
+}
+
+::ng-deep .multi-select-dropdown + div .mat-menu-panel,
+::ng-deep .single-select-dropdown + div .mat-menu-panel{
+  min-width: 100px !important;
+  max-width: 100%;
+  min-height: 30px !important;
+  overflow-y: hidden;
+  max-height: 50vh;
+}

package/src/lib/anna-common-scss/_dashboard-partials.scss

@@ -0,0 +1,104 @@
+.dashboard-heading {
+  color: #268bff;
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 2.5px;
+}
+
+@mixin user-card($bgColor) {
+  background-color: $bgColor;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  cursor: default;
+  transition: 150ms;
+  position: relative;
+  border-radius:0.25rem;
+  padding: 1.5rem;
+}
+
+//orderCard issue 2
+// .user-card:hover {
+// box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+// top: -2px;
+// }
+
+@mixin view_link {
+  float: right;
+  color: #268bff;
+  cursor: pointer;
+}
+
+@mixin info-box {
+  background-color: #c7e1ff;
+  border-radius: $fs-4;
+  padding: 0.1875rem 0.5rem 0 0.5rem;
+  @include fonts(Roboto, 0.9375rem, normal, 500, normal, 1.25, 0.088rem);
+}
+
+.noData {
+  background-color: lightgrey;
+  padding: 0.5em;
+  width: 40%;
+  text-align: center;
+  margin: 12.5em auto;
+  border-radius: 0.2em;
+}
+
+@mixin svg-parent-card($cardHeight, $cardBgColor) {
+  max-width: 100%;
+  height: $cardHeight;
+  width: 100%;
+  background-color: $cardBgColor;
+  border: none;
+  outline: none;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+@mixin svg-content-placeholder($backgroundGradient, $clipPath) {
+  animation: linear 1s placeHolderShimmer infinite;
+  background: $backgroundGradient;
+  background-size: 800px 104px;
+
+  width: 100%;
+  height: 100%;
+  -webkit-clip-path: url($clipPath);
+  clip-path: url($clipPath);
+  // 	Safari render fix
+  transform: translateZ(0);
+}
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+
+:host::ng-deep.btn-secondary {
+  box-shadow: none;
+  border: 1px solid lightgray;
+}
+:host ::ng-deep .ui-select-match-text {
+  padding-top: 0;
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+@mixin material-icons-and-expand-icon {
+  color: #268bff;
+  position: absolute;
+  float: right;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+@mixin dropdownContainer {
+  position: relative;
+  margin:0 0.5625rem 0 0;
+  display: flex;
+  flex-direction: column;
+}

package/src/lib/anna-common-scss/_date-picker-form.scss

@@ -0,0 +1,87 @@
+@import "./fonts", "./colors", "./ng-select";
+
+.input-group-append {
+  margin: auto;
+  width: 25px;
+  background-color: #d8d8d8;
+}
+
+.input-group {
+  background-color: #fff;
+}
+
+.input-group > .form-control {
+  width: 150px;
+  font-size: 12px;
+  border: none;
+  background-color: white;
+  border-right: 1px solid #d4d4d4;
+  cursor: pointer;
+}
+
+.datepicker-form-group {
+  border-radius: 2px;
+  border: 1px solid #d6d6d6;
+}
+
+:host ::ng-deep.ngb-dp-arrow.right {
+  width: unset !important;
+}
+
+::ng-deep .ngb-dp-day.disabled {
+  opacity: 0.5;
+}
+
+.form-control {
+  padding: 7px;
+  color: #000;
+}
+
+:host ::ng-deep .bg-primary {
+  background-color: #8bac2a !important;
+  &:focus {
+    outline: none;
+  }
+}
+
+.form-control {
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+textarea:focus,
+input:focus {
+  outline: none;
+}
+
+::ng-deep .custom-select {
+  cursor: pointer;
+  &:focus {
+    border-color: unset;
+    outline: 0;
+    box-shadow: unset;
+  }
+}
+
+.icon-width {
+  font-size: 16px;
+  cursor: pointer;
+  width: 25px;
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+}
+
+input.form-control:disabled {
+  background-color: #fff !important;
+}
+
+::ng-deep app-single-select-dropdown ng-select.custom-dropdown {
+  width: 19.5rem !important;
+}
+
+.form-control {
+  background-color: transparent !important;
+}