Cockpit CSS Styling

Stef Walter edited this page May 12, 2016 · 2 revisions

We use Patternfly to style Cockpit. The file cockpit.css includes both Patternfly and Cockpit's styling. Sometimes there's a need for additional Cockpit specific styling shared between components.

That additional styling has a -ct in the various class names. The -ct namespace is used after the main class name, and sub-names go after it. This is similar to the Patternfly namespacing. For example:

.selector-ct {
    ...
}

.selector-ct-subclass {
    ...
}

Stabilization Effort

Before the Cockpit 0.106 release we stabilized cockpit.css and added the above namespaces. The following changes occurred.

Renamed:

  • .cockpit-info-table -> .info-table-ct (and related styling)
  • .cockpit-form-table -> .form-table-ct
  • .page -> .page-ct
  • .btn-control -> .btn-control-ct
  • .highlight -> .highlight-ct
  • .dialog-list -> .dialog-list-ct
  • .curtains -> .curtains-ct
  • .dialog-wait -> .dialog-wait-ct
  • .console -> .console-ct (and related styling)
  • .btn-onoff -> .btn-onoff-ct
  • .listing -> .listing-ct (and related styling)
  • .timeline -> .timeline-ct (and related styling)

Removed these styles:

  • .cockpit-graph
  • .cockpit-graph-label
  • .cockpit-graph-text
  • .filter-unimportant
  • .waiting
  • .cell-buttons
  • .spinner-white
  • .content-header-extra
  • .cockpit-modal-md
  • .modal-scrollable
  • .password-strength-meter
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.