Skip to content

Commit b611b52

Browse files
YohnYohn
committed
Got the file validation and previewer lines up nicer
1 parent 7602474 commit b611b52

File tree

239 files changed

+5076
-3137
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

239 files changed

+5076
-3137
lines changed

‎css/pico.amber.css‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--pico-outline-width: 0.125rem;
2121
--pico-transition: 0.2s ease-in-out;
2222
--pico-spacing: 1rem;
23+
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
2324
--pico-typography-spacing-vertical: 1rem;
2425
--pico-block-spacing-vertical: var(--pico-spacing);
2526
--pico-block-spacing-horizontal: var(--pico-spacing);
@@ -2537,28 +2538,43 @@ input[type=file]:user-invalid::file-selector-button {
25372538
background-color: var(--pico-form-element-invalid-border-color);
25382539
}
25392540

2540-
.btn-file-rm {
2541-
margin-left: 10px;
2542-
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
2543-
border-color: var(--pico-form-element-invalid-border-color);
2544-
color: var(--pico-form-element-invalid-border-color);
2545-
}
2546-
25472541
/* File list when selected from the file input */
25482542
.file-list {
2549-
margin-left: 0;
2550-
padding-right: 0;
25512543
padding-left: 0;
25522544
}
25532545
.file-list li {
2546+
display: flex;
2547+
align-items: center;
2548+
justify-content: space-between;
25542549
list-style-type: none;
2550+
text-align: center;
25552551
}
25562552
.file-list li:nth-child(2n) {
25572553
background-color: #1b1b1b;
25582554
}
25592555
.file-list li:hover {
25602556
background-color: var(--pico-muted-border-color);
25612557
}
2558+
.file-list li .btn-file-rm {
2559+
display: inline-block;
2560+
width: 1rem;
2561+
height: 1rem;
2562+
margin-right: 10px;
2563+
padding: 0;
2564+
padding-top: calc(var(--pico-spacing) * 0.25);
2565+
border: none;
2566+
background-image: var(--pico-icon-red-close);
2567+
background-position: center;
2568+
background-size: 1rem;
2569+
background-repeat: no-repeat;
2570+
background-color: transparent;
2571+
color: var(--pico-element-invalid-border-color);
2572+
opacity: 0.5;
2573+
transition: opacity var(--pico-transition);
2574+
}
2575+
.file-list li .btn-file-rm:hover {
2576+
opacity: 1;
2577+
}
25622578

25632579
/**
25642580
* Accordion (<details>)

‎css/pico.amber.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.blue.css‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--pico-outline-width: 0.125rem;
2121
--pico-transition: 0.2s ease-in-out;
2222
--pico-spacing: 1rem;
23+
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
2324
--pico-typography-spacing-vertical: 1rem;
2425
--pico-block-spacing-vertical: var(--pico-spacing);
2526
--pico-block-spacing-horizontal: var(--pico-spacing);
@@ -2537,28 +2538,43 @@ input[type=file]:user-invalid::file-selector-button {
25372538
background-color: var(--pico-form-element-invalid-border-color);
25382539
}
25392540

2540-
.btn-file-rm {
2541-
margin-left: 10px;
2542-
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
2543-
border-color: var(--pico-form-element-invalid-border-color);
2544-
color: var(--pico-form-element-invalid-border-color);
2545-
}
2546-
25472541
/* File list when selected from the file input */
25482542
.file-list {
2549-
margin-left: 0;
2550-
padding-right: 0;
25512543
padding-left: 0;
25522544
}
25532545
.file-list li {
2546+
display: flex;
2547+
align-items: center;
2548+
justify-content: space-between;
25542549
list-style-type: none;
2550+
text-align: center;
25552551
}
25562552
.file-list li:nth-child(2n) {
25572553
background-color: #1b1b1b;
25582554
}
25592555
.file-list li:hover {
25602556
background-color: var(--pico-muted-border-color);
25612557
}
2558+
.file-list li .btn-file-rm {
2559+
display: inline-block;
2560+
width: 1rem;
2561+
height: 1rem;
2562+
margin-right: 10px;
2563+
padding: 0;
2564+
padding-top: calc(var(--pico-spacing) * 0.25);
2565+
border: none;
2566+
background-image: var(--pico-icon-red-close);
2567+
background-position: center;
2568+
background-size: 1rem;
2569+
background-repeat: no-repeat;
2570+
background-color: transparent;
2571+
color: var(--pico-element-invalid-border-color);
2572+
opacity: 0.5;
2573+
transition: opacity var(--pico-transition);
2574+
}
2575+
.file-list li .btn-file-rm:hover {
2576+
opacity: 1;
2577+
}
25622578

25632579
/**
25642580
* Accordion (<details>)

‎css/pico.blue.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.classless.amber.css‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--pico-outline-width: 0.125rem;
2121
--pico-transition: 0.2s ease-in-out;
2222
--pico-spacing: 1rem;
23+
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
2324
--pico-typography-spacing-vertical: 1rem;
2425
--pico-block-spacing-vertical: var(--pico-spacing);
2526
--pico-block-spacing-horizontal: var(--pico-spacing);
@@ -2371,28 +2372,43 @@ input[type=file]:user-invalid::file-selector-button {
23712372
background-color: var(--pico-form-element-invalid-border-color);
23722373
}
23732374

2374-
.btn-file-rm {
2375-
margin-left: 10px;
2376-
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
2377-
border-color: var(--pico-form-element-invalid-border-color);
2378-
color: var(--pico-form-element-invalid-border-color);
2379-
}
2380-
23812375
/* File list when selected from the file input */
23822376
.file-list {
2383-
margin-left: 0;
2384-
padding-right: 0;
23852377
padding-left: 0;
23862378
}
23872379
.file-list li {
2380+
display: flex;
2381+
align-items: center;
2382+
justify-content: space-between;
23882383
list-style-type: none;
2384+
text-align: center;
23892385
}
23902386
.file-list li:nth-child(2n) {
23912387
background-color: #1b1b1b;
23922388
}
23932389
.file-list li:hover {
23942390
background-color: var(--pico-muted-border-color);
23952391
}
2392+
.file-list li .btn-file-rm {
2393+
display: inline-block;
2394+
width: 1rem;
2395+
height: 1rem;
2396+
margin-right: 10px;
2397+
padding: 0;
2398+
padding-top: calc(var(--pico-spacing) * 0.25);
2399+
border: none;
2400+
background-image: var(--pico-icon-red-close);
2401+
background-position: center;
2402+
background-size: 1rem;
2403+
background-repeat: no-repeat;
2404+
background-color: transparent;
2405+
color: var(--pico-element-invalid-border-color);
2406+
opacity: 0.5;
2407+
transition: opacity var(--pico-transition);
2408+
}
2409+
.file-list li .btn-file-rm:hover {
2410+
opacity: 1;
2411+
}
23962412

23972413
/**
23982414
* Accordion (<details>)

‎css/pico.classless.amber.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/pico.classless.blue.css‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--pico-outline-width: 0.125rem;
2121
--pico-transition: 0.2s ease-in-out;
2222
--pico-spacing: 1rem;
23+
--pico-icon-red-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183.25, 63.5, 59)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
2324
--pico-typography-spacing-vertical: 1rem;
2425
--pico-block-spacing-vertical: var(--pico-spacing);
2526
--pico-block-spacing-horizontal: var(--pico-spacing);
@@ -2371,28 +2372,43 @@ input[type=file]:user-invalid::file-selector-button {
23712372
background-color: var(--pico-form-element-invalid-border-color);
23722373
}
23732374

2374-
.btn-file-rm {
2375-
margin-left: 10px;
2376-
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5);
2377-
border-color: var(--pico-form-element-invalid-border-color);
2378-
color: var(--pico-form-element-invalid-border-color);
2379-
}
2380-
23812375
/* File list when selected from the file input */
23822376
.file-list {
2383-
margin-left: 0;
2384-
padding-right: 0;
23852377
padding-left: 0;
23862378
}
23872379
.file-list li {
2380+
display: flex;
2381+
align-items: center;
2382+
justify-content: space-between;
23882383
list-style-type: none;
2384+
text-align: center;
23892385
}
23902386
.file-list li:nth-child(2n) {
23912387
background-color: #1b1b1b;
23922388
}
23932389
.file-list li:hover {
23942390
background-color: var(--pico-muted-border-color);
23952391
}
2392+
.file-list li .btn-file-rm {
2393+
display: inline-block;
2394+
width: 1rem;
2395+
height: 1rem;
2396+
margin-right: 10px;
2397+
padding: 0;
2398+
padding-top: calc(var(--pico-spacing) * 0.25);
2399+
border: none;
2400+
background-image: var(--pico-icon-red-close);
2401+
background-position: center;
2402+
background-size: 1rem;
2403+
background-repeat: no-repeat;
2404+
background-color: transparent;
2405+
color: var(--pico-element-invalid-border-color);
2406+
opacity: 0.5;
2407+
transition: opacity var(--pico-transition);
2408+
}
2409+
.file-list li .btn-file-rm:hover {
2410+
opacity: 1;
2411+
}
23962412

23972413
/**
23982414
* Accordion (<details>)

‎css/pico.classless.blue.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)