Skip to content

Commit

Permalink
feat(notched-outline): add feature targeting for styles
Browse files Browse the repository at this point in the history 
Adds support for feature targeting to the `mdc-notched-outline` styles.

Relates to material-components#4227.
  • Loading branch information
Kristiyan Kostadinov committed Nov 29, 2019
1 parent b8bc4a2 commit 7c054f8
Show file tree
Hide file tree
Showing 6 changed files with 192 additions and 105 deletions.
20 changes: 13 additions & 7 deletions packages/mdc-floating-label/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@

@import "@material/rtl/mixins";
@import "@material/theme/mixins";
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@import "./variables";

@mixin mdc-floating-label-ink-color($color) {
Expand Down Expand Up @@ -55,16 +57,20 @@
}
}

@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

.mdc-floating-label--float-above {
@if $positionX > 0 or $positionX < 0 {
transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
@include mdc-feature-targets($feat-structure) {
@if $positionX > 0 or $positionX < 0 {
transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);

@include mdc-rtl {
transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
@include mdc-rtl {
transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
}
} @else {
transform: translateY(-1 * $positionY) scale($scale);
}
} @else {
transform: translateY(-1 * $positionY) scale($scale);
}
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-floating-label/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"dependencies": {
"@material/animation": "^4.0.0",
"@material/base": "^4.0.0",
"@material/feature-targeting": "^4.0.0",
"@material/rtl": "^4.0.0",
"@material/theme": "^4.0.0",
"@material/typography": "^4.0.0",
Expand Down
188 changes: 166 additions & 22 deletions packages/mdc-notched-outline/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,116 @@

@import "@material/theme/mixins";
@import "@material/shape/mixins";
@import "@material/floating-label/mixins";
@import "@material/shape/functions";
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@import "@material/rtl/mixins";
@import "./variables";

@mixin mdc-notched-outline-color($color) {
@mixin mdc-notched-outline-core-styles($query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

.mdc-notched-outline {
@include mdc-notched-outline-base_($query);

&__leading,
&__notch,
&__trailing {
@include mdc-feature-targets($feat-structure) {
box-sizing: border-box;
height: 100%;
border-top: $mdc-notched-outline-border-width solid;
border-bottom: $mdc-notched-outline-border-width solid;
pointer-events: none;
}
}

&__leading {
@include mdc-feature-targets($feat-structure) {
@include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none);

width: $mdc-notched-outline-leading-width;
}
}

&__trailing {
@include mdc-feature-targets($feat-structure) {
@include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid);

flex-grow: 1;
}
}

&__notch {
@include mdc-feature-targets($feat-structure) {
flex: 0 0 auto;
width: auto;
max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
}
}

.mdc-floating-label {
@include mdc-feature-targets($feat-structure) {
display: inline-block;
position: relative;
max-width: 100%;
}
}

.mdc-floating-label--float-above {
@include mdc-feature-targets($feat-structure) {
text-overflow: clip;
}
}

&--upgraded .mdc-floating-label--float-above {
@include mdc-feature-targets($feat-structure) {
max-width: calc(100% / .75);
}
}
}

.mdc-notched-outline--notched {
.mdc-notched-outline__notch {
@include mdc-feature-targets($feat-structure) {
@include mdc-rtl-reflexive-box(padding, right, 8px);

border-top: none;
}
}
}

.mdc-notched-outline--no-label {
.mdc-notched-outline__notch {
@include mdc-feature-targets($feat-structure) {
padding: 0;
}
}
}
}

@mixin mdc-notched-outline-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
@include mdc-theme-prop(border-color, $color);
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(border-color, $color);
}
}
}

@mixin mdc-notched-outline-stroke-width($width) {
@mixin mdc-notched-outline-stroke-width($width, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
border-width: $width;
@include mdc-feature-targets($feat-structure) {
border-width: $width;
}
}
}

Expand All @@ -47,13 +140,18 @@
/// Use this when floating label is aligned to center to prevent label jump on focus.
/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.
///
@mixin mdc-notched-outline-notch-offset($stroke-width) {
@mixin mdc-notched-outline-notch-offset($stroke-width, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

.mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: $stroke-width;
@include mdc-feature-targets($feat-structure) {
padding-top: $stroke-width;
}
}
}

@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false) {
@mixin mdc-notched-outline-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
$radius: mdc-shape-prop-value($radius);

@if (length($radius) > 1) {
Expand All @@ -64,39 +162,51 @@
$radius: nth($radius, 1);

.mdc-notched-outline__leading {
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true);
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 1 0 0 1), $rtl-reflexive: true, $query: $query);

@if ($radius > $mdc-notched-outline-leading-width) {
width: $radius;
@include mdc-feature-targets($feat-structure) {
@if ($radius > $mdc-notched-outline-leading-width) {
width: $radius;
}
}
}

@if ($radius > $mdc-notched-outline-leading-width) {
.mdc-notched-outline__notch {
max-width: calc(100% - #{$radius} * 2);
@include mdc-feature-targets($feat-structure) {
max-width: calc(100% - #{$radius} * 2);
}
}
}

.mdc-notched-outline__trailing {
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true);
@include mdc-shape-radius(mdc-shape-mask-radius($radius, 0 1 1 0), $rtl-reflexive: true, $query: $query);
}
}

@mixin mdc-notched-outline-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
@include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust, $positionX, 1);
@mixin mdc-notched-outline-floating-label-float-position(
$positionY, $positionX: 0%, $scale: .75, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-floating-label-float-position(
$positionY + $mdc-notched-outline-label-adjust, $positionX, 1, $query: $query);

.mdc-floating-label--float-above {
font-size: ($scale * 1rem);
@include mdc-feature-targets($feat-structure) {
font-size: ($scale * 1rem);
}
}

// Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
&.mdc-notched-outline--upgraded,
.mdc-notched-outline--upgraded {
@include mdc-floating-label-float-position($positionY, $positionX, $scale);
@include mdc-floating-label-float-position($positionY, $positionX, $scale, $query: $query);

// stylelint-disable-next-line no-descending-specificity
.mdc-floating-label--float-above {
font-size: 1rem;
@include mdc-feature-targets($feat-structure) {
font-size: 1rem;
}
}
}
}
Expand All @@ -111,22 +221,56 @@
/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is
/// center aligned in all the places.
///
@mixin mdc-notched-outline-floating-label-float-position-absolute($positionY, $positionX: 0, $scale: .75) {
@include mdc-floating-label-float-position($positionY + $mdc-notched-outline-label-adjust-absolute, $positionX, 1);
@mixin mdc-notched-outline-floating-label-float-position-absolute(
$positionY, $positionX: 0, $scale: .75, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-floating-label-float-position(
$positionY + $mdc-notched-outline-label-adjust-absolute, $positionX, 1, $query: $query);

.mdc-floating-label--float-above {
font-size: ($scale * 1rem);
@include mdc-feature-targets($feat-structure) {
font-size: ($scale * 1rem);
}
}

// Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
&.mdc-notched-outline--upgraded,
.mdc-notched-outline--upgraded {
@include mdc-floating-label-float-position(
$positionY, $positionX, $scale);
$positionY, $positionX, $scale, $query: $query);

// stylelint-disable-next-line no-descending-specificity
.mdc-floating-label--float-above {
font-size: 1rem;
@include mdc-feature-targets($feat-structure) {
font-size: 1rem;
}
}
}
}

//
// Private
//
@mixin mdc-notched-outline-base_($query) {
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-feature-targets($feat-structure) {
display: flex;
position: absolute;
right: 0;
left: 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: 100%;
/* @noflip */
text-align: left;
pointer-events: none;

@include mdc-rtl {
/* @noflip */
text-align: right;
}
}
}
77 changes: 1 addition & 76 deletions packages/mdc-notched-outline/mdc-notched-outline.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,84 +21,9 @@
//

@import "@material/base/mixins";
@import "@material/rtl/mixins";
@import "./mixins";
@import "./variables";

// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
@include mdc-base-emit-once("mdc-notched-outline") {
.mdc-notched-outline {
display: flex;
position: absolute;
right: 0;
left: 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: 100%;
/* @noflip */
text-align: left;
pointer-events: none;

@include mdc-rtl {
/* @noflip */
text-align: right;
}

&__leading,
&__notch,
&__trailing {
box-sizing: border-box;
height: 100%;
border-top: $mdc-notched-outline-border-width solid;
border-bottom: $mdc-notched-outline-border-width solid;
pointer-events: none;
}

&__leading {
@include mdc-rtl-reflexive-property(border, $mdc-notched-outline-border-width solid, none);

width: $mdc-notched-outline-leading-width;
}

&__trailing {
@include mdc-rtl-reflexive-property(border, none, $mdc-notched-outline-border-width solid);

flex-grow: 1;
}

&__notch {
flex: 0 0 auto;
width: auto;
max-width: calc(100% - #{$mdc-notched-outline-leading-width} * 2);
}

.mdc-floating-label {
display: inline-block;
position: relative;
max-width: 100%;
}

.mdc-floating-label--float-above {
text-overflow: clip;
}

&--upgraded .mdc-floating-label--float-above {
max-width: calc(100% / .75);
}
}

.mdc-notched-outline--notched {
.mdc-notched-outline__notch {
@include mdc-rtl-reflexive-box(padding, right, 8px);

border-top: none;
}
}

.mdc-notched-outline--no-label {
.mdc-notched-outline__notch {
padding: 0;
}
}
@include mdc-notched-outline-core-styles;
}
Loading

0 comments on commit 7c054f8

Please sign in to comment.