Use variables and mixins

This commit is contained in:
Christian Cueni 2019-07-11 07:34:17 +02:00
parent 0ef9298c19
commit 2eb3fec0bb
5 changed files with 8 additions and 17 deletions

View File

@ -12,7 +12,7 @@
</a> </a>
</div> </div>
<h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label text-regular">{{instrumentLabel}}</h3> <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
<h4 class="content-block__title">{{contentBlock.title}}</h4> <h4 class="content-block__title">{{contentBlock.title}}</h4>
<component v-for="component in contentBlock.contents" <component v-for="component in contentBlock.contents"
@ -150,6 +150,7 @@
&__instrument-label { &__instrument-label {
margin-bottom: 0; margin-bottom: 0;
@include regular-text();
} }
&__actions { &__actions {

View File

@ -9,7 +9,8 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss";
.subtitle { .subtitle {
margin-bottom: 30px; margin-bottom: $large-spacing;
} }
</style> </style>

View File

@ -77,7 +77,7 @@
@mixin main-title { @mixin main-title {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 700; font-weight: 800;
font-size: toRem(64px); font-size: toRem(64px);
} }
@ -96,7 +96,7 @@
@mixin heading-3 { @mixin heading-3 {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 600; font-weight: 600;
font-size: toRem(22px); font-size: toRem(24px);
} }
@mixin heading-4 { @mixin heading-4 {
@ -119,7 +119,7 @@
@mixin meta-title { @mixin meta-title {
font-family: $serif-font-family; font-family: $serif-font-family;
font-size: toRem(42px); font-size: toRem(36px);
} }
@mixin lead-paragraph { @mixin lead-paragraph {

View File

@ -14,7 +14,7 @@
} }
&__objective { &__objective {
padding: 10px 0; padding: $small-spacing 0;
line-height: 1.5; line-height: 1.5;
@include light-border(top); @include light-border(top);

View File

@ -72,14 +72,3 @@ input, textarea, select, button {
margin-bottom: 7.5px; margin-bottom: 7.5px;
font-weight: 600; font-weight: 600;
} }
.text-regular {
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
font-size: toRem(18px);
line-height: toRem(27px);
&--small {
font-size: toRem(16px);
}
}