Skip to content

Commit

Permalink
fix(grid): remove :host from css selectors (#1134)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Phil147
Phil147 authored and GitHub Enterprise committed Mar 4, 2024
1 parent 3878c7f commit ebf1c82
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 43 deletions.
4 changes: 2 additions & 2 deletions projects/ng-aquila/src/grid/layout.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
selector: '[nxLayout]',
Expand Down Expand Up @@ -31,7 +31,7 @@ export class NxLayoutComponent {
* On `true` the Grid will use container queries instead of media queries.
* See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries) for more info
*/
@Input() containerQuery = false;
@Input({ transform: booleanAttribute }) containerQuery = false;

/**
* Type of layout.
Expand Down
82 changes: 41 additions & 41 deletions projects/ng-aquila/src/grid/mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,77 +304,77 @@
@include container-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

:host(.nx-flex#{$infix}-row) {
&.nx-flex#{$infix}-row {
flex-direction: row !important;
}
:host(.nx-flex#{$infix}-column) {
&.nx-flex#{$infix}-column {
flex-direction: column !important;
}
:host(.nx-flex#{$infix}-row-reverse) {
&.nx-flex#{$infix}-row-reverse {
flex-direction: row-reverse !important;
}
:host(.nx-flex#{$infix}-column-reverse) {
&.nx-flex#{$infix}-column-reverse {
flex-direction: column-reverse !important;
}

:host(.nx-flex#{$infix}-wrap) {
&.nx-flex#{$infix}-wrap {
flex-wrap: wrap !important;
}
:host(.nx-flex#{$infix}-nowrap) {
&.nx-flex#{$infix}-nowrap {
flex-wrap: nowrap !important;
}
:host(.nx-flex#{$infix}-wrap-reverse) {
&.nx-flex#{$infix}-wrap-reverse {
flex-wrap: wrap-reverse !important;
}

:host(.nx-justify-content#{$infix}-start) {
&.nx-justify-content#{$infix}-start {
justify-content: flex-start !important;
}
:host(.nx-justify-content#{$infix}-end) {
&.nx-justify-content#{$infix}-end {
justify-content: flex-end !important;
}
:host(.nx-justify-content#{$infix}-center) {
&.nx-justify-content#{$infix}-center {
justify-content: center !important;
}
:host(.nx-justify-content#{$infix}-between) {
&.nx-justify-content#{$infix}-between {
justify-content: space-between !important;
}
:host(.nx-justify-content#{$infix}-around) {
&.nx-justify-content#{$infix}-around {
justify-content: space-around !important;
}

:host(.nx-align-items#{$infix}-start) {
&.nx-align-items#{$infix}-start {
align-items: flex-start !important;
}
:host(.nx-align-items#{$infix}-end) {
&.nx-align-items#{$infix}-end {
align-items: flex-end !important;
}
:host(.nx-align-items#{$infix}-center) {
&.nx-align-items#{$infix}-center {
align-items: center !important;
}
:host(.nx-align-items#{$infix}-baseline) {
&.nx-align-items#{$infix}-baseline {
align-items: baseline !important;
}
:host(.nx-align-items#{$infix}-stretch) {
&.nx-align-items#{$infix}-stretch {
align-items: stretch !important;
}

:host(.nx-align-content#{$infix}-start) {
&.nx-align-content#{$infix}-start {
align-content: flex-start !important;
}
:host(.nx-align-content#{$infix}-end) {
&.nx-align-content#{$infix}-end {
align-content: flex-end !important;
}
:host(.nx-align-content#{$infix}-center) {
&.nx-align-content#{$infix}-center {
align-content: center !important;
}
:host(.nx-align-content#{$infix}-between) {
&.nx-align-content#{$infix}-between {
align-content: space-between !important;
}
:host(.nx-align-content#{$infix}-around) {
&.nx-align-content#{$infix}-around {
align-content: space-around !important;
}
:host(.nx-align-content#{$infix}-stretch) {
&.nx-align-content#{$infix}-stretch {
align-content: stretch !important;
}
}
Expand All @@ -386,32 +386,32 @@
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

:host(.nx-flex#{$infix}-first) {
&.nx-flex#{$infix}-first {
order: -1;
}
:host(.nx-flex#{$infix}-last) {
&.nx-flex#{$infix}-last {
order: 1;
}
:host(.nx-flex#{$infix}-unordered) {
&.nx-flex#{$infix}-unordered {
order: 0;
}

:host(.nx-align-self#{$infix}-auto) {
&.nx-align-self#{$infix}-auto {
align-self: auto !important;
}
:host(.nx-align-self#{$infix}-start) {
&.nx-align-self#{$infix}-start {
align-self: flex-start !important;
}
:host(.nx-align-self#{$infix}-end) {
&.nx-align-self#{$infix}-end {
align-self: flex-end !important;
}
:host(.nx-align-self#{$infix}-center) {
&.nx-align-self#{$infix}-center {
align-self: center !important;
}
:host(.nx-align-self#{$infix}-baseline) {
&.nx-align-self#{$infix}-baseline {
align-self: baseline !important;
}
:host(.nx-align-self#{$infix}-stretch) {
&.nx-align-self#{$infix}-stretch {
align-self: stretch !important;
}
}
Expand All @@ -423,32 +423,32 @@
@include container-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

:host(.nx-flex#{$infix}-first) {
&.nx-flex#{$infix}-first {
order: -1;
}
:host(.nx-flex#{$infix}-last) {
&.nx-flex#{$infix}-last {
order: 1;
}
:host(.nx-flex#{$infix}-unordered) {
&.nx-flex#{$infix}-unordered {
order: 0;
}

:host(.nx-align-self#{$infix}-auto) {
&.nx-align-self#{$infix}-auto {
align-self: auto !important;
}
:host(.nx-align-self#{$infix}-start) {
&.nx-align-self#{$infix}-start {
align-self: flex-start !important;
}
:host(.nx-align-self#{$infix}-end) {
&.nx-align-self#{$infix}-end {
align-self: flex-end !important;
}
:host(.nx-align-self#{$infix}-center) {
&.nx-align-self#{$infix}-center {
align-self: center !important;
}
:host(.nx-align-self#{$infix}-baseline) {
&.nx-align-self#{$infix}-baseline {
align-self: baseline !important;
}
:host(.nx-align-self#{$infix}-stretch) {
&.nx-align-self#{$infix}-stretch {
align-self: stretch !important;
}
}
Expand Down

0 comments on commit ebf1c82

Please sign in to comment.