@vixcom/ui 1.7.2 → 1.7.3

package/src/styles/sizes.scss

@@ -1,160 +0,0 @@
-@use 'sass:math';
-/**
-*  Author Vixson
-*  Description Layout sizing and breakpoints
-*  Created On October 27th, 2020 4:22pm
-*/
-
-$grid-breakpoints: (
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-);
-$quarter-sizes: (0, 25, 50, 75, 100);
-$number-sizes: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
-$decimal-number-sizes: (
-  d25: 0.25,
-  d5: 0.5,
-  d75: 0.75,
-);
-$non-sizes: (unset, auto);
-$directions: (
-  t: 'top',
-  r: 'right',
-  b: 'bottom',
-  l: 'left',
-);
-
-/**
-* BoxSizing - Height & Width of a layout
-* @dimensionType -  This is the unit of dimension used, Its either the default dimensions (em, rem, px, %) or Viewpoints
-*/
-
-@mixin layoutLooper(
-  $size,
-  $dimension: '',
-  $useDimension: false,
-  $breakPointKey: '',
-  $sizeKey: $size
-) {
-  $useDimension: $size !=0 and $useDimension;
-  $_dimension: if($useDimension, $dimension, '');
-  $_value: if(useDimension, #{$size}#{$_dimension}, $size);
-
-  @each $limit in ('', 'min-', 'max-') {
-    @each $dimensionType in ('', 'v') {
-      #{'.'}#{$limit}#{$dimensionType}#{'h-'}#{$breakPointKey}#{$sizeKey} {
-        $_boxDimension: if(
-          $dimensionType== 'v' and $useDimension,
-          'vh',
-          $_dimension
-        );
-        #{$limit}height: #{$size}#{$_boxDimension};
-      }
-
-      #{'.'}#{$limit}#{$dimensionType}#{'w-'}#{$breakPointKey}#{$sizeKey} {
-        $_boxDimension: if(
-          $dimensionType== 'v' and $useDimension,
-          'vw',
-          $_dimension
-        );
-        #{$limit}width: #{$size}#{$_boxDimension};
-      }
-    }
-  }
-
-  @each $direction-key,
-    $direction
-      in (
-        t: (
-          key: 'Y',
-          negation: '-',
-        ),
-        l: (
-          key: 'X',
-          negation: '-',
-        ),
-        b: (
-          key: 'Y',
-          negation: '',
-        ),
-        r: (
-          key: 'X',
-          negation: '',
-        )
-      )
-  {
-    .float-#{$direction-key}-#{$breakPointKey}#{$sizeKey} {
-      $_floatDimension: if($useDimension, '%', '');
-      $_floatValue: if(
-        $useDimension,
-        #{'translate'}#{map-get($direction, 'key')
-          }(#{map-get($direction, 'negation')}#{$size}#{$_floatDimension}),
-        $size
-      );
-      transform: $_floatValue;
-    }
-  }
-
-  .sq-#{$breakPointKey}#{$sizeKey} {
-    height: $_value;
-    width: $_value;
-    min-height: $_value;
-    min-width: $_value;
-  }
-
-  // .gap-#{$breakPointKey}#{$sizeKey} {
-  //   gap: $_value;
-  // }
-}
-
-@each $size in $number-sizes {
-  @include layoutLooper($size, 'rem', true);
-
-  .rounded-#{$size} {
-    border-radius: $size * 0.2rem;
-  }
-}
-
-@each $size in $quarter-sizes {
-  @include layoutLooper($size, '%', true);
-
-  @each $direction-key, $direction in $directions {
-    $_value: if($size==0, $size, #{$size}#{'%'});
-
-    .p#{$direction-key}-#{$size} {
-      padding-#{$direction}: #{$_value};
-    }
-  }
-}
-
-@each $size in $non-sizes {
-  @include layoutLooper($size);
-}
-
-@each $breakpoint-key, $breakpoint in $grid-breakpoints {
-  @media (min-width: $breakpoint) {
-    @each $size-key, $size in $decimal-number-sizes {
-      @include layoutLooper(
-        $size,
-        'rem',
-        true,
-        #{$breakpoint-key}#{'-'},
-        $size-key
-      );
-    }
-
-    @each $size in $number-sizes {
-      @include layoutLooper($size, 'rem', true, #{$breakpoint-key}#{'-'});
-    }
-
-    @each $size in $quarter-sizes {
-      @include layoutLooper($size, '%', true, #{$breakpoint-key}#{'-'});
-    }
-
-    @each $size in $non-sizes {
-      @include layoutLooper($size, '', false, #{$breakpoint-key}#{'-'});
-    }
-  }
-}

package/src/styles/variables.scss

@@ -1,30 +0,0 @@
-@import 'mixins';
-
-:root {
-  --font-size: var(--o-font-size, #{$font-size});
-  --card-shadow: var(--shadow-1);
-  --background-color: #{$background-color};
-  --heading-start: 200%;
-  --heading-end: 100%;
-
-  /* Color Variables */
-  @each $k, $v in $colors-mapped {
-    /* ---COLOR-#{$k}-START--- */
-    --#{$k}: #{map-get($v, 'bg')};
-    /* ---HSL-#{$k}--- */
-    --#{$k}-hs: #{hue(map-get($v, 'bg')), saturation(map-get($v, 'bg'))};
-    --#{$k}-l: #{lightness(map-get($v, 'bg'))};
-    --#{$k}-a: #{alpha(map-get($v, 'bg'))};
-    --#{$k}-c: #{map-get($v, 'c')};
-    --#{$k}-c-hs: #{hue(map-get($v, 'c')), saturation(map-get($v, 'c'))};
-    --#{$k}-c-l: #{lightness(map-get($v, 'c'))};
-    --#{$k}-c-a: #{alpha(map-get($v, 'c'))};
-    /* ---COLOR-#{$k}-END--- */
-  }
-}
-
-@media (max-width: 576px) {
-  :root {
-    --font-size: calc(var(--o-font-size) / 1.15);
-  }
-}

package/tailwind.config.js

@@ -1,23 +0,0 @@
-module.exports = {
-  mode: 'jit',
-  content: ['**/*.html'],
-  theme: {
-    extend: {
-      borderRadius: {
-        'full': '10rem',
-        'circle': '50%'
-      },
-      screens: {
-        phone: { 'min': '640px', 'max': '767px' },
-        tablet: { 'min': '768px', 'max': '1023px' },
-        laptop: { 'min': '1024px', 'max': '1279px' },
-        tv: { 'min': '1280px', 'max': '1535px' },
-        '<2xl': { 'max': '1535px' },
-        '<xl': { 'max': '1279px' },
-        '<lg': { 'max': '1023px' },
-        '<md': { 'max': '767px' },
-        '<sm': { 'max': '639px' },
-      },
-    },
-  },
-}