@annalib/anna-core 0.0.0-watch

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

@@ -0,0 +1,188 @@
+@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+    padding: $padding-y $padding-x;
+    font-size: $font-size;
+    line-height: $line-height;
+    border: 0;
+    @include border-radius($border-radius);
+  
+    &::before {
+      width: ($padding-y * 2) + ($font-size * $line-height);
+      height: ($padding-y * 2) + ($font-size * $line-height);
+      padding: $padding-y 0;
+      font-size: $font-size;
+      line-height: $line-height;
+      @include border-radius($border-radius);
+    }
+  
+    span {
+      margin-left: ($padding-y * 2) + ($font-size * $line-height);
+    }
+  
+    &.icon {
+      width: ($padding-y * 2) + ($font-size * $line-height);
+      height: ($padding-y * 2) + ($font-size * $line-height);
+    }
+  }
+  
+  @mixin avatar($width, $status-width) {
+    position: relative;
+    display: inline-block;
+    width: $width;
+  
+    .img-avatar {
+      width: $width;
+      height: $width;
+    }
+  
+    .avatar-status {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      display: block;
+      width: $status-width;
+      height: $status-width;
+      border: 1px solid #fff;
+      border-radius: 50em;
+    }
+  }
+  
+  @mixin borders($borders) {
+    @each $border in $borders {
+      $direction: nth($border, 1);
+      @if $direction == "all" {
+        $size: map-get(map-get($borders, $direction), size);
+        $style: map-get(map-get($borders, $direction), style);
+        $color: map-get(map-get($borders, $direction), color);
+        border: $size $style $color;
+      } @else if $direction == "top" {
+        $size: map-get(map-get($borders, $direction), size);
+        $style: map-get(map-get($borders, $direction), style);
+        $color: map-get(map-get($borders, $direction), color);
+        border-top: $size $style $color;
+      } @else if $direction == "right" {
+        $size: map-get(map-get($borders, $direction), size);
+        $style: map-get(map-get($borders, $direction), style);
+        $color: map-get(map-get($borders, $direction), color);
+        border-right: $size $style $color;
+      } @else if $direction == "bottom" {
+        $size: map-get(map-get($borders, $direction), size);
+        $style: map-get(map-get($borders, $direction), style);
+        $color: map-get(map-get($borders, $direction), color);
+        border-bottom: $size $style $color;
+      } @else if $direction == "left" {
+        $size: map-get(map-get($borders, $direction), size);
+        $style: map-get(map-get($borders, $direction), style);
+        $color: map-get(map-get($borders, $direction), color);
+        border-left: $size $style $color;
+      }
+    }
+  }
+  
+  @mixin sidebar-width($borders, $width) {
+    $sidebar-width: $width;
+  
+    @each $border in $borders {
+      $direction: nth($border, 1);
+      @if $direction == "all" {
+        $size: map-get(map-get($borders, $direction), size);
+        $sidebar-width: ($sidebar-width - (2 * $size));
+      } @else if $direction == "right" {
+        $size: map-get(map-get($borders, $direction), size);
+        $sidebar-width: $sidebar-width - $size;
+      } @else if $direction == "left" {
+        $size: map-get(map-get($borders, $direction), size);
+        $sidebar-width: $sidebar-width - $size;
+      }
+      width: $sidebar-width;
+    }
+  }
+  
+  @mixin bg-variant($parent, $color) {
+    #{"" + $parent} {
+      @include border-radius(
+        $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner
+      );
+      color: #fff !important;
+      background-color: $color !important;
+    }
+    a#{"" + $parent} {
+      @include hover-focus {
+        background-color: darken($color, 10%);
+      }
+    }
+  }
+  
+  @mixin card-accent-variant($color) {
+    border-top-width: 2px;
+    border-top-color: $color;
+  }
+  
+  @mixin tabs-style($color) {
+    display: inline-block;
+    margin-right: 20px;
+    font-size: 16px;
+    color: $color;
+  }
+  
+  @mixin fit-content() {
+    width: fit-content !important;
+    width: -moz-max-content !important;
+  }
+  
+  @mixin fit-content-height() {
+    height: fit-content !important;
+    height: -moz-max-content !important;
+  }
+  
+  @mixin label($fontSize, $fontWeight, $fontStyle, $letterSpacing, $color) {
+    font-family: Roboto;
+    font-size: $fontSize;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: $fontStyle;
+    line-height: normal;
+    letter-spacing: $letterSpacing;
+    color: $color;
+  }
+  
+  @mixin modal-btn($background-color) {
+    width: 100%;
+    background-color: $background-color;
+    color: white;
+    border-radius: initial;
+  }
+  
+  @mixin OrderListingTableStyling {
+    width: 100%;
+    tr {
+      border: 1px solid #d4d4d4;
+      border-top: none;
+      th {
+        color: #4a4a4a;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.3px;
+        vertical-align: middle;
+        text-align: left;
+        // position: sticky;
+        // // z-index: 101 !important;
+        // top: 0px;
+        padding: unset;
+        height: 30px;
+        // line-height: 30px;
+        border-top: 1px solid #d4d4d4;
+      }
+      &.header-row th {
+        background-color: #ededed;
+      }
+      td {
+        font-size: 12px;
+        padding: 2px 0px 3px;
+        vertical-align: middle;
+        text-align: left;
+        color: #000000;
+        letter-spacing: 0px;
+      }
+    }
+  }
+  

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

@@ -0,0 +1,37 @@
+.modal-header {
+  height: 72px;
+  background-color: #3f4961;
+  background-position: center center;
+  background-size: cover;
+  font-weight: 300;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.modal-title {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 400 !important;
+  position: absolute;
+  top: 40px;
+  text-align: left;
+}
+
+.modal-dialog {
+  font-family: Roboto !important;
+  top: 100px !important;
+  margin: 0 auto;
+}
+
+.modal-content {
+  border-radius: 7px;
+  width: fit-content;
+  min-width: 100%;
+}
+
+.modal-body {
+  padding: 24px;
+}
+.fade {
+  transition: none !important;
+}

package/src/lib/anna-common-scss/_ng-select.scss

@@ -0,0 +1,176 @@
+/***COMMON NG-SELECT STYLING FOR ALL SIZES **/
+::ng-deep .ng-select {
+  & .ng-arrow,
+  & .ng-arrow:hover {
+    border-color: black transparent transparent !important;
+    opacity: 1 !important;
+  }
+
+  &.ng-select-opened .ng-arrow,
+  &.ng-select-opened .ng-arrow:hover {
+    border-color: transparent transparent black !important;
+    opacity: 1 !important;
+    padding-top: 2px;
+  }
+
+  & .ng-select-container {
+    border: 1px solid #b7b7b7 !important;
+    border-radius: 2px;
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  &.custom-error-ng-select .ng-select-container {
+    border: 1px solid #f86c6b;
+  }
+
+  &.ng-select-disabled > .ng-select-container {
+    background-color: #bdbdbd;
+    opacity: 0.5;
+    cursor: not-allowed;
+
+  }
+
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    & .ng-option-label {
+      font-weight: normal !important;
+    }
+    &:hover {
+      background-color: #ebebeb;
+      color: #4a4a4a;
+    }
+    &:not(:hover){
+      background-color: #fff;
+    }
+    &.ng-option-selected  {
+      background-color: #268bff;
+      color: #fff;
+    }
+  }
+
+  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
+    border-color: lightgray;
+    box-shadow: none;
+  }
+
+}
+
+/*****EXTRA SMALL NG STYLE******/
+::ng-deep .ng-select.custom-xs-ng-select {
+  & .ng-select-container {
+    min-height: 22px !important;
+    font-size: 12px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 22px !important;
+  }
+
+  & .ng-dropdown-panel .scroll-host {
+    font-size: 12px !important;
+  }
+
+  & .ng-arrow-wrapper {
+    padding-top: 2px !important;
+  }
+
+  &.ng-select-opened,
+  &.ng-select-bottom,
+  &.ng-select-top {
+    & .ng-select-container {
+      padding-top: 6px !important;
+    }
+  }
+  &.non-searchable {
+    &.ng-select-opened,
+    &.ng-select-bottom,
+    &.ng-select-top {
+      & .ng-select-container {
+        padding-top: 4px !important;
+      }
+    }
+  }
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    padding: 3px 10px;
+  }
+}
+
+/**SMALL NG SELECT STYLE***/
+::ng-deep .ng-select.custom-sm-ng-select {
+  & .ng-select-container {
+    min-height: 1.5625rem !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 1.5625rem !important;
+  }
+
+  &.ng-select-opened,
+  &.ng-select-bottom,
+  &.ng-select-top {
+    & .ng-select-container {
+      padding-top: 8px !important;
+    }
+  }
+  &.non-searchable {
+    &.ng-select-opened,
+    &.ng-select-bottom,
+    &.ng-select-top {
+      & .ng-select-container {
+        padding-top: 8px !important;
+      }
+    }
+  }
+  & .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    padding: 4px 10px;
+  }
+}
+
+/**MEDIUM NG SELECT STYLE***/
+::ng-deep .ng-select.custom-md-ng-select {
+  & .ng-select-container {
+    min-height: 30px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 1.875rem !important;
+  }
+}
+
+/**MEDIUM NG SELECT STYLE -2 !!! with 32px height !!!***/
+::ng-deep .ng-select.custom-md-32-ng-select {
+  & .ng-select-container {
+    min-height: 32px !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 32px !important;
+  }
+}
+
+/**LARGE NG SELECT STYLE***/
+::ng-deep .ng-select.custom-lg-ng-select {
+  & .ng-select-container {
+    min-height: 2.8125rem !important;
+  }
+
+  &.ng-select-single .ng-select-container {
+    height: 2.8125rem !important;
+  }
+}
+
+
+:host::ng-deep .custom-arrow.ng-select.ng-select-opened>.ng-select-container{
+  .ng-arrow{
+   border-width: 0 4px 4px;
+   position: relative;
+   bottom: 1px;
+ }
+}
+
+:host::ng-deep .custom-arrow.ng-select .ng-arrow-wrapper .ng-arrow{
+ border-width: 4px 4px 2.5px;
+ position: relative;
+ bottom: 1px;
+}

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

@@ -0,0 +1,30 @@
+@import "./fonts", "./colors";
+
+.sort-btn{
+  background: white;
+  border: none;
+  border-right: 1px solid #1b88ff;
+  text-decoration: underline;
+  @include fonts(Roboto, 14px, normal, normal, normal, 1.07, normal);
+  color: #1b88ff;
+  cursor: pointer;
+  flex: 1;
+  text-align: center;
+}
+
+.sort-btn:last-of-type{
+  border-right: none;
+}
+
+.sort-btn.active{
+  color: #202b47;
+  text-decoration: none;
+}
+
+p.sort-container{
+  margin-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e6e6e6;
+  margin-bottom: 0;
+  display: flex;
+}

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

@@ -0,0 +1,84 @@
+
+.switchBtn {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 20px;
+  font-size: 12px;
+  top: 3px;
+}
+
+.switchBtn input {
+  display: none;
+}
+
+.slide {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  -webkit-transition: .4s;
+  transition: .4s;
+  padding: 4px 4px 4px 22px;
+  line-height: 1;
+  border: solid 1px rgba(0, 0, 0, 0.1);
+}
+
+.slide:before {
+  position: absolute;
+  content: "";
+  width: 18px;
+  height: 18px;
+  background-color: #ffffff;
+  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05);
+  border: solid 0.5px rgba(0, 0, 0, 0.1);
+  left: 0px;
+  bottom: 0px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  color: #999999;
+}
+
+input:checked + .slide {
+  background-color: #44db5e;
+  padding-left: 7px;
+  color: #fff;
+  line-height: 1;
+}
+
+input:focus + .slide {
+  box-shadow: 0 0 1px #01aeed;
+}
+
+input:checked + .slide:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+  left: 10px;
+}
+
+.slide.round {
+  border-radius: 15.5px;
+}
+
+.slide.round:before {
+  border-radius: 50%;
+}
+
+.has-error {
+  transition: all linear 0.5s;
+  color: red !important;
+}
+
+.data-label {
+  font-size: 11px;
+  color: #666666;
+  letter-spacing: 0.2px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

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

@@ -0,0 +1 @@
+@import "./colors", "./filters", "./fonts", "./sort", "./application-spacing";