@everymatrix/casino-search 1.5.2 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-search",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c0184ad3edaaa8f9ce54289cf544bb0589ef1fbe"
+  "gitHead": "455c9a0d14fef23d3698fbea37042c69e3aeed24"
 }

package/src/CasinoSearch.svelte

@@ -329,22 +329,20 @@
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
       
 </script>
-  <div class="{(getDevice(userAgent) !== 'PC') ? 'CasinoSearch' : 'CasinoSearchPc'}" bind:this={customStylingContainer}>
-    <div class="{(getDevice(userAgent) !== 'PC') ? 'Search' : 'SearchPc'}">
-      <div class="{(getDevice(userAgent) !== 'PC') ? 'SearchIcon' : 'SearchIconPc'}">
+  <div class="{(getDevice(userAgent) !== 'PC') ? '' : 'Desktop'} CasinoSearch" bind:this={customStylingContainer}>
+    <div class="Search">
+      <div class="SearchIcon">
         <svg width="14" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m10.48 10.985 2.21 2.373"/>
           <circle cx="6.5" cy="6.5" r="5.75" stroke="#212121" stroke-width="1.5"/>
         </svg>
       </div>
-      <div class="{(getDevice(userAgent) !== 'PC') ? 'SearchContainer' : 'SearchContainerPc'}">
-        <input class="SearchInput" type="search" placeholder="{$_('Translations.placeHolderSearchGames')}" bind:value={searchValue} on:focus={onFocus} bind:this={searchElement}>
+        <input class="SearchInput {searchCancelled ? '' : 'SearchAnimation'}" type="search" placeholder="{$_('Translations.placeHolderSearchGames')}" bind:value={searchValue} on:focus={onFocus} bind:this={searchElement}>
         <span on:click={() => clearSearch()} class="SearchClearButton { searchValue.length != 0 ? '' : 'NotVisible'}">
           <svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="m1.45 1.5 8.1 8M1.45 9.5l8.1-8" stroke="#717171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </span>
-      </div>
       <small on:click={() => cancelSearch()} class="SearchCancelButton {searchCancelled ? 'NotVisible' : ''}">
         {$_('Translations.cancel')}
       </small>
@@ -353,14 +351,14 @@
       <p>{$_('Translations.loading')}</p>
     {:else}
       {#if searchActive == true && searchValue.length < 2}
-        <p class="{(getDevice(userAgent) !== 'PC') ? 'SearchMessage' : 'SearchMessagePc'}">{$_('Translations.recentSearch')}</p>
+        <p class="SearchMessage">{$_('Translations.recentSearch')}</p>
           {#if searchArray.length == 0}
           <div class="ResultsContainerError">
-            <p class="{(getDevice(userAgent) !== 'PC') ? 'SearchMessage' : 'SearchMessagePc'}">{$_('Translations.noRecentSearches')}</p>
+            <p class="SearchMessage">{$_('Translations.noRecentSearches')}</p>
           </div>
           {/if}
       {:else if searchArray.length != 0} 
-        <p class="{(getDevice(userAgent) !== 'PC') ? 'SearchMessage' : 'SearchMessagePc'}">{$_('Translations.searchResult')}</p>
+        <p class="SearchMessage">{$_('Translations.searchResult')}</p>
       {/if} 
       <div class="SearchResultsContainer {searchActive == true ? '': 'NotVisible'}">
         {#if searchCancelled === false}
@@ -391,7 +389,7 @@
         {/if}
         {#if searchValue.length >= 2 && searchArray.length == 0}
           <div class="ResultsContainerError">
-            <p class="{(getDevice(userAgent) !== 'PC') ? 'SearchMessage' : 'SearchMessagePc'}">{$_('Translations.notFound')}</p>
+            <p class="SearchMessage">{$_('Translations.notFound')}</p>
             <p>{$_('Translations.notFoundText')}</p>
           </div>
         {/if} 
@@ -421,44 +419,22 @@
     box-sizing: border-box;
   }
 
-  .CasinoSearchPc{
-    margin: 30px 16px;
-  }
-
   .CasinoSearch {
     margin: 30px 16px;
   }
 
-  .SearchPc{
-    display: flex;
-    align-items: center;
-    position: relative;
-    margin-bottom: 20px;
-    left:19%;
-  }
-
   .Search {
     display: flex;
     align-items: center;
     position: relative;
-    justify-content: space-between;
     margin-bottom: 20px;
-    
-    &IconPc{
-      position: absolute;
-      left: 20px;
-      z-index: 1;
-
-      svg {
-        height: 14px;
-        width: 13px;
-      }
-    }
 
     &Icon{
       position: absolute;
-      left: 5%;
+      left: 15px;
+      top: 50%;
       z-index: 1;
+      transform: translateY(-50%);
 
       svg {
         height: 14px;
@@ -466,16 +442,6 @@
       } 
     }
 
-    &ContainerPc{
-      width: 60%;
-      position: relative;
-    }
-
-    &Container { 
-      width: 100%;
-      position: relative;
-    }
-
     &Input {
       border-radius: 4px;
       border: 1px solid $color-light-grey;
@@ -484,7 +450,7 @@
       font-size: 16px;
       font-weight: 300;
       padding: 14px 5px 14px 46px;
-      width:100%;
+      width: 100%;
     
       &::placeholder {
         color: $color-grey;
@@ -507,7 +473,7 @@
     &ClearButton{
       position: absolute;
       top: 30%;
-      right: 15px;
+      right: 65px;
       cursor: pointer;
     }
 
@@ -518,14 +484,6 @@
       cursor: pointer;
     }
 
-    &MessagePc {
-      font-size: 18px;
-      font-weight: 600;
-      margin: 24px 0;
-      color: #FFFFFF;
-      margin-top:90px
-    }
-
     &Message {
       font-size: 18px;
       font-weight: 600;
@@ -556,7 +514,65 @@
   }
 
   .NotVisible {
-    display: none;
+     display: none;
+  }
+
+  .Desktop {
+
+    .NotVisible {
+      opacity: 0;
+      visibility: hidden;
+      display: inline;
+    }
+
+    &.CasinoSearch {
+      margin: 30px 16px;
+    }
+
+    .Search {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &Icon {
+        position: relative;
+        top: 0;
+        left: 0;
+        transform: translateY(0);
+        margin-right: -28px;
+      }
+
+      &Input {
+        width: 50%;
+        transition: all 0.2s cubic-bezier(1, 0, 0.46, 1.03);
+      }
+
+      &ClearButton{
+        position: relative;
+        top: 0;
+        right: 0;
+        margin-left: -23px;
+      }
+
+      &CancelButton {
+        transition: all 0.2s cubic-bezier(1, 0, 0.46, 1.03);
+        margin-left: 20px;
+      }
+
+      &Animation {
+        width: 60%;
+        outline: none;
+        box-shadow: 0 5px 7px rgba(0,0,0,0.25);
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+     
+      &Message {
+        font-size: 18px;
+        font-weight: 600;
+        margin: 24px 0;
+        margin-top:90px
+      }
+    }
   }
 
 </style>