pallote-css 0.3.12 → 0.6.0

package/dist/styles/common/_variables.scss

@@ -1,252 +0,0 @@
-@use "sass:color";
-@use "sass:string";
-
-// —————————————————————————————————————————————————————————————————
-// dependencies
-// color palette
-// spacing
-// typography
-// breakpoints
-// misc
-// components
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// dependencies
-// —————————————————————————————————————————————————————————————————
-
-$fonts-path: './assets/fonts/' !default;
-$icons-path: './assets/icons/' !default;
-
-// —————————————————————————————————————————————————————————————————
-// color palette
-// —————————————————————————————————————————————————————————————————
-
-// main
-
-$main: #FFFFFF !default;
-$contrast: #000A1E !default;
-
-// grey
-
-$grey-90: color.mix($contrast, $main, 90%) !default;
-$grey-80: color.mix($contrast, $main, 80%) !default;
-$grey-70: color.mix($contrast, $main, 70%) !default;
-$grey-60: color.mix($contrast, $main, 60%) !default;
-$grey-50: color.mix($contrast, $main, 50%) !default;
-$grey-40: color.mix($contrast, $main, 40%) !default;
-$grey-30: color.mix($contrast, $main, 30%) !default;
-$grey-20: color.mix($contrast, $main, 20%) !default;
-$grey-10: color.mix($contrast, $main, 10%) !default;
-$grey-5: color.mix($contrast, $main, 5%) !default;
-
-// background
-
-$background-default: $grey-5 !default;
-$background-paper: $main !default;
-
-// text
-
-$text: $contrast !default;
-$text-alt: rgba($text, 0.5) !default;
-$text-disabled: rgba($text, 0.25) !default;
-
-$text-contrast: $main !default;
-$text-contrast-alt: rgba($text-contrast, 0.6) !default;
-$text-contrast-disabled: rgba($text-contrast, 0.3) !default;
-
-// brand
-
-$primary: #0076AC !default;
-$primary-light: color.mix($main, $primary, 70%) !default;
-$primary-dark: color.mix($contrast, $primary, 50%) !default;
-$primary-contrast: $text-contrast !default;
-
-$secondary: #C24889 !default;
-$secondary-light: color.mix($main, $secondary, 70%) !default;
-$secondary-dark: color.mix($contrast, $secondary, 50%) !default;
-$secondary-contrast: $text-contrast !default;
-
-// feedback
-
-$success: #27AE60 !default;
-$success-light: color.mix($main, $success, 70%) !default;
-$success-dark: color.mix($contrast, $success, 50%) !default;
-$success-contrast: $text-contrast !default;
-
-$info: #17A0CC !default;
-$info-light: color.mix($main, $info, 70%) !default;
-$info-dark: color.mix($contrast, $info, 50%) !default;
-$info-contrast: $text-contrast !default;
-
-$warning: #FFDC46 !default;
-$warning-light: color.mix($main, $warning, 70%) !default;
-$warning-dark: color.mix($contrast, $warning, 50%) !default;
-$warning-contrast: $text !default;
-
-$error: #EB5757 !default;
-$error-light: color.mix($main, $error, 70%) !default;
-$error-dark: color.mix($contrast, $error, 50%) !default;
-$error-contrast: $text-contrast !default;
-
-// others
-
-$border-color: rgba($text, 0.2) !default;
-$border: 1px solid $border-color !default;
-$border-color-contrast: rgba($text-contrast, 0.3) !default;
-$border-contrast: 1px solid $border-color-contrast !default;
-
-$hover: rgba($text, 0.12) !default;
-$hover-contrast: rgba($text-contrast, 0.12) !default;
-
-$overlay: rgba($text-contrast, 0.8) !default;
-$overlay-contrast: rgba($text, 0.2) !default;
-
-$input-background: rgba($text, 0.05);
-
-// —————————————————————————————————————————————————————————————————
-// spacing
-// —————————————————————————————————————————————————————————————————
-
-$col: calc(100%/12);
-
-$spacing-xxs: 0.125rem !default;
-$spacing-xs: 0.25rem !default;
-$spacing-sm: 0.5rem !default;
-$spacing-md: 1rem !default;
-$spacing-lg: 2rem !default;
-$spacing-xl: 4rem !default;
-$spacing-xxl: 7rem !default;
-
-$max-width-subtitle: 27.5rem !default;
-$max-width-editor: 40rem !default;
-$max-width-form: 40rem !default;
-
-$navbar-height: 4rem !default;
-$navbar-height-sm: 3rem !default;
-$nav-item: $spacing-md !default;
-
-// —————————————————————————————————————————————————————————————————
-// typography
-// —————————————————————————————————————————————————————————————————
-
-// Functions to unquote and remove spaces
-@function str-replace($string, $search, $replace: "") {
-  $index: string.index($string, $search);
-  
-  @if $index {
-    @return str-replace(
-      string.slice($string, 1, $index - 1) + $replace + string.slice($string, $index + string.length($search), string.length($string)),
-      $search,
-      $replace
-    );
-  }
-
-  @return $string;
-}
-@function clean-string($string) {
-  @return str-replace(string.unquote($string), " ");
-}
-
-// typefaces
-$font: "Source Sans Pro" !default;
-$font-clean: clean-string($font);
-$font-fallback: Arial, sans-serif !default;
-$font-code: monospace !default;
-
-// weight
-
-$font-regular: 400 !default;
-$font-bold: 700 !default;
-
-// styles
-
-$h1-size: 3rem !default;
-$h1-weight: $font-bold !default;
-$h1-line-height: 1.25 !default;
-
-$h2-size: 2.5rem !default;
-$h2-weight: $font-bold !default;
-$h2-line-height: 1.25 !default;
-
-$h3-size: 2rem !default;
-$h3-weight: $font-bold !default;
-$h3-line-height: 1.25 !default;
-
-$h4-size: 1.75rem !default;
-$h4-weight: $font-bold !default;
-$h4-line-height: 1.25 !default;
-
-$h5-size: 1.5rem !default;
-$h5-weight: $font-bold !default;
-$h5-line-height: 1.25 !default;
-
-$h6-size: 1.25rem !default;
-$h6-weight: $font-bold !default;
-$h6-line-height: 1.25 !default;
-
-$subtitle-size: 1.125rem !default;
-$subtitle-weight: $font-regular !default;
-$subtitle-line-height: 1.5 !default;
-
-$body-size: 1rem !default;
-$body-weight: $font-regular !default;
-$body-line-height: 1.5 !default;
-
-$caption-size: 0.875rem !default;
-$caption-weight: $font-regular !default;
-$caption-line-height: 1.5 !default;
-
-$overline-size: 0.75rem !default;
-$overline-weight: $font-regular !default;
-$overline-line-height: 1.5 !default;
-
-// —————————————————————————————————————————————————————————————————
-// breakpoints
-// —————————————————————————————————————————————————————————————————
-
-$desktop-lg: 1440px !default;
-$desktop-lg-down: calc(#{$desktop-lg} - 0.02px);
-
-$desktop: 1280px !default;
-$desktop-down: calc(#{$desktop} - 0.02px);
-
-$laptop: 1024px !default;
-$laptop-down: calc(#{$laptop} - 0.02px);
-
-$tablet: 768px !default;
-$tablet-down: calc(#{$tablet} - 0.02px);
-
-$mobile: 568px !default;
-$mobile-down: calc(#{$mobile} - 0.02px);
-
-$mobile-sm: 350px !default;
-$mobile-sm-down: calc(#{$mobile-sm} - 0.02px);
-
-// —————————————————————————————————————————————————————————————————
-// misc
-// —————————————————————————————————————————————————————————————————
-
-// box-shadow
-
-$box-shadow: 0 0 .5rem 0 rgba($text, 0.2) !default;
-
-// transition
-
-$transition-md: 0.4s ease 0s !default;
-$transition-lg: 0.8s ease 0s !default;
-
-// border-radius
-
-$border-radius-sm: .25rem !default;
-$border-radius-md: .5rem !default;
-$border-radius-lg: 1rem !default;
-
-// —————————————————————————————————————————————————————————————————
-// components
-// —————————————————————————————————————————————————————————————————
-
-// input
-
-$input-height: 2.5rem;
-$checkbox-width: 1.5rem;

package/dist/styles/components/_accordion.scss

@@ -1,133 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// size
-// transparent
-// active
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.accordion {
-  width: 100%;
-
-  &__item {
-    position: relative;
-    background-color: variables.$hover;
-    width: 100%;
-  }
-
-  &__control,
-  &__content {
-    transition: padding variables.$transition-md;
-    will-change: padding;
-  }
-
-  &__control {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    cursor: pointer;
-
-    &:after {
-      // content: url(variables.$icons-path + 'phosphor/caret-down.svg');
-      transition: transform variables.$transition-md;
-      will-change: transform;
-      position: absolute;
-      height: variables.$spacing-md;
-      width: variables.$spacing-md;
-      transform-origin: center 60%;
-      pointer-events: none;
-    }
-  }
-
-  &__content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height variables.$transition-md;
-    will-change: max-height;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-@mixin size($proportion, $size) {
-
-  .accordion {
-
-    &__item {
-      border-radius: calc($size*2/3);
-
-      &:not(:last-child) { margin-bottom: calc($size/3); }
-      &--active { padding-bottom: $size; }
-    }
-    
-    &__control {
-      padding: $size $size*1.5;
-
-      &:after {
-        top: $size;
-        right: $size*1.25;
-      }
-    }
-
-    &__header {
-
-      @if $proportion == sm { margin-bottom: -1px; }
-      @if $proportion == lg { margin: -1px 0 -2px 0; }
-    }
-
-    &__content {
-      padding: 0 $size*1.5;
-      overflow: hidden;
-    }
-  }
-
-  &.accordion--transparent .accordion__item--active:not(:first-child) {
-    margin-top: calc($size/3);
-  }
-}
-
-.accordion {
-
-  @include size(md, variables.$spacing-sm);
-  &--sm { @include size(sm, variables.$spacing-xs); }
-  &--lg { @include size(lg, variables.$spacing-md); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// transparent
-// —————————————————————————————————————————————————————————————————
-
-.accordion--transparent {
-
-  .accordion__item {
-    transition: background-color variables.$transition-md, margin variables.$transition-md;
-    will-change: background-color, margin;
-    background-color: transparent;
-
-    @include mixins.hover { background-color: variables.$hover; }
-    &--active { background-color: variables.$hover; }
-    
-    &:not(:last-child):not(.accordion__item--active) {
-      margin-bottom: 0;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// active
-// —————————————————————————————————————————————————————————————————
-
-.accordion__item--active {
-
-  .accordion__control:after {
-    transform: rotate(180deg);
-  }
-}

package/dist/styles/components/_alert.scss

@@ -1,198 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// notice
-// bar
-// dense
-// noIcon
-// —————————————————————————————————————————————————————————————————
-
-$spacing-alert: variables.$spacing-sm;
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.alert {
-  border-radius: variables.$spacing-sm;
-  background-color: variables.$info-light;
-  color: variables.$text;
-  padding: $spacing-alert $spacing-alert*2;
-  position: fixed;
-  top: variables.$spacing-md;
-  right: variables.$spacing-md;
-  width: fit-content;
-  max-width: variables.$spacing-xxl*3;
-  z-index: 20;
-
-  &:not(.alert--bar) {
-    padding-left: variables.$spacing-lg + variables.$spacing-sm;
-  }
-
-  @include mixins.responsive(down, mobile) {
-    @include mixins.calc(max-width, '100vw - 'variables.$spacing-md);
-    right: 8px;
-    top: variables.$spacing-sm;
-  }
-  
-  @include mixins.responsive(down, mobile-sm) {
-    @include mixins.calc(width, '100vw - 'variables.$spacing-md);
-  }
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: $spacing-alert;
-    left: variables.$spacing-sm;
-    height: variables.$spacing-md*1.5;
-    width: variables.$spacing-md*1.5;
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-
-  &__title {
-    font-weight: variables.$font-bold !important;
-  }
-
-  &__subtitle {
-    @extend .caption;
-    padding-bottom: 0.2em;
-  }
-
-  &__close {
-    transition: opacity variables.$transition-md;
-    position: absolute;
-    top: variables.$spacing-sm;
-    right: variables.$spacing-sm;
-    line-height: 0;
-
-    svg {
-      width: variables.$spacing-sm;
-      height: variables.$spacing-sm;
-      fill: variables.$success-dark
-    }
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin color($color, $background-color: variables.$info-light, $border-color: variables.$info) {
-  @if $color == success { $background-color: variables.$success-light; $border-color: variables.$success; } 
-  @else if $color == info { $background-color: variables.$info-light; $border-color: variables.$info; } 
-  @else if $color == warning { $background-color: variables.$warning-light; $border-color: variables.$warning; } 
-  @else if $color == error { $background-color: variables.$error-light; $border-color: variables.$error; } 
-
-  background-color: $background-color;
-  border: 1px solid $border-color;
-  color: variables.$text;
-
-  // &:not(.alert--bar):before {
-
-  //   @if $color == success { content: url(variables.$icons-path + 'phosphor/check-circle.svg'); }
-  //   @else if $color == info { content: url(variables.$icons-path + 'phosphor/info.svg'); }
-  //   @else if $color == warning { content: url(variables.$icons-path + 'phosphor/warning.svg'); }
-  //   @else if $color == error { content: url(variables.$icons-path + 'phosphor/x-circle.svg'); }
-  // }
-}
-
-.alert {
-
-  &--success { @include color(success); }
-  &--info { @include color(info); }
-  &--warning { @include color(warning); }
-  &--error { @include color(error); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// notice
-// —————————————————————————————————————————————————————————————————
-
-.alert {
-  
-  &--notice {
-    position: relative;
-    max-width: none;
-    z-index: 1;
-    top: 0;
-    right: 0;  
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// bar
-// —————————————————————————————————————————————————————————————————
-
-.alert {
-  
-  &--bar {
-    position: fixed;
-    top: 0;
-    right: 0;
-    max-width: none;
-    width: 100%; // needed for small devices to not overflow the container
-    z-index: 1;
-    border-radius: 0;
-    border-left: 0;
-    border-right: 0;
-    text-align: center;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.alert--dense {
-  padding: $spacing-alert*0.5 $spacing-alert;
-
-  &:before {
-    top: $spacing-alert*0.5;
-    left: $spacing-alert*0.5;
-    height: variables.$spacing-md*1.25;
-    width: variables.$spacing-md*1.25;
-  }
-
-  &:not(.alert--bar) {
-    padding-left: variables.$spacing-md*1.75;
-  }
-
-  .alert__title {
-
-    + .alert__title,
-    + .alert__subtitle {
-      margin-top: 0;
-    }
-  }
-
-  .alert__title { @extend .caption; }
-  .alert__subtitle { @extend .overline; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// noIcon
-// —————————————————————————————————————————————————————————————————
-
-.alert.alert {
-
-  &--noIcon {    
-    padding-left: variables.$spacing-md;
-    
-    &.alert--dense {
-      padding-left: variables.$spacing-sm;
-    }
-    
-    &:before {
-      display: none;
-    }
-  }
-}

package/dist/styles/components/_breadcrumbs.scss

@@ -1,50 +0,0 @@
-@use "../common/mixins";
-@use "../common/variables";
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// separator
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.breadcrumbs {
-  display: inline-flex;
-  align-items: baseline;
-
-  @include mixins.responsive(down, tablet) {
-    flex-direction: column;
-  }
-
-  &__item {
-    cursor: pointer;
-
-    &:not(:first-child) {
-      margin-left: variables.$spacing-xs;
-
-      &:before {
-        content: "/";
-        margin-right: variables.$spacing-xs;
-        color: variables.$text-alt;
-        display: inline-block; // required to remove underline on hover for before element
-      }
-    }
-
-    @include mixins.hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// separator
-// —————————————————————————————————————————————————————————————————
-
-.breadcrumbs--arrow .breadcrumbs__item:not(:first-child):before {
-  content: "\2039";
-  transform: rotate(180deg);
-  font-size: 1.5em;
-  float: left;
-}