Skip to content

Commit 7fc394b

Browse files
committed
feat: improvement on UI
1 parent 0ce9aad commit 7fc394b

2 files changed

Lines changed: 60 additions & 47 deletions

File tree

index.html

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -249,8 +249,6 @@ <h2>
249249
/>
250250
</label>
251251

252-
<div class="preview" id="gradient-text-color-preview"></div>
253-
254252
<label for="color" class="color">
255253
<input
256254
type="text"
@@ -262,6 +260,8 @@ <h2>
262260
</label>
263261
</div>
264262

263+
<div class="preview" id="gradient-text-color-preview"></div>
264+
265265
<label id="degree">
266266
<span class="label-title">
267267
<span>Degree</span>
@@ -291,8 +291,6 @@ <h2>
291291
/>
292292
</label>
293293

294-
<div class="preview" id="gradient-border-color-preview"></div>
295-
296294
<label for="color" class="color">
297295
<input
298296
type="text"
@@ -304,6 +302,8 @@ <h2>
304302
</label>
305303
</div>
306304

305+
<div class="preview" id="gradient-border-color-preview"></div>
306+
307307
<label class="radius" for="gradient-border-radius">
308308
<input type="checkbox" id="gradient-border-radius" name="check" />
309309
<span> Include Radius </span>
@@ -349,8 +349,6 @@ <h2>
349349
/>
350350
</label>
351351

352-
<div class="preview" id="gradient-background-color-preview"></div>
353-
354352
<label for="color" class="color">
355353
<input
356354
type="text"
@@ -362,6 +360,8 @@ <h2>
362360
</label>
363361
</div>
364362

363+
<div class="preview" id="gradient-background-color-preview"></div>
364+
365365
<label id="degree">
366366
<span class="label-title">
367367
<span>Degree</span>
@@ -458,15 +458,17 @@ <h2>
458458
<!-- Box Shadow -->
459459
<div data-content="box-shadow">
460460
<div class="box-shadow-preview" id="box-shadow-preview"></div>
461-
<label for="color" class="color">
462-
<input
463-
type="text"
464-
data-coloris
465-
placeholder="Tap to pick a color"
466-
id="box-shadow-color"
467-
class="box-shadow-inputs"
468-
/>
469-
</label>
461+
<div class="colors">
462+
<label for="color" class="color">
463+
<input
464+
type="text"
465+
data-coloris
466+
placeholder="Tap to pick a color"
467+
id="box-shadow-color"
468+
class="box-shadow-inputs"
469+
/>
470+
</label>
471+
</div>
470472

471473
<div class="degrees">
472474
<div class="degrees-row">
@@ -583,15 +585,17 @@ <h2>
583585
placeholder="Enter the text"
584586
></textarea>
585587

586-
<label for="color" class="color">
587-
<input
588-
type="text"
589-
data-coloris
590-
placeholder="Tap to pick a color"
591-
id="text-shadow-color"
592-
class="text-shadow-inputs"
593-
/>
594-
</label>
588+
<div class="colors">
589+
<label for="color" class="color">
590+
<input
591+
type="text"
592+
data-coloris
593+
placeholder="Tap to pick a color"
594+
id="text-shadow-color"
595+
class="text-shadow-inputs"
596+
/>
597+
</label>
598+
</div>
595599

596600
<div class="degrees">
597601
<div class="degrees-row">

src/style.css

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
}
3737

3838
::placeholder {
39-
color: #000;
39+
color: #ffffff;
4040
}
4141

4242
body {
@@ -242,48 +242,56 @@ textarea {
242242

243243
.colors {
244244
display: flex;
245-
flex-direction: column;
246245
align-items: center;
247246
margin: var(--spacing) 0 var(--spacing) 0;
247+
width: var(--generator-width);
248248
}
249249

250-
.colors .preview {
250+
.colors + .preview {
251251
margin: var(--spacing) 0 var(--spacing) 0;
252-
width: calc(var(--generator-width) / 2);
253-
height: 20px;
252+
width: var(--generator-width);
253+
height: 50px;
254254
background-color: var(--primary-color);
255+
border-radius: 5px;
256+
}
257+
258+
.colors > .color:first-of-type {
259+
margin-right: 10px;
255260
}
256261

257262
.color {
258263
display: flex;
259264
flex-direction: column;
260265
justify-content: center;
261266
align-items: center;
267+
width: 100%;
262268
}
263269

264270
.clr-field {
265-
width: var(--generator-width);
266-
}
267-
268-
[data-coloris] {
269271
width: 100%;
270-
height: 25px;
272+
display: flex;
273+
align-items: center;
274+
justify-content: center;
271275
}
272276

273-
[type='color'] {
274-
width: 30px;
275-
height: 30px;
276-
border: none;
277-
margin-right: 10px;
278-
cursor: pointer;
277+
.clr-field > button {
278+
top: 49% !important;
279+
width: 40px !important;
279280
}
280281

281-
[type='color']::-webkit-color-swatch-wrapper {
282-
padding: 0;
282+
[data-coloris] {
283+
width: 100%;
284+
height: 30px;
285+
background: none;
286+
border: 1px solid #fff;
287+
padding: 10px;
288+
outline: none;
289+
color: white;
290+
border-radius: 5px;
283291
}
284292

285-
[type='color']::-webkit-color-swatch {
286-
border: none;
293+
[data-coloris]::placeholder {
294+
color: #fff;
287295
}
288296

289297
#radio-group {
@@ -294,7 +302,7 @@ textarea {
294302

295303
.animation-type {
296304
background-color: var(--primary-color);
297-
width: var(--content-container);
305+
width: var(--generator-width);
298306
padding: 1rem;
299307
border-radius: 5px;
300308
}
@@ -366,7 +374,7 @@ input[type='number']::-webkit-outer-spin-button {
366374
background-color: var(--primary-color);
367375
padding: 0.8rem;
368376
border-radius: 5px;
369-
width: var(--content-container);
377+
width: var(--generator-width);
370378
}
371379

372380
#degree .label-title {
@@ -383,7 +391,7 @@ input[type='number']::-webkit-outer-spin-button {
383391

384392
.duration-label {
385393
background-color: var(--primary-color);
386-
width: var(--content-container);
394+
width: var(--generator-width);
387395
padding: 1rem;
388396
border-radius: 5px;
389397
margin-top: 1rem;
@@ -452,6 +460,7 @@ input[type='number']::-webkit-outer-spin-button {
452460
align-items: center;
453461
background-color: var(--primary-color);
454462
width: var(--content-container);
463+
border-radius: 5px;
455464
}
456465

457466
.degrees-row label {

0 commit comments

Comments
 (0)