forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
105 lines
2.1 KiB
SCSS
105 lines
2.1 KiB
SCSS
.action-link {
|
|
color: var(--gin-color-primary);
|
|
background-color: transparent;
|
|
border-radius: var(--gin-border-s);
|
|
|
|
&:hover {
|
|
color: var(--gin-color-primary-hover);
|
|
background-color: var(--gin-bg-item-hover);
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--gin-color-primary-active);
|
|
background-color: var(--gin-color-primary-light-hover);
|
|
}
|
|
|
|
&.action-link--extrasmall {
|
|
font-size: var(--gin-font-size-xxs);
|
|
}
|
|
|
|
&:before {
|
|
background-image: none;
|
|
background-color: var(--gin-color-primary);
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
}
|
|
|
|
&--icon-ex:hover::before,
|
|
&--icon-checkmark:hover:before,
|
|
&--icon-show:hover::before,
|
|
&--icon-cog:hover::before,
|
|
&--icon-hide:hover::before,
|
|
&--icon-show:before,
|
|
&--icon-hide:before {
|
|
background-image: none;
|
|
background-color: var(--gin-color-primary);
|
|
}
|
|
|
|
&--icon-checkmark:before {
|
|
mask-image: icon('checkmark');
|
|
}
|
|
|
|
&--icon-show:before {
|
|
mask-image: icon('show');
|
|
}
|
|
|
|
&--icon-hide:before {
|
|
mask-image: icon('hide');
|
|
}
|
|
|
|
&--icon-cog::before {
|
|
mask-image: icon('config');
|
|
}
|
|
|
|
&--icon-ex::before {
|
|
mask-image: icon('remove');
|
|
}
|
|
|
|
&--icon-key::before {
|
|
mask-image: icon('devel');
|
|
}
|
|
|
|
&--icon-questionmark::before {
|
|
mask-image: icon('help');
|
|
}
|
|
}
|
|
|
|
.action-link--icon-trash.action-link--danger,
|
|
.button.button--danger,
|
|
a.button.button--danger {
|
|
color: var(--gin-color-danger);
|
|
box-shadow: 0 1px 2px var(--gin-color-danger-lightest);
|
|
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
// border-color: transparent !important;
|
|
border-color: var(--gin-color-danger) !important;
|
|
|
|
&:before {
|
|
background-image: none;
|
|
background-color: var(--gin-color-danger);
|
|
mask-image: icon('trash');
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: var(--gin-bg-layer);
|
|
background-color: var(--gin-color-danger);
|
|
|
|
&:before {
|
|
background-color: var(--gin-bg-layer);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Primary danger button
|
|
.button--primary.button--danger {
|
|
color: var(--gin-bg-layer);
|
|
background-color: var(--gin-color-danger);
|
|
}
|