-- upload-box implement from UI project

- missing thin close/delete button and thin v- icon
- add utility class section

app/views/console/storage/index.phtml

@@ -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>

public/styles/comps/upload-box.less

@@ -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); }
+}

public/styles/default.less

@@ -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;

public/styles/utilities.less

@@ -0,0 +1 @@
+.u-margin-inline-end-16{margin-inline-end:16px!important;}