pallote-css 0.3.12 → 0.6.0

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/_text.scss

@@ -1,207 +0,0 @@
-@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;
-}
-
-.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
-	);
-}
-
-.subtitle, %subtitle {
-	@include font-size(
-		variables.$subtitle-size,
-		variables.$subtitle-weight,
-		variables.$subtitle-line-height
-	);
-}
-
-.body, %body {
-	@include font-size(
-		variables.$body-size,
-		variables.$body-weight,
-		variables.$body-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
-	);
-}
-
-@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 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;
-			}
-
-			&.link {
-				text-decoration: underline rgba(list.nth($i, 2), 0.5);
-
-				@include mixins.hover {
-					text-decoration: underline 0.125em;
-				}	
-			}
-		}
-	}
-}
-
-@include 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,
-);