@enigmatry/entry-components 16.0.1-preview.9 → 16.1.1-preview.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/styles/modules/_default-theme.scss +12 -10
  3. package/styles/modules/components/buttons/_radio.scss +10 -5
  4. package/styles/modules/components/checkboxes/_generator.scss +17 -12
  5. package/styles/modules/components/tables/_header.scss +4 -2
  6. package/styles/modules/components/tables/_rows.scss +23 -11
  7. package/styles/modules/components/toggle/_generator.scss +25 -23
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enigmatry/entry-components",
3
- "version": "16.0.1-preview.9",
3
+ "version": "16.1.1-preview.3",
4
4
  "author": "Enigmatry",
5
5
  "description": "Enigmatry entry angular material components",
6
6
  "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/entry-components#readme",
package/styles/modules/_default-theme.scss CHANGED
@@ -66,25 +66,27 @@ $theme: (
66
66
  ),
67
67
  cells: (
68
68
  edge-gap: 4px,
69
- padding: null
69
+ padding: null,
70
70
  ),
71
71
  rows: (
72
+ odd-even-background: (
73
+ odd: #F0F0F0,
74
+ even: #FFF,
75
+ ),
72
76
  selected-color: #FFF,
73
77
  selected-background: null,
74
78
  disabled-color: #F5F5F5,
75
- odd-even-row: odd,
76
- odd-even-background: #F0F0F0
77
79
  ),
78
80
  contents: (
79
81
  no-result: (
80
- font-size: 13px,
81
- font-weight: 500
82
+ size: 13px,
83
+ font-weight: 500,
84
+ ),
85
+ ),
86
+ dialogs: (
87
+ title: (
88
+ size: 20px
82
89
  )
83
90
  )
84
- ),
85
- dialogs: (
86
- title: (
87
- size: 20px
88
- )
89
91
  )
90
92
  );
package/styles/modules/components/buttons/_radio.scss CHANGED
@@ -4,11 +4,16 @@ $radio-selector: '.mdc-radio__native-control:enabled:checked + .mdc-radio__backg
4
4
  $radio-circles-selector: '.mdc-radio__outer-circle, .mdc-radio__inner-circle';
5
5
 
6
6
  @mixin generate-from($theme) {
7
- .mat-mdc-radio-group .mat-mdc-radio-button {
8
- &.mat-mdc-radio-checked .mdc-radio {
9
- &:not(:disabled):active #{$radio-selector}, #{$radio-selector} {
10
- #{$radio-circles-selector} {
11
- border-color: map.get($theme, 'general', 'buttons', 'radio', 'background');
7
+ $radio-border: map.get($theme, 'general', 'buttons', 'radio', 'background');
8
+
9
+ @if $radio-border {
10
+ .mat-mdc-radio-group .mat-mdc-radio-button {
11
+ &.mat-mdc-radio-checked .mdc-radio {
12
+
13
+ &:not(:disabled):active #{$radio-selector}, #{$radio-selector} {
14
+ #{$radio-circles-selector} {
15
+ border-color: $radio-border;
16
+ }
12
17
  }
13
18
  }
14
19
  }
package/styles/modules/components/checkboxes/_generator.scss CHANGED
@@ -7,21 +7,26 @@ $checkbox-selector: '.mdc-checkbox__native-control:enabled:not(:checked):not(:in
7
7
  $background: map.get($theme, 'general', 'checkboxes', 'background');
8
8
  $border-hover-color: map.get($theme, 'general', 'checkboxes', 'border-hover-color');
9
9
 
10
- .mat-mdc-checkbox {
11
- .mdc-form-field {
12
- .mdc-checkbox {
13
- #{$checkbox-selector} {
14
- background-color: $background;
10
+ @if $background or $border-hover-color {
11
+ .mat-mdc-checkbox {
12
+ @if $background {
13
+ .mdc-form-field .mdc-checkbox {
14
+ #{$checkbox-selector} {
15
+ background-color: $background;
16
+ }
15
17
  }
16
18
  }
17
- }
18
19
 
19
- &:hover {
20
- /* stylelint-disable-next-line selector-max-pseudo-class */
21
- .mdc-checkbox:hover {
22
- #{$checkbox-selector} {
23
- border-color: $border-hover-color;
24
- background-color: $background;
20
+ &:hover {
21
+ /* stylelint-disable-next-line selector-max-pseudo-class */
22
+ .mdc-checkbox:hover {
23
+ /* stylelint-disable-next-line max-nesting-depth */
24
+ @if $background and $border-hover-color {
25
+ #{$checkbox-selector} {
26
+ border-color: $border-hover-color;
27
+ background-color: $background;
28
+ }
29
+ }
25
30
  }
26
31
  }
27
32
  }
package/styles/modules/components/tables/_header.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  @mixin generate-from($theme) {
4
4
  $cell-font-size: map.get($theme, 'tables', 'header', 'font-size');
5
5
 
6
- .mat-mdc-header-cell {
7
- font-size: $cell-font-size;
6
+ @if $cell-font-size {
7
+ .mat-mdc-header-cell {
8
+ font-size: $cell-font-size;
9
+ }
8
10
  }
9
11
  }
package/styles/modules/components/tables/_rows.scss CHANGED
@@ -1,28 +1,40 @@
1
+ /* stylelint-disable scss/at-else-closing-brace-space-after */
2
+ /* stylelint-disable scss/at-else-closing-brace-newline-after */
3
+ /* stylelint-disable max-nesting-depth */
1
4
  @use 'sass:map';
2
5
  @use '@enigmatry/scss-foundation/src/modules/lists/row-coloring' as list;
3
6
 
4
7
  @mixin generate-from($theme) {
8
+ $odd-background: map.get($theme, 'tables', 'rows', 'odd-even-background', 'odd');
9
+ $even-background: map.get($theme, 'tables', 'rows', 'odd-even-background', 'even');
10
+
5
11
  .mat-mdc-row {
6
12
  &.mdc-data-table__row {
7
- @include list.row-coloring(map.get($theme, 'tables', 'rows', 'odd-even-background'),
8
- map.get($theme, 'tables', 'rows', 'odd-even-row'));
9
-
13
+ @include list.row-coloring($odd-background, 'odd');
14
+ @include list.row-coloring($even-background, 'even');
15
+
10
16
  &.selected {
11
- background-color: map.get($theme, 'general', 'colors', 'primary');
12
17
  $selected-row-background: map.get($theme, 'tables', 'rows', 'selected-background');
13
-
14
- @if $selected-row-background and $selected-row-background != transparent {
18
+
19
+ @if $selected-row-background == transparent {
20
+ @include list.row-coloring($odd-background, 'odd');
21
+ @include list.row-coloring($even-background, 'even');
22
+ }
23
+ @else if $selected-row-background == null {
24
+ background-color: map.get($theme, 'general', 'colors', 'primary');
25
+ }
26
+ @else {
15
27
  background-color: $selected-row-background;
16
28
  }
17
-
29
+
18
30
  .mat-mdc-cell {
19
31
  color: map.get($theme, 'tables', 'rows', 'selected-color');
20
32
  }
21
33
  }
22
-
23
- &.mat-row-disabled {
24
- background-color: map.get($theme, 'tables', 'rows', 'disabled-color');
25
- }
34
+ }
35
+
36
+ &.mat-row-disabled {
37
+ background-color: map.get($theme, 'tables', 'rows', 'disabled-color');
26
38
  }
27
39
  }
28
40
  }
package/styles/modules/components/toggle/_generator.scss CHANGED
@@ -12,34 +12,36 @@
12
12
  }
13
13
 
14
14
  @mixin generate-from($theme) {
15
- .mat-mdc-slide-toggle {
16
- $enabled-states: 'enabled', 'enabled:focus:not(:active)', 'enabled:active', 'enabled:hover:not(:focus):not(:active)';
17
- $handle-selector: '.mdc-switch__handle::after';
15
+ $enabled-states: 'enabled', 'enabled:focus:not(:active)', 'enabled:active', 'enabled:hover:not(:focus):not(:active)';
16
+ $handle-selector: '.mdc-switch__handle::after';
17
+
18
+ $toggle: map.get($theme, 'general', 'toggle');
19
+ $handle-on-background: map.get($toggle, 'on', 'background');
20
+ $handle-off-background: map.get($toggle, 'off', 'background');
18
21
 
19
- $toggle: map.get($theme, 'general', 'toggle');
20
- $handle-on-background: map.get($toggle, 'on', 'background');
21
- $handle-off-background: map.get($toggle, 'off', 'background');
22
-
23
- @each $state in $enabled-states {
24
- .mdc-switch:#{$state} {
25
- &.mdc-switch--selected #{$handle-selector} {
26
- background-color: $handle-on-background;
27
- }
28
-
29
- &:not(.mdc-switch--selected) #{$handle-selector} {
30
- background-color: $handle-off-background;
31
- }
22
+ @if $handle-on-background and $handle-off-background {
23
+ .mat-mdc-slide-toggle {
24
+ @each $state in $enabled-states {
25
+ .mdc-switch:#{$state} {
26
+ &.mdc-switch--selected #{$handle-selector} {
27
+ background-color: $handle-on-background;
28
+ }
32
29
 
33
- .mdc-switch__track {
34
- &::after {
35
- background-color: -adjust-lightness($handle-on-background);
30
+ &:not(.mdc-switch--selected) #{$handle-selector} {
31
+ background-color: $handle-off-background;
36
32
  }
37
-
38
- &::before {
39
- background-color: -adjust-lightness($handle-off-background);
33
+
34
+ .mdc-switch__track {
35
+ &::after {
36
+ background-color: -adjust-lightness($handle-on-background);
37
+ }
38
+
39
+ &::before {
40
+ background-color: -adjust-lightness($handle-off-background);
41
+ }
40
42
  }
41
43
  }
42
44
  }
43
45
  }
44
46
  }
45
- }
47
+ }