dqnid/full-stack-archetype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(styles): scss variables replaced with css ones all over the project

Browse Source
This commit is contained in:
Daniel Heras Quesada
2024-08-27 17:23:52 +02:00
parent c20d621e2f
commit 9a6b9afa3b
8 changed files with 34 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/next.config.mjs
View File

@@ -6,7 +6,7 @@ const nextConfig = {
* https://nextjs.org/docs/app/building-your-application/styling/sass
*/
sassOptions: {
prependData: `@import "@/styles/variables";`,
// optional: prependData: `@import "@/styles/variables";`,
includePaths: [path.join("@", "styles")],
},
images: {

34
front/src/modules/auth/components/log-in/log-in.module.scss
View File

@@ -12,16 +12,18 @@
border-radius: 0.4rem;
background-image: linear-gradient(
16deg,
rgba($color-primary-90-rgb, 0.3),
rgba($color-primary-90-rgb, 0.2)
rgba(var(--color-primary-rgb), 0.3),
rgba(var(--color-primary-rgb), 0.2)
);
background-color: rgba(var(--color-test), 0.4);
.heading {
font-size: 3.4rem;
text-align: center;
background-color: #e5e5f7;
opacity: 0.8;
text-shadow: rgba($color-grey-10, 0.3);
text-shadow: rgba(var(--color-grey-10), 0.3);
padding: 2rem 4rem 2rem;
@@ -30,14 +32,14 @@
repeating-conic-gradient(
from 30deg,
#0000 0 120deg,
$color-white 0 180deg
var(--color-white) 0 180deg
)
calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
repeating-conic-gradient(
from 30deg,
$color-grey-30 0 60deg,
$color-grey-90 0 120deg,
$color-white 0 180deg
var(--color-grey-30) 0 60deg,
var(--color-grey-90) 0 120deg,
var(--color-white) 0 180deg
);
background-size: var(--s) calc(var(--s) * 0.577);
}
@@ -61,7 +63,7 @@
font-size: inherit;
margin-left: 0.8em;
color: $color-grey-10;
color: var(--color-grey-10);
transition: all 0.3s;
}
@@ -69,9 +71,9 @@
font-size: inherit;
padding: 0.8em;
color: $color-foreground;
color: var(--color-foreground);
background: rgba($color-primary-90-rgb, 0.5);
background: rgba(var(--color-primary-rgb), 0.5);
border: none;
border-bottom: 2px solid transparent;
border-radius: 2px;
@@ -79,13 +81,13 @@
transition: all 0.2s;
&::placeholder {
color: $color-grey-10;
color: var(--color-grey-10);
}
&:focus {
outline: none;
border-bottom: 2px solid $color-primary;
box-shadow: 0 1px 4px rgba($color-primary-dark-rgb, 0.3);
border-bottom: 2px solid var(--color-primary);
box-shadow: 0 1px 4px rgba(var(--color-primary-dark-rgb), 0.3);
}
}
@@ -104,15 +106,15 @@
border-radius: 2px;
border: none;
background-color: $color-primary;
color: $color-foreground;
color: var(--color-foreground);
background-color: var(--color-primary);
transition: all 0.2s;
&:hover {
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0 2px 6px rgba($color-primary-dark-rgb, 0.4);
box-shadow: 0 2px 6px rgba(var(--color-primary-dark-rgb), 0.4);
}
&:active {

4
front/src/modules/auth/components/user-frame/user-frame.module.scss
View File

@@ -7,7 +7,7 @@
border-radius: 50%;
overflow: hidden;
border: 1px solid $color-grey-30;
border: 1px solid var(--color-grey-30);
box-sizing: border-box;
& > span {
@@ -18,6 +18,6 @@
font-size: inherit;
text-transform: uppercase;
color: $color-grey-30;
color: var(--color-grey-30);
}
}

8
front/src/modules/auth/components/user-panel/user-panel.module.scss
View File

@@ -8,8 +8,8 @@
padding: 1.2rem 1.8rem;
border-radius: 6px;
background-color: $color-foreground;
color: $color-background;
background-color: var(--color-foreground);
color: var(--color-background);
& .user {
font-size: 1.6rem;
@@ -28,8 +28,8 @@
padding: 0.4rem 0.6rem;
border-radius: 4px;
background-color: $color-grey-90;
color: $color-grey-10;
background-color: var(--color-grey-90);
color: var(--color-grey-10);
}
}
}

6
front/src/modules/common/components/navbar-header/navbar-header.module.scss
View File

@@ -11,9 +11,9 @@
border-radius: 8px;
padding: 0.4rem 1.8rem;
background-color: $color-white;
box-shadow: 0 1px 3px rgba($color-grey-10-rgb, 0.3);
color: $color-background;
background-color: var(--color-white);
box-shadow: 0 1px 3px rgba(var(--color-grey-10-rgb), 0.3);
color: var(--color-background);
.logo {
display: flex;

2
front/src/modules/common/layouts/home/home.module.scss
View File

@@ -1,3 +1,3 @@
.container {
background-color: $color-background;
background-color: var(--color-background);
}

20
front/src/styles/_variables.scss
View File

@@ -1,20 +0,0 @@
$default-font-size: 1.6rem;
$color-primary: var(--color-primary);
$color-primary-light: var(--color-primary-light);
$color-primary-dark: var(--color-primary-dark);
$color-primary-rgb: var(--color-primary-rgb);
$color-primary-light-rgb: var(--color-primary-light-rgb);
$color-primary-dark-rgb: var(--color-primary-dark-rgb);
$color-secondary: #ff7730;
$color-background: var(--color-grey-90);
$color-foreground: var(--color-black);
$color-white: var(--color-white);
$color-grey-90: var(--color-grey-90);
$color-grey-60: var(--color-grey-60);
$color-grey-30: var(--color-grey-30);
$color-grey-10: var(--color-grey-10);
$color-grey-10-rgb: var(--color-grey-10-rgb);

9
front/src/styles/main.scss
View File

@@ -20,6 +20,7 @@
--color-primary-dark-rgb: 86, 87, 125;
}
[data-theme="dark"] {
--color-white: #101010;
--color-black: #fafafa;
@@ -65,8 +66,8 @@ html {
body {
box-sizing: border-box;
background-color: $color-background;
color: $color-foreground;
background-color: var(--color-background);
color: var(--color-foreground);
}
a {
@@ -75,6 +76,6 @@ a {
}
::selection {
background-color: $color-primary;
color: $color-white;
background-color: var(--color-primary);
color: var(--color-white);
}