@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
55 lines (54 loc) • 1.5 kB
CSS
.button.hasIcon.small {
padding: 0 0.3125rem;
}
.button.hasIcon.small .bg {
width: 2.25rem;
}
.button.hasIcon.large {
padding: 0 0.375rem;
}
.button.hasIcon.large .bg {
width: 3rem;
}
.button.hasIcon.iconAfter .bg {
left: auto;
right: 0;
}
:global(.enact-locale-right-to-left) .button.hasIcon.iconAfter .bg {
left: 0;
right: auto;
}
.button.hasIcon.iconAfter .icon {
margin-left: 1.125rem;
margin-right: 0;
}
:global(.enact-locale-right-to-left) .button.hasIcon.iconAfter .icon {
margin-left: 0;
margin-right: 1.125rem;
}
.button.hasIcon.iconBefore .icon {
margin-left: 0;
margin-right: 1.125rem;
}
:global(.enact-locale-right-to-left) .button.hasIcon.iconBefore .icon {
margin-left: 1.125rem;
margin-right: 0;
}
.button.hasIcon:global(.neutral) .client :not(.icon) {
color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .button.hasIcon:global(.neutral):global(.highContrast) .client :not(.icon) {
color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.button.hasIcon:global(.light) .client :not(.icon) {
color: rgb(var(--sand-text-color-rgb, 46, 50, 57));
}
.button.hasIcon:global(.game) .client :not(.icon) {
color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.green) .button.hasIcon:global(.game) .client :not(.icon) {
color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.orange) .button.hasIcon:global(.game) .client :not(.icon) {
color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}