@devopmaat/badaboom 1.3.0 → 1.3.2
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.
- package/fesm2022/devopmaat-badaboom.mjs +576 -256
- package/fesm2022/devopmaat-badaboom.mjs.map +1 -1
- package/lib/application/common/full-table/bdb-full-table.component.d.ts +2 -1
- package/lib/application/common/table/_bdb-table-theme.scss +71 -0
- package/lib/application/common/table/bdb-table.component.d.ts +4 -3
- package/lib/application/media/media-display/media-display.component.d.ts +23 -0
- package/lib/application/media/media-full-table/media-full-table.component.d.ts +24 -0
- package/lib/application/media/media-table/media-table.component.d.ts +21 -0
- package/lib/application/media/media-type.pipe.d.ts +8 -0
- package/lib/application/media/media-upload/media-drop.directive.d.ts +27 -0
- package/lib/application/media/media-upload/media-upload.component.d.ts +15 -0
- package/lib/application/task-log/task-log-outcome.pipe.d.ts +1 -1
- package/lib/application/task-log/task-log-status.pipe.d.ts +1 -1
- package/lib/bdb-options.d.ts +3 -0
- package/lib/common/alert/_bdb-alert-theme.scss +39 -0
- package/lib/common/alert/bdb-alert.component.d.ts +3 -13
- package/lib/common/alert-error-response/bdb-alert-error-response.component.d.ts +0 -2
- package/lib/common/collapse-row/{_collapse-row-theme.scss → _bdb-collapse-row-theme.scss} +6 -5
- package/lib/common/field/_bdb-field-theme.scss +39 -0
- package/lib/common/file-size.pipe.d.ts +7 -0
- package/lib/common/youtube-player/youtube-player.component.d.ts +14 -0
- package/lib/domain/enums/media-type.d.ts +1 -0
- package/lib/domain/enums/task-log-outcome.d.ts +1 -0
- package/lib/domain/enums/task-log-status.d.ts +1 -0
- package/lib/styles/_core-theme.scss +42 -5
- package/lib/styles/_theme.scss +55 -138
- package/lib/styles/material/_badge-theme.scss +46 -0
- package/lib/styles/material/_button-theme.scss +66 -0
- package/lib/styles/material/_card-theme.scss +41 -0
- package/lib/styles/material/_checkbox-theme.scss +35 -0
- package/lib/styles/material/_chips-theme.scss +37 -0
- package/lib/styles/material/_datepicker-theme.scss +36 -0
- package/lib/styles/material/_fab-theme.scss +50 -0
- package/lib/styles/material/_form-field-theme.scss +48 -0
- package/lib/styles/material/_icon-button-theme.scss +52 -0
- package/lib/styles/material/{_progress-spinner-m3-theme.scss → _icon-theme.scss} +12 -4
- package/lib/styles/material/_option-theme.scss +45 -0
- package/lib/styles/material/_progress-bar-theme.scss +39 -0
- package/lib/styles/material/_progress-spinner-theme.scss +35 -0
- package/lib/styles/material/_radio-theme.scss +47 -0
- package/lib/styles/material/_slide-toggle-theme.scss +39 -0
- package/lib/styles/material/_slider-theme.scss +59 -0
- package/lib/styles/material/_stepper-theme.scss +45 -0
- package/lib/styles/material/_tabs-theme.scss +32 -0
- package/lib/styles/material/_toolbar-theme.scss +41 -0
- package/package.json +3 -2
- package/public-api.d.ts +9 -2
- package/lib/application/common/query-input/_bdb-query-input-m2-theme.scss +0 -17
- package/lib/application/common/query-input/_bdb-query-input-m3-theme.scss +0 -30
- package/lib/application/common/search/_bdb-search-m2-theme.scss +0 -12
- package/lib/application/common/table/_bdb-table-m2-theme.scss +0 -48
- package/lib/application/common/table/_bdb-table-m3-theme.scss +0 -70
- package/lib/common/_button-m2-theme.scss +0 -87
- package/lib/common/_icon-m2-theme.scss +0 -32
- package/lib/common/alert/_bdb-alert-m2-theme.scss +0 -34
- package/lib/common/alert/_bdb-alert-m3-theme.scss +0 -29
- package/lib/common/boolean-display/_bdb-boolean-display-m2-theme.scss +0 -18
- package/lib/common/boolean-display/_bdb-boolean-display-m3-theme.scss +0 -27
- package/lib/common/color.d.ts +0 -14
- package/lib/common/constructor.d.ts +0 -2
- package/lib/common/field/_bdb-field-m2-theme.scss +0 -13
- package/lib/common/field/_bdb-field-m3-theme.scss +0 -56
- package/lib/styles/material/_badge-m3-theme.scss +0 -35
- package/lib/styles/material/_button-m3-theme.scss +0 -84
- package/lib/styles/material/_card-m3-theme.scss +0 -34
- package/lib/styles/material/_checkbox-m3-theme.scss +0 -54
- package/lib/styles/material/_chips-m3-theme.scss +0 -58
- package/lib/styles/material/_datepicker-m3-theme.scss +0 -84
- package/lib/styles/material/_fab-m3-theme.scss +0 -84
- package/lib/styles/material/_form-field-m3-theme.scss +0 -36
- package/lib/styles/material/_icon-m3-theme.scss +0 -32
- package/lib/styles/material/_option-m3-theme.scss +0 -34
- package/lib/styles/material/_progress-bar-m3-theme.scss +0 -31
- package/lib/styles/material/_radio-m3-theme.scss +0 -42
- package/lib/styles/material/_slide-toggle-m3-theme.scss +0 -68
- package/lib/styles/material/_slider-m3-theme.scss +0 -48
- package/lib/styles/material/_stepper-m3-theme.scss +0 -44
- package/lib/styles/material/_tabs-m3-theme.scss +0 -32
- package/lib/styles/material/_toolbar-m3-theme.scss +0 -63
- /package/lib/common/collapse-row/{collapse-row.component.d.ts → bdb-collapse-row.component.d.ts} +0 -0
- /package/lib/common/{plain-number-pipe.d.ts → plain-number.pipe.d.ts} +0 -0
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use 'sass:list';
|
|
3
|
-
@use '@angular/material' as mat;
|
|
4
|
-
@use '../core-theme' as bdb;
|
|
5
|
-
|
|
6
|
-
@mixin color($theme) {
|
|
7
|
-
// does not support error...?
|
|
8
|
-
@each $palette-name in primary, secondary, tertiary {
|
|
9
|
-
.mat-mdc-fab.#{$palette-name},
|
|
10
|
-
.mat-mdc-fab.mat-#{$palette-name},
|
|
11
|
-
.mat-mdc-mini-fab.#{$palette-name},
|
|
12
|
-
.mat-mdc-mini-fab.mat-#{$palette-name} {
|
|
13
|
-
@include mat.fab-color($theme, $color-variant: $palette-name);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// so add error this way
|
|
18
|
-
@each $palette-name in list.join(bdb.$badaboom-palettes, 'error') {
|
|
19
|
-
.mat-mdc-fab.#{$palette-name},
|
|
20
|
-
.mat-mdc-fab.mat-#{$palette-name},
|
|
21
|
-
.mat-mdc-mini-fab.#{$palette-name},
|
|
22
|
-
.mat-mdc-mini-fab.mat-#{$palette-name} {
|
|
23
|
-
--mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
24
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
25
|
-
--mdc-extended-fab-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
26
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
27
|
-
--mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
|
|
28
|
-
0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
29
|
-
--mdc-extended-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
30
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
31
|
-
--mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
|
|
32
|
-
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
33
|
-
--mdc-fab-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
34
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
35
|
-
--mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
|
|
36
|
-
0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
37
|
-
--mdc-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
38
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
39
|
-
--mdc-fab-container-color: var(--sys-#{$palette-name}-container);
|
|
40
|
-
--mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
41
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
42
|
-
--mdc-fab-small-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
43
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
44
|
-
--mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
|
|
45
|
-
0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
46
|
-
--mdc-fab-small-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
|
|
47
|
-
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
|
|
48
|
-
--mdc-fab-small-container-color: var(--sys-#{$palette-name}-container);
|
|
49
|
-
--mat-fab-foreground-color: var(--sys-on-#{$palette-name}-container);
|
|
50
|
-
--mat-fab-state-layer-color: var(--sys-on-#{$palette-name}-container);
|
|
51
|
-
--mat-fab-ripple-color: color-mix(in srgb, var(--sys-on-#{$palette-name}-container) 12%, transparent);
|
|
52
|
-
--mat-fab-hover-state-layer-opacity: 0.08;
|
|
53
|
-
--mat-fab-focus-state-layer-opacity: 0.12;
|
|
54
|
-
--mat-fab-pressed-state-layer-opacity: 0.12;
|
|
55
|
-
--mat-fab-disabled-state-container-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
|
|
56
|
-
--mat-fab-disabled-state-foreground-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
|
|
57
|
-
--mat-fab-small-foreground-color: var(--sys-on-#{$palette-name}-container);
|
|
58
|
-
--mat-fab-small-state-layer-color: var(--sys-on-#{$palette-name}-container);
|
|
59
|
-
--mat-fab-small-ripple-color: color-mix(in srgb, var(--sys-on-#{$palette-name}-container) 12%, transparent);
|
|
60
|
-
--mat-fab-small-hover-state-layer-opacity: 0.08;
|
|
61
|
-
--mat-fab-small-focus-state-layer-opacity: 0.12;
|
|
62
|
-
--mat-fab-small-pressed-state-layer-opacity: 0.12;
|
|
63
|
-
--mat-fab-small-disabled-state-container-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
|
|
64
|
-
--mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
@mixin typography($theme) {
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@mixin theme($theme) {
|
|
73
|
-
// round button corners to 8px
|
|
74
|
-
--mdc-fab-container-shape: 8px;
|
|
75
|
-
--mdc-fab-small-container-shape: 8px;
|
|
76
|
-
|
|
77
|
-
@if mat.theme-has($theme, color) {
|
|
78
|
-
@include color($theme);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
@if mat.theme-has($theme, typography) {
|
|
82
|
-
@include typography($theme);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-mdc-form-field {
|
|
8
|
-
@include mat.form-field-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-mdc-form-field {
|
|
14
|
-
--mdc-filled-text-field-caret-color: var(--sys-#{$palette-name});
|
|
15
|
-
--mdc-filled-text-field-focus-active-indicator-color: var(--sys-#{$palette-name});
|
|
16
|
-
--mdc-filled-text-field-focus-label-text-color: var(--sys-#{$palette-name});
|
|
17
|
-
--mdc-outlined-text-field-caret-color: var(--sys-#{$palette-name});
|
|
18
|
-
--mdc-outlined-text-field-focus-outline-color: var(--sys-#{$palette-name});
|
|
19
|
-
--mdc-outlined-text-field-focus-label-text-color: var(--sys-#{$palette-name});
|
|
20
|
-
--mat-form-field-focus-select-arrow-color: var(--sys-#{$palette-name});
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@mixin typography($theme) {
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
@mixin theme($theme) {
|
|
29
|
-
@if mat.theme-has($theme, color) {
|
|
30
|
-
@include color($theme);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@if mat.theme-has($theme, typography) {
|
|
34
|
-
@include typography($theme);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.mat-icon.#{$palette-name},
|
|
8
|
-
.mat-icon.mat-#{$palette-name} {
|
|
9
|
-
@include mat.icon-color($theme, $color-variant: $palette-name);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
14
|
-
.mat-icon.#{$palette-name},
|
|
15
|
-
.mat-icon.mat-#{$palette-name} {
|
|
16
|
-
--mat-icon-color: var(--sys-#{$palette-name});
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@mixin typography($theme) {
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@mixin theme($theme) {
|
|
25
|
-
@if mat.theme-has($theme, color) {
|
|
26
|
-
@include color($theme);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@if mat.theme-has($theme, typography) {
|
|
30
|
-
@include typography($theme);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-mdc-option {
|
|
8
|
-
@include mat.option-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-mdc-option {
|
|
14
|
-
--mat-option-selected-state-label-text-color: var(--sys-on-#{$palette-name}-container);
|
|
15
|
-
--mat-option-label-text-color: var(--sys-on-surface);
|
|
16
|
-
--mat-option-hover-state-layer-color: color-mix(in srgb, var(--sys-on-surface) 8%, transparent);
|
|
17
|
-
--mat-option-focus-state-layer-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
|
|
18
|
-
--mat-option-selected-state-layer-color: var(--sys-#{$palette-name}-container);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@mixin typography($theme) {
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@mixin theme($theme) {
|
|
27
|
-
@if mat.theme-has($theme, color) {
|
|
28
|
-
@include color($theme);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@if mat.theme-has($theme, typography) {
|
|
32
|
-
@include typography($theme);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-mdc-progress-bar {
|
|
8
|
-
@include mat.progress-bar-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-mdc-progress-bar {
|
|
14
|
-
--mdc-linear-progress-active-indicator-color: var(--sys-#{$palette-name});
|
|
15
|
-
--mdc-linear-progress-track-color: var(--sys-#{$palette-name}-container);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@mixin typography($theme) {
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@mixin theme($theme) {
|
|
24
|
-
@if mat.theme-has($theme, color) {
|
|
25
|
-
@include color($theme);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
@if mat.theme-has($theme, typography) {
|
|
29
|
-
@include typography($theme);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-mdc-radio-button {
|
|
8
|
-
@include mat.radio-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-mdc-radio-button {
|
|
14
|
-
--mdc-radio-disabled-selected-icon-color: var(--sys-on-surface);
|
|
15
|
-
--mdc-radio-disabled-unselected-icon-color: var(--sys-on-surface);
|
|
16
|
-
--mdc-radio-unselected-hover-icon-color: var(--sys-on-surface);
|
|
17
|
-
--mdc-radio-unselected-icon-color: var(--sys-on-surface-variant);
|
|
18
|
-
--mdc-radio-unselected-pressed-icon-color: var(--sys-on-surface);
|
|
19
|
-
--mdc-radio-selected-focus-icon-color: var(--sys-#{$palette-name});
|
|
20
|
-
--mdc-radio-selected-hover-icon-color: var(--sys-#{$palette-name});
|
|
21
|
-
--mdc-radio-selected-icon-color: var(--sys-#{$palette-name});
|
|
22
|
-
--mdc-radio-selected-pressed-icon-color: var(--sys-#{$palette-name});
|
|
23
|
-
--mat-radio-ripple-color: var(--sys-on-surface);
|
|
24
|
-
--mat-radio-checked-ripple-color: var(--sys-#{$palette-name});
|
|
25
|
-
--mat-radio-disabled-label-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
|
|
26
|
-
--mat-radio-label-text-color: var(--sys-on-surface);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@mixin typography($theme) {
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@mixin theme($theme) {
|
|
35
|
-
@if mat.theme-has($theme, color) {
|
|
36
|
-
@include color($theme);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@if mat.theme-has($theme, typography) {
|
|
40
|
-
@include typography($theme);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-mdc-slide-toggle {
|
|
8
|
-
@include mat.slide-toggle-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-mdc-slide-toggle {
|
|
14
|
-
--mdc-switch-selected-focus-state-layer-opacity: 0.12;
|
|
15
|
-
--mdc-switch-selected-hover-state-layer-opacity: 0.08;
|
|
16
|
-
--mdc-switch-selected-pressed-state-layer-opacity: 0.12;
|
|
17
|
-
--mdc-switch-unselected-focus-state-layer-opacity: 0.12;
|
|
18
|
-
--mdc-switch-unselected-hover-state-layer-opacity: 0.08;
|
|
19
|
-
--mdc-switch-unselected-pressed-state-layer-opacity: 0.12;
|
|
20
|
-
--mdc-switch-selected-focus-state-layer-color: var(--sys-#{$palette-name});
|
|
21
|
-
--mdc-switch-selected-handle-color: var(--sys-on-#{$palette-name});
|
|
22
|
-
--mdc-switch-selected-hover-state-layer-color: var(--sys-#{$palette-name});
|
|
23
|
-
--mdc-switch-selected-pressed-state-layer-color: var(--sys-#{$palette-name});
|
|
24
|
-
--mdc-switch-selected-focus-handle-color: var(--sys-#{$palette-name}-container);
|
|
25
|
-
--mdc-switch-selected-hover-handle-color: var(--sys-#{$palette-name}-container);
|
|
26
|
-
--mdc-switch-selected-pressed-handle-color: var(--sys-#{$palette-name}-container);
|
|
27
|
-
--mdc-switch-selected-focus-track-color: var(--sys-#{$palette-name});
|
|
28
|
-
--mdc-switch-selected-hover-track-color: var(--sys-#{$palette-name});
|
|
29
|
-
--mdc-switch-selected-pressed-track-color: var(--sys-#{$palette-name});
|
|
30
|
-
--mdc-switch-selected-track-color: var(--sys-#{$palette-name});
|
|
31
|
-
--mdc-switch-disabled-selected-handle-color: var(--sys-surface);
|
|
32
|
-
--mdc-switch-disabled-selected-icon-color: var(--sys-on-surface);
|
|
33
|
-
--mdc-switch-disabled-selected-track-color: var(--sys-on-surface);
|
|
34
|
-
--mdc-switch-disabled-unselected-handle-color: var(--sys-on-surface);
|
|
35
|
-
--mdc-switch-disabled-unselected-icon-color: var(--sys-surface-variant);
|
|
36
|
-
--mdc-switch-disabled-unselected-track-color: var(--sys-surface-variant);
|
|
37
|
-
--mdc-switch-selected-icon-color: var(--sys-on-#{$palette-name}-container);
|
|
38
|
-
--mdc-switch-unselected-focus-handle-color: var(--sys-on-surface-variant);
|
|
39
|
-
--mdc-switch-unselected-focus-state-layer-color: var(--sys-on-surface);
|
|
40
|
-
--mdc-switch-unselected-focus-track-color: var(--sys-surface-variant);
|
|
41
|
-
--mdc-switch-unselected-handle-color: var(--sys-outline);
|
|
42
|
-
--mdc-switch-unselected-hover-handle-color: var(--sys-on-surface-variant);
|
|
43
|
-
--mdc-switch-unselected-hover-state-layer-color: var(--sys-on-surface);
|
|
44
|
-
--mdc-switch-unselected-hover-track-color: var(--sys-surface-variant);
|
|
45
|
-
--mdc-switch-unselected-icon-color: var(--sys-surface-variant);
|
|
46
|
-
--mdc-switch-unselected-pressed-handle-color: var(--sys-on-surface-variant);
|
|
47
|
-
--mdc-switch-unselected-pressed-state-layer-color: var(--sys-on-surface);
|
|
48
|
-
--mdc-switch-unselected-pressed-track-color: var(--sys-surface-variant);
|
|
49
|
-
--mdc-switch-unselected-track-color: var(--sys-surface-variant);
|
|
50
|
-
--mat-switch-track-outline-color: var(--sys-outline);
|
|
51
|
-
--mat-switch-disabled-unselected-track-outline-color: var(--sys-on-surface);
|
|
52
|
-
--mat-switch-label-text-color: var(--sys-on-surface);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@mixin typography($theme) {
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@mixin theme($theme) {
|
|
61
|
-
@if mat.theme-has($theme, color) {
|
|
62
|
-
@include color($theme);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@if mat.theme-has($theme, typography) {
|
|
66
|
-
@include typography($theme);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-mdc-slider {
|
|
8
|
-
@include mat.slider-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-mdc-slider {
|
|
14
|
-
--mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
|
|
15
|
-
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
|
|
16
|
-
--mdc-slider-handle-color: var(--sys-#{$palette-name});
|
|
17
|
-
--mdc-slider-focus-handle-color: var(--sys-#{$palette-name});
|
|
18
|
-
--mdc-slider-hover-handle-color: var(--sys-#{$palette-name});
|
|
19
|
-
--mdc-slider-active-track-color: var(--sys-#{$palette-name});
|
|
20
|
-
--mdc-slider-inactive-track-color: var(--sys-surface-variant);
|
|
21
|
-
--mdc-slider-with-tick-marks-inactive-container-color: var(--sys-on-surface-variant);
|
|
22
|
-
--mdc-slider-with-tick-marks-active-container-color: var(--sys-on-#{$palette-name});
|
|
23
|
-
--mdc-slider-disabled-active-track-color: var(--sys-on-surface);
|
|
24
|
-
--mdc-slider-disabled-handle-color: var(--sys-on-surface);
|
|
25
|
-
--mdc-slider-disabled-inactive-track-color: var(--sys-on-surface);
|
|
26
|
-
--mdc-slider-label-container-color: var(--sys-#{$palette-name});
|
|
27
|
-
--mdc-slider-label-label-text-color: var(--sys-on-#{$palette-name});
|
|
28
|
-
--mdc-slider-with-overlap-handle-outline-color: var(--sys-on-#{$palette-name});
|
|
29
|
-
--mdc-slider-with-tick-marks-disabled-container-color: var(--sys-on-surface);
|
|
30
|
-
--mat-slider-ripple-color: var(--sys-#{$palette-name});
|
|
31
|
-
--mat-slider-hover-state-layer-color: color-mix(in srgb, var(--sys-#{$palette-name}) 5%, transparent);
|
|
32
|
-
--mat-slider-focus-state-layer-color: color-mix(in srgb, var(--sys-#{$palette-name}) 20%, transparent);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@mixin typography($theme) {
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@mixin theme($theme) {
|
|
41
|
-
@if mat.theme-has($theme, color) {
|
|
42
|
-
@include color($theme);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@if mat.theme-has($theme, typography) {
|
|
46
|
-
@include typography($theme);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-stepper-horizontal {
|
|
8
|
-
@include mat.stepper-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-stepper-horizontal {
|
|
14
|
-
--mat-stepper-header-icon-foreground-color: var(--sys-surface);
|
|
15
|
-
--mat-stepper-header-selected-state-icon-background-color: var(--sys-#{$palette-name});
|
|
16
|
-
--mat-stepper-header-selected-state-icon-foreground-color: var(--sys-on-#{$palette-name});
|
|
17
|
-
--mat-stepper-header-edit-state-icon-background-color: var(--sys-#{$palette-name});
|
|
18
|
-
--mat-stepper-header-edit-state-icon-foreground-color: var(--sys-on-#{$palette-name});
|
|
19
|
-
--mat-stepper-container-color: var(--sys-surface);
|
|
20
|
-
--mat-stepper-line-color: var(--sys-outline);
|
|
21
|
-
--mat-stepper-header-hover-state-layer-color: color-mix(in srgb, var(--sys-inverse-surface) 8%, transparent);
|
|
22
|
-
--mat-stepper-header-focus-state-layer-color: color-mix(in srgb, var(--sys-inverse-surface) 12%, transparent);
|
|
23
|
-
--mat-stepper-header-label-text-color: var(--sys-on-surface-variant);
|
|
24
|
-
--mat-stepper-header-optional-label-text-color: var(--sys-on-surface-variant);
|
|
25
|
-
--mat-stepper-header-selected-state-label-text-color: var(--sys-on-surface-variant);
|
|
26
|
-
--mat-stepper-header-error-state-label-text-color: var(--sys-error);
|
|
27
|
-
--mat-stepper-header-icon-background-color: var(--sys-on-surface-variant);
|
|
28
|
-
--mat-stepper-header-error-state-icon-foreground-color: var(--sys-error);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@mixin typography($theme) {
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@mixin theme($theme) {
|
|
37
|
-
@if mat.theme-has($theme, color) {
|
|
38
|
-
@include color($theme);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@if mat.theme-has($theme, typography) {
|
|
42
|
-
@include typography($theme);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
@each $palette-name in bdb.$material-palettes {
|
|
7
|
-
.#{$palette-name}.mat-mdc-tab-group {
|
|
8
|
-
@include mat.tabs-color($theme, $color-variant: $palette-name);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@each $palette-name in bdb.$badaboom-palettes {
|
|
13
|
-
.#{$palette-name}.mat-mdc-tab-group {
|
|
14
|
-
--mdc-tab-indicator-active-indicator-color: var(--sys-#{$palette-name});
|
|
15
|
-
--mat-tab-header-active-focus-indicator-color: var(--sys-#{$palette-name});
|
|
16
|
-
--mat-tab-header-active-hover-indicator-color: var(--sys-#{$palette-name});
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@mixin typography($theme) {
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@mixin theme($theme) {
|
|
25
|
-
@if mat.theme-has($theme, color) {
|
|
26
|
-
@include color($theme);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@if mat.theme-has($theme, typography) {
|
|
30
|
-
@include typography($theme);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use '../core-theme' as bdb;
|
|
4
|
-
|
|
5
|
-
@mixin color($theme) {
|
|
6
|
-
.mat-toolbar {
|
|
7
|
-
@if mat.get-theme-type($theme) == dark {
|
|
8
|
-
--mat-toolbar-container-background-color: var(--sys-surface-container);
|
|
9
|
-
} @else {
|
|
10
|
-
--mat-toolbar-container-background-color: var(--sys-surface-container-low);
|
|
11
|
-
}
|
|
12
|
-
--mat-toolbar-container-text-color: var(--sys-on-surface);
|
|
13
|
-
|
|
14
|
-
@each $palette-name in bdb.$palette-names {
|
|
15
|
-
&.#{$palette-name} {
|
|
16
|
-
--mat-toolbar-container-background-color: var(--sys-#{$palette-name});
|
|
17
|
-
--mat-toolbar-container-text-color: var(--sys-on-#{$palette-name});
|
|
18
|
-
|
|
19
|
-
&.container {
|
|
20
|
-
--mat-toolbar-container-background-color: var(--sys-#{$palette-name}-container);
|
|
21
|
-
--mat-toolbar-container-text-color: var(--sys-on-#{$palette-name}-container);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// @if mat.get-theme-type($theme) == dark {
|
|
28
|
-
|
|
29
|
-
// // --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, info, 10)};
|
|
30
|
-
// // --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, info, 90)};
|
|
31
|
-
// @each $palette-name in bdb.$palette-names {
|
|
32
|
-
// &.#{$palette-name} {
|
|
33
|
-
// --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
|
|
34
|
-
// --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 90)};
|
|
35
|
-
// }
|
|
36
|
-
// }
|
|
37
|
-
// } @else {
|
|
38
|
-
// --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, info, 95)};
|
|
39
|
-
// --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, info, 10)};
|
|
40
|
-
// @each $palette-name in bdb.$palette-names {
|
|
41
|
-
// &.#{$palette-name} {
|
|
42
|
-
// --mat-toolbar-container-background-color: var(--sys-#{$palette-name}-container);
|
|
43
|
-
// --mat-toolbar-container-text-color: var(--sys-on-#{$palette-name}-container);
|
|
44
|
-
// // --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 95)};
|
|
45
|
-
// // --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
|
|
46
|
-
// }
|
|
47
|
-
// }
|
|
48
|
-
// }
|
|
49
|
-
// }
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@mixin typography($theme) {
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
@mixin theme($theme) {
|
|
56
|
-
@if mat.theme-has($theme, color) {
|
|
57
|
-
@include color($theme);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@if mat.theme-has($theme, typography) {
|
|
61
|
-
@include typography($theme);
|
|
62
|
-
}
|
|
63
|
-
}
|
/package/lib/common/collapse-row/{collapse-row.component.d.ts → bdb-collapse-row.component.d.ts}
RENAMED
|
File without changes
|
|
File without changes
|