convert buttons to gray

master
Peter Babič 3 years ago
parent d7ca3d4bfb
commit 7e7f5fac79
Signed by: peter.babic
GPG Key ID: 4BB075BC1884BA40
  1. 6
      src/App.svelte
  2. 16
      src/Button.svelte
  3. 12
      src/LevelButton.svelte

@ -114,7 +114,7 @@
}
}
printSolutions(1)
printSolutions(-1)
}
const undo = () => {
@ -245,6 +245,10 @@
}
const printSolutions = maxSolutionCount => {
if (maxSolutionCount < 0) {
return
}
let depth = 0
let solutions = []
let gameovers = []

@ -1,6 +1,5 @@
<script>
export let icon = "restart"
export let color = "green"
export let icon = ""
const d = []
d["restart"] =
@ -13,9 +12,12 @@
<button
on:click
class="capitalize flex-auto inline-flex items-center rounded fill-current text-{color}-lighter px-2 py-2 border-0 border-b-2 bg-{color} border-{color}-darker active:text-{color} active:bg-{color}-darker">
<svg
class="w-5 h-5 mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"><path d={d[icon]} /></svg>{icon}
class="capitalize flex-auto inline-flex items-center rounded fill-current text-blue-darker px-2 py-2 border-0 border-b-2 bg-gray-lighter border-gray-darker active:text-gray active:bg-gray-darker active:border-t-2 active:border-green-lighter">
{#if icon}
<svg
class="w-5 h-5 mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"><path d={d[icon]} /></svg>
{/if}
{icon}
</button>

@ -6,17 +6,21 @@
</script>
<style>
.completed {
@apply text-blue-darker;
}
.active {
@apply font-bold;
@apply bg-blue-lighter text-blue-darker border-blue;
}
.completed {
@apply text-blue-darker;
.active:not(.completed) {
@apply text-gray-lighter;
}
</style>
<button
class="block py-1 rounded border-0 border-b-2 border-gray-darker bg-gray-lighter flex-1 text-center"
class="block py-2 rounded border-0 border-b-2 border-gray-darker bg-gray-lighter flex-1 text-center text-gray active:text-blue-lighter active:bg-gray-darker"
on:click
value={i}
class:completed={$completed.includes(i)}

Loading…
Cancel
Save