pallote-css 0.4.0 → 0.6.0

package/dist/styles/utilities/_color.scss

@@ -1,119 +0,0 @@
-@use 'sass:list';
-@use '../common/variables';
-
-// —————————————————————————————————————————————————————————————————
-// fill
-// stroke
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// fill
-// —————————————————————————————————————————————————————————————————
-
-@mixin fill($colors...) {
-
-  @each $i in $colors {
-    .fill-#{list.nth($i, 1)} {
-      color: list.nth($i, 3) !important;
-      background-color: list.nth($i, 2) !important;
-
-      .card_title {
-        color: list.nth($i, 3) !important;
-      }
-    }
-  }
-}
-
-@include fill (
-  "main" variables.$main variables.$text,
-  "contrast" variables.$contrast variables.$text-contrast,
-
-  "grey90" variables.$grey-90 variables.$text-contrast,
-  "grey80" variables.$grey-80 variables.$text-contrast,
-  "grey70" variables.$grey-70 variables.$text-contrast,
-  "grey60" variables.$grey-60 variables.$text-contrast,
-  "grey50" variables.$grey-50 variables.$text-contrast,
-  "grey40" variables.$grey-40 variables.$text,
-  "grey30" variables.$grey-30 variables.$text,
-  "grey20" variables.$grey-20 variables.$text,
-  "grey10" variables.$grey-10 variables.$text,
-  "grey5" variables.$grey-5 variables.$text,
-
-  "default" variables.$background-default variables.$text,
-  "paper" variables.$background-paper variables.$text,
-
-  "primaryLight" variables.$primary-light variables.$text,
-  "primary" variables.$primary variables.$text-contrast,
-  "primaryDark" variables.$primary-dark variables.$text-contrast,
-  "secondaryLight" variables.$secondary-light variables.$text,
-  "secondary" variables.$secondary variables.$text-contrast,
-  "secondaryDark" variables.$secondary-dark variables.$text-contrast,
-
-  "successLight" variables.$success-light variables.$text,
-  "success" variables.$success variables.$text-contrast,
-  "successDark" variables.$success-dark variables.$text-contrast,
-  "infoLight" variables.$info-light variables.$text,
-  "info" variables.$info variables.$text-contrast,
-  "infoDark" variables.$info-dark variables.$text-contrast,
-  "warningLight" variables.$warning-light variables.$text,
-  "warning" variables.$warning variables.$text,
-  "warningDark" variables.$warning-dark variables.$text-contrast,
-  "errorLight" variables.$error-light variables.$text,
-  "error" variables.$error variables.$text-contrast,
-  "errorDark" variables.$error-dark variables.$text-contrast,
-
-  "border" variables.$border-color variables.$text
-);
-
-// —————————————————————————————————————————————————————————————————
-// stroke
-// —————————————————————————————————————————————————————————————————
-
-@mixin stroke($colors...) {
-  @each $i in $colors {
-    .stroke-#{list.nth($i, 1)} {
-      border: 1px solid list.nth($i, 2) !important;
-    }
-  }
-}
-
-@include stroke (
-  "main" variables.$main,
-  "contrast" variables.$contrast,
-
-  "grey90" variables.$grey-90,
-  "grey80" variables.$grey-80,
-  "grey70" variables.$grey-70,
-  "grey60" variables.$grey-60,
-  "grey50" variables.$grey-50,
-  "grey40" variables.$grey-40,
-  "grey30" variables.$grey-30,
-  "grey20" variables.$grey-20,
-  "grey10" variables.$grey-10,
-  "grey5" variables.$grey-5 ,
-
-  "default" variables.$background-default,
-  "paper" variables.$background-paper,
-
-  "primaryLight" variables.$primary-light,
-  "primary" variables.$primary,
-  "primaryDark" variables.$primary-dark,
-  "secondaryLight" variables.$secondary-light,
-  "secondary" variables.$secondary,
-  "secondaryDark" variables.$secondary-dark,
-
-  "successLight" variables.$success-light,
-  "success" variables.$success,
-  "successDark" variables.$success-dark,
-  "infoLight" variables.$info-light,
-  "info" variables.$info,
-  "infoDark" variables.$info-dark,
-  "warningLight" variables.$warning-light,
-  "warning" variables.$warning,
-  "warningDark" variables.$warning-dark,
-  "errorLight" variables.$error-light,
-  "error" variables.$error,
-  "errorDark" variables.$error-dark,
-  
-  "border" variables.$border-color
-);

package/dist/styles/utilities/_global.scss

@@ -1,211 +0,0 @@
-@use '../common/mixins';
-@use '../common/variables';
-
-// —————————————————————————————————————————————————————————————————
-// responsive
-// spacing and size
-// position
-// display
-// border
-// border-radius
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// responsive
-// —————————————————————————————————————————————————————————————————
-
-.hide {
-	
-	&-desktop { @include mixins.responsive(down, desktop) { display: none !important; } }
-	&-laptop { @include mixins.responsive(down, laptop) { display: none !important; } }
-	&-tablet { @include mixins.responsive(down, tablet) { display: none !important; } }
-	&-mobile { @include mixins.responsive(down, mobile) { display: none !important; } }
-	&-mobileSm { @include mixins.responsive(down, mobile-sm) { display: none !important; } }
-	&-touch { @include mixins.responsive-touch { display: none !important; } }
-}
-
-.show {
-
-  &-desktop { @include mixins.responsive(up, desktop) { display: none !important; } }
-	&-laptop { @include mixins.responsive(up, laptop) { display: none !important; } }
-	&-tablet { @include mixins.responsive(up, tablet) { display: none !important; } }
-	&-mobile { @include mixins.responsive(up, mobile) { display: none !important; } }
-	&-mobileSm { @include mixins.responsive(up, mobile-sm) { display: none !important; } }
-  &-touch { @include mixins.responsive-click { display: none !important; } }
-}
-
-// —————————————————————————————————————————————————————————————————
-// spacing and size
-// —————————————————————————————————————————————————————————————————
-
-.w-full { width: 100% !important; }
-.w-fit { width: fit-content !important; }
-
-.h-full { height: 100% !important; }
-.h-fit { height: fit-content !important; }
-
-.m-auto { margin: auto !important; }
-.mt-auto { margin-top: auto !important; }
-.mr-auto { margin-right: auto !important; }
-.mb-auto { margin-bottom: auto !important; }
-.ml-auto { margin-left: auto !important; }
-.mv-auto { margin-top: auto !important; margin-bottom: auto !important; }
-.mh-auto { margin-right: auto !important; margin-left: auto !important; }
-
-// from .25rem to 5rem, every quarter
-
-$fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
-
-@for $i from 0 through 5 {
-  .w-#{$i} { width: #{$i}rem !important; }
-  .h-#{$i} { height: #{$i}rem !important; }
-
-  .m-#{$i} { margin: #{$i}rem !important; }
-  .mt-#{$i} { margin-top: #{$i}rem !important; }
-  .mr-#{$i} { margin-right: #{$i}rem !important; }
-  .mb-#{$i} { margin-bottom: #{$i}rem !important; }
-  .ml-#{$i} { margin-left: #{$i}rem !important; }
-  .mv-#{$i} { margin-top: #{$i}rem !important; margin-bottom: #{$i}rem !important; }
-  .mh-#{$i} { margin-right: #{$i}rem !important; margin-left: #{$i}rem !important; }
-
-  .p-#{$i} { padding: #{$i}rem !important; }
-  .pt-#{$i} { padding-top: #{$i}rem !important; }
-  .pr-#{$i} { padding-right: #{$i}rem !important; }
-  .pb-#{$i} { padding-bottom: #{$i}rem !important; }
-  .pl-#{$i} { padding-left: #{$i}rem !important; }
-  .pv-#{$i} { padding-top: #{$i}rem !important; padding-bottom: #{$i}rem !important; }
-  .ph-#{$i} { padding-right: #{$i}rem !important; padding-left: #{$i}rem !important; }
-
-  @each $symbol, $value in $fractions {
-
-    @if $i == 0 {
-      .w-#{$symbol} { width: #{$i + $value}rem !important; }
-      .h-#{$symbol} { height: #{$i + $value}rem !important; }
-      
-      .m-#{$symbol} { margin: #{$i + $value}rem !important; }
-      .mt-#{$symbol} { margin-top: #{$i + $value}rem !important; }
-      .mr-#{$symbol} { margin-right: #{$i + $value}rem !important; }
-      .mb-#{$symbol} { margin-bottom: #{$i + $value}rem !important; }
-      .ml-#{$symbol} { margin-left: #{$i + $value}rem !important; }
-      .mv-#{$symbol} { margin-top: #{$i + $value}rem !important; margin-bottom: #{$i + $value}rem !important; }
-      .mh-#{$symbol} { margin-right: #{$i + $value}rem !important; margin-left: #{$i + $value}rem !important; }
-    
-      .p-#{$symbol} { padding: #{$i + $value}rem !important; }
-      .pt-#{$symbol} { padding-top: #{$i + $value}rem !important; }
-      .pr-#{$symbol} { padding-right: #{$i + $value}rem !important; }
-      .pb-#{$symbol} { padding-bottom: #{$i + $value}rem !important; }
-      .pl-#{$symbol} { padding-left: #{$i + $value}rem !important; }
-      .pv-#{$symbol} { padding-top: #{$i + $value}rem !important; padding-bottom: #{$i + $value}rem !important; }
-      .ph-#{$symbol} { padding-right: #{$i + $value}rem !important; padding-left: #{$i + $value}rem !important; }  
-
-    } @else {
-      .w-#{$i}#{$symbol} { width: #{$i + $value}rem !important; }
-      .h-#{$i}#{$symbol} { height: #{$i + $value}rem !important; }
-    
-      .m-#{$i}#{$symbol} { margin: #{$i + $value}rem !important; }
-      .mt-#{$i}#{$symbol} { margin-top: #{$i + $value}rem !important; }
-      .mr-#{$i}#{$symbol} { margin-right: #{$i + $value}rem !important; }
-      .mb-#{$i}#{$symbol} { margin-bottom: #{$i + $value}rem !important; }
-      .ml-#{$i}#{$symbol} { margin-left: #{$i + $value}rem !important; }
-      .mv-#{$i}#{$symbol} { margin-top: #{$i + $value}rem !important; margin-bottom: #{$i + $value}rem !important; }
-      .mh-#{$i}#{$symbol} { margin-right: #{$i + $value}rem !important; margin-left: #{$i + $value}rem !important; }
-    
-      .p-#{$i}#{$symbol} { padding: #{$i + $value}rem !important; }
-      .pt-#{$i}#{$symbol} { padding-top: #{$i + $value}rem !important; }
-      .pr-#{$i}#{$symbol} { padding-right: #{$i + $value}rem !important; }
-      .pb-#{$i}#{$symbol} { padding-bottom: #{$i + $value}rem !important; }
-      .pl-#{$i}#{$symbol} { padding-left: #{$i + $value}rem !important; }
-      .pv-#{$i}#{$symbol} { padding-top: #{$i + $value}rem !important; padding-bottom: #{$i + $value}rem !important; }
-      .ph-#{$i}#{$symbol} { padding-right: #{$i + $value}rem !important; padding-left: #{$i + $value}rem !important; }  
-    }
-  }
-}
-
-// from 6 to 20 rem, only integer
-
-@for $i from 6 through 20 {
-  .w-#{$i} { width: #{$i}rem !important; }
-  .h-#{$i} { height: #{$i}rem !important; }
-
-  .m-#{$i} { margin: #{$i}rem !important; }
-  .mt-#{$i} { margin-top: #{$i}rem !important; }
-  .mr-#{$i} { margin-right: #{$i}rem !important; }
-  .mb-#{$i} { margin-bottom: #{$i}rem !important; }
-  .ml-#{$i} { margin-left: #{$i}rem !important; }
-  .mv-#{$i} { margin-top: #{$i}rem !important; margin-bottom: #{$i}rem !important; }
-  .mh-#{$i} { margin-right: #{$i}rem !important; margin-left: #{$i}rem !important; }
-
-  .p-#{$i} { padding: #{$i}rem !important; }
-  .pt-#{$i} { padding-top: #{$i}rem !important; }
-  .pr-#{$i} { padding-right: #{$i}rem !important; }
-  .pb-#{$i} { padding-bottom: #{$i}rem !important; }
-  .pl-#{$i} { padding-left: #{$i}rem !important; }
-  .pv-#{$i} { padding-top: #{$i}rem !important; padding-bottom: #{$i}rem !important; }
-  .ph-#{$i} { padding-right: #{$i}rem !important; padding-left: #{$i}rem !important; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// position
-// —————————————————————————————————————————————————————————————————
-
-.pos {
-
-  &-absolute { position: absolute !important; }
-  &-relative { position: relative !important; }
-  &-fixed { position: relative !important; }
-  &-sticky { position: relative !important; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// display
-// —————————————————————————————————————————————————————————————————
-
-// general display
-
-.dis-flex { display: flex !important; }
-.dis-inlineFlex { display: inline-flex !important; }
-.dis-block { display: block !important; }
-.dis-inlineBlock { display: inline-block !important; }
-
-// flexbasis
-
-.fb {
-
-  &-content { flex-basis: content !important; }
-  &-0 { flex-basis: 0 !important; }
-  &-1 { flex-basis: 1 !important; }
-}
-
-// flex-grow
-
-.fg {
-
-  &-0 { flex-grow: 0 !important; }
-  &-1 { flex-grow: 1 !important; }
-}
-
-// flex-shrink
-
-.fs {
-
-  &-0 { flex-shrink: 0 !important; }
-  &-1 { flex-shrink: 1 !important; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// border
-// —————————————————————————————————————————————————————————————————
-
-.b-1 { border: variables.$border; }
-.bt-1 { border-top: variables.$border; }
-.br-1 { border-right: variables.$border; }
-.bb-1 { border-bottom: variables.$border; }
-.bl-1 { border-left: variables.$border; }
-
-// —————————————————————————————————————————————————————————————————
-// border-radius
-// —————————————————————————————————————————————————————————————————
-
-.br-sm { border-radius: variables.$border-radius-sm; }
-.br-md { border-radius: variables.$border-radius-md; }
-.br-lg { border-radius: variables.$border-radius-lg; }

package/dist/styles/utilities/_grid.scss

@@ -1,124 +0,0 @@
-@use '../common/mixins';
-@use '../common/variables';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// wrap
-// direction
-// justify
-// items
-// self
-// gap and col
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.flex {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-// —————————————————————————————————————————————————————————————————
-// wrap
-// —————————————————————————————————————————————————————————————————
-
-// have children wrap automatically
-.flex-wrap {
-
-  > .flex {
-    flex: 1 0 0;
-
-    > * {
-      width: 100%;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.direction-column { flex-direction: column; }
-.direction-columnReverse { flex-direction: column-reverse; }
-.direction-row { flex-direction: row; flex-wrap: wrap; }
-.direction-rowReverse { flex-direction: row-reverse; flex-wrap: wrap; }
-
-// —————————————————————————————————————————————————————————————————
-// justify
-// —————————————————————————————————————————————————————————————————
-
-.justify-center { justify-content: center;}
-.justify-end { justify-content: flex-end;}
-.justify-start { justify-content: flex-start;}
-.justify-spaceAround { justify-content: space-around;}
-.justify-spaceBetween { justify-content: space-between;}
-.justify-spaceEvenly { justify-content: space-evenly;}
-
-// —————————————————————————————————————————————————————————————————
-// items
-// —————————————————————————————————————————————————————————————————
-
-.items-stretch { align-items: stretch; }
-.items-center { align-items: center; }
-.items-end { align-items: flex-end; }
-.items-start { align-items: flex-start; }
-.items-baseline { align-items: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// self
-// —————————————————————————————————————————————————————————————————
-
-.self-stretch { align-self: stretch; }
-.self-center { align-self: center; }
-.self-end { align-self: flex-end; }
-.self-start { align-self: flex-start; }
-.self-baseline { align-self: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// gap and col
-// —————————————————————————————————————————————————————————————————
-
-$columns: 12;
-$breakpoints: (
-  xs: mobile-sm,
-  sm: mobile,
-  md: tablet,
-  lg: laptop,
-  xl: desktop
-);
-
-@for $i from 1 through $columns {
-  .col-#{$i} {
-    width: variables.$col * $i;
-  }
-}
-
-[class*="col-"] {
-  width: 100%;
-}
-
-@for $i from 1 through $columns {
-  .gap-#{$i} {
-    gap: #{$i * .25}rem;
-    
-    @for $j from 1 through $columns {
-      > .col-#{$j} {
-        width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
-      }
-    }
-
-    @each $suffix, $breakpoint in $breakpoints {
-      @include mixins.responsive(up, $breakpoint) {
-        @for $j from 1 through $columns {
-          > .col-#{$suffix}-#{$j} {
-            width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
-          }
-        }
-      }
-    }
-  }
-}

package/dist/styles/utilities/_layout.scss

@@ -1,127 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// wrap
-// direction
-// justify
-// items
-// self
-// gap and col
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.flex,
-.flex_item {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-// —————————————————————————————————————————————————————————————————
-// wrap
-// —————————————————————————————————————————————————————————————————
-
-// have children wrap automatically
-.flex-wrap {
-  justify-content: center;
-
-  > .flex_item {
-    flex: 1 0 0;
-
-    > * {
-      width: 100%;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.flex-column { flex-direction: column; }
-.flex-columnReverse { flex-direction: column-reverse; }
-.flex-row { flex-direction: row; flex-wrap: wrap; }
-.flex-rowReverse { flex-direction: row-reverse; flex-wrap: wrap; }
-
-// —————————————————————————————————————————————————————————————————
-// justify
-// —————————————————————————————————————————————————————————————————
-
-.flex-jc-center { justify-content: center;}
-.flex-jc-end { justify-content: flex-end;}
-.flex-jc-start { justify-content: flex-start;}
-.flex-jc-spaceAround { justify-content: space-around;}
-.flex-jc-spaceBetween { justify-content: space-between;}
-.flex-jc-spaceEvenly { justify-content: space-evenly;}
-
-// —————————————————————————————————————————————————————————————————
-// items
-// —————————————————————————————————————————————————————————————————
-
-.flex-ai-stretch { align-items: stretch; }
-.flex-ai-center { align-items: center; }
-.flex-ai-end { align-items: flex-end; }
-.flex-ai-start { align-items: flex-start; }
-.flex-ai-baseline { align-items: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// self
-// —————————————————————————————————————————————————————————————————
-
-.flex-as-stretch { align-self: stretch; }
-.flex-as-center { align-self: center; }
-.flex-as-end { align-self: flex-end; }
-.flex-as-start { align-self: flex-start; }
-.flex-as-baseline { align-self: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// gap and col
-// —————————————————————————————————————————————————————————————————
-
-$columns: 12;
-$breakpoints: (
-  xs: mobile-sm,
-  sm: mobile,
-  md: tablet,
-  lg: laptop,
-  xl: desktop
-);
-
-@for $i from 1 through $columns {
-  .col-#{$i} {
-    width: variables.$col * $i;
-  }
-}
-
-[class*="gap-"],
-[class*="col-"] {
-  width: 100%;
-}
-
-@for $i from 1 through $columns {
-  .gap-#{$i} {
-    gap: #{$i * .25}rem;
-    
-    @for $j from 1 through $columns {
-      > .col-#{$j} {
-        width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
-      }
-    }
-
-    @each $suffix, $breakpoint in $breakpoints {
-      @include mixins.responsive(up, $breakpoint) {
-        @for $j from 1 through $columns {
-          > .col-#{$suffix}-#{$j} {
-            width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
-          }
-        }
-      }
-    }
-  }
-}