pallote-react 0.2.25 → 0.2.26

package/dist/styles/components/button.scss

@@ -1,210 +0,0 @@
-@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;
-  }
-}

package/dist/styles/components/buttons.scss

@@ -1,56 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// mixins
-// elements
-// direction
-// spacing
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// mixins
-// —————————————————————————————————————————————————————————————————
-
-@mixin spacing($proportion, $size) {
-  margin: -$size;
-
-  @if $proportion == sm {
-    @include responsive(down, tablet) { margin: -$spacing*0.5; }
-  }
-  @include responsive(down, mobile) { margin: -$spacing; }
-
-  > * {
-    margin: $size;
-
-    @if $proportion == sm {
-      @include responsive(down, tablet) { margin: $spacing*0.5; }
-    }
-    @include responsive(down, mobile) { margin: $spacing; }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.buttons {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.buttons--portrait {
-  flex-direction: column;
-}
-
-// —————————————————————————————————————————————————————————————————
-// spacing
-// —————————————————————————————————————————————————————————————————
-
-.buttons {
-
-  &--sm { @include spacing(sm, $spacing*0.25); }
-  &--md { @include spacing(md, $spacing*0.5); }
-  &--lg { @include spacing(lg, $spacing); }
-}

package/dist/styles/components/card.scss

@@ -1,243 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// mixins
-// elements
-// size
-// direction
-// noPadding
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// mixins
-// —————————————————————————————————————————————————————————————————
-
-// for card media
-@mixin border-radius($int) {
-  
-  .card__mediaInner {
-    border-radius: $int !important;
-  }
-}
-
-@mixin size($size) {
-  border-radius: $size;
-  
-  &.card--shadow {
-    box-shadow: 0 0 $size $size*0.25 rgba($white ,0.25);
-  }
-
-  > .card__media,
-  > .card__header,
-  > .card__content,
-  > .card__actions {
-    padding: $size;
-  }
-
-  .card {
-
-    &__subtitle { margin-top: calc($size / 3); }
-    &__mediaInner { border-radius: $size*0.25; }
-  }
-
-  > .card__media--fullWidth .card__mediaInner {
-    border-radius: 0;
-  }
-
-  &.card--transparent > .card__media--fullWidth .card__mediaInner {
-    border-radius: $size*0.5;
-  }
-
-  &.card--portrait {
-
-    > .card__media,
-    > .card__header,
-    > .card__content,
-    > .card__actions {
-        
-      &:not(:first-child) {
-        padding-top: 0;
-      }
-    }
-
-    > .card__actions {
-      margin-top: auto;
-    }
-
-    &.card--noPadding {
-
-      > .card__media,
-      > .card__header,
-      > .card__content,
-      > .card__actions {
-        padding: 0;
-          
-        &:not(:first-child) {
-          padding-top: $size;
-        }
-      }
-
-      >.card__media .card__mediaInner {
-        border-radius: calc($size/2);
-      }
-    }
-
-    .card__media--fullWidth {
-      padding-right: 0;
-      padding-top: 0;
-      padding-left: 0;
-    }
-  }
-
-  &.card--landscape {
-
-    > .card__media,
-    > .card__header,
-    > .card__content,
-    > .card__actions {
-
-      &:not(:first-child) {
-        padding-left: 0;
-      }
-    }
-
-    > .card__actions {
-      margin-left: auto;
-      flex-direction: column;
-      justify-content: flex-start;
-    }
-
-    &.card--noPadding {
-
-      > .card__media,
-      > .card__header,
-      > .card__content,
-      > .card__actions {
-        padding: 0;
-        
-        &:not(:first-child) {
-          padding-left: $size;
-        }
-      }
-
-      >.card__media .card__mediaInner {
-        border-radius: calc($size/2);
-      }
-    }
-
-    .card__media--fullWidth {
-      padding-top: 0;
-      padding-bottom: 0;
-      padding-left: 0;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.card {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  overflow: hidden; // hide corners when CardMedia has fullWidth prop set to true
-
-  &__media {
-    flex-basis: 0;
-    
-    &Inner {
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-      width: 100%;
-      height: 100%;
-      background-color: $backdrop;
-      overflow: hidden;
-    }
-    
-    &--borderRadius {
-      
-      &--xs { @include border-radius($spacing*0.5); }
-      &--sm { @include border-radius($spacing*0.75); }
-      &--md { @include border-radius($spacing*1); }
-      &--lg { @include border-radius($spacing*1.5); }
-      &--xl { @include border-radius($spacing*2); }
-    }
-  }
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__title {
-    line-height: 1.25;
-    display: inline-block;
-  }
-  
-  &__content {
-    display: inline-flex;
-    flex-direction: column;
-    flex-direction: column;
-    align-items: flex-start;
-
-    &--fullWidth {
-
-      .card > &.card__content {
-        padding-right: 0;
-        padding-left: 0;
-      }
-    }
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: space-between;
-
-    >*:only-child {
-      margin-left: auto;
-    }
-
-    &--fullWidth {
-      flex-direction: column;
-
-      >*:not(:last-child) {
-        margin-bottom: $spacing;
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-.card {
-
-  &--xs { @include size($spacing); }
-  &--sm { @include size($spacing*1.5); }
-  &--md { @include size($spacing*2); }
-  &--lg { @include size($spacing*3); }
-  &--xl { @include size($spacing*4); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.card--landscape {
-  flex-direction: row;
-}
-
-// —————————————————————————————————————————————————————————————————
-// noPadding
-// —————————————————————————————————————————————————————————————————
-
-.card--noPadding {
-  border-radius: 0;
-  background-color: transparent;
-
-  &.card--shadow {
-    box-shadow: none;
-  }
-}

package/dist/styles/components/checkbox.scss

@@ -1,78 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.checkbox {
-  display: flex;
-  align-items: center;
-  position: relative;
-  
-  &__input {
-    position: absolute;
-    height: 0;
-    width: 0;
-    opacity: 0;
-    cursor: pointer;
-    
-    &:checked {
-      
-      ~ .checkbox__label:before {
-        border-color: $primary;
-        border-width: $spacing;
-      }
-      
-      ~ .checkbox__icon {
-        opacity: 1;
-      }
-    }
-  }
-  
-  &__icon {
-    color: $primary-text-contrast;
-    pointer-events: none;
-    position: absolute;
-    left: $spacing*0.25;
-    height: $spacing*1.5;
-    width: $spacing*1.5;
-    opacity: 0;
-    stroke-width: 3;
-  }
-  
-  &__label {
-    position: relative;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    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*0.5;
-      border: $spacing*0.25 solid $grey-20;
-    }
-  }
-}
-  
-// —————————————————————————————————————————————————————————————————
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-.checkbox--disabled {
-  opacity: 0.4;
-
-  * { 
-    cursor: not-allowed;
-  }
-}

package/dist/styles/components/chip.scss

@@ -1,77 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// dense
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  padding: $spacing*0.5;
-  height: $spacing*4;
-  border-radius: $spacing*5;
-  
-  &__avatar {
-    border-radius: 50%;
-    height: $spacing*3;
-    width: $spacing*3;
-    background-color: $overlay;
-  }
-
-  &__content {
-    @extend %caption;
-    padding-right: $spacing;
-    padding-left: $spacing;
-    white-space: nowrap;
-  }
-
-  &__close {
-    cursor: pointer;
-    background-color: $overlay;
-    border-radius: 50%;
-    padding: $spacing*0.5;
-    
-    @include hover {
-      background-color: lighten($overlay, 50%);
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.chip--dense {
-  height: $spacing*3;
-
-  .chip {
-
-    &__avatar {
-      height: $spacing*2;
-      width: $spacing*2;
-    }
-
-    &__content {
-      @extend %overline;
-      padding-right: $spacing*0.5;
-      padding-left: $spacing*0.5;
-    }
-
-    &__close {
-      padding: $spacing*0.25;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-.chip--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/dist/styles/components/component.scss

@@ -1,17 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// variables
-// mixins
-// elements
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// variables
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// mixins
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————