@likable-hair/svelte 0.0.22 → 0.0.23

package/buttons/Button.svelte

@@ -51,6 +51,7 @@ import Icon from '../media/Icon.svelte';
 
   .button {
     overflow: hidden;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
   }
 
   .button-default {

package/forms/Textfield.svelte

@@ -1,4 +1,4 @@
-<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderRadius = "5px", borderColor = undefined;
+<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderRadius = "5px", borderColor = undefined, backgroundColor = undefined, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -111,6 +111,12 @@ $: if (!!labelElement) {
     aria-hidden="true"
     style:border-radius={borderRadius}
     style:border-color={borderColor}
+    style:background-color={backgroundColor}
+    style:padding={padding}
+    style:padding-left={paddingLeft}
+    style:padding-right={paddingRight}
+    style:padding-bottom={paddingBottom}
+    style:padding-top={paddingTop}
     class="fieldset"
     class:fieldset-outlined={variant == 'outlined'}
     class:fieldset-boxed={variant == 'boxed'}
@@ -133,7 +139,9 @@ $: if (!!labelElement) {
             <slot name="prepend-inner"></slot>
           </div>
           <input 
+            style:background-color={backgroundColor}
             style:color={textColor}
+            style:font-size={fontSize}
             id={inputId} 
             class="input-outlined"
             type="text"
@@ -158,7 +166,9 @@ $: if (!!labelElement) {
           <slot name="prepend-inner"></slot>
         </div>
         <input
+          style:background-color={backgroundColor}
           style:color={textColor}
+          style:font-size={fontSize}
           id={inputId}
           class="input-boxed"
           type="text"

package/forms/Textfield.svelte.d.ts

@@ -10,6 +10,13 @@ declare const __propDef: {
         textColor?: string;
         borderRadius?: string;
         borderColor?: string;
+        backgroundColor?: string;
+        padding?: string;
+        paddingLeft?: string;
+        paddingRight?: string;
+        paddingBottom?: string;
+        paddingTop?: string;
+        fontSize?: string;
     };
     events: {
         change: Event;

package/navigation/Navigator.svelte

@@ -33,6 +33,7 @@ function handleItemClick(item) {
     font-size: 18px;
     position: relative;
     white-space: nowrap;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
   }
 
   .link::before,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",

package/timeline/SimpleTimeLine.svelte

@@ -29,7 +29,7 @@ import Icon from '../media/Icon.svelte';
     >
       <div
         style:flex-direction={singleSided || index % 2 == 0 ? 'row' : 'row-reverse'}
-        style:justify-content={singleSided || index % 2 == 0 ? 'start' : 'end'}
+        style:justify-content={singleSided || index % 2 == 0 ? 'start' : 'flex-end'}
         class="time-line-body"
       >
         <slot name="item" item={item}>
@@ -159,7 +159,7 @@ import Icon from '../media/Icon.svelte';
   .vertical-bottom-container {
     display: flex;
     flex-direction: column;
-    justify-content: end;
+    justify-content: flex-end;
     height: 100%;
   }
 </style>