pallote-css 0.10.10 → 0.10.11

package/styles/components/_button.scss

@@ -59,8 +59,8 @@
 @mixin button-size($value, $size) {
   height: $size;
   gap: $size*.25;
-  padding-right: $size*.33;
-  padding-left: $size*.33;
+  padding-inline-end: $size*.33;
+  padding-inline-start: $size*.33;
 
   @if $value == xs { font-size: variables.$button-xs-size; }
   @if $value == sm { font-size: variables.$button-sm-size; }
@@ -68,17 +68,10 @@
   @if $value == lg { font-size: variables.$button-lg-size; }
 
   svg {
-    width: calc($size/1.75);
-    height: calc($size/1.75);
-    margin-right: -$size*.05;
-    margin-left: -$size*.05;
-  }
-
-  &:not(.button-icon) {
-
-    svg {
-      margin-top: 0.15em;
-    }
+    width: calc($size/2);
+    height: calc($size/2);
+    margin-inline-end: -$size*.05;
+    margin-inline-start: -$size*.05;
   }
 
   &.button-icon {

package/styles/components/_card.scss

@@ -46,7 +46,7 @@
       height: 100%;
       background-color: variables.$overlay;
       overflow: hidden;
-      padding-bottom: 50%;
+      padding-block-end: 50%;
       
       .card-transparent & {
         background-color: variables.$overlay-contrast;
@@ -67,7 +67,10 @@
     width: fit-content;
     justify-content: flex-end;
     
-    @include mixins.responsive(up, tablet) { float: right; }
+    @include mixins.responsive(up, tablet) {
+      float: right;
+      float: inline-end;
+    }
     @include mixins.responsive(down, tablet) { order: 4; }
   }
 
@@ -91,8 +94,8 @@
     &-fullWidth {
 
       .card > &.card_content {
-        padding-right: 0;
-        padding-left: 0;
+        padding-inline-end: 0;
+        padding-inline-start: 0;
       }
     }
   }
@@ -102,7 +105,7 @@
     justify-content: space-between;
 
     >*:only-child {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
 
     &-portrait {
@@ -113,7 +116,7 @@
       }
 
       >*:not(:last-child) {
-        margin-bottom: 1rem;
+        margin-block-end: 1rem;
       }
     }
 
@@ -136,7 +139,7 @@
   > .card_header > .card_icon {
     width: $size;
     height: $size;
-    margin-bottom: calc($size/2);
+    margin-block-end: calc($size/2);
   }
 
   > .card_media,
@@ -146,12 +149,12 @@
     padding: $size;
 
     &:not(:first-child) {
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 
   > .card_actions {
-    margin-top: auto;
+    margin-block-start: auto;
   }
 
   &.card-transparent {
@@ -163,7 +166,7 @@
       padding: 0;
         
       &:not(:first-child) {
-        padding-top: $size;
+        padding-block-start: $size;
       }
     }
 
@@ -173,9 +176,9 @@
   }
 
   .card_media-fullWidth {
-    padding-right: 0;
-    padding-top: 0;
-    padding-left: 0;
+    padding-inline-end: 0;
+    padding-block-start: 0;
+    padding-inline-start: 0;
   }
 
   .card {
@@ -183,7 +186,7 @@
     &_headerActions {
 
       @include mixins.responsive(down, tablet) {
-        margin-top: $size*0.75;
+        margin-block-start: $size*0.75;
       }
     }
 
@@ -193,7 +196,7 @@
       @else if $value == md { font-size: variables.$overline-size; }
       @else if $value == lg { font-size: variables.$caption-size; }
       @else if $value == xl { font-size: variables.$body-size; }
-      margin-bottom: calc($size / 4);
+      margin-block-end: calc($size / 4);
     }
 
     &_title {
@@ -210,7 +213,7 @@
       @else if $value == md { font-size: variables.$subtitle-size; }
       @else if $value == lg { font-size: variables.$h6-size; }
       @else if $value == xl { font-size: variables.$h5-size; }
-      margin-top: calc($size / 3);
+      margin-block-start: calc($size / 3);
     }
 
     &_mediaInner {
@@ -232,15 +235,15 @@
     > .card_header,
     > .card_content,
     > .card_actions {
-      padding-top: $size;
+      padding-block-start: $size;
 
       &:not(:first-child) {
-        padding-left: 0;
+        padding-inline-start: 0;
       }
     }
 
     > .card_actions {
-      margin-left: auto;
+      margin-inline-start: auto;
       flex-direction: column;
       justify-content: flex-start;
     }
@@ -254,7 +257,7 @@
         padding: 0;
         
         &:not(:first-child) {
-          padding-left: $size;
+          padding-inline-start: $size;
         }
       }
 
@@ -264,9 +267,9 @@
     }
 
     .card_media-fullWidth {
-      padding-top: 0;
-      padding-bottom: 0;
-      padding-left: 0;
+      padding-block-start: 0;
+      padding-block-end: 0;
+      padding-inline-start: 0;
     }
   }
 }
@@ -306,7 +309,7 @@
 .card {
 
   &-center { text-align: center; }
-  &-right { text-align: right; }
+  &-end { text-align: right; }
 }
 // —————————————————————————————————————————————————————————————————
 // transparent

package/styles/components/_chip.scss

@@ -45,13 +45,13 @@
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
-  margin-left: -0.5rem;
+  margin-inline-start: -0.5rem;
   object-fit: cover;
 
   .chip-dense & {
     width: 1rem;
     height: 1rem;
-    margin-left: -0.25rem;
+    margin-inline-start: -0.25rem;
   }
 }
 
@@ -66,7 +66,7 @@
   background: none;
   border: none;
   padding: 0;
-  margin-right: -0.25rem;
+  margin-inline-end: -0.25rem;
   cursor: pointer;
   color: inherit;
   opacity: 0.6;
@@ -80,7 +80,7 @@
   &:focus-within { outline: revert; }
 
   .chip-dense & {
-    margin-right: -0.25rem;
+    margin-inline-end: -0.25rem;
   }
 }
 

package/styles/components/_datatable.scss

@@ -16,8 +16,8 @@
   width: 100%;
 
   .table {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
   }
 }
 
@@ -26,7 +26,7 @@
 // —————————————————————————————————————————————————————————————————
 
 .datatable_search {
-  margin-bottom: 0.75rem;
+  margin-block-end: 0.75rem;
   max-width: 20rem;
 }
 
@@ -60,13 +60,13 @@
 .datatable_filterRow {
 
   .table_cell {
-    padding-top: 0;
-    border-top: none;
+    padding-block-start: 0;
+    border-block-start: none;
   }
 }
 
 .datatable_filter {
-  margin-bottom: 0;
+  margin-block-end: 0;
   width: 100%;
 }
 

package/styles/components/_divider.scss

@@ -34,14 +34,14 @@
 // —————————————————————————————————————————————————————————————————
 
 @mixin divider-padding($padding) {
-  margin-top: $padding;
-  margin-bottom: $padding;
+  margin-block-start: $padding;
+  margin-block-end: $padding;
 
   &.divider-portrait {
-    margin-top: 0;
-    margin-right: $padding;
-    margin-bottom: 0;
-    margin-left: $padding;
+    margin-block-start: 0;
+    margin-inline-end: $padding;
+    margin-block-end: 0;
+    margin-inline-start: $padding;
   }
 }
 

package/styles/components/_form.scss

@@ -19,7 +19,7 @@
 	&_actions {
 
 		&:not(:last-child) {
-			margin-bottom: 1.5rem;
+			margin-block-end: 1.5rem;
 		}
 	}
 
@@ -42,13 +42,13 @@
 		&_actions {
 			
 			&:not(:last-child) {
-				margin-bottom: 1rem;
+				margin-block-end: 1rem;
 			}
 		}
 	}
 
   .input:not(:last-child) {
-    margin-bottom: .5rem;
+    margin-block-end: .5rem;
   }
 
 	&.form-card {

package/styles/components/_input.scss

@@ -29,7 +29,7 @@
   max-width: variables.$max-width-form;
 
   & + & {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
   }
 
   &_label,
@@ -41,8 +41,8 @@
   &_hint,
   &_error {
     font-size: variables.$caption-size;
-    margin-top: -.125rem;
-    margin-bottom: .5rem;
+    margin-block-start: -.125rem;
+    margin-block-end: .5rem;
   }
 
   &_label {
@@ -52,14 +52,14 @@
 		overflow: hidden;
 		white-space: nowrap;
 		position: relative;
-		margin-bottom: .25rem;
+		margin-block-end: .25rem;
   }
 
   &_error {
     font-weight: variables.$weight-bold;
     color: variables.$error;
-    border-left: .25rem solid variables.$error;
-    padding-left: .5rem;
+    border-inline-start: .25rem solid variables.$error;
+    padding-inline-start: .5rem;
   }
 
   &_control {
@@ -114,14 +114,14 @@
     padding: .2rem;
     transform: rotate(45deg);
     position: absolute;
-    bottom: variables.$input-height*.45;
-    right: 1rem;
+    inset-block-end: variables.$input-height*.45;
+    inset-inline-end: 1rem;
   }
     
   .input_control {
     display: flex;
     align-items: center;
-    padding-right: 2rem;
+    padding-inline-end: 2rem;
   }
 }
 
@@ -142,8 +142,8 @@ textarea {
   display: flex;
   background-color: transparent;
   border: 0;
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
   
   &:not(&-landscape) {
     flex-direction: column;
@@ -152,8 +152,8 @@ textarea {
     
     .checkbox + .checkbox,
     .radio + .radio {  
-      margin-top: 0.75rem;
-      margin-left: 0;
+      margin-block-start: 0.75rem;
+      margin-inline-start: 0;
     }  
   }
   
@@ -161,7 +161,7 @@ textarea {
     
     .checkbox + .checkbox,
     .radio + .radio {
-      margin-left: 1rem;
+      margin-inline-start: 1rem;
     }
   }
 }
@@ -182,34 +182,47 @@ input[type='radio'] {
   width: variables.$checkbox-width;
   background-color: variables.$input-background;
   border: variables.$border;
-  margin-right: .5rem;
+  margin-inline-end: .5rem;
   color: variables.$primary;
 }
 
-input[type='checkbox'] { border-radius: variables.$border-radius-sm; }
-input[type='radio'] { border-radius: 50%; }
-
-input[type='checkbox']:checked {
-  background-color: variables.$primary;
+input[type='checkbox'] {
+  border-radius: variables.$border-radius-sm;
 
   &:after {
     content: "✔";
     font-size: 1rem;
-    color: variables.$text-contrast;
+    color: transparent;
   }
 }
 
-input[type='radio']:checked {
+input[type='radio'] {
+  border-radius: 50%;
 
   &:after {
     content: "";
     height: variables.$checkbox-width*.5;
     width: variables.$checkbox-width*.5;
-    background-color: variables.$primary;
+    background-color: transparent;
     border-radius: 50%;
   }
 }
 
+input[type='checkbox']:checked {
+  background-color: variables.$primary;
+
+  &:after {
+    color: variables.$text-contrast;
+  }
+}
+
+input[type='radio']:checked {
+
+  &:after {
+    background-color: variables.$primary;
+  }
+}
+
 // —————————————————————————————————————————————————————————————————
 // type / file
 // —————————————————————————————————————————————————————————————————
@@ -232,7 +245,7 @@ input[type='radio']:checked {
       border: 0;
       padding: .125rem .5rem;
       border-radius: variables.$border-radius-sm;
-      margin-right: .5rem;
+      margin-inline-end: .5rem;
       cursor: pointer;
 
       &:hover,
@@ -334,7 +347,7 @@ input[type='radio']:checked {
   }
 
   .input_label {
-    margin-bottom: .125rem;
+    margin-block-end: .125rem;
   }
 
   .input_control {
@@ -353,26 +366,26 @@ input[type='radio']:checked {
   &.select {
 
     &:after {
-      bottom: 0.9rem;
-      right: 0.625rem;
+      inset-block-end: 0.9rem;
+      inset-inline-end: 0.625rem;
       padding: 0.15rem;
     }
  
     .input_control {
-      padding-right: 1.5rem;
+      padding-inline-end: 1.5rem;
     }
   }
 
   .checkboxes,
   .radios {
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
 
     &:not(&-landscape) {
 
       .checkbox + .checkbox,
       .radio + .radio {  
-        margin-top: 0.5rem;
+        margin-block-start: 0.5rem;
       }  
     }
   }
@@ -387,7 +400,7 @@ input[type='radio']:checked {
   input[type='radio'] {
     height: 1.25rem;
     width: 1.25rem;
-    margin-right: .375rem;
+    margin-inline-end: .375rem;
   }
 
   input[type='checkbox']:checked {
@@ -413,16 +426,16 @@ input[type='radio']:checked {
 .input-withIcon {
 
   .input_control {
-    padding-right: variables.$input-height*1.25;
+    padding-inline-end: variables.$input-height*1.25;
   } 
 }
 
-// remove right padding to allow native input trigger
+// remove inline-end padding to allow native input trigger
 input[type="date"],
 input[type="time"],
 input[type="number"] {
   appearance: initial;
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 .input_icon {
@@ -430,12 +443,12 @@ input[type="number"] {
   align-items: center;
   justify-content: center;
   position: absolute;
-  bottom: 0;
-  right: 0;
+  inset-block-end: 0;
+  inset-inline-end: 0;
   width: variables.$input-height;
   height: variables.$input-height;
   pointer-events: none;
-  border-left: variables.$border;
+  border-inline-start: variables.$border;
 
   svg {
     width: 50%;

package/styles/components/_link.scss

@@ -21,8 +21,8 @@
 
   &_icon {
     display: flex;
-    margin-top: 0.1em;
-    margin-left: 0.25em;
+    margin-block-start: 0.1em;
+    margin-inline-start: 0.25em;
     
     svg {
       height: 1em;
@@ -42,7 +42,7 @@
   text-decoration: underline currentColor;
 
   &:hover {
-    text-decoration: underline 3px;
+    text-decoration: underline 0.15em;
   }
 
   &.text-default { color: variables.$text; }

package/styles/components/_list.scss

@@ -20,14 +20,14 @@
     align-items: center;
 
     & + & {
-      margin-top: .5rem;
+      margin-block-start: .5rem;
     }
 
     &Icon {
       display: flex;
       height: 1em;
       width: 1em;
-      margin-right: .5em;
+      margin-inline-end: .5em;
     }
   }
 }
@@ -41,7 +41,7 @@
   @extend %caption;
 
   + .list_item {
-    margin-top: .25rem;
+    margin-block-start: .25rem;
   }
 }
 

package/styles/components/_nav.scss

@@ -41,7 +41,7 @@ a.nav_trigger {
     position: relative;
 
     &:not(:first-child) {
-      padding-top: 0;
+      padding-block-start: 0;
     }
 
     &-dropdown {
@@ -57,8 +57,8 @@ a.nav_trigger {
     white-space: nowrap;
     cursor: pointer;
     height: variables.$nav-item*2;
-    padding-right: variables.$nav-item*.75;
-    padding-left: variables.$nav-item*.75;
+    padding-inline-end: variables.$nav-item*.75;
+    padding-inline-start: variables.$nav-item*.75;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -76,7 +76,7 @@ a.nav_trigger {
         border-width: 0 .125rem .125rem 0;
         padding: .125rem;
         transform: rotate(45deg);
-        margin-left: variables.$nav-item*0.5;
+        margin-inline-start: variables.$nav-item*0.5;
       }
     }
   }
@@ -87,8 +87,8 @@ a.nav_trigger {
     height: 1rem;
     align-items: center;
     justify-content: center;
-    margin-right: 0.25rem;
-    margin-left: -0.25rem;
+    margin-inline-end: 0.25rem;
+    margin-inline-start: -0.25rem;
   }
 
   &_target {
@@ -98,8 +98,8 @@ a.nav_trigger {
     gap: .25rem;
 
     .nav_trigger {
-      padding-right: variables.$nav-item*0.5;
-      padding-left: variables.$nav-item*0.5;        
+      padding-inline-end: variables.$nav-item*0.5;
+      padding-inline-start: variables.$nav-item*0.5;        
       border-radius: variables.$border-radius-sm;
     }
   }
@@ -165,8 +165,8 @@ a.nav_trigger {
     }
   
     &_trigger {
-      padding-right: variables.$nav-item*0.5;
-      padding-left: variables.$nav-item*0.5;
+      padding-inline-end: variables.$nav-item*0.5;
+      padding-inline-start: variables.$nav-item*0.5;
       height: variables.$nav-item*1.5;
     }
 
@@ -176,8 +176,8 @@ a.nav_trigger {
         padding: 0 variables.$nav-item*0.25 variables.$nav-item*0.25 variables.$nav-item*0.25;
 
         .nav_trigger {
-          padding-right: variables.$nav-item*0.25;
-          padding-left: variables.$nav-item*0.25;
+          padding-inline-end: variables.$nav-item*0.25;
+          padding-inline-start: variables.$nav-item*0.25;
         }
       }
     }