pallote-react 0.2.25

package/dist/styles/components/nav-item.scss

@@ -0,0 +1,127 @@
+// —————————————————————————————————————————————————————————————————
+// variables
+// mixins
+// elements
+// size
+// active
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// variables
+// —————————————————————————————————————————————————————————————————
+
+$padding: $spacing*1.5;
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin sizeItem($proportion, $size) {
+
+  .navItem {
+
+    &__trigger {
+      padding: $size*0.75 $size !important;
+      border-radius: calc($size*2/3);
+
+      @if $proportion == lg { font-size: 1rem; }
+      @else { font-size: 0.875rem; }
+    }
+    
+    &__icon {
+
+      @if $proportion == lg { width: 1rem; height: 1rem; }
+      @else { width: 0.875rem; height: 0.875rem; }
+      
+      &:first-child { margin-right: calc($size*2/3); }
+      &:last-child { margin-left: calc($size*2/3); }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.navItem {
+  cursor: pointer;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  font-weight: $font-bold;
+  position: relative;
+  will-change: background-color, color;
+  display: inline-flex;
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    padding: $spacing $padding;
+    border-radius: $border-radius-md;
+
+    @include hover {
+      background-color: $hover;
+    }
+  }
+  
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__dropdown {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    background-color: $paper;
+    border-radius: $border-radius-lg;
+    position: absolute;
+    top: $spacing*5;
+    left: -$spacing*2;
+    width: $spacing*25;
+    opacity: 0;
+    visibility: hidden;
+    box-shadow: $box-shadow-md;
+    max-width: $spacing*20;
+
+    &--active {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+.navItem {
+
+  &--sm { @include sizeItem(sm, $spacing); }
+  &--md { @include sizeItem(md, $spacing*1.5); }
+  &--lg { @include sizeItem(lg, $spacing*2); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.navItem--active .navItem__trigger {
+  background-color: $paper;
+  color: $primary;
+}
+
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.navItem--disabled .navItem__trigger {
+  opacity: 0.4;
+  cursor: not-allowed;
+
+  @include hover {
+    background-color: initial;
+  }
+}

package/dist/styles/components/navbar.scss

@@ -0,0 +1,41 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.navBar {
+  position: fixed;
+  background-color: $paper;
+  height: $navbar-height;
+  top: 0;
+  z-index: 10;
+
+  &.section {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .section__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__logo {
+    margin-right: $spacing*2;
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-grow: 1;
+    
+    @include responsive(down, laptop) {
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
+    }
+  }
+}

package/dist/styles/components/page.scss

@@ -0,0 +1,48 @@
+// —————————————————————————————————————————————————————————————————
+// reset
+// elements
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// reset
+// —————————————————————————————————————————————————————————————————
+
+html, body {
+  background-color: $background;
+  color: $text;
+  font-family: $font;
+}
+
+#root {
+  color: $text;
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  width: 100vw;
+  
+  &__header.section,
+  &__header.section.section--fill {
+    padding-top: $section-spacing*1.5;
+    padding-bottom: $section-spacing*1.5;
+  }
+
+  &__label + .page__title {
+    margin-top: 0.25em;
+  }
+
+  &__title + .page__subtitle {
+    margin-top: 1.5em;
+  }
+
+  &__subtitle {
+    max-width: calc($page-max-width*0.5);
+  }
+}

package/dist/styles/components/radio.scss

@@ -0,0 +1,58 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.radio {
+  display: flex;
+  align-items: center;
+
+  &__input {
+    position: absolute;
+    height: 0;
+    width: 0;
+    opacity: 0;
+    cursor: pointer;
+    
+    &:checked + .radio__label:before {
+      border-color: $primary;
+      border-width: $spacing*0.75;
+    }
+  }
+
+  &__label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    
+    &:before {
+      content: "";
+      box-sizing: border-box;
+      display: inline-block;
+      width: $spacing*2;
+      height: $spacing*2;
+      left: 0;
+      top: 0;
+      margin-right: $spacing;
+      border-radius: $spacing*2;
+      border: $spacing*0.25 solid $grey-20;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.radio--disabled {
+  opacity: 0.4;
+
+  * { 
+    cursor: not-allowed;
+  }
+}

package/dist/styles/components/section.scss

@@ -0,0 +1,169 @@
+@import '../mixins/layer.scss';
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// elements
+// align
+// fullWidth
+// subheader
+// margin
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin fill($title-color: $primary) {
+
+  & + & {
+    padding-top: 0;
+  }
+
+  .section__title {
+    color: $title-color;
+  }
+}
+
+@mixin align($align, $flex-align) {
+  text-align: $align;
+  align-items: $flex-align;
+  
+  .section__header {
+    align-items: $flex-align;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding: $section-spacing calc(100% / 12);
+
+  & + & {
+    padding-top: 0;
+  }
+
+  &.section--fill {
+    padding-top: $section-spacing;
+    padding-bottom: $section-spacing;
+
+    + .section {
+      padding-top: $section-spacing;
+    }
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 1280px;
+    box-sizing: content-box;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    
+    & + &,
+    & + .section__content {
+      margin-top: $section-spacing-content;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  
+    & + .section__header {
+      margin-top: $section-spacing-content;
+    }
+  }
+
+  &__label {
+
+    & + .section__title {
+      margin-top: $spacing*2;
+    }
+  }
+
+  &__title {
+
+    +.section__subtitle {
+      margin-top: $spacing*3;
+    }
+  }
+
+  &__subtitle {
+    max-width: $page-max-width*0.5;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// fill
+// —————————————————————————————————————————————————————————————————
+
+// fill color is partially handled with the Layer component
+
+.section--fill.fill {
+
+  &--black { @include fill(); }
+  &--white { @include fill($text-contrast); }
+  &--background { @include fill(); }
+  &--paper { @include fill(); }
+  &--overlay { @include fill(); }
+  &--primary { @include fill($primary-text-contrast); }
+  &--secondary { @include fill($secondary-text-contrast); }
+  &--highlight { @include fill($highlight-text-contrast); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// align
+// —————————————————————————————————————————————————————————————————
+
+.section__container {
+
+  &.section--left { @include align(left, flex-start); }
+  &.section--center { @include align(center, center); }
+  &.section--right { @include align(right, flex-end); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// fullWidth
+// —————————————————————————————————————————————————————————————————
+
+.section--fullWidth {
+
+  &.section {
+    padding-right: $spacing*4;
+    padding-left: $spacing*4;
+  }
+
+  &.section__container {
+    max-width: unset;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// subheader
+// —————————————————————————————————————————————————————————————————
+
+.section__header--subheader {
+
+  &.section__header--margin {
+    margin-bottom: $spacing*4;
+  }
+
+  .section {
+
+    &__label + .section__title { margin-top: $spacing*1.5; }
+    &__title + .section__subtitle { margin-top: $spacing*2; }
+  }
+}

package/dist/styles/components/snippet.scss

@@ -0,0 +1,79 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// isDefault
+// dense
+// isTransparent
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.snippet {
+  font-family: "Roboto Mono", Courier, monospace;
+  word-wrap: break-word;
+  width: 100%;
+  position: relative;
+  border-radius: $spacing;
+  font-size: $spacing*1.5;
+  margin: 0;
+  padding: $spacing $spacing*1.25 !important;
+  background-color: $grey-90 !important;
+  
+  * {
+    font-weight: $font-regular !important;
+  }
+  
+  & + & {
+    margin-top: $spacing*0.5;
+  }
+
+  &__wrapper {
+    width: 100%;
+    position: relative;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// isDefault
+// —————————————————————————————————————————————————————————————————
+
+.snippet__default,
+.snippet__default.text {
+  position: absolute;
+  top: $spacing*0.75;
+  right: $spacing*0.75;
+  background-color: $overlay;
+  padding: $spacing*0.25 $spacing*0.75;
+  border-radius: $spacing*0.5;
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.snippet--dense {
+  padding: $spacing*0.5 $spacing !important;
+
+  ~ .snippet__default,
+  ~ .snippet__default.text {
+    top: $spacing*0.5;
+    right: $spacing*0.5;
+    padding: 0 $spacing*0.5;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// isTransparent
+// —————————————————————————————————————————————————————————————————
+
+.snippet.snippet--transparent {
+  background-color: transparent !important;
+  padding: 0 !important;
+
+  ~ .snippet__default,
+  ~ .snippet__default.text {
+    top: 0;
+    right: 0;
+  }
+}

package/dist/styles/components/stepper.scss

@@ -0,0 +1,78 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// active & completed
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.stepper {
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: $spacing*3;
+  }
+
+  &__step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: $spacing*4;
+
+    &:not(:first-child) {
+      margin-left: $spacing*10;
+
+      .stepper__icon {
+
+        &:before {
+          content: "";
+          position: absolute;
+          height: 2px;
+          background-color: $paper;
+          width: $spacing*8;
+          right: $spacing*5;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $paper;
+    width: $spacing*4;
+    height: $spacing*4;
+    border-radius: 50%;
+  }
+
+  &__label {
+    margin-top: $spacing;
+    width: 300%;
+    text-align: center;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// active & completed
+// —————————————————————————————————————————————————————————————————
+
+.stepper__icon--active {
+  background-color: $primary;
+  color: $primary-text-contrast;
+}
+
+.stepper__step:not(:first-child) {
+
+  .stepper__icon--active,
+  .stepper__icon--completed {
+
+    &:before {
+      background-color: $primary;
+    }
+  }
+}

package/dist/styles/components/switch.scss

@@ -0,0 +1,71 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.switch {
+  display: flex;
+  align-items: center;
+  height: $spacing*3;
+
+  &__input {
+    position: absolute;
+    height: 0;
+    width: 0;
+    opacity: 0;
+    
+    &:checked + .switch__switch {
+      background-color: $primary-light;
+      
+      .switch__toggle {
+        @include calc(left, '100% -'($spacing*2));
+        background-color: $primary;
+      }
+    }
+  }
+
+  &__label {
+    
+    &:first-child { margin-right: $spacing*1.5; }
+    &:last-child { margin-left: $spacing*1.5; }
+  }
+
+  &__switch {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    width: $spacing*4;
+    height: $spacing*2;
+    background: $grey-10;
+    border-radius: $spacing*3;
+    position: relative;
+    
+    &:nth-child(2) { margin-left: $spacing*0.25; }
+  }
+
+  &__toggle {
+    position: absolute;
+    left: -$spacing*0.25;
+    width: $spacing*2.5;
+    height: $spacing*2.5;
+    border-radius: $spacing*2.5;
+    background: $grey-20;
+  }
+}
+  
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.switch--disabled {
+  opacity: 0.4;
+
+  * { 
+    cursor: not-allowed;
+  }
+}