pallote-css 0.4.0 → 0.7.0

package/{dist/styles → styles}/common/_global.scss

@@ -59,7 +59,7 @@ footer {
 	height: 0; 
 	overflow: hidden; 
 	max-width: 100%;
-	border-radius: variables.$spacing-md;
+	border-radius: 1rem;
 	
 	iframe, object, embed { 
 		position: absolute; 
@@ -116,10 +116,10 @@ ul {
 }
 
 li {
-	margin-left: variables.$spacing-md;
+	margin-left: 1rem;
 
 	& + & {
-		padding-top: variables.$spacing-xs;
+		padding-top: .25rem;
 	}
 }
 
@@ -147,7 +147,7 @@ strong {
 // z-index
 
 @for $i from 0 through 9 {
-	.z-index--#{$i} { z-index: $i; }
+	.z-index-#{$i} { z-index: $i; }
 }
 
 // background

package/{dist/styles → styles}/common/_variables.scss

@@ -110,21 +110,13 @@ $input-background: rgba($text, 0.05);
 
 $col: calc(100%/12);
 
-$spacing-xxs: 0.125rem !default;
-$spacing-xs: 0.25rem !default;
-$spacing-sm: 0.5rem !default;
-$spacing-md: 1rem !default;
-$spacing-lg: 2rem !default;
-$spacing-xl: 4rem !default;
-$spacing-xxl: 7rem !default;
-
 $max-width-subtitle: 27.5rem !default;
 $max-width-editor: 40rem !default;
 $max-width-form: 40rem !default;
 
 $navbar-height: 4rem !default;
 $navbar-height-sm: 3rem !default;
-$nav-item: $spacing-md !default;
+$nav-item: 1rem !default;
 
 // —————————————————————————————————————————————————————————————————
 // typography
@@ -201,6 +193,13 @@ $overline-size: 0.75rem !default;
 $overline-weight: $font-regular !default;
 $overline-line-height: 1.5 !default;
 
+$button-size: 1rem !default;
+$button-xs-size: 0.75rem !default;
+$button-sm-size: 0.875rem !default;
+$button-lg-size: 1.25rem !default;
+$button-transform: uppercase !default;
+$button-weight: $font-bold !default;
+
 // —————————————————————————————————————————————————————————————————
 // breakpoints
 // —————————————————————————————————————————————————————————————————

package/{dist/styles → styles}/components/_accordion.scss

@@ -15,19 +15,19 @@
 .accordion {
   width: 100%;
 
-  &__item {
+  &_item {
     position: relative;
     background-color: variables.$hover;
     width: 100%;
   }
 
-  &__control,
-  &__content {
+  &_control,
+  &_content {
     transition: padding variables.$transition-md;
     will-change: padding;
   }
 
-  &__control {
+  &_control {
     display: flex;
     align-items: center;
     width: 100%;
@@ -37,14 +37,14 @@
       transition: transform variables.$transition-md;
       will-change: transform;
       position: absolute;
-      height: variables.$spacing-md;
-      width: variables.$spacing-md;
+      height: 1rem;
+      width: 1rem;
       transform-origin: center 60%;
       pointer-events: none;
     }
   }
 
-  &__content {
+  &_content {
     max-height: 0;
     overflow: hidden;
     transition: max-height variables.$transition-md;
@@ -60,14 +60,14 @@
 
   .accordion {
 
-    &__item {
+    &_item {
       border-radius: calc($size*2/3);
 
       &:not(:last-child) { margin-bottom: calc($size/3); }
-      &--active { padding-bottom: $size; }
+      &-active { padding-bottom: $size; }
     }
     
-    &__control {
+    &_control {
       padding: $size $size*1.5;
 
       &:after {
@@ -76,45 +76,45 @@
       }
     }
 
-    &__header {
+    &_header {
 
       @if $proportion == sm { margin-bottom: -1px; }
       @if $proportion == lg { margin: -1px 0 -2px 0; }
     }
 
-    &__content {
+    &_content {
       padding: 0 $size*1.5;
       overflow: hidden;
     }
   }
 
-  &.accordion--transparent .accordion__item--active:not(:first-child) {
+  &.accordion-transparent .accordion_item-active:not(:first-child) {
     margin-top: calc($size/3);
   }
 }
 
 .accordion {
 
-  @include accordion-size(md, variables.$spacing-sm);
-  &--sm { @include accordion-size(sm, variables.$spacing-xs); }
-  &--lg { @include accordion-size(lg, variables.$spacing-md); }
+  @include accordion-size(md, .5rem);
+  &-sm { @include accordion-size(sm, .25rem); }
+  &-lg { @include accordion-size(lg, 1rem); }
 }
 
 // —————————————————————————————————————————————————————————————————
 // transparent
 // —————————————————————————————————————————————————————————————————
 
-.accordion--transparent {
+.accordion-transparent {
 
-  .accordion__item {
+  .accordion_item {
     transition: background-color variables.$transition-md, margin variables.$transition-md;
     will-change: background-color, margin;
     background-color: transparent;
 
     @include mixins.hover { background-color: variables.$hover; }
-    &--active { background-color: variables.$hover; }
+    &-active { background-color: variables.$hover; }
     
-    &:not(:last-child):not(.accordion__item--active) {
+    &:not(:last-child):not(.accordion_item-active) {
       margin-bottom: 0;
     }
   }
@@ -124,9 +124,9 @@
 // active
 // —————————————————————————————————————————————————————————————————
 
-.accordion__item--active {
+.accordion_item-active {
 
-  .accordion__control:after {
+  .accordion_control:after {
     transform: rotate(180deg);
   }
 }

package/{dist/styles → styles}/components/_breadcrumbs.scss

@@ -12,11 +12,12 @@
 // —————————————————————————————————————————————————————————————————
 
 .breadcrumbs {
-  text-transform: uppercase;
 
   ol {
     display: inline-flex;
     flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
   }
 
   li {
@@ -25,8 +26,9 @@
   }
 
   &_item {
-    @extend %caption;
-    font-weight: variables.$font-bold;
+    text-transform: variables.$button-transform;
+    font-weight: variables.$button-weight;
+    font-size: variables.$button-sm-size;
     
     &:not(:first-child) {
       margin-left: .25rem;

package/{dist/styles → styles}/components/_button.scss

@@ -27,8 +27,8 @@
   border-radius: variables.$border-radius-sm;
   position: relative;
   line-height: 0;
-  text-transform: uppercase;
-  font-weight: variables.$font-bold;
+  text-transform: variables.$button-transform;
+  font-weight: variables.$button-weight;
   white-space: nowrap;
   outline-offset: 2px;
   width: fit-content;
@@ -62,12 +62,10 @@
   padding-right: $size*.33;
   padding-left: $size*.33;
 
-  @if $value == xs or $value == sm {
-    @extend %overline;
-    border-radius: variables.$border-radius-sm;
-  }
-  @if $value == md { @extend %body; }
-  @if $value == lg { @extend %subtitle; }
+  @if $value == xs { font-size: variables.$button-xs-size; }
+  @if $value == sm { font-size: variables.$button-sm-size; }
+  @if $value == md { font-size: variables.$button-size; }
+  @if $value == lg { font-size: variables.$button-lg-size; }
 
   svg {
     width: calc($size/1.75);

package/{dist/styles → styles}/components/_input.scss

@@ -30,21 +30,34 @@
     margin-top: 1rem;
   }
 
+  &_label,
+  &_hint,
+  &_error {
+    display: block;
+  }
+
+  &_hint,
+  &_error {
+    font-size: variables.$caption-size;
+    margin-top: -.125rem;
+    margin-bottom: .5rem;
+  }
+
   &_label {
 		@include mixins.transition(variables.$transition-md, color);
 		font-weight: variables.$font-bold;
 		text-overflow: ellipsis;
-		display: block;
 		overflow: hidden;
 		white-space: nowrap;
 		position: relative;
 		margin-bottom: .25rem;
   }
 
-  &_hint {
-		@extend %caption;
-    margin-top: -.125rem;
-		margin-bottom: .5rem;
+  &_error {
+    font-weight: variables.$font-bold;
+    color: variables.$error;
+    border-left: .25rem solid variables.$error;
+    padding-left: .5rem;
   }
 
   &_control {
@@ -98,7 +111,6 @@
     border-width: 0 .125rem .125rem 0;
     padding: .2rem;
     transform: rotate(45deg);
-    margin-left: variables.$nav-item*0.5;
     position: absolute;
     bottom: variables.$input-height*.45;
     right: 1rem;

package/{dist/styles → styles}/components/_nav.scss

@@ -8,76 +8,80 @@
 // show
 // direction
 // dense
-// navbar
 // —————————————————————————————————————————————————————————————————
 
 // —————————————————————————————————————————————————————————————————
 // elements
 // —————————————————————————————————————————————————————————————————
 
-.nav ul,
-.nav__group,
-.nav__target {
-  list-style: none;
+.nav_trigger,
+a.nav_trigger {
+  outline-offset: -2px;
+
+  &:focus {
+    outline: 2px solid variables.$primary;
+  }
 }
 
 .nav {
   width: fit-content;
 
-  &__container,
-  &__group {
+  &_container {
     display: flex;
+    gap: calc(variables.$nav-item/4);
   }
 
-  &__item,
-  &__trigger {
-    border-radius: variables.$border-radius-md;
+  &_item,
+  &_trigger {
+    border-radius: variables.$border-radius-sm;
   }
 
-  &__item {
+  &_item {
     margin: 0;
     position: relative;
 
     &:not(:first-child) {
-      margin-left: variables.$spacing-xs;
       padding-top: 0;
     }
 
-    &--dropdown {
+    &-dropdown {
       display: flex;
       flex-direction: column;
     }
   }
 
-  &__trigger {
+  &_trigger {
     @extend %caption;
-    font-weight: variables.$font-bold;
+    font-weight: variables.$button-weight;
+    text-transform: variables.$button-transform;
     white-space: nowrap;
     cursor: pointer;
     height: variables.$nav-item*2;
-    padding: variables.$nav-item*0.5 variables.$nav-item;
+    padding-right: variables.$nav-item*.75;
+    padding-left: variables.$nav-item*.75;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    text-underline-offset: .15em;
 
-    &:hover {
+    &:not(.nav_trigger-active):hover {
       background-color: variables.$hover;
     }
 
-    .nav__item--dropdown > & {
+    .nav_item-dropdown > & {
       
       &:after {
         content: '';
         border: solid variables.$text;
-        border-width: 0 variables.$spacing-xxs variables.$spacing-xxs 0;
-        padding: variables.$spacing-xxs;
+        border-width: 0 .125rem .125rem 0;
+        padding: .125rem;
         transform: rotate(45deg);
         margin-left: variables.$nav-item*0.5;
       }
     }
   }
 
-  &__icon {
+  &_icon {
     display: flex;
     width: 1rem;
     height: 1rem;
@@ -87,26 +91,16 @@
     margin-left: -0.25rem;
   }
 
-  &__target {
+  &_target {
     display: none;
     flex-direction: column;
     padding: variables.$nav-item*0.25 variables.$nav-item*0.5 variables.$nav-item*0.5 variables.$nav-item*0.5;
+    gap: .25rem;
 
-    .nav {
-
-      &__item {
-
-        &:not(:first-child) {
-          margin-top: variables.$spacing-xs;
-          margin-left: 0;
-        }
-      }
-      
-      &__trigger {
-        padding-right: variables.$nav-item*0.5;
-        padding-left: variables.$nav-item*0.5;        
-        border-radius: variables.$border-radius-sm;
-      }
+    .nav_trigger {
+      padding-right: variables.$nav-item*0.5;
+      padding-left: variables.$nav-item*0.5;        
+      border-radius: variables.$border-radius-sm;
     }
   }
 }
@@ -115,11 +109,11 @@
 // active
 // —————————————————————————————————————————————————————————————————
 
-.nav__trigger--active {
+.nav_trigger-active {
   color: variables.$primary;
   background-color: variables.$hover;
 
-  .nav__item--dropdown &:after {
+  .nav_item-dropdown &:after {
     border-color: variables.$primary;
   }
 }
@@ -128,18 +122,18 @@
 // show
 // —————————————————————————————————————————————————————————————————
 
-.nav__item--dropdown.js-show {
+.nav_item-dropdown.js-show {
   height: auto;
   background-color: variables.$hover;
 
   > .nav {
 
-    &__trigger--active,
-    &__trigger:hover {
+    &_trigger-active,
+    &_trigger:hover {
       background-color: transparent;
     }
 
-    &__target {
+    &_target {
       display: flex;
     }
   }
@@ -149,26 +143,11 @@
 // direction
 // —————————————————————————————————————————————————————————————————
 
-.nav--portrait {
+.nav-portrait {
   width: 100%;
-  flex-direction: column;
-
-  .nav {
-    
-    &__item:not(:first-child) {
-      margin-left: 0;
-      margin-top: variables.$spacing-xs;
-    }
-
-    &__group {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
 
-      &:not(:first-child) {
-        margin-top: variables.$nav-item;
-      }  
-    }
+  .nav_container{
+    flex-direction: column;
   }
 }
 
@@ -176,30 +155,27 @@
 // dense
 // —————————————————————————————————————————————————————————————————
 
-.nav--dense {
-
-  &.nav--portrait .nav__item:not(:first-child) {
-    margin-top: variables.$spacing-xxs;
-  }
+.nav-dense {
 
   .nav {
 
-    &__item,
-    &__trigger {
+    &_item,
+    &_trigger {
       border-radius: variables.$border-radius-sm;
     }
   
-    &__trigger {
-      padding: variables.$nav-item*0.25 variables.$nav-item*0.5;
+    &_trigger {
+      padding-right: variables.$nav-item*0.5;
+      padding-left: variables.$nav-item*0.5;
       height: variables.$nav-item*1.5;
     }
 
-    &__item--dropdown {
+    &_item-dropdown {
     
-      .nav__target {
+      .nav_target {
         padding: 0 variables.$nav-item*0.25 variables.$nav-item*0.25 variables.$nav-item*0.25;
 
-        .nav__trigger {
+        .nav_trigger {
           padding-right: variables.$nav-item*0.25;
           padding-left: variables.$nav-item*0.25;
         }
@@ -207,68 +183,3 @@
     }
   }
 }
-
-// —————————————————————————————————————————————————————————————————
-// navbar
-// —————————————————————————————————————————————————————————————————
-
-.navbar {
-
-  .nav {
-
-    @include mixins.responsive(up, tablet) { height: 100%; }
-    @include mixins.responsive(down, tablet) { width: 100%; }
-
-    &__container {
-
-      @include mixins.responsive(up, tablet) {
-        height: 100%;
-        align-items: center;
-      }
-
-      @include mixins.responsive(down, tablet) {
-        @include mixins.calc(max-height, '100vh - 'variables.$spacing-xl*3);
-        align-items: stretch;
-        overflow: scroll;
-        width: 100%;
-        margin-top: variables.$nav-item;
-        margin-bottom: variables.$nav-item;
-        flex-direction: column;
-        width: 100%;
-      }
-    }
-
-    &__item:not(:first-child) {
-
-      @include mixins.responsive(down, tablet) {
-        margin-top: variables.$spacing-xs;
-        margin-left: 0;
-      }
-    }
-
-    &__item--dropdown {
-
-      @include mixins.responsive(up, tablet) {
-        
-        .nav__target {
-          @include mixins.calc(top, '100% +' variables.$nav-item*0.5);
-          position: absolute;
-          left: 0;
-          width: variables.$spacing-xl*2.5;
-          padding: variables.$nav-item*0.5;
-          border-radius: variables.$border-radius-md;
-          border: variables.$border;
-          z-index: 1;              
-          background-color: variables.$background-paper;
-        }
-      }
-    }
-
-    &__trigger {
-
-      @include mixins.responsive(down, tablet) {
-        height: auto;
-      }
-    }
-  }
-}