pallote-css 0.3.9 → 0.3.11

package/dist/styles/components/_tabs.scss

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

package/dist/styles/components/_tag.scss

@@ -1,75 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// 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: $font-bold;
-  border-radius: $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}#{nth($i, 1)} {
-      background-color: nth($i, 2);
-      color: nth($i, 3);
-    }
-  }
-}
-
-@include color('tag',
-  '' $primary $primary-contrast,
-  '-secondary' $secondary $secondary-contrast,
-  '-grey' $text-disabled $text,
-  '-success' $success $success-contrast,
-  '-info' $info $info-contrast,
-  '-warning' $warning $warning-contrast,
-  '-error' $error $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,116 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// fill
-// stroke
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// fill
-// —————————————————————————————————————————————————————————————————
-
-@mixin fill($colors...) {
-
-  @each $i in $colors {
-    .fill-#{nth($i, 1)} {
-      color: nth($i, 3) !important;
-      background-color: nth($i, 2) !important;
-
-      .card_title {
-        color: nth($i, 3) !important;
-      }
-    }
-  }
-}
-
-@include fill (
-  "main" $main $text,
-  "contrast" $contrast $text-contrast,
-
-  "grey90" $grey-90 $text-contrast,
-  "grey80" $grey-80 $text-contrast,
-  "grey70" $grey-70 $text-contrast,
-  "grey60" $grey-60 $text-contrast,
-  "grey50" $grey-50 $text-contrast,
-  "grey40" $grey-40 $text,
-  "grey30" $grey-30 $text,
-  "grey20" $grey-20 $text,
-  "grey10" $grey-10 $text,
-  "grey5" $grey-5 $text,
-
-  "default" $background-default $text,
-  "paper" $background-paper $text,
-
-  "primaryLight" $primary-light $text,
-  "primary" $primary $text-contrast,
-  "primaryDark" $primary-dark $text-contrast,
-  "secondaryLight" $secondary-light $text,
-  "secondary" $secondary $text-contrast,
-  "secondaryDark" $secondary-dark $text-contrast,
-
-  "successLight" $success-light $text,
-  "success" $success $text-contrast,
-  "successDark" $success-dark $text-contrast,
-  "infoLight" $info-light $text,
-  "info" $info $text-contrast,
-  "infoDark" $info-dark $text-contrast,
-  "warningLight" $warning-light $text,
-  "warning" $warning $text,
-  "warningDark" $warning-dark $text-contrast,
-  "errorLight" $error-light $text,
-  "error" $error $text-contrast,
-  "errorDark" $error-dark $text-contrast,
-
-  "border" $border-color $text
-);
-
-// —————————————————————————————————————————————————————————————————
-// stroke
-// —————————————————————————————————————————————————————————————————
-
-@mixin stroke($colors...) {
-  @each $i in $colors {
-    .stroke-#{nth($i, 1)} {
-      border: 1px solid nth($i, 2) !important;
-    }
-  }
-}
-
-@include stroke (
-  "main" $main,
-  "contrast" $contrast,
-
-  "grey90" $grey-90,
-  "grey80" $grey-80,
-  "grey70" $grey-70,
-  "grey60" $grey-60,
-  "grey50" $grey-50,
-  "grey40" $grey-40,
-  "grey30" $grey-30,
-  "grey20" $grey-20,
-  "grey10" $grey-10,
-  "grey5" $grey-5 ,
-
-  "default" $background-default,
-  "paper" $background-paper,
-
-  "primaryLight" $primary-light,
-  "primary" $primary,
-  "primaryDark" $primary-dark,
-  "secondaryLight" $secondary-light,
-  "secondary" $secondary,
-  "secondaryDark" $secondary-dark,
-
-  "successLight" $success-light,
-  "success" $success,
-  "successDark" $success-dark,
-  "infoLight" $info-light,
-  "info" $info,
-  "infoDark" $info-dark,
-  "warningLight" $warning-light,
-  "warning" $warning,
-  "warningDark" $warning-dark,
-  "errorLight" $error-light,
-  "error" $error,
-  "errorDark" $error-dark,
-  
-  "border" $border-color
-);

package/dist/styles/utilities/_global.scss

@@ -1,208 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// responsive
-// spacing and size
-// position
-// display
-// border
-// border-radius
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// responsive
-// —————————————————————————————————————————————————————————————————
-
-.hide {
-	
-	&-desktop { @include responsive(down, desktop) { display: none !important; } }
-	&-laptop { @include responsive(down, laptop) { display: none !important; } }
-	&-tablet { @include responsive(down, tablet) { display: none !important; } }
-	&-mobile { @include responsive(down, mobile) { display: none !important; } }
-	&-mobileSm { @include responsive(down, mobile-sm) { display: none !important; } }
-	&-touch { @include responsive-touch { display: none !important; } }
-}
-
-.show {
-
-  &-desktop { @include responsive(up, desktop) { display: none !important; } }
-	&-laptop { @include responsive(up, laptop) { display: none !important; } }
-	&-tablet { @include responsive(up, tablet) { display: none !important; } }
-	&-mobile { @include responsive(up, mobile) { display: none !important; } }
-	&-mobileSm { @include responsive(up, mobile-sm) { display: none !important; } }
-  &-touch { @include 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: $border; }
-.bt-1 { border-top: $border; }
-.br-1 { border-right: $border; }
-.bb-1 { border-bottom: $border; }
-.bl-1 { border-left: $border; }
-
-// —————————————————————————————————————————————————————————————————
-// border-radius
-// —————————————————————————————————————————————————————————————————
-
-.br-sm { border-radius: $border-radius-sm; }
-.br-md { border-radius: $border-radius-md; }
-.br-lg { border-radius: $border-radius-lg; }