ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Add default text dedicated file (#173)

Browse Source
This commit is contained in:
Lucas Bigot
2024-04-03 08:29:24 -04:00
committed by GitHub
parent 353a38915d
commit 27a41aba66
2 changed files with 54 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
assets/styles/components/_text.scss Normal file
View File

@@ -0,0 +1,53 @@
// ==========================================================================
// Components / Texts
// ==========================================================================
// Font sizes
// ==========================================================================
:root {
--font-size-body-regular: #{responsive-value(15px, 17px, $from-lg)};
--font-size-body-medium: #{responsive-value(18px, 23px, $from-lg)};
--font-size-body-small: #{responsive-value(13px, 16px, $from-lg)};
}
// Mixins
// ==========================================================================
@mixin text {
font-family: ff('sans');
}
@mixin body-regular {
font-size: var(--font-size-body-regular);
font-weight: $font-weight-normal;
line-height: 1.2;
}
@mixin body-medium {
font-size: var(--font-size-body-medium);
font-weight: $font-weight-normal;
line-height: 1.2;
}
@mixin body-small {
font-size: var(--font-size-body-small);
font-weight: $font-weight-normal;
line-height: 1.2;
}
// Styles
// ==========================================================================
.c-text {
@include text;
&.-body-regular {
@include body-regular;
}
&.-body-medium {
@include body-medium;
}
&.-body-small {
@include body-small;
}
}

1
assets/styles/main.scss
View File

@@ -54,6 +54,7 @@
// ========================================================================== // ==========================================================================
@import "components/heading"; @import "components/heading";
@import "components/text";
@import "components/button"; @import "components/button";
@import "components/form"; @import "components/form";