46 lines
1.1 KiB
CSS
46 lines
1.1 KiB
CSS
/**
|
|
* @file
|
|
* Icon link component.
|
|
*/
|
|
|
|
@import "../base/variables.pcss.css";
|
|
|
|
:root {
|
|
/* default */
|
|
--icon-link-bg-color: var(--color-white);
|
|
--icon-link-border-color: var(--color-lightgray);
|
|
/* active */
|
|
--icon-link--active-bg-color: var(--color-absolutezero);
|
|
--icon-link--active-border-color: var(--color-absolutezero);
|
|
/* hover */
|
|
--icon-link--hover-bg-color: var(--color-bgblue-hover);
|
|
--icon-link--hover-border-color: var(--color-lightgray-o-80);
|
|
}
|
|
|
|
.icon-link {
|
|
display: flex;
|
|
padding: 0;
|
|
border: 1px solid var(--icon-link-border-color);
|
|
border-radius: 50%;
|
|
background-color: var(--icon-link-bg-color);
|
|
}
|
|
|
|
.icon-link:hover {
|
|
border-color: var(--icon-link--hover-border-color);
|
|
background-color: var(--icon-link--hover-bg-color);
|
|
}
|
|
|
|
.icon-link:focus {
|
|
box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus);
|
|
}
|
|
|
|
.icon-link:active,
|
|
.open > .icon-link {
|
|
border-color: var(--icon-link--active-border-color);
|
|
background-color: var(--icon-link--active-bg-color);
|
|
}
|
|
|
|
.icon-link--small:focus {
|
|
box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus);
|
|
}
|