pallote-css 0.10.9 → 0.10.11

package/styles/components/_navbar.scss

@@ -50,11 +50,11 @@ header {
 }
 
 .navbar {
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: 100%;
   background-color: variables.$background-paper;
-  border-bottom: variables.$border;
+  border-block-end: variables.$border;
   z-index: 13;
   
   @include mixins.responsive(up, tablet) {
@@ -70,8 +70,8 @@ header {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
 
     @include mixins.responsive(up, tablet) {
       height: 100%;
@@ -80,7 +80,7 @@ header {
     @include mixins.responsive(down, tablet) {
       flex-direction: column;
       align-items: stretch;
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 
@@ -194,8 +194,8 @@ header {
         align-items: stretch;
         overflow: scroll;
         width: 100%;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
+        margin-block-start: 1rem;
+        margin-block-end: 1rem;
         flex-direction: column;
         width: 100%;
       }
@@ -204,8 +204,8 @@ header {
     &_item:not(:first-child) {
 
       @include mixins.responsive(down, tablet) {
-        margin-top: .25rem;
-        margin-left: 0;
+        margin-block-start: .25rem;
+        margin-inline-start: 0;
       }
     }
 
@@ -214,9 +214,9 @@ header {
       @include mixins.responsive(up, tablet) {
         
         .nav_target {
-          @include mixins.calc(top, '100% +' variables.$nav-item*0.5);
+          @include mixins.calc(inset-block-start, '100% +' variables.$nav-item*0.5);
           position: absolute;
-          left: -(variables.$nav-item*.5);
+          inset-inline-start: -(variables.$nav-item*.5);
           width: 10rem;
           padding: variables.$nav-item*.5;
           border-radius: variables.$border-radius-md;
@@ -233,7 +233,7 @@ header {
 // align
 // —————————————————————————————————————————————————————————————————
 
-.navbar-right {
+.navbar-end {
 
   .section_container {
 

package/styles/components/_section.scss

@@ -15,8 +15,8 @@
 // —————————————————————————————————————————————————————————————————
 
 .section {
-  @include mixins.clamp(padding-right, 1rem, 4vw, 4rem);
-  @include mixins.clamp(padding-left, 1rem, 4vw, 4rem);
+  @include mixins.clamp(padding-inline-end, 1rem, 4vw, 4rem);
+  @include mixins.clamp(padding-inline-start, 1rem, 4vw, 4rem);
   width: 100%;
   position: relative;
   display: flex;
@@ -24,22 +24,19 @@
   align-items: center;
 
   &_container {
-    @include mixins.clamp(padding-top, 2rem, 8vw, 4rem);
-    @include mixins.clamp(padding-bottom, 2rem, 8vw, 4rem);
+    @include mixins.clamp(padding-block-start, 2rem, 8vw, 4rem);
+    @include mixins.clamp(padding-block-end, 2rem, 8vw, 4rem);
     width: 100%;
     max-width: variables.$desktop;
     position: relative; // needed to have the content over section-landing:before
   }
 
   &_header {
+    display: flex;
+    flex-direction: column;
 
-    @include mixins.responsive(down, tablet) {
-      display: flex;
-      flex-direction: column;
-    }
-
-    & + .section_content { @include mixins.clamp(padding-top, 2rem, 8vw, 4rem); }
-    &-dense + .section_content { padding-top: 2rem; }
+    & + .section_content { @include mixins.clamp(padding-block-start, 2rem, 8vw, 4rem); }
+    &-dense + .section_content { padding-block-start: 2rem; }
   }
 
   &_content {
@@ -47,23 +44,25 @@
 
     & + &,
     & + .section_header {
-      @include mixins.clamp(padding-top, 2rem, 8vw, 4rem);
+      @include mixins.clamp(padding-block-start, 2rem, 8vw, 4rem);
     }
   }
 
   &_label {
     color: variables.$text-alt;
     font-weight: variables.$weight-bold;
-    margin-bottom: .5rem;
+    margin-block-end: .5rem;
   }
 
   &_titleWrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 1rem;
+    width: 100%;
 
     div.section_actions {
-      margin-top: 0;
+      margin-block-start: 0;
     }
   }
 
@@ -75,14 +74,14 @@
   &_subtitle {
     @extend %subtitle;
     max-width: variables.$max-width-subtitle;
-    margin-top: 1rem;
+    margin-block-start: 1rem;
     word-wrap: normal;
   }
 
   &_actions {
 
     @include mixins.responsive(down, tablet) {
-      margin-top: 2rem;
+      margin-block-start: 2rem;
     }
   }
 }
@@ -103,13 +102,27 @@
   text-align: center;
 }
 
-.section-right .section_container,
-.section-right .section_header,
-.section_content-right {
+.section-center {
+
+  .section_titleWrapper {
+    justify-content: center;
+  }
+}
+
+.section-end .section_container,
+.section-end .section_header,
+.section_content-end {
   align-items: flex-end;
   text-align: right;
 }
 
+.section-end {
+
+  .section_titleWrapper {
+    flex-direction: row-reverse;
+  }
+}
+
 // —————————————————————————————————————————————————————————————————
 // color
 // —————————————————————————————————————————————————————————————————
@@ -127,7 +140,7 @@
   & + & {
 
     .section_container {
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 
@@ -136,6 +149,22 @@
   .snippet {
     border-color: $border-color;
   }
+
+  a[href],
+  area[href],
+  input,
+  input[type="checkbox"],
+  input[type='radio'],
+  select,
+  textarea,
+  button,
+  iframe,
+  [tabindex],
+  [contentEditable=true] {
+
+    &:focus-visible { outline-color: $color; }
+  }
+  
 }
 
 .section {
@@ -146,15 +175,29 @@
     variables.$primary-contrast, // title-color
     variables.$primary-contrast, // color
     variables.$hover-contrast, // paper-color
-    variables.$border-color-contrast // border-color
-  );}
+    variables.$primary-border-color // border-color
+  ); }
   &-primaryLight { @include section-color(
     variables.$primary-light, // background-color
     variables.$text, // title-color
     variables.$text, // color
     variables.$hover-contrast, // paper-color
-    variables.$border-color-contrast // border-color
-  );}
+    variables.$border-color // border-color
+  ); }
+  &-secondary { @include section-color(
+    variables.$secondary, // background-color
+    variables.$secondary-contrast, // title-color
+    variables.$secondary-contrast, // color
+    variables.$hover-contrast, // paper-color
+    variables.$secondary-border-color // border-color
+  ); }
+  &-secondaryLight { @include section-color(
+    variables.$secondary-light, // background-color
+    variables.$text, // title-color
+    variables.$text, // color
+    variables.$hover-contrast, // paper-color
+    variables.$border-color // border-color
+  ); }
 }
 
 // —————————————————————————————————————————————————————————————————
@@ -162,9 +205,9 @@
 // —————————————————————————————————————————————————————————————————
 
 @mixin section-header-level($label-mb, $subtitle-mt, $actions-mt) {
-  .section_label { margin-bottom: $label-mb; }
-  .section_subtitle { margin-top: $subtitle-mt; }
-  .section_actions { margin-top: $actions-mt; }
+  .section_label { margin-block-end: $label-mb; }
+  .section_subtitle { margin-block-start: $subtitle-mt; }
+  .section_actions { margin-block-start: $actions-mt; }
 }
 
 .section_header-1 { @include section-header-level(.75rem, 1.5rem, 2.5rem); }
@@ -180,15 +223,15 @@
   .section {
 
     &_container {
-      @include mixins.clamp(padding-top, 2rem, 10vw, 7rem);
-      @include mixins.clamp(padding-bottom, 2rem, 10vw, 7rem);
+      @include mixins.clamp(padding-block-start, 2rem, 10vw, 7rem);
+      @include mixins.clamp(padding-block-end, 2rem, 10vw, 7rem);
     }
 
     &_label {
-      margin-bottom: 1rem;
+      margin-block-end: 1rem;
 
       @include mixins.responsive(down, tablet) {
-        margin-bottom: 0.75rem;
+        margin-block-end: 0.75rem;
       }
     }
 
@@ -199,17 +242,17 @@
 
     &_subtitle {
       @extend %h6;
-      margin-top: 2rem;
+      margin-block-start: 2rem;
       
       @include mixins.responsive(down, tablet) {
-        margin-top: 1.5rem;
+        margin-block-start: 1.5rem;
       }
     }
 
     &_actions {
 
       @include mixins.responsive(down, tablet) {
-        margin-top: 3rem;
+        margin-block-start: 3rem;
       }
     }
   }

package/styles/components/_sidebar.scss

@@ -5,13 +5,13 @@
 $sidebar-width: 200px;
 
 .sidebar {
-  transition: left variables.$transition-md;
+  transition: inset-inline-start variables.$transition-md;
   @include mixins.calc(height, '100vh - 'variables.$navbar-height);
   position: sticky;
   flex-shrink: 0;
-  border-right: variables.$border;
+  border-inline-end: variables.$border;
   width: $sidebar-width;
-  top: variables.$navbar-height;
+  inset-block-start: variables.$navbar-height;
   padding: 1rem;
   overflow-y: scroll;
   scrollbar-color: light;  
@@ -19,15 +19,15 @@ $sidebar-width: 200px;
   background-color: variables.$background-default;
   
   &.js-opened {
-    left: 0;
+    inset-inline-start: 0;
   }
   
   @include mixins.responsive(down, tablet) {
     position: fixed;
     height: 100vh;
-    top: 0;
-    left: -$sidebar-width;
-    padding-top: variables.$navbar-height-sm;
+    inset-block-start: 0;
+    inset-inline-start: -$sidebar-width;
+    padding-block-start: variables.$navbar-height-sm;
     z-index: 13;
   }
 
@@ -37,7 +37,7 @@ $sidebar-width: 200px;
     border-width: 0 2px 2px 0;
     padding: 4px;
     transform: rotate(-45deg);
-    margin-right: 1rem;
+    margin-inline-end: 1rem;
     display: none;
 
     .page-withSidebar & { display: initial; }
@@ -45,8 +45,8 @@ $sidebar-width: 200px;
 
     &-close {
       position: absolute;
-      top: variables.$navbar-height-sm*0.5;
-      left: variables.$navbar-height-sm*0.5;
+      inset-block-start: variables.$navbar-height-sm*0.5;
+      inset-inline-start: variables.$navbar-height-sm*0.5;
       transform: translateY(-50%) rotate(135deg);
     }
   }
@@ -55,7 +55,7 @@ $sidebar-width: 200px;
     @extend %overline;
     color: variables.$text-alt;
     font-weight: variables.$weight-bold;
-    margin-bottom: .25rem;
-    margin-left: 0;
+    margin-block-end: .25rem;
+    margin-inline-start: 0;
   }
 }

package/styles/components/_snippet.scss

@@ -24,19 +24,20 @@
   border: variables.$border;
   
   & + & {
-    margin-top: .5rem;
+    margin-block-start: .5rem;
   }
 
   p > & {
-    margin-right: .25rem;
-    margin-left: .25rem;
+    margin-inline-end: .25rem;
+    margin-inline-start: .25rem;
   }
 
   .tag {
     font-family: variables.$font, variables.$font-fallback;
     float: right;
-    margin-top: 1px;
-    margin-right: -.25rem;
+    float: inline-end;
+    margin-block-start: 1px;
+    margin-inline-end: -.25rem;
   }
 }
 
@@ -51,8 +52,9 @@
     content: "Default";
     font-family: variables.$font, variables.$font-fallback;
     float: right;
-    margin-top: 1px;
-    margin-right: -.25rem;
+    float: inline-end;
+    margin-block-start: 1px;
+    margin-inline-end: -.25rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -60,12 +62,12 @@
     border-radius: variables.$border-radius-sm;
     white-space: nowrap; // prevent text to go on multiple lines
     position: absolute;
-    top: .5rem;
-    right: .75rem;
+    inset-block-start: .5rem;
+    inset-inline-end: .75rem;
     height: 1rem;
-    padding-right: .25rem;
-    padding-left: .25rem;
-    padding-bottom: 0.1em;
+    padding-inline-end: .25rem;
+    padding-inline-start: .25rem;
+    padding-block-end: 0.1em;
     background-color: variables.$text-disabled;
   }
 }
@@ -79,7 +81,7 @@
   padding: .25rem .5rem !important;
 
   &.snippet-default:after {
-    top: .25rem;
-    right: .5rem;
+    inset-block-start: .25rem;
+    inset-inline-end: .5rem;
   }
 }

package/styles/components/_status.scss

@@ -22,7 +22,7 @@ $spacing-status: .5rem;
     width: $spacing-status;
     background-color: variables.$text-alt;
     border-radius: 50%;
-    margin-right: 0.35em;
+    margin-inline-end: 0.35em;
     transform: translateY(-0.05em);
   }
 }

package/styles/components/_stepper.scss

@@ -45,9 +45,9 @@
   &:not(:last-child)::after {
     content: '';
     position: absolute;
-    top: 1rem;
-    left: calc(50% + 1.25rem);
-    right: calc(-50% + 1.25rem);
+    inset-block-start: 1rem;
+    inset-inline-start: calc(50% + 1.25rem);
+    inset-inline-end: calc(-50% + 1.25rem);
     height: 2px;
     background-color: variables.$border-color;
     z-index: 0;

package/styles/components/_switch.scss

@@ -30,7 +30,7 @@ $spacing-switch: 1rem;
       background-color: variables.$primary-light;
       
       .switch_toggle {
-        @include mixins.calc(left, '100% -'($spacing-switch));
+        @include mixins.calc(inset-inline-start, '100% -'($spacing-switch));
         background-color: variables.$primary;
       }
     }
@@ -38,8 +38,8 @@ $spacing-switch: 1rem;
 
   &_label {
     
-    &:first-child { margin-right: .75em; }
-    &:last-child { margin-left: .75em; }
+    &:first-child { margin-inline-end: .75em; }
+    &:last-child { margin-inline-start: .75em; }
   }
 
   &_switch {
@@ -54,12 +54,12 @@ $spacing-switch: 1rem;
     border-radius: $spacing-switch;
     position: relative;
 
-    &:nth-child(2) { margin-left: .25rem; }
+    &:nth-child(2) { margin-inline-start: .25rem; }
   }
 
   &_toggle {
     position: absolute;
-    left: -.25rem;
+    inset-inline-start: -.25rem;
     width: $spacing-switch*1.25;
     height: $spacing-switch*1.25;
     border-radius: $spacing-switch*1.25;

package/styles/components/_table.scss

@@ -58,7 +58,7 @@ $padding-dense-horizontal: .5rem;
     justify-content: space-between;
     width: 100%;
     padding: $padding-vertical $padding-horizontal;
-    border-top: variables.$border;
+    border-block-start: variables.$border;
   }
 
   &_paginationInfo {
@@ -84,7 +84,7 @@ $padding-dense-horizontal: .5rem;
 
   &_rowSelect {
     width: 5rem;
-    margin-bottom: 0;
+    margin-block-end: 0;
 
     .input_label {
       display: none;
@@ -92,7 +92,7 @@ $padding-dense-horizontal: .5rem;
   }
 }
 
-td.table_cell { border-top: variables.$border; }
+td.table_cell { border-block-start: variables.$border; }
 th.table_cell { background-color: rgba(variables.$contrast, 0.05); }
 
 // —————————————————————————————————————————————————————————————————
@@ -151,12 +151,11 @@ th.table_cell { background-color: rgba(variables.$contrast, 0.05); }
   border-radius: variables.$border-radius-md;
   
   ~ .table_pagination {
-    border-top: 0;
-    border-left: variables.$border;
-    border-bottom: variables.$border;
-    border-right: variables.$border;
-    border-bottom-right-radius: variables.$border-radius-md;
-    border-bottom-left-radius: variables.$border-radius-md;
+    border-block-start: 0;
+    border-block-end: variables.$border;
+    border-inline: variables.$border;
+    border-end-start-radius: variables.$border-radius-md;
+    border-end-end-radius: variables.$border-radius-md;
   }
 }
 

package/styles/components/_tabs.scss

@@ -22,11 +22,11 @@ $spacing-dense: .5rem;
   &_controls {
     display: flex;
     width: 100%;
-    border-bottom: variables.$border;
+    border-block-end: variables.$border;
   }
 
   &_panel {
-    margin-top: $spacing;
+    margin-block-start: $spacing;
   }
 }
 
@@ -34,8 +34,8 @@ $spacing-dense: .5rem;
   position: relative;
   cursor: pointer;
   padding: $spacing*.5 $spacing;
-  border-top-left-radius: variables.$border-radius-md;
-  border-top-right-radius: variables.$border-radius-md;
+  border-start-start-radius: variables.$border-radius-md;
+  border-start-end-radius: variables.$border-radius-md;
   text-transform: variables.$button-transform;
   font-weight: variables.$button-weight;
   font-size: variables.$button-sm-size;
@@ -48,9 +48,9 @@ $spacing-dense: .5rem;
   &:after {
     content: '';
     position: absolute;
-    right: 0;
-    bottom: -1px;
-    left: 0;
+    inset-inline-end: 0;
+    inset-block-end: -1px;
+    inset-inline-start: 0;
     height: 3px;
   }
 }
@@ -79,26 +79,26 @@ $spacing-dense: .5rem;
     &_controls {
       flex-direction: column;
       width: 10rem;
-      border-bottom: 0;
-      border-right: variables.$border;
+      border-block-end: 0;
+      border-inline-end: variables.$border;
     }
 
     &_panel {
-      margin-top: 0;
-      margin-left: $spacing;
+      margin-block-start: 0;
+      margin-inline-start: $spacing;
     }
   }
 
   .tab {
     text-align: left;
-    border-top-left-radius: variables.$border-radius-sm;
-    border-top-right-radius: 0 !important;
-    border-bottom-left-radius: variables.$border-radius-sm;
+    border-start-start-radius: variables.$border-radius-sm;
+    border-start-end-radius: 0 !important;
+    border-end-start-radius: variables.$border-radius-sm;
       
     &:after {
-      top: 0;
-      right: -1px;
-      left: auto;
+      inset-block-start: 0;
+      inset-inline-end: -1px;
+      inset-inline-start: auto;
       height: 100%;
       width: 3px;
     }
@@ -112,13 +112,13 @@ $spacing-dense: .5rem;
 .tabs-dense {
   
   .tabs_panel {
-    margin-top: $spacing-dense;
+    margin-block-start: $spacing-dense;
   }  
 
   .tab {
     padding: $spacing-dense*.5 $spacing-dense;
-    border-top-left-radius: variables.$border-radius-sm;
-    border-top-right-radius: variables.$border-radius-sm;
+    border-start-start-radius: variables.$border-radius-sm;
+    border-start-end-radius: variables.$border-radius-sm;
   }
 }
 
@@ -132,8 +132,8 @@ $spacing-dense: .5rem;
   border-radius: variables.$border-radius-md;
   
   .tabs_panel {
-    margin-top: 0;
-    margin-left: 0;
+    margin-block-start: 0;
+    margin-inline-start: 0;
     padding: $spacing;
   }
   

package/styles/components/_tag.scss

@@ -16,7 +16,7 @@
   display: flex;
   
   .tag:not(:last-child) {
-    margin-right: .25rem;
+    margin-inline-end: .25rem;
   }
 
   &-portrait {
@@ -24,8 +24,8 @@
     align-items: flex-start;
   
     .tag:not(:last-child) {
-      margin-bottom: .25rem;
-      margin-right: 0;
+      margin-block-end: .25rem;
+      margin-inline-end: 0;
     }
   }
 }
@@ -41,8 +41,8 @@
   height: 1.5rem;
   width: fit-content;
   min-width: fit-content;
-  padding-right: 0.4em;
-  padding-left: 0.4em;
+  padding-inline-end: 0.4em;
+  padding-inline-start: 0.4em;
 }
 
 // —————————————————————————————————————————————————————————————————