pallote-css 0.4.0 → 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: #3C6BF4 !default;
-$primary-light: color.mix($main, $primary, 70%) !default;
-$primary-dark: color.mix($contrast, $primary, 50%) !default;
-$primary-contrast: $text-contrast !default;
-
-$secondary: #9E6D04 !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, 80%) !default;
-$success-dark: color.mix($contrast, $success, 60%) !default;
-$success-contrast: $text-contrast !default;
-
-$info: #17A0CC !default;
-$info-light: color.mix($main, $info, 80%) !default;
-$info-dark: color.mix($contrast, $info, 60%) !default;
-$info-contrast: $text-contrast !default;
-
-$warning: #FFDC46 !default;
-$warning-light: color.mix($main, $warning, 80%) !default;
-$warning-dark: color.mix($contrast, $warning, 60%) !default;
-$warning-contrast: $text !default;
-
-$error: #EB5757 !default;
-$error-light: color.mix($main, $error, 80%) !default;
-$error-dark: color.mix($contrast, $error, 60%) !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.08) !default;
-$hover-contrast: rgba($text-contrast, 0.08) !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,132 +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 {
-      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 accordion-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 accordion-size(md, variables.$spacing-sm);
-  &--sm { @include accordion-size(sm, variables.$spacing-xs); }
-  &--lg { @include accordion-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,188 +0,0 @@
-@use '../common/mixins';
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// notice
-// bar
-// dense
-// noIcon
-// —————————————————————————————————————————————————————————————————
-
-$spacing-alert: .5rem;
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.alert {
-  border-radius: $spacing-alert;
-  padding: $spacing-alert $spacing-alert*2;
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  width: 100%;
-  max-width: 20rem;
-  z-index: 20;
-
-  &:not(.alert-bar) {
-    padding-left: 2.5rem;
-  }
-
-  @include mixins.responsive(down, mobile) {
-    @include mixins.calc(max-width, '100vw - '1rem);
-    right: .5rem;
-    top: .5rem;
-  }
-  
-  @include mixins.responsive(down, mobile-sm) {
-    @include mixins.calc(width, '100vw - '1rem);
-  }
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: $spacing-alert;
-    left: $spacing-alert;
-    height: $spacing-alert*3;
-    width: $spacing-alert*3;
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-
-  &_title {
-    font-weight: variables.$font-bold !important;
-  }
-
-  &_subtitle {
-    @extend .caption;
-    margin-top: 0.125rem !important;
-  }
-
-  &_close {
-    transition: opacity variables.$transition-md;
-    position: absolute;
-    top: .5rem;
-    right: .5rem;
-    line-height: 0;
-
-    svg {
-      width: .5rem;
-      height: .5rem;
-      fill: variables.$success-dark
-    }
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin alert-color($color, $title-color: variables.$success-dark, $background-color: variables.$success-light, $border-color: variables.$success) {
-  @if $color == success { $title-color: variables.$success-dark; $background-color: variables.$success-light; $border-color: variables.$success; } 
-  @else if $color == info { $title-color: variables.$info-dark; $background-color: variables.$info-light; $border-color: variables.$info; } 
-  @else if $color == warning { $title-color: variables.$warning-dark; $background-color: variables.$warning-light; $border-color: variables.$warning; } 
-  @else if $color == error { $title-color: variables.$error-dark; $background-color: variables.$error-light; $border-color: variables.$error; } 
-
-  background-color: $background-color;
-  border: 1px solid $border-color;
-  color: $title-color;
-
-  &:not(.alert-bar):before {
-
-    @if $color == success { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230C5F3F' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E"); }
-    @else if $color == info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230B5F11' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'%3E%3C/path%3E%3C/svg%3E"); }
-    @else if $color == warning { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237F7332' viewBox='0 0 256 256'%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'%3E%3C/path%3E%3C/svg%3E"); }
-    @else if $color == error { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2375303A' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E"); }
-  }
-}
-
-.alert {
-
-  &-success { @include alert-color(success); }
-  &-info { @include alert-color(info); }
-  &-warning { @include alert-color(warning); }
-  &-error { @include alert-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: 1rem*1.25;
-    width: 1rem*1.25;
-  }
-
-  &:not(.alert-bar) {
-    padding-left: 1rem*1.75;
-  }
-
-  .alert_title { @extend .caption; }
-  .alert_subtitle { @extend .overline; margin-top: 0 !important; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// noIcon
-// —————————————————————————————————————————————————————————————————
-
-.alert.alert {
-
-  &-noIcon {    
-    padding-left: 1rem;
-    
-    &.alert-dense {
-      padding-left: .5rem;
-    }
-    
-    &:before {
-      display: none;
-    }
-  }
-}

package/dist/styles/components/_breadcrumbs.scss

@@ -1,70 +0,0 @@
-@use '../common/mixins';
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// separator
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.breadcrumbs {
-  text-transform: uppercase;
-
-  ol {
-    display: inline-flex;
-    flex-wrap: wrap;
-  }
-
-  li {
-    margin-left: 0;
-    padding-top: 0;
-  }
-
-  &_item {
-    @extend %caption;
-    font-weight: variables.$font-bold;
-    
-    &:not(:first-child) {
-      margin-left: .25rem;
-      
-      &:before {
-        content: "/";
-        margin-right: .25rem;
-        color: variables.$text-alt;
-        display: inline-block; // required to remove underline on hover for before element
-      }
-    }
-
-    a {
-      border-radius: variables.$border-radius-sm;
-      text-underline-offset: .15em;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    p {
-      display: inline-block;
-      color: variables.$primary;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// separator
-// —————————————————————————————————————————————————————————————————
-
-.breadcrumbs-arrow .breadcrumbs_item:not(:first-child):before {
-  content: '';
-  border: solid variables.$text-alt;
-  border-width: 0 1px 1px 0;
-  padding: .2em;
-  transform: rotate(-45deg);
-  margin-right: .5rem;
-  margin-bottom: .1em;
-}