Panels

These are the almost complete Sass selector for Primefaces panels components.


Accordion

This is Sass selector for Accordion component.

Panel - Accordion
Panel - Accordion
/* PANEL - ACCORDION */
.ui-accordion {
  .ui-accordion-header {
    &.ui-state-hover {
    }
    &.ui-state-active {
    }
    .ui-icon {
    }
  }
  .ui-accordion-content {
  }
}

Panel

This is Sass selector for Panel component.

Panel - Panel
Panel - Panel
/* PANEL - PANEL */
.ui-panel {
  .ui-panel-titlebar {
    .ui-panel-title {
    }
    .ui-panel-titlebar-icon {
      .ui-icon {
        &.ui-icon-closethick {
        }
        &.ui-icon-minusthick {
        }
        /* If you use other additional icon, type it here. */
      }
    }
  }
  .ui-panel-content {
  }
  .ui-panel-footer {
  }
}

TabView

This is Sass selector for TabView component.

Panel - TabView
Panel - TabView
/* PANEL - TABVIEW */
.ui-tabs {
  .ui-tabs-nav {
    & > li {
      &.ui-state-default {
        a {
        }
      }
      &.ui-tabs-selected {
        a {
        }
      }
      .ui-icon {
      }
    }

    /* Use these selectors, if only you implement the scrollable tab */
    .ui-tabs-navscroller {
      .ui-tabs-navscroller-btn {
        &.ui-tabs-navscroller-btn-left {
          .ui-icon {
          }
        }
        &.ui-tabs-navscroller-btn-right {
          .ui-icon {
          }
        }
      }
    }
  }
  .ui-tabs-panel {
  }
}

FieldSet

This is Sass selector for FieldSet component.

Panel - FieldSet
Panel - FieldSet
/* PANEL - FIELDSET */
.ui-fieldset {
  .ui-fieldset-legend {
    &.ui-state-default {
    }
    &.ui-state-hover, &.ui-state-active {
    }
    .ui-fieldset-toggler {
    }
  }
  .ui-fieldset-content {
  }
}