new-front-common-library 18.2.0 → 18.2.2

package/assets/css/_global.scss

@@ -1,428 +1,428 @@
-@import "light-theme";
-@import "dark-theme";
-@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: 10px;
-  height: 10px;
-}
-
-.light-theme {
-  ::-webkit-scrollbar-track {
-    background: whitesmoke;
-  }
-}
-
-.dark-theme {
-  ::-webkit-scrollbar-track {
-    background: adjust-color($background-lvl2, $lightness: 10%);
-  }
-}
-
-::-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%;
-}
-
-.notification-classification-INFO {
-  background-color: $notification-color-info;
-}
-.notification-classification-FEAT {
-  background-color: $notification-color-feat;
-}
-
-.notification-classification-MAINT {
-  background-color: $notification-color-maint;
-}
-
-// 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;
-//}
-
+@import "light-theme";
+@import "dark-theme";
+@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: 10px;
+  height: 10px;
+}
+
+.light-theme {
+  ::-webkit-scrollbar-track {
+    background: whitesmoke;
+  }
+}
+
+.dark-theme {
+  ::-webkit-scrollbar-track {
+    background: adjust-color($background-lvl2, $lightness: 10%);
+  }
+}
+
+::-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%;
+}
+
+.notification-classification-INFO {
+  background-color: $notification-color-info;
+}
+.notification-classification-FEAT {
+  background-color: $notification-color-feat;
+}
+
+.notification-classification-MAINT {
+  background-color: $notification-color-maint;
+}
+
+// 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;
+//}
+