pallote-css 0.3.9 → 0.3.11

package/dist/styles/components/_card.scss

@@ -1,265 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// size
-// direction
-// align
-// transparent
-// hasShadow
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.card {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  overflow: hidden; // hide corners when CardMedia has fullWidth prop set to true
-  border: $border;
-
-  &:not(.card--transparent) {
-    background-color: $background-paper;
-  }
-
-  &__media {
-    flex-basis: 0;
-    
-    &Inner {
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-      width: 100%;
-      height: 100%;
-      background-color: $overlay;
-      overflow: hidden;
-      padding-bottom: 50%;
-      
-      .card--transparent & {
-        background-color: $overlay-contrast;
-      }
-    }
-  }
-
-  &__label,
-  &__title {
-    @extend %text-bold;
-  }
-
-  &__title {
-    line-height: 1.25;
-  }
-  
-  &__subtitle {
-    @extend %text-regular;
-  }
-  
-  &__content {
-    display: inline-flex;
-    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;
-    }
-
-    &--portrait {
-      flex-direction: column;
-
-      >*:not(:last-child) {
-        margin-bottom: $spacing-md;
-      }
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-@mixin size($value, $size) {
-
-  &:not(.card--transparent) {
-    border-radius: $size;
-  } 
-  
-  &.card--hasShadow {
-    box-shadow: 0 0 $size $size*0.25 rgba($main ,0.3);
-  }
-
-  > .card__media,
-  > .card__header,
-  > .card__content,
-  > .card__actions {
-    padding: $size;
-
-    &:not(:first-child) {
-      padding-top: 0;
-    }
-  }
-
-  > .card__actions {
-    margin-top: auto;
-  }
-
-  &.card--transparent {
-
-    > .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 {
-
-    &__label {
-      @if $value == xs { @extend %overline; }
-      @else if $value == sm { @extend %overline; }
-      @else if $value == md { @extend %overline; }
-      @else if $value == lg { @extend %caption; }
-      @else if $value == xl { @extend %body; }
-    }
-
-    &__title {
-      @if $value == xs { @extend %body; }
-      @else if $value == sm { @extend %subtitle; }
-      @else if $value == md { @extend %h6; }
-      @else if $value == lg { @extend %h5; }
-      @else if $value == xl { @extend %h4; }
-    }
-
-    &__subtitle {
-      @if $value == xs { @extend %caption; }
-      @else if $value == sm { @extend %body; }
-      @else if $value == md { @extend %subtitle; }
-      @else if $value == lg { @extend %h6; }
-      @else if $value == xl { @extend %h5; }
-      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--landscape {
-
-    > .card__media,
-    > .card__header,
-    > .card__content,
-    > .card__actions {
-      padding-top: $size;
-
-      &:not(:first-child) {
-        padding-left: 0;
-      }
-    }
-
-    > .card__actions {
-      margin-left: auto;
-      flex-direction: column;
-      justify-content: flex-start;
-    }
-
-    &.card--transparent {
-
-      > .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;
-    }
-  }
-}
-
-.card {
-  @include size(md, $spacing-md+$spacing-sm);
-  &--xs.card { @include size(xs, $spacing-sm+$spacing-xs); }
-  &--sm.card { @include size(sm, $spacing-md); }
-  &--lg.card { @include size(lg, $spacing-lg); }
-  &--xl.card { @include size(xl, $spacing-lg+$spacing-sm); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-// most of the direction styling is handled by the size mixin
-
-.card--landscape {
-  flex-direction: row;
-}
-
-// —————————————————————————————————————————————————————————————————
-// align
-// —————————————————————————————————————————————————————————————————
-
-.card {
-
-  &--center { text-align: center; }
-  &--right { text-align: right; }
-}
-// —————————————————————————————————————————————————————————————————
-// transparent
-// —————————————————————————————————————————————————————————————————
-
-// the transparent styling is handled by the size mixin
-
-// —————————————————————————————————————————————————————————————————
-// hasShadow
-// —————————————————————————————————————————————————————————————————
-
-// the shadow styling is handled by the size mixin

package/dist/styles/components/_divider.scss

@@ -1,50 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// direction
-// size
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.divider {
-  display: inline-block;
-  background-color: $border-color;
-  height: 1px;
-  width: 100%;
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.divider {
-
-  &-portrait {
-    height: 100%;
-    width: 1px;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-@mixin size($size) {
-  margin-top: $size;
-  margin-bottom: $size;
-
-  &.divider-portrait {
-    margin-top: 0;
-    margin-right: $size;
-    margin-bottom: 0;
-    margin-left: $size;
-  }
-}
-
-.divider {
-  @include size(1rem);
-  &-sm { @include size(.5rem); }
-  &-lg { @include size(2rem); }
-}

package/dist/styles/components/_form.scss

@@ -1,55 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// elements
-// dense
-// card
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.form {
-	width: 100%;
-
-	&_title,
-	&_content,
-	&_actions {
-
-		&:not(:last-child) {
-			margin-bottom: 1.5rem;
-		}
-	}
-
-	&_title {
-		@extend %subtitle;
-		font-weight: $font-bold;
-	}
-}
-
-// —————————————————————————————————————————————————————————————————
-// dense
-// —————————————————————————————————————————————————————————————————
-
-.form-dense {
-
-	.form {
-
-		&_title,
-		&_content,
-		&_actions {
-			
-			&:not(:last-child) {
-				margin-bottom: 1rem;
-			}
-		}
-	}
-
-  .input:not(:last-child) {
-    margin-bottom: .5rem;
-  }
-
-	&.form-card {
-		padding: 1rem;
-		border-radius: 1rem;
-	}
-}

package/dist/styles/components/_grid.scss

@@ -1,187 +0,0 @@
-// —————————————————————————————————————————————————————————————————
-// variables
-// elements
-// wrap
-// direction
-// justifyContent
-// alignItems
-// alignSelf
-// flexGrow
-// spacing
-// width
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// variables
-// —————————————————————————————————————————————————————————————————
-
-$col:	calc(100% / 12);
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.grid {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  flex-wrap: wrap;
-  
-  &__item:not(.grid) {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    float: left;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// wrap
-// —————————————————————————————————————————————————————————————————
-
-.grid {
-
-  // have children wrap automatically
-  &--wrap {
-    justify-content: center;
-
-    > .grid__item {
-      flex: 1 0 0;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.grid--column { flex-direction: column; }
-.grid--columnReverse { flex-direction: column-reverse; }
-.grid--row { flex-direction: row; flex-wrap: wrap; }
-.grid--rowReverse { flex-direction: row-reverse; flex-wrap: wrap; }
-
-// —————————————————————————————————————————————————————————————————
-// justifyContent
-// —————————————————————————————————————————————————————————————————
-
-.grid--jc-center { justify-content: center;}
-.grid--jc-end { justify-content: flex-end;}
-.grid--jc-start { justify-content: flex-start;}
-.grid--jc-spaceAround { justify-content: space-around;}
-.grid--jc-spaceBetween { justify-content: space-between;}
-.grid--jc-spaceEvenly { justify-content: space-evenly;}
-
-// —————————————————————————————————————————————————————————————————
-// alignItems
-// —————————————————————————————————————————————————————————————————
-
-.grid--ai-stretch { align-items: stretch; }
-.grid--ai-center { align-items: center; }
-.grid--ai-end { align-items: flex-end; }
-.grid--ai-start { align-items: flex-start; }
-.grid--ai-baseline { align-items: baseline; }
-
-// —————————————————————————————————————————————————————————————————
-// alignSelf
-// —————————————————————————————————————————————————————————————————
-
-.grid--as-stretch { align-self: stretch; }
-.grid--as-center { align-self: center; }
-.grid--as-end { align-self: flex-end; }
-.grid--as-start { align-self: flex-start; }
-.grid--as-baseline { align-self: baseline; }
-
-
-// —————————————————————————————————————————————————————————————————
-// flexGrow
-// —————————————————————————————————————————————————————————————————
-
-.grid--fg {
-
-  &-0 { flex-grow: 0; }
-  &-1 { flex-grow: 1; }
-  &-auto { flex-grow: auto; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// spacing
-// —————————————————————————————————————————————————————————————————
-
-@for $spacingWidth from 1 through 12 {
-
-  .grid--spacing#{$spacingWidth} {
-    margin: -($spacingWidth * 0.5rem)*0.5;
-    width: calc(100% + #{$spacingWidth * 0.5rem});
-
-    > .grid__item {
-      padding: ($spacingWidth * 0.5rem)*0.5;
-    }
-
-    &.grid__item {
-      width: calc(100% + #{$spacingWidth * 0.5rem});
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// width
-// —————————————————————————————————————————————————————————————————
-
-@for $colWidth from 1 through 12 {
-
-  .grid--#{$colWidth} {
-    width: $colWidth*$col;
-
-    &.grid {
-      width: $colWidth*$col;
-    }
-
-    @for $spacingWidth from 1 through 12 {
-
-      &.grid--spacing#{$spacingWidth} {
-        width: calc(#{$colWidth*$col} + #{$spacingWidth * 0.5rem});
-      }
-    }
-  }
-}
-
-@mixin break-width($breakpoint) {
-
-  @include responsive(up, $breakpoint) {
-
-    @for $colWidth from 1 through 12 {
-
-      &#{$colWidth} {
-        width: $colWidth*$col;
-
-        &.grid {
-          width: $colWidth*$col;
-        }
-
-        @for $spacingWidth from 1 through 12 {
-
-          &.grid--spacing#{$spacingWidth} {
-            width: calc(#{$colWidth*$col} + #{$spacingWidth * 0.5rem});
-          }
-        }
-      }
-    }
-  }
-}
-
-[class*="grid--xs"],
-[class*="grid--sm"],
-[class*="grid--md"],
-[class*="grid--lg"],
-[class*="grid--xl"] {
-  width: 100%;
-}
-
-.grid {
-
-  &--xs { @include break-width(mobile-sm); }
-  &--sm { @include break-width(mobile); }
-  &--md { @include break-width(tablet); }
-  &--lg { @include break-width(laptop); }
-  &--xl { @include break-width(desktop); }
-}