butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Use SASS module system

Browse source 
Get rid of all the SASS warnings/errors when building.
This commit is contained in:
N-Pex 2025-05-13 22:38:10 +02:00
parent b2f4f1d492
commit b1d47748c8
120 changed files with 189 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/assets/css/_mixins.scss
View file

@ -1 +0,0 @@
// Sass Mixins

2
src/assets/css/_utilities.scss
View file

@ -1,3 +1,5 @@
@use "@/assets/css/variables" as *;
.cursor-pointer {
cursor: pointer !important;
}

2
src/assets/css/_variables.scss
View file

@ -1,3 +1,5 @@
@forward "vuetify/settings";
$font-family: "Poppins";
$background: #ffffff;
$app-background: #f6f6f6;

4
src/assets/css/channel.scss
View file

@ -1,3 +1,5 @@
@use "@/assets/css/variables" as *;
.chat-root.channel {
background-color: #f2f2f2;
.chat-content {
@ -111,6 +113,7 @@
flex: 0 0 100%;
margin: 24px 7px 0 7px;
padding: 0 8px 16px 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.emoji {
font-size: 12 * $chat-text-size;
font-weight: 500;
@ -120,7 +123,6 @@
height: 21px;
}
}
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* Make all images 'cover' */

31
src/assets/css/chat.scss
View file

@ -1,8 +1,11 @@
@import "vuetify/settings";
@import "@/assets/css/main.scss";
@import "@/assets/css/vendors/v-emoji-picker";
@import "@/assets/css/filedrop.scss";
@import "@/assets/css/channel.scss";
@forward "@/assets/css/variables";
@use "vuetify/settings" as *;
@use "@/assets/css/variables" as *;
@use "@/assets/css/main.scss" as *;
@use "@/assets/css/vendors/v-emoji-picker" as *;
@use "@/assets/css/filedrop.scss" as *;
@use "@/assets/css/channel.scss" as *;
@use "sass:map";
$admin-bg: black;
$admin-fg: white;
@ -192,7 +195,7 @@ body {
}
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
position: fixed;
z-index: 10;
}
@ -237,7 +240,7 @@ body {
background: #4d4d4d;
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
//margin-top: 72px;
margin-bottom: 70px;
}
@ -271,7 +274,7 @@ body {
margin: 0px 20px;
padding: 20px;
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
margin: 0px 5px;
padding: 15px;
}
@ -290,7 +293,7 @@ body {
border: 1px solid #d4d4d4;
border-radius: 32px;
margin-bottom: 10px;
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
margin-bottom: 12px;
}
}
@ -304,7 +307,7 @@ body {
fill: black;
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
display: none;
}
}
@ -355,7 +358,7 @@ body {
z-index: 40;
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
position: fixed;
bottom: 0px;
width: 100%;
@ -459,7 +462,7 @@ body {
position: relative;
max-width: 70%;
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
min-height: $min-touch-target;
}
}
@ -553,7 +556,7 @@ body {
position: relative;
max-width: 70%;
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
min-height: $min-touch-target;
}
}
@ -997,7 +1000,7 @@ body {
}
.filled-button {
@media #{map-get($display-breakpoints, 'sm-and-up')} {
@media #{map.get($display-breakpoints, 'sm-and-up')} {
min-width: 180px !important;
}
}

2
src/assets/css/components/_poll.scss
View file

@ -1,3 +1,5 @@
@use "../variables" as *;
.poll-bubble {
width: 70%;
text-align: start;

2
src/assets/css/components/_voice-recorder.scss
View file

@ -1,3 +1,5 @@
@use "../variables" as *;
.grow-enter-active,
.grow-leave-active {
transition-timing-function: ease-out;

2
src/assets/css/create.scss
View file

@ -1,4 +1,4 @@
@import "@/assets/css/main.scss";
@use "@/assets/css/main.scss" as *;
.create-root {

2
src/assets/css/filedrop.scss
View file

@ -1,3 +1,5 @@
@use "@/assets/css/variables" as *;
$large-button-height: $min-touch-target;
$small-button-height: 36px;

13
src/assets/css/join.scss
View file

@ -1,5 +1,6 @@
@import "vuetify/settings";
@import "@/assets/css/main.scss";
@use "vuetify/settings" as *;
@use "@/assets/css/main.scss" as *;
@use "sass:map";
.v-btn.btn-light {
font-family: sans-serif;
@ -37,7 +38,7 @@
background: white;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
padding: 20px;
}
}
@ -58,7 +59,7 @@
.inactive {
color: unset;
@media #{map-get($display-breakpoints, 'sm-and-up')} {
@media #{map.get($display-breakpoints, 'sm-and-up')} {
&:hover {
color: $very-very-purple;
}
@ -152,10 +153,10 @@
}
}
@media #{map-get($display-breakpoints, 'sm-and-down')} {
@media #{map.get($display-breakpoints, 'sm-and-down')} {
margin: 10px;
}
@media #{map-get($display-breakpoints, 'md-and-up')} {
@media #{map.get($display-breakpoints, 'md-and-up')} {
width: $main-desktop-width;
margin: 0 auto;
}

3
src/assets/css/login.scss
View file

@ -1,4 +1,5 @@
@import "@/assets/css/main.scss";
@use "@/assets/css/main.scss" as *;
@use "@/assets/css/variables" as *;
.login-root {
background-color: $background;

7
src/assets/css/main.scss
View file

@ -1,6 +1,7 @@
@import './variables';
@import './utilities';
@import './mixins';
@forward 'variables';
@forward 'utilities';
@use 'variables' as *;
@use 'utilities' as *;
@font-face {
font-family: "Inter";

2
src/assets/css/typography.scss
View file

@ -1,4 +1,4 @@
@import "@/assets/css/main.scss";
@use "@/assets/css/main.scss" as *;
.h3-bold {
font-family: "Poppins";

7
src/assets/css/vendors/_v-emoji-picker.scss vendored
View file

@ -1,3 +1,6 @@
@use "vuetify/settings" as *;
@use "sass:map";
.v3-emoji-picker {
width: 100%;
background-color: #ffffff;
@ -7,11 +10,11 @@
flex: 1 1 100%;
.v3-emojis button {
@media #{map-get($display-breakpoints, 'sm')} {
@media #{map.get($display-breakpoints, 'sm')} {
flex-basis: 10% !important;
max-width: 10% !important;
}
@media #{map-get($display-breakpoints, 'md-and-up')} {
@media #{map.get($display-breakpoints, 'md-and-up')} {
flex-basis: 6.25% !important;
max-width: 6.25% !important;
}