blacklight/gpstracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Split common.scss into multiple style files.

Browse source
This commit is contained in:
Fabio Manganiello 2025-03-09 10:56:09 +01:00
parent ac327e2d4c
commit 0e5a08cc49
Signed by: blacklight
GPG key ID: D90FBA7F76362774
5 changed files with 152 additions and 125 deletions

44
frontend/src/styles/animations.scss Normal file
View file

@ -0,0 +1,44 @@
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slide-down {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes unroll {
from {
transform: translateY(7.5em);
}
to {
transform: translateY(0);
}
}

129
frontend/src/styles/common.scss
View file

@ -1,125 +1,4 @@
// Set screen width breakpoints
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$header-height: 3.5rem;
// @media utilities for common screen sizes
@mixin mobile {
@media (max-width: $screen-sm) {
@content;
}
}
@mixin tablet {
@media (min-width: $screen-sm) and (max-width: $screen-md) {
@content;
}
}
@mixin desktop {
@media (min-width: $screen-md) {
@content;
}
}
// Common element styles
button {
margin: 0 0.5em;
padding: 0.25em 0.5em;
border: 1px solid var(--color-border);
border-radius: 0.25em;
background: var(--color-background);
font-size: 1.25em;
cursor: pointer;
&:disabled {
color: var(--color-text);
opacity: 0.5;
cursor: not-allowed;
}
&:hover {
color: var(--color-hover);
}
}
[type=submit] {
background: var(--color-accent);
color: white !important;
margin: 0.5em;
font-size: 1.15em;
padding: 0.5em;
transition: background-color 0.5s;
&:hover {
background: var(--color-hover);
color: var(--color-background);
}
}
[type=text], [type=email], [type=password], textarea {
width: 100%;
background: var(--color-background-soft);
color: var(--color-text);
padding: 0.5em;
border: 1px solid var(--color-border);
border-radius: 4px;
transition: border-color 0.5s;
transition: border-color 0.5s;
//
width: 100%;
padding: 0.5em;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-background-soft);
}
/* Animations */
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slide-down {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes unroll {
from {
transform: translateY(7.5em);
}
to {
transform: translateY(0);
}
}
@forward "./animations.scss";
@forward "./elements.scss";
@forward "./layout.scss";
@forward "./variables.scss";

86
frontend/src/styles/elements.scss Normal file
View file

@ -0,0 +1,86 @@
// Common element styles
button {
margin: 0 0.5em;
padding: 0.25em 0.5em;
border: 1px solid var(--color-border);
border-radius: 0.25em;
background: var(--color-background);
color: var(--color-text);
font-size: 1.25em;
cursor: pointer;
&:disabled {
color: var(--color-text);
opacity: 0.5;
cursor: not-allowed;
}
&:hover {
color: var(--color-hover);
}
}
[type=submit] {
background: var(--color-accent);
color: white !important;
margin: 0.5em;
font-size: 1.15em;
padding: 0.5em;
transition: background-color 0.5s;
&:hover {
background: var(--color-hover);
color: var(--color-background);
}
}
[type=text],
[type=email],
[type=password],
[type=number],
[type=date],
[type=datetime-local],
select,
textarea {
width: 100%;
background: var(--color-background-soft);
color: var(--color-text);
padding: 0.5em;
border: 1px solid var(--color-border);
border-radius: 4px;
transition: border-color 0.5s;
transition: border-color 0.5s;
//
width: 100%;
padding: 0.5em;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-background-soft);
}
.loading-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
form {
.buttons {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 0.33em;
padding-top: 0.33em;
button {
height: 2.5em;
}
}
}

17
frontend/src/styles/layout.scss Normal file
View file

@ -0,0 +1,17 @@
@use "sass:map";
// Set screen width breakpoints
$breakpoints: (
mobile : 0px,
tablet : 680px,
desktop: 960px
);
// Mixin to print out media queries (based on map keys passed)
@mixin media($keys...){
@each $key in $keys {
@media (min-width: map.get($breakpoints, $key)){
@content
}
}
}

1
frontend/src/styles/variables.scss Normal file
View file

@ -0,0 +1 @@
$header-height: 3.5rem;