pallote-css 0.10.9 → 0.10.11

package/styles/components/_tooltip.scss

@@ -39,8 +39,8 @@
 .tooltip_content {
   @extend %caption;
   position: absolute;
-  left: 50%;
-  bottom: calc(100% + 0.5rem);
+  inset-block-end: calc(100% + 0.5rem);
+  inset-inline-start: 50%;
   transform: translateX(-50%) translateY(0.25rem);
   background-color: variables.$text;
   color: variables.$text-contrast;
@@ -57,11 +57,11 @@
   &::after {
     content: '';
     position: absolute;
-    top: 100%;
-    left: 50%;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
     border: 0.375rem solid transparent;
-    border-top-color: variables.$text;
+    border-block-start-color: variables.$text;
   }
 }
 
@@ -70,7 +70,7 @@
 // —————————————————————————————————————————————————————————————————
 
 .tooltip-info {
-  border-bottom: none;
+  border-block-end: none;
   cursor: pointer;
   border-radius: 50%;
 

package/styles/modules/_cookie.scss

@@ -4,16 +4,16 @@
   &.section {
     @include transition($transition-md, transform);
     position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     display: none;
     background-color: $background-default;
     text-align: left;
     
     .section_container {
-      padding-top: 10px;
-      padding-bottom: 9px;
+      padding-block-start: 10px;
+      padding-block-end: 9px;
       display: flex;
       flex-direction: row;
       align-items: baseline;
@@ -29,7 +29,7 @@
   &_text {
     width: 100%;
     display: inline;
-    margin-right: .25rem;
+    margin-inline-end: .25rem;
   }
 
   .link {

package/styles/utilities/_global.scss

@@ -48,37 +48,44 @@
 .h-full { height: 100% !important; }
 .h-fit { height: fit-content !important; }
 
+.maxw-desktop-lg { max-width: variables.$desktop-lg; }
+.maxw-desktop { max-width: variables.$desktop; }
+.maxw-tablet { max-width: variables.$tablet; }
+.maxw-laptop { max-width: variables.$laptop; }
+.maxw-mobile { max-width: variables.$mobile; }
+.maxw-mobile-sm { max-width: variables.$mobile-sm; }
+
 .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; }
+.mv-auto { margin-block: auto !important }
+.mt-auto { margin-block-start: auto !important; }
+.mb-auto { margin-block-end: auto !important; }
+.mh-auto { margin-inline: auto !important }
+.mr-auto { margin-inline-end: auto !important; }
+.ml-auto { margin-inline-start: auto !important; }
 
 // from .25rem to 5rem, every quarter
 
-$fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
+$fractions: ( "1-4": 0.25, "1-2": 0.5, "3-4": 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; }
+  .mv-#{$i} { margin-block: #{$i}rem !important; }
+  .mt-#{$i} { margin-block-start: #{$i}rem !important; }
+  .mb-#{$i} { margin-block-end: #{$i}rem !important; }
+  .mh-#{$i} { margin-inline: #{$i}rem !important; }
+  .ml-#{$i} { margin-inline-start: #{$i}rem !important; }
+  .mr-#{$i} { margin-inline-end: #{$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; }
+  .pv-#{$i} { padding-block: #{$i}rem !important; }
+  .pt-#{$i} { padding-block-start: #{$i}rem !important; }
+  .pb-#{$i} { padding-block-end: #{$i}rem !important; }
+  .ph-#{$i} { padding-inline: #{$i}rem !important; }
+  .pl-#{$i} { padding-inline-start: #{$i}rem !important; }
+  .pr-#{$i} { padding-inline-end: #{$i}rem !important; }
 
   @each $symbol, $value in $fractions {
 
@@ -87,40 +94,40 @@ $fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
       .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; }
-    
+      .mv-#{$symbol} { margin-block: #{$i + $value}rem !important; }
+      .mt-#{$symbol} { margin-block-start: #{$i + $value}rem !important; }
+      .mb-#{$symbol} { margin-block-end: #{$i + $value}rem !important; }
+      .mh-#{$symbol} { margin-inline: #{$i + $value}rem !important; }
+      .ml-#{$symbol} { margin-inline-start: #{$i + $value}rem !important; }
+      .mr-#{$symbol} { margin-inline-end: #{$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; }  
+      .pv-#{$symbol} { padding-block: #{$i + $value}rem !important; }
+      .pt-#{$symbol} { padding-block-start: #{$i + $value}rem !important; }
+      .pb-#{$symbol} { padding-block-end: #{$i + $value}rem !important; }
+      .ph-#{$symbol} { padding-inline: #{$i + $value}rem !important; }
+      .pl-#{$symbol} { padding-inline-start: #{$i + $value}rem !important; }
+      .pr-#{$symbol} { padding-inline-end: #{$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; }
+      .mv-#{$i}#{$symbol} { margin-block: #{$i + $value}rem !important; }
+      .mt-#{$i}#{$symbol} { margin-block-start: #{$i + $value}rem !important; }
+      .mb-#{$i}#{$symbol} { margin-block-end: #{$i + $value}rem !important; }
+      .mh-#{$i}#{$symbol} { margin-inline: #{$i + $value}rem !important; }
+      .ml-#{$i}#{$symbol} { margin-inline-start: #{$i + $value}rem !important; }
+      .mr-#{$i}#{$symbol} { margin-inline-end: #{$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; }  
+      .pv-#{$i}#{$symbol} { padding-block: #{$i + $value}rem !important; }
+      .pt-#{$i}#{$symbol} { padding-block-start: #{$i + $value}rem !important; }
+      .pb-#{$i}#{$symbol} { padding-block-end: #{$i + $value}rem !important; }
+      .ph-#{$i}#{$symbol} { padding-inline: #{$i + $value}rem !important; }
+      .pl-#{$i}#{$symbol} { padding-inline-start: #{$i + $value}rem !important; }
+      .pr-#{$i}#{$symbol} { padding-inline-end: #{$i + $value}rem !important; }
     }
   }
 }
@@ -132,20 +139,20 @@ $fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
   .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; }
+  .mt-#{$i} { margin-block-start: #{$i}rem !important; }
+  .mr-#{$i} { margin-inline-end: #{$i}rem !important; }
+  .mb-#{$i} { margin-block-end: #{$i}rem !important; }
+  .ml-#{$i} { margin-inline-start: #{$i}rem !important; }
+  .mv-#{$i} { margin-block-start: #{$i}rem !important; margin-block-end: #{$i}rem !important; }
+  .mh-#{$i} { margin-inline-end: #{$i}rem !important; margin-inline-start: #{$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; }
+  .pt-#{$i} { margin-block-start: #{$i}rem !important; }
+  .pr-#{$i} { margin-inline-end: #{$i}rem !important; }
+  .pb-#{$i} { margin-block-end: #{$i}rem !important; }
+  .pl-#{$i} { margin-inline-start: #{$i}rem !important; }
+  .pv-#{$i} { margin-block-start: #{$i}rem !important; margin-block-end: #{$i}rem !important; }
+  .ph-#{$i} { margin-inline-end: #{$i}rem !important; margin-inline-start: #{$i}rem !important; }
 }
 
 // —————————————————————————————————————————————————————————————————
@@ -157,7 +164,7 @@ $fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
   &-absolute { position: absolute !important; }
   &-relative { position: relative !important; }
   &-fixed { position: fixed !important; }
-  &-sticky { position: sticky !important; top: 0; }
+  &-sticky { position: sticky !important; inset-block-start: 0; }
 }
 
 // —————————————————————————————————————————————————————————————————
@@ -214,10 +221,10 @@ $fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
 // —————————————————————————————————————————————————————————————————
 
 .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; }
+.bt-1 { border-block-start: variables.$border; }
+.bb-1 { border-block-end: variables.$border; }
+.br-1 { border-inline-end: variables.$border; }
+.bl-1 { border-inline-start: variables.$border; }
 
 // —————————————————————————————————————————————————————————————————
 // border-radius
@@ -231,15 +238,15 @@ $fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
 // aspect-ratio
 // —————————————————————————————————————————————————————————————————
 
-.ar-square { aspect-ratio: 1/1; }
-.ar-½ { aspect-ratio: 1/2; }
-.ar-⅓ { aspect-ratio: 1/3; }
-.ar-⅔ { aspect-ratio: 2/3; }
-.ar-¾ { aspect-ratio: 3/4; }
-.ar-½- { aspect-ratio: 2/1; }
-.ar-⅓- { aspect-ratio: 3/1; }
-.ar-⅔- { aspect-ratio: 3/2; }
-.ar-¾- { aspect-ratio: 4/3; }
+.ar-1-1 { aspect-ratio: 1/1; }
+.ar-1-2 { aspect-ratio: 1/2; }
+.ar-1-3 { aspect-ratio: 1/3; }
+.ar-2-3 { aspect-ratio: 2/3; }
+.ar-3-4 { aspect-ratio: 3/4; }
+.ar-2-1 { aspect-ratio: 2/1; }
+.ar-3-1 { aspect-ratio: 3/1; }
+.ar-3-2 { aspect-ratio: 3/2; }
+.ar-4-3 { aspect-ratio: 4/3; }
 
 // —————————————————————————————————————————————————————————————————
 // z-index

package/styles/utilities/_text.scss

@@ -121,7 +121,7 @@
 @mixin gutter {
 
 	& + & {
-		margin-top: .75em;
+		margin-block-start: .75em;
 	}
 }
 
@@ -134,9 +134,9 @@
 // align
 // —————————————————————————————————————————————————————————————————
 
-.text-left, %text-left { text-align: left !important; }
+.text-start, %text-start { text-align: left !important; }
 .text-center, %text-center { text-align: center !important; }
-.text-right, %text-right { text-align: right !important; }
+.text-end, %text-end { text-align: right !important; }
 
 // —————————————————————————————————————————————————————————————————
 // weight