@aquera/nile-elements 1.0.1-beta-1.4 → 1.0.1-beta-1.6

package/src/nile-file-upload/nile-file-upload.css.ts

@@ -13,25 +13,20 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     display: inline-block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   * {
-    padding: var(--nile-spacing-none, var(--ng-spacing-none));
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: 0px;
+    margin: 0px;
     box-sizing: border-box;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body))
   }
 
   .wrapper {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    gap: 18px;
-    height: auto;
+    align-items: flex-start;
+    width: min-content;
   }
 
   input {
@@ -39,28 +34,45 @@ export const styles = css`
   }
 
   .horizontal-div {
-    height: var(--nile-height-60px, var(--ng-height-60px));
+    margin-bottom: 10px;
+    height: 62px;
     max-width: 648px;
+    width: 648px;
     min-width: 230px;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-lg, var(--ng-spacing-lg));
+    padding: 12px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-white-base);
   }
 
   .hover-border {
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
-      var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    border-color: var(--nile-colors-primary-600);
+  }
+
+  .title {
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 454px;
+    width: 100%;
+  }
+
+  .subtitle {
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-500);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 454px;
   }
 
   .vertical-div {
@@ -68,24 +80,25 @@ export const styles = css`
     height: auto;
     min-width: 240px;
     width: 240px;
-    display: flex !important;
+    display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    padding: var(--nile-spacing-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-spacing-lg, var(--ng-spacing-3xl));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    padding: 12px;
+    border-radius: var(--nile-radius-radius-xs);
+    color: var(--nile-colors-dark-900);
+    border: 1px dashed var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
     position: relative;
+    margin-bottom: 10px;
   }
 
   .vertical-div:hover {
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) var(--nile-border-style-dashed, var(--ng-border-style-solid)) var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    border-color: var(--nile-colors-blue-500);
   }
 
   .outer-div-border {
-    border: var(--nile-border-width-1, var(--ng-border-width-2)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .inner-div {
@@ -97,47 +110,67 @@ export const styles = css`
   }
 
   .content {
-    display: flex;
+    display: flex;  
     flex-direction: column;
     justify-content: center;
     gap: 8px;
   }
 
   .content h4 {
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    margin: 0px;
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 454px;
   }
-
+      
   .content p {
-    margin: var(--nile-spacing-none, var(--ng-spacing-none));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    margin: 0px;
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-neutral-700);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 454px;
+  }
+
+  ::slotted(img), ::slotted(nile-icon), ::slotted(video) {
+    --nile-svg-height: 24px !important ;
+    --nile-svg-width: 24px !important ;
+    height:42px;
+    width: 42px;
+    object-fit: cover;
+  }
+
+  .browse-file-button {
+    cursor: pointer;
   }
 
   /*  DISABLED STATE */
   .disable {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
-    opacity: var(--nile-opacity-50, var(--ng-opacity-50));
+    background-color: var(--nile-colors-dark-200);
+    opacity: 0.8;
+    cursor: not-allowed;
+    color: var(--nile-colors-neutral-500);
     pointer-events: none;
   }
 
   /* DRAGGING */
   .dragging {
-    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-primary));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-dashed, var(--ng-border-style-solid))
-      var(--nile-colors-primary-600, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-primary-600);
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 18px;
-    color: var(--nile-colors-blue-700, var(--ng-colors-fg-primary-900));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular), var(--ng-font-weight-regular);
+    color: var(--nile-colors-blue-700);
+    font-size: var(--nile-type-scale-3);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .icons-container {
@@ -168,12 +201,9 @@ export const styles = css`
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: 1px solid var(--nile-colors-neutral-400)
   }
-
+  
   .uploading:hover {
     border-color: var(--nile-colors-neutral-400);
   }
@@ -189,8 +219,8 @@ export const styles = css`
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    font-size: var(--nile-type-scale-2);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .progress-bar-container p {
@@ -198,20 +228,17 @@ export const styles = css`
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-type-scale-1);
+    color: var(--nile-colors-dark-500);
   }
 
   /* PREVIEW STATE */
   .preview {
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400);
   }
 
   .preview-inner {
@@ -225,16 +252,13 @@ export const styles = css`
   }
 
   .preview-image-container img {
-    height: var(--nile-height-42px, var(--ng-height-42px));
-    width: var(--nile-width-42px, 42px); // check it once
+    height: 42px;
+    width: 42px;
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xl));
-    border:
-      var(--nile-border-width-1, var(--ng-border-width-1))
-      var(--nile-border-style-solid, var(--ng-border-style-solid))
-      var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-400);
   }
-
+  
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -260,7 +284,6 @@ export const styles = css`
     cursor: pointer;
   }
 
-
   /* NO PREVIEW STATE */
   .no-preview {
     border: 1px solid var(--nile-colors-neutral-400);
@@ -291,7 +314,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-
+  
   .preview-file-info {
     width: 100%;
     display: flex;
@@ -318,7 +341,7 @@ export const styles = css`
   }
 
   /* ERROR STATE */
-
+  
   .error {
     border: 1px solid var(--nile-colors-neutral-400);
   }
@@ -349,7 +372,7 @@ export const styles = css`
     height: 40px;
     width: 40px;
   }
-
+  
   .file-info {
     width: 100%;
     display: flex;
@@ -394,21 +417,26 @@ export const styles = css`
     gap: 8px;
   }
 
-  .content-container h4 {
-    font-weight: var(--nile-font-weight-regular);
-  }
-
-  .content-container p:first-child {
-    margin: 0px;
+  .content-container div.title {
     font-size: var(--nile-type-scale-3);
     font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-dark-900);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
   }
 
-  .content-container p:last-child {
-    margin: 0px;
+  .content-container div.subtitle {
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-500);
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 222px;
   }
 
   /* Drag State */
@@ -543,7 +571,7 @@ export const styles = css`
     max-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-radius-xs);
     scrollbar-width: none;
     padding: 12px;
   }
@@ -560,12 +588,37 @@ export const styles = css`
   .upload-error {
     font-size: var(--nile-type-scale-2);
     font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-red-500);
+    color: var(--nile-colors-red-700);
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: var(--nile-spacing-one-half-x);
   }
+
+  .upload-error > nile-tooltip > span {
+    color: var(--nile-colors-red-700);
+    white-space: nowrap;
+    text-align: left;
+    max-width: 560px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .vertical-upload-error {
+    display: flex;
+    gap: 4px;
+  }
+
+  .vertical-upload-error nile-tooltip span, .vertical-upload-error span {
+    color: var(--nile-colors-red-700);
+    white-space: nowrap;
+    text-align: left;
+    width: 222px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--nile-type-scale-2);
+    display: inline-block;
+  }
 `;
 
-export default [styles];
+export default [styles];