@nappr/nappr-styles 0.3.2 → 0.3.3

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

package/lib/helpers/_negates.scss

@@ -1,171 +0,0 @@
-@use '../htmls/form';
-
-/* -------------------------------------------------
-
- NEGATES
-
-------------------------------------------------- */
-.no-click {
-  @extend .not-allowed;
-}
-
-.no-events {
-  pointer-events: none;
-}
-
-.no-no-events {
-  pointer-events: none !important;
-}
-
-.no-flex-grow {
-  flex: 0 1;
-}
-
-.no-no-flex-grow {
-  flex: 0 1 !important;
-}
-
-.no-flex-shrink {
-  flex: 1 0;
-}
-
-.no-no-flex-shrink {
-  flex: 1 0 !important;
-}
-
-.no-float {
-  float: none;
-}
-
-.no-no-float {
-  float: none !important;
-}
-
-.no-flex {
-  flex: none;
-}
-
-.no-no-flex {
-  flex: none !important;
-}
-
-.no-margin {
-  margin: 0;
-}
-
-.no-no-margin {
-  margin: 0 !important;
-}
-
-.no-padding {
-  padding: 0;
-}
-
-.no-no-padding {
-  padding: 0 !important;
-}
-
-.no-border {
-  border: 0;
-}
-
-.no-no-border {
-  border: 0 !important;
-}
-
-.no-radius {
-  border-radius: 0;
-}
-
-.no-no-radius {
-  border-radius: 0 !important;
-}
-
-.no-background {
-  background-color: transparent;
-}
-
-.no-no-background {
-  background: none !important;
-}
-
-.no-outline {
-  outline: none;
-}
-
-.no-no-outline {
-  outline: none !important;
-}
-
-.no-pointer {
-  cursor: default;
-}
-
-.no-no-pointer {
-  cursor: default !important;
-}
-
-.no-select {
-  user-select: none;
-}
-
-.no-no-select {
-  user-select: none !important;
-}
-
-.no-underline,
-a.no-underline,
-a.no-underline:hover,
-a.no-underline:active,
-a.no-underline:visited {
-  text-decoration: none;
-}
-
-.no-no-underline,
-a.no-no-underline,
-a.no-no-underline:hover,
-a.no-no-underline:active,
-a.no-no-underline:visited {
-  text-decoration: none !important;
-}
-
-.no-scroll,
-.no-overflow {
-  overflow: hidden;
-}
-
-.no-no-overflow,
-.no-no-scroll {
-  overflow: hidden !important;
-}
-
-.no-scroll-x {
-  overflow-x: hidden;
-}
-
-.no-no-scroll-x {
-  overflow-x: hidden !important;
-}
-
-.no-scroll-y {
-  overflow-y: hidden;
-}
-
-.no-no-scroll-y {
-  overflow-y: hidden !important;
-}
-
-.nowrap,
-.no-wrap {
-  white-space: nowrap;
-}
-
-.no-nowrap,
-.no-no-wrap {
-  white-space: nowrap !important;
-}
-
-.no-margin-padding {
-  margin: 0;
-  padding: 0;
-}

package/lib/helpers/_scrolls.scss

@@ -1,55 +0,0 @@
-@use './displays';
-
-.scroll-x {
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-
-.scroll-y {
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.scroll-x-auto {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.scroll-y-auto {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-/* ----------------------------------------
-
- SCROLLBOX
-
----------------------------------------- */
-
-.is-scrollbox-wrapper {
-  @extend .is-relative;
-}
-
-.is-scrollbox {
-  @extend .is-absolute;
-  @extend .is-full-layout;
-
-  overflow-x: auto;
-  overflow-y: auto;
-}
-
-.is-scrollbox-y {
-  @extend .is-scrollbox;
-
-  height: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.is-scrollbox-x {
-  @extend .is-scrollbox;
-
-  height: auto;
-  overflow-x: auto;
-  overflow-y: hidden;
-}

package/lib/helpers/_texts.scss

@@ -1,101 +0,0 @@
-/* ----------------------------
-
-Alignments
-
----------------------------- */
-
-.text-left {
-  text-align: left;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-justify {
-  text-align: justify;
-}
-
-.text-overflow,
-.text-ellipsis {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* ----------------------------
-
-Font Weight
-
----------------------------- */
-
-.is-thin {
-  font-weight: 100;
-}
-
-.is-light {
-  font-weight: 300;
-}
-
-.is-normal,
-.is-regular {
-  font-weight: 400;
-}
-
-.is-medium {
-  font-weight: 500;
-}
-
-.is-semi-bold {
-  font-weight: 600;
-}
-
-.is-bold {
-  font-weight: 700;
-}
-
-.is-black,
-.is-extra-bold {
-  font-weight: 900;
-}
-
-/* ----------------------------
-
-Font Style
-
----------------------------- */
-
-.is-italic {
-  font-style: italic;
-}
-
-.is-lowercase {
-  text-transform: lowercase;
-}
-
-.is-uppercase {
-  text-transform: uppercase;
-}
-
-.is-capitalize {
-  text-transform: capitalize;
-}
-
-.is-underline {
-  text-decoration: underline;
-}
-
-.is-stroked {
-  text-decoration: line-through;
-}
-
-.is-small-caps {
-  font-variant: small-caps;
-}
-
-.force-line-break {
-  white-space: normal;
-}

package/lib/helpers/_visibility.scss

@@ -1,34 +0,0 @@
-.is-hidden {
-  display: none;
-  visibility: hidden;
-}
-
-.is-visible {
-  display: inherit;
-  visibility: inherit;
-}
-
-.hide {
-  @extend .is-hidden;
-
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  max-height: 0;
-  max-width: 0;
-  min-height: 0;
-  min-width: 0;
-  width: 0;
-
-  &::before {
-    @extend .is-hidden;
-
-    content: none;
-  }
-
-  &::after {
-    @extend .is-hidden;
-
-    content: none;
-  }
-}

package/lib/htmls/_.scss

@@ -1,4 +0,0 @@
-@use 'form';
-@use 'headings';
-@use 'table';
-@use 'links';

package/lib/htmls/_headings.scss

@@ -1,29 +0,0 @@
-h1 {
-  font-size: 2.8rem;
-  line-height: 1.1;
-}
-
-h2 {
-  font-size: 2.2rem;
-  line-height: 1.1;
-}
-
-h3 {
-  font-size: 1.6rem;
-  line-height: 1.1;
-}
-
-h4 {
-  font-size: 1.4rem;
-  line-height: 1.1;
-}
-
-h5 {
-  font-size: 1.2rem;
-  line-height: 1.1;
-}
-
-h6 {
-  font-size: 1.1rem;
-  line-height: 1.1;
-}

package/lib/htmls/_links.scss

@@ -1,11 +0,0 @@
-a {
-  &:link,
-  &:visited,
-  &:active {
-    text-decoration: none;
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-}

package/lib/mixins/_.scss

@@ -1,9 +0,0 @@
-@use 'root-variables';
-@use 'border';
-@use 'border-radius';
-@use 'dimensions';
-@use 'font-size';
-@use 'line-height';
-@use 'links';
-@use 'margin-padding';
-@use 'theme';

package/lib/mixins/_border-radius.scss

@@ -1,61 +0,0 @@
-@use '../funcs/rem' as rem;
-@use "../variables/defaults" as defaults;
-@use '../funcs/math' as math;
-
-@each $size in defaults.$BORDER_RADIUS_MAP {
-  $sides: (all, top, left, right, bottom);
-
-  $pixelValue: math.number-to-pixel($size);
-
-  @each $side in $sides {
-    @if $side == 'all' {
-      // all border radius
-      .rad#{$size},
-      .brad#{$size} {
-        $value: rem.convert($pixelValue);
-        border-radius: $value;
-      }
-    }
-
-    @else if $side == 'top' {
-      .radt#{$size},
-      .bradt#{$size} {
-        $value: rem.convert($pixelValue);
-        border-top-left-radius: $value;
-        border-top-right-radius: $value;
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-
-    @else if $side == 'bottom' {
-      .radb#{$size},
-      .bradb#{$size} {
-        $value: rem.convert($pixelValue);
-        border-bottom-right-radius: $value;
-        border-bottom-left-radius: $value;
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-
-    @else if $side == 'right' {
-      .radt#{$size},
-      .bradt#{$size} {
-        $value: rem.convert($pixelValue);
-        border-top-right-radius: $value;
-        border-bottom-right-radius: $value;
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-
-    @else if $side == 'left' {
-      .radl#{$size},
-      .bradl#{$size} {
-        $value: rem.convert($pixelValue);
-        border-top-left-radius: $value;
-        border-bottom-left-radius: $value;
-
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-  }
-}

package/lib/mixins/_border.scss

@@ -1,48 +0,0 @@
-@use "sass:string";
-@use '../funcs/rem' as rem;
-@use '../funcs/math' as math;
-@use '../variables/defaults' as defaults;
-
-@each $size in defaults.$BORDER_SIZE_MAP {
-  $sides: (all, topbottom, leftright, top, left, right, bottom);
-
-  // convert value to SASS variables with unit
-  $pixelValue: math.number-to-pixel($size);
-
-  @each $side in $sides {
-    @if $side == 'all' {
-      .b#{$size} {
-        $value : rem.convert($pixelValue);
-        border-width: $value;
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-
-    @else if $side == 'topbottom' {
-      .by#{$size} {
-        $value : rem.convert($pixelValue);
-        border-top-width: $value;
-        border-bottom-width: $value;
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-
-    @else if $side == 'leftright' {
-      .bx#{$size} {
-        $value : rem.convert($pixelValue);
-        border-left-width: $value;
-        border-right-width: $value;
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-
-    @else {
-      // .bl, .br, .bt, .bb
-      .b#{string.slice($side, 0, 1)}#{$size} {
-        $value : rem.convert($pixelValue);
-        border-#{$side}-width: $value;
-        border-style: defaults.$BORDER_STYLE;
-      }
-    }
-  }
-}

package/lib/mixins/_dimensions.scss

@@ -1,48 +0,0 @@
-@use '../funcs/rem' as rem;
-@use '../variables/defaults' as defaults;
-
-/**
-* USAGE:
-* ---------------------
-*
-* .w33 -> width 33%
-*/
-@mixin withHeight($size) {
-  height: rem.convert($size);
-  max-height: rem.convert($size);
-  min-height: rem.convert($size);
-}
-
-@mixin withWidth($size) {
-  max-width: rem.convert($size);
-  min-width: rem.convert($size);
-  width: rem.convert($size);
-}
-
-@mixin withSize($width, $height: null) {
-  @include width($width);
-
-  @if ($height) {
-    @include height($height);
-  }
-
-  @else {
-    @include height($width);
-  }
-}
-
-@mixin squareSize($size) {
-  @include withSize($size);
-}
-
-@each $size in defaults.$DIMENSIONS_MAP {
-  $percentValue: ($size * 1%);
-
-  .w#{$size} {
-    width: $percentValue;
-  }
-
-  .h#{$size} {
-    height: $percentValue;
-  }
-}

package/lib/mixins/_font-size.scss

@@ -1,22 +0,0 @@
-@use '../funcs/rem' as rem;
-@use '../variables/defaults' as defaults;
-@use '../funcs/math' as math;
-
-/**
-* USAGE:
-* ---------------------
-*
-* .fs12 -> font-size 12px converted to rem
-*/
-@mixin fontSize($pixelValue) {
-  $value: rem.convert($pixelValue);
-  font-size: $value;
-}
-
-@each $size in defaults.$FONT_SIZES_MAP {
-  $pixelValue: math.number-to-pixel($size);
-
-  .fs#{$size} {
-    @include fontSize($pixelValue);
-  }
-}

package/lib/mixins/_line-height.scss

@@ -1,19 +0,0 @@
-@use '../variables/defaults' as defaults;
-@use '../funcs/math' as math;
-
-/**
-* USAGE:
-* ---------------------
-*
-* .ln12 -> line-height 12px converted to rem
-*/
-@mixin lineHeight($value) {
-  $pixelValue: math.number-to-pixel($value);
-  line-height: $pixelValue;
-}
-
-@each $size in defaults.$LINE_HEIGHT_MAP {
-  .lh#{$size} {
-    @include lineHeight($size);
-  }
-}

package/lib/mixins/_margin-padding.scss

@@ -1,66 +0,0 @@
-@use "sass:string";
-@use '../funcs/rem' as rem;
-@use '../variables/defaults' as defaults;
-@use '../funcs/math' as math;
-
-/**
-* USAGE:
-* ---------------------
-*
-* .m12 -> margin top-right-bottom-left 12px converted to rem
-* .mx12 -> margin right-left 12px converted to rem
-* .pr12 -> padding right 12px converted to rem
-*/
-@each $size in defaults.$SPACINGS_MAP {
-  $sides: (all, topbottom, leftright, top, left, right, bottom);
-
-  // convert value to SASS variables with unit
-  $nbx: math.number-to-pixel($size);
-  $pixelValue: rem.convert($nbx);
-
-  @each $side in $sides {
-    @if $side == 'all' {
-      .m#{$size} {
-        margin: $pixelValue;
-      }
-
-      .p#{$size} {
-        padding: $pixelValue;
-      }
-    }
-
-    @else if $side == 'topbottom' {
-      .my#{$size} {
-        margin-top: $pixelValue;
-        margin-bottom: $pixelValue;
-      }
-
-      .py#{$size} {
-        padding-top: $pixelValue;
-        padding-bottom: $pixelValue;
-      }
-    }
-
-    @else if $side == 'leftright' {
-      .mx#{$size} {
-        margin-left: $pixelValue;
-        margin-right: $pixelValue;
-      }
-
-      .px#{$size} {
-        padding-left: $pixelValue;
-        padding-right: $pixelValue;
-      }
-    }
-
-    @else {
-      .m#{string.slice($side, 0, 1)}#{$size} {
-        margin-#{$side}: $pixelValue;
-      }
-
-      .p#{string.slice($side, 0, 1)}#{$size} {
-        padding-#{$side}: $pixelValue;
-      }
-    }
-  }
-}

package/lib/mixins/_root-variables.scss

@@ -1,11 +0,0 @@
-@use '../globals' as globals;
-
-:root {
-  @each $name, $value in globals.$PALETTE {
-    --nappr-#{$name}: #{$value};
-  }
-
-  @each $name, $value in globals.$BREAKPOINTS {
-    --nappr-#{$name}: #{$value};
-  }
-}