diff --git a/src/patternfly/components/Label/examples/Label.css b/src/patternfly/components/Label/examples/Label.css index 651b4aac63..6c0b5ecbcc 100644 --- a/src/patternfly/components/Label/examples/Label.css +++ b/src/patternfly/components/Label/examples/Label.css @@ -1,6 +1,7 @@ #ws-core-c-label-filled .ws-preview-html, #ws-core-c-label-outline .ws-preview-html, #ws-core-c-label-compact .ws-preview-html, +#ws-core-c-label-large .ws-preview-html, #ws-core-c-label-overflow .ws-preview-html { margin: -4px; } @@ -8,6 +9,7 @@ #ws-core-c-label-filled .pf-v6-c-label, #ws-core-c-label-outline .pf-v6-c-label, #ws-core-c-label-compact .pf-v6-c-label, +#ws-core-c-label-large .pf-v6-c-label, #ws-core-c-label-overflow .pf-v6-c-label { margin: 4px; } diff --git a/src/patternfly/components/Label/examples/Label.md b/src/patternfly/components/Label/examples/Label.md index 384a1d7821..80843a76a3 100644 --- a/src/patternfly/components/Label/examples/Label.md +++ b/src/patternfly/components/Label/examples/Label.md @@ -38,6 +38,25 @@ import './Label.css' label--IsCompact=true}} ``` +### Large + +```hbs +{{> label--variants + label--IsFilled=true + label--variants--title="Large" + label--variants--id="large" + label--IsLarge=true}} + + + +{{> label--variants + label--variants--title="Large" + label--variants--id="large-outline" + label--color="blue" + label--IsOutlined=true + label--IsLarge=true}} +``` + ### Overflow This style of label is used to indicate overflow within a label group. @@ -109,13 +128,13 @@ Use a label group to display multiple labels at once. {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -147,13 +166,13 @@ Use a label group to display multiple labels at once. {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsOverflow=true label-text--value="3 more"}} @@ -169,19 +188,19 @@ Use a label group to display multiple labels at once. {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}} + {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="purple" label-text--value="Label 5" label-icon--value="info-circle"}} + {{> label label--color="purple" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label-text--value="3 less"}} @@ -199,13 +218,13 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsAdd=true label-text--value="Add label"}} @@ -224,13 +243,13 @@ The contents of a label group can be modified by removing labels or adding new o {{/label-group-label}} {{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -246,22 +265,22 @@ The contents of a label group can be modified by removing labels or adding new o {{/label-group-label}} {{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}} + {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="orange" label-text--value="Label 5" label-icon--value="info-circle"}} + {{> label label--color="orange" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="red" label-text--value="Label 6" label-icon--value="info-circle"}} + {{> label label--color="red" label-text--value="Label 6" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -275,13 +294,13 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -294,13 +313,13 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label-text--value="3 more"}} @@ -316,19 +335,19 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}} + {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="purple" label-text--value="Label 5" label-icon--value="info-circle"}} + {{> label label--color="purple" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label-text--value="3 less"}} @@ -347,13 +366,13 @@ The contents of a label group can be modified by removing labels or adding new o {{/label-group-label}} {{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -504,21 +523,21 @@ In addition to the JavaScript management of [editable labels](/components/label# {{> label label--IsCompact=true label-text--value="Label 1" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsCompact=true label-text--value="Label 2" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="green" label--IsCompact=true label-text--value="Label 3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -531,21 +550,21 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsCompact=true label-text--value="Label 2" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="green" label--IsCompact=true label-text--value="Label 3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label--IsCompact=true label-text--value="3 more"}} @@ -561,21 +580,21 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsCompact=true label-text--value="Label 2" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="green" label--IsCompact=true label-text--value="Label 3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -599,13 +618,13 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label--color="blue" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label--color="blue" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label-text--value="Label 2" label--color="green" label-icon--value="info-circle"}} + {{> label label-text--value="Label 2" label--color="green" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="info-circle"}} + {{> label label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -617,13 +636,13 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -646,6 +665,9 @@ In addition to the JavaScript management of [editable labels](/components/label# | `.pf-m-filled` | `.pf-v6-c-label` | Modifies label for filled styles. | | `.pf-m-outline` | `.pf-v6-c-label` | Modifies label for outline styles. | | `.pf-m-compact` | `.pf-v6-c-label` | Modifies label for compact styles. | +| `.pf-m-large` | `.pf-v6-c-label` | Modifies label for large styles. | +| `.pf-m-clickable` | `.pf-v6-c-label` | Modifies label for clickable styles when `.pf-v6-c-label__content` is an `` or ``. | +| `.pf-m-clicked` | `.pf-v6-c-label` | Modifies label for clicked styles. | | `.pf-m-overflow` | `.pf-v6-c-label` | Modifies label for overflow styles for use in a label group. | | `.pf-m-add` | `.pf-v6-c-label` | Modifies label for add styles for use in a label group. | | `.pf-m-blue` | `.pf-v6-c-label` | Modifies the label to have blue colored styling. | diff --git a/src/patternfly/components/Label/label--variants.hbs b/src/patternfly/components/Label/label--variants.hbs index d636144fa9..1878ac0ca9 100644 --- a/src/patternfly/components/Label/label--variants.hbs +++ b/src/patternfly/components/Label/label--variants.hbs @@ -30,6 +30,13 @@ label--id=(concat label--variants--id '-status-button-removable') label-text--value=(concat label--variants--title ' button removable')}} +{{> label + label--IsRemovable=true + label-content--IsButton=true + label--id=(concat label--variants--id '-status-button-clicked') + label-text--value=(concat label--variants--title ' button clicked') + label--IsClicked=true}} + {{> label label--id=(concat label--variants--id '-status-truncated') label-text--value=(concat label--variants--title ', max-width truncation customization') @@ -61,7 +68,7 @@ {{> label label--id=(concat label--variants--id '-icon') - label-icon--value="cube" + label-icon--value="rh-ui-add-circle-fill" label-text--value=(concat label--variants--title ' icon')}} {{> label @@ -73,7 +80,7 @@ label--IsRemovable=true label--id=(concat label--variants--id '-icon-removable') label-text--value=(concat label--variants--title ' icon removable') - label-icon--value="cube"}} + label-icon--value="rh-ui-add-circle-fill"}} {{> label label--id=(concat label--variants--id '-link') @@ -97,18 +104,26 @@ label-text--value=(concat label--variants--title ' button removable') label-content--IsButton=true}} + {{> label + label--IsRemovable=true + label--IsClicked=true + label--id=(concat label--variants--id '-button-clicked') + label-text--value=(concat label--variants--title ' button clicked') + label-content--IsButton=true + label-icon--value="rh-ui-add-circle-fill"}} + {{> label label--id=(concat label--variants--id '-truncated') label-text--value=(concat label--variants--title ' label, max-width truncation customization') label-text--attribute='style="--pf-v6-c-label__text--MaxWidth: 28ch"' - label-icon--value="cube"}} + label-icon--value="rh-ui-add-circle-fill"}} {{> label label--IsRemovable=true label--id=(concat label--variants--id '-truncated-with-icon') label-text--value=(concat label--variants--title ' label with icon and set max-width truncation customization') label-text--attribute='style="--pf-v6-c-label__text--MaxWidth: 38ch"' - label-icon--value="cube"}} + label-icon--value="rh-ui-add-circle-fill"}} {{> label label--IsRemovable=true @@ -116,7 +131,7 @@ label--id=(concat label--variants--id '-link-removable-disabled') label-text--value=(concat label--variants--title ' link removable (disabled)') label-content--IsLink=true - label-icon--value="cube"}} + label-icon--value="rh-ui-add-circle-fill"}} {{> label label--IsRemovable=true @@ -124,7 +139,7 @@ label--id=(concat label--variants--id '-button-removable-disabled') label-text--value=(concat label--variants--title ' button removable (disabled)') label-content--IsButton=true - label-icon--value="cube"}} + label-icon--value="rh-ui-add-circle-fill"}} {{#if @partial-block}} {{> @partial-block}} diff --git a/src/patternfly/components/Label/label-icon--map.hbs b/src/patternfly/components/Label/label-icon--map.hbs index b709f9baec..a9c5b161a1 100644 --- a/src/patternfly/components/Label/label-icon--map.hbs +++ b/src/patternfly/components/Label/label-icon--map.hbs @@ -1,9 +1,9 @@ {{#if label-icon--value}} - {{~label-icon--value}} + {{~pfIcon label-icon--value}} {{else}} - {{~#ifEquals label--status "success"}}check-circle{{/ifEquals}} - {{~#ifEquals label--status "warning"}}exclamation-triangle{{/ifEquals}} - {{~#ifEquals label--status "danger"}}exclamation-circle{{/ifEquals}} - {{~#ifEquals label--status "info"}}info-circle{{/ifEquals}} - {{~#ifEquals label--status "custom"}}bell{{/ifEquals}} -{{/if}} \ No newline at end of file + {{~#ifEquals label--status "success"}}{{pfIcon "rh-ui-check-circle-fill"}}{{/ifEquals}} + {{~#ifEquals label--status "warning"}}{{pfIcon "rh-ui-warning-fill"}}{{/ifEquals}} + {{~#ifEquals label--status "danger"}}{{pfIcon "rh-ui-error-fill"}}{{/ifEquals}} + {{~#ifEquals label--status "info"}}{{pfIcon "rh-ui-information-fill"}}{{/ifEquals}} + {{~#ifEquals label--status "custom"}}{{pfIcon "rh-ui-notification-fill"}}{{/ifEquals}} +{{/if}} diff --git a/src/patternfly/components/Label/label-icon.hbs b/src/patternfly/components/Label/label-icon.hbs index 7609ca88ae..d0da9b1a15 100644 --- a/src/patternfly/components/Label/label-icon.hbs +++ b/src/patternfly/components/Label/label-icon.hbs @@ -3,7 +3,7 @@ {{{label-icon--attribute}}} {{/if}}> {{#ifAny label-icon--value label--status}} - + {{> label-icon--map}} {{/ifAny}} {{#if @partial-block}} {{> @partial-block}} diff --git a/src/patternfly/components/Label/label.hbs b/src/patternfly/components/Label/label.hbs index 3a46673a73..471d177507 100644 --- a/src/patternfly/components/Label/label.hbs +++ b/src/patternfly/components/Label/label.hbs @@ -2,11 +2,13 @@ {{#if label--IsFilled}} pf-m-filled{{/if}} {{#if label--IsOutlined}} pf-m-outline{{/if}} {{#if label--IsCompact}} pf-m-compact{{/if}} + {{#if label--IsLarge}} pf-m-large{{/if}} {{#if label--IsOverflow}} pf-m-overflow{{/if}} {{#if label--IsAdd}} pf-m-add{{/if}} {{#if label--IsEditable}} pf-m-editable{{/if}} {{#if label--IsEditableActive}} pf-m-editable-active{{/if}} {{#if label--IsDisabled}} pf-m-disabled{{/if}} + {{#if label--IsClicked}} pf-m-clicked{{/if}} {{#ifAny label--color label--status}} pf-m-{{ternary label--status label--status label--color}} {{/ifAny}} diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss index f5f5a312d8..06aba023b7 100644 --- a/src/patternfly/components/Label/label.scss +++ b/src/patternfly/components/Label/label.scss @@ -17,157 +17,248 @@ --#{$label}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); --#{$label}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --#{$label}__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); - --#{$label}--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover); - --#{$label}--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover); - --#{$label}--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover); + --#{$label}--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover); + --#{$label}--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); + --#{$label}--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); + --#{$label}--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); + --#{$label}--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-gray--clicked); + --#{$label}--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--clicked); + --#{$label}--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--clicked); + --#{$label}--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--clicked); --#{$label}--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover); + --#{$label}--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--clicked); // Blue --#{$label}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default); --#{$label}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default); --#{$label}--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default); - --#{$label}--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover); - --#{$label}--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover); - --#{$label}--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover); + --#{$label}--m-blue--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover); + --#{$label}--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default); + --#{$label}--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default); + --#{$label}--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default); + --#{$label}--m-blue--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-blue--clicked); + --#{$label}--m-blue--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--clicked); + --#{$label}--m-blue--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--clicked); + --#{$label}--m-blue--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--clicked); --#{$label}--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default); --#{$label}--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover); + --#{$label}--m-blue--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--clicked); // Red --#{$label}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default); --#{$label}--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default); --#{$label}--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default); - --#{$label}--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover); - --#{$label}--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover); - --#{$label}--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover); + --#{$label}--m-red--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover); + --#{$label}--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default); + --#{$label}--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--default); + --#{$label}--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default); + --#{$label}--m-red--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-red--clicked); + --#{$label}--m-red--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--clicked); + --#{$label}--m-red--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--red--clicked); + --#{$label}--m-red--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--red--clicked); --#{$label}--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default); --#{$label}--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover); + --#{$label}--m-red--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--red--clicked); // Orange --#{$label}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default); --#{$label}--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default); --#{$label}--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default); - --#{$label}--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover); - --#{$label}--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover); - --#{$label}--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover); + --#{$label}--m-orange--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover); + --#{$label}--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default); + --#{$label}--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default); + --#{$label}--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default); + --#{$label}--m-orange--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-orange--clicked); + --#{$label}--m-orange--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--clicked); + --#{$label}--m-orange--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--clicked); + --#{$label}--m-orange--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--clicked); --#{$label}--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default); --#{$label}--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover); + --#{$label}--m-orange--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--clicked); // Orangered --#{$label}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default); --#{$label}--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default); --#{$label}--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default); - --#{$label}--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover); - --#{$label}--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover); - --#{$label}--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover); + --#{$label}--m-orangered--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover); + --#{$label}--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default); + --#{$label}--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default); + --#{$label}--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default); + --#{$label}--m-orangered--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--clicked); + --#{$label}--m-orangered--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--clicked); + --#{$label}--m-orangered--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--clicked); + --#{$label}--m-orangered--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--clicked); --#{$label}--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default); --#{$label}--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover); + --#{$label}--m-orangered--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--clicked); // Yellow --#{$label}--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default); --#{$label}--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default); --#{$label}--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default); - --#{$label}--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover); - --#{$label}--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover); - --#{$label}--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover); + --#{$label}--m-yellow--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover); + --#{$label}--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default); + --#{$label}--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default); + --#{$label}--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default); + --#{$label}--m-yellow--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--clicked); + --#{$label}--m-yellow--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--clicked); + --#{$label}--m-yellow--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--clicked); + --#{$label}--m-yellow--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--clicked); --#{$label}--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default); --#{$label}--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover); + --#{$label}--m-yellow--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--clicked); // Green --#{$label}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default); --#{$label}--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default); --#{$label}--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default); - --#{$label}--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover); - --#{$label}--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover); - --#{$label}--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover); + --#{$label}--m-green--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover); + --#{$label}--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default); + --#{$label}--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--default); + --#{$label}--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default); + --#{$label}--m-green--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-green--clicked); + --#{$label}--m-green--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--clicked); + --#{$label}--m-green--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--green--clicked); + --#{$label}--m-green--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--green--clicked); --#{$label}--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default); --#{$label}--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover); + --#{$label}--m-green--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--green--clicked); // Teal --#{$label}--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default); --#{$label}--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default); --#{$label}--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default); - --#{$label}--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover); - --#{$label}--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover); - --#{$label}--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover); + --#{$label}--m-teal--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover); + --#{$label}--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default); + --#{$label}--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default); + --#{$label}--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default); + --#{$label}--m-teal--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-teal--clicked); + --#{$label}--m-teal--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--clicked); + --#{$label}--m-teal--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--clicked); + --#{$label}--m-teal--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--clicked); --#{$label}--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default); --#{$label}--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover); + --#{$label}--m-teal--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--clicked); // Purple --#{$label}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default); --#{$label}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default); --#{$label}--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default); - --#{$label}--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover); - --#{$label}--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover); - --#{$label}--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover); + --#{$label}--m-purple--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover); + --#{$label}--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default); + --#{$label}--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default); + --#{$label}--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default); + --#{$label}--m-purple--m-clicked--Color: var(--pf-t--global--text--color--nonstatus--on-purple--clicked); + --#{$label}--m-purple--m-clicked__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--clicked); + --#{$label}--m-purple--m-clicked--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--clicked); + --#{$label}--m-purple--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--clicked); --#{$label}--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default); --#{$label}--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover); + --#{$label}--m-purple--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--clicked); // Success --#{$label}--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default); --#{$label}--m-success--Color: var(--pf-t--global--text--color--status--on-success--default); --#{$label}--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default); - --#{$label}--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover); - --#{$label}--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover); - --#{$label}--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover); + --#{$label}--m-success--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover); + --#{$label}--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--default); + --#{$label}--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--default); + --#{$label}--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--default); + --#{$label}--m-success--m-clicked--Color: var(--pf-t--global--text--color--status--on-success--clicked); + --#{$label}--m-success--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-success--clicked); + --#{$label}--m-success--m-clicked--BackgroundColor: var(--pf-t--global--color--status--success--clicked); + --#{$label}--m-success--m-clicked--BorderColor: var(--pf-t--global--border--color--status--success--clicked); --#{$label}--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default); --#{$label}--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default); --#{$label}--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover); --#{$label}--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover); + --#{$label}--m-success--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--success--clicked); + --#{$label}--m-success--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--success--clicked); // Warning --#{$label}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default); --#{$label}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default); --#{$label}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default); - --#{$label}--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover); - --#{$label}--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover); - --#{$label}--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover); + --#{$label}--m-warning--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover); + --#{$label}--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--default); + --#{$label}--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--default); + --#{$label}--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default); + --#{$label}--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked); + --#{$label}--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked); + --#{$label}--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked); + --#{$label}--m-warning--m-clicked--BorderColor: var(--pf-t--global--border--color--status--warning--clicked); --#{$label}--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default); --#{$label}--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default); --#{$label}--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover); --#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover); + --#{$label}--m-warning--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--warning--clicked); + --#{$label}--m-warning--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--warning--clicked); // Danger --#{$label}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default); --#{$label}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default); --#{$label}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default); - --#{$label}--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover); - --#{$label}--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover); - --#{$label}--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover); + --#{$label}--m-danger--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover); + --#{$label}--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--default); + --#{$label}--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--default); + --#{$label}--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default); + --#{$label}--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked); + --#{$label}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked); + --#{$label}--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked); + --#{$label}--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked); --#{$label}--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default); --#{$label}--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default); --#{$label}--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover); --#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover); + --#{$label}--m-danger--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked); + --#{$label}--m-danger--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked); // Info --#{$label}--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default); --#{$label}--m-info--Color: var(--pf-t--global--text--color--status--on-info--default); --#{$label}--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default); - --#{$label}--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover); - --#{$label}--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover); - --#{$label}--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover); + --#{$label}--m-info--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover); + --#{$label}--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--default); + --#{$label}--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--default); + --#{$label}--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--default); + --#{$label}--m-info--m-clicked--Color: var(--pf-t--global--text--color--status--on-info--clicked); + --#{$label}--m-info--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-info--clicked); + --#{$label}--m-info--m-clicked--BackgroundColor: var(--pf-t--global--color--status--info--clicked); + --#{$label}--m-info--m-clicked--BorderColor: var(--pf-t--global--border--color--status--info--clicked); --#{$label}--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default); --#{$label}--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default); --#{$label}--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover); --#{$label}--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover); + --#{$label}--m-info--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--info--clicked); + --#{$label}--m-info--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--info--clicked); // Custom --#{$label}--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default); --#{$label}--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default); --#{$label}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default); - --#{$label}--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover); - --#{$label}--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover); - --#{$label}--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover); + --#{$label}--m-custom--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover); + --#{$label}--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--default); + --#{$label}--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--default); + --#{$label}--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default); + --#{$label}--m-custom--m-clicked--Color: var(--pf-t--global--text--color--status--on-custom--clicked); + --#{$label}--m-custom--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-custom--clicked); + --#{$label}--m-custom--m-clicked--BackgroundColor: var(--pf-t--global--color--status--custom--clicked); + --#{$label}--m-custom--m-clicked--BorderColor: var(--pf-t--global--border--color--status--custom--clicked); --#{$label}--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default); --#{$label}--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default); --#{$label}--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover); --#{$label}--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover); + --#{$label}--m-custom--m-outline--m-clicked--BorderColor: var(--pf-t--global--border--color--status--custom--clicked); + --#{$label}--m-custom--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--custom--clicked); // Clickable --#{$label}--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); - --#{$label}--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$label}--m-clickable__content--Cursor: pointer; + // Clicked + --#{$label}--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked); + // Filled --#{$label}--m-filled__actions--c-button__icon--Color: var(--#{$label}__icon--Color); @@ -180,6 +271,10 @@ --#{$label}--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); --#{$label}--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular); --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular); + --#{$label}--m-outline--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked); + --#{$label}--m-outline--m-clicked--BackgroundColor: transparent; + --#{$label}--m-outline--m-clicked--Color: var(--pf-t--global--text--color--regular); + --#{$label}--m-outline--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular); // Overflow --#{$label}--m-overflow--Color: var(--pf-t--global--text--color--brand--default); @@ -205,9 +300,20 @@ --#{$label}--m-compact--PaddingBlockEnd: 0; --#{$label}--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm); --#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm); + --#{$label}--m-compact--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact); + --#{$label}--m-compact__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact); + --#{$label}--m-compact__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm); + --#{$label}--m-compact__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm); --#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)}; --#{$label}--m-compact--MinWidth: calc((var(--#{$label}--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--#{$label}--m-compact--PaddingBlockStart) + var(--#{$label}--m-compact--PaddingBlockEnd))); + // Large + --#{$label}--m-large--FontSize: var(--pf-t--global--font--size--body--default); + --#{$label}--m-large__icon--FontSize: var(--pf-t--global--icon--size--font--body--default); + --#{$label}--m-large__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--default); + --#{$label}--m-large--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); + --#{$label}--m-large__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--default); + // Content --#{$label}__content--MaxWidth: 100%; --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact); @@ -274,153 +380,236 @@ --#{$label}--BackgroundColor: var(--#{$label}--m-blue--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-blue--Color); --#{$label}__icon--Color: var(--#{$label}--m-blue__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-blue--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-blue--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-blue--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-blue--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-blue--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-blue--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-blue--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-blue--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-blue--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-blue--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-blue--m-outline--m-clicked--BorderColor); } &.pf-m-red { --#{$label}--BackgroundColor: var(--#{$label}--m-red--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-red--Color); --#{$label}__icon--Color: var(--#{$label}--m-red__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-red--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-red--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-red--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-red--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-red--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-red--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-red--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-red--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-red--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-red--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-red--m-outline--m-clicked--BorderColor); } &.pf-m-orange { --#{$label}--BackgroundColor: var(--#{$label}--m-orange--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-orange--Color); --#{$label}__icon--Color: var(--#{$label}--m-orange__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-orange--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-orange--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-orange--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-orange--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-orange--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-orange--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-orange--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-orange--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-orange--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-orange--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-orange--m-outline--m-clicked--BorderColor); } &.pf-m-orangered { --#{$label}--BackgroundColor: var(--#{$label}--m-orangered--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-orangered--Color); --#{$label}__icon--Color: var(--#{$label}--m-orangered__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-orangered--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-orangered--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-orangered--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-orangered--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-orangered--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-orangered--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-orangered--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-orangered--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-orangered--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-orangered--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-orangered--m-outline--m-clicked--BorderColor); } &.pf-m-yellow { --#{$label}--BackgroundColor: var(--#{$label}--m-yellow--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-yellow--Color); --#{$label}__icon--Color: var(--#{$label}--m-yellow__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-yellow--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-yellow--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-yellow--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-yellow--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-yellow--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-yellow--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-yellow--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-yellow--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-yellow--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-yellow--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-yellow--m-outline--m-clicked--BorderColor); } &.pf-m-green { --#{$label}--BackgroundColor: var(--#{$label}--m-green--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-green--Color); --#{$label}__icon--Color: var(--#{$label}--m-green__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-green--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-green--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-green--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-green--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-green--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-green--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-green--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-green--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-green--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-green--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-green--m-outline--m-clicked--BorderColor); } &.pf-m-teal { --#{$label}--BackgroundColor: var(--#{$label}--m-teal--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-teal--Color); --#{$label}__icon--Color: var(--#{$label}--m-teal__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-teal--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-teal--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-teal--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-teal--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-teal--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-teal--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-teal--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-teal--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-teal--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-teal--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-teal--m-outline--m-clicked--BorderColor); } &.pf-m-purple { --#{$label}--BackgroundColor: var(--#{$label}--m-purple--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-purple--Color); --#{$label}__icon--Color: var(--#{$label}--m-purple__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-purple--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-purple--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-purple--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-purple--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-purple--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-purple--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-purple--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-purple--m-clicked--BorderColor); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-purple--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-purple--m-outline--m-clickable--hover--BorderColor); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-purple--m-outline--m-clicked--BorderColor); } &.pf-m-success { --#{$label}--BackgroundColor: var(--#{$label}--m-success--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-success--Color); --#{$label}__icon--Color: var(--#{$label}--m-success__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-success--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-success--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-success--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-success--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-success--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-success--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-success--m-clicked--BorderColor); --#{$label}--m-outline__icon--Color: var(--#{$label}--m-success--m-outline__icon--Color); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-success--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-success--m-outline--m-clickable--hover--BorderColor); --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-success--m-outline--m-clicked--BorderColor); + --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-success--m-outline--m-clicked__icon--Color); } &.pf-m-warning { --#{$label}--BackgroundColor: var(--#{$label}--m-warning--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-warning--Color); --#{$label}__icon--Color: var(--#{$label}--m-warning__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-warning--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-warning--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-warning--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-warning--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-warning--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-warning--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-warning--m-clicked--BorderColor); --#{$label}--m-outline__icon--Color: var(--#{$label}--m-warning--m-outline__icon--Color); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-warning--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-warning--m-outline--m-clickable--hover--BorderColor); --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-warning--m-outline--m-clicked--BorderColor); + --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-warning--m-outline--m-clicked__icon--Color); } &.pf-m-danger { --#{$label}--BackgroundColor: var(--#{$label}--m-danger--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-danger--Color); --#{$label}__icon--Color: var(--#{$label}--m-danger__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-danger--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-danger--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-danger--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-danger--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-danger--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-danger--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-danger--m-clicked--BorderColor); --#{$label}--m-outline__icon--Color: var(--#{$label}--m-danger--m-outline__icon--Color); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-danger--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-danger--m-outline--m-clickable--hover--BorderColor); --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-danger--m-outline--m-clicked--BorderColor); + --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-danger--m-outline--m-clicked__icon--Color); } &.pf-m-info { --#{$label}--BackgroundColor: var(--#{$label}--m-info--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-info--Color); --#{$label}__icon--Color: var(--#{$label}--m-info__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-info--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-info--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-info--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-info--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-info--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-info--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-info--m-clicked--BorderColor); --#{$label}--m-outline__icon--Color: var(--#{$label}--m-info--m-outline__icon--Color); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-info--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-info--m-outline--m-clickable--hover--BorderColor); --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-outline--m-clickable--hover__icon--Color); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-info--m-outline--m-clicked--BorderColor); + --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-info--m-outline--m-clicked__icon--Color); } &.pf-m-custom { --#{$label}--BackgroundColor: var(--#{$label}--m-custom--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-custom--Color); --#{$label}__icon--Color: var(--#{$label}--m-custom__icon--Color); + --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-custom--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--BackgroundColor: var(--#{$label}--m-custom--m-clickable--hover--BackgroundColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-custom--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-custom--m-clickable--hover__icon--Color); + --#{$label}--m-clicked--Color: var(--#{$label}--m-custom--m-clicked--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-custom--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-custom--m-clicked--BackgroundColor); + --#{$label}--m-clicked--BorderColor: var(--#{$label}--m-custom--m-clicked--BorderColor); --#{$label}--m-outline__icon--Color: var(--#{$label}--m-custom--m-outline__icon--Color); --#{$label}--m-outline--BorderColor: var(--#{$label}--m-custom--m-outline--BorderColor); --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-custom--m-outline--m-clickable--hover--BorderColor); - --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color); + --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-custom--m-outline--m-clickable--hover__icon--Color); + --#{$label}--m-outline--m-clicked--BorderColor: var(--#{$label}--m-custom--m-outline--m-clicked--BorderColor); + --#{$label}--m-outline--m-clicked__icon--Color: var(--#{$label}--m-custom--m-outline--m-clicked__icon--Color); } &.pf-m-compact { @@ -429,10 +618,22 @@ --#{$label}--PaddingBlockEnd: var(--#{$label}--m-compact--PaddingBlockEnd); --#{$label}--PaddingInlineStart: var(--#{$label}--m-compact--PaddingInlineStart); --#{$label}--FontSize: var(--#{$label}--m-compact--FontSize); + --#{$label}--Gap: var(--#{$label}--m-compact--Gap); + --#{$label}__content--Gap: var(--#{$label}--m-compact__content--Gap); + --#{$label}__icon--FontSize: var(--#{$label}--m-compact__icon--FontSize); + --#{$label}__actions--c-button--FontSize: var(--#{$label}--m-compact__actions--c-button--FontSize); --#{$label}--MinWidth: var(--#{$label}--m-compact--MinWidth); --#{$label}--m-editable--TextUnderlineOffset: var(--#{$label}--m-compact--m-editable--TextUnderlineOffset); } + &.pf-m-large { + --#{$label}--FontSize: var(--#{$label}--m-large--FontSize); + --#{$label}--Gap: var(--#{$label}--m-large--Gap); + --#{$label}__content--Gap: var(--#{$label}--m-large__content--Gap); + --#{$label}__icon--FontSize: var(--#{$label}--m-large__icon--FontSize); + --#{$label}__actions--c-button--FontSize: var(--#{$label}--m-large__actions--c-button--FontSize); + } + &.pf-m-filled { .#{$label}__actions .#{$button} { --#{$button}__icon--Color: var(--#{$label}--m-filled__actions--c-button__icon--Color); @@ -450,6 +651,9 @@ --#{$label}--m-clickable--hover--BorderColor: var(--#{$label}--m-outline--m-clickable--hover--BorderColor); --#{$label}--m-clickable--hover--Color: var(--#{$label}--m-outline--m-clickable--hover--Color); --#{$label}--m-clickable--hover__icon--Color: var(--#{$label}--m-outline--m-clickable--hover__icon--Color); + --#{$label}--m-clicked__icon--Color: var(--#{$label}--m-outline--m-clicked__icon--Color); + --#{$label}--m-clicked--BackgroundColor: var(--#{$label}--m-outline--m-clicked--BackgroundColor); + --#{$label}--m-clicked--Color: var(--#{$label}--m-outline--m-clicked--Color); } &.pf-m-editable { @@ -526,6 +730,23 @@ } } + &.pf-m-clicked { + .#{$label}__content, + .#{$label}__content:is(:hover, :focus) { + --#{$label}--Color: var(--#{$label}--m-clicked--Color); + --#{$label}__icon--Color: var(--#{$label}--m-clicked__icon--Color); + --#{$label}--BackgroundColor: var(--#{$label}--m-clicked--BackgroundColor); + --#{$label}--BorderWidth: var(--#{$label}--m-clicked--BorderWidth); + --#{$label}--BorderColor: var(--#{$label}--m-clicked--BorderColor); + --#{$label}--m-outline--BorderWidth: var(--#{$label}--m-outline--m-clicked--BorderWidth); + --#{$label}--m-outline--BorderColor: var(--#{$label}--m-outline--m-clicked--BorderColor); + } + + ~ .#{$label}__actions .#{$button} { + --#{$label}--m-filled__actions--c-button__icon--Color: var(--#{$label}--m-clicked__icon--Color); + } + } + &.pf-m-disabled { --#{$label}--BackgroundColor: var(--#{$label}--m-disabled--BackgroundColor); --#{$label}--Color: var(--#{$label}--m-disabled--Color); diff --git a/src/patternfly/demos/Card/examples/Card.md b/src/patternfly/demos/Card/examples/Card.md index e3b4aa2bbb..90e16beef2 100644 --- a/src/patternfly/demos/Card/examples/Card.md +++ b/src/patternfly/demos/Card/examples/Card.md @@ -22,21 +22,21 @@ import './Card.css' {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label--IsCompact=true label-text--value="Set up your cluster" label-icon--value="info-circle"}} + {{> label label--IsCompact=true label-text--value="Set up your cluster" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="purple" label--IsCompact=true label-text--value="Guided tours" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="green" label--IsCompact=true label-text--value="Quick starts" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label--IsCompact=true label-text--value="1 more"}} @@ -67,7 +67,7 @@ import './Card.css' {{#> grid grid--modifier="pf-m-all-6-col-on-md pf-m-all-3-col-on-lg pf-m-gutter"}} {{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}} {{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}} - {{> label label--color="blue" label-text--value="Set up your cluster" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Set up your cluster" label-icon--value="rh-ui-information-fill"}} Continue setting up your cluster to access all you can in the Console {{#> list list--modifier="pf-m-plain"}} @@ -87,7 +87,7 @@ import './Card.css' {{/l-flex}} {{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}} {{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}} - {{> label label--color="purple" label-text--value="Guided tours" label-icon--value="info-circle"}} + {{> label label--color="purple" label-text--value="Guided tours" label-icon--value="rh-ui-information-fill"}} Tour some of the key features around the console {{#> list list--modifier="pf-m-plain"}} @@ -104,7 +104,7 @@ import './Card.css' {{/l-flex}} {{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}} {{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}} - {{> label label--color="green" label-text--value="Quick starts" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Quick starts" label-icon--value="rh-ui-information-fill"}} Get started with features using our step-by-step documentation {{#> list list--modifier="pf-m-plain"}} @@ -124,7 +124,7 @@ import './Card.css' {{/l-flex}} {{#> l-flex l-flex--modifier="pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start"}} {{#> l-flex l-flex--modifier="pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow"}} - {{> label label--color="orange" label-text--value="Learning resources" label-icon--value="info-circle"}} + {{> label label--color="orange" label-text--value="Learning resources" label-icon--value="rh-ui-information-fill"}} Learn about new features within the Console and get started with demo apps {{#> list list--modifier="pf-m-plain"}} diff --git a/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs b/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs index 781312f46a..25da3193fa 100644 --- a/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs +++ b/src/patternfly/demos/Card/templates/card-demo--notification-drawer.hbs @@ -13,27 +13,27 @@ label--id="default-red-icon" label--color="red" label-text--value="1" - label-icon--value="exclamation-circle"}} + label-icon--value="rh-ui-error-fill"}} {{> label label--id="default-orange-icon" label--color="orange" label-text--value="3" - label-icon--value="exclamation-triangle"}} + label-icon--value="rh-ui-warning-fill"}} {{> label label--id="default-green-icon" label--color="green" label-text--value="3" - label-icon--value="check-circle"}} + label-icon--value="rh-ui-check-circle-fill"}} {{> label label--id="default-blue-icon" label--color="blue" label-text--value="3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{> label label--id="default-blue-icon" label--color="teal" label-text--value="3" - label-icon--value="bell"}} + label-icon--value="rh-ui-notification-fill"}} {{/l-flex}} {{/notification-drawer-group-toggle-title}} {{/l-flex}} diff --git a/src/patternfly/demos/Card/templates/card-template-status.hbs b/src/patternfly/demos/Card/templates/card-template-status.hbs index 11fe963101..ad166cca2a 100644 --- a/src/patternfly/demos/Card/templates/card-template-status.hbs +++ b/src/patternfly/demos/Card/templates/card-template-status.hbs @@ -134,35 +134,35 @@ label--id="default-red-icon" label--color="red" label-text--value="1" - label-icon--value="exclamation-circle"}} + label-icon--value="rh-ui-error-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--id="default-orange-icon" label--color="orange" label-text--value="1" - label-icon--value="exclamation-circle"}} + label-icon--value="rh-ui-error-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--id="default-green-icon" label--color="green" label-text--value="3" - label-icon--value="check-circle"}} + label-icon--value="rh-ui-check-circle-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--id="default-blue-icon" label--color="blue" label-text--value="3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--id="default-teal-icon" label--color="teal" label-text--value="3" - label-icon--value="bell"}} + label-icon--value="rh-ui-notification-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} diff --git a/src/patternfly/demos/Form/examples/BasicForms.md b/src/patternfly/demos/Form/examples/BasicForms.md index e500f47b25..4e16606aa2 100644 --- a/src/patternfly/demos/Form/examples/BasicForms.md +++ b/src/patternfly/demos/Form/examples/BasicForms.md @@ -424,10 +424,10 @@ subsection: forms {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label--id=(concat label-group--id '-label-1') label--IsRemovable=true label-text--value="prometheus=k8s" label-icon--value="info-circle"}} + {{> label label--id=(concat label-group--id '-label-1') label--IsRemovable=true label-text--value="prometheus=k8s" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--id=(concat label-group--id '-label-2') label--IsRemovable=true label-text--value="new" label-icon--value="info-circle"}} + {{> label label--id=(concat label-group--id '-label-2') label--IsRemovable=true label-text--value="new" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsAdd="true" label-text--value="Add Label"}} diff --git a/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs b/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs index 8d409508c7..d5b956bd78 100644 --- a/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs +++ b/src/patternfly/demos/Tabs/tabs--pod-page-title.hbs @@ -12,6 +12,6 @@ {{/title}} {{/l-flex-item}} {{#> l-flex-item l-flex-item--modifier="pf-m-flex-none"}} - {{> label label-text--value="Running" label-icon--value="info-circle"}} + {{> label label-text--value="Running" label-icon--value="rh-ui-information-fill"}} {{/l-flex-item}} {{/l-flex}}
Continue setting up your cluster to access all you can in the Console
Tour some of the key features around the console
Get started with features using our step-by-step documentation
Learn about new features within the Console and get started with demo apps