@nappr/nappr-styles 0.3.1 → 0.3.3

package/lib/funcs/_rem.scss

@@ -1,104 +0,0 @@
-@use 'sass:math';
-@use 'sass:meta' as meta;
-@use 'sass:list' as list;
-
-$rem-px-only: true !default;
-$rem-fallback: true !default;
-
-/* ------------------------------------
-
-SOURCE: https://github.com/pierreburel/sass-rem
-
------------------------------------- */
-@function rem-separator($list, $separator: false) {
-  @if $separator == 'comma' or $separator == 'space' {
-    @return list.append($list, null, $separator);
-  }
-
-  @if meta.function-exists('list-separator') == true {
-    @return list.separator($list);
-  }
-
-  // list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
-  $test-list: ();
-
-  @each $item in $list {
-    $test-list: list.append($test-list, $item, space);
-  }
-
-  @return if($test-list == $list, space, comma);
-}
-
-@mixin rem-baseline($zoom: 100%) {
-  $div: math.div($zoom, $body-font-size);
-
-  font-size: $div * $rem-baseline;
-}
-
-@function rem-convert($to, $values...) {
-  $result: ();
-  $separator: rem-separator($values);
-
-  @each $value in $values {
-    @if meta.type-of($value) == 'number' and math.unit($value) == 'rem' and $to == 'px' {
-      $div: math.div($value, 1rem);
-      $result: list.append($result, $div * $rem-baseline, $separator);
-    }
-
-    @else if
-      meta.type-of($value) ==
-      'number' and
-      math.unit($value) ==
-      'px' and
-      $to ==
-      'rem' {
-      $div: math.div($value, $rem-baseline);
-      $result: list.append($result, $div * 1rem, $separator);
-    }
-
-    @else if meta.type-of($value) == 'list' {
-      $value-separator: rem-separator($value);
-      $value: rem-convert($to, $value...);
-      $value: rem-separator($value, $value-separator);
-      $result: list.append($result, $value, $separator);
-    }
-
-    @else {
-      $result: list.append($result, $value, $separator);
-    }
-  }
-
-  @return if(list.length($result) == 1, list.nth($result, 1), $result);
-}
-
-@function convert($values...) {
-  @if $rem-px-only {
-    @return rem-convert(px, $values...);
-  }
-
-  @else {
-    @return rem-convert(rem, $values...);
-  }
-}
-
-
-
-@mixin rem($properties, $values...) {
-  @if type-of($properties) == 'map' {
-    @each $property in map-keys($properties) {
-      @include rem.convert($property, map-get($properties, $property));
-    }
-  }
-
-  @else {
-    @each $property in $properties {
-      @if $rem-fallback or $rem-px-only {
-        #{$property}: rem-convert(px, $values...);
-      }
-
-      @if not $rem-px-only {
-        #{$property}: rem-convert(rem, $values...);
-      }
-    }
-  }
-}

package/lib/funcs/_strings.scss

@@ -1,35 +0,0 @@
-@use "sass:string";
-
-@function contain($list, $value) {
-  @return not not index($list, $value);
-}
-
-@function capitalize($string) {
-  @return to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
-}
-
-@function uncapitalize($string) {
-  @return to-lower-case(string.slice($string, 1, 1)) + string.slice($string, 2);
-}
-
-@function camelize($string) {
-  $progress: $string;
-  $result: '';
-  $exclude: ' ', '-', '–', '—', '_', ',', ';', ':', '.';
-
-  @while str-length($progress) > 0 {
-    $char: string.slice($progress, 1, 1);
-
-    @if contain($exclude, $char) {
-      $progress: capitalize(string.slice($progress, 2, 2)) +
-        string.slice($progress, 3);
-    }
-
-    @else {
-      $result: $result + $char;
-      $progress: string.slice($progress, 2);
-    }
-  }
-
-  @return $result;
-}

package/lib/grid/_.scss

@@ -1,4 +0,0 @@
-@use 'col';
-@use 'row';
-@use 'wrap';
-@use 'square';

package/lib/grid/_col.scss

@@ -1,117 +0,0 @@
-@use '../mixins/dimensions' as dimensions;
-@use '../helpers/flexbox';
-
-.columns {
-  @extend .flex-columns;
-}
-
-.columns .col-100,
-.columns .col-80,
-.columns .col-75,
-.columns .col-66,
-.columns .col-50,
-.columns .col-40,
-.columns .col-33,
-.columns .col-25,
-.columns .col-20,
-.columns .col-1of1,
-.columns .col-2of2,
-.columns .col-3of3,
-.columns .col-4of4,
-.columns .col-5of5 {
-  $size: 100%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-80,
-.columns .col-4of5 {
-  $size: 78.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-75,
-.columns .col-3of4 {
-  $size: 73.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-66,
-.columns .col-2of3 {
-  $size: 65.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-60,
-.columns .col-3of5 {
-  $size: 59.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-50,
-.columns .col-1of2,
-.columns .col-2of4 {
-  $size: 47.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-40,
-.columns .col-2of5 {
-  $size: 38%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-33,
-.columns .col-1of3 {
-  $size: 31%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-25,
-.columns .col-1of4 {
-  $size: 23%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-20,
-.columns .col-1of5 {
-  $size: 18%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}
-
-.columns .col-0 {
-  $size: 0%;
-
-  @extend .flex-1;
-
-  @include dimensions.withWidth($size);
-}

package/lib/grid/_row.scss

@@ -1,117 +0,0 @@
-@use '../mixins/dimensions' as dimensions;
-@use '../helpers/flexbox';
-
-.rows {
-  @extend .flex-rows;
-}
-
-.rows .row-100,
-.rows .row-80,
-.rows .row-75,
-.rows .row-66,
-.rows .row-50,
-.rows .row-40,
-.rows .row-33,
-.rows .row-25,
-.rows .row-20,
-.rows .row-1of1,
-.rows .row-2of2,
-.rows .row-3of3,
-.rows .row-4of4,
-.rows .row-5of5 {
-  $size: 100%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-80,
-.rows .row-4of5 {
-  $size: 78.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-75,
-.rows .row-3of4 {
-  $size: 73.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-66,
-.rows .row-2of3 {
-  $size: 65.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-60,
-.rows .row-3of5 {
-  $size: 59.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-50,
-.rows .row-1of2,
-.rows .row-2of4 {
-  $size: 47.5%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-40,
-.rows .row-2of5 {
-  $size: 38%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-33,
-.rows .row-1of3 {
-  $size: 31%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-25,
-.rows .row-1of4 {
-  $size: 23%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-20,
-.rows .row-1of5 {
-  $size: 18%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}
-
-.rows .row-0 {
-  $size: 0%;
-
-  @extend .flex-1;
-
-  @include dimensions.withHeight($size);
-}

package/lib/grid/_square.scss

@@ -1,34 +0,0 @@
-.square-grid {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.square-grid-2 {
-  margin: 0 1% 1% 0;
-  max-width: 49%;
-  min-width: 49%;
-  width: 49%;
-}
-
-.square-grid-3 > * {
-  margin: 0 1% 1% 0;
-  max-width: 32%;
-  min-width: 32%;
-  width: 32%;
-}
-
-.square-grid-4 > * {
-  margin: 0 1% 1% 0;
-  max-width: 24%;
-  min-width: 24%;
-  width: 24%;
-}
-
-.square-grid-5 > * {
-  margin: 0 1% 1% 0;
-  max-width: 19%;
-  min-width: 19%;
-  width: 19%;
-}

package/lib/grid/_wrap.scss

@@ -1,39 +0,0 @@
-@use '../funcs/rem' as rem;
-@use '../helpers/flexbox';
-
-.wrap-1,
-.wrap-2,
-.wrap-3,
-.wrap-4,
-.wrap-5 {
-  @extend .flex-wrapper;
-}
-
-.wrap-1 > *,
-.wrap-2 > *,
-.wrap-3 > *,
-.wrap-4 > *,
-.wrap-5 > * {
-  margin-bottom: rem.convert(12px);
-  flex: 0 0 auto;
-}
-
-.wrap-1 > * {
-  width: 100%;
-}
-
-.wrap-2 > * {
-  width: 50%;
-}
-
-.wrap-3 > * {
-  width: 33.333333%;
-}
-
-.wrap-4 > * {
-  width: 25%;
-}
-
-.wrap-5 > * {
-  width: 12.5%;
-}

package/lib/helpers/_.scss

@@ -1,9 +0,0 @@
-@use 'negates';
-@use 'displays';
-@use 'visibility';
-@use 'flexbox';
-@use 'floats';
-@use 'scrolls';
-@use 'texts';
-@use 'margins';
-@use 'pointers';

package/lib/helpers/_displays.scss

@@ -1,151 +0,0 @@
-.is-circle {
-  border-radius: 50%;
-}
-
-.v-align-top {
-  vertical-align: top;
-}
-
-.v-align-middle {
-  vertical-align: middle;
-}
-
-.v-align-bottom {
-  vertical-align: bottom;
-}
-
-/* --------------------------------------------
-
- TYPES
-
--------------------------------------------- */
-
-.is-flex {
-  display: flex;
-}
-
-.is-block {
-  display: block;
-}
-
-.is-inline {
-  display: inline;
-}
-
-.is-inflex,
-.is-inline-flex {
-  display: inline-flex;
-}
-
-.is-inblock,
-.is-inline-block {
-  display: inline-block;
-}
-
-.is-overlay {
-  @extend .is-absolute;
-  @extend .is-zero-abs;
-}
-
-.is-popin,
-.is-popup,
-.is-fixed-overlay {
-  @extend .is-fixed;
-  @extend .is-top-to-bottom;
-  @extend .is-zero-abs;
-}
-
-/* --------------------------------------------
-
- POSITIONING
-
--------------------------------------------- */
-
-.is-relative {
-  position: relative;
-}
-
-.is-absolute {
-  position: absolute;
-}
-
-.is-fixed {
-  position: fixed;
-}
-
-.is-sticky {
-  position: sticky;
-}
-
-/* --------------------------------------------
-
- ABSOLUTE PLACEMENTS
-
--------------------------------------------- */
-
-.is-zero-abs,
-.is-trbl {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-}
-
-.is-top-left-abs,
-.is-top-left {
-  left: 0;
-  top: 0;
-}
-
-.is-top-right-abs,
-.is-top-right {
-  right: 0;
-  top: 0;
-}
-
-.is-bottom-right-abs,
-.is-bottom-right {
-  bottom: 0;
-  right: 0;
-}
-
-.is-bottom-left-abs,
-.is-bottom-left {
-  bottom: 0;
-  left: 0;
-}
-
-.is-top-to-bottom-abs,
-.is-top-to-bottom {
-  bottom: 0;
-  top: 0;
-}
-
-.is-left-to-right-abs,
-.is-left-to-right {
-  left: 0;
-  right: 0;
-}
-
-/* --------------------------------------------
-
- SIZES
-
--------------------------------------------- */
-
-.is-full-width {
-  max-width: 100%;
-  min-width: 100%;
-  width: 100%;
-}
-
-.is-full-height {
-  height: 100%;
-  max-height: 100%;
-  min-height: 100%;
-}
-
-.is-full-layout {
-  @extend .is-full-width;
-  @extend .is-full-height;
-}

package/lib/helpers/_flexbox.scss

@@ -1,105 +0,0 @@
-$flexSpaceSizes: (0, 1, 2, 3, 4, 5, 6, 7, 8);
-
-@each $space in $flexSpaceSizes {
-  .flex-#{$space} {
-    flex: #{$space};
-  }
-}
-
-.flex-columns {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-}
-
-.flex-rows {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-wrap-inverse {
-  flex-wrap: wrap-reverse;
-}
-
-.flex-wrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-/* -----------------------------------------------------
-
-  Flexbox Layouts (Distribution)
-
------------------------------------------------------ */
-
-.flex-start {
-  justify-content: start;
-}
-
-.flex-center {
-  justify-content: center;
-}
-
-.flex-end {
-  justify-content: flex-end;
-}
-
-.flex-between {
-  justify-content: space-between;
-}
-
-.flex-around {
-  justify-content: space-around;
-}
-
-.flex-evenly {
-  justify-content: space-evenly;
-}
-
-.flex-justify > * {
-  flex-basis: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-.flex-stretch {
-  justify-content: stretch;
-}
-
-/* -----------------------------------------------------
-
-  Items Spacers
-
------------------------------------------------------ */
-
-.items-start {
-  align-items: flex-start;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.self-start {
-  align-self: flex-start;
-}
-
-.self-end {
-  align-self: flex-end;
-}
-
-.self-center {
-  align-self: center;
-}