106 lines
1.8 KiB
SCSS
106 lines
1.8 KiB
SCSS
@import "@Themes/constants.scss";
|
|
|
|
.root {
|
|
cursor: pointer;
|
|
border-radius: var(--button-icon-button-radius, 8px);
|
|
display: inline-flex;
|
|
padding: var(--spacing-sm, 8px);
|
|
align-items: flex-start;
|
|
|
|
svg {
|
|
width: 24px;
|
|
min-width: 24px;
|
|
stroke: var(--button-icon-button-default-default);
|
|
}
|
|
|
|
&:hover {
|
|
svg {
|
|
stroke: var(--button-icon-button-default-hovered);
|
|
}
|
|
}
|
|
|
|
&.neutral {
|
|
background: var(--button-icon-button-neutral-default);
|
|
|
|
svg {
|
|
stroke: var(--button-icon-button-default-default);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--button-icon-button-neutral-hovered);
|
|
|
|
svg {
|
|
stroke: var(--button-icon-button-default-hovered);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.primary {
|
|
background: var(--button-icon-button-primary-default);
|
|
|
|
svg {
|
|
stroke: var(--button-icon-button-primary-contrast);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--button-icon-button-primary-hovered);
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
background: var(--button-icon-button-error-default);
|
|
|
|
svg {
|
|
stroke: var(--button-icon-button-error-contrast);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--button-icon-button-error-hovered);
|
|
}
|
|
}
|
|
&.success {
|
|
background: var(--button-icon-button-success-default);
|
|
|
|
svg {
|
|
stroke: var(--button-icon-button-success-contrast);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--button-icon-button-success-hovered);
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
background: var(--button-icon-button-warning-default);
|
|
|
|
svg {
|
|
stroke: var(--button-icon-button-warning-contrast);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--button-icon-button-warning-hovered);
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
background: var(--button-icon-button-info-default);
|
|
|
|
svg {
|
|
stroke: var(--button-icon-button-info-contrast);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--button-icon-button-info-hovered);
|
|
}
|
|
}
|
|
|
|
&.default {
|
|
padding: 0;
|
|
}
|
|
|
|
&.disabled {
|
|
cursor: default;
|
|
opacity: var(--opacity-disabled, 0.3);
|
|
}
|
|
}
|