@nappr/nappr-styles 0.3.2 → 0.3.5

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

package/lib/helpers/_margins.scss

@@ -1,13 +0,0 @@
-.margin-auto {
-  margin: 0 auto;
-}
-
-.margin-x-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.margin-y-auto {
-  margin-left: auto;
-  margin-right: auto;
-}