pallote-css 0.3.11 → 0.3.12

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;
+  }
+}

package/dist/styles/components/_tabs.scss

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

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

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

@@ -0,0 +1,119 @@
+@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
+);

package/dist/styles/utilities/_global.scss

@@ -0,0 +1,211 @@
+@use "../common/mixins";
+@use "../common/variables";
+
+// —————————————————————————————————————————————————————————————————
+// responsive
+// spacing and size
+// position
+// display
+// border
+// border-radius
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// responsive
+// —————————————————————————————————————————————————————————————————
+
+.hide {
+	
+	&-desktop { @include mixins.responsive(down, desktop) { display: none !important; } }
+	&-laptop { @include mixins.responsive(down, laptop) { display: none !important; } }
+	&-tablet { @include mixins.responsive(down, tablet) { display: none !important; } }
+	&-mobile { @include mixins.responsive(down, mobile) { display: none !important; } }
+	&-mobileSm { @include mixins.responsive(down, mobile-sm) { display: none !important; } }
+	&-touch { @include mixins.responsive-touch { display: none !important; } }
+}
+
+.show {
+
+  &-desktop { @include mixins.responsive(up, desktop) { display: none !important; } }
+	&-laptop { @include mixins.responsive(up, laptop) { display: none !important; } }
+	&-tablet { @include mixins.responsive(up, tablet) { display: none !important; } }
+	&-mobile { @include mixins.responsive(up, mobile) { display: none !important; } }
+	&-mobileSm { @include mixins.responsive(up, mobile-sm) { display: none !important; } }
+  &-touch { @include mixins.responsive-click { display: none !important; } }
+}
+
+// —————————————————————————————————————————————————————————————————
+// spacing and size
+// —————————————————————————————————————————————————————————————————
+
+.w-full { width: 100% !important; }
+.w-fit { width: fit-content !important; }
+
+.h-full { height: 100% !important; }
+.h-fit { height: fit-content !important; }
+
+.m-auto { margin: auto !important; }
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }
+.mv-auto { margin-top: auto !important; margin-bottom: auto !important; }
+.mh-auto { margin-right: auto !important; margin-left: auto !important; }
+
+// from .25rem to 5rem, every quarter
+
+$fractions: ( "¼": 0.25, "½": 0.5, "¾": 0.75 );
+
+@for $i from 0 through 5 {
+  .w-#{$i} { width: #{$i}rem !important; }
+  .h-#{$i} { height: #{$i}rem !important; }
+
+  .m-#{$i} { margin: #{$i}rem !important; }
+  .mt-#{$i} { margin-top: #{$i}rem !important; }
+  .mr-#{$i} { margin-right: #{$i}rem !important; }
+  .mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  .ml-#{$i} { margin-left: #{$i}rem !important; }
+  .mv-#{$i} { margin-top: #{$i}rem !important; margin-bottom: #{$i}rem !important; }
+  .mh-#{$i} { margin-right: #{$i}rem !important; margin-left: #{$i}rem !important; }
+
+  .p-#{$i} { padding: #{$i}rem !important; }
+  .pt-#{$i} { padding-top: #{$i}rem !important; }
+  .pr-#{$i} { padding-right: #{$i}rem !important; }
+  .pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  .pl-#{$i} { padding-left: #{$i}rem !important; }
+  .pv-#{$i} { padding-top: #{$i}rem !important; padding-bottom: #{$i}rem !important; }
+  .ph-#{$i} { padding-right: #{$i}rem !important; padding-left: #{$i}rem !important; }
+
+  @each $symbol, $value in $fractions {
+
+    @if $i == 0 {
+      .w-#{$symbol} { width: #{$i + $value}rem !important; }
+      .h-#{$symbol} { height: #{$i + $value}rem !important; }
+      
+      .m-#{$symbol} { margin: #{$i + $value}rem !important; }
+      .mt-#{$symbol} { margin-top: #{$i + $value}rem !important; }
+      .mr-#{$symbol} { margin-right: #{$i + $value}rem !important; }
+      .mb-#{$symbol} { margin-bottom: #{$i + $value}rem !important; }
+      .ml-#{$symbol} { margin-left: #{$i + $value}rem !important; }
+      .mv-#{$symbol} { margin-top: #{$i + $value}rem !important; margin-bottom: #{$i + $value}rem !important; }
+      .mh-#{$symbol} { margin-right: #{$i + $value}rem !important; margin-left: #{$i + $value}rem !important; }
+    
+      .p-#{$symbol} { padding: #{$i + $value}rem !important; }
+      .pt-#{$symbol} { padding-top: #{$i + $value}rem !important; }
+      .pr-#{$symbol} { padding-right: #{$i + $value}rem !important; }
+      .pb-#{$symbol} { padding-bottom: #{$i + $value}rem !important; }
+      .pl-#{$symbol} { padding-left: #{$i + $value}rem !important; }
+      .pv-#{$symbol} { padding-top: #{$i + $value}rem !important; padding-bottom: #{$i + $value}rem !important; }
+      .ph-#{$symbol} { padding-right: #{$i + $value}rem !important; padding-left: #{$i + $value}rem !important; }  
+
+    } @else {
+      .w-#{$i}#{$symbol} { width: #{$i + $value}rem !important; }
+      .h-#{$i}#{$symbol} { height: #{$i + $value}rem !important; }
+    
+      .m-#{$i}#{$symbol} { margin: #{$i + $value}rem !important; }
+      .mt-#{$i}#{$symbol} { margin-top: #{$i + $value}rem !important; }
+      .mr-#{$i}#{$symbol} { margin-right: #{$i + $value}rem !important; }
+      .mb-#{$i}#{$symbol} { margin-bottom: #{$i + $value}rem !important; }
+      .ml-#{$i}#{$symbol} { margin-left: #{$i + $value}rem !important; }
+      .mv-#{$i}#{$symbol} { margin-top: #{$i + $value}rem !important; margin-bottom: #{$i + $value}rem !important; }
+      .mh-#{$i}#{$symbol} { margin-right: #{$i + $value}rem !important; margin-left: #{$i + $value}rem !important; }
+    
+      .p-#{$i}#{$symbol} { padding: #{$i + $value}rem !important; }
+      .pt-#{$i}#{$symbol} { padding-top: #{$i + $value}rem !important; }
+      .pr-#{$i}#{$symbol} { padding-right: #{$i + $value}rem !important; }
+      .pb-#{$i}#{$symbol} { padding-bottom: #{$i + $value}rem !important; }
+      .pl-#{$i}#{$symbol} { padding-left: #{$i + $value}rem !important; }
+      .pv-#{$i}#{$symbol} { padding-top: #{$i + $value}rem !important; padding-bottom: #{$i + $value}rem !important; }
+      .ph-#{$i}#{$symbol} { padding-right: #{$i + $value}rem !important; padding-left: #{$i + $value}rem !important; }  
+    }
+  }
+}
+
+// from 6 to 20 rem, only integer
+
+@for $i from 6 through 20 {
+  .w-#{$i} { width: #{$i}rem !important; }
+  .h-#{$i} { height: #{$i}rem !important; }
+
+  .m-#{$i} { margin: #{$i}rem !important; }
+  .mt-#{$i} { margin-top: #{$i}rem !important; }
+  .mr-#{$i} { margin-right: #{$i}rem !important; }
+  .mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  .ml-#{$i} { margin-left: #{$i}rem !important; }
+  .mv-#{$i} { margin-top: #{$i}rem !important; margin-bottom: #{$i}rem !important; }
+  .mh-#{$i} { margin-right: #{$i}rem !important; margin-left: #{$i}rem !important; }
+
+  .p-#{$i} { padding: #{$i}rem !important; }
+  .pt-#{$i} { padding-top: #{$i}rem !important; }
+  .pr-#{$i} { padding-right: #{$i}rem !important; }
+  .pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  .pl-#{$i} { padding-left: #{$i}rem !important; }
+  .pv-#{$i} { padding-top: #{$i}rem !important; padding-bottom: #{$i}rem !important; }
+  .ph-#{$i} { padding-right: #{$i}rem !important; padding-left: #{$i}rem !important; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// position
+// —————————————————————————————————————————————————————————————————
+
+.pos {
+
+  &-absolute { position: absolute !important; }
+  &-relative { position: relative !important; }
+  &-fixed { position: relative !important; }
+  &-sticky { position: relative !important; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// display
+// —————————————————————————————————————————————————————————————————
+
+// general display
+
+.dis-flex { display: flex !important; }
+.dis-inlineFlex { display: inline-flex !important; }
+.dis-block { display: block !important; }
+.dis-inlineBlock { display: inline-block !important; }
+
+// flexbasis
+
+.fb {
+
+  &-content { flex-basis: content !important; }
+  &-0 { flex-basis: 0 !important; }
+  &-1 { flex-basis: 1 !important; }
+}
+
+// flex-grow
+
+.fg {
+
+  &-0 { flex-grow: 0 !important; }
+  &-1 { flex-grow: 1 !important; }
+}
+
+// flex-shrink
+
+.fs {
+
+  &-0 { flex-shrink: 0 !important; }
+  &-1 { flex-shrink: 1 !important; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// border
+// —————————————————————————————————————————————————————————————————
+
+.b-1 { border: variables.$border; }
+.bt-1 { border-top: variables.$border; }
+.br-1 { border-right: variables.$border; }
+.bb-1 { border-bottom: variables.$border; }
+.bl-1 { border-left: variables.$border; }
+
+// —————————————————————————————————————————————————————————————————
+// border-radius
+// —————————————————————————————————————————————————————————————————
+
+.br-sm { border-radius: variables.$border-radius-sm; }
+.br-md { border-radius: variables.$border-radius-md; }
+.br-lg { border-radius: variables.$border-radius-lg; }