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

66 lines
1.3 KiB
SCSS

.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: rgb(var(--tone-gray-200));
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: rgb(var(--tone-gray-050));
}
.copy-button {
position: absolute;
top: 7px;
right: 12px;
}
button[aria-expanded] {
margin-top: 1px;
margin-right: 4px;
cursor: pointer;
}
button[aria-expanded]::before {
content: '';
--icon-size: icon-000;
--icon-color: rgb(var(--tone-gray-500));
}
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 rgb(var(--tone-gray-300));
background-color: rgb(var(--tone-gray-000));
}
}