-- upload-box implement from UI project
- missing thin close/delete button and thin v- icon - add utility class section
This commit is contained in:
parent
79412e022d
commit
42b46c4962
6 changed files with 175 additions and 2 deletions
|
@ -211,3 +211,61 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- for Torsten TEMP LOCATION-->
|
||||
<section class="upload-box">
|
||||
<div class="upload-box-header">
|
||||
<h4 class="upload-box-title">
|
||||
<span class="text">Uploading files</span>
|
||||
<span class="amount">3</span>
|
||||
</h4>
|
||||
<button class="icon-button is-open" aria-label="toggle upload box"><span class="icon-down-open" aria-hidden="true"></span></button>
|
||||
<button class="icon-button" aria-label="close upload box"><span class="icon-cancel" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<div class="upload-box-content is-open">
|
||||
<ul class="upload-box-list">
|
||||
<li class="upload-box-item">
|
||||
<div class="upload-image u-margin-inline-end-16">
|
||||
<div class="progress"
|
||||
style="--progress-value:20"
|
||||
role="progressbar"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<span class="icon">%</span>
|
||||
</div>
|
||||
<label for="file1" class="file-name">hello.mp4</label>
|
||||
<button class="icon-button" aria-label="Uploading"><span class="icon-cancel"></span></button>
|
||||
</li>
|
||||
<li class="upload-box-item">
|
||||
<div class="upload-image u-margin-inline-end-16">
|
||||
<div class="progress"
|
||||
style="--progress-value:70"
|
||||
role="progressbar"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<span class="icon">%</span>
|
||||
</div>
|
||||
<label for="file1" class="file-name">hello.mp4</label>
|
||||
<button class="icon-button" aria-label="Uploading"><span class="icon-cancel"></span></button>
|
||||
</li>
|
||||
<li class="upload-box-item">
|
||||
<div class="upload-image is-finished u-margin-inline-end-16">
|
||||
<div class="progress"
|
||||
style="--progress-value:100"
|
||||
role="progressbar"
|
||||
aria-valuenow="20"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
<span class="icon">%</span>
|
||||
</div>
|
||||
<label for="file1" class="file-name">hello.mp4</label>
|
||||
<button class="icon-button is-success" aria-label="Uploading"><span class="icon-ok"></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
112
public/styles/comps/upload-box.less
Normal file
112
public/styles/comps/upload-box.less
Normal file
|
@ -0,0 +1,112 @@
|
|||
.upload-box {
|
||||
--p-header-text-color:var(--config-color-background-fade);
|
||||
--p-header-bg-color:var(--config-color-normal);
|
||||
|
||||
--p-content-text-color:var(--config-color-normal);
|
||||
--p-content-bg-color:var(--config-color-background-fade);
|
||||
|
||||
--p-border-color:var(--config-modal-note-border);
|
||||
|
||||
|
||||
--box-shadow:0 10px 10px rgba(0, 0, 0, 0.05);
|
||||
--border-radius:6px;
|
||||
--transition:0.2s;
|
||||
|
||||
position:fixed; z-index:1; overflow:hidden; min-width:285px;
|
||||
box-shadow:var(--box-shadow);
|
||||
border-radius:var(--border-radius);
|
||||
font-size:14px; line-height:1;
|
||||
*{all:unset; display:revert;}
|
||||
&-header {
|
||||
display:flex; padding:16px; padding-inline-end:21px;
|
||||
color:var(--p-header-text-color); background-color:var(--p-header-bg-color);
|
||||
.icon-button { margin-inline-start:16px; }
|
||||
}
|
||||
&-title {
|
||||
align-self:center; margin-inline-end:auto; margin-block-end:0;
|
||||
.amount {
|
||||
&::before { content:"("; }
|
||||
&::after { content:")"; }
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
background-color:var(--p-content-bg-color); color:var(--p-content-text-color);
|
||||
height:0; overflow:hidden;
|
||||
transition:var(--transition);
|
||||
&.is-open {height:200px; /* consider to change to rem */}
|
||||
}
|
||||
&-list {}
|
||||
&-item {
|
||||
display:flex; padding:13px 20px;
|
||||
.file-name { @include trim; align-self:center; margin-inline-end:auto; }
|
||||
.icon-button{ align-self:center; margin-inline-start:16px;}
|
||||
&:not(:last-child) { border-bottom:solid 1px var(--p-border-color); }
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media @phones { inset-inline:16px; inset-block-end:20px; }
|
||||
@media @tablets, @desktops { inset-inline-end:24px; inset-block-end:24px; }
|
||||
|
||||
/* dark theme */
|
||||
:root .theme-dark &{
|
||||
--p-header-text-color:#fff;
|
||||
--p-header-bg-color:var(--config-color-background-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-image {
|
||||
@upload-image-size-default: 40px;
|
||||
--p-upload-image-size:var(--upload-image-size, @upload-image-size-default);
|
||||
--p-upload-bg-color:var(--config-color-fade-super);
|
||||
--p-upload-icon-color:var(--config-color-fade-light);
|
||||
|
||||
position:relative; display:grid; place-content:center;
|
||||
width:var(--p-upload-image-size);
|
||||
height:var(--p-upload-image-size);
|
||||
background-color:var(--p-upload-bg-color);
|
||||
color:var(--p-upload-icon-color);
|
||||
border-radius:50%;
|
||||
|
||||
.icon{position:relative; z-index:20;}
|
||||
.progress {
|
||||
--progress:var(--progress-value, 0);
|
||||
--zero-value: 0 0% 0% / 0%;
|
||||
position:absolute; z-index:10; inset:0; border-radius:50%;
|
||||
background:
|
||||
~"radial-gradient(
|
||||
var(--p-upload-bg-color) 0%,
|
||||
var(--p-upload-bg-color) 64%,
|
||||
transparent 64.01%,
|
||||
transparent 100%),
|
||||
|
||||
conic-gradient(
|
||||
hsl(194 66% 50%) 0%,
|
||||
hsl(97 66% 50%) calc(var(--progress) * 1%),
|
||||
hsl(var(--zero-value)) calc(var(--progress) * 1%),
|
||||
hsl(var(--zero-value)) 100%)";
|
||||
}
|
||||
&.is-finished {
|
||||
--p-upload-icon-color:var(--config-color-fade);
|
||||
.progress{ display:none; }
|
||||
}
|
||||
/* dark theme */
|
||||
:root .theme-dark &{
|
||||
--p-upload-bg-color:var(--config-color-background-dark);
|
||||
--p-upload-icon-color:var(--config-color-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
--p-icon-button-size:var(--icon-button-size, 20px);
|
||||
|
||||
width:var(--p-icon-button-size);
|
||||
height:var(--p-icon-button-size);
|
||||
font-size:var(--p-icon-button-size);
|
||||
transition:var(--transition);
|
||||
line-height:1; text-align:center; flex-shrink:0; cursor:pointer;
|
||||
>*::before{margin:0;}
|
||||
&.is-open { transform:rotate(180deg); }
|
||||
&.is-success { color:var(--config-color-success); }
|
||||
&:focus, &:hover{ background-color:unset; }
|
||||
&:focus-visible{ outline:dashed 1px var(--config-color-primary); }
|
||||
}
|
|
@ -20,6 +20,7 @@ img[src=""] {
|
|||
@import "polyfills";
|
||||
@import "forms";
|
||||
@import "ide";
|
||||
@import "utilities";
|
||||
@import "scopes/console";
|
||||
@import "scopes/home";
|
||||
@import "comps/alerts";
|
||||
|
@ -33,6 +34,7 @@ img[src=""] {
|
|||
@import "comps/modal";
|
||||
@import "comps/scroll";
|
||||
@import "comps/tabs";
|
||||
@import "comps/upload-box";
|
||||
|
||||
html {
|
||||
padding: 0;
|
||||
|
|
1
public/styles/utilities.less
Normal file
1
public/styles/utilities.less
Normal file
|
@ -0,0 +1 @@
|
|||
.u-margin-inline-end-16{margin-inline-end:16px!important;}
|
Loading…
Reference in a new issue