Угловые 6/7 css медиа-запросы не применяются к внукам - PullRequest
Новая
       6

Угловые 6/7 css медиа-запросы не применяются к внукам

0 голосов
/ 06 ноября 2018

У меня возникли некоторые проблемы с применением медиазапросов (для отзывчивого поведения) в приложении, которое использует архитектуру следующего компонента

  • базовые компоненты: Используется инкапсуляция по умолчанию, здесь используются внешние плагины, в настоящий момент мы применяем, в некоторых случаях, внешний модуль PrimeNG. Идея состоит в том, чтобы переместить эти базовые компоненты в другие приложения. Они интегрированы в свой собственный общий модуль.

  • компоненты брендинга: Он использует базовые компоненты, применяет пользовательские стили и переводит тексты, делает некоторые специфические вещи и использует встроенную инкапсуляцию (чтобы отличать ее от базовых компонентов), но это не так применять бизнес-логику. Они интегрированы в собственный модуль брендинга, который импортирует общий модуль.

  • бизнес-компоненты: Здесь повторно используются компоненты брендинга и применяется собственная бизнес-логика (когда она используется в нескольких представлениях). Они интегрированы в собственный бизнес-модуль, который импортирует модуль брендинга. Эти компоненты реализуют режим угловой инкапсуляции по умолчанию.

Тогда у нас есть представления, которые интегрированы в собственный модуль и импортируют бизнес-модуль. Он будет использовать брендинг и / или бизнес-компоненты, здесь мы сталкиваемся с некоторыми проблемами, касающимися медиа-запросов CSS . Эти виды используют режим угловой инкапсуляции по умолчанию.

Конкретный случай - это тот случай, когда мы пытаемся настроить для конкретного вида поле ввода для правильного поведения в отзывчивых случаях (мобильные телефоны, планшеты и настольные компьютеры в разных ориентациях). Для этого мы используем внешний плагин углового гибкого макета (бета 7)

Это поле ввода существует в базовом компоненте, но мы приводим его фирменный вариант. Мы хотим изменить ширину / высоту по умолчанию, заданную для брендинга, чтобы адаптироваться к контейнеру div, который будет его инкапсулировать.

Это то, что мы сделали до сих пор:

специальный вид scss: 

// MEDIA QUERIES
:host ::ng-deep {

  @media screen and (min-width: 300px) and (orientation: portrait)  {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width: 95%;
    }
  }

  @media screen and (min-width: 300px) and (orientation: landscape)  {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 2.625);
    }
  }

  @media screen and (min-width: 480px) and (orientation: landscape)  {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 2.9);
    }
  }

  @media screen and (min-width: 640px) and (orientation: portrait)  {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 2);
      height:(16px * 1.6);
    }
  }

  @media screen and (min-width: 640px) and (orientation: landscape)  {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 2.68);
      height:(16px * 1.6);
    }
  }

  @media screen and (min-width: 768px) and (orientation: portrait) {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 3.3);
      height:(16px * 1.6);
    }
  }

  @media screen and (min-width: 768px) and (orientation: landscape) {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 3.5);
      height:(16px * 1.6);
    }
  }

  @media screen and (min-width: 900px) and (orientation: portrait) {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 3.5);
      height:(16px * 1.625);
    }
  }

  @media screen and (min-width: 900px) and (orientation: landscape) {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 1.875);
      height:(16px * 1.625);
    }
  }

  @media screen and (min-width: 1200px) and (orientation: portrait) {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 3.75);
      height:(16px * 1.625);
    }
  }

  @media screen and (min-width: 1200px) and (orientation: landscape) {
    .inputField,
    .inputFieldEditing,
    .inputFieldChanged,
    .inputFieldDisabled {
      width:(80px * 2.5);
      height:(16px * 1.625);
    }
  }
}

Предыдущие пользовательские классы существуют и используются в брендинге компонента поля ввода для изменения его UX на основе различных случаев.

файл шаблона компонента фирменного поля ввода: 

<sh-input-field [id]="id"
                [caption]="caption | translate"
                [(model)]="userInput"
                [placeholder]="placeholder | translate"
                [type]="inputType"
                [color]="color"
                [font-size]="fontsize"
                [isDisabled]="!enabled"
                [style]="{'width': width,
                          'height': height}"
                [status]="status"
                [baseClass]="INPUT_CLASS_ENABLED"
                [extendedClass]="extendedClass"
                [stateClasses]="{
                                  focusedOn: INPUT_CLASS_EDITING,
                                  enabledOn: INPUT_CLASS_ENABLED,
                                  enabledOff: INPUT_CLASS_DISABLED,
                                  valueChanged: INPUT_CLASS_CHANGED
                                }"
              [passwordWeakCaption]="passwordWeakCaption"
              [passwordMediumCaption]="passwordMediumCaption"
              [passwordStrongCaption]="passwordStrongCaption"
              [isPasswordFeedbackShown]="isPasswordFeedbackShown">
</sh-input-field>

файл scss компонента фирменного поля ввода: 

/* CAPTION */
.uiElemSideCaptionLeft,
.uiElemSideCaptionRight,
.uiElemSideCaptionDisabled {
  position: relative;
  display: inline-block;
  padding-top: 2px;
  text-align: left;
  font-size: 14px;
  -ms-opacity: 1;
  opacity: 1;
  color: #333;
}

.uiElemSideCaptionRight {
  -ms-opacity: 1;
  opacity: 1;
  text-align: right;
}

.uiElemSideCaptionDisabled {
  -ms-opacity: 0.4;
  opacity: 0.4;
}

/* INPUT-FIELD */
.inputField,
.inputFieldEditing,
.inputFieldChanged,
.inputFieldDisabled {
  position: relative;
  display: inline-block;
  height: 16px;
  width: 80px;
  padding: 4px;
  background-color: #dddddd;
  border-width: 1px;
  border-color: #979797;
  border-style: solid;
  font-size: 14px;
  text-align: left;
  color: rgba(0, 0, 0, 1);
  -ms-opacity: 1;
  opacity: 1;
}

.inputFieldEditing {
  -ms-opacity: 1;
  opacity: 1;
  background-color: #eee;
  height: 14px;
  border-width: 2px;
  border-color: #F8E71C;
  color: rgba(0, 0, 0, 1);
  border-style: solid;
}

.inputFieldChanged {
  -ms-opacity: 1;
  opacity: 1;
  background-color: rgba(245, 166, 35, 0.5);
  height: 16px;
  border-width: 1px;
  border-color: #979797;
  color: rgba(0, 0, 0, 1);
  border-style: solid;
}

.inputFieldDisabled {
  -ms-opacity: 0.6;
  opacity: 0.6;
  height: 16px;
  background-color: lightgray;
  border-width: 1px;
  border-color: #979797;
  border-style: solid;
  color: rgba(0, 0, 0, 1);
}

определение компонента поля ввода с брендом: 

@Component({
  selector: 'br-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.scss'],
  encapsulation: ViewEncapsulation.Native
})

файл шаблона базового компонента поля ввода: 

<div class="sh-input-field-global-container">
  <div class="sh-input-field-label-container" *ngIf="caption !== '' && caption !== undefined && caption !== null">
    <label [for]="id">{{caption}}</label>
  </div>
  <div class="sh-input-field-container" [ngClass]="extendedClass">
    <input *ngIf="controlType !== 'password'"
           [ngClass]="getCssClases('sh-input-field', baseClass)"
           [attr.id]="id"
           [placeholder]="placeholder"
           [disabled]="isDisabled"
           (focus)="InvokeFocus($event)"
           (blur)="InvokeBlur($event)"
           (keyup.enter)="InvokeKeyUpEnterEvent($event)"
           (keyup.escape)="InvokeKeyUpEscapeEvent($event)"
           [(ngModel)]="model"
           [attr.name]="formName"
           [maxLength]="length"
           [type]="controlType"
           [ngStyle]="style"/>
    <input *ngIf="controlType === 'password'"
            [ngClass]="GetCssClases('sh-input-field', baseClass)"
            [attr.id]="id"
            [disabled]="isDisabled"
            (focus)="InvokeFocus($event)"
            (blur)="InvokeBlur($event)"
            (keyup.enter)="InvokeKeyUpEnterEvent($event)"
            (keyup.escape)="InvokeKeyUpEscapeEvent($event)"
            [(ngModel)]="model"
            [attr.name]="formName"
            [maxLength]="length"
            [type]="controlType"
            pPassword
            [promptLabel]="placeholder"
            [weakLabel]="passwordWeakCaption"
            [mediumLabel]="passwordMediumCaption"
            [strongLabel]="passwordStrongCaption"
            [feedback]="isPasswordFeedbackShown"
            [ngStyle]="style"/>
  </div>
</div>

базовое определение компонента поля ввода: 

@Component({
  selector: 'sh-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.scss']
})

Так что здесь может быть не так? Используем ли мы: host: ng-deep неправильно в конкретном представлении? Мы видели, если мы применяем эти медиа-запросы непосредственно к брендингу sass-файла поля ввода, он работает нормально (удаление тега: host: ng-deep )

1 Ответ

0 голосов
/ 06 ноября 2018

Попробуйте :host /deep/ вместо :host ::ng-deep, как показано ниже 

:host /deep/ {
    /*your style goes here*/
}

Или

Используйте encapsulation: ViewEncapsulation.None вместо encapsulation: ViewEncapsulation.Native

...