@colijnit/inphoto 300.1.4 → 300.1.6

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 (62) hide show
  1. package/fesm2022/colijnit-inphoto.mjs +733 -888
  2. package/fesm2022/colijnit-inphoto.mjs.map +1 -1
  3. package/index.d.ts +155 -196
  4. package/lib/component/ai-prompt/style/_layout.scss +0 -3
  5. package/lib/component/ai-prompt/style/_material-definition.scss +1 -0
  6. package/lib/component/ai-prompt/style/_theme.scss +1 -2
  7. package/lib/component/canvas-tool-bar/style/_layout.scss +24 -93
  8. package/lib/component/canvas-tool-bar/style/_material-definition.scss +7 -0
  9. package/lib/component/canvas-tool-bar/style/_theme.scss +95 -0
  10. package/lib/component/catalog/style/_layout.scss +0 -2
  11. package/lib/component/configuration-side-bar-menu/style/_layout.scss +5 -43
  12. package/lib/component/configuration-side-bar-menu/style/_material-definition.scss +4 -1
  13. package/lib/component/configuration-side-bar-menu/style/_theme.scss +45 -0
  14. package/lib/component/edit-canvas/style/_layout.scss +5 -38
  15. package/lib/component/edit-canvas/style/_theme.scss +35 -1
  16. package/lib/component/header/style/_layout.scss +4 -7
  17. package/lib/component/header/style/_material-definition.scss +4 -1
  18. package/lib/component/header/style/_theme.scss +2 -2
  19. package/lib/component/image-enhancer/style/_layout.scss +27 -23
  20. package/lib/component/image-enhancer/style/_material-definition.scss +4 -5
  21. package/lib/component/image-enhancer/style/_theme.scss +26 -42
  22. package/lib/component/image-enhancer-style/style/_material-definition.scss +1 -1
  23. package/lib/component/image-enhancer-style/style/_theme.scss +41 -3
  24. package/lib/component/image-enhancer-upload/style/_layout.scss +0 -6
  25. package/lib/component/image-enhancer-upload/style/_theme.scss +44 -1
  26. package/lib/component/image-history/style/_layout.scss +2 -4
  27. package/lib/component/image-history/style/_material-definition.scss +3 -1
  28. package/lib/component/image-history/style/_theme.scss +1 -1
  29. package/lib/component/image-history-tile/style/_layout.scss +1 -1
  30. package/lib/component/image-history-tile/style/_theme.scss +5 -1
  31. package/lib/component/image-process-complete/style/_layout.scss +6 -37
  32. package/lib/component/image-process-complete/style/_theme.scss +0 -27
  33. package/lib/component/image-tile/style/_layout.scss +0 -2
  34. package/lib/component/image-upload/style/_layout.scss +0 -1
  35. package/lib/component/prepare-starting-image/style/_layout.scss +5 -37
  36. package/lib/component/prepare-starting-image/style/_theme.scss +0 -35
  37. package/lib/component/process-loader/style/_layout.scss +0 -1
  38. package/lib/component/scene-context-menu/style/_layout.scss +0 -2
  39. package/lib/component/segment-inpaint/style/_layout.scss +2 -19
  40. package/lib/component/segment-inpaint/style/_theme.scss +0 -25
  41. package/lib/component/side-panel/style/_layout.scss +40 -0
  42. package/lib/component/side-panel/style/_material-definition.scss +6 -0
  43. package/lib/component/side-panel/style/_theme.scss +44 -0
  44. package/lib/component/step-tile/style/_layout.scss +2 -6
  45. package/lib/component/step-tile/style/_material-definition.scss +4 -0
  46. package/lib/component/step-tile/style/_theme.scss +3 -20
  47. package/lib/component/threedscene/style/_layout.scss +12 -2
  48. package/lib/component/upload-starting-image/style/_layout.scss +0 -2
  49. package/lib/style/_variables.scss +9 -0
  50. package/package.json +1 -1
  51. package/lib/component/back-next-buttons/style/_layout.scss +0 -15
  52. package/lib/component/back-next-buttons/style/_material-definition.scss +0 -3
  53. package/lib/component/back-next-buttons/style/_theme.scss +0 -53
  54. package/lib/component/ready-to-add-articles/style/_layout.scss +0 -70
  55. package/lib/component/ready-to-add-articles/style/_material-definition.scss +0 -3
  56. package/lib/component/ready-to-add-articles/style/_theme.scss +0 -95
  57. package/lib/component/ready-to-add-articles/style/material.scss +0 -3
  58. package/lib/component/threed-to-ai/style/_layout.scss +0 -19
  59. package/lib/component/threed-to-ai/style/_material-definition.scss +0 -3
  60. package/lib/component/threed-to-ai/style/_theme.scss +0 -30
  61. package/lib/component/threed-to-ai/style/material.scss +0 -3
  62. /package/lib/component/{back-next-buttons → side-panel}/style/material.scss +0 -0
package/lib/component/canvas-tool-bar/style/_layout.scss CHANGED
@@ -5,81 +5,45 @@
5
5
  .canvas-toolbar {
6
6
  display: flex;
7
7
  align-items: center;
8
- background: var(--co-inphoto-background-white);
9
8
  position: absolute;
10
- top: 50px;
11
- left: 25%;
12
- z-index: 25;
9
+ top: var(--co-inphoto-toolbar-position-top);
10
+ left: var(--co-inphoto-toolbar-position-left);
11
+ z-index: var(--co-inphoto-toolbar-z-index);
13
12
  border-radius: var(--co-inphoto-border-radius);
14
- box-sizing: border-box;
15
- padding: 10px;
16
13
  justify-content: space-around;
17
14
 
18
- .drag-indicator-icon {
19
- cursor: grab;
20
- box-sizing: border-box;
21
- padding: 8px;
22
- background: var(--co-inphoto-dialog-background-color);
23
- border-radius: var(--co-inphoto-border-radius);
24
-
25
- &:active {
26
- cursor: grabbing;
27
- }
28
-
29
- @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-accent-text));
30
- }
31
-
32
15
  .modus-indicator, .tool-selection, .actions {
33
16
  display: flex;
34
17
  align-items: center;
35
18
  margin: 0 5px;
36
- }
37
-
19
+ position: relative;
38
20
 
39
- .modus-indicator {
40
- .modus-indicator-text {
41
- @include cfg.sub-header-text();
42
- }
43
- }
21
+ .brush-size-container {
22
+ position: absolute;
23
+ top: 50px;
44
24
 
45
- .spacer {
46
- color: var(--co-inphoto-toolbar-spacer-color);
47
- font-size: 30px;
48
- font-weight: lighter;
49
- margin: 0 5px;
50
- }
25
+ .brush-preview {
26
+ display: flex;
27
+ align-items: center;
28
+ height: 60px;
29
+ overflow: hidden;
30
+ }
51
31
 
52
- .tool-selection {
53
- .brush-button, .eraser-button, .drag-button {
54
- background-color: var(--co-inphoto-button-background);
55
- color: var(--co-inphoto-button-color);
56
- font-size: var(--co-inphoto-button-font-size);
57
- border: var(--co-inphoto-button-border);
58
- cursor: pointer;
59
- padding: 0;
60
- border-radius: var(--co-inphoto-button-radius);
61
- margin: 0 4px;
62
- height: 35px;
63
- width: 35px;
32
+ .brush-preview-line {
33
+ width: 100%;
34
+ border-radius: 999px;
35
+ }
64
36
 
65
- .co-icon {
66
- height: var(--co-inphoto-button-small-icon-size);
67
- width: var(--co-inphoto-button-small-icon-size);
37
+ .brush-size {
38
+ display: flex;
39
+ justify-content: space-between;
68
40
 
69
- svg, path {
70
- fill: var(--co-inphoto-button-icon-color);
41
+ .brush-size-value {
42
+ width: 40px;
71
43
  }
72
- }
73
- }
74
-
75
- .selected {
76
- color: var(--co-inphoto-active-button-color);
77
- background: var(--co-inphoto-active-button-background);
78
- border: 1px solid var(--co-inphoto-active-button-background);
79
44
 
80
- .co-icon {
81
- svg, path {
82
- fill: var(--co-inphoto-active-button-color);
45
+ .brush-size-slider {
46
+ width: 150px;
83
47
  }
84
48
  }
85
49
  }
@@ -94,39 +58,6 @@
94
58
  align-content: center;
95
59
  align-items: center;
96
60
  cursor: pointer;
97
- box-sizing: border-box;
98
- }
99
-
100
- .cancel-button {
101
- background-color: transparent;
102
- color: var(--co-inphoto-button-color);
103
- font-size: var(--co-inphoto-button-font-size);
104
- padding: var(--co-inphoto-button-padding);
105
- font-weight: 500;
106
- @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
107
-
108
- .label {
109
- margin-right: 10px;
110
- }
111
-
112
- }
113
-
114
- .action-button {
115
-
116
- @include cfg.action-button(
117
- var(--co-inphoto-action-button-background),
118
- var(--co-inphoto-action-button-background),
119
- var(--co-inphoto-action-button-color),
120
- var(--co-inphoto-action-button-font-size),
121
- var(--co-inphoto-button-small-icon-size),
122
- var(--co-inphoto-action-button-icon-color),
123
- var(--co-inphoto-action-button-border),
124
- var(--co-inphoto-action-button-radius),
125
- var(--co-inphoto-action-button-padding));
126
-
127
- .label {
128
- margin-left: 10px;
129
- }
130
61
  }
131
62
  }
132
63
  }
package/lib/component/canvas-tool-bar/style/_material-definition.scss CHANGED
@@ -1,4 +1,11 @@
1
1
  :root {
2
2
  --co-inphoto-toolbar-info-icon-size: 28px;
3
3
  --co-inphoto-toolbar-spacer-color: #D9D9DF;
4
+
5
+ --co-inphoto-toolbar-position-top: 50px;
6
+ --co-inphoto-toolbar-position-left: 25%;
7
+ --co-inphoto-toolbar-z-index: 25;
8
+ --co-inphoto-toolbar-padding: 10px;
9
+
10
+ --co-inphoto-brush-size-preview-color: #FF0000;
4
11
  }
package/lib/component/canvas-tool-bar/style/_theme.scss CHANGED
@@ -2,8 +2,103 @@
2
2
 
3
3
  @include cfg.export-module('co-canvas-tool-bar-theme') {
4
4
  .co-canvas-tool-bar {
5
+ .canvas-toolbar {
6
+ background: var(--co-inphoto-background-white);
7
+ padding: var(--co-inphoto-toolbar-padding);
5
8
 
9
+ .drag-indicator-icon {
10
+ padding: 8px;
11
+ background: var(--co-inphoto-dialog-background-color);
12
+ border-radius: var(--co-inphoto-border-radius);
13
+ cursor: grab;
6
14
 
15
+ &:active {
16
+ cursor: grabbing;
17
+ }
18
+
19
+ @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-accent-text));
20
+ }
21
+
22
+ .modus-indicator {
23
+ .modus-indicator-text {
24
+ @include cfg.sub-header-text();
25
+ }
26
+ }
27
+
28
+ .spacer {
29
+ color: var(--co-inphoto-toolbar-spacer-color);
30
+ font-size: 30px;
31
+ font-weight: lighter;
32
+ margin: 0 5px;
33
+ }
34
+
35
+ .tool-selection {
36
+ .brush-button, .eraser-button, .drag-button {
37
+ background-color: var(--co-inphoto-button-background);
38
+ color: var(--co-inphoto-button-color);
39
+ font-size: var(--co-inphoto-button-font-size);
40
+ border: var(--co-inphoto-button-border);
41
+ cursor: pointer;
42
+ padding: 0;
43
+ border-radius: var(--co-inphoto-button-radius);
44
+ margin: 0 4px;
45
+ height: 35px;
46
+ width: 35px;
47
+ @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
48
+ }
49
+
50
+ .brush-size-container {
51
+ background: var(--co-inphoto-background-white);
52
+ padding: var(--co-inphoto-toolbar-padding);
53
+ border-radius: var(--co-inphoto-border-radius);
54
+
55
+ .brush-preview-line {
56
+ background: var(--co-inphoto-brush-size-preview-color);
57
+ transition: height 0.05s linear;
58
+ }
59
+ }
60
+
61
+ .selected {
62
+ color: var(--co-inphoto-active-button-color);
63
+ background: var(--co-inphoto-active-button-background);
64
+ border: 1px solid var(--co-inphoto-active-button-background);
65
+
66
+ @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-active-button-color));
67
+ }
68
+ }
69
+
70
+ .actions {
71
+ .cancel-button {
72
+ background-color: transparent;
73
+ color: var(--co-inphoto-button-color);
74
+ font-size: var(--co-inphoto-button-font-size);
75
+ padding: var(--co-inphoto-button-padding);
76
+ font-weight: 500;
77
+ @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
78
+
79
+ .label {
80
+ margin-right: 10px;
81
+ }
82
+ }
83
+
84
+ .action-button {
85
+ @include cfg.action-button(
86
+ var(--co-inphoto-action-button-background),
87
+ var(--co-inphoto-action-button-background),
88
+ var(--co-inphoto-action-button-color),
89
+ var(--co-inphoto-action-button-font-size),
90
+ var(--co-inphoto-button-small-icon-size),
91
+ var(--co-inphoto-action-button-icon-color),
92
+ var(--co-inphoto-action-button-border),
93
+ var(--co-inphoto-action-button-radius),
94
+ var(--co-inphoto-action-button-padding));
95
+
96
+ .label {
97
+ margin-left: 10px;
98
+ }
99
+ }
100
+ }
101
+ }
7
102
  }
8
103
  }
9
104
 
package/lib/component/catalog/style/_layout.scss CHANGED
@@ -13,7 +13,6 @@
13
13
  overflow-x: hidden;
14
14
 
15
15
  .catalog-container {
16
- box-sizing: border-box;
17
16
 
18
17
  .catalog-dialog-wrapper {
19
18
  display: flex;
@@ -32,7 +31,6 @@
32
31
  }
33
32
 
34
33
  .catalog-body {
35
- box-sizing: border-box;
36
34
  max-height: 100%;
37
35
 
38
36
  .catalog-tile-wrapper {
package/lib/component/configuration-side-bar-menu/style/_layout.scss CHANGED
@@ -1,33 +1,22 @@
1
1
  @use '../../../style' as cfg;
2
2
 
3
3
  @include cfg.export-module('co-configuration-side-bar-menu-layout') {
4
- co-configuration-side-bar-menu {
4
+ .co-configuration-side-bar-menu {
5
5
  .configuration-side-bar-menu {
6
6
  position: absolute;
7
- top: 10px;
8
- right: 10px;
9
- width: 30%;
10
- background: var(--co-inphoto-dialog-background-color);
11
- border-radius: var(--co-inphoto-border-radius);
12
- box-sizing: border-box;
13
- padding: 15px 25px;
7
+ top: var(--co-inphoto-side-bar-menu-position-top);
8
+ right: var(--co-inphoto-side-bar-menu-position-right);
9
+ width: var(--co-inphoto-side-bar-menu-width);
14
10
 
15
11
  .configuration-side-bar-header {
16
12
  display: flex;
17
13
  justify-content: space-between;
18
14
  align-items: center;
19
- .header {
20
- font-size: var(--co-inphoto-font-size-text);
21
- font-weight: 600;
22
- }
23
-
24
- .header-close {
25
- cursor: pointer;
26
- }
27
15
  }
28
16
 
29
17
  .slider-container {
30
18
  width: 100%;
19
+
31
20
  input {
32
21
  width: 100%;
33
22
  }
@@ -38,33 +27,6 @@
38
27
  gap: 10px;
39
28
  justify-content: space-between;
40
29
  align-items: center;
41
-
42
- .button-configure {
43
- @include cfg.action-button(
44
- var(--co-inphoto-action-button-background),
45
- var(--co-inphoto-action-button-background),
46
- var(--co-inphoto-action-button-color),
47
- var(--co-inphoto-action-button-font-size),
48
- var(--co-inphoto-action-button-icon-size),
49
- var(--co-inphoto-action-button-icon-color),
50
- var(--co-inphoto-action-button-border),
51
- var(--co-inphoto-action-button-radius),
52
- var(--co-inphoto-action-button-padding)
53
- )
54
- }
55
- .button-remove {
56
- @include cfg.action-button(
57
- var(--co-inphoto-action-button-background),
58
- var(--co-inphoto-action-button-background),
59
- var(--co-inphoto-action-button-color),
60
- var(--co-inphoto-action-button-font-size),
61
- var(--co-inphoto-action-button-icon-size),
62
- var(--co-inphoto-action-button-icon-color),
63
- var(--co-inphoto-action-button-border),
64
- var(--co-inphoto-action-button-radius),
65
- var(--co-inphoto-action-button-padding)
66
- )
67
- }
68
30
  }
69
31
  }
70
32
  }
package/lib/component/configuration-side-bar-menu/style/_material-definition.scss CHANGED
@@ -1,3 +1,6 @@
1
1
  :root {
2
-
2
+ --co-inphoto-side-bar-menu-position-top: 10px;
3
+ --co-inphoto-side-bar-menu-position-right: 10px;
4
+ --co-inphoto-side-bar-menu-width: 30%;
5
+ --co-inphoto-side-bar-menu-padding: 15px 25px;
3
6
  }
package/lib/component/configuration-side-bar-menu/style/_theme.scss CHANGED
@@ -2,7 +2,52 @@
2
2
 
3
3
  @include cfg.export-module('co-configuration-side-bar-menu-theme') {
4
4
  .co-configuration-side-bar-menu {
5
+ .configuration-side-bar-menu {
6
+ background: var(--co-inphoto-dialog-background-color);
7
+ border-radius: var(--co-inphoto-border-radius);
8
+ padding: var(--co-inphoto-side-bar-menu-padding);
5
9
 
10
+ .configuration-side-bar-header {
11
+ .header {
12
+ @include cfg.header-text();
13
+ }
14
+
15
+ .header-close {
16
+ cursor: pointer;
17
+ }
18
+ }
19
+
20
+ .buttons {
21
+
22
+ .button-configure {
23
+ @include cfg.action-button(
24
+ var(--co-inphoto-action-button-background),
25
+ var(--co-inphoto-action-button-background),
26
+ var(--co-inphoto-action-button-color),
27
+ var(--co-inphoto-action-button-font-size),
28
+ var(--co-inphoto-action-button-icon-size),
29
+ var(--co-inphoto-action-button-icon-color),
30
+ var(--co-inphoto-action-button-border),
31
+ var(--co-inphoto-action-button-radius),
32
+ var(--co-inphoto-action-button-padding)
33
+ )
34
+ }
35
+
36
+ .button-remove {
37
+ @include cfg.action-button(
38
+ var(--co-inphoto-action-button-background),
39
+ var(--co-inphoto-action-button-background),
40
+ var(--co-inphoto-action-button-color),
41
+ var(--co-inphoto-action-button-font-size),
42
+ var(--co-inphoto-action-button-icon-size),
43
+ var(--co-inphoto-action-button-icon-color),
44
+ var(--co-inphoto-action-button-border),
45
+ var(--co-inphoto-action-button-radius),
46
+ var(--co-inphoto-action-button-padding)
47
+ )
48
+ }
49
+ }
50
+ }
6
51
  }
7
52
  }
8
53
 
package/lib/component/edit-canvas/style/_layout.scss CHANGED
@@ -4,22 +4,22 @@
4
4
  .co-edit-canvas {
5
5
  .edit-canvas-container {
6
6
  position: relative;
7
- width: 70vw;
7
+ width: var(--co-inphoto-left-container-width);
8
8
  height: 100vh;
9
9
 
10
10
  .canvas-container {
11
11
  position: relative;
12
- width: 70vw;
12
+ width: var(--co-inphoto-left-container-width);
13
13
  height: 100%;
14
14
  display: flex;
15
- align-items: center;
15
+ align-items: self-start;
16
16
  align-self: center;
17
- min-width: 70vw;
17
+ min-width: var(--co-inphoto-left-container-width);
18
18
  justify-content: space-around;
19
19
  min-height: 100vh;
20
20
 
21
21
  canvas {
22
- max-width: 70vw;
22
+ max-width: var(--co-inphoto-left-container-width);
23
23
  max-height: 100%;
24
24
  display: block;
25
25
  }
@@ -67,41 +67,8 @@
67
67
  display: none; // should be flex, but hide it for now
68
68
  justify-content: space-around;
69
69
  align-items: center;
70
- box-sizing: border-box;
71
- padding: 8px;
72
- border-radius: var(--co-inphoto-border-radius);
73
70
  bottom: 25px;
74
71
  left: 100px;
75
- background: var(--co-inphoto-dialog-background-color);
76
-
77
- .zoom-input-wrapper {
78
- .co-input-text {
79
- @include cfg.text();
80
-
81
- }
82
- .co-input-text:not(.no-style) {
83
- input {
84
- text-align: center;
85
- align-self: center;
86
- padding: 0;
87
- }
88
- }
89
- }
90
-
91
- .co-button {
92
- @include cfg.action-button(
93
- var(--co-inphoto-button-background),
94
- var(--co-inphoto-button-background),
95
- var(--co-inphoto-button-color),
96
- var(--co-inphoto-icon-size-small),
97
- var(--co-inphoto-button-icon-size),
98
- var(--co-inphoto-button-icon-color),
99
- var(--co-inphoto-button-border),
100
- var(--co-inphoto-button-radius),
101
- 0);
102
-
103
- height: 40px;
104
- }
105
72
  }
106
73
  }
107
74
  }
package/lib/component/edit-canvas/style/_theme.scss CHANGED
@@ -2,11 +2,45 @@
2
2
 
3
3
  @include cfg.export-module('co-edit-canvas-theme') {
4
4
  .co-edit-canvas {
5
-
6
5
  .canvas-container {
7
6
  background: var(--co-inphoto-background-white);
8
7
  }
9
8
 
9
+ // Zoom
10
+ .canvas-zoom-control {
11
+ padding: 8px;
12
+ border-radius: var(--co-inphoto-border-radius);
13
+ background: var(--co-inphoto-dialog-background-color);
14
+
15
+ .zoom-input-wrapper {
16
+ .co-input-text {
17
+ @include cfg.text();
18
+
19
+ }
20
+ .co-input-text:not(.no-style) {
21
+ input {
22
+ text-align: center;
23
+ align-self: center;
24
+ padding: 0;
25
+ }
26
+ }
27
+ }
28
+
29
+ .co-button {
30
+ @include cfg.action-button(
31
+ var(--co-inphoto-button-background),
32
+ var(--co-inphoto-button-background),
33
+ var(--co-inphoto-button-color),
34
+ var(--co-inphoto-icon-size-small),
35
+ var(--co-inphoto-button-icon-size),
36
+ var(--co-inphoto-button-icon-color),
37
+ var(--co-inphoto-button-border),
38
+ var(--co-inphoto-button-radius),
39
+ 0);
40
+
41
+ height: 40px;
42
+ }
43
+ }
10
44
  }
11
45
  }
12
46
 
package/lib/component/header/style/_layout.scss CHANGED
@@ -2,22 +2,19 @@
2
2
 
3
3
  @include cfg.export-module('co-header-layout') {
4
4
  .co-header {
5
-
6
5
  .header-container {
7
6
  display: flex;
8
7
  justify-content: space-between;
9
- box-sizing: border-box;
10
-
11
- padding: 45px 0 50px;
8
+ padding: var(--co-inphoto-header-padding);
12
9
 
13
10
  .header-icon {
14
- width: 50px;
15
- height: 50px;
11
+ width: var(--co-inphoto-header-icon-width);
12
+ height: var(--co-inphoto-header-icon-height);
16
13
  display: flex;
17
14
  justify-content: space-around;
18
15
  align-items: center;
19
16
  border-radius: 50%;
20
- margin-right: 15px;
17
+ margin-right: var(--co-inphoto-header-icon-margin-right);
21
18
  }
22
19
  }
23
20
  }
package/lib/component/header/style/_material-definition.scss CHANGED
@@ -1,3 +1,6 @@
1
1
  :root {
2
-
2
+ --co-inphoto-header-padding: 25px 0 30px;
3
+ --co-inphoto-header-icon-width: 50px;
4
+ --co-inphoto-header-icon-height: 50px;
5
+ --co-inphoto-header-icon-margin-right: 15px;
3
6
  }
package/lib/component/header/style/_theme.scss CHANGED
@@ -4,11 +4,11 @@
4
4
  .co-header {
5
5
  .header-container {
6
6
  .header-info {
7
- .header-text {
7
+ .head {
8
8
  @include cfg.header-text();
9
9
  }
10
10
 
11
- .explain-text {
11
+ .text {
12
12
  @include cfg.text();
13
13
  }
14
14
  }
package/lib/component/image-enhancer/style/_layout.scss CHANGED
@@ -2,33 +2,37 @@
2
2
 
3
3
  @include cfg.export-module('co-image-enhancer-layout') {
4
4
  .co-image-enhancer {
5
- .image-enhancer-container {
6
- .tabs {
7
- align-items: center;
8
- display: grid;
9
- grid-template-columns: repeat(2, 1fr);
10
- border-radius: 5px;
11
- height: 60px;
12
- align-content: end;
5
+ .enhancer-container {
6
+ width: var(--co-inphoto-right-container-width);
7
+ height: 100vh;
8
+ position: relative;
9
+ display: flex;
10
+ flex-direction: column;
11
+
13
12
 
14
- .tab-button {
15
- box-sizing: border-box;
16
- padding: 10px;
17
- cursor: pointer;
18
- height: 100%;
19
- text-align: center;
13
+ .enhancer-scroll-container {
14
+ flex: 1 1 auto;
15
+ min-height: 0;
16
+ overflow-y: auto;
17
+ scroll-behavior: smooth;
18
+ scrollbar-width: none;
19
+ -ms-overflow-style: none;
20
+ padding-bottom: 30px;
21
+ &::-webkit-scrollbar {
22
+ display: none;
20
23
  }
21
- }
22
- }
23
24
 
24
- .dialog-collapse {
25
- max-height: 55px;
26
- }
25
+ .enhancer-body {
27
26
 
28
- .image-enhancer-header {
29
- display: flex;
30
- justify-content: space-between;
31
- gap: 20px;
27
+ .tabs {
28
+ align-items: center;
29
+ display: grid;
30
+ grid-template-columns: repeat(2, 1fr);
31
+ height: var(--co-inphoto-image-enhancer-tab-height);
32
+ align-content: end;
33
+ }
34
+ }
35
+ }
32
36
  }
33
37
  }
34
38
  }
package/lib/component/image-enhancer/style/_material-definition.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  :root {
2
- --co-inphoto-tab-header-font-size: 12px;
3
- --co-inphoto-tab-background-color: #f0f0f0;
4
- --co-inphoto-tab-border-color: #f0f0f0;
5
- --co-inphoto-tab-active-background-color: #ffffff;
6
- --co-inphoto-tab-active-color: #3f51b5;
2
+ --co-inphoto-image-enhancer-tab-height: 60px;
3
+ --co-inphoto-image-enhancer-tab-button-padding: 10px;
4
+ --co-inphoto-image-enhancer-tab-button-border-width: 2px;
5
+
7
6
  }