Base view

Frontend/src/app/main-view/main-view.component.scss

@@ -0,0 +1,228 @@
+.main-container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.sidenav-container {
+  flex: 1;
+}
+mat-icon.menu-icon {
+  margin-right: 3px;
+  color: gray;
+}
+mat-nav-list.menu-sublist {
+  padding-left: 10px;
+}
+mat-nav-list.menu-sublist > a {
+  font-size: small;
+}
+div.footer {
+  text-align: right;
+  font-size: smaller;
+  color: gray;
+  padding-right: 5px;
+}
+.fill-to-right {
+  flex: 1 1 auto;
+}
+span.topbar-user-name {
+  font-size: small;
+}
+h1.topbar-app-name {
+  margin-left: 8px;
+}
+mat-sidenav {
+  width: 200px;
+}
+mat-card.app-card {
+  margin: 5px;
+}
+.list-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  height: 98%;
+}
+.top-list-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 30vh;
+  height: 54vh;
+}
+.bottom-list-container {
+  display: flex;
+  flex-direction: column;
+  height: 35vh;
+}
+.table {
+  overflow: auto;
+  height: 100%;
+}
+.list-header {
+  min-height: 50px;
+  padding: 4px 12px 0;
+}
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+mat-form-field.detail-input {
+  width: 90%;
+  text-align: left;
+  color: black;
+}
+mat-form-field.detail-input-full-width {
+  width: 96%;
+  text-align: left;
+  color: black;
+}
+input[disabled] {
+  color: black;
+  -webkit-text-fill-color: black;
+  opacity: 1; /* required on iOS */
+}
+textarea[disabled] {
+  color: black;
+  -webkit-text-fill-color: black;
+  opacity: 1; /* required on iOS */
+}
+.loading-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(100, 100, 100, 0.3);
+  z-index: 1400;
+}
+.loading-img {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.flip-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(100, 100, 100, 0.95);
+  z-index: 1500;
+}
+.flip-msg {
+  margin: auto;
+  text-align: center;
+  padding-top: 45vh;
+  color: rgb(205, 206, 177);
+  font-size: larger;
+}
+.errorMsg {
+  font-size: small;
+  margin-top: 10px;
+}
+
+/* links */
+a:link,
+a:visited {
+  color: black;
+}
+.stock-state-error {
+  color: red;
+  font-weight: bold;
+}
+.listContainer {
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+}
+.listItem {
+  height: 40px;
+  font-size: medium;
+}
+
+.listItem:hover {
+  width: 100%;
+  cursor: pointer;
+  background: rgba(130, 130, 130, 0.2);
+}
+
+/* snack bars */
+.snack-error {
+  background: #f44336;
+}
+
+.input-right {
+  display: block;
+  direction: rtl;
+}
+
+.background-red {
+  background-color: rgba(255, 0, 0, 0.6);
+}
+
+.background-orange {
+  background-color: rgba(255, 145, 0, 0.6);
+}
+
+.background-green {
+  background-color: rgba(0, 255, 0, 0.6);
+}
+
+.background-grey {
+  background-color: rgba(100, 100, 100, 0.3);
+}
+
+.mat-dialog-container {
+  padding: 0px !important;
+}
+
+.tab-loader {
+  width: 25px;
+  margin-right: 10px;
+}
+
+.cell-border {
+  border-left: 1px solid #e0e0e0;
+  padding-left: 4px;
+}
+
+.cell-background {
+  background-color: #eeeeee;
+}
+
+.breadcrumbs {
+  width: 100%;
+  text-align: right;
+  font-size: small;
+  color: gray;
+  margin-top: 0px;
+  padding-top: 0px;
+}
+
+.breadcrumbs a {
+  color: gray;
+  text-decoration: none;
+}
+
+::ng-deep snack-bar-container.custom-snackbar-error {
+  background: #ff3452;
+}
+
+::ng-deep snack-bar-container.custom-snackbar-success {
+  background: #9ad284;
+}
+
+::ng-deep .mat-simple-snackbar {
+  color: #000;
+}
+
+::ng-deep .mat-simple-snackbar-action {
+  color: #000;
+}