@colijnit/inphoto 300.1.8 → 301.1.0

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 (86) hide show
  1. package/fesm2022/colijnit-inphoto.mjs +473 -332
  2. package/fesm2022/colijnit-inphoto.mjs.map +1 -1
  3. package/index.d.ts +49 -26
  4. package/lib/component/ai-prompt/style/_layout.scss +76 -76
  5. package/lib/component/ai-prompt/style/_material-definition.scss +38 -38
  6. package/lib/component/ai-prompt/style/_theme.scss +78 -78
  7. package/lib/component/canvas-tool-bar/style/_layout.scss +71 -63
  8. package/lib/component/canvas-tool-bar/style/_material-definition.scss +40 -37
  9. package/lib/component/canvas-tool-bar/style/_theme.scss +138 -108
  10. package/lib/component/catalog/style/_layout.scss +68 -68
  11. package/lib/component/catalog/style/_material-definition.scss +22 -22
  12. package/lib/component/catalog/style/_theme.scss +43 -43
  13. package/lib/component/configuration-side-bar-menu/style/_layout.scss +33 -33
  14. package/lib/component/configuration-side-bar-menu/style/_material-definition.scss +10 -10
  15. package/lib/component/edit-canvas/style/_layout.scss +74 -85
  16. package/lib/component/edit-canvas/style/_material-definition.scss +21 -25
  17. package/lib/component/edit-canvas/style/_theme.scss +26 -61
  18. package/lib/component/error-dialog/style/_layout.scss +36 -36
  19. package/lib/component/error-dialog/style/_material-definition.scss +12 -12
  20. package/lib/component/error-dialog/style/_theme.scss +17 -17
  21. package/lib/component/header/style/_layout.scss +20 -20
  22. package/lib/component/header/style/_material-definition.scss +8 -8
  23. package/lib/component/image-enhancer/style/_layout.scss +37 -37
  24. package/lib/component/image-enhancer/style/_material-definition.scss +13 -13
  25. package/lib/component/image-enhancer/style/_theme.scss +45 -45
  26. package/lib/component/image-enhancer-style/style/_layout.scss +65 -65
  27. package/lib/component/image-enhancer-style/style/_material-definition.scss +16 -16
  28. package/lib/component/image-enhancer-style/style/_theme.scss +120 -120
  29. package/lib/component/image-enhancer-upload/style/_layout.scss +48 -48
  30. package/lib/component/image-enhancer-upload/style/_material-definition.scss +14 -14
  31. package/lib/component/image-enhancer-upload/style/_theme.scss +66 -66
  32. package/lib/component/image-history/style/_layout.scss +57 -57
  33. package/lib/component/image-history/style/_material-definition.scss +20 -20
  34. package/lib/component/image-history/style/_theme.scss +25 -25
  35. package/lib/component/image-history-tile/style/_layout.scss +53 -53
  36. package/lib/component/image-history-tile/style/_material-definition.scss +15 -15
  37. package/lib/component/image-history-tile/style/_theme.scss +32 -32
  38. package/lib/component/image-overlay/style/_layout.scss +84 -84
  39. package/lib/component/image-overlay/style/_material-definition.scss +21 -21
  40. package/lib/component/image-overlay/style/_theme.scss +40 -40
  41. package/lib/component/image-overlay/style/material.scss +3 -3
  42. package/lib/component/image-process-complete/style/_layout.scss +42 -42
  43. package/lib/component/image-process-complete/style/_material-definition.scss +13 -13
  44. package/lib/component/image-process-complete/style/_theme.scss +24 -24
  45. package/lib/component/image-tile/components/color-palette-option/style/_layout.scss +15 -15
  46. package/lib/component/image-tile/components/color-palette-option/style/_material-definition.scss +9 -9
  47. package/lib/component/image-tile/components/color-palette-option/style/_theme.scss +15 -15
  48. package/lib/component/image-tile/style/_layout.scss +102 -102
  49. package/lib/component/image-tile/style/_material-definition.scss +18 -18
  50. package/lib/component/image-tile/style/_theme.scss +58 -58
  51. package/lib/component/image-upload/style/_layout.scss +93 -93
  52. package/lib/component/image-upload/style/_material-definition.scss +35 -35
  53. package/lib/component/image-upload/style/_theme.scss +103 -103
  54. package/lib/component/marker/style/_layout.scss +30 -30
  55. package/lib/component/marker/style/_material-definition.scss +12 -12
  56. package/lib/component/marker/style/_theme.scss +30 -30
  57. package/lib/component/marker/style/material.scss +3 -3
  58. package/lib/component/photo-editor/style/_layout.scss +38 -38
  59. package/lib/component/photo-editor/style/_material-definition.scss +8 -8
  60. package/lib/component/prepare-starting-image/style/_layout.scss +34 -34
  61. package/lib/component/prepare-starting-image/style/_material-definition.scss +11 -11
  62. package/lib/component/process-loader/style/_layout.scss +74 -74
  63. package/lib/component/process-loader/style/_material-definition.scss +24 -24
  64. package/lib/component/process-loader/style/_theme.scss +128 -128
  65. package/lib/component/scene-context-menu/style/_layout.scss +59 -59
  66. package/lib/component/scene-context-menu/style/_material-definition.scss +27 -27
  67. package/lib/component/scene-context-menu/style/_theme.scss +57 -57
  68. package/lib/component/segment-inpaint/style/_layout.scss +51 -51
  69. package/lib/component/segment-inpaint/style/_material-definition.scss +11 -11
  70. package/lib/component/segment-inpaint/style/_theme.scss +29 -29
  71. package/lib/component/side-bar-menu/style/_layout.scss +26 -26
  72. package/lib/component/side-bar-menu/style/_material-definition.scss +12 -12
  73. package/lib/component/side-bar-menu/style/_theme.scss +32 -32
  74. package/lib/component/side-panel/style/_layout.scss +45 -45
  75. package/lib/component/side-panel/style/_material-definition.scss +16 -16
  76. package/lib/component/side-panel/style/_theme.scss +39 -39
  77. package/lib/component/step-tile/style/_layout.scss +50 -50
  78. package/lib/component/step-tile/style/_material-definition.scss +20 -20
  79. package/lib/component/step-tile/style/_theme.scss +78 -78
  80. package/lib/component/threedscene/style/_layout.scss +57 -57
  81. package/lib/component/threedscene/style/_material-definition.scss +12 -12
  82. package/lib/component/threedscene/style/_theme.scss +17 -17
  83. package/lib/component/upload-starting-image/style/_layout.scss +58 -58
  84. package/lib/component/upload-starting-image/style/_material-definition.scss +18 -18
  85. package/lib/component/upload-starting-image/style/_theme.scss +39 -39
  86. package/package.json +6 -6
@@ -1,57 +1,57 @@
1
- @use '../../../style' as cfg;
2
-
3
- @include cfg.export-module('co-scene-context-menu-theme') {
4
- .co-scene-context-menu {
5
- font-family: var(--co-inphoto-scene-context-menu-font-family);
6
- font-size: var(--co-inphoto-scene-context-menu-font-size-text);
7
-
8
- .scene-context-menu-container {
9
- background: var(--co-inphoto-background-white);
10
- box-shadow: var(--co-inphoto-context-menu-box-shadow);
11
- border-radius: var(--co-inphoto-scene-context-menu-container-radius);
12
-
13
- .scene-context-menu-body {
14
- .scene-context-menu-item {
15
- border-radius: var(--co-inphoto-scene-context-menu-item-radius);
16
- transition: var(--co-inphoto-scene-context-menu-item-transition);
17
-
18
- .scene-context-menu-item-icon {
19
- @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
20
- }
21
-
22
- .scene-context-menu-item-text {
23
- opacity: var(--co-inphoto-scene-context-menu-item-text-hidden-opacity);
24
- background: var(--co-inphoto-background-white);
25
- box-shadow: var(--co-inphoto-context-menu-box-shadow);
26
- border-radius: var(--co-inphoto-scene-context-menu-item-text-radius);
27
- transition: var(--co-inphoto-scene-context-menu-item-text-transition);
28
- @include cfg.text();
29
-
30
- &::before {
31
- border: var(--co-inphoto-scene-context-menu-arrow-border);
32
- border-bottom-color: var(--co-inphoto-background-white);
33
- }
34
- }
35
-
36
- &:hover {
37
- background: var(--co-inphoto-context-menu-hover-background);
38
-
39
- .scene-context-menu-item-text {
40
- opacity: var(--co-inphoto-scene-context-menu-item-text-visible-opacity);
41
- }
42
- }
43
-
44
- &.active {
45
- background: var(--co-inphoto-accent-color);
46
-
47
- @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
48
-
49
- &:hover {
50
- background: var(--co-inphoto-accent-color);
51
- }
52
- }
53
- }
54
- }
55
- }
56
- }
57
- }
1
+ @use '../../../style' as cfg;
2
+
3
+ @include cfg.export-module('co-scene-context-menu-theme') {
4
+ .co-scene-context-menu {
5
+ font-family: var(--co-inphoto-scene-context-menu-font-family);
6
+ font-size: var(--co-inphoto-scene-context-menu-font-size-text);
7
+
8
+ .scene-context-menu-container {
9
+ background: var(--co-inphoto-background-white);
10
+ box-shadow: var(--co-inphoto-context-menu-box-shadow);
11
+ border-radius: var(--co-inphoto-scene-context-menu-container-radius);
12
+
13
+ .scene-context-menu-body {
14
+ .scene-context-menu-item {
15
+ border-radius: var(--co-inphoto-scene-context-menu-item-radius);
16
+ transition: var(--co-inphoto-scene-context-menu-item-transition);
17
+
18
+ .scene-context-menu-item-icon {
19
+ @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
20
+ }
21
+
22
+ .scene-context-menu-item-text {
23
+ opacity: var(--co-inphoto-scene-context-menu-item-text-hidden-opacity);
24
+ background: var(--co-inphoto-background-white);
25
+ box-shadow: var(--co-inphoto-context-menu-box-shadow);
26
+ border-radius: var(--co-inphoto-scene-context-menu-item-text-radius);
27
+ transition: var(--co-inphoto-scene-context-menu-item-text-transition);
28
+ @include cfg.text();
29
+
30
+ &::before {
31
+ border: var(--co-inphoto-scene-context-menu-arrow-border);
32
+ border-bottom-color: var(--co-inphoto-background-white);
33
+ }
34
+ }
35
+
36
+ &:hover {
37
+ background: var(--co-inphoto-context-menu-hover-background);
38
+
39
+ .scene-context-menu-item-text {
40
+ opacity: var(--co-inphoto-scene-context-menu-item-text-visible-opacity);
41
+ }
42
+ }
43
+
44
+ &.active {
45
+ background: var(--co-inphoto-accent-color);
46
+
47
+ @include cfg.default-icon(var(--co-inphoto-icon-size), var(--co-inphoto-icon-size), var(--co-inphoto-icon-color-light));
48
+
49
+ &:hover {
50
+ background: var(--co-inphoto-accent-color);
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
57
+ }
@@ -1,51 +1,51 @@
1
- @use '../../../style' as cfg;
2
-
3
- @include cfg.export-module('co-segment-inpaint-layout') {
4
- .co-segment-inpaint {
5
- .segment-inpaint-container {
6
- width: var(--co-inphoto-segment-inpaint-full-size);
7
- height: var(--co-inphoto-segment-inpaint-full-size);
8
- padding: var(--co-inphoto-segment-inpaint-zero);
9
- margin: var(--co-inphoto-segment-inpaint-zero);
10
- position: var(--co-inphoto-segment-inpaint-position-relative);
11
-
12
-
13
- .inpaint-container {
14
- display: flex;
15
-
16
- .inpaint-canvas-container {
17
- width: var(--co-inphoto-left-container-width);
18
- }
19
-
20
- .inpaint-info {
21
- width: var(--co-inphoto-right-container-width);
22
-
23
- .inpaint-info-dialog-tile-group {
24
- display: flex;
25
- gap: var(--co-inphoto-segment-inpaint-tile-group-gap);
26
-
27
- .co-step-tile {
28
- flex: 1;
29
-
30
- .button-container {
31
- display: block;
32
-
33
- .image-container {
34
- --co-inphoto-step-tile-image-size: var(--co-inphoto-segment-inpaint-tile-image-size);
35
- }
36
- .button-container-text-container {
37
- --co-inphoto-step-tile-button-container-padding: var(--co-inphoto-segment-inpaint-tile-container-padding);
38
- }
39
- }
40
-
41
- &.tile-disabled {
42
- pointer-events: none;
43
- cursor: not-allowed;
44
- }
45
- }
46
- }
47
- }
48
- }
49
- }
50
- }
51
- }
1
+ @use '../../../style' as cfg;
2
+
3
+ @include cfg.export-module('co-segment-inpaint-layout') {
4
+ .co-segment-inpaint {
5
+ .segment-inpaint-container {
6
+ width: var(--co-inphoto-segment-inpaint-full-size);
7
+ height: var(--co-inphoto-segment-inpaint-full-size);
8
+ padding: var(--co-inphoto-segment-inpaint-zero);
9
+ margin: var(--co-inphoto-segment-inpaint-zero);
10
+ position: var(--co-inphoto-segment-inpaint-position-relative);
11
+
12
+
13
+ .inpaint-container {
14
+ display: flex;
15
+
16
+ .inpaint-canvas-container {
17
+ width: var(--co-inphoto-left-container-width);
18
+ }
19
+
20
+ .inpaint-info {
21
+ width: var(--co-inphoto-right-container-width);
22
+
23
+ .inpaint-info-dialog-tile-group {
24
+ display: flex;
25
+ gap: var(--co-inphoto-segment-inpaint-tile-group-gap);
26
+
27
+ .co-step-tile {
28
+ flex: 1;
29
+
30
+ .button-container {
31
+ display: block;
32
+
33
+ .image-container {
34
+ --co-inphoto-step-tile-image-size: var(--co-inphoto-segment-inpaint-tile-image-size);
35
+ }
36
+ .button-container-text-container {
37
+ --co-inphoto-step-tile-button-container-padding: var(--co-inphoto-segment-inpaint-tile-container-padding);
38
+ }
39
+ }
40
+
41
+ &.tile-disabled {
42
+ pointer-events: none;
43
+ cursor: not-allowed;
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }
49
+ }
50
+ }
51
+ }
@@ -1,11 +1,11 @@
1
- .co-segment-inpaint {
2
- --co-inphoto-segment-inpaint-font-size-text: var(--co-inphoto-font-size-text);
3
- --co-inphoto-segment-inpaint-font-family: var(--co-inphoto-font-family);
4
- --co-inphoto-segment-inpaint-full-size: 100%;
5
- --co-inphoto-segment-inpaint-zero: 0;
6
- --co-inphoto-segment-inpaint-position-relative: relative;
7
- --co-inphoto-segment-inpaint-tile-group-gap: 10px;
8
- --co-inphoto-segment-inpaint-tile-image-size: 100%;
9
- --co-inphoto-segment-inpaint-tile-container-padding: 5px;
10
- --co-inphoto-segment-inpaint-tile-active-border: 1px solid var(--co-inphoto-accent-color);
11
- }
1
+ .co-segment-inpaint {
2
+ --co-inphoto-segment-inpaint-font-size-text: var(--co-inphoto-font-size-text);
3
+ --co-inphoto-segment-inpaint-font-family: var(--co-inphoto-font-family);
4
+ --co-inphoto-segment-inpaint-full-size: 100%;
5
+ --co-inphoto-segment-inpaint-zero: 0;
6
+ --co-inphoto-segment-inpaint-position-relative: relative;
7
+ --co-inphoto-segment-inpaint-tile-group-gap: 10px;
8
+ --co-inphoto-segment-inpaint-tile-image-size: 100%;
9
+ --co-inphoto-segment-inpaint-tile-container-padding: 5px;
10
+ --co-inphoto-segment-inpaint-tile-active-border: 1px solid var(--co-inphoto-accent-color);
11
+ }
@@ -1,29 +1,29 @@
1
- @use '../../../style' as cfg;
2
-
3
- @include cfg.export-module('co-segment-inpaint-theme') {
4
- .co-segment-inpaint {
5
- font-family: var(--co-inphoto-segment-inpaint-font-family);
6
- font-size: var(--co-inphoto-segment-inpaint-font-size-text);
7
-
8
- .inpaint-container {
9
- .inpaint-info {
10
- .inpaint-info-dialog-tile-group {
11
- .co-step-tile {
12
- &.tile-active {
13
- border: var(--co-inphoto-segment-inpaint-tile-active-border);
14
- }
15
- }
16
- }
17
- }
18
-
19
- .inpaint-info-dialog-container {
20
- .header-icon {
21
- background: var(--co-inphoto-prepare-icon-background);
22
- color: var(--co-inphoto-accent-color);
23
- @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-color));
24
- }
25
-
26
- }
27
- }
28
- }
29
- }
1
+ @use '../../../style' as cfg;
2
+
3
+ @include cfg.export-module('co-segment-inpaint-theme') {
4
+ .co-segment-inpaint {
5
+ font-family: var(--co-inphoto-segment-inpaint-font-family);
6
+ font-size: var(--co-inphoto-segment-inpaint-font-size-text);
7
+
8
+ .inpaint-container {
9
+ .inpaint-info {
10
+ .inpaint-info-dialog-tile-group {
11
+ .co-step-tile {
12
+ &.tile-active {
13
+ border: var(--co-inphoto-segment-inpaint-tile-active-border);
14
+ }
15
+ }
16
+ }
17
+ }
18
+
19
+ .inpaint-info-dialog-container {
20
+ .header-icon {
21
+ background: var(--co-inphoto-prepare-icon-background);
22
+ color: var(--co-inphoto-accent-color);
23
+ @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-color));
24
+ }
25
+
26
+ }
27
+ }
28
+ }
29
+ }
@@ -1,26 +1,26 @@
1
- @use '../../../style' as cfg;
2
-
3
- @include cfg.export-module('co-side-bar-menu-layout') {
4
- .co-side-bar-menu {
5
- .side-bar-menu {
6
- z-index: var(--co-inphoto-side-bar-menu-z-index);
7
- width: var(--co-inphoto-side-bar-menu-item-size);
8
- height: var(--co-inphoto-side-bar-menu-height);
9
-
10
- .side-bar-menu-item {
11
- width: var(--co-inphoto-side-bar-menu-item-size);
12
- min-height: var(--co-inphoto-side-bar-menu-item-size);
13
- display: flex;
14
- flex-direction: column;
15
- align-items: center;
16
- justify-content: center;
17
- cursor: pointer;
18
- position: relative;
19
-
20
- .side-bar-menu-text {
21
- text-align: center;
22
- }
23
- }
24
- }
25
- }
26
- }
1
+ @use '../../../style' as cfg;
2
+
3
+ @include cfg.export-module('co-side-bar-menu-layout') {
4
+ .co-side-bar-menu {
5
+ .side-bar-menu {
6
+ z-index: var(--co-inphoto-side-bar-menu-z-index);
7
+ width: var(--co-inphoto-side-bar-menu-item-size);
8
+ height: var(--co-inphoto-side-bar-menu-height);
9
+
10
+ .side-bar-menu-item {
11
+ width: var(--co-inphoto-side-bar-menu-item-size);
12
+ min-height: var(--co-inphoto-side-bar-menu-item-size);
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ justify-content: center;
17
+ cursor: pointer;
18
+ position: relative;
19
+
20
+ .side-bar-menu-text {
21
+ text-align: center;
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
@@ -1,12 +1,12 @@
1
- .co-side-bar-menu {
2
- --co-inphoto-side-bar-menu-font-size-text: var(--co-inphoto-font-size-text);
3
- --co-inphoto-side-bar-menu-font-family: var(--co-inphoto-font-family);
4
- --co-inphoto-side-bar-menu-z-index: 5;
5
- --co-inphoto-side-bar-menu-item-size: 85px;
6
- --co-inphoto-side-bar-menu-height: 100vh;
7
- --co-inphoto-side-bar-menu-icon-size: 25px;
8
- --co-inphoto-side-bar-menu-icon-color: #333;
9
- --co-inphoto-side-bar-menu-icon-color-active: #da9803;
10
- --co-inphoto-side-bar-menu-icon-color-disabled: #eee;
11
- --co-inphoto-side-bar-menu-text-font-size: 13px;
12
- }
1
+ .co-side-bar-menu {
2
+ --co-inphoto-side-bar-menu-font-size-text: var(--co-inphoto-font-size-text);
3
+ --co-inphoto-side-bar-menu-font-family: var(--co-inphoto-font-family);
4
+ --co-inphoto-side-bar-menu-z-index: 5;
5
+ --co-inphoto-side-bar-menu-item-size: 85px;
6
+ --co-inphoto-side-bar-menu-height: 100vh;
7
+ --co-inphoto-side-bar-menu-icon-size: 25px;
8
+ --co-inphoto-side-bar-menu-icon-color: #333;
9
+ --co-inphoto-side-bar-menu-icon-color-active: #da9803;
10
+ --co-inphoto-side-bar-menu-icon-color-disabled: #eee;
11
+ --co-inphoto-side-bar-menu-text-font-size: 13px;
12
+ }
@@ -1,32 +1,32 @@
1
- @use '../../../style' as cfg;
2
-
3
- @include cfg.export-module('co-side-bar-menu-theme') {
4
- .co-side-bar-menu {
5
- font-family: var(--co-inphoto-side-bar-menu-font-family);
6
- font-size: var(--co-inphoto-side-bar-menu-font-size-text);
7
-
8
- .side-bar-menu {
9
- background-color: var(--co-inphoto-background-white);
10
-
11
- .side-bar-menu-item {
12
- @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color));
13
-
14
- .side-bar-menu-text {
15
- font-size: var(--co-inphoto-side-bar-menu-text-font-size);
16
- }
17
-
18
- &:hover {
19
- @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
20
- }
21
- }
22
-
23
- .side-bar-menu-item-active {
24
- @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
25
- }
26
-
27
- .side-bar-menu-item-disabled {
28
- @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-disabled));
29
- }
30
- }
31
- }
32
- }
1
+ @use '../../../style' as cfg;
2
+
3
+ @include cfg.export-module('co-side-bar-menu-theme') {
4
+ .co-side-bar-menu {
5
+ font-family: var(--co-inphoto-side-bar-menu-font-family);
6
+ font-size: var(--co-inphoto-side-bar-menu-font-size-text);
7
+
8
+ .side-bar-menu {
9
+ background-color: var(--co-inphoto-background-white);
10
+
11
+ .side-bar-menu-item {
12
+ @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color));
13
+
14
+ .side-bar-menu-text {
15
+ font-size: var(--co-inphoto-side-bar-menu-text-font-size);
16
+ }
17
+
18
+ &:hover {
19
+ @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
20
+ }
21
+ }
22
+
23
+ .side-bar-menu-item-active {
24
+ @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-active));
25
+ }
26
+
27
+ .side-bar-menu-item-disabled {
28
+ @include cfg.default-icon(var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-size), var(--co-inphoto-side-bar-menu-icon-color-disabled));
29
+ }
30
+ }
31
+ }
32
+ }
@@ -1,45 +1,45 @@
1
- @use '../../../style' as cfg;
2
-
3
- @include cfg.export-module('co-side-panel-layout') {
4
- .co-side-panel {
5
- .side-panel-container {
6
- width: var(--co-inphoto-side-panel-container-width);
7
- height: var(--co-inphoto-side-panel-container-height);
8
- position: var(--co-inphoto-side-panel-position-relative);
9
- display: flex;
10
- flex-direction: column;
11
-
12
- .side-panel-scroll-container {
13
- flex: 1 1 auto;
14
- min-height: 0;
15
- overflow-y: auto;
16
- scroll-behavior: smooth;
17
- scrollbar-width: none;
18
- -ms-overflow-style: none;
19
- padding-bottom: var(--co-inphoto-side-panel-scroll-padding-bottom);
20
-
21
- &::-webkit-scrollbar {
22
- display: none;
23
- }
24
-
25
- .side-panel-body {
26
- display: flex;
27
- flex-direction: column;
28
- gap: var(--co-inphoto-side-panel-body-gap);
29
- }
30
-
31
- .side-panel-button-container {
32
-
33
- .co-button {
34
- display: flex;
35
- cursor: pointer;
36
-
37
- .label {
38
- margin-left: var(--co-inphoto-side-panel-label-margin-left);
39
- }
40
- }
41
- }
42
- }
43
- }
44
- }
45
- }
1
+ @use '../../../style' as cfg;
2
+
3
+ @include cfg.export-module('co-side-panel-layout') {
4
+ .co-side-panel {
5
+ .side-panel-container {
6
+ width: var(--co-inphoto-side-panel-container-width);
7
+ height: var(--co-inphoto-side-panel-container-height);
8
+ position: var(--co-inphoto-side-panel-position-relative);
9
+ display: flex;
10
+ flex-direction: column;
11
+
12
+ .side-panel-scroll-container {
13
+ flex: 1 1 auto;
14
+ min-height: 0;
15
+ overflow-y: auto;
16
+ scroll-behavior: smooth;
17
+ scrollbar-width: none;
18
+ -ms-overflow-style: none;
19
+ padding-bottom: var(--co-inphoto-side-panel-scroll-padding-bottom);
20
+
21
+ &::-webkit-scrollbar {
22
+ display: none;
23
+ }
24
+
25
+ .side-panel-body {
26
+ display: flex;
27
+ flex-direction: column;
28
+ gap: var(--co-inphoto-side-panel-body-gap);
29
+ }
30
+
31
+ .side-panel-button-container {
32
+
33
+ .co-button {
34
+ display: flex;
35
+ cursor: pointer;
36
+
37
+ .label {
38
+ margin-left: var(--co-inphoto-side-panel-label-margin-left);
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
@@ -1,16 +1,16 @@
1
- .co-side-panel {
2
- --co-inphoto-side-panel-font-size-text: var(--co-inphoto-font-size-text);
3
- --co-inphoto-side-panel-font-family: var(--co-inphoto-font-family);
4
- --co-inphoto-side-panel-padding: 35px 25px;
5
- --co-inphoto-side-panel-border-color-button-container: #eee;
6
- --co-inphoto-side-panel-padding-button-container: 20px 0 0;
7
- --co-inphoto-side-panel-margin-button-container: 20px 0 0;
8
- --co-inphoto-side-panel-container-width: 100%;
9
- --co-inphoto-side-panel-container-height: 100vh;
10
- --co-inphoto-side-panel-position-relative: relative;
11
- --co-inphoto-side-panel-scroll-padding-bottom: 35px;
12
- --co-inphoto-side-panel-body-gap: 20px;
13
- --co-inphoto-side-panel-button-border-top: 1px solid var(--co-inphoto-side-panel-border-color-button-container);
14
- --co-inphoto-side-panel-label-margin-left: 15px;
15
- --co-inphoto-side-panel-label-font-weight: bold;
16
- }
1
+ .co-side-panel {
2
+ --co-inphoto-side-panel-font-size-text: var(--co-inphoto-font-size-text);
3
+ --co-inphoto-side-panel-font-family: var(--co-inphoto-font-family);
4
+ --co-inphoto-side-panel-padding: 35px 25px;
5
+ --co-inphoto-side-panel-border-color-button-container: #eee;
6
+ --co-inphoto-side-panel-padding-button-container: 20px 0 0;
7
+ --co-inphoto-side-panel-margin-button-container: 20px 0 0;
8
+ --co-inphoto-side-panel-container-width: 100%;
9
+ --co-inphoto-side-panel-container-height: 100vh;
10
+ --co-inphoto-side-panel-position-relative: relative;
11
+ --co-inphoto-side-panel-scroll-padding-bottom: 35px;
12
+ --co-inphoto-side-panel-body-gap: 20px;
13
+ --co-inphoto-side-panel-button-border-top: 1px solid var(--co-inphoto-side-panel-border-color-button-container);
14
+ --co-inphoto-side-panel-label-margin-left: 15px;
15
+ --co-inphoto-side-panel-label-font-weight: bold;
16
+ }
@@ -1,39 +1,39 @@
1
- @use '../../../style' as cfg;
2
-
3
- @include cfg.export-module('co-side-panel-theme') {
4
- .co-side-panel {
5
- font-family: var(--co-inphoto-side-panel-font-family);
6
- font-size: var(--co-inphoto-side-panel-font-size-text);
7
-
8
- .side-panel-container {
9
- background: var(--co-inphoto-dialog-background-color);
10
- padding: var(--co-inphoto-side-panel-padding);
11
-
12
- .side-panel-scroll-container {
13
- .side-panel-button-container {
14
- padding: var(--co-inphoto-side-panel-padding-button-container);
15
- margin: var(--co-inphoto-side-panel-margin-button-container);
16
- border-top: var(--co-inphoto-side-panel-button-border-top);
17
-
18
- .co-button {
19
- @include cfg.action-button(
20
- var(--co-inphoto-button-background),
21
- var(--co-inphoto-button-background),
22
- var(--co-inphoto-button-color),
23
- var(--co-inphoto-button-font-size),
24
- var(--co-inphoto-button-icon-size),
25
- var(--co-inphoto-button-icon-color),
26
- var(--co-inphoto-button-border),
27
- var(--co-inphoto-button-radius),
28
- var(--co-inphoto-button-padding)
29
- );
30
-
31
- .label {
32
- font-weight: var(--co-inphoto-side-panel-label-font-weight);
33
- }
34
- }
35
- }
36
- }
37
- }
38
- }
39
- }
1
+ @use '../../../style' as cfg;
2
+
3
+ @include cfg.export-module('co-side-panel-theme') {
4
+ .co-side-panel {
5
+ font-family: var(--co-inphoto-side-panel-font-family);
6
+ font-size: var(--co-inphoto-side-panel-font-size-text);
7
+
8
+ .side-panel-container {
9
+ background: var(--co-inphoto-dialog-background-color);
10
+ padding: var(--co-inphoto-side-panel-padding);
11
+
12
+ .side-panel-scroll-container {
13
+ .side-panel-button-container {
14
+ padding: var(--co-inphoto-side-panel-padding-button-container);
15
+ margin: var(--co-inphoto-side-panel-margin-button-container);
16
+ border-top: var(--co-inphoto-side-panel-button-border-top);
17
+
18
+ .co-button {
19
+ @include cfg.action-button(
20
+ var(--co-inphoto-button-background),
21
+ var(--co-inphoto-button-background),
22
+ var(--co-inphoto-button-color),
23
+ var(--co-inphoto-button-font-size),
24
+ var(--co-inphoto-button-icon-size),
25
+ var(--co-inphoto-button-icon-color),
26
+ var(--co-inphoto-button-border),
27
+ var(--co-inphoto-button-radius),
28
+ var(--co-inphoto-button-padding)
29
+ );
30
+
31
+ .label {
32
+ font-weight: var(--co-inphoto-side-panel-label-font-weight);
33
+ }
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
39
+ }