p0c-website

Proof of concepts for fun and profit
git clone https://git.in0rdr.ch/p0c-website.git
Log | Files | Refs | Pull requests |Archive | README | LICENSE

_position.scss (1134B)


      1 @charset "UTF-8";
      2 
      3 /// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
      4 ///
      5 /// @param {Position} $position [relative]
      6 ///   A CSS position value
      7 ///
      8 /// @param {Arglist} $coordinates [null null null null]
      9 ///   List of values that correspond to the 4-value syntax for the edges of a box
     10 ///
     11 /// @example scss - Usage
     12 ///   .element {
     13 ///     @include position(absolute, 0 null null 10em);
     14 ///   }
     15 ///
     16 /// @example css - CSS Output
     17 ///   .element {
     18 ///     left: 10em;
     19 ///     position: absolute;
     20 ///     top: 0;
     21 ///   }
     22 ///
     23 /// @require {function} is-length
     24 /// @require {function} unpack
     25 
     26 @mixin position($position: relative, $coordinates: null null null null) {
     27   @if type-of($position) == list {
     28     $coordinates: $position;
     29     $position: relative;
     30   }
     31 
     32   $coordinates: unpack($coordinates);
     33 
     34   $offsets: (
     35     top:    nth($coordinates, 1),
     36     right:  nth($coordinates, 2),
     37     bottom: nth($coordinates, 3),
     38     left:   nth($coordinates, 4)
     39   );
     40 
     41   position: $position;
     42 
     43   @each $offset, $value in $offsets {
     44     @if is-length($value) {
     45       #{$offset}: $value;
     46     }
     47   }
     48 }