Skip to content

Commit

Permalink
chore(field): flatten selectors
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 509916671
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Feb 15, 2023
1 parent c1e7759 commit 527203e
Show file tree
Hide file tree
Showing 7 changed files with 189 additions and 265 deletions.
64 changes: 24 additions & 40 deletions field/lib/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,58 +56,42 @@ $_enter-delay: $_label-duration - $_visible-duration;
// Content elements provided to the field (such as <input>) may use
// `currentColor` to inherit this property.
color: var(--_content-color);
}

.no-label &,
.focused &,
.populated & {
opacity: 1;
transition-delay: $_enter-delay;
}
.no-label .content,
.focused .content,
.populated .content {
opacity: 1;
transition-delay: $_enter-delay;
}

.disabled {
&.no-label,
&.focused,
&.populated {
.content {
opacity: var(--_disabled-content-opacity);
}
}
.disabled.no-label .content,
.disabled.focused .content,
.disabled.populated .content {
opacity: var(--_disabled-content-opacity);
}

:hover {
.content {
color: var(--_hover-content-color);
}
:hover .content {
color: var(--_hover-content-color);
}

.focused {
.content {
color: var(--_focus-content-color);
}
.focused .content {
color: var(--_focus-content-color);
}

.disabled {
.content {
color: var(--_disabled-content-color);
}
.disabled .content {
color: var(--_disabled-content-color);
}

.error:not(.disabled) {
.content {
color: var(--_error-content-color);
}
.error .content {
color: var(--_error-content-color);
}

&:hover {
.content {
color: var(--_error-hover-content-color);
}
}
.error:hover .content {
color: var(--_error-hover-content-color);
}

&.focused {
.content {
color: var(--_error-focus-content-color);
}
}
.error.focused .content {
color: var(--_error-focus-content-color);
}
}
112 changes: 48 additions & 64 deletions field/lib/_filled-field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ $_animation-duration: 150ms;
}
}

.label--floating {
.label.floating {
position: absolute;
top: 0;
}
Expand All @@ -88,10 +88,10 @@ $_animation-duration: 150ms;
width: 100%;
visibility: hidden;
z-index: -1;
}

.field:not(.disabled):hover & {
visibility: visible;
}
.field:not(.disabled):hover .state-layer {
visibility: visible;
}

.active-indicator {
Expand Down Expand Up @@ -126,49 +126,34 @@ $_animation-duration: 150ms;
transition: animation.standard(opacity, $_animation-duration),
transform 0s ease $_animation-duration;
}

.focused & {
&::after {
opacity: 1;
transform: scaleX(1);
transition: animation.standard(transform, $_animation-duration);
}
}
}

.field:not(.with-start) {
.start {
padding-inline-start: var(--_container-padding-horizontal);
}
.focused .active-indicator::after {
opacity: 1;
transform: scaleX(1);
transition: animation.standard(transform, $_animation-duration);
}

.field:not(.with-end) {
.end {
padding-inline-end: var(--_container-padding-horizontal);
}
.field:not(.with-start) .start {
padding-inline-start: var(--_container-padding-horizontal);
}

.field:not(.no-label) {
.container {
padding-bottom: var(--_with-label-container-padding-vertical);
padding-top: var(--_with-label-container-padding-vertical);
}
.field:not(.with-end) .end {
padding-inline-end: var(--_container-padding-horizontal);
}

.middle {
padding-top: var(--_label-text-populated-line-height);
}
.field:not(.no-label) .container {
padding-bottom: var(--_with-label-container-padding-vertical);
padding-top: var(--_with-label-container-padding-vertical);
}

:hover {
.active-indicator::before {
border-bottom-color: var(--_hover-active-indicator-color);
border-bottom-width: var(--_hover-active-indicator-height);
}
.field:not(.no-label) .middle {
padding-top: var(--_label-text-populated-line-height);
}

.state-layer {
background: var(--_hover-state-layer-color);
opacity: var(--_hover-state-layer-opacity);
}
:hover .active-indicator::before {
border-bottom-color: var(--_hover-active-indicator-color);
border-bottom-width: var(--_hover-active-indicator-height);
}

// Focus is on a separate element and does not need a focus selector
Expand All @@ -177,38 +162,37 @@ $_animation-duration: 150ms;
border-bottom-width: var(--_focus-active-indicator-height);
}

.disabled {
.active-indicator::before {
border-bottom-color: var(--_disabled-active-indicator-color);
border-bottom-width: var(--_disabled-active-indicator-height);
opacity: var(--_disabled-active-indicator-opacity);
}
:hover .state-layer {
background: var(--_hover-state-layer-color);
opacity: var(--_hover-state-layer-opacity);
}

.container::before {
background: var(--_disabled-container-color);
opacity: var(--_disabled-container-opacity);
}
.disabled .active-indicator::before {
border-bottom-color: var(--_disabled-active-indicator-color);
border-bottom-width: var(--_disabled-active-indicator-height);
opacity: var(--_disabled-active-indicator-opacity);
}

.error:not(.disabled) {
.active-indicator::before {
border-bottom-color: var(--_error-active-indicator-color);
}
.disabled .container::before {
background: var(--_disabled-container-color);
opacity: var(--_disabled-container-opacity);
}

.error .active-indicator::before {
border-bottom-color: var(--_error-active-indicator-color);
}

&:hover {
.active-indicator::before {
border-bottom-color: var(--_error-hover-active-indicator-color);
}
.error:hover .active-indicator::before {
border-bottom-color: var(--_error-hover-active-indicator-color);
}

.state-layer {
background: var(--_error-hover-state-layer-color);
opacity: var(--_error-hover-state-layer-opacity);
}
}
.error:hover .state-layer {
background: var(--_error-hover-state-layer-color);
opacity: var(--_error-hover-state-layer-opacity);
}

// Focus is on a separate element and does not need a focus selector
.active-indicator::after {
border-bottom-color: var(--_error-focus-active-indicator-color);
}
// Focus is on a separate element and does not need a focus selector
.error .active-indicator::after {
border-bottom-color: var(--_error-focus-active-indicator-color);
}
}
58 changes: 22 additions & 36 deletions field/lib/_label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
);
}

.label--resting {
.label.resting {
position: absolute;
top: 50%;
transform: translateY(-50%);
Expand All @@ -50,7 +50,7 @@
);
}

.label--floating {
.label.floating {
@include typography.theme-styles(
(
size: var(--_label-text-populated-size),
Expand All @@ -59,53 +59,39 @@
);
}

.label--hidden {
.label.hidden {
opacity: 0;
}

.no-label {
.label {
display: none;
}
.no-label .label {
display: none;
}

:hover {
.label {
color: var(--_hover-label-text-color);
}
:hover .label {
color: var(--_hover-label-text-color);
}

.focused {
.label {
color: var(--_focus-label-text-color);
}
.focused .label {
color: var(--_focus-label-text-color);
}

.disabled {
.label {
color: var(--_disabled-label-text-color);
.disabled .label {
color: var(--_disabled-label-text-color);
}

&:not(.label--hidden) {
opacity: var(--_disabled-label-text-opacity);
}
}
.disabled .label:not(.hidden) {
opacity: var(--_disabled-label-text-opacity);
}

.error:not(.disabled) {
.label {
color: var(--_error-label-text-color);
}
.error .label {
color: var(--_error-label-text-color);
}

&:hover {
.label {
color: var(--_error-hover-label-text-color);
}
}
.error:hover .label {
color: var(--_error-hover-label-text-color);
}

&.focused {
.label {
color: var(--_error-focus-label-text-color);
}
}
.error.focused .label {
color: var(--_error-focus-label-text-color);
}
}
Loading

0 comments on commit 527203e

Please sign in to comment.