@annalib/anna-core 0.0.7 → 1.0.2

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

@@ -0,0 +1,107 @@
+$primary-color: #268bff;
+$background-white: #ffffff;
+$lightGray: #d3d3d3;
+$lightGray-1: #f1f1f1;
+$lightGray-2: #b3b3b3;
+$lightGray-3: #ededed;
+$lightGray-4: #d4d4d4;
+$lightGray-5: #e6e6e6;
+$lightGray-6: #c8c8c8;
+$lightGray-7: #9b9b9b;
+$lightGray-9: #d9e1e6;
+$lightGray-8: #b7b7b7;
+$dimGray: #747474;
+$lightDimGray: #666666;
+$coralRed: #ff4747;
+$greenCyan: #00c853;
+$bookedColor: #9b1b93;
+$orderedColor: #d780d1;
+$billableColor: #f2bdef;
+$nationalColor: #f5dd31;
+$localColor: #8db72e;
+$lavenderBlue: #c7e1ff;
+$aliceBlue: #e3f0ff;
+$dodgerBlue: #1582ff;
+$lightGrey: #d6d6d6;
+$coldTurkey: #ceb6b6;
+$lightSilver: #d8d8d8;
+$GraythirtySeven: #5e5e5e;
+$charcoal: #4a4a4a;
+$sellerReviewColor: #f3bd18;
+$buyerReviewColor: #1565c0;
+$reviewCompleteColor: #00c853;
+$recoveredPreemptionColor: #0071ce;
+$deepSkyBlue: #00b0ff;
+$licorice: #2e384d;
+$navyBlue: #0071ce;
+$nobelGray: #b7b6b6;
+$whiteSmoke: #f7f6f6;
+$gray: #979797;
+$paleBlue: #c2cfd6;
+$lightViolet: #9169fc;
+$dimViolet: #e5dbff;
+$darkViolet: #555099;
+$whisper: #e9e9e9;
+$lynxWhite: #f7f7f7;
+$lightAliceBlue: #e5f1ff;
+$veryLightGrey: #cfcfcf;
+$darkCharcoal: #333333;
+$noRevisionFound: #f47228;
+$redOrange: #f44336;
+$DRRBgColor: #edecec;
+$darkYellowWarning: #f3c639;
+$lightYellow: #fff8e3;
+$filterRadioContainer: #f4f4f4;
+$oliveGreen: #8bac2a;
+$calendarLabel: #222b45;
+$olivedrab: #6b8e23;
+$redOrange: #fe3824;
+$chineseSilver: #cccccc;
+$grey: #767676;
+$primary-success: #47d490;
+$secondary-success: #ebf6f1;
+$primary-warning: #f3c639;
+$secondary-warning: #fff8e3;
+$primary-dark: #90a4ae;
+$secondary-dark: #ebedee;
+$primary-danger: #fc8383;
+$secondary-danger: #ffeded;
+$Gray94: #f0f0f0;
+$whisper: #ededed;
+$whiteSmoke2: #f4f4f4;
+$pinkSwan: #b5b5b5;
+$matterhorn: #4f4f4f;
+$lightGrey: #d4d4d4;
+$gray74: #bdbdbd;
+$gray86: #dbdbdb;
+$darkBlueShade: #222b45;
+$green: #8bac2a;
+$darkPurpleShade: #555099;
+$pattensBlue: #d8eaff;
+$quartz: #dddceb;
+$darkGray: #a7a7a7;
+$darkGray1: #cbcbcb;
+$awaitingSellerReview: #f7f2d1;
+$awaitingSellerReviewBorder: #dec30b;
+$amber: #ffc107;
+$whiteSmoke3: #efefef;
+$greyChateau: #a2a8ad;
+$roseBud: #f9b3ae;
+$paleRed: #fde4e3;
+$redOrange3: #f44336;
+$redOrange4: #fe3824;
+$gray43: #6e6e6e;
+$dodgerBlue2: #4099ff;
+$fruitSalad: #43a047;
+$nero: #212121;
+$darkGray2: #a4a4a4;
+$pinkSwan: #b7b7b7;
+$blue: #d8eaff;
+$lightBlue: #eff6ff;
+$sunsetOrange: #ff5353;
+$redShade: #ff5252;
+$lightBlueShade: #d6dcff;
+$blueBerry: #536dfe;
+$darkPink: #be489d;
+$lightPinkShade: #f4e7f2;
+$sellerGroupChildRow: #F9F3F8;

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;
+}