Skip to content

Commit

Permalink
Merge pull request #170 from Xyna-Factory/169-fix-mdc-based-angular-m…
Browse files Browse the repository at this point in the history 
…aterial-components

Fix MDC-based Angular Material Components
  • Loading branch information
@Sela1236
Sela1236 authored Mar 22, 2024
2 parents 63aa884 + a779ff0 commit 6d42e72
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 36 deletions.
64 changes: 41 additions & 23 deletions styles/material.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,14 +77,10 @@ $xc-menu-item-arrow-color: unset !default;

// $xyna-palette: mat-palette($mat-grey);
$xyna-palette: mat.define-palette(mat.$grey-palette);
$xyna-theme-dark: mat.define-dark-theme((
color: (
primary: $xyna-palette,
accent: $xyna-palette
),
typography: mat.define-typography-config(),
density: 0
));
$xyna-theme-dark: mat.define-dark-theme((color: (primary: $xyna-palette,
accent: $xyna-palette ),
typography: mat.define-typography-config(),
density: 0));
@include mat.all-component-themes($xyna-theme-dark);

// globally overwrite material styles
Expand Down Expand Up @@ -163,9 +159,12 @@ html.cdk-global-scrollblock {
background-color: #1A1A1B;
box-shadow: 0 0 16px #1A1A1B;

&.with-arrow-x, &.with-arrow-y {
&.with-arrow-x,
&.with-arrow-y {
.mat-mdc-menu-content .mat-mdc-menu-item {
&:first-child::before, &:last-child::before {

&:first-child::before,
&:last-child::before {
content: "";
display: flex;
background: $xc-menu-item-background-color;
Expand Down Expand Up @@ -198,7 +197,9 @@ html.cdk-global-scrollblock {
&.with-arrow-x {
&.mat-menu-after {
.mat-mdc-menu-content .mat-mdc-menu-item {
&:first-child::before, &:last-child::before {

&:first-child::before,
&:last-child::before {
border-right: none;
border-bottom: none;
left: -10px;
Expand All @@ -209,7 +210,9 @@ html.cdk-global-scrollblock {

&.mat-menu-before {
.mat-mdc-menu-content .mat-mdc-menu-item {
&:first-child::before, &:last-child::before {

&:first-child::before,
&:last-child::before {
border-left: none;
border-top: none;
left: unset;
Expand All @@ -219,14 +222,18 @@ html.cdk-global-scrollblock {
}

&.mat-menu-below .mat-mdc-menu-content .mat-mdc-menu-item {
&:first-child::before, &:last-child::before {

&:first-child::before,
&:last-child::before {
top: 15px;
bottom: unset;
}
}

&.mat-menu-above .mat-mdc-menu-content .mat-mdc-menu-item {
&:first-child::before, &:last-child::before {

&:first-child::before,
&:last-child::before {
top: unset;
bottom: 15px;
}
Expand All @@ -253,14 +260,18 @@ html.cdk-global-scrollblock {
}

&.mat-menu-after .mat-mdc-menu-content .mat-mdc-menu-item {
&:first-child::before, &:last-child::before {

&:first-child::before,
&:last-child::before {
left: 15px;
right: unset;
}
}

&.mat-menu-before .mat-mdc-menu-content .mat-mdc-menu-item {
&:first-child::before, &:last-child::before {

&:first-child::before,
&:last-child::before {
left: unset;
right: 15px;
}
Expand All @@ -273,27 +284,34 @@ html.cdk-global-scrollblock {
border: 1px solid #000;

.mat-mdc-menu-item {
display: flex;
overflow: inherit;
font-size: $font-size-medium;
background-color: $xc-menu-item-background-color;
color: #fff;
border-radius: 0;
min-height: 32px;

&[disabled] {
color: $color-disabled;
}

&>xc-icon {
flex: 1 1 auto;
}
.mat-mdc-menu-item-text {
display: flex;
font-size: $font-size-medium;
width: 100%;

&>xc-icon {
flex: 1 1 auto;
}

&>label {
flex: 0 0 auto;
&>label {
flex: 1;
text-align: right;
}
}
}

:not([disabled]) {

&.mat-mdc-menu-item:hover,
&.mat-menu-item.cdk-program-focused,
&.mat-menu-item.cdk-keyboard-focused,
Expand Down
1 change: 0 additions & 1 deletion xc/xc-checkbox/xc-checkbox.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@
display: flex;
justify-content: center;
align-items: center;
margin: 0 4px;

.mat-mdc-checkbox-touch-target,
input {
Expand Down
2 changes: 2 additions & 0 deletions xc/xc-dialog/xc-dialog-wrapper.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ $resizable: var(--resizable);

&::before {
height: unset;
display: none;
}
}

Expand Down Expand Up @@ -149,6 +150,7 @@ $resizable: var(--resizable);

&::before {
height: unset;
display: none;
}
}

Expand Down
2 changes: 1 addition & 1 deletion xc/xc-form/xc-form-base/xc-form-base.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ $suffix-icon-height: 24px;
}

// hide the material required-asterisk for we show one ourselves
::ng-deep.mat-placeholder-required {
::ng-deep.mat-placeholder-required, ::ng-deep.mat-mdc-form-field-required-marker {
display: none;
}
}
Expand Down
35 changes: 24 additions & 11 deletions xc/xc-tree/xc-tree.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ $template-width: 256px;
&:hover {
background-color: rgba(255, 255, 255, 0.05);
}

&.selected {
background-color: rgba(255, 255, 255, 0.10);
}
Expand All @@ -51,16 +52,18 @@ $template-width: 256px;
align-items: center;
padding: 2px;

& > label {
&>label {
pointer-events: none;
padding-right: 6px;
word-break: break-word;
text-overflow: ellipsis;
flex: 1 1 auto;
color: $xc-tree-label-color;

&.disabled {
color: $xc-tree-label-color-disabled;
}

&.truncated {
width: 146px;
}
Expand All @@ -74,6 +77,7 @@ $template-width: 256px;
::ng-deep xc-icon-button.tooltip {
pointer-events: initial;
touch-action: auto;

button {
cursor: help;
}
Expand All @@ -87,17 +91,19 @@ $template-width: 256px;
align-items: center;

::ng-deep {
xc-form-autocomplete, xc-form-input {

xc-form-autocomplete,
xc-form-input {
width: $template-width;
}

xc-checkbox {
display: flex;
position: absolute;
z-index: 1;
height: 100%;
top: 0;
padding: 0 8px;


.mat-mdc-checkbox {
display: flex;
}
Expand All @@ -107,6 +113,7 @@ $template-width: 256px;
user-select: none;
}
}

xc-icon-button {
margin-left: 8px;
}
Expand All @@ -118,20 +125,20 @@ $template-width: 256px;
}
}

xc-template + xc-template {
::ng-deep input {
padding-left: 34px;
}
xc-template+xc-template .mat-mdc-input-element {
padding-left: 34px;
}
}

::ng-deep :not(.fixed) {
&.child, &.parent {

&.child,
&.parent {
margin-left: 24px;
}
}

xc-icon-button + .child {
xc-icon-button+.child {
margin-left: 0;
}

Expand Down Expand Up @@ -159,12 +166,15 @@ $template-width: 256px;
&:hover {
background-color: #fff;
}

&.selected {
background-color: $color-primary;
}

&.fixed:hover {
background-color: $color-gray-3;
}

&.fixed.selected {
background-color: #000;
}
Expand All @@ -174,10 +184,12 @@ $template-width: 256px;
overflow-x: hidden;
border-bottom: 1px solid $color-gray-2;
background-color: $color-gray-5;

::ng-deep {
label {
color: #000;
}

xc-icon i {
color: $color-gray-3;
}
Expand All @@ -186,6 +198,7 @@ $template-width: 256px;

::ng-deep .mat-tree-node.fixed {
background-color: $color-gray-3;

::ng-deep {
label {
padding-left: 6px;
Expand Down Expand Up @@ -216,4 +229,4 @@ $template-width: 256px;
}
}
}
}
}

0 comments on commit 6d42e72

Please sign in to comment.