@kanton-basel-stadt/designsystem
Version:
Unplugin to install the digital design system of the canton of Basel-Stadt
97 lines (83 loc) • 3.83 kB
CSS
/**
* When the .is-link class is added to any button, it will automatically place
* a matching icon based on the value of the href attribute.
* By default, the right pointing arrow is used.
*/
@layer components {
.button.is-link {
&:before,
&:after {
/* The symbols from the font should always be bold. */
@apply font-bold;
}
}
/* Default icon. */
.button.is-link:before,
.group\/button .button.is-link:before {
@apply content-arrow-east;
}
.group\/button:hover .button.is-link:before,
.button.is-link:hover:before {
@apply animate-jump-x;
}
/* External starts with http. */
.button.is-link[href^='http']:before,
.group\/button[href^='http'] .button.is-link:before {
@apply order-last content-arrow-north-east;
}
.button.is-link[href^='http']:hover:before,
.group\/button[href^='http']:hover .button.is-link:before {
@apply animate-jump-xy;
}
/* Anchor starts with #. */
.button.is-link[href^='#']:before,
.group\/button[href^='#'] .button.is-link:before {
@apply order-first mt-[0.1em] content-arrow-south;
}
.button.is-link[href^='#']:hover:before,
.group\/button[href^='#']:hover .button.is-link:before {
@apply animate-jump-y;
}
/* Button contains a link to a downloadable file */
.button.is-link[href*='.pdf'],
.button.is-link[href*='.qdf'],
.group\/button[href*='.pdf'] .button.is-link,
.group\/button[href*='.qdf'] .button.is-link {
&:before {
@apply col-start-1 row-start-1 content-arrow-south;
}
&:after {
@apply !content-underscore-long;
@apply col-start-1 row-start-1 flex pl-[0.12em];
@apply translate-y-[0.5em];
}
}
.button.is-link[href*='.pdf']:hover:before,
.button.is-link[href*='.qdf']:hover:before,
.group\/button[href*='.pdf']:hover .button.is-link:before,
.group\/button[href*='.qdf']:hover .button.is-link:before {
@apply !animate-jump-y;
}
/* Email starts with mailto. */
.button.is-link[href^='mailto']:before,
.group\/button[href^='mailto'] .button.is-link:before {
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 4C1.44772 4 1 4.44772 1 5V15C1 15.5523 1.44772 16 2 16H18C18.5523 16 19 15.5523 19 15V5C19 4.44772 18.5523 4 18 4H2ZM3.9741 5.61953C3.48782 5.35769 2.88136 5.53963 2.61952 6.0259C2.35769 6.51217 2.53963 7.11863 3.0259 7.38047L9.5259 10.8805C9.82187 11.0398 10.1781 11.0398 10.4741 10.8805L16.9741 7.38047C17.4604 7.11863 17.6423 6.51217 17.3805 6.0259C17.1186 5.53963 16.5122 5.35769 16.0259 5.61953L10 8.86424L3.9741 5.61953Z' fill='currentColor' /%3E%3C/svg%3E%0A") no-repeat 50% 50%;
mask-size: 1.2em 1.2em;
@apply order-first w-[1em] h-[1em] content-empty bg-current;
}
.button.is-link[href^='mailto']:hover:before,
.group\/button[href^='mailto']:hover .button.is-link:before {
@apply animate-jump-scale;
}
/* Phone starts with tel:. */
.button.is-link[href^='tel:']:before,
.group\/button[href^='tel:'] .button.is-link:before {
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8636 12.3397L11.5365 12.9893C9.2889 11.8529 7.90088 10.5472 7.09295 8.51216L7.71506 5.15026L6.53952 2H3.50898C2.59763 2 1.88019 2.75867 2.01673 3.6663C2.35605 5.93172 3.35789 10.0401 6.28502 12.9893C9.35919 16.0866 13.7875 17.4306 16.2242 17.9654C17.1654 18.1713 18 17.4322 18 16.4611V13.5437L14.8636 12.3397Z' fill='currentColor'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
mask-size: 1.25em 1.25em;
@apply order-first w-[1em] h-[1em] bg-current content-empty;
}
.button.is-link[href^='tel:']:hover:before,
.group\/button[href^='tel:']:hover .button.is-link:before {
@apply animate-wiggle;
}
}