/* 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.
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/ .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; } /* 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); } /* 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; } }