pallote-react 0.2.25

package/dist/styles/components/buttons.scss

@@ -0,0 +1,56 @@
+// —————————————————————————————————————————————————————————————————
+// 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

@@ -0,0 +1,243 @@
+// —————————————————————————————————————————————————————————————————
+// 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

@@ -0,0 +1,78 @@
+// —————————————————————————————————————————————————————————————————
+// 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

@@ -0,0 +1,77 @@
+// —————————————————————————————————————————————————————————————————
+// 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

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

package/dist/styles/components/detail.scss

@@ -0,0 +1,36 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// bold
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.detail {
+  display: flex;
+  align-items: center;
+
+  & + & {
+    margin-top: $spacing*0.5;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    width: $spacing*1.5;
+    height: $spacing*1.5;
+    margin-right: $spacing*0.75;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// bold
+// —————————————————————————————————————————————————————————————————
+
+.detail--bold {
+
+  .detail__icon svg {
+    stroke-width: 3;
+  }
+}

package/dist/styles/components/divider.scss

@@ -0,0 +1,54 @@
+// —————————————————————————————————————————————————————————————————
+// mixins
+// elements
+// size
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// mixins
+// —————————————————————————————————————————————————————————————————
+
+@mixin size($size) {
+
+  &.divider {
+
+    &--landscape {
+      margin-top: $size;
+      margin-bottom: $size;
+    }
+
+    &--portrait {
+      margin-right: $size;
+      margin-left: $size;
+    }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.divider {
+  background-color: $border;
+
+  &--landscape {
+    width: 100%;
+    height: 1px;
+  }
+
+  &--portrait {
+    height: 100%;
+    width: 1px;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+.divider {
+
+  &--sm { @include size($spacing); }
+  &--md { @include size($spacing*2); }
+  &--lg { @include size($spacing*4); }
+}