Konwersja do z Scss do Sass

damjes · Jan 8, 2024 · 417307f · 417307f
1 parent 0c3c0df
commit 417307f
Show file tree

Hide file tree

Showing 18 changed files with 165 additions and 197 deletions.
diff --git a/src/komponenty/Gra.sass b/src/komponenty/Gra.sass
@@ -0,0 +1,29 @@
+$promien: 0.5em
+
+.gra
+	text-align: center
+	margin: 0 auto
+	user-select: none
+
+	.przyciskResetu
+		&.jeszczeRaz
+			background-color: green
+
+		&.naPewno
+			background-color: darkorange
+
+	@media screen and (max-height: 750px)
+		font-size: 0.75em
+
+	@media screen and (max-height: 600px)
+		font-size: 0.5em
+
+	.wlacznikTrybuTrudnego label
+		margin: 0.5em
+		// usunąć wraz z usunięciem debugowania (więcej niż 1 checkbox)
+
+	.opisRozwiazania
+		margin-bottom: 0.5em
+
+	&:focus
+		outline: none
diff --git a/src/komponenty/Gra.scss b/src/komponenty/Gra.scss
diff --git a/src/komponenty/Gra.tsx b/src/komponenty/Gra.tsx
@@ -6,7 +6,7 @@ import Słowo from './Slowo'
 
 import listaSłów from '../slownik'
 
-import './Gra.scss'
+import './Gra.sass'
 
 function losowyElement<T>(tablica: T[]): T {
 	const indeks = Math.floor(Math.random() * tablica.length)

diff --git a/src/komponenty/Klawiatura.sass b/src/komponenty/Klawiatura.sass
@@ -0,0 +1,9 @@
+.klawiatura
+	margin-top: 3em
+	margin-left: auto
+	margin-right: auto
+
+	.wiersz
+		display: flex
+		flex-direction: row
+		justify-content: center
diff --git a/src/komponenty/Klawiatura.scss b/src/komponenty/Klawiatura.scss
diff --git a/src/komponenty/Klawiatura.tsx b/src/komponenty/Klawiatura.tsx
@@ -1,5 +1,5 @@
 import Literka from './Literka'
-import './Klawiatura.scss'
+import './Klawiatura.sass'
 
 function ustalKolorek(literka: string, wypróbowane: string, rozwiązanie: string) {
 	if(wypróbowane.includes(literka)) {

diff --git a/src/komponenty/Literka.sass b/src/komponenty/Literka.sass
@@ -0,0 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap')
+
+$rozmiar: 2em
+$rozmiarKlawisza: 2rem
+
+.literka
+	display: flex
+	justify-content: center
+	align-items: center
+	box-sizing: border-box
+	width: $rozmiar
+	height: $rozmiar
+	border: 0.1em solid gray
+	border-radius: 0.25em
+	margin: 0.1em
+	text-transform: capitalize
+	font-weight: 700
+	font-family: Montserrat, Helvetica, 'Open Sans', sans-serif
+
+	&.dobrze
+		background-color: lightgreen
+
+	&.zle
+		background-color: lightgray
+
+	&.przesunieta
+		background-color: khaki
+
+	&.dostepna,
+	&.nieznana
+		background-color: whitesmoke
+
+	&.kursor
+		box-shadow: 0 0 0.2em yellow
+
+	&.klawisz
+		width: $rozmiarKlawisza
+		height: $rozmiarKlawisza
+		font-size: 1.2rem
+		&.wypustka
+			text-decoration: underline
+
+		&:hover
+			background-color: lightgray
+
+	&.enter
+		background-color: green
+
+		&:hover
+			background-color: darkgreen
+
+	&.backspace
+		background-color: red
+
+		&:hover
+			background-color: darkred
+
+	&.enter,
+	&.backspace
+		color: white
+		width: 3rem
diff --git a/src/komponenty/Literka.scss b/src/komponenty/Literka.scss
diff --git a/src/komponenty/Literka.tsx b/src/komponenty/Literka.tsx
@@ -1,4 +1,4 @@
-import './Literka.scss'
+import './Literka.sass'
 
 function Literka(
 	props: {

diff --git a/src/komponenty/Okienko.sass b/src/komponenty/Okienko.sass
@@ -0,0 +1,6 @@
+.okienko
+	border-radius: 0.5em
+	box-shadow: 0 0 0.5em 0.5em rgba(255, 255, 255, 0.25)
+
+	&::backdrop
+		background-color: rgba(0, 0, 0, 0.2)
diff --git a/src/komponenty/Okienko.scss b/src/komponenty/Okienko.scss
diff --git a/src/komponenty/Okienko.tsx b/src/komponenty/Okienko.tsx
@@ -1,4 +1,4 @@
-import './Okienko.scss'
+import './Okienko.sass'
 
 function Okienko(props: {
 	tytuł?: string,

diff --git a/src/komponenty/Slowo.sass b/src/komponenty/Slowo.sass
@@ -0,0 +1,5 @@
+.slowo
+	display: flex
+	flex-direction: row
+	font-size: 2em
+	justify-content: center
diff --git a/src/komponenty/Slowo.scss b/src/komponenty/Slowo.scss
diff --git a/src/komponenty/Slowo.tsx b/src/komponenty/Slowo.tsx
@@ -1,5 +1,5 @@
 import Literka from './Literka'
-import './Slowo.scss'
+import './Slowo.sass'
 
 function ustalKlasęWpisywane(słowo: string, indeks: number, długośćSłowa: number) {
 	const gdzieKursor = słowo.length - (długośćSłowa == słowo.length ? 1 : 0)

diff --git a/src/main.sass b/src/main.sass
@@ -0,0 +1,49 @@
+$promien: 0.5em
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap')
+
+body
+	background-color: ghostwhite
+	font-family: 'Roboto', sans-serif
+	font-size: 1em
+	margin: 0
+	padding: 0
+	-webkit-font-smoothing: antialiased
+	-moz-osx-font-smoothing: grayscale
+
+h1
+	font-size: 2em
+	margin: 0.5em
+	text-align: center
+
+footer
+	margin-top: 3em
+	text-align: center
+	font-size: 0.8em
+	color: gray
+
+	&::before
+		content: ''
+		background-color: lightgray
+		display: block
+		height: 1px
+		width: 8em
+		margin: 1em auto
+
+	a:link,
+	a:visited
+		color: darkgray
+
+button
+	border: none
+	border-radius: $promien
+	padding: $promien
+	font-size: 1em
+	color: white
+	background-color: royalblue
+	font-weight: bold
+	display: block
+	margin: 1em auto
+
+img.copyleft
+	width: 0.7em