pallote-react 0.2.25

package/dist/styles/components/table.scss

@@ -0,0 +1,167 @@
+// —————————————————————————————————————————————————————————————————
+// variables
+// elements
+// align
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// variables
+// —————————————————————————————————————————————————————————————————
+
+$padding-vertical: $spacing;
+$padding-horizontal: $spacing*1.25;
+$padding-dense-vertical: $spacing*0.5;
+$padding-dense-horizontal: $spacing*0.75;
+
+$border: 1px solid $border;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+  border: $border;
+  border-radius: $spacing;
+  overflow: hidden;
+
+  &__content {
+    width: 100%;
+  }
+
+  &__row {
+
+    &:nth-child(even) {
+      background-color: rgba($white, 0.05);
+    }
+  }
+  
+  &__cell {
+    padding: $padding-vertical $padding-horizontal;
+    border-top: $border;
+    
+    &:not(:first-child) {
+      border-left: $border;
+    }
+    
+    &--th {
+      font-size: 0.75rem;
+      font-weight: bold;
+      color: $white;
+      border-top: none;
+      background-color: $overlay;
+      padding-top: $spacing*0.75;
+      padding-bottom: $spacing*0.75;
+    }
+  }
+ 
+  &Footer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    background-color: $overlay;
+    padding: 0 $padding-vertical;
+    height: $spacing*5.5;
+    border-top: $border;
+  
+    &__pages {
+      display: inline-flex;
+      align-items: center;
+    }
+  
+    &__rows {
+      flex-shrink: 0;
+    }
+  
+    &__button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      width: $spacing*3.5;
+      height: $spacing*3.5;
+      border-radius: $border-radius-sm;
+  
+      &:not(:last-child) {
+        margin-right: $spacing*0.5;
+      }
+  
+      &--active {
+        background-color: $primary;
+        color: $primary-text-contrast;
+      }
+    }
+  
+    &__first,
+    &__prev,
+    &__page,
+    &__next,
+    &__last {
+  
+      @include hover {
+  
+        &:not(.tableFooter__button--active) {
+          background-color: $hover;
+        }
+      }
+    }
+  
+    &__dots {
+      width: 1rem;
+    }
+  }
+}
+
+tbody tr:first-child .table__cell--td {
+  border-top: $border;
+}
+
+
+// —————————————————————————————————————————————————————————————————
+// align
+// —————————————————————————————————————————————————————————————————
+
+.table__cell {
+
+  &--left { text-align: left; }
+  &--center { text-align: center; }
+  &--right { text-align: right; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.table__cell--dense {
+  padding: $padding-dense-vertical $padding-dense-horizontal;
+  font-size: 0.875rem;
+
+  &.table__cell--th {
+    padding-top: $spacing*0.25;
+    padding-bottom: $spacing*0.25;
+    font-size: 0.7rem;
+  }
+}
+
+.tableFooter--dense {
+  padding: 0 $padding-dense-vertical;
+  height: $spacing*4.5;
+
+  .tableFooter__button {
+    width: $spacing*3;
+    height: $spacing*3;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// noBorder
+// —————————————————————————————————————————————————————————————————
+
+.table--noBorder {
+  border: 0;
+  border-radius: 0;
+}

package/dist/styles/components/tabs.scss

@@ -0,0 +1,102 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// isActive
+// dense
+// direction
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.tabs__control {
+  display: flex;
+  background-color: $paper;
+  gap: $spacing*0.75;
+  border-radius: $spacing*1.5;
+  width: 100%;
+  padding: $spacing*1.5;
+}
+
+.tabs__item {
+  @extend .button;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  padding: $spacing*1.5 $spacing*2;
+  border-radius: $spacing*0.5;
+
+  & + & {
+    margin-top: 0;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// isActive
+// —————————————————————————————————————————————————————————————————
+
+.tabs__item:hover,
+.tabs__item--isActive {
+  background-color: $hover;
+}
+
+.tabs__item--isActive {
+  color: $primary;
+
+  &:after {
+    background-color: $primary;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.tabs__control--dense {
+  border-radius: $spacing;
+  padding: $spacing;
+  gap: $spacing*0.5;
+
+  .tabs__item {
+    padding: $spacing*0.75 $spacing;
+    border-radius: $spacing*0.25;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+.tabs__control--landscape {
+
+  .tabs__item {
+
+    &:after {
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      width: 100%;
+    }
+  }
+}
+
+.tabs__control--portrait {
+  flex-direction: column;
+  width: 200px;
+
+  .tabs__item {
+    text-align: left;
+
+    &:after {
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 2px;
+    }
+  }
+}

package/dist/styles/components/tag.scss

@@ -0,0 +1,41 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// color
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.tag {
+  padding: $spacing*0.5 $spacing*0.75;
+  border-radius: $border-radius-sm;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap; // prevent text to go on multiple lines
+  border-radius: border-radius-md;
+  padding: 0 $spacing;
+  height: $spacing*3.5;
+  
+  &__text {
+    line-height: 1;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+// color is handled with the Layer component
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.tag--dense {
+  border-radius: $border-radius-sm;
+  padding: 0 $spacing*0.5;
+  height: $spacing*2.5;
+}

package/dist/styles/components/tooltip.scss

@@ -0,0 +1,65 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// bold
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// ——————————————————————————————————————————————————
+// elements
+// ——————————————————————————————————————————————————
+
+.tooltip {
+  position: relative;
+
+  &__content {
+    @extend %caption;
+    z-index: 1;
+    pointer-events: none;
+    position: absolute;
+    opacity: 0;
+    max-width: $spacing*30;
+    border-radius: $spacing;
+    padding: $spacing*0.5 $spacing*1.5;
+    background-color: $paper;
+    white-space: nowrap;
+    box-shadow: $box-shadow-sm;
+    bottom: -$spacing*0.5;
+    transform: translateY(100%);
+    left: $spacing*0.5;
+  }
+
+  &__icon {
+    margin-left: 0.125em;
+    transform: translateY(-0.125em);
+    height: 0.7em;
+    width: 0.7em;
+  }
+
+  @include hover {
+
+    .tooltip__content {
+      opacity: 1;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// bold
+// —————————————————————————————————————————————————————————————————
+
+.tooltip--bold {
+  font-weight: $font-bold;
+
+  .tooltip__content {
+    font-weight: $font-regular;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.tooltip__content--dense {
+  @extend %overline;
+  padding: $spacing*0.25 $spacing;
+}

package/dist/styles/index.scss

@@ -0,0 +1,8 @@
+$fonts-path: '~/public/fonts/';
+$icons-path: '~/public/icons/';
+
+@import '~/node_modules/pallote-css/dist/pallote.scss';
+
+.snippet__wrapper {
+  width: 100%;
+}

package/dist/styles/mixins/layer.scss

@@ -0,0 +1,109 @@
+// —————————————————————————————————————————————————————————————————
+// mixins
+// elements
+// fill
+// stroke
+// wrapper
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin fill($colors...) {
+  @each $i in $colors {
+    .fill--#{nth($i, 1)} {
+      color: nth($i, 4);
+      background-color: nth($i, 2);
+      
+      &.layer--hover:not(.layer--disabled) {
+        
+        @include hover {
+          background-color: mix(black, nth($i, 2), 20%);
+        }
+      }
+    }
+  }
+}
+
+@mixin stroke($colors...) {
+  @each $i in $colors {
+    .stroke--#{nth($i, 1)} {
+      border: 1px solid nth($i, 2);
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.layer {
+  box-sizing: border-box;
+}
+
+// —————————————————————————————————————————————————————————————————
+// fill
+// —————————————————————————————————————————————————————————————————
+
+@include fill(
+// class        $background   $hover          $text
+  "black"       $black        $grey-60        $text,
+  "white"       $white        $paper          $text-contrast,
+  "background"  $background   $paper          $text,
+  "paper"       $paper        $grey-80        $text,
+  "grey-90"     $grey-90      $grey-50        $text,
+  "grey-80"     $grey-80      $grey-50        $text,
+  "grey-70"     $grey-70      $grey-50        $text,
+  "grey-60"     $grey-60      $grey-50        $text,
+  "grey-50"     $grey-50      $grey-50        $text-contrast,
+  "grey-40"     $grey-40      $grey-50        $text-contrast,
+  "grey-30"     $grey-30      $grey-50        $text-contrast,
+  "grey-20"     $grey-20      $grey-50        $text-contrast,
+  "grey-10"     $grey-10      $grey-50        $text-contrast,
+  "grey-5"      $grey-5       $grey-50        $text-contrast,
+  "primary"     $primary      $primary-dark   $primary-text-contrast,
+  "secondary"   $secondary    $secondary-dark $secondary-text-contrast,
+  "highlight"   $highlight    $highlight-dark $highlight-text-contrast,
+  "success"     $success      $success-dark   $success-text-contrast,
+  "info"        $info         $info-dark      $info-text-contrast,
+  "warning"     $warning      $warning-dark   $warning-text-contrast,
+  "error"       $error        $error-dark     $error-text-contrast
+);
+
+// —————————————————————————————————————————————————————————————————
+// stroke
+// —————————————————————————————————————————————————————————————————
+
+@include stroke(
+// classe       border  
+  "black"       $black,
+  "white"       $white,
+  "background"  $background,
+  "paper"       $paper,
+  "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,
+  "primary"     $primary,
+  "secondary"   $secondary,
+  "highlight"   $highlight,
+  "success"     $success,
+  "info"        $info,
+  "warning"     $warning,
+  "error"       $error
+);
+
+// —————————————————————————————————————————————————————————————————
+// wrapper
+// —————————————————————————————————————————————————————————————————
+
+.layer--fullWidth {
+  width: 100%;
+}

package/dist/styles/mixins/text.scss

@@ -0,0 +1,150 @@
+// —————————————————————————————————————————————————————————————————
+// reset
+// mixins
+// elements
+// variant
+// align
+// weight
+// transform
+// misc
+// color
+// gutter
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// reset
+// —————————————————————————————————————————————————————————————————
+
+html, body,
+h1, h2, h3, h4, h5, h6, p,
+input, select, textarea {
+  font-family: $font;
+}
+
+html, body,
+input, select, textarea {
+  font-size: $spacing*2;
+  font-weight: $font-regular;
+  line-height: 1.5;
+}
+
+h1, h2, h3, h4, h5, h6, p,
+input, select, textarea {
+  padding: 0;
+  margin: 0;
+  color: inherit;
+}  
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin font-size($fontSize: 1, $fontWeight: 500, $lineHeight: 1.5) {
+  font-size: $fontSize * $spacing*2;
+  font-weight: $fontWeight;
+  letter-spacing: calc(#{$fontSize * $spacing*2} * 0.01);
+  line-height: $lineHeight;
+
+  & + & {
+    margin-top: 0.75em;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.paragraph .text + .text {
+  margin-top: 0.75em;
+}
+
+// —————————————————————————————————————————————————————————————————
+// variant
+// —————————————————————————————————————————————————————————————————
+
+.h1, %h1 { @include font-size(3.5, bold, 1.25); }
+.h2, %h2 { @include font-size(2.5, bold, 1.25); }
+.h3, %h3 { @include font-size(2, bold, 1.25); }
+.h4, %h4 { @include font-size(1.75, bold, 1.25); }
+.h5, %h5 { @include font-size(1.5, bold, 1.25); }
+.h6, %h6 { @include font-size(1.25, bold, 1.25); }
+
+.subtitle, %subtitle { @include font-size(1.125); letter-spacing: 0; }
+.body, %body { @include font-size(); letter-spacing: 0; }
+.caption, %caption { @include font-size(0.875); letter-spacing: 0; }
+.overline, %overline { @include font-size(0.75); letter-spacing: 0; }
+
+// —————————————————————————————————————————————————————————————————
+// align
+// —————————————————————————————————————————————————————————————————
+
+.text--left { text-align: left; }
+.text--center { text-align: center; }
+.text--right { text-align: right; }
+.text--justify { text-align: justify; }
+
+// —————————————————————————————————————————————————————————————————
+// weight
+// —————————————————————————————————————————————————————————————————
+
+.text--light { font-weight: 300; }
+.text--regular { font-weight: 500; }
+.text--bold { font-weight: 700; }
+
+// —————————————————————————————————————————————————————————————————
+// transform
+// —————————————————————————————————————————————————————————————————
+
+.text--none { text-transform: none; }
+.text--capitalize { text-transform: capitalize; }
+.text--uppercase { text-transform: uppercase; }
+.text--lowercase { text-transform: lowercase; }
+.text--initial { text-transform: initial; }
+.text--inherit { text-transform: inherit; }
+
+// —————————————————————————————————————————————————————————————————
+// misc
+// —————————————————————————————————————————————————————————————————
+
+.text--underline { text-decoration: underline; }
+.text--italic { font-style: italic; }
+.text--code {
+  font-family: "Roboto Mono", Courier, monospace;
+  font-weight: $font-regular;
+  background-color: $overlay;
+  border-radius: 0.25em;
+  padding-right: 0.3em;
+  padding-left: 0.3em;
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+.text {
+
+  &--default { color: $text; }
+  &--alt { color: $text-alt; }
+  &--disabled { color: $text-disabled; }
+  
+  &--contrast { color: $text-contrast; }
+  &--contrast-alt { color: $text-contrast-alt; }
+  &--contrast-disabled { color: $text-contrast-disabled; }
+
+  &--primary { color: $primary; }
+  &--secondary { color: $secondary; }
+  &--highlight { color: $highlight; }
+
+  &--success { color: $success; }
+  &--info { color: $info; }
+  &--warning { color: $warning; }
+  &--error { color: $error; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// gutter
+// —————————————————————————————————————————————————————————————————
+
+.text--gutter {
+  margin-bottom: 0.75em;
+}