pallote-css 0.0.0

package/assets/_sass/components/_button.scss

@@ -0,0 +1,257 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// kind
+// variant
+// size
+// color
+// disabled
+// animate
+// menu
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.button {
+  cursor: pointer;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius-md;
+  position: relative;
+  line-height: 0;
+  text-transform: uppercase;
+  font-weight: $font-bold;
+  padding-bottom: 0.15em;
+  white-space: nowrap;
+}
+
+// —————————————————————————————————————————————————————————————————
+// kind
+// —————————————————————————————————————————————————————————————————
+
+// This property is handled by the size mixin
+
+// —————————————————————————————————————————————————————————————————
+// variant
+// —————————————————————————————————————————————————————————————————
+
+// This property is handled by the color mixin
+
+// —————————————————————————————————————————————————————————————————
+// size
+// —————————————————————————————————————————————————————————————————
+
+@mixin size($value, $size) {
+  height: $size;
+  padding-right: $size*.33;
+  padding-left: $size*.33;
+
+  @if $value == sm { @extend %caption; }
+  @else if $value == lg { @extend %subtitle; }
+
+  svg {
+    width: calc($size/1.75);
+    height: calc($size/1.75);
+  }
+
+  &:not(.button--icon) {
+
+    svg {
+      margin-top: 0.15em;
+  
+      &:first-child {
+        margin-right: calc($size/4);
+        margin-left: calc(-1 * $size/10);
+      }
+  
+      &:last-child {
+        margin-right: calc(-1 * $size/10);
+        margin-left: calc($size/4);
+      }
+    }
+  }
+
+  &.button--icon {
+    width: $size;
+    padding: 0;
+  }
+}
+
+.button {
+
+  @include size(md, $spacing-lg);
+  &--sm { @include size(sm, $spacing-md*1.5); }
+  &--lg { @include size(lg, $spacing-lg*1.25); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin color($prefix, $colors...) {
+
+  @each $i in $colors {
+    .#{$prefix}#{nth($i, 1)} {
+      background-color: nth($i, 2);
+      color: nth($i, 3);
+
+      @include hover {
+
+        &:not(.button--disabled) {
+          background-color: mix(black, nth($i, 2), 20%);
+        }
+      }
+
+      svg { fill: nth($i, 3); }
+      
+      &.button--stroke {
+        background-color: transparent;
+        border: 1px solid nth($i, 2);
+        color: $text;
+
+        @include hover {
+
+          &:not(.button--disabled) {
+            background-color: $hover;
+          }
+        }
+
+        svg { fill: $text; }
+      }
+      
+      &.button--transparent {
+        background-color: transparent;
+        color: nth($i, 2);
+
+        @include hover { background-color: $hover; }
+        svg { fill: nth($i, 2); }
+      }
+    }
+  }
+}
+
+@include color('button',
+  '' $primary $primary-text,
+  '--secondary' $secondary $secondary-text,
+  '--highlight' $highlight $highlight-text,
+  '--default' $background-default $primary,
+  '--grey' $text-disabled $text,
+  '--success' $success $success-contrast,
+  '--info' $info $info-contrast,
+  '--warning' $warning $warning-contrast,
+  '--error' $error $error-contrast,
+  '--default' $text $text-contrast,
+  '--contrast' $background-default $text
+);
+
+// —————————————————————————————————————————————————————————————————
+// disabled
+// —————————————————————————————————————————————————————————————————
+
+button {
+
+  &.button--disabled,
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+    outline: none;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// menu
+// —————————————————————————————————————————————————————————————————
+
+// button apparition
+@include keyframes(button-menu-opacity) {
+	0% 		{ opacity: 0; }
+	50% 	{ opacity: 0; }
+	100% 	{ opacity: 100%; }
+}
+
+// lines > close
+@include keyframes(button-menu-open-before) {
+	0% 		{ transform: translateY($spacing-xs*1.5); }
+	50% 	{ transform: translateY(0); 
+			  	transform: rotate(0); }
+	100% 	{ transform: rotate(45deg); }
+}
+@include keyframes(button-menu-open-after) {
+	0% 		{ transform: translateY(-$spacing-xs*1.5); }
+	50% 	{ transform: translateY(0); 
+			  	transform: rotate(0); }
+	100% 	{ transform: rotate(-45deg); }
+}
+
+// close > lines
+@include keyframes(button-menu-close-before) {
+	0% 		{ transform: rotate(45deg); }
+	50% 	{ transform: rotate(0); 
+			  	transform: translateY(0); }
+	100% 	{ transform: translateY($spacing-xs*1.5); }
+}
+@include keyframes(button-menu-close-after) {
+	0% 		{ transform: rotate(-45deg); }
+	50% 	{ transform: rotate(0); 
+			  	transform: translateY(0); }
+	100% 	{ transform: translateY(-$spacing-xs*1.5); }
+}
+
+.button--menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: button-menu-opacity $transition-lg;
+  cursor: pointer;
+  position: relative;
+  overflow: visible;
+  width: $spacing-md;
+  height: $spacing-md;
+  background-color: transparent !important;
+  border: 0;
+  padding: 0;
+
+  &:before,
+  &:after,
+  .button__inner {
+    background-color: $text;
+  }
+
+  &:before,
+  &:after {
+    @include pseudo-element('', auto, auto, auto, auto, $spacing-md, 2px);
+    @include transition($transition-md, transform);
+    border-radius: 0.15rem;
+  }
+
+  &:before {
+    transform: translateY($spacing-xs*1.5);
+    animation: button-menu-close-before $transition-lg;
+  }
+
+  &:after {
+    transform: translateY(-$spacing-xs*1.5);
+    animation: button-menu-close-after $transition-lg;
+  }
+
+  .button__inner {
+    @include transition($transition-md, opacity);
+    border-radius: 0.15rem;
+    width: $spacing-md;
+    height: 2px;
+    position: absolute;
+  }
+
+  &.button--menu--open {
+
+    &:before { animation: button-menu-open-before $transition-lg forwards; }
+    &:after { animation: button-menu-open-after $transition-lg forwards; }
+
+    .button__inner {
+      opacity: 0;
+    }
+  }
+}

package/assets/_sass/components/_buttons.scss

@@ -0,0 +1,63 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// direction
+// fullWidth
+// wide
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap; // set on multiple lines if wider than parent width
+  margin: -$spacing-xs;
+
+  .button { margin: $spacing-xs; }
+  .buttons { padding: $spacing-xs; }
+  
+  // larger spacing on small and touch devices
+  @include responsive(down, mobile) {
+    margin: -$spacing-sm;
+
+    .button { margin: $spacing-sm; }
+  }
+
+  @include responsive-touch {
+    margin: -$spacing-sm;
+
+    .button { margin: $spacing-sm; }
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+.buttons {
+
+  &--portrait {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// fullWidth
+// —————————————————————————————————————————————————————————————————
+
+.buttons--fullWidth {
+
+  .button {
+    width: 100%;
+  }
+}
+
+// —————————————————————————————————————————————————————————————————
+// wide
+// —————————————————————————————————————————————————————————————————
+
+.buttons--wide {
+  justify-content: space-between;
+}

package/assets/_sass/components/_card.scss

@@ -0,0 +1,252 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// size
+// direction
+// alignement
+// 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
+
+  &: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: $backdrop;
+      overflow: hidden;
+      padding-bottom: 50%;
+      
+      .card--transparent & {
+        background-color: $backdrop-contrast;
+      }
+    }
+  }
+
+  &__title {
+    @extend %h6;
+    @extend %text--bold;
+    line-height: 1.25;
+  }
+  
+  &__subtitle {
+    @extend %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($white ,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 {
+
+    &__title {
+      @if $value == xs { @extend %body; }
+      @else if $value == sm { @extend %subtitle; }
+      @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 == 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 { @include size(xs, $spacing-sm+$spacing-xs); }
+  &--sm { @include size(sm, $spacing-md); }
+  &--lg { @include size(lg, $spacing-lg); }
+  &--xl { @include size(xl, $spacing-lg+$spacing-sm); }
+}
+
+// —————————————————————————————————————————————————————————————————
+// direction
+// —————————————————————————————————————————————————————————————————
+
+// most of the direction styling is handled by the size mixin
+
+.card--landscape {
+  flex-direction: row;
+}
+
+// —————————————————————————————————————————————————————————————————
+// alignement
+// —————————————————————————————————————————————————————————————————
+
+.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/assets/_sass/components/_form.scss

@@ -0,0 +1,68 @@
+// —————————————————————————————————————————————————————————————————
+// elements
+// dense
+// card
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+.form {
+	width: 100%;
+
+	&__title,
+	&__content,
+	&__actions {
+
+		&:not(:last-child) {
+			margin-bottom: $spacing-md;
+		}
+	}
+
+	&__title {
+		@extend %subtitle;
+		font-weight: $font-bold;
+	}
+}
+
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.form--dense {
+
+	&__title,
+	&__content,
+	&__actions {
+
+		&:not(:last-child) {
+			margin-bottom: $spacing-sm;
+		}
+	}
+
+  .input:not(:last-child) {
+    margin-bottom: $spacing-sm;
+  }
+
+	&.form--card {
+		padding: $spacing-md;
+		border-radius: $spacing-md;
+	}
+}
+
+// —————————————————————————————————————————————————————————————————
+// card
+// —————————————————————————————————————————————————————————————————
+
+.form--card {
+	padding: $spacing-lg;
+	border-radius: $spacing-lg;
+	box-shadow: $box-shadow;
+
+	@include responsive(down, mobile) {
+		padding: 0;
+		background-color: transparent;
+		box-shadow: none;
+	}
+}