pallote-css 0.3.11 → 0.4.0

package/dist/styles/components/_navbar.scss

@@ -0,0 +1,192 @@
+@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

@@ -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/dist/styles/components/_section.scss

@@ -0,0 +1,177 @@
+@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;
+  }
+
+  &_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; }
+    &_title { @extend %h1; max-width: variables.$desktop*0.5; }
+    &_subtitle { @extend %h5; margin-top: 2rem; }
+    &_actions { margin-top: 4rem; }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// header (page title)
+// —————————————————————————————————————————————————————————————————
+
+.section-header {
+
+  .section {
+
+    &_label { margin-bottom: .75rem; }
+    &_title { @extend %h2; }
+    &_subtitle { margin-top: 1.5rem; }
+    &_actions { margin-top: 2.5rem; }
+  }
+}

package/dist/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: variables.$spacing-md;
+  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: variables.$spacing-md;
+    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: variables.$spacing-xs;
+    margin-left: 0;
+  }
+}

package/dist/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: variables.$spacing-sm variables.$spacing-sm*1.5;
+  background-color: variables.$hover;
+  border: variables.$border;
+  
+  & + & {
+    margin-top: variables.$spacing-sm;
+  }
+
+  p > & {
+    margin-right: variables.$spacing-xs;
+    margin-left: variables.$spacing-xs;
+  }
+
+  .tag {
+    font-family: variables.$font, variables.$font-fallback;
+    float: right;
+    margin-top: 1px;
+    margin-right: -(variables.$spacing-xs);
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// default
+// —————————————————————————————————————————————————————————————————
+
+.snippet--default {
+
+  &:after {
+    @extend %overline;
+    content: "Default";
+    font-family: variables.$font, variables.$font-fallback;
+    float: right;
+    margin-top: 1px;
+    margin-right: -(variables.$spacing-xs);
+    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: variables.$spacing-sm;
+    right: variables.$spacing-md*0.75;
+    height: variables.$spacing-md;
+    padding-right: variables.$spacing-xs;
+    padding-left: variables.$spacing-xs;
+    padding-bottom: 0.1em;
+    background-color: variables.$text-disabled;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.snippet--dense {
+  @extend %overline;
+  padding: variables.$spacing-xs variables.$spacing-sm !important;
+
+  &.snippet--default:after {
+    top: variables.$spacing-xs;
+    right: variables.$spacing-sm;
+  }
+}

package/dist/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;
+  }
+}

package/dist/styles/components/_switch.scss

@@ -0,0 +1,84 @@
+@use '../common/mixins';
+@use '../common/variables';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+$spacing-switch: 1rem;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.switch {
+  display: flex;
+  align-items: center;
+  
+  &_input {
+    position: absolute;
+    height: 0;
+    width: 0;
+    opacity: 0;
+
+    &:focus + .switch_switch {
+      outline: 2px solid variables.$primary;
+    }
+
+    &:checked + .switch_switch {
+      background-color: variables.$primary-light;
+      
+      .switch_toggle {
+        @include mixins.calc(left, '100% -'($spacing-switch));
+        background-color: variables.$primary;
+      }
+    }
+  }
+
+  &_label {
+    
+    &:first-child { margin-right: .75em; }
+    &:last-child { margin-left: .75em; }
+  }
+
+  &_switch {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    width: $spacing-switch*2;
+    height: $spacing-switch;
+    background: variables.$input-background;
+    border: variables.$border;
+    border-radius: $spacing-switch;
+    position: relative;
+
+    &:nth-child(2) { margin-left: .25rem; }
+  }
+
+  &_toggle {
+    position: absolute;
+    left: -(variables.$spacing-xs);
+    width: $spacing-switch*1.25;
+    height: $spacing-switch*1.25;
+    border-radius: $spacing-switch*1.25;
+    background: variables.$grey-50;
+  }
+}
+  
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.switch-disabled {
+  opacity: 0.4;
+
+  * { 
+    cursor: not-allowed;
+  }
+
+  .switch_switch {
+    outline: none !important;
+  }
+}