@sierra-95/svelte-scaffold 1.0.15 → 1.0.17

package/dist/components/Core/Alerts/Toast/toast.css

@@ -7,7 +7,7 @@
     border-bottom-right-radius: 5px;
     border-left: 6px solid var(--retval);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-    background-color: var(--background-secondary);
+    background-color: var(--menu-bg);
     z-index: 25;
 }
 #toast div:nth-child(1){

package/dist/components/Core/Form/Hr/hr.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let width: string = "100%";
-    export let color: string = "var(--text-tertiary)";
+    export let color: string = "var(--hr)";
 </script>
 
 <style>

package/dist/components/Core/Form/Input/input/input.svelte

@@ -4,6 +4,7 @@
   export let value: string | number = '';
   export let type: string = 'text';
   export let placeholder: string = '';
+  export let underline: boolean = false;
 </script>
 
 <label class="sierra-input" for={id}>{label}
@@ -13,5 +14,6 @@
     type={type} 
     bind:value={value}
     placeholder={placeholder}
+    class="{underline? 'underline-input':''}"
   />
 </label>

package/dist/components/Core/Form/Input/input/input.svelte.d.ts

@@ -17,6 +17,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     value?: string | number;
     type?: string;
     placeholder?: string;
+    underline?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Core/Form/Input/password/password.svelte

@@ -3,6 +3,7 @@
     export let label: string = '';
     export let value: string = '';
     export let placeholder: string = '';
+    export let underline: boolean = false;
     let show: boolean = false;
 </script>
 
@@ -15,6 +16,7 @@
             name={id}
             bind:value={value} 
             placeholder={placeholder}
+            class="{underline? 'underline-input':''}"
         />
         <button on:click|preventDefault={() => show = !show}>
             {#if show}

package/dist/components/Core/Form/Input/password/password.svelte.d.ts

@@ -16,6 +16,7 @@ declare const Password: $$__sveltets_2_IsomorphicComponent<{
     label?: string;
     value?: string;
     placeholder?: string;
+    underline?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Core/Menus/DropdownContainer/dropdown.svelte

@@ -63,7 +63,7 @@
     }
     #sierra-dropdown .dropdown-paper {
         position: absolute;
-        background-color: var(--background-secondary);
+        background-color: var(--menu-bg);
         border-radius: 5px;
         box-shadow: var(--box-shadow);
         min-width: 5px;

package/dist/components/Core/others/Previews/Audio/audio.svelte

@@ -42,7 +42,7 @@
 {:else} 
     <div style="display: flex; flex-wrap:wrap; gap: 1rem">
         {#each media.Audio as item (item.id || uuid())}
-            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px;display: flex; gap: 0.5rem; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); border-radius: 0.3rem; cursor: pointer;">
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px;display: flex; gap: 0.5rem; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); border-radius: 0.3rem; cursor: pointer; background-color: var(--background-tertiary);">
                 <button aria-label="Play or pause audio" on:click|stopPropagation={() => togglePlay(item.id)}>
                     <i class="fa {audioPlaying[item.id] ? 'fa-pause' : 'fa-play'}" aria-hidden="true"></i>
                 </button>

package/dist/components/Core/others/Previews/Image/image.svelte

@@ -10,7 +10,7 @@
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Images as item}
-            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem;cursor: pointer;">
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem;cursor: pointer; background-color: var(--background-tertiary);">
                 <img src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} alt={item} style="width: 100%; height: 100px; object-fit: cover;border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;" />
                 <h3 style="margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
                 {#if buttonTimes}

package/dist/components/Core/others/Previews/Video/video.svelte

@@ -10,7 +10,7 @@
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Videos as item}
-            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem; cursor: pointer;">    
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem; cursor: pointer; background-color: var(--background-tertiary);">    
                 <video on:click|stopPropagation src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} controls style="width: 100%; height: 100px; object-fit: cover; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;">
                     <track kind="captions" />
                 </video>

package/dist/components/Modules/Editor/Marks/Links/links.svelte

@@ -66,12 +66,14 @@
 </script>
 
 {#snippet addLinkContent()}
-    <Input label="Enter Link Text" id="link-text" bind:value={text}/>
-    <Input label="Enter Link URL" id="link-url" bind:value={url}/>
+<div class="sierra-flex-col" style="margin: 1rem 0rem; gap: 1rem;">
+    <Input underline label="Enter link text" id="link-text" bind:value={text}/>
+    <Input underline label="Enter link URL" id="link-url" bind:value={url}/>
+</div>
 {/snippet}
 
 {#snippet editLinkContent()}
-    <Input label="Edit Link URL" id="link-url" bind:value={url}/>
+    <Input underline label="Edit link URL" id="link-url" bind:value={url}/>
 {/snippet}
 
 <button aria-label="Link Button" on:click={ editor.isActive('link')? updateLink : newLink} title="Add/Edit Link">

package/dist/components/Modules/Editor/Nodes/Images/images.svelte

@@ -76,7 +76,9 @@
 	}
 </script>
 {#snippet formContent()}
-	<Input label="Enter Image URL" id="image-url" bind:value={value}/>
+<div style="margin: 1rem 0rem;">
+	<Input label="Enter Image URL" id="image-url" underline bind:value={value}/>
+</div>
 {/snippet}
 <DropdownContainer bind:open={openDropdown} width="150px">
 	{#snippet dropdownTrigger()}

package/dist/components/Modules/Editor/Nodes/Youtube/youtube.svelte

@@ -21,7 +21,9 @@
 </script>
 
 {#snippet addYoutubeContent()}
-    <Input label="Enter Youtube URL" id="youtube-url" bind:value={youtubeUrl}/>
+  <div style="margin: 1rem 0rem;">
+    <Input label="Enter Youtube URL" id="youtube-url" underline bind:value={youtubeUrl}/>
+  </div>
 {/snippet}
 
 <button 

package/dist/global.css

@@ -44,16 +44,19 @@
     --border-dark: hsl(220, 14%, 24%);
 
     /*Menus*/
-    --menu-item-hover-light: rgba(0, 0, 0, 0.06);
+    --menu-bg-light: var(--light-Theme);
+    --menu-bg-dark: var(--dark-secondary);
+    --menu-item-hover-light: rgba(0, 0, 0, 0.04);
     --menu-item-hover-dark:  rgba(255, 255, 255, 0.08);
-    --menu-item-active-light: rgba(0, 0, 0, 0.12);
+    --menu-item-active-light: rgba(0, 0, 0, 0.08);
     --menu-item-active-dark: rgba(255, 255, 255, 0.16);
 
     /*Inputs*/
    --input-border-light: #B0B0B0;
    --input-border-dark: #7A7F87;
 
-
+    --hr-light: #e5e5e5;
+    --hr-dark: #1f1f1f;
 
     /*Buttons*/
     --button-light-text: var(--light-Theme);
@@ -94,7 +97,9 @@ body[data-theme='light'] {
     --sierra-menu: var(--sierra-menu-light);
     --border: var(--border-light);
     --input-border: var(--input-border-light);
+    --hr: var(--hr-light);
     
+    --menu-bg: var(--menu-bg-light);
     --menu-item-hover: var(--menu-item-hover-light);
     --menu-item-active: var(--menu-item-active-light);
     --button-text: var(--button-light-text);
@@ -125,7 +130,9 @@ body, body[data-theme='dark']{
     --sierra-menu: var(--sierra-menu-dark);
     --border: var(--border-dark);
     --input-border: var(--input-border-dark);
+    --hr: var(--hr-dark);
     
+    --menu-bg: var(--menu-bg-dark);
     --menu-item-hover: var(--menu-item-hover-dark);
     --menu-item-active: var(--menu-item-active-dark);
     --button-text: var(--button-dark-text);
@@ -153,6 +160,13 @@ body, body[data-theme='dark']{
   background-color: transparent;
 }
 
+.sierra-input .underline-input{
+  border: none;
+  border-bottom: 1px solid var(--input-border);
+  border-radius: 0;
+  padding: 0.15rem 0;
+}
+
 .sierra-input button {
   position: absolute;
   right: 0.75rem;
@@ -188,6 +202,10 @@ button{
   transform: translateY(-5px);
 }
 
+.sierra-flex-col{
+  display: flex;
+  flex-direction: column;
+}
 /**Select, Input**/
 select:focus,
 input:focus {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.0.15",
+	"version": "1.0.17",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",