pallote-css 0.6.0 → 0.7.0

package/styles/utilities/_global.scss

@@ -0,0 +1,211 @@
+@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/styles/utilities/_grid.scss

@@ -0,0 +1,124 @@
+@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/styles/utilities/_text.scss

@@ -0,0 +1,199 @@
+@use 'sass:list';
+@use '../common/mixins';
+@use '../common/variables';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// align
+// weight
+// transform
+// italic
+// underline
+// strikeThrough
+// code
+// color
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+@mixin font-size($font-size, $font-weight, $line-height) {
+	font-size: $font-size;
+	font-weight: $font-weight;
+	line-height: $line-height;
+}
+
+.body, %body {
+	@include font-size(
+		variables.$body-size,
+		variables.$body-weight,
+		variables.$body-line-height
+	);
+}
+
+.subtitle, %subtitle {
+	@include font-size(
+		variables.$subtitle-size,
+		variables.$subtitle-weight,
+		variables.$subtitle-line-height
+	);	
+}	
+
+.caption, %caption {
+	@include font-size(
+		variables.$caption-size,
+		variables.$caption-weight,
+		variables.$caption-line-height
+	);
+}
+
+.overline, %overline {
+	@include font-size(
+		variables.$overline-size,
+		variables.$overline-weight,
+		variables.$overline-line-height
+	);
+}
+
+.h1, %h1 {
+	@include font-size(
+		variables.$h1-size,
+		variables.$h1-weight,
+		variables.$h1-line-height
+	);
+}
+
+.h2, %h2 {
+	@include font-size(
+		variables.$h2-size,
+		variables.$h2-weight,
+		variables.$h2-line-height
+	);
+}
+
+.h3, %h3 {
+	@include font-size(
+		variables.$h3-size,
+		variables.$h3-weight,
+		variables.$h3-line-height
+	);
+}
+
+.h4, %h4 {
+	@include font-size(
+		variables.$h4-size,
+		variables.$h4-weight,
+		variables.$h4-line-height
+	);
+}
+
+.h5, %h5 {
+	@include font-size(
+		variables.$h5-size,
+		variables.$h5-weight,
+		variables.$h5-line-height
+	);
+}
+
+.h6, %h6 {
+	@include font-size(
+		variables.$h6-size,
+		variables.$h6-weight,
+		variables.$h6-line-height
+	);
+}
+
+@mixin gutter {
+
+	& + & {
+		margin-top: .75em;
+	}
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, 
+.subtitle, .body, .caption, .overline {
+	@include gutter;
+}
+
+// —————————————————————————————————————————————————————————————————
+// align
+// —————————————————————————————————————————————————————————————————
+
+.text-left, %text-left { text-align: left !important; }
+.text-center, %text-center { text-align: center !important; }
+.text-right, %text-right { text-align: right !important; }
+
+// —————————————————————————————————————————————————————————————————
+// weight
+// —————————————————————————————————————————————————————————————————
+
+.text-regular, %text-regular { font-weight: variables.$font-regular !important; }
+.text-bold, %text-bold { font-weight: variables.$font-bold !important; }
+
+// —————————————————————————————————————————————————————————————————
+// transform
+// —————————————————————————————————————————————————————————————————
+
+.text-none, %text-none { text-transform: none; }
+.text-capitalize, %text-capitalize { text-transform: capitalize; }
+.text-uppercase, %text-uppercase { text-transform: uppercase; }
+.text-lowercase, %text-lowercase { text-transform: lowercase; }
+.text-initial, %text-initial { text-transform: initial; }
+.text-inherit, %text-inherit { text-transform: inherit; }
+
+// —————————————————————————————————————————————————————————————————
+// italic
+// —————————————————————————————————————————————————————————————————
+
+.text-italic, %text-italic { font-style: italic !important; }
+
+// —————————————————————————————————————————————————————————————————
+// underline
+// —————————————————————————————————————————————————————————————————
+
+.text-underline, %text-underline { text-decoration: underline !important; }
+
+// —————————————————————————————————————————————————————————————————
+// strikeThrough
+// —————————————————————————————————————————————————————————————————
+
+.text-strikeThrough, %text-strikeThrough { text-decoration: line-through !important; }
+
+// —————————————————————————————————————————————————————————————————
+// code
+// —————————————————————————————————————————————————————————————————
+
+.text-code, %text-code { font-family: variables.$font-code !important; }
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin text-color($prefix, $colors...) {
+	@each $i in $colors {
+		.#{$prefix}#{list.nth($i, 1)} {
+			color: list.nth($i, 2) !important;
+
+			.h1, .h2, .h3, .h4, .h5, .h6 {
+				color: list.nth($i, 2) !important;
+			}
+		}
+	}
+}
+
+@include text-color('text-',
+	'default' variables.$text,
+	'alt' variables.$text-alt,
+	'disabled' variables.$text-disabled,
+	'contrast' variables.$text-contrast,
+	'contrastAlt' variables.$text-contrast-alt,
+	'contrastDisabled' variables.$text-contrast-disabled,
+	'primary' variables.$primary,
+	'secondary' variables.$secondary,
+	'primary' variables.$primary,
+	'success' variables.$success,
+	'info' variables.$info,
+	'warning' variables.$warning,
+	'error' variables.$error,
+);