TryGhost/Ghost

/*
  HOVER EFFECTS

    - Dim
    - Glow
    - Hide Child
    - Underline text
    - Grow
    - Pointer
    - Shadow
*/

:root {
  --animation-speed-fast: 0.15s;
  --animation-speed-normal: 0.2s;
  --animation-speed-slow: 0.45s;
}



/* Animations
/* -------------------------------------------------------- */
.anim-fast          {  transition: all var(--animation-speed-fast) ease;  }
.anim-normal        {  transition: all var(--animation-speed-normal) ease;  }
.anim-slow          {  transition: all var(--animation-speed-slow) ease;  }

.anim-fast-bezier {  transition: all var(--animation-speed-fast) cubic-bezier(.71,.16,.52,.88);  }
.anim-normal-bezier {  transition: all var(--animation-speed-normal) cubic-bezier(.71,.16,.52,.88);  }
.anim-slow-bezier {  transition: all var(--animation-speed-slow) cubic-bezier(.71,.16,.52,.88);  }


/*

  Dim element on hover by adding the dim class.

*/
.dim {
  opacity: 1;
  transition: opacity var(--animation-speed-fast) ease-in;
  will-change: opacity;
}
.dim:hover,
.dim:focus {
  opacity: .5;
  transition: opacity var(--animation-speed-fast) ease-in;
}
.dim:active {
  opacity: .8; transition: opacity var(--animation-speed-fast) ease-out;
}


/* Underline */

.underline:hover {
  text-decoration: underline;
}


/*

  Lighter variation

*/
.dim-lite {
  opacity: 1;
  transition: opacity var(--animation-speed-fast) ease-in;
  will-change: opacity;
}
.dim-lite:hover,
.dim-lite:focus {
  opacity: .75;
  transition: opacity var(--animation-speed-fast) ease-in;
}
.dim-lite:active {
  opacity: .9; transition: opacity var(--animation-speed-fast) ease-out;
}


/*

    Glow

 */
.glow {
    transition: border var(--animation-speed-slow) ease!important;
}

.glow:hover {
    border: 1px solid var(--blue);
}


/*

    Highlight with white background

*/
.highlight-white {
    transition: all var(--animation-speed-fast) ease!important;
}

.highlight-white:hover {
    background-color: rgba(255, 255, 255, 0.15)!important;
}

/* Highlight whitegrey */
.highlight-whitegrey {
    transition: background var(--animation-speed-fast) ease!important;
}

.highlight-whitegrey:hover {
    background-color: color-mod(var(--whitegrey-l2)) !important;
    transition: none;
}



/*

  Hide child & reveal on hover:

  Put the hide-child class on a parent element and any nested element with the
  child class will be hidden and displayed on hover or focus.

  <div class="hide-child">
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
  </div>
*/

.hide-child .child {
  opacity: 0;
  transition: all var(--animation-speed-normal) ease-in;
}
.hide-child:hover  .child,
.hide-child:focus  .child,
.hide-child:active .child {
  opacity: 1;
  transition: all var(--animation-speed-normal) ease-in;
}

.hide-child-instant .child {
  opacity: 0;
}
.hide-child-instant:hover  .child,
.hide-child-instant:focus  .child,
.hide-child-instant:active .child {
  opacity: 1;
}

.underline-hover:hover,
.underline-hover:focus {
  text-decoration: underline;
}

/* Add pointer on hover */

.pointer:hover {
  cursor: pointer;
}


/*
Pop: Appear from bottom, disappear to bottom
*/
.pop-down {
    transform: translateY(0.5rem) scale(0.98);
}


/*
   Add shadow on hover.

   Performant box-shadow animation pattern from
   http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/

.shadow-hover {
  position: relative;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.shadow-hover::after {
  content: '';
  box-shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.09);
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.shadow-hover:hover::after,
.shadow-hover:focus::after {
  opacity: 1;
}

/* Combine with classes in skins and skins-pseudo for
 * many different transition possibilities. */

.bg-animate,
.bg-animate:hover,
.bg-animate:focus {
  transition: background-color var(--animation-speed-normal) ease-in-out;
}


/* Spinner */

 .ghost-spinner {
     animation: spin 1s linear infinite;
     border: 4px solid;
     border-color: var(--black-20);
     border-radius: 100px;
     box-sizing: border-box;
     display: inline-block;
     margin: -2px 0;
     position: relative;
     width: 20px;
     height: 20px;
 }

 .ghost-spinner:before {
    background: var(--black-60);
    border-radius: 100px;
    content: "";
    display: block;
    height: 4px;
    margin-top: 11px;
    width: 4px;
 }

.spinner-s {
    width: 14px;
    height: 14px;
}
.spinner-s:before { margin-top: 6px; }

.spinner-xl {
    width: 32px;
    height: 32px;
}
.spinner-xl:before { margin-top: 20px; }

.spinner-blue { border-color: rgba(62,176,239,.2);}
.spinner-blue:before { background: rgba(62,176,239,.7); }

.spinner-white { border-color: rgba(255,255,255,.2); }
.spinner-white:before { background:rgba(255,255,255,.7);}

.spinner-xxl {
    width: 52px;
    height: 52px;
    border: 1px solid;
}
.spinner-xxl:before {
    margin-top: 9px;
    height: 6px;
    width: 6px;
    background: var(--darkgrey-l2);
}

/* Animated icons */
.animated-icon path {
    stroke-dashoffset: 300;
    stroke-dasharray: 300;
    animation: icon-dash 3s ease-out forwards;
}

@keyframes icon-dash {
    0% {
        stroke-dashoffset: 300;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Fade in */
.fade-in {
    opacity: 0;
    animation: fade-in 3s ease-out forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1.0;
    }
}