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

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

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

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

claudia-romano

:root {
  /* line-height */
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
  --article-line-height: 1.58;

  /* capital letters - used in combo with the lhCrop mixin */
  --font-primary-capital-letter: 0.75;
  --font-secondary-capital-letter: 0.69;
}

claudia-romano

:root {
  /* line-height */
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
  --article-line-height: 1.58;
}

.text-to-crop {  
  @include lhCrop(var(--heading-line-height));
}

claudia-romano

TransitionIcon.prototype.triggerAnimation = function(timestamp) {
  var progress = this.getProgress(timestamp);
  this.animateIcon(progress);
  this.checkProgress(progress);
};

TransitionIcon.prototype.getProgress = function(timestamp) {
  //make sure the progress value is in the right interval
  if (!this.time.start) this.time.start = timestamp;
  return timestamp - this.time.start;

claudia-romano

(function() {
  function TransitionIcon( element ) {
    this.element = element;
    this.size = this.element.getBoundingClientRect();
    this.states = this.element.querySelectorAll('.js-transition-icon__state');
    this.time = {start: null, total: 200};
    this.status = {interacted : false, animating : false};
    this.init();
  };

claudia-romano

<svg class="js-transition-icon" width="32px" height="32px" viewBox="0 0 32 32">
  <g class="js-transition-icon__state">
    <title>Search</title>
    <line fill="none" stroke="#111111" x1="30" y1="30" x2="21.5" y2="21.5"/>
    <circle fill="none" stroke="#111111" cx="13" cy="13" r="12"/>
  </g>
  
  <g class="js-transition-icon__state" style="display: none;" aria-hidden="true">
    <title>Close search</title>
    <line fill="none" stroke="#111111" x1="27" y1="5" x2="5" y2="27"/>

claudia-romano

<svg width="32px" height="32px" viewBox="0 0 32 32">
  <g class="js-transition-icon__state">
    <title>Close search</title>
    <line fill="none" stroke="#111111" x1="27" y1="5" x2="5" y2="27"/>
    <line fill="none" stroke="#111111" x1="27" y1="27" x2="5" y2="5"/>
  </g>
</svg>

claudia-romano

<svg width="32px" height="32px" viewBox="0 0 32 32">
  <g class="js-transition-icon__state">
    <title>Search</title>
    <line fill="none" stroke="#111111" x1="30" y1="30" x2="21.5" y2="21.5"/>
    <circle fill="none" stroke="#111111" cx="13" cy="13" r="12"/>
  </g>
</svg>