@use "./_variables" as *; /// Functions ///-------------------------- /// Add alpha channel to a color /// @access public /// @param {Color} $color - color to work with /// @param {Number} $percentage - percentage of `$color` opacity /// @return {Color} $color @function mixAlpha($color, $percentage) { @return rgba($color, $percentage); } /// Add spacing length according to given unit /// @access public /// @param {Number} $num /// @return {Size} $em @function space-x($num) { @return $num * $space-unit; } /// Mixins ///-------------------------- /// UX/UI rules regarding element that can be clicked and /// others than <a/> tags @mixin clickable() { cursor: pointer; &:focus { outline: 0; } } @mixin unclickable() { cursor: default; &:focus { outline: 0; } } @mixin unselectable() { user-select: none; } @mixin disabled() { cursor: not-allowed; &:focus { outline: 0; } } @mixin gradient($primary, $secondary, $direction) { background: linear-gradient($direction, $primary, $secondary); } /// Place contextualised element (&) at the root, /// prefixed with left handed class /// @access public @mixin left-handed() { @at-root .left-handed & { @content; } } /// Place contextualised element (&) at the root, /// prefixed with right handed class /// @access public @mixin right-handed() { @at-root .right-handed & { @content; } } /// Centering an element (you'll have to change the position /// of the element though) @mixin centered() { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } /// Mixin from "bootstrap v4" /// @link https://getbootstrap.com/docs/4.3/utilities/clearfix/ @mixin clearfix() { &::after { display: block; content: ""; clear: both; } } /// Reverse an element @mixin reversed() { transform: scaleX(-1); } /// Add led effect with the input color @mixin led($color) { color: $color; text-shadow: 0 0 4px brighten($color, 90); } /// Extend element to fit all four positions @mixin fit-positions() { top: 0; right: 0; bottom: 0; left: 0; }