genericsuite/public/gs_core.css

The GenericSuite for ReactJS (frontend version)

.defaultThemeLight {
  --primary: #2563eb;
  --secondary: #e5e7eb;
  --text: #1f2937;
  --background: #f3f4f6;
}

.defaultThemeDark {
  --primary: #1e40af;
  --secondary: #374151;
  --text: #e5e7eb;
  --background: #111827;
}

.mainContainerForTopMenuClass {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mainContainerForSideMenuClass {
  display: flex;
  min-height: 100vh;
}

.appSectionContainerForTopMenuClass {
  flex-grow: 1;
  padding: 1rem;
}

.appSectionContainerForSideMenuClass {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .appSectionContainerForSideMenuClass {
    margin-left: 16rem;
  }
}

.appFooterContainerClass {
  padding: 1rem;
  color: white;
  text-align: center;
}

.navbarHeaderForTopMenuClass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: white;
}

.navbarHeaderForSideMenuClass {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 16rem;
  padding: 1rem;
  overflow-y: auto;
  transition: transform 0.3s ease-in-out;
  z-index: 20;
}

@media (min-width: 1024px) {
  .navbarHeaderForSideMenuClass {
    transform: translateX(0);
  }
}

.navbarHeaderForSideMenuMobileOpenClass {
  transform: translateX(0);
}

.navbarHeaderForSideMenuMobileCloseClass {
  transform: translateX(-100%);
}

.navbarTopForSideMenuClass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: white;
}

.navbarBrandElementsForTopMenuClass {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbarBrandElementsForSideMenuClass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.navbarBrandHiddenIfLargeScreen {
  display: none;
}

@media (min-width: 1024px) {
  .navbarBrandHiddenIfLargeScreen {
    display: block;
  }
}

.navbarBrandNameClass {
  font-size: 1.5rem;
  font-weight: bold;
}

.navbarBrandAppVersionClass {
  font-size: 0.75rem;
}

.navbarBrandAppLogoClass {
  margin: 0 auto;
}

.navbarTopCenterMenuOnTopClass {
  display: none;
  gap: 1rem;
}

@media (min-width: 768px) {
  .navbarTopCenterMenuOnTopClass {
    display: flex;
  }
}

.navbarTopCenterMenuOnLeftClass {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navbarTopRightMenuForTopMenuClass {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbarTopRightMenuForRightMenuClass {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.navbarMobileMenuDiv1Class {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
}

.navbarMobileMenuDiv2Class {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16rem;
  padding: 1rem;
  overflow-y: auto;
}

.navbarMobileMenuDiv3Class {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.navbarMobileMenuH2Class {
  font-size: 1.25rem;
  font-weight: bold;
}

.navbarMobileCloseButtonClass {
  padding: 0.5rem;
  border-radius: 9999px;
}

.navbarMobileCloseButtonClass:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.navbarMobileCloseButtonIconClass {
  height: 1.5rem;
  width: 1.5rem;
}

.navbarMobileNavClass {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navbarToggleButtonClass {
  padding: 0.5rem;
  border-radius: 9999px;
}

.navbarToggleButtonClass:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 768px) {
  .navbarToggleButtonClass {
    display: none;
  }
}

.navbarToggleImageClass {
  height: 1.5rem;
  width: 1.5rem;
}

.navbarTextClass {
  display: flex;
  align-items: center;
}

.navLinkTopDivTopMenuClass {
  position: relative;
}

.navLinkTopDivHamburgerClass {
  display: none;
  position: relative;
}

@media (min-width: 768px) {
  .navLinkTopDivHamburgerClass {
    display: block;
  }
}

.navLinkTopDivSideMenuClass {
  /* No specific styles */
}

.navLinkTopDivMobileMenuClass {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navLinkButtonsTopMenuClass {
  display: flex;
  align-items: center;
}

.navLinkButtonsTopMenuClass:hover {
  background-color: #2563eb;
}

.navLinkButtonsHamburgerClass {
  display: block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.navLinkButtonsHamburgerClass:hover {
  background-color: #e5e7eb;
}

.navLinkButtonsSideMenuClass {
  /* No specific styles */
}

.navLinkButtonsMobileMenuClass {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.navLinkButtonsMobileMenuClass:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.navDropdownTopDivTopMenuClass {
  position: relative;
}

.navDropdownTopDivHamburgerClass {
  display: none;
  position: relative;
}

@media (min-width: 768px) {
  .navDropdownTopDivHamburgerClass {
    display: block;
  }
}

.navDropdownTopDivSideMenuClass {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navDropdownTopDivMobileMenuClass {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navDropdownInnerDivTopMenuClass {
  position: absolute;
  display: none;
  background-color: white;
  color: #1f2937;
  padding: 0.5rem;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.navDropdownTopDivTopMenuClass:hover .navDropdownInnerDivTopMenuClass {
  display: block;
}

.navDropdownInnerDivHamburgerClass {
  position: absolute;
  right: 0;
  display: none;
  background-color: white;
  color: #1f2937;
  padding: 0.5rem;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.navDropdownTopDivHamburgerClass:hover .navDropdownInnerDivHamburgerClass {
  display: block;
}

.navDropdownInnerDivSideMenuClass {
  /* No specific styles */
}

.navDropdownInnerDivMobileMenuClass {
  margin-left: 1rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navDropdownButtonTopMenuClass {
  display: flex;
  align-items: center;
}

.navDropdownButtonTopMenuClass:hover {
  background-color: #2563eb;
}

.navDropdownButtonHamburgerClass {
  display: block;
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
}

.navDropdownButtonHamburgerClass:hover {
  background-color: #e5e7eb;
}

.navDropdownButtonSideMenuClass {
  /* No specific styles */
}

.navDropdownButtonMobileMenuClass {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.navDropdownButtonMobileMenuClass:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.navDropdownImageTopMenuClass {
  /* No specific styles */
}

.navDropdownImageHamburgerClass {
  /* No specific styles */
}

.navDropdownImageSideMenuClass {
  /* No specific styles */
}

.navDropdownImageMobileMenuClass {
  height: 1rem;
  width: 1rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.navDropdownItemTopDivTopMenuClass {
  display: block;
  padding: 0.25rem 0.75rem;
}

.navDropdownItemTopDivTopMenuClass:hover {
  background-color: #e5e7eb;
}

.navDropdownItemTopDivHamburgerClass {
  display: block;
  padding: 0.25rem 0.75rem;
}

.navDropdownItemTopDivHamburgerClass:hover {
  background-color: #e5e7eb;
}

.navDropdownItemTopDivSideMenuClass {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.navDropdownItemTopDivSideMenuClass:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.navDropdownItemTopDivMobileMenuClass {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.navDropdownItemTopDivMobileMenuClass:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.alertBaseClass {
  position: relative;
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alertDangerClass {
  color: #991b1b;
  background-color: #fee2e2;
  border-color: #fecaca;
}

.alertWarningClass {
  color: #854d0e;
  background-color: #fef3c7;
  border-color: #fde68a;
}

.alertInfoClass {
  color: #0e7490;
  background-color: #cffafe;
  border-color: #a5f3fc;
}

.alertSuccessClass {
  color: #166534;
  background-color: #dcfce7;
  border-color: #bbf7d0;
}

.errorMsgClass {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.warningMsgClass {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.infoMsgClass {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.successMsgClass {
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.grayBoxMsgClass {
  color: black;
  background-color: #e5e7eb;
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.formGroupClass {
  margin-bottom: 1rem;
}

.formControlClass {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

.formControlClass:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
}

.invalidFeedbackClass {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.isInvalidClass {
  border-color: #ef4444;
}

.disableFieldBackgroundColorClass {
  background-color: #e5e7eb;
}

.hiddenClass {
  display: none;
}

.visibleClass {
  visibility: visible;
}

.buttonRightSpaceClass {
  margin-right: 0.5rem;
}

.buttonPrimaryClass {
  background-color: #3b82f6;
  color: white;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.buttonPrimaryClass:hover {
  background-color: #2563eb;
}

.buttonPrimaryClass:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
}

.buttonSecondaryClass {
  background-color: #d1d5db;
  color: #374151;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.buttonSecondaryClass:hover {
  background-color: #9ca3af;
}

.buttonSecondaryClass:focus {
  outline: none;
  box-shadow: 0 0 0 2px #6b7280;