@natlibfi/melinda-ui-commons
Version:
Common modules for Melinda UI applications
185 lines (150 loc) • 4.04 kB
CSS
/* ---------------------------------------------------------------------------- */
/* TAG */
/* */
/* Keyword tags, filter tags and index terms tags. */
/* - Tags can be static (view only) */
/* - Tags can have selected and success states */
/* ---------------------------------------------------------------------------- */
.tag-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 12px;
gap: 12px;
}
.tag-wrapper {
display: flex;
color: var(--color-primary-blue);
background-color: var(--color-blue-40);
font-size: var(--font-size-label-small);
font-family: var(--font-family-label);
font-weight: var(--font-weight-label);
justify-content: center;
align-items: center;
text-align: center;
width: fit-content;
min-height: 32px;
padding-left: 12px;
padding-right: 12px;
border-radius: 24px;
border-width: 2px;
border-style: solid;
border-color: transparent;
span {
font-size: var(--font-size-icon-small);
padding-right: 8px;
&.icon-close,
&.icon-check {
display: none;
}
}
&:hover,
&:focus {
border-style: solid;
border-color: var(--color-blue-100);
border-width: 2px;
cursor: pointer;
}
&:active {
border-style: solid;
border-color: var(--color-blue-100);
border-width: 2px;
outline-offset: 2px;
outline-color: var(--color-blue-100);
outline-width: 2px;
outline-style: solid;
span {
&.icon-close {
color: var(--color-primary-white);
background-color: var(--color-functional-red);
}
&.icon-check {
color: var(--color-primary-white);
background-color: var(--color-functional-green);
}
}
}
&.static {
border-color: var(--color-blue-60);
&:hover,
&:focus {
background-color: var(--color-blue-60);
border-color: var(--color-blue-60);
cursor: default;
}
&:active {
background-color: var(--color-blue-60);
border-color: var(--color-blue-60);
cursor: default;
outline: none;
}
}
&.filter {
span {
font-size: var(--font-size-icon-small);
padding-right: 8px;
&.icon-close {
display: flex;
color: var(--color-blue-100);
border-color: var(--color-blue-100);
justify-content: center;
align-items: center;
text-align: center;
font-size: 12px;
margin-left: 8px;
padding: 1px;
border-width: 1px;
border-style: solid;
border-radius: 50%;
}
}
&:hover,
&:focus {
span {
&.icon-close {
color: var(--color-primary-white);
background-color: var(--color-functional-red);
border-color: var(--color-functional-red);
}
}
}
}
&.success {
span {
font-size: var(--font-size-icon-small);
padding-right: 8px;
&.icon-check {
display: flex;
color: var(--color-primary-white);
background-color: var(--color-functional-green);
border-color: var(--color-functional-green);
justify-content: center;
align-items: center;
text-align: center;
font-size: 12px;
margin-left: 8px;
padding: 1px;
border-width: 1px;
border-style: solid;
border-radius: 50%;
}
}
}
&.selected {
color: var(--color-primary-white);
background-color: var(--color-blue-100);
&:hover,
&:focus {
outline-offset: 2px;
outline-color: var(--color-blue-80);
outline-width: 2px;
outline-style: solid;
}
&:active {
outline-offset: 2px;
outline-color: var(--color-blue-100);
outline-width: 2px;
outline-style: solid;
}
}
}