Switch to svelte class directive

src/components/Cart.svelte

@@ -109,7 +109,7 @@
 				{/each}
 			</table>
 		</div>
-		<div class="price {premiums ? "has_premium" : "no_premium"}">
+		<div class="price" class:has_premium={premiums>0} class:no_premium={premiums==0}>
 			{#if premiums}
 				<div class="price__total">Summe: {(total/100).toFixed(2)}€</div>
 				<div class="price__premium">Zuschlag: {(premiums/100).toFixed(2)}€</div>

src/components/CategoryNavigation.svelte

@@ -30,7 +30,7 @@
 
 <div class="container">
 	{#each elements as {element, name}, index}
-		<div class="element {index === activeIndex ? 'active' : ''}" on:click={()=>onClick(element)}>
+		<div class="element" class:active={index===activeIndex} on:click={()=>onClick(element)}>
 			{name}
 		</div>
 	{/each}

src/components/PinCodeInput.svelte

@@ -80,16 +80,16 @@
 </style>
 
 <div class="pad">
-	<div class="input {disabled ? "disabled": ""}" on:click={clear}>{#if showLast}{"*".repeat(code.length-1)}{code[code.length-1]}{:else}{"*".repeat(code.length)}{/if}</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("1")}>1</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("2")}>2</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("3")}>3</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("4")}>4</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("5")}>5</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("6")}>6</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("7")}>7</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("8")}>8</div>
-	<div class="button {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("9")}>9</div>
-	<div class="button two-col {disabled ? "disabled" : ""}" on:click={()=>disabled||onPress("0")}>0</div>
-	<div class="button {code && !disabled ? "" : "disabled"}" on:click={()=>(disabled||(code&&submit(code),clear()))}>Login</div>
+	<div class="input" class:disabled on:click={clear}>{#if showLast}{"*".repeat(code.length-1)}{code[code.length-1]}{:else}{"*".repeat(code.length)}{/if}</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("1")}>1</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("2")}>2</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("3")}>3</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("4")}>4</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("5")}>5</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("6")}>6</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("7")}>7</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("8")}>8</div>
+	<div class="button" class:disabled on:click={()=>disabled||onPress("9")}>9</div>
+	<div class="button two-col" class:disabled on:click={()=>disabled||onPress("0")}>0</div>
+	<div class="button" class:disabled={!code||disabled} on:click={()=>(disabled||(code&&submit(code),clear()))}>Login</div>
 </div>