hubl/src/styles/hubl-framework/tags/_index.scss

84 lines
1.6 KiB
SCSS

.tag:not(:empty) {
cursor: pointer;
height: 17px;
font-size: 12px;
letter-spacing: 0.24px;
line-height: 17px;
border: 1px solid var(--color-primary);
border-radius: 3px;
padding: 4px 11px;
&.beta {
font-size: 14px;
font-weight: 600;
}
&.color-primary {
background: white;
border: 1px solid var(--color-primary);
color: var(--color-primary);
&.hover:hover {
background: var(--color-primary);
color: white;
}
}
&.color-secondary {
background: white;
border: 1px solid var(--color-secondary);
color: var(--color-secondary);
&.hover:hover {
background: var(--color-secondary);
color: white;
}
}
&.color-third {
background: white;
border: 1px solid var(--color-third);
color: var(--color-third);
&.hover:hover {
background: var(--color-third);
color: white;
}
}
&.reversed {
&.color-primary {
background: var(--color-primary);
border: 1px solid var(--color-primary);
color: white;
&.hover:hover {
background: white;
color: var(--color-primary);
}
}
&.color-secondary {
background: var(--color-secondary);
border: 1px solid var(--color-secondary);
color: white;
&.hover:hover {
background: white;
color: var(--color-secondary);
}
}
&.color-third {
background: var(--color-third);
border: 1px solid var(--color-third);
color: white;
&.hover:hover {
background: white;
color: var(--color-third);
}
}
}
}