open-redirect/web/src/styles.scss

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@import 'primeicons/primeicons.css';
@import 'primeng/resources/primeng.min.css';
@import 'primeng/resources/themes/lara-dark-blue/theme.css';

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'styles/theme';
@import 'styles/theme_maxlan';
@import 'styles/tablet';
@import 'styles/mobile';

$headerHeight: 50px;
$footerHeight: 25px;

body {
  margin: 0;
}

@layer base {
  h1 {
    @apply text-3xl;
    @apply font-extrabold;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-lg;
  }

  h5,
  h6 {
    @apply text-base;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-bold;
  }

  p {
    @apply text-base;
  }

  input,
  .p-checkbox-box,
  .p-dropdown {
    padding: 10px;
  }

  .p-dropdown {
    width: 100%;
    span {
      padding: 0;
    }
  }
}

header {
  height: $headerHeight;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .header {
    display: flex;
    gap: 10px;
    align-items: center;

    overflow: hidden;

    .logo,
    .app-name {
      display: flex;
      align-items: center;
    }

    .logo {
      padding: 5px 0;

      img {
        height: 100%;
        width: 200px;
      }
    }

    .app-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .app {
    height: 100%;
    display: flex;
    flex: 1;

    .component {
      margin: 0 10px;
      overflow: auto;
      flex: 1;
      padding: 10px;
    }
  }
}

footer {
  height: $footerHeight;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  .p-button {
    padding: 10px 15px;
  }
}

.icon-btn {
  .p-button {
    padding: 5px;
    background: transparent !important;
    border: 0 !important;
  }

  .pi {
    font-size: 1.275rem;
  }
}

.text-btn {
  border: 0 !important;
  padding: 0 !important;

  &:hover {
    border: 0;
  }
}

.icon-btn-without-hover {
  &:hover {
    border: 0 !important;
  }
}

.icon-btn {
  .p-button-label {
    transition-duration: unset !important;
  }

  &:hover {
    border: 0;
  }
}

.danger-btn,
.danger-icon-btn {
  border: 0 !important;

  &:hover {
    border: 0;
  }

  .pi {
    font-size: 1.275rem;
  }
}

.form-page {
  height: 100%;

  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 10px;

  overflow-y: scroll;

  .form-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 5px;
  }

  .form-page-content {
    display: flex;
    flex-direction: column;
    gap: 15px;

    .form-page-input {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 5px;

      .label {
        display: flex;
        align-items: center;
        grid-column: 1;
      }

      .value {
        grid-column: 2;
      }
    }


    .form-page-section {
      display: flex;
      flex-direction: column;
      gap: 5px;

      .form-page-section-header {
      }

      .form-page-section-content {
        display: flex;
        flex-direction: column;
        gap: 5px;

        .form-page-section-row {
          display: flex;
          gap: 5px;

          .form-page-section-row-label {
          }

          .form-page-section-row-content {
          }
        }
      }
    }
  }
}

.spinner-component-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 10000;

  .spinner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    /* Transparent Overlay */
    &:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.53);
    }
  }
}

.p-datatable {
  .p-datatable-thead > tr > td,
  .p-datatable-thead > tr > th {
    padding: 0.5rem 0.5rem;
  }

  .p-datatable-tbody > tr > td {
    padding: 0.5rem 0.5rem;
  }
}