pallote-css 0.6.0 → 0.7.0

package/styles/common/_variables.scss

@@ -0,0 +1,251 @@
+@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);
+
+$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: 1rem !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;
+
+$button-size: 1rem !default;
+$button-xs-size: 0.75rem !default;
+$button-sm-size: 0.875rem !default;
+$button-lg-size: 1.25rem !default;
+$button-transform: uppercase !default;
+$button-weight: $font-bold !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/styles/components/_accordion.scss

@@ -0,0 +1,132 @@
+@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: 1rem;
+      width: 1rem;
+      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, .5rem);
+  &-sm { @include accordion-size(sm, .25rem); }
+  &-lg { @include accordion-size(lg, 1rem); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// 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/styles/components/_alert.scss

@@ -0,0 +1,188 @@
+@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/styles/components/_breadcrumbs.scss

@@ -0,0 +1,72 @@
+@use '../common/mixins';
+@use '../common/variables';
+@use '../utilities/text';
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// separator
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.breadcrumbs {
+
+  ol {
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
+  li {
+    margin-left: 0;
+    padding-top: 0;
+  }
+
+  &_item {
+    text-transform: variables.$button-transform;
+    font-weight: variables.$button-weight;
+    font-size: variables.$button-sm-size;
+    
+    &: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;
+}