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

Clean up SCSS

This commit is contained in:
Ramon Wenger 2018-09-06 11:03:37 +02:00
parent f97a4db8d1
commit 300a7b8b08
6 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/ContentBlockChooserWidget.vue
View File

@ -62,6 +62,7 @@
border-radius: 12px; border-radius: 12px;
margin-top: 20px; margin-top: 20px;
position: relative; position: relative;
margin-bottom: 20px;
&::before { &::before {
content: ""; content: "";

10
client/src/components/ContentBlockTitleInput.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="content-block-title-input"> <div class="content-block-title-input">
<input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield"/> <input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield skillbox-input">
</div> </div>
</template> </template>
@ -9,13 +9,7 @@
.content-block-title-input { .content-block-title-input {
&__inputfield { &__inputfield {
display: flex; width: $modal-input-width;
width: 100%;
padding: 16px;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-sizing: border-box;
border: 1px solid $color-lightgrey;
} }
} }
</style> </style>

8
client/src/components/Modal.vue
View File

@ -42,6 +42,7 @@
display: grid; display: grid;
grid-template-rows: auto 1fr 65px; grid-template-rows: auto 1fr 65px;
grid-template-areas: "header" "body" "footer"; grid-template-areas: "header" "body" "footer";
position: relative;
&__backdrop { &__backdrop {
display: grid; display: grid;
@ -56,19 +57,20 @@
&__header { &__header {
grid-area: header; grid-area: header;
padding: 10px 30px; padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-lightgrey;
} }
&__body { &__body {
grid-area: body; grid-area: body;
padding: 10px 34px; padding: 10px $modal-lateral-padding;
overflow: auto;
} }
&__footer { &__footer {
grid-area: footer; grid-area: footer;
border-top: 1px solid $color-lightgrey; border-top: 1px solid $color-lightgrey;
padding: 16px 30px; padding: 16px $modal-lateral-padding;
} }
} }
</style> </style>

9
client/src/styles/_forms.scss Normal file
View File

@ -0,0 +1,9 @@
.skillbox-input {
display: flex;
padding: 16px;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-sizing: border-box;
border: 1px solid $color-lightgrey;
max-width: 100%;
}

7
client/src/styles/_variables.scss
View File

@ -42,3 +42,10 @@ $base-font-size-pixels: 16px; // used to calculate rem
$red: #FA5F5F; $red: #FA5F5F;
$green: #6DD79A; $green: #6DD79A;
$brown: #EB9E77; $brown: #EB9E77;
//modal stuff
$modal-lateral-padding: 34px;
$modal-input-width: 500px;

1
client/src/styles/main.scss
View File

@ -7,6 +7,7 @@
@import "typography"; @import "typography";
@import "variables"; @import "variables";
@import "buttons"; @import "buttons";
@import "forms";