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

Add help text styling

This commit is contained in:
Ramon Wenger 2018-09-06 15:30:59 +02:00
parent da1fb4a372
commit 4fb8220f7d
4 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/components/content-forms/DocumentForm.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="document-form"> <div class="document-form">
<info-icon class="document-form__help-icon"></info-icon> <info-icon class="document-form__help-icon help-text__icon"></info-icon>
<p class="document-form__help-description"> <p class="document-form__help-description help-text__description">
Sie können Dokumente auf <a class="document-form__platform-link" href="https://onedrive.live.com/" Sie können Dokumente auf <a class="document-form__platform-link help-text__link" href="https://onedrive.live.com/"
target="_blank">OneDrive</a> hochladen und anschliessen einen Link hier einfügen. target="_blank">OneDrive</a> hochladen und anschliessen einen Link hier einfügen.
</p> </p>
@ -36,22 +36,14 @@
align-items: center; align-items: center;
&__help-icon { &__help-icon {
width: 40px;
height: 40px;
fill: $color-brand;
} }
&__help-description { &__help-description {
font-family: $sans-serif-font-family;
font-size: toRem(17px);
font-weight: 500;
} }
&__platform-link { &__platform-link {
font-family: $sans-serif-font-family;
text-decoration: underline;
font-weight: 500;
font-size: toRem(17px);
} }
&__document-link { &__document-link {

16
client/src/components/content-forms/VideoForm.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="video-form"> <div class="video-form">
<info-icon class="video-form__help-icon"></info-icon> <info-icon class="video-form__help-icon help-text__icon"></info-icon>
<p class="video-form__help-description"> <p class="video-form__help-description help-text__description">
Sie können Videos auf <a class="video-form__platform-link" href="https://youtube.com/" target="_blank">Youtube</a> Sie können Videos auf <a class="video-form__platform-link help-text__link" href="https://youtube.com/" target="_blank">Youtube</a>
oder <a class="video-form__platform-link" href="https://vimeo.com/" target="_blank">Vimeo</a> oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
hochladen und anschliessen einen Link hier einfügen. hochladen und anschliessen einen Link hier einfügen.
</p> </p>
@ -36,15 +36,11 @@
align-items: center; align-items: center;
&__help-icon { &__help-icon {
width: 40px;
height: 40px;
fill: $color-brand;
} }
&__help-description { &__help-description {
font-family: $sans-serif-font-family;
font-size: toRem(17px);
font-weight: 500;
} }
&__platform-link { &__platform-link {

18
client/src/styles/_help-text.scss Normal file
View File

@ -0,0 +1,18 @@
.help-text {
&__icon {
width: 40px;
height: 40px;
fill: $color-brand;
}
&__description {
font-family: $sans-serif-font-family;
font-size: toRem(17px);
font-weight: 500;
}
&__link {
font-family: $sans-serif-font-family;
text-decoration: underline;
font-weight: 500;
font-size: toRem(17px);
}
}

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

@ -8,6 +8,7 @@
@import "variables"; @import "variables";
@import "buttons"; @import "buttons";
@import "forms"; @import "forms";
@import "help-text";