@kelvininc/ui-components
Version:
Kelvin UI Components
66 lines (65 loc) • 2.08 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
:host {
/**
@prop --container-width: Width of the container
@prop --container-padding: The container's padding
@prop --container-hover-background-color: The container's hover state background color
@prop --container-gap: The gap between the container's elements
@prop --icon-start-opacity: Start icon opacity
@prop --icon-color-default: Start icon color
@prop --icon-color-success: Success icon color
@prop --icon-background-color-success: Success icon background color
@prop --icon-size: The copy icon size
**/
--container-width: 100%;
--container-padding: var(--kv-spacing-2x, 8px);
--container-hover-background-color: kv-color("neutral-6");
--container-gap: var(--kv-spacing-2x, 8px);
--icon-start-opacity: 0;
--icon-color-default: var(--kv-neutral-2, #e5e5e5);
--icon-color-success: var(--kv-success, #05a357);
--icon-background-color-success: var(--kv-neutral-0, #fff);
--icon-size: 16px;
}
.copy-to-clipboard-container {
width: var(--container-width);
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 4px;
gap: var(--container-gap);
padding: var(--container-padding);
box-sizing: border-box;
transition: background-color 0.2s ease-in-out, opacity 0.25s ease-in-out;
}
.copy-to-clipboard-container:hover {
cursor: pointer;
background-color: var(--container-hover-background-color);
}
.copy-to-clipboard-container:hover .state-icon kv-icon {
opacity: 1;
}
.copy-to-clipboard-container .state-icon kv-icon {
--icon-height: var(--icon-size);
--icon-width: var(--icon-size);
--icon-color: var(--icon-color-default);
opacity: var(--icon-start-opacity);
}
.copy-to-clipboard-container .state-icon--success kv-icon {
--icon-color: var(--icon-color-success);
--icon-background-color: var(--icon-background-color-success);
}