refactor(css): move to modules

1 files changed, 132 insertions, 0 deletions

diff --git a/src/lib/Styles/input.css b/src/lib/Styles/input.css
new file mode 100644
index 00000000..aa2ae4dd
--- /dev/null
+++ b/src/lib/Styles/input.css
@@ -0,0 +1,132 @@
+input,
+select {
+	cursor: pointer;
+	position: relative;
+	background-color: var(--base01);
+	/* margin: 0; */
+	/* width: 1.15em;
+	height: 1.15em; */
+	padding: 0.25em;
+	border: none;
+	border-radius: 4px;
+	transform: translateY(0.175em);
+	place-content: center;
+	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
+	box-shadow: 0 4px 30px var(--base01);
+}
+
+@media (prefers-color-scheme: dark) {
+	input,
+	select {
+		background-color: var(--base07);
+	}
+}
+
+input[type='text'],
+input[type='number'],
+input[type='date'],
+input[type='time'],
+button {
+	padding: 0.25em 0.5em;
+}
+
+select {
+	transform: translateY(0em);
+	margin-top: 0.25em;
+	margin-bottom: 0.25em;
+	padding: 0.25em 0.5em;
+}
+
+input[type='checkbox'] {
+	-webkit-appearance: none;
+	appearance: none;
+	margin: 0;
+	width: 1.15em;
+	height: 1.15em;
+	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
+}
+
+input[type='checkbox']:checked {
+	background-color: var(--base0C);
+}
+
+input[type='checkbox']:checked:before {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+input[type='checkbox']:active {
+	transform: scale(1);
+	transition: transform 0.15s ease-in-out;
+}
+
+input[type='checkbox']:hover {
+	background-color: var(--base0A);
+}
+
+button {
+	cursor: pointer;
+	position: relative;
+	background-color: var(--base0C);
+	color: var(--base00);
+	border: none;
+	border-radius: 4px;
+	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
+	box-shadow: 0 4px 30px var(--base01);
+}
+
+button:hover {
+	background-color: var(--base0A);
+}
+
+button:active {
+	transform: scale(0.975);
+}
+
+input:disabled,
+select:disabled,
+button:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+input:disabled:hover,
+select:disabled:hover,
+button:disabled:hover {
+	background-color: var(--base0C);
+}
+
+input:disabled:active,
+select:disabled:active,
+button:disabled:active {
+	transform: scale(1);
+}
+
+.small-button {
+	transform: scale(0.875);
+}
+
+.small-button:active {
+	transform: scale(0.75);
+}
+
+.smaller-button {
+	background-color: var(--base0C);
+	transform: scale(0.75);
+}
+
+.button-square {
+	background-color: var(--base0C);
+	transform: scale(0.75);
+	padding: 0.125em 0.575em;
+}
+
+.button-lined {
+	transform: translateY(0.175em);
+}
+
+.button-action {
+	background-color: var(--base0E);
+}