claudia-romano

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass-embedded'));
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var connect  = require('gulp-connect-php');

claudia-romano

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssvariables = require('postcss-css-variables'); 
var calc = require('postcss-calc');  
var concat = require('gulp-concat');
var rename = require('gulp-rename');

claudia-romano

.grid {
  @include gridLayout(
    (7, 2), //item 1
    (5, 1), //item 2
    (5, 1), //item 3
    (12, 1) //item 4
  );
}

claudia-romano

@mixin lhCrop($line-height) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((1 - #{$line-height}) * 0.5em);
  }
}

claudia-romano

@supports(--css: variables) {
  .theme--dark {
    --component-background: var(--black);
    --color-text: var(--gray-4);
    --color-icon-primary: #fff;
    //..other relevant css variables
  }
}

claudia-romano

<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>

claudia-romano

/* 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 {

claudia-romano

.icon {
  color: var(--color-icon-primary);
}

claudia-romano

:root {
  --icon-xs: 16px;
  --icon-sm: 24px;
  --icon-md: 32px;
  --icon-lg: 48px;
  --icon-xl: 64px;
}

/* icon size */
.icon--xs {

claudia-romano

.theme--dark .icon {
  color: #fff;
}

.theme--dark .icon use {
  fill: #d4c1be;
}

.theme--dark .icon.icon--outline use {
  stroke: #d4c1be;