This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.text-to-crop { | |
@include lhCrop(1.2, 0.75); //using Roboto font family | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin lhCrop($line-height, $capital-letter: 1) { | |
&::before { | |
content: ''; | |
display: block; | |
height: 0; | |
width: 0; | |
margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.text-to-crop { | |
@include lhCrop(1.2); //line-height: 1.2 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin lhCrop($line-height) { | |
&::before { | |
content: ''; | |
display: block; | |
height: 0; | |
width: 0; | |
margin-top: calc((1 - #{$line-height}) * 0.5em); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p class="icon-text-aligner"> | |
<svg class="icon"><use href="#icon-dog" xlink:href="#icon-dog"/></svg> | |
<em>This is some text here</em> | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* add this class to parent element that contains icon + text */ | |
.icon-text-aligner { | |
display: flex; | |
align-items: center; | |
> *:nth-child(2) { | |
margin-left: var(--space-xxs); | |
} | |
.icon { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--icon-xs: 16px; | |
--icon-sm: 24px; | |
--icon-md: 32px; | |
--icon-lg: 48px; | |
--icon-xl: 64px; | |
} | |
/* icon size */ | |
.icon--xs { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@supports(--css: variables) { | |
.theme--dark { | |
--component-background: var(--black); | |
--color-text: var(--gray-4); | |
--color-icon-primary: #fff; | |
//..other relevant css variables | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.icon { | |
color: var(--color-icon-primary); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* reset - used to enable icon color customizations */ | |
.icon { | |
fill: currentColor; | |
stroke: none; | |
&.icon--outline { | |
stroke: currentColor; | |
} | |
use { |