2019-02-24 07:19:06 +03:00
|
|
|
/*
|
|
|
|
HOVER EFFECTS
|
|
|
|
|
|
|
|
- Dim
|
|
|
|
- Glow
|
|
|
|
- Hide Child
|
|
|
|
- Underline text
|
|
|
|
- Grow
|
|
|
|
- Pointer
|
|
|
|
- Shadow
|
|
|
|
*/
|
|
|
|
|
|
|
|
:root {
|
|
|
|
--animation-speed-fast: 0.15s;
|
2021-02-08 23:16:41 +03:00
|
|
|
--animation-speed-normal: 0.2s;
|
2019-02-24 07:19:06 +03:00
|
|
|
--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;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-08-27 16:51:31 +03:00
|
|
|
/* Underline */
|
|
|
|
|
|
|
|
.underline:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-02-24 07:19:06 +03:00
|
|
|
/*
|
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2019-06-18 13:47:21 +03:00
|
|
|
/* 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;
|
|
|
|
}
|
|
|
|
|
2019-02-24 07:19:06 +03:00
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2019-03-08 11:45:32 +03:00
|
|
|
.hide-child-instant .child {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
.hide-child-instant:hover .child,
|
|
|
|
.hide-child-instant:focus .child,
|
|
|
|
.hide-child-instant:active .child {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
2019-02-24 07:19:06 +03:00
|
|
|
.underline-hover:hover,
|
|
|
|
.underline-hover:focus {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Can combine this with overflow-hidden to make background images grow on hover
|
|
|
|
* even if you are using background-size: cover */
|
|
|
|
|
|
|
|
.grow {
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
backface-visibility: hidden;
|
|
|
|
transform: translateY(0) translateZ(0);
|
|
|
|
transition: transform var(--animation-speed-normal) ease-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
.grow:hover,
|
|
|
|
.grow:focus {
|
|
|
|
transform: translateY(-0.6rem) scale(1.002);
|
|
|
|
}
|
|
|
|
|
|
|
|
.grow:active {
|
|
|
|
transform: scale(.90);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 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);
|
|
|
|
}
|
2020-02-27 06:50:15 +03:00
|
|
|
|
|
|
|
/* 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;
|
|
|
|
}
|
|
|
|
}
|