new-front-common-library 16.1.0 → 16.1.1-REF-1

package/assets/css/new-themes/_dark-theme-16.scss

@@ -0,0 +1,239 @@
+@import "../mat-palettes";
+
+.dark-theme {
+  .page-container {
+    background-color: $background-lvl3;
+  }
+
+  // TOOLBAR
+  .sub-toolbar {
+    background: $background-lvl2;
+
+    .icon {
+      color: $gray-background-lightest;
+    }
+
+    .title {
+      color: $gray-background-lightest;
+    }
+  }
+
+
+  // TOOLBAR END
+
+  //LINK
+
+  .mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label {
+    color: $blue-primary !important;
+  }
+
+  .mat-mdc-tab-link .mdc-tab__text-label {
+    color: $gray-background-lightest;
+  }
+
+  .mat-mdc-tab-link .mdc-tab-indicator__content--underline {
+    border-color: $blue-primary !important;
+  }
+
+  //END LINK
+
+  // TEXT
+  .label-consult label {
+    color: $gray-primary;
+  }
+
+  .span-consult span {
+    color: $gray-background-lightest;
+  }
+
+  .text {
+    color: $gray-background-lightest;
+  }
+
+  input {
+    color: $gray-light !important;
+  }
+
+  // END TEXT
+
+  // TITLE
+  .block-title, .block-title-icon {
+    color: $gray-background-lightest;
+  }
+
+  // END TITLE
+
+
+  //EXPANSION PANEL
+  .mat-expansion-panel-header {
+    background-color: $background-lvl2;
+  }
+
+  .mat-expansion-panel-body {
+    background-color: $background-lvl2;
+
+  }
+  .mat-expansion-panel-header-title {
+    color: $gray-background-lightest;
+  }
+
+  //END EXPANSION PANEL
+
+  //// NG-SELECT
+  //
+  .ng-select .ng-select-container {
+    background-color: $background-lvl3;
+    color: $gray-background-lightest;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
+    background-color: $background-lvl2;
+    color: whitesmoke;
+  }
+
+  .ng-dropdown-panel .ng-dropdown-panel-items, .ng-dropdown-panel.ng-select-multiple {
+    .ng-option.ng-option-marked,
+    .ng-option.ng-option-selected,
+    .ng-option.ng-option-selected.ng-option-marked,
+    .ng-dropdown-header {
+      background-color: $background-lvl3;
+      color: whitesmoke;
+    }
+  }
+
+  .ng-select.ng-select-focused .ng-select-container {
+    border-color: $gray-background-dark;
+    box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $gray-background-dark;
+  }
+
+  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    color: $gray-light;
+    background-color: $background-lvl2;
+  }
+
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    color: $gray-background-lightest;
+  }
+
+  // END NG-SELECT
+
+  .separator-line {
+    border-color: $gray-background-lightest;
+  }
+
+
+  //.navigation-menu {
+  //  background-color: $background-lvl2;
+  //}
+
+  //.expandable-row:hover {
+  //  background-color: transparent !important;
+  //}
+  //.expandable-row .inner-table-cell {
+  //  background: $background-lvl2;
+  //}
+
+  //.disable_ripple {
+  //  background-color: #EAEEF4 !important;
+  //}
+
+
+  //.cke_editable {
+  //  font-size: 12px !important;
+  //  font-family: Poppins;
+  //  background-color: $background-lvl2;
+  //  color: $gray-primary;
+  //}
+
+  //.hide-ckeditor-toolbar {
+  //  .cke_inner .cke_top {
+  //    display: none;
+  //  }
+  //}
+
+
+  //textarea {
+  //  color: $gray-light;
+  //}
+  //
+  //a {
+  //  color: $gray-background-lightest;
+  //}
+
+
+  //.contracts-details-page__container {
+  //  margin-top: 30px !important;
+  //  margin-left: 1% !important;
+  //  margin-right: 1% !important;
+  //}
+
+  //.table-header-text {
+  //  color: $gray-strong;
+  //  font-size: 14px;
+  //  padding-bottom: 10px;
+  //  font-weight: bold;
+  //}
+
+
+
+  //.consult-info-label {
+  //  color: $gray-primary;
+  //}
+  //
+  //.consult-info-data {
+  //  color: $gray-background-lightest;
+  //}
+  //
+
+  //.home-button button {
+  //  color: $gray-background-lightest;
+  //}
+
+  //.row-drop {
+  //  background-color: $background-lvl2;
+  //  border-color: $gray-background-lightest;
+  //  color: $gray-background-lightest;
+  //  font-size: 12px;
+  //}
+
+  //row-drop:hover {
+  //  background-color: adjust-color($background-lvl2, $lightness: 10%);
+  //}
+
+
+  //.confidential {
+  //  color: $gray-primary;
+  //}
+
+  //// DRAG & DROP
+
+  //.drag-drop-box {
+  //  color: $gray-background-lightest;
+  //}
+
+  //.drop-list {
+  //  color: $gray-background-lightest;
+  //}
+
+  //// END DRAG & DROP
+
+
+  //.see-more-text {
+  //  color: $black-bluish !important;
+  //  font-size: 12px;
+  //}
+
+
+  //.secondary-bis {
+  //  background: $gray-light !important;
+  //  color: #FFFFFF !important;
+  //}
+
+  //.icon-box-class {
+  //  color: $gray-background-lightest;
+  //}
+  //
+
+}

package/assets/css/new-themes/_global-16.scss

@@ -0,0 +1,408 @@
+@import "light-theme-16";
+@import "dark-theme-16";
+@import "../flex";
+@import "~@ng-select/ng-select/themes/default.theme.css";
+
+body, html {
+  font-family: 'Roboto', 'Source Sans Pro', 'Poppins', serif;
+}
+
+.page-container {
+  margin-top: 64px;
+  height: 100%;
+  overflow: auto;
+}
+
+// TOOLBAR
+.sub-toolbar {
+  height: 48px;
+
+  .title {
+    height: 52px;
+    font-weight: 900;
+    font-size: 24px;
+    line-height: 30px;
+    letter-spacing: 0.25px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+
+
+// END TOOLBAR
+
+// TEXT
+.label-consult label {
+  height: 8px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 8px;
+  letter-spacing: 0.25px;
+  text-transform: uppercase;
+}
+
+.span-consult span {
+  height: 18px;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0.25px;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden
+}
+
+// END TEXT
+
+// TITLE
+.block-title {
+  margin-bottom: 10px;
+
+  .title {
+    margin: 0;
+    height: 24px;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 25px;
+    letter-spacing: 0.25px;
+  }
+
+  .icon {
+    margin-right: 5px;
+  }
+}
+
+// END TITLE
+
+// CUSTOM SIZE ICON BOTTOM
+.small-icon-button, .medium-icon-button {
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0 !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  .mat-mdc-button-touch-target {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.small-icon-button > span {
+  font-size: 16px;
+}
+.medium-icon-button > span {
+  font-size: 24px;
+}
+
+// END CUSTOM SIZE ICON BOTTOM
+
+
+
+
+// BUTTON
+
+.app-container .mat-mdc-button.mat-mdc-button-base,
+.app-container .mat-mdc-raised-button.mat-mdc-button-base,
+.app-container .mat-mdc-unelevated-button.mat-mdc-button-base,
+.app-container .mat-mdc-outlined-button.mat-mdc-button-base {
+  height: 32px;
+}
+
+.action-button {
+  font-size: 14px;
+  line-height: 32px;
+  width: auto;
+  padding: 0 8px 0 8px;
+  background-color: $blue-primary !important;
+  border-color: $blue-primary !important;
+  color: white !important;
+}
+
+.action-button, .save-button, .cancel-button, .btn {
+  font-weight: 500 !important;
+  box-shadow: 0 2px 2px rgba(68, 93, 123, 0.16), inset 0 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
+  border-radius: 6px;
+}
+
+.cancel-button {
+  background-color: $red-primary !important;
+  color: white !important;
+  border-color: $red-primary !important;
+}
+
+.save-button {
+  background-color: $green-primary !important;
+  border-color: $green-primary !important;
+  color: white !important;
+}
+
+.btn-delete {
+  color: $red-primary;
+}
+
+.btn {
+  height: 24px !important;
+}
+
+// END BUTTON
+
+// SCROLL BAR
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: whitesmoke;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $gray-blue-primary;
+
+  &:hover {
+    background: $blue-primary;
+  }
+}
+
+// END SCROLL BAR
+
+// FORM GROUP
+.form-group > mat-label {
+  text-transform: uppercase;
+  font-size: 9px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.mat-mdc-header-cell mat-label {
+  font-weight: 700;
+  letter-spacing: 0.375px;
+}
+// END FORM GROUP
+
+// NG-SELECT
+.ng-select.ng-select-single .ng-select-container {
+  height: 25px;
+}
+
+.ng-select {
+  margin-bottom: 0.9em;
+}
+
+.mat-mdc-cell .ng-select {
+  padding-bottom: 2px;
+  padding-top: 2px;
+  margin-bottom: 0;
+}
+
+.ng-select .ng-select-container {
+  min-height: 25px;
+}
+
+.ng-select, .ng-select input {
+  font-size: 12px;
+}
+
+.ng-select.ng-select-opened > .ng-select-container .ng-arrow {
+  border-color: $blue-primary transparent;
+}
+
+.ng-select .ng-arrow-wrapper .ng-arrow {
+  border-color: $blue-primary transparent transparent;
+}
+
+.ng-select .ng-clear-wrapper {
+  color: $blue-primary;
+}
+
+.ng-dropdown-panel .ng-option {
+  font-size: 12px;
+  padding: 4px 10px !important;
+}
+
+.ng-select:not(.ng-select-focused) .ng-select-container:hover {
+  border-color: $blue-primary !important;
+}
+
+.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
+  top: unset;
+}
+
+.ng-select:not(.ng-select-focused) .ng-select-container:hover {
+  border-color: $blue-primary;
+  box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $blue-primary;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+  display: flex;
+  align-items: center;
+}
+
+// END NG-SELECT
+
+.clickable {
+  cursor: pointer;
+}
+
+// THIRD PARTY AUTOCOMPLETE
+.thirdParty-name {
+  font-weight: 600;
+  text-transform: uppercase;
+  padding-top: 3px;
+  white-space: normal;
+  line-height: normal;
+}
+
+.thirdParty-address {
+  margin: 0;
+  font-size: 9px;
+  padding-bottom: 3px;
+  text-transform: capitalize;
+  white-space: normal;
+  line-height: normal;
+}
+
+// END THIRD PARTY AUTOCOMPLETE
+
+// BUTTON
+.primary {
+  background: $blue-primary !important;
+  color: #FFFFFF !important;
+}
+
+.secondary {
+  background: $gray-blue-primary !important;
+  color: #FFFFFF !important;
+}
+
+.accent {
+  background: $purple-primary !important;
+  color: #FFFFFF !important;
+}
+
+.positive {
+  background: $green-primary !important;
+  color: #FFFFFF !important;
+}
+
+.negative {
+  background: $red-primary !important;
+  color: #FFFFFF !important;
+}
+
+.primary-color {
+  color: $blue-primary !important;
+}
+
+// END BUTTON
+
+//TABLE
+.no-results {
+  background: $gray-primary;
+  color: white;
+}
+// END TABLE
+
+// TOOLTIP
+
+.mdc-tooltip__surface {
+  max-width: 250px;
+  max-height: 100%;
+}
+
+// END TOOLTIP
+
+
+//.spacer {
+//  flex: 1 1 auto;
+//}
+
+//.toolbar-spacer {
+//  flex: 1 1 auto;
+//}
+//
+
+
+//// Striped alt colors for rows in mat-table
+//.highlight {
+//  background: #f4f4f6 !important;
+//}
+
+
+////Text next to icons
+//.icon-text {
+//  display: flex !important;
+//  align-items: center !important;
+//  font-size: 20px !important;
+//  margin-bottom: 5px;
+//  line-height: 25px;
+//  font-style: normal;
+//  font-weight: 900;
+//}
+
+//.custom-switch {
+//  .switch-small:focus {
+//    outline: none;
+//  }
+//}
+
+//.card-header-title-icon {
+//  margin-right: 7px;
+//}
+
+
+//textarea {
+//  font-size: 12px !important;
+//}
+
+
+
+//.consult-info-label {
+//  height: 8px;
+//
+//  font-style: normal;
+//  font-weight: 600;
+//  font-size: 8px;
+//  line-height: 8px;
+//
+//
+//  align-items: center;
+//  letter-spacing: 0.25px;
+//  text-transform: uppercase;
+//}
+
+//.consult-info-data {
+//  height: 18px;
+//
+//  font-style: normal;
+//  font-weight: normal;
+//  font-size: 14px;
+//  line-height: 18px;
+//
+//  align-items: center;
+//  letter-spacing: 0.25px;
+//}
+//
+
+
+//.home-button button {
+//  height: 32px;
+//}
+
+
+
+//.transparent {
+//  color: transparent !important;
+//}
+
+
+//.table-icon {
+//  font-size: 16px !important;
+//}
+