@unleashit/modal/dist/modal.css

Responsive modal component for React with custom header, footer and more.

.unl-modal__overlay {
  --unl-modal-padding: 16px;
  --unl-light-mode-overlay-color: rgba(0, 0, 0, .8);
  --unl-dark-mode-overlay-color: rgba(255, 255, 255, .8);
  --unl-light-mode-text-color: #000000;
  --unl-dark-mode-text-color: #ffffff;
  --unl-light-mode-background-color: #ffffff;
  --unl-dark-mode-background-color: #000000;
  --unl-light-mode-header-color: #f2f2f2;
  --unl-dark-mode-header-color: #777777;
  --unl-light-mode-header-shadow: 0 2px 5px rgba(0,0,0, 0.16);
  --unl-dark-mode-header-shadow: none;
  --unl-light-mode-border-color: #d0d0d0;
  --unl-dark-mode-border-color: var(--unl-dark-mode-header-color);
  --unl-small-width: 400px;
  --unl-medium-width: 600px;
  --unl-large-width: 75%;
  --unl-full-width: 100%;
  --unl-modal-y-position: calc(50vh - 50%);
  --unl-break-xs: 500px;
  --unl-break-sm: 767px;
  --unl-break-md: 1200px;
  --unl-break-lg: 1600px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--unl-light-mode-overlay-color); }
  .unl-modal__overlay[data-theme='dark'] {
    background-color: var(--unl-dark-mode-overlay-color); }

.unl-modal__child {
  width: 100%;
  transform: translateY(-100%);
  border: 1px solid var(--unl-light-mode-border-color);
  background-color: var(--unl-light-mode-background-color);
  transition: all 0.25s ease-in-out; }
  .unl-modal__child--in {
    transform: translateY(var(--unl-modal-y-position));
    transition: all 0.25s ease-in-out; }
  .unl-modal__child--small {
    max-width: var(--unl-small-width); }
  .unl-modal__child--medium {
    max-width: var(--unl-medium-width); }
  .unl-modal__child--large {
    max-width: var(--unl-large-width); }
    @media screen and (max-width: var(--unl-break-sm)) {
      .unl-modal__child--large {
        max-width: 100%;
        width: 100%; } }
  .unl-modal__child--full {
    width: var(--unl-full-width); }

[data-theme='dark'] .unl-modal__child {
  background-color: var(--unl-dark-mode-background-color);
  border: 1px solid var(--unl-dark-mode-border-color);
  color: var(--unl-dark-mode-text-color); }

.unl-modal__close {
  float: right;
  margin-top: 16px;
  margin-right: 16px; }

.unl-modal__close-btn {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: none; }

[data-theme='dark'] .unl-modal__close-btn {
  filter: invert(1); }

.unl-modal__header {
  background-color: var(--unl-light-mode-header-color);
  color: var(--unl-light-mode-text-color);
  padding: var(--unl-modal-padding);
  box-shadow: var(--unl-light-mode-header-shadow); }
  .unl-modal__header h3 {
    margin-bottom: 0;
    font-weight: normal; }

[data-theme='dark'] .unl-modal__header {
  box-shadow: var(--unl-dark-mode-header-shadow);
  background-color: var(--unl-dark-mode-header-color);
  color: var(--unl-dark-mode-text-color); }

.unl-modal__footer {
  padding: var(--unl-modal-padding);
  border-top: 1px solid var(--unl-light-mode-border-color);
  color: var(--unl-light-mode-text-color); }

[data-theme='dark'] .unl-modal__footer {
  border-top: 1px solid var(--unl-dark-mode-border-color);
  color: var(--unl-dark-mode-text-color); }

.unl-modal__body {
  padding: var(--unl-modal-padding); }