@patternfly/patternfly 4.212.1 → 4.213.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/components/Icon/icon.css +119 -0
  2. package/components/Icon/icon.scss +149 -0
  3. package/components/_all.scss +1 -0
  4. package/docs/components/DualListSelector/examples/DualListSelector.md +4 -46
  5. package/docs/components/FormControl/examples/FormControl.md +12 -12
  6. package/docs/components/Icon/examples/Icon.md +255 -0
  7. package/docs/components/LogViewer/examples/LogViewer.md +28 -28
  8. package/docs/components/TabContent/examples/TabContent.md +21 -11
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +120 -0
  11. package/patternfly.css +120 -0
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -15971,6 +15971,126 @@ textarea.pf-c-form-control {
15971
15971
  --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
15972
15972
  }
15973
15973
 
15974
+ .pf-c-icon {
15975
+ --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
15976
+ --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
15977
+ --pf-c-icon--m-inline--Width: 1em;
15978
+ --pf-c-icon--m-inline--Height: 1em;
15979
+ --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
15980
+ --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
15981
+ --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
15982
+ --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
15983
+ --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
15984
+ --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
15985
+ --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
15986
+ --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
15987
+ --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
15988
+ --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
15989
+ --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
15990
+ --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
15991
+ --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
15992
+ --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
15993
+ --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
15994
+ --pf-c-icon--m-inline__content--FontSize: 1em;
15995
+ --pf-c-icon__content--svg--VerticalAlign: -.125em;
15996
+ --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
15997
+ --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
15998
+ --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
15999
+ --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
16000
+ position: relative;
16001
+ display: inline-flex;
16002
+ align-items: center;
16003
+ justify-content: center;
16004
+ width: var(--pf-c-icon--Width);
16005
+ height: var(--pf-c-icon--Height);
16006
+ }
16007
+ .pf-c-icon.pf-m-inline {
16008
+ --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
16009
+ --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
16010
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
16011
+ --pf-c-icon__content--Color: currentcolor;
16012
+ line-height: 1;
16013
+ }
16014
+ .pf-c-icon.pf-m-inline .pf-c-spinner {
16015
+ --pf-c-spinner--diameter: 1em;
16016
+ }
16017
+ .pf-c-icon.pf-m-sm {
16018
+ --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
16019
+ --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
16020
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
16021
+ }
16022
+ .pf-c-icon.pf-m-md {
16023
+ --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
16024
+ --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
16025
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
16026
+ }
16027
+ .pf-c-icon.pf-m-lg {
16028
+ --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
16029
+ --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
16030
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
16031
+ }
16032
+ .pf-c-icon.pf-m-xl {
16033
+ --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
16034
+ --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
16035
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
16036
+ }
16037
+ .pf-c-icon.pf-m-in-progress {
16038
+ --pf-c-icon__content--Opacity: 0;
16039
+ --pf-c-icon__progress--Opacity: 1;
16040
+ }
16041
+
16042
+ .pf-c-icon__content,
16043
+ .pf-c-icon__progress {
16044
+ font-size: var(--pf-c-icon__content--FontSize);
16045
+ }
16046
+ .pf-c-icon__content svg,
16047
+ .pf-c-icon__progress svg {
16048
+ vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
16049
+ }
16050
+ .pf-c-icon__content.pf-m-sm,
16051
+ .pf-c-icon__progress.pf-m-sm {
16052
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
16053
+ }
16054
+ .pf-c-icon__content.pf-m-md,
16055
+ .pf-c-icon__progress.pf-m-md {
16056
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
16057
+ }
16058
+ .pf-c-icon__content.pf-m-lg,
16059
+ .pf-c-icon__progress.pf-m-lg {
16060
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
16061
+ }
16062
+ .pf-c-icon__content.pf-m-xl,
16063
+ .pf-c-icon__progress.pf-m-xl {
16064
+ --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
16065
+ }
16066
+
16067
+ .pf-c-icon__content {
16068
+ color: var(--pf-c-icon__content--Color);
16069
+ opacity: var(--pf-c-icon__content--Opacity, 1);
16070
+ }
16071
+ .pf-c-icon__content.pf-m-danger {
16072
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
16073
+ }
16074
+ .pf-c-icon__content.pf-m-warning {
16075
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
16076
+ }
16077
+ .pf-c-icon__content.pf-m-success {
16078
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
16079
+ }
16080
+ .pf-c-icon__content.pf-m-info {
16081
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
16082
+ }
16083
+ .pf-c-icon__content.pf-m-default {
16084
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
16085
+ }
16086
+
16087
+ .pf-c-icon__progress {
16088
+ position: absolute;
16089
+ top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
16090
+ opacity: var(--pf-c-icon__progress--Opacity, 0);
16091
+ transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
16092
+ }
16093
+
15974
16094
  .pf-c-inline-edit {
15975
16095
  --pf-c-inline-edit__group--item--MarginRight: var(--pf-global--spacer--sm);
15976
16096
  --pf-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-global--link--Color);