Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
refactor(text-field): Move transform logic into mdc-text-field-label-…
Browse files Browse the repository at this point in the history 
…float_ (#2062)
  • Loading branch information
@lynnmercier
lynnmercier authored Jan 24, 2018
1 parent 23e6b26 commit 9fffb18
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 54 deletions.
61 changes: 16 additions & 45 deletions packages/mdc-textfield/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
@import "bottom-line/mixins";
@import "outline/mixins";
@import "label/mixins";
@import "label/variables";
@import "helper-text/mixins";
@import "icon/mixins";

Expand Down Expand Up @@ -156,14 +157,12 @@
}

@mixin mdc-text-field-dense_ {
// NOTE: This is an eyeball'd approximation of what's in the mocks.
@include mdc-text-field-label-float_(110%, 0%, $mdc-text-field-dense-label-scale);

margin-top: 12px;
margin-bottom: 4px;
font-size: .813rem;

.mdc-text-field__label--float-above {
// NOTE: This is an eyeball'd approximation of what's in the mocks.
transform: translateY(-110%) scale(.923);
}
}

@mixin mdc-required-text-field-label-asterix_() {
Expand Down Expand Up @@ -209,6 +208,8 @@
}

@mixin mdc-text-field-outlined-dense_ {
@include mdc-text-field-label-float_($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);

height: 48px;

.mdc-text-field__input {
Expand All @@ -219,10 +220,6 @@
bottom: 18px;
}

.mdc-text-field__label--float-above {
transform: translateY(-145%) scale(.923);
}

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-outlined-dense 250ms 1;
}
Expand All @@ -233,10 +230,10 @@
}

@mixin mdc-text-field-outlined_ {
// Outline specific colors
@include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
@include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
@include mdc-text-field-focused-outline-color(primary);
@include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y);

height: 56px;
border: none;
Expand Down Expand Up @@ -264,10 +261,6 @@
transition: transform 260ms ease;
}

.mdc-text-field__label--float-above {
transform: translateY(-130%) scale(.75);
}

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-outlined 250ms 1;
}
Expand Down Expand Up @@ -298,9 +291,8 @@
@include mdc-states(text-primary-on-light, $has-nested-focusable-element: true);
@include mdc-ripple-radius;
@include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);

// Colors
@include mdc-text-field-box-fill-color($mdc-text-field-box-background);
@include mdc-text-field-label-float_($mdc-text-field-box-label-position-y);

display: inline-flex;
position: relative;
Expand Down Expand Up @@ -342,10 +334,6 @@
}
}

.mdc-text-field__label--float-above {
transform: translateY(-50%) scale(.75);
}

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-box 250ms 1;
}
Expand All @@ -360,14 +348,12 @@
}

@mixin mdc-text-field-box-dense_ {
@include mdc-text-field-label-float_($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);

.mdc-text-field__input {
padding: 12px 12px 0;
}

.mdc-text-field__label--float-above {
transform: translateY(-90%) scale(.923);
}

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-box-dense 250ms 1;
}
Expand Down Expand Up @@ -404,27 +390,15 @@
}

@mixin mdc-text-field-outlined-with-leading-icon_ {
.mdc-text-field__label--float-above {
transform: translateX(-27%) translateY(-130%) scale(.75);

@include mdc-rtl {
transform: translateX(27%) translateY(-130%) scale(.75);
}
}
@include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-outlined-leading-icon 250ms 1;
}
}

@mixin mdc-text-field-outlined-dense-with-leading-icon_ {
.mdc-text-field__label--float-above {
transform: translateX(-25%) translateY(-145%) scale(.923);

@include mdc-rtl {
transform: translateX(25%) translateY(-145%) scale(.923);
}
}
@include mdc-text-field-label-float_($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-outlined-leading-icon-dense 250ms 1;
Expand Down Expand Up @@ -511,6 +485,10 @@
@include mdc-text-field-label-background-color_($mdc-textarea-light-background);
@include mdc-text-field-textarea-stroke-color($mdc-textarea-border-on-light);

// Translate above the top of the input, and compensate for the amount of offset needed
// to position the label within the bounds of the inset padding.
@include mdc-text-field-label-float_($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);

$padding-inset: 16px;
$label-offset-y: $padding-inset + 2;
$label-offset-x: $padding-inset;
Expand Down Expand Up @@ -549,13 +527,6 @@
}
}

.mdc-text-field__label--float-above {
// Translate above the top of the input, and compensate for the amount of offset needed
// to position the label within the bounds of the inset padding.
// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
transform: translateY(-50%) scale(.923);
}

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-textarea 250ms 1;
}
Expand Down
34 changes: 26 additions & 8 deletions packages/mdc-textfield/label/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
// limitations under the License.
//

@import './variables';

// Public

@mixin mdc-text-field-label-color($color) {
Expand Down Expand Up @@ -46,14 +48,30 @@
}
}

@include mdc-text-field-invalid-label-shake_keyframes_(standard, 100%);
@include mdc-text-field-invalid-label-shake-keyframes_(box, 50%);
@include mdc-text-field-invalid-label-shake-keyframes_(box-dense, 90%, 0%, .923);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined, 130%);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, 145%, 0%, .923);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon, 130%, 27%);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon-dense, 145%, 25%, .923);
@include mdc-text-field-invalid-label-shake-keyframes_(textarea, 50%, 0%, .923);
@include mdc-text-field-invalid-label-shake_keyframes_(standard, $mdc-text-field-label-position-y);
@include mdc-text-field-invalid-label-shake-keyframes_(box, $mdc-text-field-box-label-position-y);
@include mdc-text-field-invalid-label-shake-keyframes_(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined, $mdc-text-field-outlined-label-position-y);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
@include mdc-text-field-invalid-label-shake-keyframes_(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);

@mixin mdc-text-field-label-float_($positionY, $positionX: 0%, $scale: .75) {
@if $positionX == 0 {
.mdc-text-field__label--float-above {
transform: translateY(-1 * $positionY) scale($scale);
}
} @else {
.mdc-text-field__label--float-above {
transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);

@include mdc-rtl {
transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
}
}
}
}

@mixin mdc-text-field-label-color_($color) {
.mdc-text-field__label,
Expand Down
27 changes: 27 additions & 0 deletions packages/mdc-textfield/label/_variables.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
//
// Copyright 2018 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

$mdc-text-field-label-position-y: 100%;
$mdc-text-field-box-label-position-y: 50%;
$mdc-text-field-box-dense-label-position-y: 90%;
$mdc-text-field-dense-label-scale: .923;
$mdc-text-field-outlined-label-position-y: 130%;
$mdc-text-field-outlined-dense-label-position-y: 145%;
$mdc-text-field-outlined-with-leading-icon-label-position-x: 27%;
$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 25%;
$mdc-text-field-textarea-label-position-y: 50%;
// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
$mdc-text-field-textarea-label-scale: .923;
5 changes: 4 additions & 1 deletion packages/mdc-textfield/label/mdc-text-field-label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,13 @@
}

.mdc-text-field__label--float-above {
transform: translateY(-100%) scale(.75);
cursor: auto;
}

@at-root {
@include mdc-text-field-label-float_($mdc-text-field-label-position-y);
}

.mdc-text-field__label--shake {
animation: invalid-shake-float-above-standard 250ms 1;
}

0 comments on commit 9fffb18

Please sign in to comment.