pallote-css 0.3.12 → 0.6.0

package/dist/styles/components/_nav.scss

@@ -1,274 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// active
-// show
-// direction
-// dense
-// navbar
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.nav ul,
-.nav__group,
-.nav__target {
-  list-style: none;
-}
-
-.nav {
-  width: fit-content;
-
-  &__container,
-  &__group {
-    display: flex;
-  }
-
-  &__item,
-  &__trigger {
-    border-radius: variables.$border-radius-md;
-  }
-
-  &__item {
-    margin: 0;
-    position: relative;
-
-    &:not(:first-child) {
-      margin-left: variables.$spacing-xs;
-      padding-top: 0;
-    }
-
-    &--dropdown {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  &__trigger {
-    @extend %caption;
-    font-weight: variables.$font-bold;
-    white-space: nowrap;
-    cursor: pointer;
-    height: variables.$nav-item*2;
-    padding: variables.$nav-item*0.5 variables.$nav-item;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &:hover {
-      background-color: variables.$hover;
-    }
-
-    .nav__item--dropdown > & {
-      
-      &:after {
-        content: '';
-        border: solid variables.$text;
-        border-width: 0 variables.$spacing-xxs variables.$spacing-xxs 0;
-        padding: variables.$spacing-xxs;
-        transform: rotate(45deg);
-        margin-left: variables.$nav-item*0.5;
-      }
-    }
-  }
-
-  &__icon {
-    display: flex;
-    width: 1rem;
-    height: 1rem;
-    align-items: center;
-    justify-content: center;
-    margin-right: 0.25rem;
-    margin-left: -0.25rem;
-  }
-
-  &__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;
-
-    .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;
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// active
-// —————————————————————————————————————————————————————————————————
-
-.nav__trigger--active {
-  color: variables.$primary;
-  background-color: variables.$hover;
-
-  .nav__item--dropdown &:after {
-    border-color: variables.$primary;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// show
-// —————————————————————————————————————————————————————————————————
-
-.nav__item--dropdown.js-show {
-  height: auto;
-  background-color: variables.$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: variables.$spacing-xs;
-    }
-
-    &__group {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-
-      &:not(:first-child) {
-        margin-top: variables.$nav-item;
-      }  
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.nav--dense {
-
-  &.nav--portrait .nav__item:not(:first-child) {
-    margin-top: variables.$spacing-xxs;
-  }
-
-  .nav {
-
-    &__item,
-    &__trigger {
-      border-radius: variables.$border-radius-sm;
-    }
-  
-    &__trigger {
-      padding: variables.$nav-item*0.25 variables.$nav-item*0.5;
-      height: variables.$nav-item*1.5;
-    }
-
-    &__item--dropdown {
-    
-      .nav__target {
-        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;
-        }
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// 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;
-      }
-    }
-  }
-}

package/dist/styles/components/_navbar.scss

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

package/dist/styles/components/_page.scss

@@ -1,33 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// withSidebar
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.page {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  
-  &__content {
-    width: 100%;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// withSidebar
-// —————————————————————————————————————————————————————————————————
-
-.page--withSidebar {
-
-  .page__container {
-    display: flex;
-  }
-
-  .section_container {
-    max-width: none;
-  }
-}

package/dist/styles/components/_section.scss

@@ -1,193 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// align
-// color
-// landing (website title on homepage)
-// header (page title)
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.section {
-  @include mixins.clamp(padding-right, 1rem, 4vw, 4rem);
-  @include mixins.clamp(padding-left, 1rem, 4vw, 4rem);
-  width: 100%;
-  overflow: hidden; // prevent horizontal scroll on mobile
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  &_container {
-    @include mixins.clamp(padding-top, 2rem, 8vw, 4rem);
-    @include mixins.clamp(padding-bottom, 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;
-
-    & + .section_content { @include mixins.clamp(padding-top, 2rem, 8vw, 4rem); }
-    &-dense + .section_content { padding-top: 2rem; }
-  }
-
-  &_content {
-    width: 100%;
-
-    & + & {
-      @include mixins.clamp(padding-top, 2rem, 8vw, 4rem);
-    }
-  }
-
-  &_label {
-    color: variables.$text-alt;
-    font-weight: variables.$font-bold;
-  }
-  
-  &_title {
-    @extend %h3;
-    color: variables.$primary;
-    max-width: variables.$desktop*0.75;
-    
-    .section_label + & {
-      margin-top: .5rem;
-    }
-  }
-  
-  &_subtitle {
-    @extend %subtitle;
-    max-width: variables.$max-width-subtitle;
-    
-    .section_title + & {
-      margin-top: 2rem - 1rem;
-    }
-
-    & + & {
-      margin-top: 1rem;
-    }
-  }
-
-  &_actions {
-
-    .section_title + &,
-    .section_subtitle + & {
-      margin-top: 2rem;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// align
-// —————————————————————————————————————————————————————————————————
-
-.section_container {
-  align-items: flex-start;
-  text-align: left;
-}
-
-.section-center .section_container,
-.section-center .section_header,
-.section_content-center {
-  align-items: center;
-  text-align: center;
-}
-
-.section-right .section_container,
-.section-right .section_header,
-.section_content-right {
-  align-items: flex-end;
-  text-align: right;
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin color(
-  $background-color,
-  $title-color: variables.$primary,
-  $color: variables.$text,
-  $paper-color: variables.$background-paper,
-  $border-color: variables.$border-color
-) {
-  background-color: $background-color;
-  color: $color;
-
-  & + & {
-
-    .section_container {
-      padding-top: 0;
-    }
-  }
-
-  .section_title { color: $title-color; }
-  .button-stroke { color: $color; }
-  .snippet {
-    border-color: $border-color;
-  }
-}
-
-.section {
-  &-default { @include color(variables.$background-default); }
-  &-paper { @include color(variables.$background-paper); }
-  &-primary { @include color(
-    variables.$primary, // background-color
-    variables.$primary-contrast, // title-color
-    variables.$primary-contrast, // color
-    variables.$hover-contrast, // paper-color
-    variables.$border-color-contrast // border-color
-  );}
-  &-primaryLight { @include color(
-    variables.$primary-light, // background-color
-    variables.$text, // title-color
-    variables.$text, // color
-    variables.$hover-contrast, // paper-color
-    variables.$border-color-contrast // border-color
-  );}
-}
-
-// —————————————————————————————————————————————————————————————————
-// landing (website title on homepage)
-// —————————————————————————————————————————————————————————————————
-
-.section-landing {
-
-  .section {
-
-    &_container {
-      @include mixins.clamp(padding-top, 2rem, 10vw, 7rem);
-      @include mixins.clamp(padding-bottom, 2rem, 10vw, 7rem);
-    }
-
-    &_title { @extend %h1; max-width: variables.$desktop*0.5; }
-    &_subtitle { @extend %h5; }
-    &_title + .section_subtitle { margin-top: 2rem; }
-    &_title + .section_actions,
-    &_subtitle + .section_actions { margin-top: 3rem; }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// header (page title)
-// —————————————————————————————————————————————————————————————————
-
-.section-header {
-
-  .section {
-
-    &_title { @extend %h2; }
-    &_subtitle { @extend %subtitle; }
-    &_title + .section_subtitle { margin-top: 2rem; }
-    &_title + .section_actions,
-    &_subtitle + .section_actions { margin-top: 2.5rem; }
-  }
-}