_members.scss 2.02 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
@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
///--------------------------

arturo's avatar
arturo committed
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
/// 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);
}

52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
/// 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;
  }
}
arturo's avatar
arturo committed
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

/// 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;
}