pallote-react 0.2.25

package/dist/styles/components/form-field.scss

@@ -0,0 +1,262 @@
+// —————————————————————————————————————————————————————————————————
+// reset
+// variables
+// elements
+// direction
+// active
+// disabled
+// error
+// dense
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// reset
+// —————————————————————————————————————————————————————————————————
+
+// Chrome/Opera/Safari
+::-webkit-input-placeholder {
+  color: $grey-50;
+  opacity: 1;
+  font-size: 1rem;
+}
+
+// Firefox 19+
+::-moz-placeholder {
+  color: $grey-50;
+  opacity: 1;
+  font-size: 1rem;
+}
+
+// IE 10+
+:-ms-input-placeholder {
+  color: $grey-50;
+  opacity: 1;
+  font-size: 1rem;
+}
+
+// Firefox 18-
+:-moz-placeholder {
+  color: $grey-50;
+  opacity: 1;
+  font-size: 1rem;
+}
+
+// change autofilled color on Chrome
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  box-shadow: 0 0 0 1000px $overlay inset !important;
+  -webkit-box-shadow: 0 0 0 1000px $overlay inset !important;
+}
+
+fieldset {
+  border: 0;
+  padding: 0.01rem 0 0 0;
+  margin: 0;
+  min-width: 0;
+}
+
+body:not(:-moz-handler-blocked) fieldset {
+  display: table-cell;
+}
+
+legend {
+  display: table;
+  padding: 0;
+}
+
+input, button, select, textarea, button, input[type="reset"], input[type="submit"], input[type="button"] {
+	-webkit-appearance: none;
+	-moz-appearance:none;
+	appearance:none;
+	border: 0;
+  box-sizing: border-box;
+	-webkit-border-radius: 0;
+	        border-radius: 0;
+}
+
+input, textarea, select {
+	outline: 0;
+}
+
+textarea {
+  resize: vertical;
+  height: unset !important;
+}
+
+// —————————————————————————————————————————————————————————————————
+// variables
+// —————————————————————————————————————————————————————————————————
+
+$height: $spacing*4;
+$height-dense: $spacing*3.5;
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.field {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  color: $text;
+  margin: 0;
+  
+  &:not(:last-child) {
+    margin-bottom: $spacing*1.5;
+  }
+  
+  &__label {
+    margin-bottom: $spacing*0.5;
+    cursor: pointer;
+  }
+  
+  &__field {
+    position: relative;
+    height: $height;
+    display: flex;
+  }
+  
+  &__fieldInput {
+    background-color: transparent;
+    border: $border-sm $border;
+    padding: $spacing*0.5 $spacing;
+    border-radius: $spacing;
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  
+  &--textarea {
+    height: unset;
+  }
+  
+  &__icon {
+    position: absolute;
+    right: $spacing;
+    top: $spacing*0.6;
+    margin-right: 0;
+    pointer-events: none;
+    color: inherit;
+    
+    svg {
+      height: $spacing*2;
+      width: $spacing*2;
+    }
+    
+    & + .field__fieldInput {
+      padding-right: $spacing*3.5;
+    }
+  }
+  
+  &__notice {
+    margin-top: $spacing*0.5;
+  }
+}
+
+textarea.field__fieldInput {
+  white-space: initial;
+}
+
+select.field__fieldInput {
+  line-height: 1;
+  height: $height;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+@mixin direction($direction) {
+  display: flex;
+  flex-direction: $direction;
+
+  > * {
+    margin-bottom: $spacing*0.5;
+    
+    &:not(:last-child) {
+      @if $direction == row {
+        margin-right: $spacing*1.5;
+      }
+      
+      &.field__icon {
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.field--portrait { 
+  @include direction(column);
+  height: unset;
+  padding-top: $spacing*0.5;
+}
+
+.field--landscape { 
+  @include direction(row);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+// —————————————————————————————————————————————————————————————————
+// active
+// —————————————————————————————————————————————————————————————————
+
+.field--active {
+
+  .field__label {
+    color: $primary;
+  }
+
+  .field__fieldInput {
+    border-color: $primary;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.field--disabled {
+  opacity: 0.4;
+  
+  .field__label,
+  .field__fieldInput {
+    cursor: not-allowed;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// error
+// —————————————————————————————————————————————————————————————————
+
+.field--error {
+
+  .field__label {
+    color: $error;
+  }
+
+  .field__fieldInput {
+    border-color: $error;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.field--dense {
+
+  &.field__field {
+    height: $height-dense;
+    
+    select.field__fieldInput {
+      height: $height-dense;
+    }
+  }
+}

package/dist/styles/components/link.scss

@@ -0,0 +1,36 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// color
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.link {
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:not(.link--disabled) {
+
+    @include hover {
+      text-decoration: none;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+// color is handled with the Text component
+
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+.link--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/styles/components/loader.scss

@@ -0,0 +1,131 @@
+// —————————————————————————————————————————————————————————————————
+// variables
+// mixins
+// animation
+// elements
+// variant
+// color
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// variables
+// —————————————————————————————————————————————————————————————————
+
+$spacing-circle: $spacing*4;
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin color($color) {
+
+  &.loader--dots > span { background-color: $color; }
+  &.loader--circle > span:after { background-color: $color; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// animation
+// —————————————————————————————————————————————————————————————————
+
+@keyframes dots {
+  0% { transform: scale(0.25); }
+  32% { transform: scale(1.1); }
+  44% { transform: scale(1); }
+  72% { transform: scale(1); }
+  80% { transform: scale(1.1); }
+  84% { transform: scale(1); }
+  98% { transform: scale(0.25); }
+  100% { transform: scale(0.25); }
+}
+
+@keyframes rotate {
+  0% { transform: rotate(0); }
+  100% { transform: rotate(360deg); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.loader {
+  display: flex;
+
+  > span {
+    display: block;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// variant
+// —————————————————————————————————————————————————————————————————
+
+.loader {
+
+  &--dots {
+
+    > span {
+      height: $spacing;
+      width: $spacing;
+      border-radius: 50%;
+      transform-origin: center center;
+      
+      &:not(:last-child) {
+        margin-right: $spacing;
+      }
+
+      &:nth-child(1) { animation: dots 1.6s ease 0s infinite; }
+      &:nth-child(2) { animation: dots 1.6s ease 0.2s infinite; }
+      &:nth-child(3) { animation: dots 1.6s ease 0.4s infinite; }
+    }
+  }
+
+  &--circle {
+    align-items: center;
+    justify-content: center;
+    width: $spacing-circle;
+    height: $spacing-circle;
+    display: block;
+    
+    > span {
+      position: absolute;
+      flex-shrink: 0;
+      height: $spacing-circle;
+      width: 2px;
+      transform-origin: 1px $spacing-circle*0.5;
+      margin-left: $spacing-circle*0.5;
+
+      &:after {
+        content: '';
+        position: absolute;
+        height: $spacing*0.5;
+        width: $spacing*0.5;
+        border-radius: 50%;
+      }
+
+      &:nth-child(1) { transform: rotate(0deg); &:after { animation: dots 2s ease 0s infinite; } }
+      &:nth-child(2) { transform: rotate(30deg); &:after { animation: dots 2s ease 0.1s infinite; } }
+      &:nth-child(3) { transform: rotate(60deg); &:after { animation: dots 2s ease 0.2s infinite; } }
+      &:nth-child(4) { transform: rotate(90deg); &:after { animation: dots 2s ease 0.3s infinite; } }
+      &:nth-child(5) { transform: rotate(120deg); &:after { animation: dots 2s ease 0.4s infinite; } }
+      &:nth-child(6) { transform: rotate(150deg); &:after { animation: dots 2s ease 0.5s infinite; } }
+      &:nth-child(7) { transform: rotate(180deg); &:after { animation: dots 2s ease 0.6s infinite; } }
+      &:nth-child(8) { transform: rotate(210deg); &:after { animation: dots 2s ease 0.7s infinite; } }
+      &:nth-child(9) { transform: rotate(240deg); &:after { animation: dots 2s ease 0.8s infinite; } }
+      &:nth-child(10) { transform: rotate(270deg); &:after { animation: dots 2s ease 0.9s infinite; } }
+      &:nth-child(11) { transform: rotate(300deg); &:after { animation: dots 2s ease 1s infinite; } }
+      &:nth-child(12) { transform: rotate(330deg); &:after { animation: dots 2s ease 1.1s infinite; } }
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+.loader {
+
+  &--primary { @include color($primary); }
+  &--secondary { @include color($secondary); }
+  &--black { @include color($black); }
+  &--white { @include color($white); }
+}

package/dist/styles/components/modal.scss

@@ -0,0 +1,112 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// animation
+// transition
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: $spacing*2;
+  z-index: 20;
+
+  &__backdrop {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0,0,0,0.8);
+    animation-fill-mode: forwards !important;
+  }
+
+  &__modal {
+    transform-origin: center center;
+    position: relative;
+    border: 0;
+    animation-fill-mode: forwards !important;
+  }
+
+  &__close {
+    cursor: pointer;
+    position: absolute;
+    top: $spacing*3;
+    right: $spacing*3;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// animation
+// —————————————————————————————————————————————————————————————————
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes slideIn {
+  0% { transform: translateY(-200%); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes slideOut {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-200%); }
+}
+
+@keyframes zoomIn {
+  0% { transform: scale(0); }
+  100% { transform: scale(1); }
+}
+
+@keyframes zoomOut {
+  0% { transform: scale(1); }
+  100% { transform: scale(0); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// transition
+// —————————————————————————————————————————————————————————————————
+
+.modal {
+
+  &--fadeIn { animation: fadeIn 0.4s ease; }
+  &--fadeOut { animation: fadeOut 0.4s ease; }
+  
+  &--slideIn { animation: slideIn 0.4s ease, fadeIn 0.4s ease; }
+  &--slideOut { animation: slideOut 0.4s ease, fadeOut 0.4s ease; }
+  
+  &--zoomIn { animation: zoomIn 0.4s ease; }
+  &--zoomOut { animation: zoomOut 0.4s ease; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// width
+// —————————————————————————————————————————————————————————————————
+
+.modal {
+
+  &--laptop { max-width: $laptop-up; }
+  &--tablet { max-width: $tablet-up; }
+  &--mobile { max-width: $mobile-up; }
+  &--mobile-sm { max-width: $mobile-sm-up; }
+}

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

@@ -0,0 +1,72 @@
+// —————————————————————————————————————————————————————————————————
+// mixins
+// elements
+// size
+// direction
+// transparent
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin size($proportion, $size) {
+  padding: $size;
+  border-radius: $size*1.5;
+
+  &.navGroup--portrait .navItem + .navItem { margin-top: calc($size/4); }
+  &.navGroup--landscape .navItem + .navItem { margin-left: calc($size/4); }
+  &.navItem__dropdown { left: -$size; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.navGroup {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  box-shadow: $box-shadow-md;
+  background-color: $paper;
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+.navGroup {
+
+  &--sm { @include size(sm, $spacing); }
+  &--md { @include size(md, $spacing*1.5); }
+  &--lg { @include size(lg, $spacing*2); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+.navGroup {
+
+  &--portrait {
+    flex-direction: column;
+
+    .navItem__trigger {
+      width: 100%;
+    }  
+  }  
+
+  &--landscape {
+    flex-direction: row;
+  }  
+}  
+
+// —————————————————————————————————————————————————————————————————
+// transparent
+// —————————————————————————————————————————————————————————————————
+
+.navGroup--transparent {
+  padding: 0;
+  box-shadow: none;
+  background-color: transparent;
+}