svg.svg-icon__sprite
defs
symbol#dot(viewbox='0 0 32 32')
title Dit icon.
desc For interactions.
circle(cx='16' cy='16' r='14' fill='none' stroke-width='3')
circle(cx='16' cy='16' r='4' fill='none' stroke-width='3')
symbol#arrow(viewbox='0 0 32 32')
title Arrow icon.
desc For interactions.
path(d='M12.8 3c.4 0 .8.2 1.1.5s.5.7.5 1.1c0 .5-.2.8-.5 1.1l-8.5 8.5h24.9c.4 0 .8.2 1.1.5.3.3.5.7.5 1.1s-.2.8-.5 1.1c-.3.3-.7.5-1.1.5H5.5l8.5 8.5c.3.3.5.7.5 1.1 0 .4-.2.8-.5 1.1s-.7.5-1.1.5c-.4 0-.8-.2-1.1-.5L.5 17c-.3-.3-.5-.7-.5-1.1s.2-.8.5-1.1L11.7 3.5c.3-.3.7-.5 1.1-.5z')
symbol#eye(viewbox='0 0 32 32')
title Eye icon.
desc For toggleable elements.
path(d='M16 4c1.5 0 2.9.2 4.2.7 1.4.4 2.6 1 3.6 1.7s2 1.5 2.9 2.3 1.7 1.7 2.3 2.6 1.2 1.6 1.6 2.3c.5.7.8 1.3 1 1.7l.4.7c0 .1-.1.2-.2.4s-.3.5-.6 1.1-.6 1.1-1 1.6-.8 1.2-1.4 1.9c-.6.7-1.2 1.4-1.8 2s-1.3 1.2-2.2 1.9c-.8.6-1.7 1.2-2.6 1.6s-1.9.8-3 1.1c-.9.3-2.1.4-3.2.4-1.5 0-2.9-.2-4.2-.7s-2.6-1-3.6-1.7-2-1.5-2.9-2.3-1.7-1.7-2.3-2.5-1.2-1.6-1.6-2.3-.8-1.3-1-1.7l-.4-.7c0-.1.1-.2.2-.4s.3-.5.6-1.1.6-1.1 1-1.6.8-1.2 1.4-1.9 1.2-1.4 1.8-2 1.3-1.2 2.2-1.9S8.8 6 9.7 5.5c.9-.4 1.9-.8 3-1.1S14.9 4 16 4zm0 2.7c-1 0-1.9.1-2.9.4s-1.8.6-2.5 1c-.8.4-1.5.8-2.2 1.4-.7.6-1.3 1.1-1.9 1.7S5.5 12.4 5 13s-.9 1.2-1.2 1.7c-.3.5-.6.9-.8 1.4.3.5.5.9.8 1.4s.7 1 1.2 1.6l1.5 1.8s1.1 1.1 1.9 1.7c.7.6 1.5 1.1 2.2 1.5.8.4 1.6.7 2.5 1s1.9.4 2.9.4 1.9-.1 2.9-.4c.9-.3 1.8-.6 2.5-1s1.5-.9 2.2-1.5c.7-.6 1.3-1.1 1.9-1.7l1.5-1.8 1.2-1.6c.3-.5.6-.9.8-1.4-.3-.5-.5-.9-.8-1.4-.3-.5-.7-1-1.2-1.6l-1.5-1.8c-.5-.6-1.1-1.1-1.9-1.7-.7-.6-1.5-1.1-2.2-1.5-.8-.4-1.6-.7-2.5-1S17 6.7 16 6.7zm0 4c1.5 0 2.7.5 3.8 1.6 1 1 1.6 2.3 1.6 3.8s-.5 2.7-1.6 3.8c-1 1-2.3 1.6-3.8 1.6s-2.7-.5-3.8-1.6c-1-1-1.6-2.3-1.6-3.8s.5-2.7 1.6-3.8 2.3-1.6 3.8-1.6zm0 2.6c-.7 0-1.4.3-1.9.8s-.8 1.1-.8 1.9.3 1.4.8 1.9 1.1.8 1.9.8 1.4-.3 1.9-.8.8-1.1.8-1.9-.3-1.4-.8-1.9-1.2-.8-1.9-.8z')
symbol#firefox(viewbox='0 0 32 32')
title Firefox icon.
desc Support for this browser.
path(d='M31.8 10.6l-.4 2.4s-.5-4.4-1.2-6c-1-2.5-1.4-2.5-1.4-2.5.7 1.7.5 2.6.5 2.6S28.1 3.9 25 2.9c-3.4-1.1-5.3-.8-5.5-.8h-.1.1s3.8.7 4.5 1.6c0 0-1.6 0-3.2.5-.1 0 5.9.7 7.1 6.7 0 0-.7-1.4-1.5-1.6.5 1.6.4 4.7-.1 6.2-.1.2-.1-.8-1.1-1.3.3 2.3 0 5.9-1.6 6.9-.1.1 1-3.6.2-2.2-4.4 6.8-9.6 3.1-12 1.5 1.2.3 3.5 0 4.5-.8 1.1-.8 1.7-1.3 2.3-1.2.6.1 1-.5.5-1s-1.6-1.2-3-.8c-1.1.3-2.4 1.4-4.3.3-1.5-.9-1.7-1.7-1.7-2.2 0-.2.1-.4.1-.5.2-.5.7-.6 1-.8.5.1.9.2 1.4.5v-.6c0-.1 0-.3-.1-.7 0-.3-.1-.6-.2-.9 0-.1.4-.4.8-.7.4-.3.8-.5 1.2-.8.5-.2.7-.3.7-.4l.1-.1c.2-.1.4-.4.5-.9v-.1-.2-.1c-.1-.1-.3-.2-1.1-.2h-1.4c-1 0-1.6-1-1.8-1.4.2-1.4 1-2.4 2.1-3 .2-.1-2.8 0-4.2 1.8-1.1-.4-2.2-.4-3.1-.2-.2 0-.4 0-.7-.1-.6-.5-1.5-1.6-1.6-2.8 0 0-1.9 1.4-1.6 5.4v.2c-.5.6-.7 1.2-.7 1.3-.5.9-.9 2.3-1.3 4.4 0 0 .3-.8.8-1.8-.4 1.2-.7 3-.5 5.8 0 0 0-.6.2-1.5.1 1.7.7 3.8 2.1 6.3 2.8 4.7 7 7.1 11.7 7.5.8.1 1.7.1 2.5 0h.2c1-.1 1.9-.2 2.9-.4 13.1-3.2 11.7-19.1 11.7-19.1z')
symbol#chrome(viewbox='0 0 32 32')
title Chrome icon.
desc Support for this browser.
path(d='M8.2 14.1L3.7 6.3c2.9-3.6 7.4-6 12.4-6C21.9.3 27 3.4 29.7 8.1H16.1c-3.8 0-7 2.5-7.9 6zm13.6-3.7h9.1c.7 1.8 1.1 3.7 1.1 5.8 0 8.7-7 15.7-15.7 15.8l6.5-11.2c.9-1.3 1.4-2.9 1.4-4.6 0-2.3-.9-4.3-2.4-5.8zm-11.5 5.8c0-3.2 2.6-5.8 5.8-5.8s5.8 2.6 5.8 5.8-2.6 5.8-5.8 5.8-5.8-2.7-5.8-5.8zm8 7.8l-4.5 7.9C6.1 30.7.2 24.1.2 16.2c0-2.8.7-5.5 2-7.8l6.5 11.2c1.3 2.8 4.1 4.7 7.3 4.7.8 0 1.6-.1 2.3-.3z')
symbol#safari(viewbox='0 0 32 32')
title Safari icon.
desc Support for this browser.
path(d='M16.1.3C7.3.3.2 7.4.2 16.2S7.3 32 16.1 32s15.8-7.1 15.8-15.8S24.8.3 16.1.3zM29.9 15v-.3.3zm-2.2-6.4l-.2-.3c.1.1.2.2.2.3zm-.8-1.1l-.1-.2s0 .1.1.2zm-2-2l-.2-.1c.1 0 .2.1.2.1zm-1-.8l-.3-.2c.1.1.2.2.3.2zm-6.3-2.3h-.3.3zm-2.7 0h-.3.3zM8.6 4.5l-.4.2c.1 0 .2-.1.4-.2zm-1.2.9l-.2.1c.1 0 .1-.1.2-.1zm-2 1.9l-.1.2c0-.1.1-.1.1-.2zm-.7 1l-.3.3.3-.3zm-2.4 6.3v0zm0 2.8v0zm2.1 6.3l.3.3-.3-.3zm.3.4l2.5-1.7-.3-.4-2.5 1.7C3.3 22 2.5 20 2.3 17.8l1.5-.1v-.5l-1.5.1v-.9h3v-.5h-3V15l1.5.1v-.5l-1.5-.1c.2-2.2 1-4.2 2.1-5.9l2.5 1.7.3-.4-2.5-1.6c.2-.3.3-.5.5-.7l1.1.9.3-.4-1.1-.9c.2-.2.4-.5.6-.7l2.1 2.1.4-.4-2.1-2 .6-.6.9 1.2.4-.3-.9-1.2c.2-.2.5-.4.7-.5l1.7 2.5.3-.3-1.6-2.5c1.7-1.1 3.7-1.9 5.9-2.1l.1 1.5h.5L15 2.3h.9v3h.5v-3h.9l-.1 1.5h.5l.1-1.5c2.2.2 4.2 1 5.9 2.1L21.9 7l.4.3L24 4.8c.2.2.5.3.7.5l-.9 1.1.4.3.9-1.1.6.6-.8.8-10.8 7.2L6.9 25l-.8.8-.6-.6 1.1-.9-.3-.4-1.1.9c-.2-.3-.3-.5-.5-.7zm.7.9c0-.1-.1-.1-.1-.2l.1.2zm1.8 1.8l.2.2-.2-.2zm1 .8l.3.2c-.1-.1-.2-.1-.3-.2zm6.3 2.3h.3c0 .1-.2.1-.3 0zm2.8.1h.3-.3zm6.3-2.2l.3-.2c-.1.1-.2.1-.3.2zm1.2-.8l.2-.1c-.1 0-.2 0-.2.1zm1.1-1zm.8-1l.1-.2c0 .1 0 .2-.1.2zm.3-.2l-1.1-.9-.3.4 1.1.9-.6.6-2.1-2.1-.4.4 2.1 2.1-.6.6-.9-1.2-.4.3.9 1.1c-.2.2-.5.4-.7.5L22.3 25l-.4.3 1.7 2.5c-1.7 1.1-3.7 1.9-5.9 2.1l-.1-1.5h-.5l.1 1.5h-.9v-3h-.5v3h-.9l.1-1.5h-.5l-.1 1.5c-2.2-.2-4.2-1-5.9-2.1l1.7-2.5-.4-.3-1.6 2.5c-.2-.2-.5-.3-.7-.5l.9-1.1-.4-.3-.9 1.1-.6-.6.8-.8 10.8-7.2 7.2-10.8.8-.8.6.6-1.1.9.3.4 1.1-.8c.2.2.4.5.5.7L25 9.9l.3.4 2.5-1.7c1.1 1.7 1.9 3.7 2.1 5.9l-1.5.1v.5l1.5-.1v.9h-3v.5h3v.9l-1.5-.1v.5l1.5.1c-.2 2.2-1 4.2-2.1 5.9L25.3 22l-.3.4 2.5 1.7c-.2.2-.4.4-.5.7zm2.9-7.4v.3-.3zm-2.2 6.3c-.1.1-.1.2-.2.3l.2-.3z')
symbol#edge(viewbox='0 0 32 32')
title Edge icon.
desc Support for this browser.
path(d='M1.7 13.9C2.7 6.7 7.6.1 16.5 0c5.4.1 9.8 2.5 12.4 7.2 1.3 2.4 1.7 5 1.8 7.8v3.3H11c.1 8.1 12 7.8 17.1 4.3v6.6c-3 1.8-9.8 3.4-15 1.3-4.5-1.7-7.7-6.4-7.6-10.9-.3-5.9 2.8-9.8 7.5-12-1 1.2-1.8 2.6-2.2 5H22S22.7 6 15.7 6c-6.6.2-11.3 4-14 7.9z')
symbol#explorer(viewbox='0 0 32 32')
title iExplorer icon.
desc Support for this browser.
path(d='M23.8 17.5H31c.1-.5.1-1 .1-1.5 0-2.5-.7-4.8-1.8-6.8 1.2-3.2 1.1-5.9-.4-7.5-1.5-1.5-5.6-1.3-10.2.8h-1C11.3 2.5 6 6.9 4.6 12.7c2-2.5 4.1-4.4 6.9-5.7-.3.2-1.7 1.7-2 2-7.3 7.3-9.7 16.9-7.2 19.4 1.9 1.9 5.3 1.6 9.3-.4 1.8.9 3.9 1.5 6.1 1.5 5.9 0 10.9-3.8 12.8-9.1h-7.3c-1 1.9-3 3.1-5.2 3.1s-4.2-1.3-5.2-3.1c-.4-.8-.7-1.8-.7-2.8l11.7-.1zM12 14c.2-3 2.6-5.4 5.7-5.4s5.5 2.4 5.7 5.4H12zM28.8 3.3c1 1 1 3 .1 5.3-1.5-2.3-3.7-4.1-6.3-5.1 2.8-1.2 5.1-1.4 6.2-.2zM4.2 27.9c-1.3-1.3-.9-4.1.8-7.4 1.1 3 3.1 5.4 5.7 7-2.9 1.4-5.3 1.6-6.5.4z')
main.flexy__item.flexy--items-center.flexy--justify-center.flexy--column
section.section.flexy__item.flexy--column.flexy--items-center.space--big
header.header.accessible-hide
h2 CSS Dropdown
article.section__article.flexy__item.flexy--column.flexy--items-center
header.header.accessible-hide
h3 A Sassy-Select emulation.
form
fieldset.dropdown
input.dropdown__trigger(type='text' readonly value='Select an option' id='dropdown__trigger')
input.dropdown__list__radio(type='radio' id='option-null' disabled checked name='radio-group' value='null')
label.dropdown__list__item.dropdown__list__item--title.flexy__child.flexy__item.flexy--items-center(for='option-null') Select a product
.dropdown__trigger__icon.flexy__item.flexy--items-center
svg(class='svg-icon stroke--white')
use.use(xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#dot')
ul.dropdown__list
- var n = 1
while n < 10
- randomNumber = Math.floor(Math.random() * 137) + 28
li.flexy__item
input.dropdown__list__radio(type='radio' id='option-#{n}' name='radio-group' value='value_#{n}')
label.dropdown__list__item.flexy__child.flexy__item.flexy--items-center.flexy--between(for='option-#{n}') Product #{n}
span.dropdown__list__item--amount #{randomNumber} €
- n++
header.header
h1
a(href='http://tadaima.studio' title='Go to Tadaima')
svg.logo-tadaima.fill--white(xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 80 80')
title Tadaima Studio.
desc A group of digital interface crafters.
//- path.st5(d='M172.5,30.6c0-1.5,1.2-2.6,2.6-2.6c1.4,0,2.6,1.1,2.6,2.6c0,1.4-1.2,2.5-2.6,2.5 C173.7,33.1,172.5,32,172.5,30.6z M105.9,51.4c-1.7,0.5-2.6,0.7-3.9,0.7c-3.7,0-6.1-2.5-6.1-6.6v-6.2H92v-3.5h3.9v-4.9h3.8v4.9h5.6 v3.5h-5.6v6.2c0,2.1,1.1,3,3,3c0.9,0,1.8-0.2,2.6-0.4L105.9,51.4z M123.9,48h2.5v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5 c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48z M120.1,46.8v-6.2 c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C117.3,48.6,118.7,48.1,120.1,46.8z M147.6,51.6h-6.4v-1.1 c-1.3,1-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.3c0-4.6,3.5-8.2,7.9-8.2c1.9,0,3.5,0.5,4.8,1.5v-5.5h-2.5v-3.5h6.4V48h2.5V51.6z M141.2,46.8v-6c-1.4-1.5-2.8-2-4.3-2c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C138.5,48.6,139.9,48.1,141.2,46.8z M166.2,48h2.5 v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48 z M162.4,46.8v-6.2c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9c0,2.6,2,4.9,4.7,4.9C159.6,48.6,161,48.1,162.4,46.8z M179.7,51.6h-8.9V48h2.5v-8.7h-2.5v-3.5h6.3V48h2.6V51.6z M212.7,51.6h-8.9V48h2.5v-4.9c0-2.8-1.4-4.3-3.8-4.3 c-1.2,0-2.5,0.6-3.6,2.2c0.1,0.6,0.2,1.2,0.2,1.9V48h2.5v3.5h-8.9V48h2.5v-4.9c0-2.8-1.4-4.3-3.8-4.3c-1.1,0-2.4,0.6-3.4,2.1V48h2.6 v3.5h-8.9V48h2.5v-8.7h-2.5v-3.5h6.3v1.1c1.1-1,2.2-1.6,4.2-1.6c2.1,0,3.9,0.9,5.2,2.4c1.7-1.6,3.3-2.4,5.9-2.4c3.8,0,6.8,3,6.8,7.6 V48h2.6V51.6z M231.4,48h2.5v3.5h-6.4v-1.1c-1.3,0.9-2.9,1.5-4.8,1.5c-4.4,0-7.9-3.7-7.9-8.2c0-4.6,3.5-8.3,7.9-8.3 c1.9,0,3.5,0.5,4.8,1.5v-1.1h6.4v3.5h-2.5V48z M227.5,46.8v-6.2c-1.4-1.3-2.8-1.8-4.3-1.8c-2.7,0-4.7,2.3-4.7,4.9 c0,2.6,2,4.9,4.7,4.9C224.8,48.6,226.2,48.1,227.5,46.8z')
g
rect.st5(y='0', width='80', height='80')
lineargradient#SVGID_1_(gradientunits='userSpaceOnUse', x1='27.7468', y1='18.248', x2='52.244', y2='42.7452')
stop(offset='0', style='stop-color:#FF5572')
stop(offset='1', style='stop-color:#FF7555')
polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10;', points='52,27 25,27 25,23 55,23 55,31 40,31 40,54 ')
lineargradient#SVGID_2_(gradientunits='userSpaceOnUse', x1='23.9948', y1='30.0043', x2='48.4901', y2='54.4996')
stop(offset='0', style='stop-color:#FF5572')
stop(offset='1', style='stop-color:#FF7555')
polyline.logo-tadaima--animated(style='fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;', points='24,31 36,31 36,57 44,57 44,34 ')
svg.svg-bg(xmlns='http://www.w3.org/2000/svg')
defs
circle#a(cx='1468', cy='133', r='35')
mask#h(x='0', y='0', width='70', height='70', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
circle#b(cx='236.5', cy='732.5', r='23.5')
mask#i(x='0', y='0', width='47', height='47', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
circle#c(cx='1120.5', cy='945.5', r='28.5')
mask#j(x='0', y='0', width='57', height='57', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
path#d(d='M1193.375 302.875l44.6 77.25h-89.2z')
mask#k(x='0', y='0', width='89.201', height='77.25', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
path#e(d='M1610.8 513.3l34.14 59.128h-68.278z')
mask#l(x='0', y='0', width='68.277', height='59.13', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
path#f(d='M51.045 967.864l38.314 66.362H12.73z')
mask#m(x='0', y='0', width='76.629', height='66.362', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
path#g(d='M46.045 311.097l26.5 45.897H19.546z')
mask#n(x='0', y='0', width='52.997', height='45.897', fill='#fff')
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
g(style='mix-blend-mode:overlay', fill='none', fill-rule='evenodd', opacity='.35', stroke='#FFF')
use.svg-bg_element(mask='url(#h)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#a')
use.svg-bg_element(mask='url(#i)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#b')
use.svg-bg_element.opacity-anim(mask='url(#j)', stroke-width='6', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#c')
path.stroke-anim(d='M657.5 848.5l46 46', stroke-width='3', stroke-linecap='square')
path(d='M1360.5 1206.5l89-89M761.5 42.5l42-42', stroke-width='3', stroke-linecap='square')
use.svg-bg_element(mask='url(#k)', stroke-width='6', transform='rotate(90 1193.375 341.5)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#d')
use.svg-bg_element(mask='url(#l)', stroke-width='6', transform='rotate(45 1610.8 542.863)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#e')
use.svg-bg_element.rotate-anim(mask='url(#m)', stroke-width='6', transform='rotate(45 51.045 1001.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#f')
use.svg-bg_element(mask='url(#n)', stroke-width='6', transform='rotate(20 46.045 334.045)', xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#g')
.dropdown {
$itemHeight: $baseSize * 2;
width: 15em;
position: relative;
&__trigger {
display: inline-block;
position: absolute;
top: 0;
width: 100%;
height: $baseSize * 3;
padding: $baseSize;
box-sizing: border-box;
opacity: 0;
z-index: 2;
cursor: pointer;
&__icon {
position: absolute;
padding: ($baseSize / 2);
right: 0;
top: .2em;
}
&:focus {
top: -200em;
&~ .dropdown__trigger__icon .svg-icon {
opacity: .25;
}
&~ .dropdown__list__item--title {
height: $itemHeight;
}
&~ .dropdown__list {
li {
.dropdown__list__item {
height: $itemHeight;
&:hover {
transition-duration: $normalDuration;
opacity: 1;
background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em);
background-position: 100% bottom;
}
}
.dropdown__list__radio:checked + .dropdown__list__item {
padding: 0 ($baseSize / 2);
border: 1px dashed rgba($white, .2);
border-top: 0;
border-bottom: 0;
}
}
}
}
}
&__list {
overflow: auto;
max-height: $itemHeight * 5.5;
width: 100%;
transition: all .1s $bezier;
transition-delay: .15s;
&__radio {
display: none;
&:checked {
&+ .dropdown__list__item {
height: $itemHeight;
padding: 0 ($baseSize * 2) 0 ($baseSize / 2);
opacity: 1;
background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em);
animation: onActive .2s $bezier forwards;
}
}
}
&__item {
height: 0;
overflow: hidden;
padding: 0 ($baseSize / 2);
transition: all .1s $bezier;
transition-delay: .15s;
color: $white;
font-family: 'Playfair Display', serif;
font-style: italic;
cursor: pointer;
color: $white;
background-image: linear-gradient(90deg, rgba($white, .4) .10em, transparent .10em);
background-size: .4em 1px;
background-repeat: repeat-x;
background-position: 0 bottom;
opacity: .5;
&--title {
z-index: 1;
position: relative;
pointer-events: none;
opacity: 1;
background-image: linear-gradient(90deg, rgba($white, .8) .10em, transparent .10em);
}
&--amount {
}
}
}
}
.svg-icon {
transition: all .5s $bezier;
}
@keyframes onActive {
0%,
100% {
background-color: rgba($white, 0);
}
50% {
background-color: rgba($white, .25);
}
}// ¯\_(ツ)_/¯
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.