hrm_ui_lib 0.0.1-beta.0

package/assets/styles/helpers/_mixin.scss

@@ -0,0 +1,581 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "sass:string";
+
+//fonts
+@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
+  @font-face {
+    font-family: string.quote($font-name);
+    src: url($file-name + '.ttf') format('truetype');
+    font-weight: $weight;
+    font-style: $style;
+  }
+}
+
+/*******************/
+/********SPACE******/
+/*******************/
+@function getSize($size) {
+  @return var(--size-#{$size});
+}
+
+/**padding**/
+@mixin padding($size) {
+  padding: getSize($size);
+}
+
+@mixin padding-top($size) {
+  padding-top: getSize($size);
+}
+
+@mixin padding-bottom($size) {
+  padding-bottom: getSize($size);
+}
+
+@mixin padding-left($size) {
+  padding-left: getSize($size);
+}
+
+@mixin padding-right($size) {
+  padding-right: getSize($size);
+}
+
+@mixin padding-horizontal($size) {
+  padding-left: getSize($size);
+  padding-right: getSize($size);
+}
+
+@mixin padding-vertical($size) {
+  padding-top: getSize($size);
+  padding-bottom: getSize($size);
+}
+
+/**margin**/
+@mixin margin($size) {
+  margin: getSize($size);
+}
+
+@mixin margin-top($size) {
+  margin-top: getSize($size);
+}
+
+@mixin margin-bottom($size) {
+  margin-bottom: getSize($size);
+}
+
+@mixin margin-left($size) {
+  margin-left: getSize($size);
+}
+
+@mixin margin-right($size) {
+  margin-right: getSize($size);
+}
+
+@mixin margin-horizontal($size) {
+  margin-left: getSize($size);
+  margin-right: getSize($size);
+}
+
+@mixin margin-vertical($size) {
+  margin-top: getSize($size);
+  margin-bottom: getSize($size);
+}
+
+/*******************/
+/********COLOR******/
+/*******************/
+@function getColor($color, $size) {
+  @return var(--#{$color}-#{$size});
+}
+
+/**color**/
+@mixin color($color, $size) {
+  color: getColor($color, $size);
+}
+
+/**background-color**/
+@mixin background-color($color, $size) {
+  background-color: getColor($color, $size);
+}
+
+/*******************/
+/*****Typography****/
+/*******************/
+
+/**font-size**/
+@function getFontSize($size) {
+  @return var(--font-size-#{$size});
+}
+
+@mixin font($size) {
+  font-size: getFontSize($size);
+}
+
+/**font-weight**/
+@function getFontWeight($size) {
+  @return var(--font-weight-#{$size});
+}
+
+@mixin font-weight($size) {
+  font-weight: getFontWeight($size);
+}
+
+//animation
+
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+  @-ms-keyframes #{$animation-name} {
+    @content;
+  }
+  @-o-keyframes #{$animation-name} {
+    @content;
+  }
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};
+}
+
+/*animation mixin usage
+
+// Define animation name, and properties
+@include keyframes(fade-out) {
+  0% { opacity: 1; }
+  90% { opacity: 0; }
+}
+.element {
+  @include animation('fade-out 5s 3');
+}
+*/
+
+
+//retina images
+@mixin image-2x($image, $width, $height) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+  (-o-min-device-pixel-ratio: 2.6/2),
+  (-webkit-min-device-pixel-ratio: 1.3),
+  (min-device-pixel-ratio: 1.3),
+  (min-resolution: 1.3dppx) {
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}
+
+/*retina images mixin usage
+
+div.logo {
+  background: url("logo.png") no-repeat;
+  @include image-2x("logo2x.png", 100px, 25px);
+}
+*/
+
+
+//gradients
+@mixin background-gradient($start-color, $end-color, $orientation) {
+  background: $start-color;
+
+  @if $orientation == 'vertical' {
+    background: -webkit-linear-gradient(top, $start-color, $end-color);
+    background: linear-gradient(to bottom, $start-color, $end-color);
+  } @else if $orientation == 'horizontal' {
+    background: -webkit-linear-gradient(left, $start-color, $end-color);
+    background: linear-gradient(to right, $start-color, $end-color);
+  } @else {
+    background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
+    background: radial-gradient(ellipse at center, $start-color, $end-color);
+  }
+}
+
+/*gradient mixin usage
+.foo {
+  @include background-gradient(red, black, 'vertical');
+}
+*/
+
+//positioning
+@function parseDirections($directions) {
+  $top: 0;
+  $bottom: 0;
+  $left: 0;
+  $right: 0;
+
+  @if list.length($directions) > 0 {
+    $d1: list.nth($directions, 1);
+    $top: $d1;
+    $bottom: $d1;
+    $left: $d1;
+    $right: $d1;
+  }
+  @if list.length($directions) > 1 {
+    $d2: list.nth($directions, 2);
+    $left: $d2;
+    $right: $d2;
+  }
+  @if list.length($directions) > 2 {
+    $d3: list.nth($directions, 3);
+    $bottom: $d3;
+  }
+  @if list.length($directions) > 3 {
+    $d4: list.nth($directions, 4);
+    $left: $d4
+  }
+
+  @return (
+          top: $top,
+          bottom: $bottom,
+          left: $left,
+          right: $right
+  );
+}
+
+@mixin position($positions...) {
+  $positions: parseDirections($positions);
+  top: map.get($positions, 'top');
+  right: map.get($positions, 'right');
+  bottom: map.get($positions, 'bottom');
+  left: map.get($positions, 'left');
+}
+
+@mixin absolute($positions...) {
+  position: absolute;
+  @include position($positions...);
+}
+
+@mixin fixed($positions...) {
+  position: fixed;
+  @include position($positions...);
+}
+
+@mixin sticky($positions...) {
+  position: sticky;
+  @include position($positions...);
+}
+
+/*positioning element mixin usage
+.foo {
+ @include position(absolute, top right left);
+}
+*/
+
+//centering element
+@mixin center($position) {
+  position: absolute;
+
+  @if $position == 'vertical' {
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+  } @else if $position == 'horizontal' {
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translate(-50%);
+  } @else if $position == 'both' {
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+}
+
+/*centering element mixin usage
+.foo {
+  @include center(both);
+}
+*/
+
+//clearfix
+%clearfix {
+  *zoom: 1;
+
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+/*clearfix mixin usage
+.container-with-floated-children {
+        @extend %clearfix;
+}
+*/
+
+
+//media query
+$breakpoints: (
+        "phone": 400px,
+        "phone-wide": 480px,
+        "phablet": 576px,
+        "tablet-small": 640px,
+        "tablet": 768px,
+        "tablet-wide": 1024px,
+        "desktop": 1248px,
+        "desktop-wide": 1440px
+);
+@mixin screen($width, $type: min) {
+  @if map.has-key($breakpoints, $width) {
+    $width: map.get($breakpoints, $width);
+    @if $type == max {
+      $width: $width - 1px;
+    }
+    @media only screen and (#{$type}-width: $width) {
+      @content;
+    }
+  }
+}
+
+/*media queries usage
+
+.site-header {
+    @include screen('tablet-wide') {
+        padding-top: 4rem;
+        font-size: 2.4rem;
+    }
+}
+
+*/
+
+//truncation
+@mixin truncate($truncation-boundary) {
+  max-width: $truncation-boundary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// --------------------------------------------------
+// Flexbox SASS mixins
+// The spec: http://www.w3.org/TR/css3-flexbox
+// --------------------------------------------------
+
+// Flexbox display
+@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+// Inline flex display
+@mixin inline-flex {
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // Box-Flex only supports a flex-grow value so lets grab the
+  // first item in the list and just return that.
+  @if meta.type-of($fg) == 'list' {
+    $fg-boxflex: list.nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row (default) | row-reverse | column | column-reverse
+@mixin flex-direction($direction: row) {
+  @if $direction == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $direction == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $direction == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $direction;
+  -ms-flex-direction: $direction;
+  flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: nowrap;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}