Skip to content

Instantly share code, notes, and snippets.

Avatar

Claudia Romano claudia-romano

View GitHub Profile
View lhCrop_04_mixin-advanced-action.scss
.text-to-crop {
@include lhCrop(1.2, 0.75); //using Roboto font family
}
View lhCrop_03_mixin-advanced.scss
@mixin lhCrop($line-height, $capital-letter: 1) {
&::before {
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
}
}
View lhCrop_02_mixin-action.scss
.text-to-crop {
@include lhCrop(1.2); //line-height: 1.2
}
View lhCrop_01_mixin.scss
@mixin lhCrop($line-height) {
&::before {
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((1 - #{$line-height}) * 0.5em);
}
}
View icons_08_icon-text-aligner-class-action.html
<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>
View icons_07_icon-text-aligner-class.scss
/* 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 {
View icons_06_icon-size-classes.scss
:root {
--icon-xs: 16px;
--icon-sm: 24px;
--icon-md: 32px;
--icon-lg: 48px;
--icon-xl: 64px;
}
/* icon size */
.icon--xs {
View icons_05_icon-color-variation.scss
@supports(--css: variables) {
.theme--dark {
--component-background: var(--black);
--color-text: var(--gray-4);
--color-icon-primary: #fff;
//..other relevant css variables
}
}
View icons_03_icon-class-reset.scss
/* reset - used to enable icon color customizations */
.icon {
fill: currentColor;
stroke: none;
&.icon--outline {
stroke: currentColor;
}
use {