@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
102 lines (101 loc) • 3.42 kB
CSS
.icon {
background-repeat: no-repeat;
text-align: center;
position: relative;
font-family: "Sandstone Icons";
margin: 0.5rem;
overflow: hidden;
width: var(--icon-size, 1.625rem );
height: var(--icon-size, 1.625rem );
font-size: var(--icon-size, 1.625rem );
line-height: var(--icon-size, 1.625rem );
background-position: center 0;
background-size: var(--icon-size, undefined 1.625rem ) calc(var(--icon-size, 1.625rem ) * 2);
}
.icon.large {
--icon-size: 2.25rem;
}
.icon.medium {
--icon-size: 1.875rem;
}
.icon.small {
--icon-size: 1.625rem;
}
.icon.tiny {
--icon-size: 1.25rem;
}
.icon.dingbat {
font-family: "LG Icons";
}
.icon:global(.neutral) {
color: inherit;
}
:global(.enact-a11y-high-contrast) .icon:global(.neutral):global(.highContrast) {
color: inherit;
}
.icon:global(.light) {
color: inherit;
}
.icon:global(.game) {
color: inherit;
}
:global(.green) .icon:global(.game) {
color: inherit;
}
:global(.orange) .icon:global(.game) {
color: inherit;
}
:global(.spotlight-input-key) :global(.neutral) :global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.neutral) :global(.spottable):focus .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-touch) :global(.neutral) :global(.spottable):active .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) :global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) :global(.spottable):focus .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) :global(.spottable):active .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-key) :global(.light) :global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.light) :global(.spottable):focus .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-touch) :global(.light) :global(.spottable):active .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-key) :global(.game) :global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.game) :global(.spottable):focus .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-touch) :global(.game) :global(.spottable):active .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-key) :global(.green) :global(.game) :global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.green) :global(.game) :global(.spottable):focus .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-touch) :global(.green) :global(.game) :global(.spottable):active .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-key) :global(.orange) :global(.game) :global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.orange) :global(.game) :global(.spottable):focus .icon {
background-position: center 100%;
color: inherit;
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) :global(.spottable):active .icon {
background-position: center 100%;
color: inherit;
}