pallote-css 0.3.12 → 0.6.0

package/dist/styles/components/_sidebar.scss

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

@@ -1,85 +0,0 @@
-@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-fallback;
-    float: right;
-    margin-top: 1px;
-    margin-right: -(variables.$spacing-xs);
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// default
-// —————————————————————————————————————————————————————————————————
-
-.snippet--default {
-
-  &:after {
-    @extend %overline;
-    content: "Default";
-    font-family: 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

@@ -1,60 +0,0 @@
-@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 color($color) {
-
-  &:before {
-    background-color: $color;
-  }
-}
-
-.status {
-
-  &-success { @include color(variables.$success); }
-  &-info { @include color(variables.$info); }
-  &-warning { @include color(variables.$warning); }
-  &-error { @include 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

@@ -1,84 +0,0 @@
-@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;
-  }
-}

package/dist/styles/components/_tabs.scss

@@ -1,118 +0,0 @@
-@use "../common/variables";
-@use "../utilities/text";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// active
-// direction
-// dense
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.tabs {
-  width: 100%;
-
-  &__controls {
-    display: flex;
-    width: 100%;
-    border-bottom: variables.$border;
-  }
-  
-  &__item {
-    position: relative;
-    cursor: pointer;
-    padding: variables.$spacing-sm variables.$spacing-md;
-    border-top-left-radius: variables.$border-radius-sm;
-    border-top-right-radius: variables.$border-radius-sm;
-    
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: -1px;
-      left: 0;
-      height: 1px;
-      width: 100%;
-    }
-  }
-
-  &__panel {
-    padding: variables.$spacing-md;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// active
-// —————————————————————————————————————————————————————————————————
-
-.tabs__item:hover,
-.tabs__item--active {
-  background-color: variables.$hover;
-}
-
-.tabs__item--active {
-  color: variables.$primary;
-
-  &:after {
-    background-color: variables.$primary;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.tabs--portrait {
-  display: flex;
-
-  .tabs {
-
-    &__controls {
-      flex-direction: column;
-      width: 160px;
-      border-bottom: 0;
-      border-right: variables.$border;
-    }
-    
-    &__item {
-      text-align: left;
-      border-top-left-radius: variables.$border-radius-sm;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: variables.$border-radius-sm;
-        
-      &:after {
-        top: 0;
-        right: -1px;
-        left: auto;
-        height: 100%;
-        width: 1px;
-      }
-    }
-
-    &__panel {
-      padding-top: variables.$spacing-sm;
-      padding-bottom: variables.$spacing-sm;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.tabs--dense {
-
-  .tabs {
-
-    &__item {
-      @extend %caption;
-      padding: variables.$spacing-xs variables.$spacing-sm;
-    }
-
-    &__panel {
-      padding: variables.$spacing-sm;
-    }  
-  }
-}

package/dist/styles/components/_tag.scss

@@ -1,79 +0,0 @@
-@use "sass:list";
-@use "../common/variables";
-@use "../utilities/text";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// dense
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.tags {
-  display: flex;
-  
-  .tag:not(:last-child) {
-    margin-right: .25rem;
-  }
-
-  &-portrait {
-    flex-direction: column;
-    align-items: flex-start;
-  
-    .tag:not(:last-child) {
-      margin-bottom: .25rem;
-      margin-right: 0;
-    }
-  }
-}
-
-.tag {
-  @extend %caption;
-  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
-  height: 1.5rem;
-  width: fit-content;
-  min-width: fit-content;
-  padding-right: 0.4em;
-  padding-left: 0.4em;
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin color($prefix, $colors...) {
-
-  @each $i in $colors {
-    .#{$prefix}#{list.nth($i, 1)} {
-      background-color: list.nth($i, 2);
-      color: list.nth($i, 3);
-    }
-  }
-}
-
-@include color('tag',
-  '' variables.$primary variables.$primary-contrast,
-  '-secondary' variables.$secondary variables.$secondary-contrast,
-  '-grey' variables.$text-disabled variables.$text,
-  '-success' variables.$success variables.$success-contrast,
-  '-info' variables.$info variables.$info-contrast,
-  '-warning' variables.$warning variables.$warning-contrast,
-  '-error' variables.$error variables.$error-contrast
-);
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.tag-dense {
-  @extend %overline;
-  height: 1rem;
-}

package/dist/styles/modules/_cookie.scss

@@ -1,38 +0,0 @@
-.cookie {
-  z-index: 10;
-
-  &.section {
-    @include transition($transition-md, transform);
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: none;
-    background-color: $background-default;
-    text-align: left;
-    
-    .section_container {
-      padding-top: 10px;
-      padding-bottom: 9px;
-      display: flex;
-      flex-direction: row;
-      align-items: baseline;
-      justify-content: flex-start;
-    }
-  }
-
-  &.js-cookie-accepted {
-    @include transition($transition-md, transform);
-    transform: translateY(100%);
-  }
-
-  &__text {
-    width: 100%;
-    display: inline;
-    margin-right: $spacing-xs;
-  }
-
-  .link {
-    flex-basis: 0;
-  }
-}

package/dist/styles/utilities/_color.scss

@@ -1,119 +0,0 @@
-@use "sass:list";
-@use "../common/variables";
-
-// —————————————————————————————————————————————————————————————————
-// fill
-// stroke
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// fill
-// —————————————————————————————————————————————————————————————————
-
-@mixin fill($colors...) {
-
-  @each $i in $colors {
-    .fill-#{list.nth($i, 1)} {
-      color: list.nth($i, 3) !important;
-      background-color: list.nth($i, 2) !important;
-
-      .card_title {
-        color: list.nth($i, 3) !important;
-      }
-    }
-  }
-}
-
-@include fill (
-  "main" variables.$main variables.$text,
-  "contrast" variables.$contrast variables.$text-contrast,
-
-  "grey90" variables.$grey-90 variables.$text-contrast,
-  "grey80" variables.$grey-80 variables.$text-contrast,
-  "grey70" variables.$grey-70 variables.$text-contrast,
-  "grey60" variables.$grey-60 variables.$text-contrast,
-  "grey50" variables.$grey-50 variables.$text-contrast,
-  "grey40" variables.$grey-40 variables.$text,
-  "grey30" variables.$grey-30 variables.$text,
-  "grey20" variables.$grey-20 variables.$text,
-  "grey10" variables.$grey-10 variables.$text,
-  "grey5" variables.$grey-5 variables.$text,
-
-  "default" variables.$background-default variables.$text,
-  "paper" variables.$background-paper variables.$text,
-
-  "primaryLight" variables.$primary-light variables.$text,
-  "primary" variables.$primary variables.$text-contrast,
-  "primaryDark" variables.$primary-dark variables.$text-contrast,
-  "secondaryLight" variables.$secondary-light variables.$text,
-  "secondary" variables.$secondary variables.$text-contrast,
-  "secondaryDark" variables.$secondary-dark variables.$text-contrast,
-
-  "successLight" variables.$success-light variables.$text,
-  "success" variables.$success variables.$text-contrast,
-  "successDark" variables.$success-dark variables.$text-contrast,
-  "infoLight" variables.$info-light variables.$text,
-  "info" variables.$info variables.$text-contrast,
-  "infoDark" variables.$info-dark variables.$text-contrast,
-  "warningLight" variables.$warning-light variables.$text,
-  "warning" variables.$warning variables.$text,
-  "warningDark" variables.$warning-dark variables.$text-contrast,
-  "errorLight" variables.$error-light variables.$text,
-  "error" variables.$error variables.$text-contrast,
-  "errorDark" variables.$error-dark variables.$text-contrast,
-
-  "border" variables.$border-color variables.$text
-);
-
-// —————————————————————————————————————————————————————————————————
-// stroke
-// —————————————————————————————————————————————————————————————————
-
-@mixin stroke($colors...) {
-  @each $i in $colors {
-    .stroke-#{list.nth($i, 1)} {
-      border: 1px solid list.nth($i, 2) !important;
-    }
-  }
-}
-
-@include stroke (
-  "main" variables.$main,
-  "contrast" variables.$contrast,
-
-  "grey90" variables.$grey-90,
-  "grey80" variables.$grey-80,
-  "grey70" variables.$grey-70,
-  "grey60" variables.$grey-60,
-  "grey50" variables.$grey-50,
-  "grey40" variables.$grey-40,
-  "grey30" variables.$grey-30,
-  "grey20" variables.$grey-20,
-  "grey10" variables.$grey-10,
-  "grey5" variables.$grey-5 ,
-
-  "default" variables.$background-default,
-  "paper" variables.$background-paper,
-
-  "primaryLight" variables.$primary-light,
-  "primary" variables.$primary,
-  "primaryDark" variables.$primary-dark,
-  "secondaryLight" variables.$secondary-light,
-  "secondary" variables.$secondary,
-  "secondaryDark" variables.$secondary-dark,
-
-  "successLight" variables.$success-light,
-  "success" variables.$success,
-  "successDark" variables.$success-dark,
-  "infoLight" variables.$info-light,
-  "info" variables.$info,
-  "infoDark" variables.$info-dark,
-  "warningLight" variables.$warning-light,
-  "warning" variables.$warning,
-  "warningDark" variables.$warning-dark,
-  "errorLight" variables.$error-light,
-  "error" variables.$error,
-  "errorDark" variables.$error-dark,
-  
-  "border" variables.$border-color
-);