ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor some styles

This commit is contained in:
Ramon Wenger 2024-01-22 11:57:33 +01:00
parent d6860154f7
commit ebbbca72c4
12 changed files with 126 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/.postcssrc.json
View File

@ -3,6 +3,7 @@
"postcss-import": {},
"postcss-nested": {},
"postcss-url": {},
"postcss-reuse": {},
"autoprefixer": {}
}
}

1
client/package.json
View File

@ -101,6 +101,7 @@
"portfinder": "^1.0.13",
"postcss-import": "^15.0.0",
"postcss-nested": "^6.0.1",
"postcss-reuse": "^2.2.0",
"postcss-url": "^10.1.3",
"prettier": "2.8.2",
"rangy": "^1.3.1",

4
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="feedback__submission submission-form-container">
<div class="feedback__submission form-with-border submission-form-container">
<div class="submission-form-container__inputs">
<submission-input
:input-text="userInput.text"
@ -116,8 +116,6 @@ const changeDocumentUrl = (documentUrl: string) => {
@import 'styles/helpers';
.submission-form-container {
@include form-with-border;
margin-bottom: $medium-spacing;
display: none;

6
client/src/components/content-blocks/assignment/SubmissionInput.vue
View File

@ -7,7 +7,7 @@
:class="{ 'submission-form__textarea--readonly': readonly }"
data-cy="submission-textarea"
rows="1"
class="submission-form__textarea"
class="borderless-textarea"
v-auto-grow
@input="input"
/>
@ -58,10 +58,6 @@ const input = (e: Event) => {
flex-direction: row;
justify-content: space-between;
&__textarea {
@include borderless-textarea;
}
&__save-status {
position: relative;
align-items: center;

16
client/src/components/rooms/CommentInput.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="comment-input">
<div class="form-with-border comment-input">
<emoji-bar @add-emoji="addEmoji" />
<textarea
:value="text"
data-cy="comment-textarea"
class="comment-input__textarea"
class="borderless-textarea"
placeholder="Kommentar erfassen"
v-auto-grow
@input="updateValue($event.target.value)"
@ -50,15 +50,3 @@ export default {
},
};
</script>
<style scoped lang="scss">
@import 'styles/helpers';
.comment-input {
@include form-with-border;
&__textarea {
@include borderless-textarea;
}
}
</style>

2
client/src/main.ts
View File

@ -3,8 +3,8 @@ import setupApp from './setup/setupApp';
import registerPlugins from './setup/plugins';
import setupRouteGuards from './setup/router';
import registerDirectives from './setup/directives';
import '@/styles/css/main.css';
import '@/styles/main.scss';
import '@/styles/variables.css';
const app = setupApp();

3
client/src/styles/_mixins.scss
View File

@ -36,6 +36,7 @@
background-color: $color-accent-1-dark;
}
}
&--blue {
background-color: $color-accent-2;
@ -43,6 +44,7 @@
background-color: $color-accent-2-dark;
}
}
&--red {
background-color: $color-accent-3;
@ -50,6 +52,7 @@
background-color: $color-accent-3-dark;
}
}
&--green {
background-color: $color-accent-4;

26
client/src/styles/css/components.css Normal file
View File

@ -0,0 +1,26 @@
.input-box-shadow {
border: 1px solid #dbdbdb;
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.form-with-border {
@reuse .input-box-shadow;
background-color: var(--color-white);
border-radius: var(--input-border-radius);
border: 1px solid var(--color-silver);
padding: var(--medium-spacing);
}
.borderless-textarea {
display: flex;
width: 95%;
padding: 0;
box-sizing: border-box;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
line-height: 1.5;
border: 0;
min-height: 110px;
resize: none;
outline: 0;
}

3
client/src/styles/css/main.css Normal file
View File

@ -0,0 +1,3 @@
@import './variables.css';
@import './typography.css';
@import './components.css';

44
client/src/styles/css/typography.css Normal file
View File

@ -0,0 +1,44 @@
/* as we will be moving away from SCSS and towards tailwind, here's a middle step: using classes for typography instead
* of always using individual classes together with mixins */
.main-title {
font-family: var(--sans-serif-font-family);
font-weight: var(--bold-font-weight);
font-size: var(--largest-font-size);
}
.heading-1 {
font-family: var(--sans-serif-font-family);
font-weight: var(--semibold-font-weight);
font-size: var(--larger-font-size);
}
.heading-2 {
font-family: var(--sans-serif-font-family);
font-weight: var(--semibold-font-weight);
font-size: var(--large-font-size);
}
.heading-3 {
font-family: var(--sans-serif-font-family);
font-weight: var(--semibold-font-weight);
font-size: var(--slightly-large-font-size);
}
.heading-4 {
font-family: var(--sans-serif-font-family);
font-weight: var(--semibold-font-weight);
font-size: var(--regular-font-size);
}
.regular-text {
font-family: var(--sans-serif-font-family);
font-weight: var(--regular-font-weight);
font-size: var(--regular-font-size);
}
.paragraph {
font-family: var(--serif-font-family);
font-size: var(--regular-font-size);
font-weight: var(--regular-font-weight);
line-height: var(--paragraph-line-height);
}

43
client/src/styles/css/variables.css Normal file
View File

@ -0,0 +1,43 @@
:root {
--default-border-radius: 13px;
--input-border-radius: 3px;
--section-spacing: 60px;
--large-spacing: 30px;
--medium-spacing: 20px;
--small-spacing: 10px;
--mark-alpha: #fbf44a;
--mark-beta: #FF8BDE;
--mark-gamma: #6FDCFF;
--color-white: #ffffff;
--color-silver: #d0d0d0;
--color-charcoal-dark: #333333;
--sans-serif-font-family: 'Montserrat', Arial, sans-serif;
--serif-font-family: 'ff-meta-serif-web-pro', serif;
/* 64px */
--larger-font-size: 4rem;
/* 44px */
--larger-font-size: 2.75.rem;
/* 34px */
--large-font-size: 2.125rem;
/* 24px */
--slightly-large-font-size: 1.5rem;
/* 18px */
--regular-font-size: 1.125rem;
/* 16px */
--slightly-small-font-size: 1rem;
/* 14px */
--small-font-size: 0.875rem;
/* 11px */
--tiny-font-size: 0.688rem;
--regular-font-weight: 400;
--semibold-font-weight: 600;
--bold-font-weight: 800;
--paragraph-line-height: 1.5;
}

21
client/src/styles/variables.css
View File

@ -1,21 +0,0 @@
:root {
--default-border-radius: 13px;
--section-spacing: 60px;
--large-spacing: 30px;
--medium-spacing: 20px;
--small-spacing: 10px;
--mark-alpha: #fbf44a;
--mark-beta: #FF8BDE;
--mark-gamma: #6FDCFF;
--color-white: #ffffff;
--color-silver: #d0d0d0;
--color-charcoal-dark: #333333;
--sans-serif-font-family: 'Montserrat', Arial, sans-serif;
--serif-font-family: 'ff-meta-serif-web-pro', serif;
--regular-font-size: 18px;
}