Jolty home Jolty Documentation

Basic styles

Jolty is an JS library that does not add any styles to your project. However, for some components to work correctly, it is recommended to add some styles.

/* Hide all elements with the hidden attribute */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}
 
/* Reset the default styles for the dialog element and the popover attribute. */
:where(dialog, [popover]) {
  margin: 0;
  padding: 0;
  inset: 0;
  position: fixed;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  color: inherit;
  overflow: unset;
  border-width: 0;
  background-color: transparent;
}
:where(dialog, [popover])::backdrop {
  opacity: 0;
}
 
/* Prevent scrolling when the dialog component is shown */
.ui-prevent-scroll body {
  overflow: hidden;
  padding-right: var(--ui-root-scrollbar-width);
}
2023 Β© A Project by Jolty Labs πŸ‡ͺπŸ‡Έ πŸ‡ΊπŸ‡¦