@rws-framework/client 2.20.4 → 2.21.0

package/src/components/rws/uploader/styles/layout.scss

@@ -1,131 +0,0 @@
-@import "@rws-mixins";
-
-//vars
-$upl_secondary: var(--rws-uploader-secondary, #CCC);
-$upl_bg: var(--rws-uploader-bg, #424242);
-$upl_border: var(--rws-uploader-border, #FFF);
-
-$upl_primary: var(--rws-uploader-primary, #EE2375);
-
-$upl_text: var(--rws-uploader-text, #000);
-
-$upl_btn_text: var(--rws-uploader-btn-text, #000);
-$upl_btn_bg: var(--rws-uploader-btn-bg, #CCC);
-$upl_btn_border: var(--rws-uploader-btn-border, #000);
-
-rws-progress {
-    --accent-foreground-rest: $upl_primary;
-}
-
-//styles
-.upload_area {    
-
-    color: $upl_text;
-
-    padding: 25px;
-
-    
-    *{
-        box-sizing: border-box;
-    }
-
-    section{
-        &::after{
-            content: '';
-            display: table;
-            clear: both;
-        }
-
-        display: block;
-        contain: content;
-        box-sizing: border-box;
-        background: $upl_bg;
-        border-radius: 10px;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
-
-        .drag-and-drop {
-            @include grid-container();
-            @include grid-flex-align-items(center, center);
-            
-            border: 4px dashed $upl_border; // Adjust color as needed
-            width: 100%; // Adjust width as needed
-            height: 100%; // Adjust height as needed
-            padding: 30px;
-
-            margin-bottom: 30px;
-
-            text-align: center;
-            cursor: pointer;
-
-            .file-block {
-                border: 1px solid $upl_border;
-
-                font-size: 10px;
-                padding: 15px;
-                border-radius: 15px;
-
-                .close-btn {
-                    border: 1px solid $upl_border;
-                    padding: 5px;
-                    font-weight: bold;
-                    margin-left: 10px;
-                    border-radius: 15px;
-                }
-            }
-
-            &.hover{
-                position: relative;
-
-                &:before{
-                    content: '';
-                    background: $upl_secondary;
-                    opacity: 0.4;
-
-                    position: absolute;
-
-                    width: 100%;
-                    height: 100%;
-                }
-
-                p{
-                    font-weight: bold;
-                }
-            }        
-        }
-
-        h3{
-            padding: 0 15px;
-            color: $upl_text;
-        }
-
-        article {
-            padding: 15px;
-        }
-        
-
-        button {
-            background: $upl_btn_bg;
-            color: $upl_btn_text;
-            font-size: 14px;
-            padding: 10px;        
-            box-shadow: none;
-            border-radius: 5px;
-            border-style: solid;
-            border-color: $upl_btn_border;
-            border-width: 1px;
-
-            fill: currentcolor;
-            cursor: pointer;        
-
-            &.outline{
-                background: none;                
-            }
-
-            &.next{
-                float: right;
-                margin-right: 10px;
-                margin-bottom: 10px;
-            }            
-        }
-    }    
-}

package/src/components/rws/uploader/template.html

@@ -1,17 +0,0 @@
-<div class="upload_area">
-    <section>
-        <h3>Upload file</h3>
-        <rws-progress :value="${x => x.uploadProgress}" min="1" max="100"></rws-progress>
-        <article>
-            <div class="drag-and-drop"> 
-                <div @click="${x => !x.chosenFile ? x.onChoose() : (() => {})()}" class="upl-background"></div>
-                ${T.when(x => !x.chosenFile, T.html`<p @click="${x => !x.chosenFile ? x.onChoose() : (() => {})()}" class="dropinfo">Drag and drop here to upload</p>`)}
-                ${T.when(x => x.chosenFile, T.html`<div class="file-block">${ x => x.chosenFile.name} <span @click="${ x => x.removeFile() }" class="close-btn">X</span></div>`)}
-            </div>
-            <div class="upl-controls">
-                <button @click="${ x => x.onChoose() }" class="outline">Choose file</button>                
-            </div>
-        </article>
-        <button @click="${ x => x.onUploadStart() }" :disabled="${ x => x.chosenFile ? false : true }" appearance="accent" class="next">Upload</button>
-    </section>
-</div>