Run auto migration script for forms, inputs, and autocomplete

paulbert · paulbert · commit 7498e0b0eea2 · 2025-10-23T11:09:14.000-04:00
diff --git a/src/app/courses/add-courses/courses-step.component.html b/src/app/courses/add-courses/courses-step.component.html
@@ -15,7 +15,7 @@
       <mat-form-field class="full-width">
         <input matInput i18n-placeholder placeholder="Step title" maxlength="200" formControlName="stepTitle">
       </mat-form-field>
-      <mat-form-field class="full-width mat-form-field-type-no-underline">
+      <mat-form-field class="full-width mat-form-field-type-no-underline" appearance="outline">
         <planet-markdown-textbox class="full-width" i18n-placeholder placeholder="Description" [formControl]="stepForm.controls.description" imageGroup="community"></planet-markdown-textbox>
         <mat-error><planet-form-error-messages [control]="stepForm.controls.description"></planet-form-error-messages></mat-error>
       </mat-form-field>
diff --git a/src/app/courses/search-courses/courses-search.scss b/src/app/courses/search-courses/courses-search.scss
@@ -15,7 +15,7 @@ planet-courses-search {
     display: grid;
     grid-template-rows: $label-height calc(#{$toolbar-height} - #{$label-height});
 
-    .mat-selection-list {
+    .mat-mdc-selection-list {
       height: calc(#{$toolbar-height} - #{$label-height});
       padding: 0;
       overflow-y: auto;
diff --git a/src/app/dashboard/dashboard-tile.component.ts b/src/app/dashboard/dashboard-tile.component.ts
@@ -169,9 +169,9 @@ export class DashboardTileComponent implements AfterViewChecked, OnInit {
 
 @Component({
   selector: 'planet-dashboard-tile-title',
-  template: `
-    <mat-icon svgIcon={{cardType}}></mat-icon>
-    <span>{{cardTitle}}</span>
+  template: `
+    <mat-icon svgIcon={{cardType}}></mat-icon>
+    <span>{{cardTitle}}</span>
   `,
   styleUrls: [ './dashboard-tile-title.scss' ]
 })
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
@@ -11,10 +11,10 @@
     </a>
     <div class="dashboard-name" style="margin-left: 16px;">
       <a [routerLink]="['/users/profile', user.name]" class="profile-link">
-        <h1 class="mat-title">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
+        <h1 class="mat-headline-6">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
       </a>
-      <h1 class="mat-title">
-        <span class="mat-subheading-2">
+      <h1 class="mat-headline-6">
+        <span class="mat-subtitle-1">
           <ng-container *ngFor="let role of roles; last as last">
             <planet-role [role]="role"></planet-role><span *ngIf="!last">, </span>
           </ng-container>
diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
@@ -50,7 +50,7 @@ $top-row-height: calc(#{$dashboard-tile-width} + 0.5rem);
         display: flex;
         align-items: center;
       }
-      .mat-subheading-2 {
+      .mat-subtitle-1 {
         margin: 0;
       }
       span {
diff --git a/src/app/health/health-update.component.html b/src/app/health/health-update.component.html
@@ -45,7 +45,7 @@
         </mat-form-field>
       </form>
       <form class="form-spacing" [formGroup]="healthForm">
-        <span class="full-width primary-text-color mat-body-2" i18n>Emergency Contact</span>
+        <span class="full-width primary-text-color mat-subtitle-2" i18n>Emergency Contact</span>
         <mat-form-field>
           <input matInput i18n-placeholder placeholder="Name" formControlName="emergencyContactName">
         </mat-form-field>
diff --git a/src/app/manager-dashboard/reports/myplanet/myplanet.scss b/src/app/manager-dashboard/reports/myplanet/myplanet.scss
@@ -12,15 +12,15 @@ button {
 }
 
 @media(max-width: #{$screen-md}) {
-  .mat-form-field {
+  .mat-mdc-form-field {
     width: 100%;
   }
 
   mat-toolbar-row {
     form {
       width: 100%;
 
-      .mat-form-field {
+      .mat-mdc-form-field {
         width: 100%;
       }
     }
diff --git a/src/app/manager-dashboard/reports/reports-detail.component.html b/src/app/manager-dashboard/reports/reports-detail.component.html
@@ -135,7 +135,7 @@
         <canvas id="voicesCreatedChart"></canvas>
         <div class="reports-table-container">
           <div>
-            <h1 class="mat-title" i18n>Members</h1>
+            <h1 class="mat-headline-6" i18n>Members</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Members</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalUsers}}</mat-grid-tile>
@@ -171,7 +171,7 @@ <h1 class="mat-title" i18n>Members</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Resources</h1>
+            <h1 class="mat-headline-6" i18n>Resources</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Resources</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalResources}}</mat-grid-tile>
@@ -204,7 +204,7 @@ <h1 class="mat-title" i18n>Resources</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Courses</h1>
+            <h1 class="mat-headline-6" i18n>Courses</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Courses</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalCourses}}</mat-grid-tile>
diff --git a/src/app/manager-dashboard/reports/reports-detail.scss b/src/app/manager-dashboard/reports/reports-detail.scss
@@ -75,7 +75,7 @@ mat-toolbar mat-form-field {
 }
 
 @media(max-width: #{$screen-md}) {
-  .mat-form-field {
+  .mat-mdc-form-field {
     width: 100%;
   }
 
diff --git a/src/app/manager-dashboard/reports/reports-health.component.html b/src/app/manager-dashboard/reports/reports-health.component.html
@@ -5,13 +5,13 @@
   <div>
     <span><b i18n>Patients Seen:</b> {{headlineData?.unique.length}}</span>
   </div>
-  <h1 class="mat-title" i18n>Diagnoses</h1>
+  <h1 class="mat-headline-6" i18n>Diagnoses</h1>
   <div>
     <span *ngFor="let condition of conditions">
       <planet-label [label]="condition"></planet-label>: {{headlineData?.conditions[condition]}}
     </span>
   </div>
-  <h1 class="mat-title" i18n>Diagnosis Trend</h1>
+  <h1 class="mat-headline-6" i18n>Diagnosis Trend</h1>
   <div class="trend-filters">
     <span i18n>Select diagnosis to view trend:</span>
     <mat-form-field>
@@ -25,7 +25,7 @@ <h1 class="mat-title" i18n>Diagnosis Trend</h1>
   <div *ngIf="showChart" class="chart-container">
     <canvas id="diagnosesTrend" #diagnosesChart></canvas>
   </div>
-  <h1 class="mat-title" i18n>Weekly Data</h1>
+  <h1 class="mat-headline-6" i18n>Weekly Data</h1>
   <planet-reports-detail-activities
     [activitiesByDoc]="weeklyHealthData"
     activityType="health"
diff --git a/src/app/manager-dashboard/reports/reports.component.ts b/src/app/manager-dashboard/reports/reports.component.ts
@@ -12,10 +12,10 @@ import { trackById } from '../../shared/table-helpers';
 
 @Component({
   templateUrl: './reports.component.html',
-  styles: [ `
-    mat-panel-title {
-      align-items: center;
-    }
+  styles: [ `
+    mat-panel-title {
+      align-items: center;
+    }
   ` ],
   styleUrls: [ './reports.components.scss' ]
 })
diff --git a/src/app/meetups/add-meetups/meetups-add.component.ts b/src/app/meetups/add-meetups/meetups-add.component.ts
@@ -24,14 +24,14 @@ import { debounce } from 'rxjs/operators';
 @Component({
   selector: 'planet-meetups-add',
   templateUrl: './meetups-add.component.html',
-  styles: [ `
-    form.form-spacing {
-      width: inherit;
-    }
-    .view-container form {
-      min-width: 385px;
-      max-width: 750px;
-    }
+  styles: [ `
+    form.form-spacing {
+      width: inherit;
+    }
+    .view-container form {
+      min-width: 385px;
+      max-width: 750px;
+    }
   ` ]
 })
 export class MeetupsAddComponent implements OnInit, CanComponentDeactivate {
diff --git a/src/app/meetups/meetups.component.ts b/src/app/meetups/meetups.component.ts
@@ -17,15 +17,15 @@ import { findByIdInArray } from '../shared/utils';
 
 @Component({
   templateUrl: './meetups.component.html',
-  styles: [ `
-    /* Column Widths */
-    .mat-column-select {
-      max-width: 44px;
-    }
-    .mat-column-info {
-      max-width: 500px;
-      align-self: flex-start;
-    }
+  styles: [ `
+    /* Column Widths */
+    .mat-column-select {
+      max-width: 44px;
+    }
+    .mat-column-info {
+      max-width: 500px;
+      align-self: flex-start;
+    }
   ` ]
 })
 export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
diff --git a/src/app/page-not-found/page-not-found.component.ts b/src/app/page-not-found/page-not-found.component.ts
@@ -3,13 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'planet-page-not-found',
   templateUrl: './page-not-found.component.html',
-  styles: [ `
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-top: 10vh;
-    }
+  styles: [ `
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 10vh;
+    }
   ` ]
 })
 export class PageNotFoundComponent {
diff --git a/src/app/resources/resources-add.component.html b/src/app/resources/resources-add.component.html
@@ -8,7 +8,7 @@
   <div class="view-container view-full-height">
     <div>
       <form class="form-spacing" [formGroup]="resourceForm" novalidate>
-        <mat-form-field>
+        <mat-form-field appearance="outline">
           <input matInput i18n-placeholder placeholder="Title" formControlName="title" required>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.title"></planet-form-error-messages></mat-error>
         </mat-form-field>
diff --git a/src/app/resources/search-resources/resources-search.scss b/src/app/resources/search-resources/resources-search.scss
@@ -15,7 +15,7 @@ planet-resources-search {
     display: grid;
     grid-template-rows: $label-height calc(#{$toolbar-height} - #{$label-height});
 
-    .mat-selection-list {
+    .mat-mdc-selection-list {
       height: calc(#{$toolbar-height} - #{$label-height});
       padding: 0;
       overflow-y: auto;
diff --git a/src/app/shared/dialogs/dialogs-form.component.html b/src/app/shared/dialogs/dialogs-form.component.html
@@ -56,7 +56,7 @@ <h1 mat-dialog-title><span><mat-icon>create</mat-icon>{{title}}</span></h1>
       </mat-form-field>
 
       <!-- Textarea -->
-      <mat-form-field *ngIf="field.type === 'markdown'" class="full-width mat-form-field-type-no-underline">
+      <mat-form-field *ngIf="field.type === 'markdown'" class="full-width mat-form-field-type-no-underline" appearance="">
         <planet-markdown-textbox matInput placeholder="{{field.placeholder}}" formControlName="{{field.name}}" [required]="field.required" [imageGroup]="field.imageGroup"></planet-markdown-textbox>
         <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
       </mat-form-field>
diff --git a/src/app/shared/dialogs/dialogs-submissions.component.ts b/src/app/shared/dialogs/dialogs-submissions.component.ts
@@ -3,7 +3,7 @@ import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/leg
 
 @Component({
   template: `
-    <h3 mat-dialog-title i18n class="mat-subheading-2">Review Previous Test Attempts</h3>
+    <h3 mat-dialog-title i18n class="mat-subtitle-1">Review Previous Test Attempts</h3>
     <mat-dialog-content>
       <planet-submissions *ngIf="view==='list'" [isDialog]="true" [parentId]="data.parentId"
         [displayedColumns]="[ 'lastUpdateTime', 'gradeTime', 'grade', 'status' ]" (submissionClick)="showSubmission($event)">
diff --git a/src/app/shared/forms/planet-markdown-textbox.component.ts b/src/app/shared/forms/planet-markdown-textbox.component.ts
@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { DialogsImagesComponent } from '../dialogs/dialogs-images.component';
diff --git a/src/app/shared/forms/planet-rating-stars.component.ts b/src/app/shared/forms/planet-rating-stars.component.ts
@@ -1,20 +1,20 @@
 import { Component, HostBinding, Input, OnDestroy, Optional, Self } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { UserService } from '../user.service';
 
 @Component({
   selector: 'planet-rating-stars',
   templateUrl: './planet-rating-stars.component.html',
-  styles: [ `
-    .stars mat-icon {
-      cursor: default;
-    }
-    .stars.stars-enabled mat-icon {
-      cursor: pointer;
-    }
+  styles: [ `
+    .stars mat-icon {
+      cursor: default;
+    }
+    .stars.stars-enabled mat-icon {
+      cursor: pointer;
+    }
   ` ],
   providers: [
     { provide: MatFormFieldControl, useExisting: PlanetRatingStarsComponent }
diff --git a/src/app/shared/forms/planet-tag-input-dialog.component.html b/src/app/shared/forms/planet-tag-input-dialog.component.html
@@ -19,7 +19,7 @@
         <mat-select i18n-placeholder placeholder="Subcollection of..." formControlName="attachedTo">
           <mat-option i18n>None</mat-option>
           <mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">
-            <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+            <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
             <span class="count">({{ tag.count || 0 }})</span>
           </mat-option>
         </mat-select>
@@ -32,7 +32,7 @@
       <mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event, tag._id)" class="cursor-pointer list-item-spacing">
         <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)" class="icon-spacing"></planet-tag-input-toggle-icon>
         <mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
-        <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+        <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
         <span class="count">({{ tag.count || 0 }})</span>
         <span class="toolbar-fill"></span>
         <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, tag)" i18n class="button-spacing">Edit</button>
@@ -44,7 +44,7 @@
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer list-item-spacing">
           <mat-icon mat-list-icon class="icon-spacing">subdirectory_arrow_right</mat-icon>
           <mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
-          <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+          <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
           <span class="count">({{ tag.count || 0 }})</span>
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, subTag)" i18n class="button-spacing">Edit</button>
@@ -58,7 +58,7 @@
     <mat-list-item (click)="selectOne('')" i18n>All</mat-list-item>
     <ng-container *ngFor="let tag of tags">
       <mat-list-item class="tag-text" (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event, tag._id)" [ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }">
-        <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+        <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
         <span class="count">({{ tag.count || 0 }})</span>
         <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
         <span class="toolbar-fill"></span>
@@ -70,7 +70,7 @@
       <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="selectOne(subTag._id || subTag.name)">
           <mat-icon>subdirectory_arrow_right</mat-icon>
-          <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+          <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
           <span class="count">({{ tag.count || 0 }})</span>
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
diff --git a/src/app/shared/forms/planet-tag-input.component.ts b/src/app/shared/forms/planet-tag-input.component.ts
@@ -4,7 +4,7 @@ import {
 import { Router, ActivatedRoute } from '@angular/router';
 import { ControlValueAccessor, NgControl, UntypedFormControl } from '@angular/forms';
 import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Subject } from 'rxjs';
diff --git a/src/app/shared/material.module.ts b/src/app/shared/material.module.ts
@@ -1,6 +1,6 @@
 import { NgModule, Injectable } from '@angular/core';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -10,17 +10,17 @@ import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy
 import { MatNativeDateModule, DateAdapter, NativeDateAdapter } from '@angular/material/core';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
diff --git a/src/app/shared/planet-filtered-amount.component.ts b/src/app/shared/planet-filtered-amount.component.ts
diff --git a/src/app/teams/teams-reports-dialog.component.html b/src/app/teams/teams-reports-dialog.component.html
diff --git a/src/app/teams/teams-reports-dialog.component.ts b/src/app/teams/teams-reports-dialog.component.ts
diff --git a/src/app/teams/teams-view.component.html b/src/app/teams/teams-view.component.html
diff --git a/src/app/teams/teams-view.scss b/src/app/teams/teams-view.scss
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
diff --git a/src/planet-mat-theme.scss b/src/planet-mat-theme.scss
diff --git a/src/styles.scss b/src/styles.scss

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ $top-row-height: calc(#{$dashboard-tile-width} + 0.5rem);`
`50`	`50`	`display: flex;`
`51`	`51`	`align-items: center;`
`52`	`52`	`}`
`53`		`- .mat-subheading-2 {`
	`53`	`+ .mat-subtitle-1 {`
`54`	`54`	`margin: 0;`
`55`	`55`	`}`
`56`	`56`	`span {`
Original file line number	Diff line number	Diff line change
`@@ -12,15 +12,15 @@ button {`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`@media(max-width: #{$screen-md}) {`
`15`		`- .mat-form-field {`
	`15`	`+ .mat-mdc-form-field {`
`16`	`16`	`width: 100%;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`mat-toolbar-row {`
`20`	`20`	`form {`
`21`	`21`	`width: 100%;`
`22`	`22`
`23`		`- .mat-form-field {`
	`23`	`+ .mat-mdc-form-field {`
`24`	`24`	`width: 100%;`
`25`	`25`	`}`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ mat-toolbar mat-form-field {`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`@media(max-width: #{$screen-md}) {`
`78`		`- .mat-form-field {`
	`78`	`+ .mat-mdc-form-field {`
`79`	`79`	`width: 100%;`
`80`	`80`	`}`
`81`	`81`