@charset "UTF-8"; /* * This file is imported into every component! * * Nothing in this file may output any CSS * without being explicitly called by outside code. */ /** * Note! This file is exported to `dist/scss/` in the published * node module, for consumer projects to import. * That means this file cannot import from any file that isn't * also exported, keeping the same relative path. * * Or, just don't import anything, that works too. */ /** * This can be used on a trigger element that opens a dropdown menu or a popover. */ /** * This mixin will mask out the content that is close to * the edges of a scrollable area. * - If the scrollable content has `overflow-y`, use `vertically` * as an argument for `$direction`. - If the scrollable content has `overflow-x`, use `horizontally` * as an argument for `$direction`. * * For the visual effect to work smoothly, we need to make sure that * the size of the fade-out edge effect is the same as the * internal paddings of the scrollable area. Otherwise, content of a * scrollable area that does not have a padding will fade out before * any scrolling has been done. * This is why this mixin already adds paddings, which automatically * default to the size of the fade-out effect. * This size defaults to `1rem`, but to override the size use * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height` * when `vertically` argument is set, and use * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width` * when `horizontally` argument is set. * Of course you can also programmatically increase and decrease the * size of these variables for each edge, based on the amount of * scrolling that has been done by the user. In this case, make sure * to add a custom padding where the mixin is used, to override * the paddings that are automatically added by the mixin in the * compiled CSS code. */ /** * This mixin will add an animated underline to the bottom of an `a` elements. * Note that you may need to add `all: unset;` –depending on your use case– * before using this mixin. */ /** * This mixin creates a cross-browser font stack. * - `sans-serif` can be used for the UI of the components. * - `monospace` can be used for code. * * ⚠️ If we change the font stacks, we need to update * 1. the consumer documentation in `README.md`, and * 2. the CSS variables of `--kompendium-example-font-family` * in the `