@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.css

PatternFly Elements

:host {
	--pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
	--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
	--pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md, 1rem);
	--pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md, 1rem);
	--pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md, 1rem);
	--pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md, 1rem);
	--pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
	--pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
	--pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
	--pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
	--pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
	--pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
	--pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem));
	--pf-c-clipboard-copy--m-inline--PaddingTop: 0;
	--pf-c-clipboard-copy--m-inline--PaddingBottom: 0;
	--pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs, 0.25rem);
	--pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
	--pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace);
	--pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
	--pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
	--pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
	--pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
	--pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
	--pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
	--pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
  --pf-icon--size: var(--pf-global--FontSize--md, 1rem);
}

[hidden],
[inert],
[inert]::slotted(*) {
  display: none !important;
}

#container {
  flex-direction: column;
}

#container,
#input-group,
#wrapper {
  display: flex;
}

.inline #wrapper {
  display: inline-flex;
}

#input-group > * + * {
  margin-left: -1px;
}

input {
  color: var(--pf-c-form-control--Color);
  width: var(--pf-c-form-control--Width);
  padding:
    var(--pf-c-form-control--PaddingTop)
    var(--pf-c-form-control--PaddingRight)
    var(--pf-c-form-control--PaddingBottom)
    var(--pf-c-form-control--PaddingLeft);
  font-size: var(--pf-c-form-control--FontSize);
  line-height: var(--pf-c-form-control--LineHeight);
  background-color: var(--pf-c-form-control--BackgroundColor);
  background-repeat: no-repeat;
  border: var(--pf-c-form-control--BorderWidth) solid;
  border-color:
    var(--pf-c-form-control--BorderTopColor)
    var(--pf-c-form-control--BorderRightColor)
    var(--pf-c-form-control--BorderBottomColor)
    var(--pf-c-form-control--BorderLeftColor);
  border-radius: var(--pf-c-form-control--BorderRadius);
  margin: 0;
  appearance: none;
  height: var(--pf-c-form-control--Height);
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

input[disabled] {
  background-color: var(--pf-c-form-control--readonly--BackgroundColor);
}

textarea {
  display: flex;
  flex: 1 1 auto;
  padding:
    var(--pf-c-clipboard-copy__expandable-content--PaddingTop)
    var(--pf-c-clipboard-copy__expandable-content--PaddingRight)
    var(--pf-c-clipboard-copy__expandable-content--PaddingBottom)
    var(--pf-c-clipboard-copy__expandable-content--PaddingLeft);
  word-wrap: break-word;
  background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor);
  background-clip: padding-box;
  border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor);
  border-width:
    var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth)
    var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth)
    var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth)
    var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth);
  box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);
  margin: 0;
  color: inherit;
  font-family: inherit;
}

#input-group {
  display: flex;
  height: 100%;
}

#container.code textarea {
  font-family: var(--pf-global--FontFamily--monospace,
    var(--pf-global--FontFamily--redhat--monospace,
      "RedHatMono",
      "Liberation Mono",
      consolas,
      "SFMono-Regular",
      menlo,
      monaco,
      "Courier New",
      monospace));
}

#container.expanded #expand-button pf-icon {
  rotate: 90deg;
}

#container.inline {
  display: inline;
  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor);
  padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop);
  padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom);
  padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft);
  word-break: break-word;
  white-space: normal;
}

#container:is(.compact, .inline) #input-group {
  display: contents;
}

#container:is(.compact, .inline) #input-group {
  background-color: var(--pf-c-button--m-plain--BackgroundColor,
    var(--pf-global--BackgroundColor--200, #f0f0f0));
}

#container.compact.block {
  display: block;
  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor);
}

#container:is(.compact, .inline) #copy-button,
#container:is(.compact, .inline) slot[name="actions"]::slotted(*) {
  --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop) !important;
  --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight) !important;
  --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom) !important;
  --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft) !important;
  margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop));
  margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom));
}