Asta Valentaite

Accordion 

<div class="c-accordion relative bg-white shadow-fill" data-behaviour="Accordion">
    <ul class="list-reset px-4 pb-4">
        <li class="relative overflow-hidden border-t-1 border-black-5">
            <button data-target="#e0" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
					Personal Shopping
					<i class="block relative c-accordion__icon"></i>
				</button>
            <div id="e0">
                <div class="py-3 px-2 text-black-50">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                </div>
            </div>
        </li>
        <li class="relative overflow-hidden border-t-1 border-black-5">
            <button data-target="#e1" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
					Styling
					<i class="block relative c-accordion__icon"></i>
				</button>
            <div id="e1">
                <div class="py-3 px-2 text-black-50">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                </div>
            </div>
        </li>
        <li class="relative overflow-hidden border-t-1 border-black-5">
            <button data-target="#e2" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
					Modelling
					<i class="block relative c-accordion__icon"></i>
				</button>
            <div id="e2">
                <div class="py-3 px-2 text-black-50">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                </div>
            </div>
        </li>
        <li class="relative overflow-hidden border-t-1 border-black-5">
            <button data-target="#e3" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
					Consulting
					<i class="block relative c-accordion__icon"></i>
				</button>
            <div id="e3">
                <div class="py-3 px-2 text-black-50">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                </div>
            </div>
        </li>
        <li class="relative overflow-hidden border-t-1 border-black-5">
            <button data-target="#e4" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
					Endorsements
					<i class="block relative c-accordion__icon"></i>
				</button>
            <div id="e4">
                <div class="py-3 px-2 text-black-50">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
                </div>
            </div>
        </li>
    </ul>
</div>
 
<div class="c-accordion relative bg-white shadow-fill" data-behaviour="Accordion">
	<ul class="list-reset px-4 pb-4">
		{% for row in panels %}
			<li class="relative overflow-hidden border-t-1 border-black-5">
				<button data-target="#e{{ loop.index0 }}" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
					{{ row.heading }}
					<i class="block relative c-accordion__icon"></i>
				</button>
				<div id="e{{ loop.index0 }}">
					<div class="py-3 px-2 text-black-50">
						{{ row.body }}
					</div>
				</div>
			</li>
		{% endfor %}
	</ul>
</div>
 
{
  "siteTitle": "Asta Valentaite",
  "copyright": "© 2017 Asta Valentaite. All rights reserved.",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "objects": "/02-objects/",
            "global": "../03-global/",
            "components": "/04-components/",
            "pages": "/05-pages/",
            "macros": "/macros/",
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "sitemenu": [
    {
      "title": "About",
      "slug": "/components/preview/about"
    },
    {
      "title": "Fashion",
      "slug": "/components/preview/press"
    },
    {
      "title": "Beauty",
      "slug": "/components/preview/post"
    },
    {
      "title": "Lifestyle",
      "slug": "/components/preview/vertical"
    },
    {
      "title": "Collaborations",
      "slug": "/components/preview/collaborations"
    },
    {
      "title": "Press",
      "slug": "/components/preview/press"
    }
  ],
  "panels": [
    {
      "heading": "Personal Shopping",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "heading": "Styling",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "heading": "Modelling",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "heading": "Consulting",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    },
    {
      "heading": "Endorsements",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
    }
  ]
}
  • Content: 
    [data-enhanced] {
	overflow: hidden;
	position: relative;

	&[aria-hidden='false'] {
		display: block;
	}

	&[aria-hidden='true'] {
		display: none;
	}
}

.c-accordion__icon {
	width: rem(10px);
	height: rem(10px);
	//pointer-events: none;

	&::before,
	&::after {
		@apply .block .absolute .pin-l .w-full .h-px;

		content: ' ';
		transform-origin: 50%;
		background-color: currentColor;
		top: 50%;
		transform: translate3d(0, -50%, 0);
		transition: transform 300ms ease, background-color 300ms ease;
	}

	&::after {
		transform: translate3d(0, -50%, 0) rotate(90deg);
	}
}

[data-accordion-btn] {
	transition: color 300ms ease;

	.c-accordion__icon {
		transition: transform 300ms ease;
	}

	&:focus {
		outline: 0;

		.c-accordion__icon {
			transform: scale(1.5);
		}
	}

	&.is-active {
		@apply .text-blush;

		.c-accordion__icon {
			&::after {
				transform: translate3d(0, -50%, 0) rotate(0deg);
			}
		}
	}
}
  • URL: /components/raw/accordion/_accordion.scss
  • Filesystem Path: src/templates/04-components/accordion/_accordion.scss
  • Size: 920 Bytes

There are no notes for this item.