consul/ui/packages/consul-ui/app/components/copyable-code/index.scss

79 lines
1.6 KiB
SCSS

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.copyable-code {
& {
display: flex;
align-items: flex-start;
position: relative;
width: 100%;
padding: 8px 14px;
padding-bottom: 3px;
border: var(--decor-border-100);
border-color: var(--token-color-surface-interactive-active);
border-radius: var(--decor-radius-200);
}
&.obfuscated {
padding-left: 4px;
}
&::after {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
display: block;
content: '';
background-color: var(--token-color-surface-strong);
}
.copy-button {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.copy-button button {
width: 40px;
height: 40px;
}
.copy-button button:empty::after {
display: none;
}
button[aria-expanded] {
margin-top: 1px;
margin-right: 4px;
cursor: pointer;
}
button[aria-expanded]::before {
content: '';
--icon-size: icon-000;
--icon-color: var(--token-color-foreground-faint);
}
button[aria-expanded='true']::before {
--icon-name: icon-eye-off;
}
button[aria-expanded='false']::before {
--icon-name: icon-eye;
}
pre {
padding-right: 30px;
}
code {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
hr {
width: calc(100% - 80px);
margin: 0;
margin-top: 8px;
margin-bottom: 13px;
border: 3px dashed var(--token-color-palette-neutral-300);
background-color: var(--token-color-surface-primary);
}
}