65 lines
2.0 KiB
CSS
65 lines
2.0 KiB
CSS
/* crop top space on text elements - caused by line height */
|
||
/*
|
||
The mixin also accepts a (not required) second parameter (a number smaller than 1 that varies with the font-family value) that improves the crop effect.
|
||
Since this additional parameter depends on the font-family only (it is not affected by font-size or font-weight or line-height), a good idea would be to define a CSS variable for each one of your font families.
|
||
You can then use that variable to call the lhCrop mixin; this way, if you need to change your font-family, you’ll only need to update the value of that variable with no need to modify the mixin calls.
|
||
In the 📁 custom-style/_typography.scss file, you find this variable defined for the primary font (--font-primary-capital-letter). Its default value is one, so make sure to update it according to your font-family.
|
||
*/
|
||
@define-mixin lhCrop $line-height, $capital-letter: 1, $class-name: & {
|
||
$(class-name)::before {
|
||
content: '';
|
||
display: block;
|
||
height: 0;
|
||
width: 0;
|
||
margin-top: calc(($(capital-letter) - $(line-height)) * 0.5em);
|
||
}
|
||
}
|
||
|
||
/* edit font rendering -> tip: use for light text on dark backgrounds */
|
||
@define-mixin fontSmooth {
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* edit text unit on a component level */
|
||
@define-mixin textUnit $text-unit {
|
||
--text-unit: $(text-unit);
|
||
font-size: var(--text-unit);
|
||
}
|
||
|
||
/* Spacing */
|
||
|
||
/* edit space unit on a component level */
|
||
@define-mixin spaceUnit $space-unit {
|
||
--space-unit: $(space-unit);
|
||
}
|
||
|
||
/* Reset */
|
||
|
||
/* reset user agent style */
|
||
@define-mixin reset {
|
||
background-color: transparent;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
color: inherit;
|
||
line-height: inherit;
|
||
appearance: none;
|
||
}
|
||
|
||
/* Accessibility */
|
||
|
||
/* hide - content made available only to screen readers */
|
||
@define-mixin srHide {
|
||
position: absolute;
|
||
clip: rect(1px, 1px, 1px, 1px);
|
||
clip-path: inset(50%);
|
||
}
|
||
|
||
/* show */
|
||
@define-mixin srShow {
|
||
position: static;
|
||
clip: auto;
|
||
clip-path: none;
|
||
}
|