pallote-css 0.1.0 → 0.2.0

package/dist/styles/components/_nav.scss

@@ -0,0 +1,259 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// active
+// show
+// direction
+// dense
+// navbar
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.nav ul,
+.nav__target {
+  list-style: none;
+}
+
+.nav {
+  width: fit-content;
+
+  &__container,
+  &__group {
+    display: flex;
+  }
+
+  &__item,
+  &__trigger {
+    border-radius: $border-radius-md;
+  }
+
+  &__item {
+    margin: 0;
+    position: relative;
+
+    &:not(:first-child) {
+      margin-left: $spacing-xs;
+      padding-top: 0;
+    }
+
+    &--dropdown {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &__trigger {
+    @extend %caption;
+    font-weight: $font-bold;
+    white-space: nowrap;
+    cursor: pointer;
+    height: $nav-item*2;
+    padding: $nav-item*0.5 $nav-item;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &:hover {
+      background-color: $hover;
+    }
+
+    .nav__item--dropdown > & {
+      
+      &:after {
+        content: '';
+        border: solid $text;
+        border-width: 0 $spacing-xxs $spacing-xxs 0;
+        padding: $spacing-xxs;
+        transform: rotate(45deg);
+        margin-left: $nav-item*0.5;
+      }
+    }
+  }
+
+  &__target {
+    display: none;
+    flex-direction: column;
+    padding: $nav-item*0.25 $nav-item*0.5 $nav-item*0.5 $nav-item*0.5;
+
+    .nav {
+
+      &__item {
+
+        &:not(:first-child) {
+          margin-top: $spacing-xs;
+          margin-left: 0;
+        }
+      }
+      
+      &__trigger {
+        padding-right: $nav-item*0.5;
+        padding-left: $nav-item*0.5;        
+        border-radius: $border-radius-sm;
+      }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.nav__trigger--active {
+  color: $primary;
+  background-color: $hover;
+
+  .nav__item--dropdown &:after {
+    border-color: $primary;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// show
+// —————————————————————————————————————————————————————————————————
+
+.nav__item--dropdown.js-show {
+  height: auto;
+  background-color: $hover;
+
+  > .nav {
+
+    &__trigger--active,
+    &__trigger:hover {
+      background-color: transparent;
+    }
+
+    &__target {
+      display: flex;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+.nav--portrait {
+  width: 100%;
+  flex-direction: column;
+
+  .nav {
+    
+    &__item:not(:first-child) {
+      margin-left: 0;
+      margin-top: $spacing-xs;
+    }
+
+    &__group {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+
+      &:not(:first-child) {
+        margin-top: $nav-item;
+      }  
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.nav--dense {
+
+  &.nav--portrait .nav__item:not(:first-child) {
+    margin-top: $spacing-xxs;
+  }
+
+  .nav {
+
+    &__item,
+    &__trigger {
+      border-radius: $border-radius-sm;
+    }
+  
+    &__trigger {
+      padding: $nav-item*0.25 $nav-item*0.5;
+      height: $nav-item*1.5;
+    }
+
+    &__item--dropdown {
+    
+      .nav__target {
+        padding: 0 $nav-item*0.25 $nav-item*0.25 $nav-item*0.25;
+
+        .nav__trigger {
+          padding-right: $nav-item*0.25;
+          padding-left: $nav-item*0.25;
+        }
+      }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// navbar
+// —————————————————————————————————————————————————————————————————
+
+.navbar {
+
+  .nav {
+
+    @include responsive(up, tablet) { height: 100%; }
+    @include responsive(down, tablet) { width: 100%; }
+
+    &__container {
+
+      @include responsive(up, tablet) {
+        height: 100%;
+        align-items: center;
+      }
+
+      @include responsive(down, tablet) {
+        @include calc(max-height, '100vh - '$spacing-xl*3);
+        align-items: stretch;
+        overflow: scroll;
+        width: 100%;
+        margin-top: $nav-item;
+        margin-bottom: $nav-item;
+        flex-direction: column;
+        width: 100%;
+      }
+    }
+
+    &__item:not(:first-child) {
+
+      @include responsive(down, tablet) {
+        margin-top: $spacing-xs;
+        margin-left: 0;
+      }
+    }
+
+    &__item--dropdown {
+
+      @include responsive(up, tablet) {
+        
+        .nav__target {
+          @include calc(top, '100% +' $nav-item*0.5);
+          position: absolute;
+          left: 0;
+          width: $spacing-xl*2.5;
+          padding: $nav-item*0.5;
+          border-radius: $border-radius-md;
+          border: $border;
+          z-index: 1;              
+          background-color: $background-paper;
+        }
+      }
+    }
+
+    &__trigger {
+
+      @include responsive(down, tablet) {
+        height: auto;
+      }
+    }
+  }
+}

package/dist/styles/components/_navbar.scss

@@ -0,0 +1,189 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// alignement
+// —————————————————————————————————————————————————————————————————
+
+// button apparition
+@include keyframes(button-menu-opacity) {
+	0% 		{ opacity: 0; }
+	50% 	{ opacity: 0; }
+	100% 	{ opacity: 100%; }
+}
+
+// lines > close
+@include keyframes(button-menu-open-before) {
+	0% 		{ transform: translateY($spacing-xs*1.5); }
+	50% 	{ transform: translateY(0); 
+			  	transform: rotate(0); }
+	100% 	{ transform: rotate(45deg); }
+}
+@include keyframes(button-menu-open-after) {
+	0% 		{ transform: translateY(-$spacing-xs*1.5); }
+	50% 	{ transform: translateY(0); 
+			  	transform: rotate(0); }
+	100% 	{ transform: rotate(-45deg); }
+}
+
+// close > lines
+@include keyframes(button-menu-close-before) {
+	0% 		{ transform: rotate(45deg); }
+	50% 	{ transform: rotate(0); 
+			  	transform: translateY(0); }
+	100% 	{ transform: translateY($spacing-xs*1.5); }
+}
+@include keyframes(button-menu-close-after) {
+	0% 		{ transform: rotate(-45deg); }
+	50% 	{ transform: rotate(0); 
+			  	transform: translateY(0); }
+	100% 	{ transform: translateY(-$spacing-xs*1.5); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.navbar {
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: $background-paper;
+  border-bottom: $border;
+  z-index: 13;
+  
+  @include responsive(up, tablet) {
+    height: $navbar-height;
+  }
+
+  @include responsive(down, tablet) {
+    z-index: 11;
+  }
+  
+  &.section {
+    overflow: visible;
+    position: sticky;
+  }
+
+  .section__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 0;
+    padding-bottom: 0;
+
+    @include responsive(up, tablet) {
+      height: 100%;
+    }
+
+    @include responsive(down, tablet) {
+      flex-direction: column;
+      align-items: stretch;
+      padding-top: 0;
+    }
+  }
+
+  &__main {
+    display: flex;
+    align-items: center;
+
+    @include responsive(down, tablet) {
+      height: $navbar-height-sm;
+    }
+  }
+  
+  &__logo {
+    display: flex;
+    align-items: baseline;
+    font-weight: $font-bold;
+    flex-grow: 1;
+    
+    > * {
+      margin-right: $spacing-xs;
+    }
+  }
+  
+  &__button {
+    @include transition($transition-md, opacity);
+    animation: button-menu-opacity $transition-lg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: relative;
+    width: $spacing-md;
+    height: $spacing-md;
+    
+    @include responsive(up, tablet) {
+      display: none;
+    }
+
+    &:before,
+    &:after,
+    span {
+      background-color: $text;
+      border-radius: 0.15rem;
+    }
+  
+    &:before,
+    &:after {
+      @include pseudo-element('', auto, auto, auto, auto, $spacing-md, 2px);
+      @include transition($transition-md, transform);
+    }
+  
+    &:before {
+      transform: translateY($spacing-xs*1.5);
+      animation: button-menu-close-before $transition-lg;
+    }
+  
+    &:after {
+      transform: translateY(-$spacing-xs*1.5);
+      animation: button-menu-close-after $transition-lg;
+    }
+  
+    span {
+      @include transition($transition-md, opacity);
+      position: absolute;
+      width: $spacing-md;
+      height: 2px;
+    }
+  
+    &.js-opened {
+  
+      &:before { animation: button-menu-open-before $transition-lg forwards; }
+      &:after { animation: button-menu-open-after $transition-lg forwards; }
+      span { opacity: 0; }
+    }
+  }  
+
+  &__nav {
+
+    @include responsive(down, tablet) {
+      @include transition($transition-md, max-height);
+      align-items: flex-start;
+      max-height: 0;
+      overflow: hidden;
+
+      .js-opened & {
+        max-height: 80vh;
+      }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// alignement
+// —————————————————————————————————————————————————————————————————
+
+.navbar--right {
+
+  .section__container {
+
+    @include responsive(up, tablet) {
+      flex-direction: row-reverse;    
+    }
+  }
+
+  .navbar__main {
+    flex-direction: row-reverse;    
+  }
+}

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

@@ -1,9 +1,12 @@
 // —————————————————————————————————————————————————————————————————
 // elements
 // alignement
-// color
+// direction
+// fill
 // size
-// variants
+// landing (website title on homepage)
+// header (page title)
+// dense
 // overrides
 // —————————————————————————————————————————————————————————————————
 
@@ -14,6 +17,7 @@
 .section {
   @include clamp(padding-right, $spacing-md, 4vw, $spacing-xl);
   @include clamp(padding-left, $spacing-md, 4vw, $spacing-xl);
+  width: 100%;
   overflow: hidden; // prevent horizontal scroll on mobile
   position: relative;
   display: flex;
@@ -55,11 +59,6 @@
     .section__label + & {
       margin-top: $spacing-sm;
     }
-
-    .section__header--dense & {
-      color: inherit;
-      @extend %h4;
-    }
   }
   
   &__subtitle {
@@ -88,18 +87,50 @@
 // alignement
 // —————————————————————————————————————————————————————————————————
 
-.section {
+.section__container {
+  align-items: flex-start;
+  text-align: left;
 
-  &--left { align-items: flex-start; text-align: left; }
-  &--center { align-items: center; text-align: center; }
-  &--right { align-items: flex-end; text-align: right; }
+  .section--center & { align-items: center; text-align: center; }
+  .section--right & { align-items: flex-end; text-align: right; }
 }
 
 // —————————————————————————————————————————————————————————————————
-// color
+// direction
 // —————————————————————————————————————————————————————————————————
 
-@mixin color($background-color, $color-title: $primary, $color: $text) {
+.section--landscape {
+
+  .section {
+
+    &__container {
+      display: flex;
+      flex-direction: row;
+      gap: $spacing-xl;
+    }
+
+    &__header {
+      flex-basis: 40%;
+    }
+    
+    &__content {
+      padding-top: 0;
+      flex-basis: 60%;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// fill
+// —————————————————————————————————————————————————————————————————
+
+@mixin fill(
+  $background-color,
+  $title-color: $primary,
+  $color: $text,
+  $paper-color: $background-paper,
+  $border-color: $border-color
+) {
   background-color: $background-color;
   color: $color;
 
@@ -110,16 +141,30 @@
     }
   }
 
-  .section__title { color: $color-title; }
+  .section__title { color: $title-color; }
   .button--stroke { color: $color; }
+  .snippet {
+    border-color: $border-color;
+  }
 }
 
 .section {
-
   &--default { @include color($background-default); }
-  &--paper { @include color($background-paper); }
-  &--primary { @include color($primary, $primary-text, $primary-text); }
-  &--primaryLight { @include color($primary-light); }
+  &--paper { @include fill($background-paper); }
+  &--primary { @include fill(
+    $primary, // background-color
+    $primary-contrast, // title-color
+    $primary-contrast, // color
+    $hover-contrast, // paper-color
+    $border-color-contrast // border-color
+  );}
+  &--primaryLight { @include fill(
+    $primary-light, // background-color
+    $text-contrast, // title-color
+    $text-contrast, // color
+    $hover-contrast, // paper-color
+    $border-color-contrast // border-color
+  );}
 }
 
 // —————————————————————————————————————————————————————————————————
@@ -132,23 +177,43 @@
 }
 
 // —————————————————————————————————————————————————————————————————
-// variants
+// landing (website title on homepage)
 // —————————————————————————————————————————————————————————————————
 
 .section--landing {
-  align-items: center;
 
+  .section__container {
+    @include clamp(padding-top, $spacing-lg, 10vw, $spacing-xxl);
+    @include clamp(padding-bottom, $spacing-lg, 10vw, $spacing-xxl);
+  }
   .section__title { @extend %h1; max-width: $desktop*0.5; }
   .section__subtitle { @extend %h5; }
+  .section__title + .section__subtitle { margin-top: $spacing-lg; }
 }
 
-// first section of the page for page title
+// —————————————————————————————————————————————————————————————————
+// header (page title)
+// —————————————————————————————————————————————————————————————————
+
 .section--header {
 
   .section__title { @extend %h2; }
   .section__subtitle { @extend %subtitle; }
+  .section__title + .section__subtitle { margin-top: $spacing-lg; }
 }
 
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.section__header--dense {
+
+  .section {
+
+    &__label { @extend %caption; font-weight: $font-bold; }
+    &__title { color: inherit; @extend %h4; }
+  }
+}
 // —————————————————————————————————————————————————————————————————
 // overrides
 // —————————————————————————————————————————————————————————————————

package/dist/styles/components/_sidebar.scss

@@ -0,0 +1,57 @@
+$sidebar-width: 200px;
+
+.sidebar {
+  transition: left $transition-md;
+  @include calc(height, '100vh - '$navbar-height);
+  position: sticky;
+  flex-shrink: 0;
+  border-right: $border;
+  width: $sidebar-width;
+  top: $navbar-height;
+  padding: $spacing-md;
+  overflow-y: scroll;
+  scrollbar-color: light;  
+  z-index: 11;
+  background-color: $background-paper;
+  
+  &.js-opened {
+    left: 0;
+  }
+  
+  @include responsive(down, tablet) {
+    position: fixed;
+    height: 100vh;
+    top: 0;
+    left: -$sidebar-width;
+    padding-top: $navbar-height-sm;
+    z-index: 13;
+  }
+
+  &__button {
+    content: '';
+    border: solid $text;
+    border-width: 0 2px 2px 0;
+    padding: 4px;
+    transform: rotate(-45deg);
+    margin-right: $spacing-md;
+    display: none;
+
+    .page--withSidebar & { display: initial; }
+    @include responsive(up, tablet) { display: none !important; }
+
+    &--close {
+      position: absolute;
+      top: $navbar-height-sm*0.5;
+      left: $navbar-height-sm*0.5;
+      transform: translateY(-50%) rotate(135deg);
+    }
+  }
+
+  &__title {
+    @extend %overline;
+    color: $text-alt;
+    font-weight: $font-bold;
+    margin-bottom: $spacing-xs;
+    margin-left: 0;
+  }
+}