claudia-romano

.icon {
  display: inline-block;
  color: var(--color-icon-primary);
  height: 1em;
  width: 1em;
  line-height: 1;
}

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

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

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

@mixin gridAdvanced($cols...) {
  @supports(grid-area: auto) {
    grid-template-columns: repeat($grid-columns, 1fr);

    $i: 1;
    @each $col in $cols {
      > :nth-of-type(#{$i}) {
        grid-column-start: nth($col,1);
        grid-column-end: nth($col,2);
        grid-row-start: nth($col,3);

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

.text-to-crop {
  @include lhCrop(1.2, 0.75); //using Roboto font family
}

claudia-romano

.text-to-crop {
  @include lhCrop(1.2); //line-height: 1.2
}

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