Skip to content

Commit 10c7771

Browse files
egorleetegorleet
committed
feat(js): Add rotating icon
1 parent ab36b38 commit 10c7771

File tree

2 files changed

+36
-119
lines changed

2 files changed

+36
-119
lines changed

‎css/output.css

Lines changed: 28 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
--color-red-200: oklch(0.885 0.062 18.334);
1010
--color-red-300: oklch(0.808 0.114 19.571);
1111
--color-red-400: oklch(0.704 0.191 22.216);
12+
--color-red-500: oklch(0.637 0.237 25.331);
1213
--color-red-600: oklch(0.577 0.245 27.325);
13-
--color-yellow-300: oklch(0.905 0.182 98.111);
14+
--color-green-400: oklch(0.792 0.209 151.711);
1415
--color-blue-200: oklch(0.882 0.059 254.128);
1516
--color-blue-300: oklch(0.809 0.105 251.813);
1617
--color-blue-400: oklch(0.707 0.165 254.624);
@@ -201,9 +202,6 @@
201202
.pointer-events-none {
202203
pointer-events: none;
203204
}
204-
.collapse {
205-
visibility: collapse;
206-
}
207205
.sr-only {
208206
position: absolute;
209207
width: 1px;
@@ -221,6 +219,9 @@
221219
.relative {
222220
position: relative;
223221
}
222+
.static {
223+
position: static;
224+
}
224225
.start-0 {
225226
inset-inline-start: calc(var(--spacing) * 0);
226227
}
@@ -248,9 +249,6 @@
248249
.my-auto {
249250
margin-block: auto;
250251
}
251-
.me-1 {
252-
margin-inline-end: calc(var(--spacing) * 1);
253-
}
254252
.mt-0 {
255253
margin-top: calc(var(--spacing) * 0);
256254
}
@@ -263,12 +261,12 @@
263261
.block {
264262
display: block;
265263
}
264+
.contents {
265+
display: contents;
266+
}
266267
.flex {
267268
display: flex;
268269
}
269-
.grid {
270-
display: grid;
271-
}
272270
.hidden {
273271
display: none;
274272
}
@@ -278,16 +276,6 @@
278276
.inline-flex {
279277
display: inline-flex;
280278
}
281-
.list-item {
282-
display: list-item;
283-
}
284-
.table {
285-
display: table;
286-
}
287-
.size-4 {
288-
width: calc(var(--spacing) * 4);
289-
height: calc(var(--spacing) * 4);
290-
}
291279
.size-8 {
292280
width: calc(var(--spacing) * 8);
293281
height: calc(var(--spacing) * 8);
@@ -322,27 +310,15 @@
322310
.max-w-\[85rem\] {
323311
max-width: 85rem;
324312
}
325-
.shrink-0 {
326-
flex-shrink: 0;
327-
}
328-
.border-collapse {
329-
border-collapse: collapse;
330-
}
331313
.origin-\[0_0\] {
332314
transform-origin: 0 0;
333315
}
334-
.transform {
335-
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
336-
}
337316
.animate-spin {
338317
animation: var(--animate-spin);
339318
}
340319
.cursor-pointer {
341320
cursor: pointer;
342321
}
343-
.resize {
344-
resize: both;
345-
}
346322
.flex-col {
347323
flex-direction: column;
348324
}
@@ -443,6 +419,9 @@
443419
.bg-gray-50 {
444420
background-color: var(--color-gray-50);
445421
}
422+
.bg-green-400 {
423+
background-color: var(--color-green-400);
424+
}
446425
.bg-white {
447426
background-color: var(--color-white);
448427
}
@@ -472,9 +451,6 @@
472451
.p-0 {
473452
padding: calc(var(--spacing) * 0);
474453
}
475-
.p-2 {
476-
padding: calc(var(--spacing) * 2);
477-
}
478454
.p-2\.5 {
479455
padding: calc(var(--spacing) * 2.5);
480456
}
@@ -493,9 +469,6 @@
493469
.py-2 {
494470
padding-block: calc(var(--spacing) * 2);
495471
}
496-
.py-3 {
497-
padding-block: calc(var(--spacing) * 3);
498-
}
499472
.py-3\.5 {
500473
padding-block: calc(var(--spacing) * 3.5);
501474
}
@@ -553,30 +526,22 @@
553526
.text-white {
554527
color: var(--color-white);
555528
}
556-
.text-yellow-300 {
557-
color: var(--color-yellow-300);
558-
}
559529
.underline {
560530
text-decoration-line: underline;
561531
}
562-
.opacity-50 {
563-
opacity: 50%;
532+
.decoration-\[1px\] {
533+
text-decoration-thickness: 1px;
534+
}
535+
.underline-offset-\[5px\] {
536+
text-underline-offset: 5px;
564537
}
565538
.shadow-xl {
566539
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
567540
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
568541
}
569-
.outline {
570-
outline-style: var(--tw-outline-style);
571-
outline-width: 1px;
572-
}
573542
.filter {
574543
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
575544
}
576-
.backdrop-filter {
577-
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
578-
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
579-
}
580545
.transition {
581546
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
582547
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -856,16 +821,26 @@
856821
padding-block: calc(var(--spacing) * 8);
857822
}
858823
}
859-
.dark\:bg-black {
824+
.dark\:bg-red-500 {
825+
@media (prefers-color-scheme: dark) {
826+
background-color: var(--color-red-500);
827+
}
828+
}
829+
.dark\:text-\[\#c3c3c3\] {
860830
@media (prefers-color-scheme: dark) {
861-
background-color: var(--color-black);
831+
color: #c3c3c3;
862832
}
863833
}
864834
.dark\:text-white {
865835
@media (prefers-color-scheme: dark) {
866836
color: var(--color-white);
867837
}
868838
}
839+
.dark\:opacity-50 {
840+
@media (prefers-color-scheme: dark) {
841+
opacity: 50%;
842+
}
843+
}
869844
.\[\&_\*\]\:outline-none {
870845
& * {
871846
--tw-outline-style: none;
@@ -987,31 +962,6 @@ code, .code {
987962
transform: rotate(360deg);
988963
}
989964
}
990-
@property --tw-rotate-x {
991-
syntax: "*";
992-
inherits: false;
993-
initial-value: rotateX(0);
994-
}
995-
@property --tw-rotate-y {
996-
syntax: "*";
997-
inherits: false;
998-
initial-value: rotateY(0);
999-
}
1000-
@property --tw-rotate-z {
1001-
syntax: "*";
1002-
inherits: false;
1003-
initial-value: rotateZ(0);
1004-
}
1005-
@property --tw-skew-x {
1006-
syntax: "*";
1007-
inherits: false;
1008-
initial-value: skewX(0);
1009-
}
1010-
@property --tw-skew-y {
1011-
syntax: "*";
1012-
inherits: false;
1013-
initial-value: skewY(0);
1014-
}
1015965
@property --tw-border-style {
1016966
syntax: "*";
1017967
inherits: false;
@@ -1122,11 +1072,6 @@ code, .code {
11221072
inherits: false;
11231073
initial-value: 0 0 #0000;
11241074
}
1125-
@property --tw-outline-style {
1126-
syntax: "*";
1127-
inherits: false;
1128-
initial-value: solid;
1129-
}
11301075
@property --tw-blur {
11311076
syntax: "*";
11321077
inherits: false;
@@ -1167,42 +1112,6 @@ code, .code {
11671112
syntax: "*";
11681113
inherits: false;
11691114
}
1170-
@property --tw-backdrop-blur {
1171-
syntax: "*";
1172-
inherits: false;
1173-
}
1174-
@property --tw-backdrop-brightness {
1175-
syntax: "*";
1176-
inherits: false;
1177-
}
1178-
@property --tw-backdrop-contrast {
1179-
syntax: "*";
1180-
inherits: false;
1181-
}
1182-
@property --tw-backdrop-grayscale {
1183-
syntax: "*";
1184-
inherits: false;
1185-
}
1186-
@property --tw-backdrop-hue-rotate {
1187-
syntax: "*";
1188-
inherits: false;
1189-
}
1190-
@property --tw-backdrop-invert {
1191-
syntax: "*";
1192-
inherits: false;
1193-
}
1194-
@property --tw-backdrop-opacity {
1195-
syntax: "*";
1196-
inherits: false;
1197-
}
1198-
@property --tw-backdrop-saturate {
1199-
syntax: "*";
1200-
inherits: false;
1201-
}
1202-
@property --tw-backdrop-sepia {
1203-
syntax: "*";
1204-
inherits: false;
1205-
}
12061115
@property --tw-duration {
12071116
syntax: "*";
12081117
inherits: false;

‎js/app.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ document.addEventListener("DOMContentLoaded", () => {
88
}
99

1010
function removeDark() {
11+
document.querySelector('.loading').classList.remove('hidden');
12+
document.querySelector('.loading').classList.add('flex');
13+
1114
const textareaStart = document.getElementById('start');
1215
const textareaResult = document.getElementById('result');
1316

@@ -30,6 +33,11 @@ document.addEventListener("DOMContentLoaded", () => {
3033
.trim();
3134

3235
textareaResult.value = modifiedSnippet;
36+
37+
setTimeout(() => {
38+
document.querySelector('.loading').classList.add('hidden');
39+
document.querySelector('.loading').classList.remove('flex');
40+
}, 1000);
3341
}
3442

3543
function copyText(id) {

0 commit comments

Comments
 (0)