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

feat(notched-outline): add feature targeting for styles #5289

Merged
merged 2 commits into from
Dec 18, 2019
Merged

feat(notched-outline): add feature targeting for styles #5289

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
601344b
feat(notched-outline): add feature targeting for styles
crisbeto Nov 29, 2019
00fc001
Merge branch 'master' into notched-outline-feature-targeting
abhiomkar Dec 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions packages/mdc-floating-label/_mixins.scss
View file
Open in desktop
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()) {
Copy link
Collaborator Author

@crisbeto crisbeto Nov 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I copied this change from #5287 since I needed it here and I didn't want to wait for the other PR to be merged. I'll rebase if necessary.

$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
Open in desktop
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
Open in desktop
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
Open in desktop
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