@social-mail/social-mail-client 1.2.366 → 1.2.367

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 (89) hide show
  1. package/dist/admin/AdminAppIndex.pack.js +115 -462
  2. package/dist/admin/AdminAppIndex.pack.js.map +1 -1
  3. package/dist/admin/AdminAppIndex.pack.min.js +113 -450
  4. package/dist/admin/AdminAppIndex.pack.min.js.map +1 -1
  5. package/dist/site-editor/blocks/Billboard.d.ts.map +1 -1
  6. package/dist/site-editor/blocks/Billboard.js +0 -37
  7. package/dist/site-editor/blocks/Billboard.js.map +1 -1
  8. package/dist/site-editor/blocks/Block.js +81 -0
  9. package/dist/site-editor/blocks/Block.js.map +1 -1
  10. package/dist/site-editor/blocks/Card.d.ts.map +1 -1
  11. package/dist/site-editor/blocks/Card.js +0 -37
  12. package/dist/site-editor/blocks/Card.js.map +1 -1
  13. package/dist/site-editor/blocks/Carousel.d.ts.map +1 -1
  14. package/dist/site-editor/blocks/Carousel.js +0 -20
  15. package/dist/site-editor/blocks/Carousel.js.map +1 -1
  16. package/dist/site-editor/blocks/ColumnBox.d.ts.map +1 -1
  17. package/dist/site-editor/blocks/ColumnBox.js +0 -18
  18. package/dist/site-editor/blocks/ColumnBox.js.map +1 -1
  19. package/dist/site-editor/blocks/Columns2.d.ts.map +1 -1
  20. package/dist/site-editor/blocks/Columns2.js +0 -19
  21. package/dist/site-editor/blocks/Columns2.js.map +1 -1
  22. package/dist/site-editor/blocks/Columns3.d.ts.map +1 -1
  23. package/dist/site-editor/blocks/Columns3.js +0 -19
  24. package/dist/site-editor/blocks/Columns3.js.map +1 -1
  25. package/dist/site-editor/blocks/ImageBox.d.ts.map +1 -1
  26. package/dist/site-editor/blocks/ImageBox.js +15 -28
  27. package/dist/site-editor/blocks/ImageBox.js.map +1 -1
  28. package/dist/site-editor/blocks/ImageCard.d.ts.map +1 -1
  29. package/dist/site-editor/blocks/ImageCard.js +0 -37
  30. package/dist/site-editor/blocks/ImageCard.js.map +1 -1
  31. package/dist/site-editor/blocks/ImageGallery.d.ts.map +1 -1
  32. package/dist/site-editor/blocks/ImageGallery.js +0 -20
  33. package/dist/site-editor/blocks/ImageGallery.js.map +1 -1
  34. package/dist/site-editor/blocks/InjectBox.d.ts.map +1 -1
  35. package/dist/site-editor/blocks/InjectBox.js +0 -20
  36. package/dist/site-editor/blocks/InjectBox.js.map +1 -1
  37. package/dist/site-editor/blocks/MarqueeText.d.ts.map +1 -1
  38. package/dist/site-editor/blocks/MarqueeText.js +2 -29
  39. package/dist/site-editor/blocks/MarqueeText.js.map +1 -1
  40. package/dist/site-editor/blocks/PDFFlipBook.d.ts.map +1 -1
  41. package/dist/site-editor/blocks/PDFFlipBook.js +2 -33
  42. package/dist/site-editor/blocks/PDFFlipBook.js.map +1 -1
  43. package/dist/site-editor/blocks/RightImageBox.d.ts.map +1 -1
  44. package/dist/site-editor/blocks/RightImageBox.js +15 -29
  45. package/dist/site-editor/blocks/RightImageBox.js.map +1 -1
  46. package/dist/site-editor/blocks/RowBox.d.ts.map +1 -1
  47. package/dist/site-editor/blocks/RowBox.js +0 -18
  48. package/dist/site-editor/blocks/RowBox.js.map +1 -1
  49. package/dist/site-editor/blocks/TextBox.d.ts.map +1 -1
  50. package/dist/site-editor/blocks/TextBox.js +0 -20
  51. package/dist/site-editor/blocks/TextBox.js.map +1 -1
  52. package/dist/site-editor/blocks/TextMask.d.ts.map +1 -1
  53. package/dist/site-editor/blocks/TextMask.js +0 -18
  54. package/dist/site-editor/blocks/TextMask.js.map +1 -1
  55. package/dist/site-editor/blocks/VerticalImageBox.d.ts.map +1 -1
  56. package/dist/site-editor/blocks/VerticalImageBox.js +0 -18
  57. package/dist/site-editor/blocks/VerticalImageBox.js.map +1 -1
  58. package/dist/site-editor/blocks/VideoPlayer.d.ts.map +1 -1
  59. package/dist/site-editor/blocks/VideoPlayer.js +0 -24
  60. package/dist/site-editor/blocks/VideoPlayer.js.map +1 -1
  61. package/dist/site-editor/blocks/WrapGrid.d.ts.map +1 -1
  62. package/dist/site-editor/blocks/WrapGrid.js +0 -18
  63. package/dist/site-editor/blocks/WrapGrid.js.map +1 -1
  64. package/dist/tsconfig.tsbuildinfo +1 -1
  65. package/dist/web/AppIndex.pack.js +115 -462
  66. package/dist/web/AppIndex.pack.js.map +1 -1
  67. package/dist/web/AppIndex.pack.min.js +113 -450
  68. package/dist/web/AppIndex.pack.min.js.map +1 -1
  69. package/package.json +1 -1
  70. package/src/site-editor/blocks/Billboard.tsx +0 -37
  71. package/src/site-editor/blocks/Block.tsx +82 -0
  72. package/src/site-editor/blocks/Card.tsx +0 -37
  73. package/src/site-editor/blocks/Carousel.tsx +0 -20
  74. package/src/site-editor/blocks/ColumnBox.tsx +0 -18
  75. package/src/site-editor/blocks/Columns2.tsx +0 -19
  76. package/src/site-editor/blocks/Columns3.tsx +0 -19
  77. package/src/site-editor/blocks/ImageBox.tsx +15 -28
  78. package/src/site-editor/blocks/ImageCard.tsx +0 -37
  79. package/src/site-editor/blocks/ImageGallery.tsx +0 -20
  80. package/src/site-editor/blocks/InjectBox.tsx +0 -20
  81. package/src/site-editor/blocks/MarqueeText.tsx +0 -26
  82. package/src/site-editor/blocks/PDFFlipBook.tsx +0 -28
  83. package/src/site-editor/blocks/RightImageBox.tsx +15 -29
  84. package/src/site-editor/blocks/RowBox.tsx +0 -18
  85. package/src/site-editor/blocks/TextBox.tsx +0 -20
  86. package/src/site-editor/blocks/TextMask.tsx +0 -18
  87. package/src/site-editor/blocks/VerticalImageBox.tsx +0 -18
  88. package/src/site-editor/blocks/VideoPlayer.tsx +0 -25
  89. package/src/site-editor/blocks/WrapGrid.tsx +0 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@social-mail/social-mail-client",
3
- "version": "1.2.366",
3
+ "version": "1.2.367",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -21,25 +21,6 @@ StylerSets.register("low", styled.css `
21
21
  -webkit-text-stroke-color: currentColor;
22
22
  -webkit-text-stroke-width: 1px;
23
23
  -webkit-text-fill-color: transparent;
24
- &:empty:before {
25
- background-color: #ddd;
26
- color: #000;
27
- font-size: 16px;
28
- font-weight: bold;
29
- font-family: 'Courier New', Courier, monospace;
30
- height: 100%;
31
- display: flex;
32
- justify-items: center;
33
- align-items: center;
34
- min-height: 30px;
35
- opacity: 0.3;
36
- border-radius: 3px;
37
- white-space: nowrap;
38
- overflow: hidden;
39
- text-overflow: ellipsis;
40
- content: "Container";
41
- }
42
-
43
24
  }
44
25
  & > h4 {
45
26
  grid-row: 2;
@@ -47,24 +28,6 @@ StylerSets.register("low", styled.css `
47
28
  margin-block-start: 0;
48
29
  margin-block-end: 0;
49
30
  font-size: 2rem;
50
- &:empty:before {
51
- background-color: #ddd;
52
- color: #000;
53
- font-size: 16px;
54
- font-weight: bold;
55
- font-family: 'Courier New', Courier, monospace;
56
- height: 100%;
57
- display: flex;
58
- justify-items: center;
59
- align-items: center;
60
- min-height: 30px;
61
- opacity: 0.3;
62
- border-radius: 3px;
63
- white-space: nowrap;
64
- overflow: hidden;
65
- text-overflow: ellipsis;
66
- content: "Container";
67
- }
68
31
  }
69
32
 
70
33
  `.expand("[styler-layout=billboard]")
@@ -99,6 +99,88 @@ StylerSets.register("low", styled.css `
99
99
  `.expand("[styler-layout=main]")
100
100
  );
101
101
 
102
+ StylerSets.register("high", styled.css `
103
+ &[styler-layout] {
104
+
105
+ &:empty:before {
106
+ background-color: #ddd;
107
+ color: #000;
108
+ font-size: 16px;
109
+ font-weight: bold;
110
+ font-family: 'Courier New', Courier, monospace;
111
+ display: flex;
112
+ justify-items: center;
113
+ align-items: center;
114
+ min-height: 30px;
115
+ height: 100%;
116
+ opacity: 0.3;
117
+ border-radius: 3px;
118
+ white-space: nowrap;
119
+ overflow: hidden;
120
+ text-overflow: ellipsis;
121
+ content: "Container";
122
+ }
123
+
124
+ & > *:empty:before {
125
+ background-color: #ddd;
126
+ color: #000;
127
+ font-size: 16px;
128
+ font-weight: bold;
129
+ font-family: 'Courier New', Courier, monospace;
130
+ display: flex;
131
+ justify-items: center;
132
+ align-items: center;
133
+ min-height: 30px;
134
+ height: 100%;
135
+ opacity: 0.3;
136
+ border-radius: 3px;
137
+ white-space: nowrap;
138
+ overflow: hidden;
139
+ text-overflow: ellipsis;
140
+ content: "Container";
141
+ }
142
+
143
+ & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
144
+ &:empty:before {
145
+ content: "Title";
146
+ }
147
+ }
148
+
149
+ & marquee-text:empty:before {
150
+ content: "Marquee Text";
151
+ }
152
+
153
+ & inject {
154
+ & * {
155
+ user-select: none;
156
+ pointer-events: none;
157
+ }
158
+ &:empty:before {
159
+ content: "Marquee Text";
160
+ }
161
+ }
162
+
163
+ & video-player {
164
+ &:empty:before {
165
+ content: "Video Player";
166
+ }
167
+
168
+ }
169
+
170
+ & pdf-flip-book {
171
+ & * {
172
+ user-select: none;
173
+ pointer-events: none;
174
+ }
175
+ &:empty:before {
176
+ content: "PDF Flip Book";
177
+ }
178
+ }
179
+
180
+
181
+ }
182
+ `.expand("body[editing]"));
183
+
102
184
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`;
103
185
 
104
186
  const svgCross = `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6z"/><path class="fa-primary" d=""/></svg>`;
@@ -33,43 +33,6 @@ StylerSets.register("low", styled.css `
33
33
  grid-column: 1;
34
34
  grid-row: 3;
35
35
  }
36
-
37
- & > section:empty:before {
38
- background-color: #ddd;
39
- color: #000;
40
- font-size: 16px;
41
- font-weight: bold;
42
- font-family: 'Courier New', Courier, monospace;
43
- height: 100%;
44
- display: flex;
45
- justify-items: center;
46
- align-items: center;
47
- min-height: 30px;
48
- opacity: 0.3;
49
- border-radius: 3px;
50
- white-space: nowrap;
51
- overflow: hidden;
52
- text-overflow: ellipsis;
53
- content: "Container";
54
- }
55
- & > h4:empty:before {
56
- background-color: #ddd;
57
- color: #000;
58
- font-size: 16px;
59
- font-weight: bold;
60
- font-family: 'Courier New', Courier, monospace;
61
- height: 100%;
62
- display: flex;
63
- justify-items: center;
64
- align-items: center;
65
- min-height: 30px;
66
- opacity: 0.3;
67
- border-radius: 3px;
68
- white-space: nowrap;
69
- overflow: hidden;
70
- text-overflow: ellipsis;
71
- content: "Title";
72
- }
73
36
  `.expand("[styler-layout=card]")
74
37
  );
75
38
 
@@ -18,26 +18,6 @@ StylerSets.register("low", styled.css `
18
18
 
19
19
  display: flex;
20
20
  flex-direction: row;
21
-
22
- & > *:empty:before {
23
- background-color: #ddd;
24
- color: #000;
25
- font-size: 16px;
26
- font-weight: bold;
27
- font-family: 'Courier New', Courier, monospace;
28
- height: 100%;
29
- display: flex;
30
- justify-items: center;
31
- align-items: center;
32
- min-height: 30px;
33
- opacity: 0.3;
34
- border-radius: 3px;
35
- white-space: nowrap;
36
- overflow: hidden;
37
- text-overflow: ellipsis;
38
- content: "Container";
39
-
40
- }
41
21
  `.expand("carousel-slider"));
42
22
 
43
23
  export const Carousel = Block({
@@ -19,24 +19,6 @@ StylerSets.register("low", styled.css `
19
19
  flex: 1 1 100%;
20
20
  }
21
21
 
22
- & > *:empty:before {
23
- background-color: #ddd;
24
- color: #000;
25
- font-size: 16px;
26
- font-weight: bold;
27
- font-family: 'Courier New', Courier, monospace;
28
- height: 100%;
29
- display: flex;
30
- justify-items: center;
31
- align-items: center;
32
- min-height: 30px;
33
- opacity: 0.3;
34
- border-radius: 3px;
35
- white-space: nowrap;
36
- overflow: hidden;
37
- text-overflow: ellipsis;
38
- content: "Container";
39
- }
40
22
  `.expand("[styler-layout=column]"));
41
23
 
42
24
 
@@ -33,25 +33,6 @@ StylerSets.register("low", styled.css `
33
33
  max-width: 50%;
34
34
  }
35
35
  }
36
- & > *:empty:before {
37
- background-color: #ddd;
38
- color: #000;
39
- font-size: 16px;
40
- font-weight: bold;
41
- font-family: 'Courier New', Courier, monospace;
42
- height: 100%;
43
- display: flex;
44
- justify-items: center;
45
- align-items: center;
46
- min-height: 30px;
47
- opacity: 0.3;
48
- border-radius: 3px;
49
- white-space: nowrap;
50
- overflow: hidden;
51
- text-overflow: ellipsis;
52
- content: "Container";
53
-
54
- }
55
36
  `.expand("[styler-layout=columns-2]")
56
37
  );
57
38
 
@@ -33,25 +33,6 @@ StylerSets.register("low", styled.css `
33
33
  max-width: 33%;
34
34
  }
35
35
  }
36
- & > *:empty:before {
37
- background-color: #ddd;
38
- color: #000;
39
- font-size: 16px;
40
- font-weight: bold;
41
- font-family: 'Courier New', Courier, monospace;
42
- height: 100%;
43
- display: flex;
44
- justify-items: center;
45
- align-items: center;
46
- min-height: 30px;
47
- opacity: 0.3;
48
- border-radius: 3px;
49
- white-space: nowrap;
50
- overflow: hidden;
51
- text-overflow: ellipsis;
52
- content: "Container";
53
-
54
- }
55
36
 
56
37
  `.expand("[styler-layout=columns-3]")
57
38
  );
@@ -23,17 +23,6 @@ StylerSets.register("low", styled.css `
23
23
  max-width: 100%;
24
24
  }
25
25
 
26
- @media (min-width: 600px) {
27
- & {
28
- flex-direction: row;
29
- }
30
- & > * {
31
- padding: ${stylerVars.sizeDefault};
32
- flex: 1 1 50%;
33
- max-width: 50%;
34
- }
35
- }
36
-
37
26
  & > img {
38
27
  align-self: stretch;
39
28
  border-radius: ${stylerVars.sizeLarge}
@@ -46,23 +35,21 @@ StylerSets.register("low", styled.css `
46
35
  }
47
36
  }
48
37
 
49
- & > *:empty:before {
50
- background-color: #ddd;
51
- color: #000;
52
- font-size: 16px;
53
- font-weight: bold;
54
- font-family: 'Courier New', Courier, monospace;
55
- height: 100%;
56
- display: flex;
57
- justify-items: center;
58
- align-items: center;
59
- min-height: 30px;
60
- opacity: 0.3;
61
- border-radius: 3px;
62
- white-space: nowrap;
63
- overflow: hidden;
64
- text-overflow: ellipsis;
65
- content: "Container";
38
+
39
+ @media (min-width: 600px) {
40
+ & {
41
+ flex-direction: row;
42
+ }
43
+
44
+ & > img {
45
+ align-self: center;
46
+ }
47
+
48
+ & > * {
49
+ padding: ${stylerVars.sizeDefault};
50
+ flex: 1 1 50%;
51
+ max-width: 50%;
52
+ }
66
53
  }
67
54
  `.expand("[styler-layout=image-box]")
68
55
  );
@@ -65,43 +65,6 @@ display: grid;
65
65
  grid-row: 2;
66
66
  }
67
67
  }
68
-
69
- & > section:empty:before {
70
- background-color: #ddd;
71
- color: #000;
72
- font-size: 16px;
73
- font-weight: bold;
74
- font-family: 'Courier New', Courier, monospace;
75
- height: 100%;
76
- display: flex;
77
- justify-items: center;
78
- align-items: center;
79
- min-height: 30px;
80
- opacity: 0.3;
81
- border-radius: 3px;
82
- white-space: nowrap;
83
- overflow: hidden;
84
- text-overflow: ellipsis;
85
- content: "Container";
86
- }
87
- & > h4:empty:before {
88
- background-color: #ddd;
89
- color: #000;
90
- font-size: 16px;
91
- font-weight: bold;
92
- font-family: 'Courier New', Courier, monospace;
93
- height: 100%;
94
- display: flex;
95
- justify-items: center;
96
- align-items: center;
97
- min-height: 30px;
98
- opacity: 0.3;
99
- border-radius: 3px;
100
- white-space: nowrap;
101
- overflow: hidden;
102
- text-overflow: ellipsis;
103
- content: "Title";
104
- }
105
68
  `.expand("[styler-layout=image-card]")
106
69
  );
107
70
 
@@ -19,26 +19,6 @@ StylerSets.register("low", styled.css `
19
19
  display: flex;
20
20
  flex-direction: row;
21
21
  flex-wrap: wrap;
22
-
23
- & > *:empty:before {
24
- background-color: #ddd;
25
- color: #000;
26
- font-size: 16px;
27
- font-weight: bold;
28
- font-family: 'Courier New', Courier, monospace;
29
- height: 100%;
30
- display: flex;
31
- justify-items: center;
32
- align-items: center;
33
- min-height: 30px;
34
- opacity: 0.3;
35
- border-radius: 3px;
36
- white-space: nowrap;
37
- overflow: hidden;
38
- text-overflow: ellipsis;
39
- content: "Container";
40
-
41
- }
42
22
  `.expand("image-gallery"));
43
23
 
44
24
  StylerSets.register("low", styled.css `
@@ -20,26 +20,6 @@ StylerSets.register("low", styled.css `
20
20
  user-select: none;
21
21
  pointer-events: none;
22
22
  }
23
-
24
- &:empty:before {
25
- background-color: #ddd;
26
- color: #000;
27
- font-size: 16px;
28
- font-weight: bold;
29
- font-family: 'Courier New', Courier, monospace;
30
- height: 100%;
31
- display: flex;
32
- justify-items: center;
33
- align-items: center;
34
- min-height: 30px;
35
- opacity: 0.3;
36
- border-radius: 3px;
37
- white-space: nowrap;
38
- overflow: hidden;
39
- text-overflow: ellipsis;
40
- content: "INJECT HTML";
41
- }
42
-
43
23
  }
44
24
  `.expand("body[editing]"));
45
25
 
@@ -2,32 +2,6 @@
2
2
 
3
3
  import XNode from "@web-atoms/core/dist/core/XNode";
4
4
  import { Block } from "./Block";
5
- import { StylerSets } from "../styler/StylerSets";
6
- import styled from "@web-atoms/core/dist/style/styled";
7
-
8
- StylerSets.register("low", styled.css `
9
-
10
-
11
- &:empty:before {
12
- background-color: #ddd;
13
- color: #000;
14
- font-size: 16px;
15
- font-weight: bold;
16
- font-family: 'Courier New', Courier, monospace;
17
- height: 100%;
18
- display: flex;
19
- justify-items: center;
20
- align-items: center;
21
- min-height: 30px;
22
- opacity: 0.3;
23
- border-radius: 3px;
24
- white-space: nowrap;
25
- overflow: hidden;
26
- text-overflow: ellipsis;
27
- content: "Marquee Text";
28
-
29
- }
30
- `.expand("marquee-text"));
31
5
 
32
6
  /* eslint-disable @typescript-eslint/no-namespace */
33
7
  declare global {
@@ -14,34 +14,6 @@ declare global {
14
14
  }
15
15
  }
16
16
 
17
- StylerSets.register("low", styled.css `
18
- & pdf-flip-book {
19
- & * {
20
- user-select: none;
21
- pointer-events: none;
22
- }
23
-
24
- &:empty:before {
25
- background-color: #ddd;
26
- color: #000;
27
- font-size: 16px;
28
- font-weight: bold;
29
- font-family: 'Courier New', Courier, monospace;
30
- height: 100%;
31
- display: flex;
32
- justify-items: center;
33
- align-items: center;
34
- min-height: 30px;
35
- opacity: 0.3;
36
- border-radius: 3px;
37
- white-space: nowrap;
38
- overflow: hidden;
39
- text-overflow: ellipsis;
40
- content: "PDF Book";
41
- }
42
- }
43
- `.expand("body[editing]"));
44
-
45
17
  export const PDFFlipBook = Block({
46
18
  className: "fad fa-grid-4",
47
19
  title: "Add Image Grid",
@@ -23,18 +23,6 @@ StylerSets.register("low", styled.css `
23
23
  max-width: 100%;
24
24
  }
25
25
 
26
- @media (min-width: 600px) {
27
- & {
28
- flex-direction: row-reverse;
29
- }
30
-
31
- & > * {
32
- padding: ${stylerVars.sizeDefault};
33
- flex: 1 1 50%;
34
- max-width: 50%;
35
- }
36
- }
37
-
38
26
  & > img {
39
27
  align-self: stretch;
40
28
  border-radius: ${stylerVars.sizeLarge}
@@ -47,24 +35,22 @@ StylerSets.register("low", styled.css `
47
35
  }
48
36
  }
49
37
 
50
- & > *:empty:before {
51
- background-color: #ddd;
52
- color: #000;
53
- font-size: 16px;
54
- font-weight: bold;
55
- font-family: 'Courier New', Courier, monospace;
56
- height: 100%;
57
- display: flex;
58
- justify-items: center;
59
- align-items: center;
60
- min-height: 30px;
61
- opacity: 0.3;
62
- border-radius: 3px;
63
- white-space: nowrap;
64
- overflow: hidden;
65
- text-overflow: ellipsis;
66
- content: "Container";
38
+ @media (min-width: 600px) {
39
+ & {
40
+ flex-direction: row-reverse;
41
+ }
42
+
43
+ & > img {
44
+ align-self: center;
45
+ }
46
+
47
+ & > * {
48
+ padding: ${stylerVars.sizeDefault};
49
+ flex: 1 1 50%;
50
+ max-width: 50%;
51
+ }
67
52
  }
53
+
68
54
  `.expand("[styler-layout=right-image-box]")
69
55
 
70
56
  );
@@ -28,24 +28,6 @@ StylerSets.register("low", styled.css `
28
28
  flex-wrap: nowrap;
29
29
  }
30
30
  }
31
- & > *:empty:before {
32
- background-color: #ddd;
33
- color: #000;
34
- font-size: 16px;
35
- font-weight: bold;
36
- font-family: 'Courier New', Courier, monospace;
37
- height: 100%;
38
- display: flex;
39
- justify-items: center;
40
- align-items: center;
41
- min-height: 30px;
42
- opacity: 0.3;
43
- border-radius: 3px;
44
- white-space: nowrap;
45
- overflow: hidden;
46
- text-overflow: ellipsis;
47
- content: "Container";
48
- }
49
31
  `.expand("[styler-layout=row]")
50
32
  );
51
33
 
@@ -15,26 +15,6 @@ StylerSets.register("low", styled.css `
15
15
  border-radius: ${stylerVars.sizeDefault};
16
16
  justify-items: center;
17
17
  align-items: stretch;
18
-
19
- & > p:empty:before {
20
- background-color: #ddd;
21
- color: #000;
22
- font-size: 16px;
23
- font-weight: bold;
24
- font-family: 'Courier New', Courier, monospace;
25
- height: 100%;
26
- display: flex;
27
- justify-items: center;
28
- align-items: center;
29
- min-height: 30px;
30
- opacity: 0.3;
31
- border-radius: 3px;
32
- white-space: nowrap;
33
- overflow: hidden;
34
- text-overflow: ellipsis;
35
- content: "Container";
36
-
37
- }
38
18
  `.expand("[styler-layout=text-box]")
39
19
 
40
20
  );
@@ -5,24 +5,6 @@ import { StylerSets } from "../styler/StylerSets";
5
5
 
6
6
  StylerSets.register("low", styled.css `
7
7
  &:empty:before {
8
- padding: 10px;
9
- background-color: #ddd;
10
- color: #000;
11
- font-size: 16px;
12
- font-weight: bold;
13
- font-family: 'Courier New', Courier, monospace;
14
- height: 100%;
15
- min-height: 100px;
16
- display: flex;
17
- justify-items: center;
18
- align-items: center;
19
- opacity: 0.3;
20
- border-radius: 3px;
21
- white-space: nowrap;
22
- overflow: hidden;
23
- text-align: center;
24
- vertical-align: middle;
25
- text-overflow: ellipsis;
26
8
  content: "Text Mask";
27
9
  }
28
10
  `.expand("body[editing] [styler-background-clip=text]"));
@@ -34,24 +34,6 @@ StylerSets.register("low", styled.css `
34
34
  }
35
35
  }
36
36
 
37
- & > *:empty:before {
38
- background-color: #ddd;
39
- color: #000;
40
- font-size: 16px;
41
- font-weight: bold;
42
- font-family: 'Courier New', Courier, monospace;
43
- height: 100%;
44
- display: flex;
45
- justify-items: center;
46
- align-items: center;
47
- min-height: 30px;
48
- opacity: 0.3;
49
- border-radius: 3px;
50
- white-space: nowrap;
51
- overflow: hidden;
52
- text-overflow: ellipsis;
53
- content: "Container";
54
- }
55
37
  `.expand("[styler-layout=vertical-image-box]")
56
38
 
57
39
  );