pallote-css 0.3.9 → 0.3.11

package/dist/styles/components/_navbar.scss

@@ -1,189 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// align
-// —————————————————————————————————————————————————————————————————
-
-// 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;
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// align
-// —————————————————————————————————————————————————————————————————
-
-.navbar--right {
-
-  .section_container {
-
-    @include 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,189 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// align
-// color
-// landing (website title on homepage)
-// header (page title)
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.section {
-  @include clamp(padding-right, 1rem, 4vw, 4rem);
-  @include 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 clamp(padding-top, 2rem, 8vw, 4rem);
-    @include clamp(padding-bottom, 2rem, 8vw, 4rem);
-    width: 100%;
-    max-width: $desktop;
-    position: relative; // needed to have the content over section-landing:before
-  }
-
-  &_header {
-    display: flex;
-    flex-direction: column;
-
-    & + .section_content { @include clamp(padding-top, 2rem, 8vw, 4rem); }
-    &-dense + .section_content { padding-top: 2rem; }
-  }
-
-  &_content {
-    width: 100%;
-
-    & + & {
-      @include clamp(padding-top, 2rem, 8vw, 4rem);
-    }
-  }
-
-  &_label {
-    color: $text-alt;
-    font-weight: $font-bold;
-  }
-  
-  &_title {
-    @extend %h3;
-    color: $primary;
-    max-width: $desktop*0.75;
-    
-    .section_label + & {
-      margin-top: .5rem;
-    }
-  }
-  
-  &_subtitle {
-    @extend %subtitle;
-    max-width: $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: $primary,
-  $color: $text,
-  $paper-color: $background-paper,
-  $border-color: $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($background-default); }
-  &-paper { @include color($background-paper); }
-  &-primary { @include color(
-    $primary, // background-color
-    $primary-contrast, // title-color
-    $primary-contrast, // color
-    $hover-contrast, // paper-color
-    $border-color-contrast // border-color
-  );}
-  &-primaryLight { @include color(
-    $primary-light, // background-color
-    $text, // title-color
-    $text, // color
-    $hover-contrast, // paper-color
-    $border-color-contrast // border-color
-  );}
-}
-
-// —————————————————————————————————————————————————————————————————
-// landing (website title on homepage)
-// —————————————————————————————————————————————————————————————————
-
-.section-landing {
-
-  .section {
-
-    &_container {
-      @include clamp(padding-top, 2rem, 10vw, 7rem);
-      @include clamp(padding-bottom, 2rem, 10vw, 7rem);
-    }
-
-    &_title { @extend %h1; max-width: $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; }
-  }
-}

package/dist/styles/components/_sidebar.scss

@@ -1,57 +0,0 @@
-$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-default;
-  
-  &.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;
-  }
-}

package/dist/styles/components/_snippet.scss

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

package/dist/styles/components/_status.scss

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

package/dist/styles/components/_switch.scss

@@ -1,81 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// 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 $primary;
-    }
-
-    &:checked + .switch_switch {
-      background-color: $primary-light;
-      
-      .switch_toggle {
-        @include calc(left, '100% -'($spacing-switch));
-        background-color: $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: $input-background;
-    border: $border;
-    border-radius: $spacing-switch;
-    position: relative;
-
-    &:nth-child(2) { margin-left: .25rem; }
-  }
-
-  &_toggle {
-    position: absolute;
-    left: -$spacing-xs;
-    width: $spacing-switch*1.25;
-    height: $spacing-switch*1.25;
-    border-radius: $spacing-switch*1.25;
-    background: $grey-50;
-  }
-}
-  
-// —————————————————————————————————————————————————————————————————
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-.switch-disabled {
-  opacity: 0.4;
-
-  * { 
-    cursor: not-allowed;
-  }
-
-  .switch_switch {
-    outline: none !important;
-  }
-}