@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.
- package/fesm2022/colijnit-inphoto.mjs +473 -332
- package/fesm2022/colijnit-inphoto.mjs.map +1 -1
- package/index.d.ts +49 -26
- package/lib/component/ai-prompt/style/_layout.scss +76 -76
- package/lib/component/ai-prompt/style/_material-definition.scss +38 -38
- package/lib/component/ai-prompt/style/_theme.scss +78 -78
- package/lib/component/canvas-tool-bar/style/_layout.scss +71 -63
- package/lib/component/canvas-tool-bar/style/_material-definition.scss +40 -37
- package/lib/component/canvas-tool-bar/style/_theme.scss +138 -108
- package/lib/component/catalog/style/_layout.scss +68 -68
- package/lib/component/catalog/style/_material-definition.scss +22 -22
- package/lib/component/catalog/style/_theme.scss +43 -43
- package/lib/component/configuration-side-bar-menu/style/_layout.scss +33 -33
- package/lib/component/configuration-side-bar-menu/style/_material-definition.scss +10 -10
- package/lib/component/edit-canvas/style/_layout.scss +74 -85
- package/lib/component/edit-canvas/style/_material-definition.scss +21 -25
- package/lib/component/edit-canvas/style/_theme.scss +26 -61
- package/lib/component/error-dialog/style/_layout.scss +36 -36
- package/lib/component/error-dialog/style/_material-definition.scss +12 -12
- package/lib/component/error-dialog/style/_theme.scss +17 -17
- package/lib/component/header/style/_layout.scss +20 -20
- package/lib/component/header/style/_material-definition.scss +8 -8
- package/lib/component/image-enhancer/style/_layout.scss +37 -37
- package/lib/component/image-enhancer/style/_material-definition.scss +13 -13
- package/lib/component/image-enhancer/style/_theme.scss +45 -45
- package/lib/component/image-enhancer-style/style/_layout.scss +65 -65
- package/lib/component/image-enhancer-style/style/_material-definition.scss +16 -16
- package/lib/component/image-enhancer-style/style/_theme.scss +120 -120
- package/lib/component/image-enhancer-upload/style/_layout.scss +48 -48
- package/lib/component/image-enhancer-upload/style/_material-definition.scss +14 -14
- package/lib/component/image-enhancer-upload/style/_theme.scss +66 -66
- package/lib/component/image-history/style/_layout.scss +57 -57
- package/lib/component/image-history/style/_material-definition.scss +20 -20
- package/lib/component/image-history/style/_theme.scss +25 -25
- package/lib/component/image-history-tile/style/_layout.scss +53 -53
- package/lib/component/image-history-tile/style/_material-definition.scss +15 -15
- package/lib/component/image-history-tile/style/_theme.scss +32 -32
- package/lib/component/image-overlay/style/_layout.scss +84 -84
- package/lib/component/image-overlay/style/_material-definition.scss +21 -21
- package/lib/component/image-overlay/style/_theme.scss +40 -40
- package/lib/component/image-overlay/style/material.scss +3 -3
- package/lib/component/image-process-complete/style/_layout.scss +42 -42
- package/lib/component/image-process-complete/style/_material-definition.scss +13 -13
- package/lib/component/image-process-complete/style/_theme.scss +24 -24
- package/lib/component/image-tile/components/color-palette-option/style/_layout.scss +15 -15
- package/lib/component/image-tile/components/color-palette-option/style/_material-definition.scss +9 -9
- package/lib/component/image-tile/components/color-palette-option/style/_theme.scss +15 -15
- package/lib/component/image-tile/style/_layout.scss +102 -102
- package/lib/component/image-tile/style/_material-definition.scss +18 -18
- package/lib/component/image-tile/style/_theme.scss +58 -58
- package/lib/component/image-upload/style/_layout.scss +93 -93
- package/lib/component/image-upload/style/_material-definition.scss +35 -35
- package/lib/component/image-upload/style/_theme.scss +103 -103
- package/lib/component/marker/style/_layout.scss +30 -30
- package/lib/component/marker/style/_material-definition.scss +12 -12
- package/lib/component/marker/style/_theme.scss +30 -30
- package/lib/component/marker/style/material.scss +3 -3
- package/lib/component/photo-editor/style/_layout.scss +38 -38
- package/lib/component/photo-editor/style/_material-definition.scss +8 -8
- package/lib/component/prepare-starting-image/style/_layout.scss +34 -34
- package/lib/component/prepare-starting-image/style/_material-definition.scss +11 -11
- package/lib/component/process-loader/style/_layout.scss +74 -74
- package/lib/component/process-loader/style/_material-definition.scss +24 -24
- package/lib/component/process-loader/style/_theme.scss +128 -128
- package/lib/component/scene-context-menu/style/_layout.scss +59 -59
- package/lib/component/scene-context-menu/style/_material-definition.scss +27 -27
- package/lib/component/scene-context-menu/style/_theme.scss +57 -57
- package/lib/component/segment-inpaint/style/_layout.scss +51 -51
- package/lib/component/segment-inpaint/style/_material-definition.scss +11 -11
- package/lib/component/segment-inpaint/style/_theme.scss +29 -29
- package/lib/component/side-bar-menu/style/_layout.scss +26 -26
- package/lib/component/side-bar-menu/style/_material-definition.scss +12 -12
- package/lib/component/side-bar-menu/style/_theme.scss +32 -32
- package/lib/component/side-panel/style/_layout.scss +45 -45
- package/lib/component/side-panel/style/_material-definition.scss +16 -16
- package/lib/component/side-panel/style/_theme.scss +39 -39
- package/lib/component/step-tile/style/_layout.scss +50 -50
- package/lib/component/step-tile/style/_material-definition.scss +20 -20
- package/lib/component/step-tile/style/_theme.scss +78 -78
- package/lib/component/threedscene/style/_layout.scss +57 -57
- package/lib/component/threedscene/style/_material-definition.scss +12 -12
- package/lib/component/threedscene/style/_theme.scss +17 -17
- package/lib/component/upload-starting-image/style/_layout.scss +58 -58
- package/lib/component/upload-starting-image/style/_material-definition.scss +18 -18
- package/lib/component/upload-starting-image/style/_theme.scss +39 -39
- 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
|
+
}
|