pallote-css 0.6.0 → 0.7.0

package/styles/components/_navbar.scss

@@ -0,0 +1,253 @@
+@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(.325rem); }
+	50% 	{ transform: translateY(0); 
+			  	transform: rotate(0); }
+	100% 	{ transform: rotate(45deg); }
+}
+@include mixins.keyframes(button-menu-open-after) {
+	0% 		{ transform: translateY(-.325rem); }
+	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(.325rem); }
+}
+@include mixins.keyframes(button-menu-close-after) {
+	0% 		{ transform: rotate(-45deg); }
+	50% 	{ transform: rotate(0); 
+			  	transform: translateY(0); }
+	100% 	{ transform: translateY(-.325rem); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+header {
+  width: 100%;
+}
+
+.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;
+      justify-content: space-between;
+    }
+  }
+  
+  &_logo {
+    display: flex;
+    align-items: baseline;
+    font-weight: variables.$font-bold;
+    border-radius: variables.$border-radius-sm;
+    color: variables.$primary;
+    
+    img {
+      max-height: 2rem;
+    }
+  }
+  
+  &_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: 1rem;
+    height: 1rem;
+    border-radius: calc(variables.$border-radius-sm/2);
+    outline-offset: .25rem;
+    
+    @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, 1rem, 2px);
+      @include mixins.transition(variables.$transition-md, transform);
+    }
+  
+    &:before {
+      transform: translateY(.325rem);
+      animation: button-menu-close-before variables.$transition-lg;
+    }
+  
+    &:after {
+      transform: translateY(-.325rem);
+      animation: button-menu-close-after variables.$transition-lg;
+    }
+  
+    span {
+      @include mixins.transition(variables.$transition-md, opacity);
+      position: absolute;
+      width: 1rem;
+      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 {
+    display: flex;
+
+    @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;
+      }
+    }
+  }
+
+  .nav {
+    display: flex;
+
+    @include mixins.responsive(up, tablet) { height: 100%; align-items: center; }
+    @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 - 12rem');
+        align-items: stretch;
+        overflow: scroll;
+        width: 100%;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        flex-direction: column;
+        width: 100%;
+      }
+    }
+
+    &_item:not(:first-child) {
+
+      @include mixins.responsive(down, tablet) {
+        margin-top: .25rem;
+        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: -(variables.$nav-item*.5);
+          width: 10rem;
+          padding: variables.$nav-item*.5;
+          border-radius: variables.$border-radius-md;
+          border: variables.$border;
+          z-index: 1;
+          background-color: variables.$background-paper;
+        }
+      }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// align
+// —————————————————————————————————————————————————————————————————
+
+.navbar-right {
+
+  .section_container {
+
+    @include mixins.responsive(up, tablet) {
+      flex-direction: row-reverse;    
+    }
+  }
+
+  .navbar_main {
+    flex-direction: row-reverse;    
+  }
+}

package/styles/components/_page.scss

@@ -0,0 +1,33 @@
+// —————————————————————————————————————————————————————————————————
+// 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/styles/components/_section.scss

@@ -0,0 +1,203 @@
+@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;
+    margin-bottom: .5rem;
+  }
+
+  &_title {
+    @extend %h3;
+    color: variables.$primary;
+    max-width: variables.$desktop*0.75;
+  }
+  
+  &_subtitle {
+    @extend %subtitle;
+    max-width: variables.$max-width-subtitle;
+    margin-top: 1rem;
+    word-wrap: normal;
+  }
+
+  &_actions {
+    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 section-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 section-color(variables.$background-default); }
+  &-paper { @include section-color(variables.$background-paper); }
+  &-primary { @include section-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 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
+  );}
+}
+
+// —————————————————————————————————————————————————————————————————
+// 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);
+    }
+
+    &_label {
+      margin-bottom: 1rem;
+
+      @include mixins.responsive(down, tablet) {
+        margin-bottom: 0.75rem;
+      }
+    }
+
+    &_title {
+      @extend %h1;
+      max-width: variables.$desktop*0.5;
+    }
+
+    &_subtitle {
+      @extend %h5;
+      margin-top: 2rem;
+      
+      @include mixins.responsive(down, tablet) {
+        margin-top: 1.5rem;
+      }
+    }
+
+    &_actions {
+      margin-top: 4rem;
+
+      @include mixins.responsive(down, tablet) {
+        margin-top: 3rem;
+      }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// header (page title)
+// —————————————————————————————————————————————————————————————————
+
+.section-header {
+
+  .section {
+
+    &_label { margin-bottom: .75rem; }
+    &_title { @extend %h2; }
+    &_subtitle { margin-top: 1.5rem; }
+    &_actions { margin-top: 2.5rem; }
+  }
+}

package/styles/components/_sidebar.scss

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

package/styles/components/_snippet.scss

@@ -0,0 +1,85 @@
+@use '../common/variables';
+@use '../utilities/text';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// default
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.snippet {
+  @extend %caption;
+  font-family: "Roboto Mono", Courier, monospace;
+  word-wrap: break-word;
+  width: 100%;
+  position: relative;
+  border-radius: variables.$border-radius-sm;
+  margin: 0;
+  padding: .5rem .75rem;
+  background-color: variables.$hover;
+  border: variables.$border;
+  
+  & + & {
+    margin-top: .5rem;
+  }
+
+  p > & {
+    margin-right: .25rem;
+    margin-left: .25rem;
+  }
+
+  .tag {
+    font-family: variables.$font, variables.$font-fallback;
+    float: right;
+    margin-top: 1px;
+    margin-right: -.25rem;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// default
+// —————————————————————————————————————————————————————————————————
+
+.snippet-default {
+
+  &:after {
+    @extend %overline;
+    content: "Default";
+    font-family: variables.$font, variables.$font-fallback;
+    float: right;
+    margin-top: 1px;
+    margin-right: -.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: variables.$font-bold;
+    border-radius: variables.$border-radius-sm;
+    white-space: nowrap; // prevent text to go on multiple lines
+    position: absolute;
+    top: .5rem;
+    right: .75rem;
+    height: 1rem;
+    padding-right: .25rem;
+    padding-left: .25rem;
+    padding-bottom: 0.1em;
+    background-color: variables.$text-disabled;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.snippet-dense {
+  @extend %overline;
+  padding: .25rem .5rem !important;
+
+  &.snippet-default:after {
+    top: .25rem;
+    right: .5rem;
+  }
+}

package/styles/components/_status.scss

@@ -0,0 +1,60 @@
+@use '../common/variables';
+@use '../utilities/text';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// color
+// dense
+// —————————————————————————————————————————————————————————————————
+
+$spacing-status: .5rem;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.status {
+
+  &:before {
+    content: "";
+    display: inline-block;
+    height: $spacing-status;
+    width: $spacing-status;
+    background-color: variables.$text-alt;
+    border-radius: 50%;
+    margin-right: 0.35em;
+    transform: translateY(-0.05em);
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin status-color($color) {
+
+  &:before {
+    background-color: $color;
+  }
+}
+
+.status {
+
+  &-success { @include status-color(variables.$success); }
+  &-info { @include status-color(variables.$info); }
+  &-warning { @include status-color(variables.$warning); }
+  &-error { @include status-color(variables.$error); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.status-dense {
+  @extend %caption;
+
+  &:before {
+    height: $spacing-status*0.75;
+    width: $spacing-status*0.75;
+  }
+}