l-min-components 1.0.800 → 1.0.802

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/textEditor/style.scss +132 -143
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "l-min-components",
3
- "version": "1.0.800",
3
+ "version": "1.0.802",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src/assets",
package/src/components/textEditor/style.scss CHANGED
@@ -6,14 +6,14 @@
6
6
  .editor {
7
7
  display: flex;
8
8
  gap: 13px;
9
-
9
+
10
10
  .editor-wrapper {
11
11
  width: 100%;
12
12
  position: relative;
13
13
  background: #e5e5e5;
14
14
  border-radius: 15px;
15
15
 
16
- .emoji_picker{
16
+ .emoji_picker {
17
17
  position: absolute;
18
18
  z-index: 1;
19
19
  transform: translate(10px, 10px);
@@ -22,20 +22,20 @@
22
22
 
23
23
  @media only screen and (max-width: 1700px) {
24
24
  margin-top: -19%;
25
- }
25
+ }
26
26
  @media only screen and (max-width: 1600px) {
27
27
  margin-top: -21%;
28
- }
28
+ }
29
29
  @media only screen and (max-width: 1500px) {
30
30
  margin-top: -24%;
31
- }
31
+ }
32
32
  }
33
33
 
34
- .editor_area{
34
+ .editor_area {
35
35
  background: #fff;
36
36
  border-radius: 15px;
37
37
 
38
- input{
38
+ input {
39
39
  border-radius: 12px;
40
40
  background: #fff;
41
41
  outline: none;
@@ -47,7 +47,6 @@
47
47
  padding-left: 30px;
48
48
  border: "none";
49
49
  margin-top: 20px;
50
-
51
50
  }
52
51
  .editable {
53
52
  border-radius: 25px;
@@ -56,16 +55,15 @@
56
55
  // background: #e5e5e5;
57
56
  min-height: 193px;
58
57
  }
59
-
60
58
  }
61
-
62
- .bottom{
59
+
60
+ .bottom {
63
61
  display: flex;
64
62
  justify-content: center;
65
63
  align-items: center;
66
64
  width: 80%;
67
65
 
68
- .emoji_button{
66
+ .emoji_button {
69
67
  background-color: white;
70
68
  border: none;
71
69
  cursor: pointer;
@@ -74,183 +72,174 @@
74
72
  margin-right: 20px;
75
73
  border-radius: 50%;
76
74
  // opacity: 0.6;
77
-
78
-
79
75
  }
80
76
 
81
- .emoji_button_active{
77
+ .emoji_button_active {
82
78
  background-color: #fff;
83
- color: #00C2C2;
79
+ color: #00c2c2;
84
80
  border: none;
85
81
  cursor: pointer;
86
82
  padding: 3px;
87
83
  margin-top: 6px;
88
84
  margin-right: 20px;
89
85
  // border-radius: 50%;
90
- svg path{
91
- stroke: #00C2C2;
86
+ svg path {
87
+ stroke: #00c2c2;
92
88
  }
93
89
  // border-radius: 20px;
94
-
95
-
96
-
97
90
  }
98
91
 
99
-
100
- & > button{
92
+ & > button {
101
93
  @media only screen and (max-width: 1400px) {
102
94
  font-size: 17px !important;
103
95
  font-weight: 700;
104
- }
96
+ }
105
97
  @media only screen and (max-width: 1366px) {
106
98
  font-size: 15px !important;
107
99
  font-weight: 600;
108
- }
100
+ }
109
101
  }
110
102
 
111
- .tool-bar {
112
- display: flex;
113
- margin: auto;
114
- margin-top: 16px;
115
- margin-right: 20px;
116
- padding: 16px;
117
- background: #fff;
118
- border: 0px solid c.$neutral-20;
119
- border-radius: 12px;
120
- width: 70%;
121
- height: 60px;
122
- // gap: 5px;
123
-
124
-
103
+ .tool-bar {
104
+ display: flex;
105
+ margin: auto;
106
+ margin-top: 16px;
107
+ margin-right: 20px;
108
+ padding: 16px;
109
+ background: #fff;
110
+ border: 0px solid c.$neutral-20;
111
+ border-radius: 12px;
112
+ width: 70%;
113
+ height: 60px;
114
+ // gap: 5px;
125
115
 
126
- .list {
127
- display: grid;
128
- // grid-template-columns: 1fr 1fr;
129
- gap: 2px;
130
- & > div {
116
+ align-items: center;
117
+ .list {
131
118
  display: grid;
132
- cursor: pointer;
133
- }
134
- .active{
135
- color: #00C2C2;
136
- svg path{
137
- // stroke: #00C2C2;
138
- stroke: #00C2C2;
119
+ // grid-template-columns: 1fr 1fr;
120
+ gap: 2px;
121
+ & > div {
122
+ display: grid;
123
+ cursor: pointer;
124
+ }
125
+ .active {
126
+ color: #00c2c2;
127
+ svg path {
128
+ // stroke: #00C2C2;
129
+ stroke: #00c2c2;
130
+ }
139
131
  }
140
132
  }
141
- }
142
133
 
143
- .active{
144
- opacity: 1;
145
- }
134
+ .active {
135
+ opacity: 1;
136
+ }
146
137
 
147
- .font {
148
- .font-dd {
149
- div {
150
- border-width: 0px;
151
- min-width: 215px;
152
- }
153
- p {
154
- margin-right: 25px;
155
- font-weight: 700;
138
+ .font {
139
+ .font-dd {
140
+ div {
141
+ border-width: 0px;
142
+ min-width: 215px;
143
+ }
144
+ p {
145
+ margin-right: 25px;
146
+ font-weight: 700;
147
+ }
156
148
  }
157
149
  }
158
- }
159
- .font-size {
160
- .sizes {
161
- div {
162
- border-width: 0px;
163
- // z-index: 999;
164
- .iVkqGn{
165
- padding: 11px 10px;
150
+ .font-size {
151
+ .sizes {
152
+ div {
153
+ border-width: 0px;
154
+ // z-index: 999;
155
+ .iVkqGn {
156
+ padding: 11px 10px;
157
+ }
158
+ }
159
+ p {
160
+ margin-right: 25px;
161
+ font-weight: 700;
166
162
  }
167
- }
168
- p {
169
- margin-right: 25px;
170
- font-weight: 700;
171
163
  }
172
164
  }
173
- }
174
- align-items: center;
175
- & > div {
176
- border-right: 1px solid c.$neutral-10;
177
- padding: 0 6px;
178
- }
179
- .font-style {
180
- display: flex;
181
- gap: 5px;
182
165
  & > div {
183
- display: grid;
184
- cursor: pointer;
185
- // svg{
186
- // fill: #00C2C2;
187
- // }
166
+ border-right: 1px solid c.$neutral-10;
167
+ padding: 0 6px;
188
168
  }
169
+ .font-style {
170
+ display: flex;
171
+ gap: 5px;
172
+ & > div {
173
+ display: grid;
174
+ cursor: pointer;
175
+ // svg{
176
+ // fill: #00C2C2;
177
+ // }
178
+ }
189
179
 
190
- .active{
191
- color: #00C2C2;
192
- svg path{
193
- // fill: #00C2C2;
194
- stroke: #00C2C2;
180
+ .active {
181
+ color: #00c2c2;
182
+ svg path {
183
+ // fill: #00C2C2;
184
+ stroke: #00c2c2;
185
+ }
195
186
  }
196
187
  }
197
- }
198
- .color-box {
199
- .wrap {
200
- position: relative;
201
- cursor: pointer;
202
- display: flex;
203
- align-items: center;
204
- gap: 7px;
205
- input {
206
- position: absolute;
207
- pointer-events: none;
208
- opacity: 0;
209
- }
210
- .indicator {
211
- width: 24px;
212
- height: 24px;
213
- border-radius: 50%;
188
+ .color-box {
189
+ .wrap {
190
+ position: relative;
191
+ cursor: pointer;
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 7px;
195
+ input {
196
+ position: absolute;
197
+ pointer-events: none;
198
+ opacity: 0;
199
+ }
200
+ .indicator {
201
+ width: 24px;
202
+ height: 24px;
203
+ border-radius: 50%;
204
+ }
214
205
  }
215
206
  }
216
- }
217
- .alignments {
218
- display: grid;
219
- grid-template-columns: 1fr 1fr 1fr;
220
- gap: 16px;
221
- cursor: pointer;
222
- & > div {
207
+ .alignments {
223
208
  display: grid;
224
- }
225
- .active{
226
- color: #00C2C2;
227
- svg path{
228
- // fill: #00C2C2;
229
- stroke: #00C2C2;
209
+ grid-template-columns: 1fr 1fr 1fr;
210
+ gap: 16px;
211
+ cursor: pointer;
212
+ & > div {
213
+ display: grid;
214
+ }
215
+ .active {
216
+ color: #00c2c2;
217
+ svg path {
218
+ // fill: #00C2C2;
219
+ stroke: #00c2c2;
220
+ }
230
221
  }
231
222
  }
232
-
233
223
  }
234
224
  }
235
- }
236
- .options {
237
- min-width: 40px;
238
- display: grid;
239
- align-content: start;
240
- gap: 20px;
241
- span {
242
- width: 40px;
243
- height: 40px;
244
- border-radius: 50%;
225
+ .options {
226
+ min-width: 40px;
245
227
  display: grid;
246
- align-content: center;
247
- justify-items: center;
248
- background-color: c.$error;
249
- cursor: pointer;
250
- &:nth-of-type(1) {
251
- background-color: c.$primary-color-main;
228
+ align-content: start;
229
+ gap: 20px;
230
+ span {
231
+ width: 40px;
232
+ height: 40px;
233
+ border-radius: 50%;
234
+ display: grid;
235
+ align-content: center;
236
+ justify-items: center;
237
+ background-color: c.$error;
238
+ cursor: pointer;
239
+ &:nth-of-type(1) {
240
+ background-color: c.$primary-color-main;
241
+ }
252
242
  }
253
243
  }
254
244
  }
255
245
  }
256
- }