Overlays & Messages

These are the almost complete Sass selector for Primefaces overlays & messages components.


Dialog & ConfirmDialog

This is Sass selector for Dialog & ConfirmDialog component.

Overlay - DialogOverlay - Dialog
Overlay - Dialog
/* OVERLAYS MESSAGES - DIALOG & CONFIRMDIALOG */
.ui-dialog {
  .ui-dialog-titlebar {
    .ui-dialog-title {
    }
    .ui-dialog-titlebar-icon {
      .ui-icon {
      }
    }
  }
  .ui-dialog-content {
    .ui-confirm-dialog-severity {
    }
    .ui-confirm-dialog-message {
    }
  }
  .ui-dialog-footer {
    &.ui-dialog-buttonpane {
      .ui-button {
        .ui-button-text {
        }
      }
    }
  }
}

Growl

This is Sass selector for Growl & component.

Message - Growl
Message - Growl
/* OVERLAYS MESSAGES - GROWL */
.ui-growl {
}
.ui-growl-item-container {
  &.ui-growl-error {
    .ui-growl-item {
    }
  }
  &.ui-growl-info {
    .ui-growl-item {
    }
  }
}
.ui-growl-item {
  .ui-growl-icon-close {
  }
  .ui-growl-image {
    &.ui-growl-image-info {
    }
    &.ui-growl-image-error {
    }
  }
  .ui-growl-message {
    .ui-growl-title {
    }
    p {
    }
  }
}

Message

This is Sass selector for Message & component.

Message - Message
Message - Message
/* OVERLAYS MESSAGES - MESSAGE */
.ui-messages {
  .ui-messages-info {
    .ui-messages-info-icon {
    }
    .ui-messages-info-summary {
    }
    .ui-messages-info-detail {
    }
  }
  .ui-messages-warn {
    .ui-messages-warn-icon {
    }
    .ui-messages-warn-summary {
    }
    .ui-messages-warn-detail {
    }
  }
  .ui-messages-error {
    .ui-messages-error-icon {
    }
    .ui-messages-error-summary {
    }
    .ui-messages-error-detail {
    }
  }
  .ui-messages-fatal {
    .ui-messages-fatal-icon {
    }
    .ui-messages-fatal-summary {
    }
    .ui-messages-fatal-detail {
    }
  }
  .ui-messages-close {
    .ui-icon {
    }
  }
  ul {
  }
}