pallote-css 0.3.9 → 0.3.11

package/dist/styles/components/_accordion.scss

@@ -1,130 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// size
-// transparent
-// active
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.accordion {
-  width: 100%;
-
-  &__item {
-    position: relative;
-    background-color: $hover;
-    width: 100%;
-  }
-
-  &__control,
-  &__content {
-    transition: padding $transition-md;
-    will-change: padding;
-  }
-
-  &__control {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    cursor: pointer;
-
-    &:after {
-      content: url($icons-path + 'phosphor/caret-down.svg');
-      transition: transform $transition-md;
-      will-change: transform;
-      position: absolute;
-      height: $spacing-md;
-      width: $spacing-md;
-      transform-origin: center 60%;
-      pointer-events: none;
-    }
-  }
-
-  &__content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height $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, $spacing-sm);
-  &--sm { @include size(sm, $spacing-xs); }
-  &--lg { @include size(lg, $spacing-md); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// transparent
-// —————————————————————————————————————————————————————————————————
-
-.accordion--transparent {
-
-  .accordion__item {
-    transition: background-color $transition-md, margin $transition-md;
-    will-change: background-color, margin;
-    background-color: transparent;
-
-    @include hover { background-color: $hover; }
-    &--active { background-color: $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,194 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// color
-// notice
-// bar
-// dense
-// noIcon
-// —————————————————————————————————————————————————————————————————
-
-$spacing-alert: $spacing-sm;
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.alert {
-  border-radius: $spacing-sm;
-  background-color: $info-light;
-  color: $text;
-  padding: $spacing-alert $spacing-alert*2;
-  position: fixed;
-  top: $spacing-md;
-  right: $spacing-md;
-  width: fit-content;
-  max-width: $spacing-xxl*3;
-  z-index: 20;
-
-  &:not(.alert--bar) {
-    padding-left: $spacing-lg + $spacing-sm;
-  }
-
-  @include responsive(down, mobile) {
-    @include calc(max-width, '100vw - '$spacing-md);
-    right: 8px;
-    top: $spacing-sm;
-  }
-  
-  @include responsive(down, mobile-sm) {
-    @include calc(width, '100vw - '$spacing-md);
-  }
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: $spacing-alert;
-    left: $spacing-sm;
-    height: $spacing-md*1.5;
-    width: $spacing-md*1.5;
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
-
-  &__title {
-    font-weight: $font-bold !important;
-  }
-
-  &__subtitle {
-    @extend .caption;
-    padding-bottom: 0.2em;
-  }
-
-  &__close {
-    transition: opacity $transition-md;
-    position: absolute;
-    top: $spacing-sm;
-    right: $spacing-sm;
-    line-height: 0;
-
-    svg {
-      width: $spacing-sm;
-      height: $spacing-sm;
-      fill: $success-dark
-    }
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin color($color, $background-color: $info-light, $border-color: $info) {
-  @if $color == success { $background-color: $success-light; $border-color: $success; } 
-  @else if $color == info { $background-color: $info-light; $border-color: $info; } 
-  @else if $color == warning { $background-color: $warning-light; $border-color: $warning; } 
-  @else if $color == error { $background-color: $error-light; $border-color: $error; } 
-
-  background-color: $background-color;
-  border: 1px solid $border-color;
-  color: $text;
-
-  &:not(.alert--bar):before {
-
-    @if $color == success { content: url($icons-path + 'phosphor/check-circle.svg'); }
-    @else if $color == info { content: url($icons-path + 'phosphor/info.svg'); }
-    @else if $color == warning { content: url($icons-path + 'phosphor/warning.svg'); }
-    @else if $color == error { content: url($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: $spacing-md*1.25;
-    width: $spacing-md*1.25;
-  }
-
-  &:not(.alert--bar) {
-    padding-left: $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: $spacing-md;
-    
-    &.alert--dense {
-      padding-left: $spacing-sm;
-    }
-    
-    &:before {
-      display: none;
-    }
-  }
-}

package/dist/styles/components/_breadcrumbs.scss

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

package/dist/styles/components/_button.scss

@@ -1,174 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// kind
-// variant
-// size
-// color
-// fullWidth
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.button {
-  cursor: pointer;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $border-radius-md;
-  position: relative;
-  line-height: 0;
-  text-transform: uppercase;
-  font-weight: $font-bold;
-  white-space: nowrap;
-  outline-offset: 2px;
-  width: fit-content;
-  min-width: fit-content;
-
-  svg {
-    stroke: currentColor;
-    fill: currentColor;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// kind
-// —————————————————————————————————————————————————————————————————
-
-// This property is handled by the size mixin
-
-// —————————————————————————————————————————————————————————————————
-// variant
-// —————————————————————————————————————————————————————————————————
-
-// This property is handled by the color mixin
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-@mixin size($value, $size) {
-  height: $size;
-  gap: $size*.25;
-  padding-right: $size*.33;
-  padding-left: $size*.33;
-
-  @if $value == xs or $value == sm {
-    @extend %overline;
-    border-radius: $border-radius-sm;
-  }
-  @if $value == md { @extend %body; }
-  @if $value == lg { @extend %subtitle; }
-
-  svg {
-    width: calc($size/1.75);
-    height: calc($size/1.75);
-    margin-right: -$size*.05;
-    margin-left: -$size*.05;
-  }
-
-  &:not(.button-icon) {
-
-    svg {
-      margin-top: 0.15em;
-    }
-  }
-
-  &.button-icon {
-    width: $size;
-    padding: 0;
-  }
-}
-
-.button {
-
-  @include size(md, 2rem);
-  &-xs { @include size(xs, 1rem); }
-  &-sm { @include size(sm, 1.5rem); }
-  &-lg { @include size(lg, 2.5rem); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin color($prefix, $colors...) {
-
-  @each $i in $colors {
-    .#{$prefix}#{nth($i, 1)} {
-      background-color: nth($i, 2);
-      color: nth($i, 3);
-
-      &:focus {
-        outline: 2px solid nth($i, 2);
-      }
-    
-      @include hover {
-
-        &:not(.button-disabled) {
-          background-color: mix(black, nth($i, 2), 20%);
-        }
-      }
-
-      &.button-stroke {
-        background-color: transparent;
-        border: 1px solid nth($i, 2);
-        color: $text;
-
-        @include hover {
-
-          &:not(.button-disabled) {
-            background-color: $hover;
-          }
-        }
-
-        svg { stroke: $text; }
-      }
-      
-      &.button-transparent {
-        background-color: transparent;
-        color: nth($i, 2);
-
-        @include hover { background-color: $hover; }
-        svg { stroke: nth($i, 2); }
-      }
-    }
-  }
-}
-
-@include color('button',
-  '' $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,
-  '-main' $main $text,
-  '-contrast' $contrast $text-contrast
-);
-
-// —————————————————————————————————————————————————————————————————
-// fullWidth
-// —————————————————————————————————————————————————————————————————
-
-.button-fullWidth {
-  width: 100%;
-}
-
-// —————————————————————————————————————————————————————————————————
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-.button {
-
-  &.button-disabled,
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-    outline: none;
-  }
-}

package/dist/styles/components/_buttons.scss

@@ -1,50 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// direction
-// fullWidth
-// wide
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.buttons {
-  display: flex;
-  flex-wrap: wrap; // set on multiple lines if wider than parent width
-  width: 100%;
-  gap: .5rem;
-  
-  // larger spacing on small and touch devices
-  @include responsive(down, mobile) { gap: 1rem; }
-  @include responsive-touch { gap: 1rem; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.buttons-portrait {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-// —————————————————————————————————————————————————————————————————
-// fullWidth
-// —————————————————————————————————————————————————————————————————
-
-.buttons-fullWidth .button {
-  width: 100%;
-}
-
-// —————————————————————————————————————————————————————————————————
-// wide
-// —————————————————————————————————————————————————————————————————
-
-.buttons-wide {
-  justify-content: space-between;
-
-  > .buttons {
-    width: fit-content;
-  }
-}