@aegov/design-system/dist/blocks.js

A design system for the Government of the United Arab Emirates. The design system has been created based on research and information collected from in-depth studies conducted on user behaviour and benchmarking best practices. The primary use of this desig

module.exports = {".aegov-header":{"@apply before:from-primary-400 before:to-primary-600 relative pt-2 before:absolute before:top-0 before:h-2 before:w-full before:bg-gradient-to-b":true},".custom-divide-common":{"@apply before:absolute before:end-0 before:top-2/4 before:-translate-y-2/4":true},".custom-divide > *":{"@apply relative inline-flex":true},".custom-divide > *:not(:last-child)":{"@apply custom-divide-common before:bg-aeblack-100 me-3 pe-3 before:h-3.5 before:w-px xl:me-4 xl:pe-4":true},".custom-divide-sm > *:not(:last-child)":{"@apply me-1.5 pe-1.5 before:h-3.5 before:w-px xl:me-2 xl:pe-2":true},".logos":{"@apply flex flex-shrink-0 items-center":true},".logos .logo-item":{"@apply relative":true},".logos .logo-item:not(:last-child)":{"@apply me-4 md:me-5 lg:me-6 xl:me-10":true},".logo img":{"@apply block max-h-12 sm:max-h-14 md:max-h-16 lg:max-h-[4.688rem] xl:max-h-20 2xl:max-h-24 max-w-[8.75rem] sm:max-w-[10.625rem] md:max-w-[11.25rem] lg:max-w-[13rem] xl:max-w-[15rem] 2xl:max-w-[25rem]":true},".secondary-logo":{"@apply h-8 md:h-12 lg:h-14 xl:h-[4.5rem] object-contain":true},".header-top-right":{"@apply relative min-w-10 md:min-w-12 lg:min-w-16 xl:min-w-20 min-h-10 md:min-h-12 xl:min-h-20":true},".header-top-right > a":{"@apply absolute -top-2 right-0 min-w-max min-h-max":true},".header-top-right .emblem-logo":{"@apply w-12 h-12 md:w-14 md:h-14 lg:w-[4.5rem] lg:h-[4.5rem] xl:w-24 xl:h-24 max-w-max":true},".hamburger-icon svg":{"@apply inline-flex h-8 w-8":true},".header-common-links li:not(:last-child)":{"@apply before:bg-primary-300":true},".header-common-links a":{"@apply text-aeblack-700 hover:text-primary-500 flex items-center gap-3 text-sm font-medium no-underline":true},".header-navs":{"@apply bg-aeblack-50":true},".main-navigation .nav-menu > .menu-item > a":{"@apply text-aeblack-800 inline-flex items-center rounded-none border-b border-transparent font-bold md:border-b-2 lg:h-14 lg:px-2 lg:text-sm xl:h-16 xl:border-b-[0.188rem] xl:px-3 xl:text-base 2xl:border-b-4 2xl:text-lg delay-200":true},".main-navigation .menu-item a":{"@apply no-underline":true},".main-navigation .menu-item.active-page > a":{"@apply border-primary-900 text-primary-900":true},".main-navigation .menu-item.menu-item-has-children > a":{"@apply inline-flex items-center gap-2 transition-colors lg:pe-6 xl:pe-8 2xl:pe-9":true},".main-navigation .menu-item.menu-item-has-children .submenu-btn":{"@apply focus:ring-primary-support-400 relative inline-block focus:outline-none focus:ring-2 focus:ring-offset-0 lg:-ms-5 xl:-ms-8 lg:w-4 xl:w-6 lg:h-14 xl:h-16 [&.active-ic-btn]:ring-2 [&.active-ic-btn]:ring-primary-support-400 [&.inactive-ic-btn]:!ring-0":true},".main-navigation .menu-item.menu-item-has-children .submenu-btn svg, .main-navigation .menu-item.menu-item-has-children .submenu-btn img":{"@apply lg:w-3 lg:h-3 mx-auto":true},"[dir=\"rtl\"] .aegov-header .main-navigation .nav-menu > .menu-item > a":{"@apply font-medium lg:font-bold lg:text-xs xl:text-sm 2xl:text-base":true},"[dir=\"rtl\"] .aegov-header .main-navigation .nav-menu > .menu-item.menu-item-has-children > a":{"@apply gap-1 lg:gap-2":true},"[dir=\"rtl\"] .aegov-header .main-navigation .nav-menu > .menu-item:first-child > a > span":{"display":"none"},".has-link-icon a":{"@apply inline-flex items-center gap-2 no-underline":true},".has-link-icon a svg":{"@apply h-4 w-4 flex-shrink-0 xl:h-5 xl:w-5":true},".header-navs-right li a":{"@apply text-primary-600 hover:text-primary-500 text-sm font-bold lg:text-xs xl:text-sm":true},".submenu":{"@apply bg-whitely-50":true},".submenu .submenu-title":{"@apply capitalize lg:mb-4 xl:mb-5 2xl:mb-6":true},".submenu li a":{"@apply text-aeblack-900 hover:text-primary-700 hover:underline inline-block px-3 py-2 text-sm transition-colors xl:text-base":true},".submenu-title":{"@apply text-primary-500 font-bold lg:text-sm xl:text-base":true},".rounded-bordered":{"@apply border-aeblack-100 rounded-lg border":true},".aegov-backdrop + .aegov-backdrop, .aegov-modal-backdrop + .aegov-modal-backdrop":{"@apply z-50":true},".aegov-footer":{"@apply bg-aeblack-50 before:from-primary-400 before:to-primary-600 relative pt-2 before:absolute before:top-0 before:h-2 before:w-full before:bg-gradient-to-b":true},".aegov-footer a":{"@apply text-aeblack-700 hover:text-primary-600 text-sm font-normal no-underline xl:text-base":true},".aegov-footer .accordion-title button":{"@apply !text-primary-600 text-base font-bold md:text-lg lg:text-xl":true},".aegov-footer .accordion-title button svg":{"@apply text-aeblack-600":true},".aegov-footer .accordion-title button.accordion-active":{"@apply text-primary-700":true},".aegov-footer .accordion-title button.accordion-active svg":{"@apply text-primary-700":true},".aegov-footer .accordion-content-body":{"@apply space-y-3":true},".footer-contact":{"@apply max-lg:text-center max-sm:py-8":true},".footer-contact li":{"@apply w-full justify-center py-3 xl:px-8":true},".footer-contact li > a":{"@apply text-aeblack-800 hover:text-aeblack-600 font-bold":true},".footer-contact li svg":{"@apply inline-block h-4 w-4 flex-shrink-0":true},".inline-with-gap":{"@apply inline-flex items-center gap-3":true},".social-sharing":{"@apply flex items-center gap-6":true},".social-sharing a":{"@apply text-aeblack-600 hover:text-aeblack-500":true},".social-sharing svg":{"@apply inline-block h-8 w-8":true},".footer-bottom":{"@apply border-aeblack-100 border-t max-lg:text-center":true},".aegov-hero":{"@apply w-full m-auto":true},".aegov-hero picture img":{"@apply w-full":true},".aegov-hero .hero-viewport":{"@apply overflow-hidden":true},".aegov-hero .hero-container":{"backfaceVisibility":"hidden","touchAction":"pan-y pinch-zoom","@apply flex rtl:flex-row-reverse":true},".aegov-hero .hero-slide":{"@apply min-w-0 flex-[0_0_100%]":true},".aegov-hero .hero-controls":{"@apply flex items-center justify-between gap-3 lg:absolute lg:bottom-5 xl:bottom-7 mt-2 md:mt-4 lg:mt-0 px-4 md:px-8 lg:px-0 lg:start-12 xl:start-[4.25rem]":true},".aegov-hero .hero-buttons":{"@apply flex gap-3 items-center":true},".aegov-hero .hero-button":{"@apply appearance-none bg-transparent touch-manipulation inline-flex no-underline cursor-pointer border-0 p-0 m-0 shadow-none w-7 h-7 z-[1] items-center justify-center rounded-full":true},".aegov-hero .hero-button:disabled":{"@apply opacity-40":true},".aegov-hero .hero-dots":{"@apply flex flex-wrap justify-end items-center":true},".aegov-hero .hero-dots button":{"@apply appearance-none bg-transparent touch-manipulation inline-flex no-underline cursor-pointer border-0 p-0 m-0 shadow-none w-6 h-6 items-center justify-center rounded-3xl text-[0px] after:bg-aeblack-800/30 after:w-3 after:h-3 after:rounded-full after:flex after:items-center":true},".aegov-hero .hero-dots button.hero-dot-selected:after":{"@apply bg-aeblack-800":true},".aegov-hero .hero-row":{"@apply flex md:flex-row flex-col-reverse bg-primary-100 rtl:[direction:rtl]":true},".aegov-hero .hero-col-left":{"@apply relative sm:basis-2/4 md:basis-8/12 lg:basis-2/4 pt-5 xl:pt-12 px-8 xl:px-12 pb-10 lg:pb-24 xl:pb-32 flex items-center md:before:absolute md:before:inset-0 md:before:z-10 md:before:w-[130%] md:before:h-full md:before:bg-gradient-to-r rtl:md:before:bg-gradient-to-l md:before:from-primary-100 md:before:from-80%":true},".aegov-hero .hero-col-right":{"@apply sm:basis-2/4 md:basis-4/12 lg:basis-2/4 relative":true},".aegov-hero .hero-col-right img":{"@apply md:absolute md:inset-0 w-full md:h-full object-cover 2xl:aspect-[4/2.8] 2xl:static":true},".aegov-hero .hero-col-content":{"@apply space-y-4 xl:space-y-5 text-center md:text-left rtl:md:text-right relative z-20":true},".aegov-hero .hero-hero-title-wrap":{"@apply absolute top-6 md:top-2/4 md:-translate-y-2/4 text-center px-4 sm:px-0 left-0 right-0 sm:right-auto sm:text-left rtl:sm:text-right sm:start-6 md:start-8 lg:start-12 xl:start-[4.25rem] space-y-4 md:space-y-5 xl:space-y-10 rtl:[direction:rtl]":true},".aegov-hero .hero-title":{"@apply text-h4 md:text-h3 xl:text-h2 text-aegold-700 font-inter rtl:font-alexandria font-semibold line-clamp-2":true},".aegov-hero .hero-hero-title":{"@apply text-h4 md:text-h3 lg:text-h1 xl:text-display font-light text-whitely-50 sm:w-7/12 lg:w-[54%] xl:w-7/12 font-inter rtl:font-alexandria line-clamp-2":true},".aegov-hero .hero-description":{"@apply text-h6 md:text-h5 xl:text-h4 text-aegold-700 font-inter rtl:font-notokufi font-extralight line-clamp-3":true},".has-ratio-image":{"@apply 2xl:[&_picture_img]:aspect-[4/2.8] [&_picture_img]:object-cover [&_picture_img]:!w-full":true},".hero-dots ul":{"@apply flex items-center mt-0 space-x-0":true},".hero-dots ul li":{"@apply flex":true},".hero-dots ul li.slick-active button::after":{"@apply bg-aeblack-800":true},".aegov-hero .slick-slide":{"@apply rtl:float-left":true},".aegov-hero .slick-slide .slick-track, .aegov-hero .slick-slide .slick-list":{"direction":"ltr"},".aegov-hero-static":{"@apply py-8 md:py-12 xl:py-16 bg-no-repeat bg-cover":true},".aegov-hero-static .hero-static-header":{"@apply text-center max-w-4xl mx-auto mb-8 md:mb-10 lg:mb-12 xl:mb-14":true},".aegov-hero-static .hero-static-title-sm":{"@apply uppercase text-primary-700 font-inter text-base md:text-lg xl:text-xl font-extralight mb-4":true},".aegov-hero-static .hero-static-title":{"@apply text-primary-500 font-inter text-h4 md:text-h3 lg:text-h2 xl:text-h1 font-extrabold mb-10 md:mb-12 xl:mb-14":true},".aegovs-slider-style .slick-dots":{"@apply flex items-center justify-center gap-3 mt-4 lg:mt-6 xl:mt-8 2xl:mt-10":true},".aegovs-slider-style .slick-dots button":{"@apply h-3 w-3 rounded-full bg-aeblack-400 text-[0px] focus:outline-none focus-visible:ring focus-visible:ring-primary-400":true},".aegovs-slider-style .slick-dots .slick-active button":{"@apply bg-primary-600 ring-4 ring-primary-400/30":true},".slick-slider .slick-track, .slick-slider .slick-list":{"direction":"ltr"},"[dir=\"rtl\"] .slick-slider .slick-slide":{"direction":"rtl"}};