pallote-react 0.2.25

package/dist/styles/common/_mixins.scss

@@ -0,0 +1,58 @@
+// —————————————————————————————————————————————————————————————————
+// misc
+// media queries
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// misc
+// —————————————————————————————————————————————————————————————————
+
+@mixin calc($property, $expression) {
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: calc(#{$expression});
+}
+
+@mixin hover {
+  &:hover, &:active, &:focus {
+    @content;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// media queries
+// —————————————————————————————————————————————————————————————————
+
+@mixin responsive($value, $breakpoint) {
+  @if $value == up {
+    $value: min-width;
+    @if $breakpoint == desktop { $breakpoint: $desktop-up; } 
+    @else if $breakpoint == laptop { $breakpoint: $laptop-up; } 
+    @else if $breakpoint == tablet { $breakpoint: $tablet-up; } 
+    @else if $breakpoint == mobile { $breakpoint: $mobile-up; } 
+    @else if $breakpoint == mobile-sm { $breakpoint: $mobile-sm-up; }
+
+  } @else if $value == down {
+    $value: max-width;
+    @if $breakpoint == desktop { $breakpoint: $desktop-down; } 
+    @else if $breakpoint == laptop { $breakpoint: $laptop-down; } 
+    @else if $breakpoint == tablet { $breakpoint: $tablet-down; } 
+    @else if $breakpoint == mobile { $breakpoint: $mobile-down; } 
+    @else if $breakpoint == mobile-sm { $breakpoint: $mobile-sm-down; }
+  }
+
+  @media ($value: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin responsive-touch() {
+  @media (pointer: coarse) {
+    @content;
+  }
+}
+
+@mixin responsive-mobile-landscape {
+  @media only screen and (max-device-width: $laptop-down) and (orientation: landscape) {
+    @content;
+  }
+}

package/dist/styles/common/_variables.scss

@@ -0,0 +1,222 @@
+// —————————————————————————————————————————————————————————————————
+// colors
+// spacing
+// typography
+// breakpoints
+// misc
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// colors
+// —————————————————————————————————————————————————————————————————
+
+// common
+
+$black: #000A1E !default;
+$white: #FFFFFF !default;
+
+// grey gradient
+
+$grey-90: #1A2335 !default;
+$grey-80: #333B4B !default;
+$grey-70: #4D5462 !default;
+$grey-60: #666C78 !default;
+$grey-50: #7F848E !default;
+$grey-40: #999DA5 !default;
+$grey-30: #B2B5BB !default;
+$grey-20: #CCCED2 !default;
+$grey-10: #E5E6E8 !default;
+$grey-5: #F2F3F4 !default;
+
+// text
+
+$text: $white !default;
+$text-alt: rgba($text, 0.66) !default;
+$text-disabled: rgba($text, 0.33) !default;
+$text-contrast: $black !default;
+$text-contrast-alt: rgba($text-contrast, 0.66) !default;
+$text-contrast-disabled: rgba($text-contrast, 0.33) !default;
+
+// brand
+
+$primary: #00F3FF !default;
+$primary-light: mix($white, $primary, 70%) !default;
+$primary-dark: mix($black, $primary, 50%) !default;
+$primary-text-contrast: $text-contrast !default;
+
+$secondary: #E7FC00 !default;
+$secondary-light: mix($white, $secondary, 70%) !default;
+$secondary-dark: mix($black, $secondary, 50%) !default;
+$secondary-text-contrast: $text-contrast !default;
+
+$highlight: #FF74E6 !default;
+$highlight-light: mix($white, $highlight, 70%) !default;
+$highlight-dark: mix($black, $highlight, 50%) !default;
+$highlight-text-contrast: $text-contrast !default;
+
+// misc
+
+$background: $black !default;
+$paper: $grey-90 !default;
+
+$overlay: rgba($white, 0.1) !default;
+$hover: rgba($white, 0.08) !default;
+$backdrop: rgba($white, 0.2) !default;
+
+$border: rgba($white, 0.2) !default;
+$border-contrast: rgba($black, 0.2) !default;
+
+// feedback
+
+$success-light: #E7F9EE !default;
+$success: #26a95d !default;
+$success-dark: #1C7C44 !default;
+$success-text: #155F34 !default;
+$success-text-contrast: $text !default;
+
+$info-light: #E9F8FD !default;
+$info: #17A0CC !default;
+$info-dark: #117798 !default;
+$info-text: #0D5A72 !default;
+$info-text-contrast: $text !default;
+
+$warning-light: #FFFAE5 !default;
+$warning: #FFDC46 !default;
+$warning-dark: #886E00 !default;
+$warning-text: #685400 !default;
+$warning-text-contrast: $text-contrast !default;
+
+$error-light: #FCE7E7 !default;
+$error: #EB5757 !default;
+$error-dark: #D31919 !default;
+$error-text: #9C1212 !default;
+$error-text-contrast: $text !default;
+
+// social
+
+$facebook:#1877F2;
+$github:#4078C0;
+$instagram: #405DE6;
+$linkedin: #0077B5;
+$medium:#00AB6C;
+$twitter:#1DA1F2;
+
+// export for use in jsx files
+
+:export {
+  black: $black;
+  white: $white;
+
+  grey-90: $grey-90;
+  grey-80: $grey-80;
+  grey-70: $grey-70;
+  grey-60: $grey-60;
+  grey-50: $grey-50;
+  grey-40: $grey-40;
+  grey-30: $grey-30;
+  grey-20: $grey-20;
+  grey-10: $grey-10;
+  grey-5: $grey-5;
+
+  text: $text;
+  text-alt: $text-alt;
+  text-disabled: $text-disabled;
+  text-contrast: $text-contrast;
+  text-contrast-alt: $text-contrast-alt;
+  text-contrast-disabled: $text-contrast-disabled;
+
+  primary: $primary;
+  secondary: $secondary;
+  highlight: $highlight;
+
+  background: $background;
+  paper: $paper;
+  overlay: $overlay;
+  hover: $hover;
+  backdrop: $backdrop;
+  border: $border;
+  border-contrast: $border-contrast;
+
+  success: $success;
+  info: $info;
+  warning: $warning;
+  error: $error;
+}
+
+// —————————————————————————————————————————————————————————————————
+// spacing
+// —————————————————————————————————————————————————————————————————
+
+$spacing: 0.5rem !default; // 8px
+
+$page-gutter: calc(100vw / 12) !default;
+$page-max-width: 1200px !default;
+$page-column: calc(100% / 12) !default;
+
+$section-spacing: $spacing*8 !default;
+$section-spacing-content: $spacing*6 !default;
+
+$navbar-height: $spacing*8 !default;
+
+// —————————————————————————————————————————————————————————————————
+// typography
+// —————————————————————————————————————————————————————————————————
+
+// fonts
+
+$font: "Barlow", "Arial", sans-serif !default;
+
+// weight
+
+$font-light: 300 !default;
+$font-regular: 500 !default;
+$font-bold: 700 !default;
+
+// —————————————————————————————————————————————————————————————————
+// breakpoints
+// —————————————————————————————————————————————————————————————————
+
+$desktop-lg: 1800px !default;
+
+$desktop-up: 1280px !default;
+$desktop-down: 1279.98px !default;
+
+$laptop-up: 1024px !default;
+$laptop-down: 1023.98px !default;
+
+$tablet-up: 768px !default;
+$tablet-down: 767.98px !default;
+
+$mobile-up: 576px !default;
+$mobile-down: 575.98px !default;
+
+$mobile-sm-up: 375px !default;
+$mobile-sm-down: 374.98px !default;
+
+// —————————————————————————————————————————————————————————————————
+// misc
+// —————————————————————————————————————————————————————————————————
+
+// transition
+
+$transition-md: 0.4s ease 0s !default;
+$transition-lg: 0.8s ease 0s !default;
+
+// shadow
+
+$box-shadow-sm: 0 0 $spacing $spacing*0.25 rgba($secondary ,0.2) !default;
+$box-shadow-md: 0 0 $spacing*2 $spacing*0.5 rgba($secondary ,0.2) !default;
+$box-shadow-lg: 0 0 $spacing*4 $spacing rgba($secondary ,0.2) !default;
+
+// border
+
+$border-sm: 1px solid !default;
+$border-md: $spacing*0.25 solid !default;
+$border-lg: $spacing*0.5 solid !default;
+
+// border-radius
+
+$border-radius-sm: $spacing*0.75 !default;
+$border-radius-md: $spacing !default;
+$border-radius-lg: $spacing*2 !default;
+

package/dist/styles/components/accordion.scss

@@ -0,0 +1,181 @@
+// —————————————————————————————————————————————————————————————————
+// mixins
+// elements
+// size
+// noPadding
+// transparent
+// gutter
+// active
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@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;
+    }
+
+    &__icon {
+      @if $proportion == lg { height: $size*1.5; width: $size*1.5; }
+      @else { height: $size*2; width: $size*2; }
+
+      &:first-child { margin-right: calc($size); }
+      &:last-child { margin-left: calc($size); }
+    }
+    
+    &__header {
+
+      @if $proportion == sm { margin-bottom: -1px; }
+      @if $proportion == lg { margin: -1px 0 -2px 0; }
+    }
+
+    &__content {
+      transition: height $transition-md;
+      will-change: height;
+      padding: 0 $size*1.5;
+      overflow: hidden;
+    }
+  }
+
+  &.accordion--gutter .accordion__item--active {
+    padding-bottom: $size*2;
+
+    .accordion__control {
+      padding-top: $size*2;
+      padding-bottom: $size*2;
+    }
+  }
+
+  &.accordion--transparent .accordion__item--active {
+    margin-top: calc($size/3);
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.accordion {
+  width: 100%;
+
+  &__item {
+    background-color: $paper;
+    width: 100%;
+  }
+
+  &__control,
+  &__content {
+    transition: padding $transition-md;
+    will-change: paddding;
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  &__header {
+    flex-grow: 1;
+    text-align: left;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.125rem;
+    width: 1.125rem;
+
+    &:first-child { margin-right: 0.5rem; }
+    &:last-child { margin-left: 0.5rem; }
+
+    &--arrow {
+      transition: transform $transition-md;
+      will-change: transform;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+.accordion {
+
+  &--sm { @include size(sm, $spacing*0.75); }
+  &--md { @include size(md, $spacing); }
+  &--lg { @include size(lg, $spacing*1.5); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// 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: $paper; }
+    &--active { background-color: $paper; }
+    &--disabled { @include hover { background-color: transparent; }}
+    
+    &:not(:last-child):not(.accordion__item--active) {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// gutter
+// —————————————————————————————————————————————————————————————————
+
+// see size mixin
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.accordion__item--active {
+
+  .accordion {
+
+    &__icon--arrow {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.accordion__item--disabled {
+  opacity: 0.5;
+
+  .accordion__control {
+    cursor: not-allowed;
+  }
+}

package/dist/styles/components/button.scss

@@ -0,0 +1,210 @@
+@import '../mixins/layer.scss';
+
+// —————————————————————————————————————————————————————————————————
+// reset
+// mixins
+// elements
+// color
+// size
+// variant
+// fullWidth
+// disabled
+// isTransparent
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// reset
+// —————————————————————————————————————————————————————————————————
+
+button,
+a {
+  margin: 0;
+  padding: 0;
+  width: auto;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin size($size) {
+  border-radius: $size*0.2;
+  font-size: $size*0.5;
+  height: $size;
+
+  .button {
+    border-radius: $size*0.2;
+    padding-right: calc($size / 3);
+    padding-left: calc($size / 3);
+  }
+
+  &.button--icon .button {
+    width: $size;
+    padding: $size*0.25;
+  }
+
+  p {
+    font-size: $size*0.5;
+  }
+
+  &.button--stroke {
+    padding-right: calc(#{calc($size/3)} - $spacing*0.25);
+    padding-left: calc(#{calc($size/3)} - $spacing*0.25);
+    height: calc(#{$size} - $spacing*0.5);
+
+    &.button--icon {
+      width: calc(#{$size} - $spacing*0.5);
+      padding: calc(#{$size*0.25} - $spacing*0.25);
+    }
+  }
+
+  .button__icons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: $size*0.5;
+      height: $size*0.5;
+    }
+
+    &--left {
+      margin-right: $size*0.25;
+      margin-left: -$size*0.125;
+    }
+
+    &--right {
+      margin-right: -$size*0.125;
+      margin-left: $size*0.25;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.button {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-weight: $font-bold;
+
+  &__wrapper {
+    display: inline-flex;
+    height: auto;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+// color is handled with the Layer component
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+.button {
+
+  &--xxs {
+    @include size($spacing*2.5);
+
+    &.button--icon .button {
+      padding: $spacing*0.5;
+    }
+  }
+
+  &--xs {
+    @include size($spacing*3);
+
+    &.button--icon .button {
+      padding: $spacing*0.5;
+    }
+  }
+
+  &--sm {
+    @include size($spacing*3.5);
+  }
+
+  &--md {
+    @include size($spacing*4);
+  }
+
+  &--lg {
+    @include size($spacing*4.5);
+  }
+
+  &--xl {
+    @include size($spacing*5);
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// variant
+// —————————————————————————————————————————————————————————————————
+
+.button {
+
+  &--stroke {
+    border-width: $spacing*0.25;
+    border-style: solid;
+    color: $text;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// fullWidth
+// —————————————————————————————————————————————————————————————————
+
+.button--fullWidth {
+  width: 100%;
+}
+
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.button--disabled {
+  opacity: 0.4;
+
+  .button {
+    cursor: not-allowed;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// isTransparent
+// —————————————————————————————————————————————————————————————————
+
+.button--transparent {
+  background-color: transparent !important;
+  padding: 0;
+  height: auto;
+
+  .button {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}