pallote-css 0.4.0 → 0.6.0

package/dist/styles/components/_button.scss

@@ -1,186 +0,0 @@
-@use 'sass:color';
-@use 'sass:list';
-@use '../common/mixins';
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// kind
-// variant
-// size
-// color
-// fullWidth
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.button {
-  cursor: pointer;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: variables.$border-radius-sm;
-  position: relative;
-  line-height: 0;
-  text-transform: uppercase;
-  font-weight: variables.$font-bold;
-  white-space: nowrap;
-  outline-offset: 2px;
-  width: fit-content;
-  min-width: fit-content;
-
-  svg {
-    stroke: currentColor;
-    fill: currentColor;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// kind
-// —————————————————————————————————————————————————————————————————
-
-// This property is handled by the size mixin
-
-// —————————————————————————————————————————————————————————————————
-// variant
-// —————————————————————————————————————————————————————————————————
-
-// This property is handled by the color mixin
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-@mixin button-size($value, $size) {
-  height: $size;
-  gap: $size*.25;
-  padding-right: $size*.33;
-  padding-left: $size*.33;
-
-  @if $value == xs or $value == sm {
-    @extend %overline;
-    border-radius: variables.$border-radius-sm;
-  }
-  @if $value == md { @extend %body; }
-  @if $value == lg { @extend %subtitle; }
-
-  svg {
-    width: calc($size/1.75);
-    height: calc($size/1.75);
-    margin-right: -$size*.05;
-    margin-left: -$size*.05;
-  }
-
-  &:not(.button-icon) {
-
-    svg {
-      margin-top: 0.15em;
-    }
-  }
-
-  &.button-icon {
-    width: $size;
-    padding: 0;
-  }
-}
-
-.button {
-
-  @include button-size(md, 2rem);
-  &-xs { @include button-size(xs, 1rem); }
-  &-sm { @include button-size(sm, 1.5rem); }
-  &-lg { @include button-size(lg, 2.5rem); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// color
-// —————————————————————————————————————————————————————————————————
-
-@mixin button-color($prefix, $colors...) {
-
-  @each $i in $colors {
-    .#{$prefix}#{list.nth($i, 1)} {
-      background-color: list.nth($i, 2);
-      color: list.nth($i, 3);
-
-      &:focus {
-        outline: 2px solid list.nth($i, 2);
-      }
-
-      @include mixins.hover {
-
-        &:not(.button-disabled) {
-          background-color: color.mix(black, list.nth($i, 2), 20%);
-          color: list.nth($i, 3);
-        }
-      }
-
-      &.button-stroke {
-        background-color: transparent;
-        border: 1px solid list.nth($i, 2);
-        color: variables.$text;
-        
-        @include mixins.hover {
-          
-          &:not(.button-disabled) {
-            background-color: variables.$hover;
-            color: variables.$text;
-          }
-        }
-
-        svg { stroke: variables.$text; }
-      }
-      
-      &.button-transparent {
-        background-color: transparent;
-        color: list.nth($i, 2);
-        
-        @include mixins.hover {
-          background-color: variables.$hover;
-          color: list.nth($i, 2);
-        }
-
-        svg { stroke: list.nth($i, 2); }
-      }
-    }
-  }
-}
-
-@include button-color('button',
-  '' variables.$primary variables.$primary-contrast,
-  '-secondary' variables.$secondary variables.$secondary-contrast,
-  '-grey' variables.$text-disabled variables.$text,
-  '-success' variables.$success variables.$success-contrast,
-  '-info' variables.$info variables.$info-contrast,
-  '-warning' variables.$warning variables.$warning-contrast,
-  '-error' variables.$error variables.$error-contrast,
-  '-main' variables.$main variables.$text,
-  '-contrast' variables.$contrast variables.$text-contrast
-);
-
-// —————————————————————————————————————————————————————————————————
-// fullWidth
-// —————————————————————————————————————————————————————————————————
-
-.button-fullWidth {
-  width: 100%;
-}
-
-// —————————————————————————————————————————————————————————————————
-// disabled
-// —————————————————————————————————————————————————————————————————
-
-.button {
-
-  &.button-disabled,
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-    outline: none;
-  }
-}

package/dist/styles/components/_buttons.scss

@@ -1,52 +0,0 @@
-@use '../common/mixins';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// direction
-// fullWidth
-// wide
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.buttons, %buttons {
-  display: flex;
-  flex-wrap: wrap; // set on multiple lines if wider than parent width
-  width: 100%;
-  gap: .5rem;
-  
-  // larger spacing on small and touch devices
-  @include mixins.responsive(down, mobile) { gap: 1rem; }
-  @include mixins.responsive-touch { gap: 1rem; }
-}
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-.buttons-portrait {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-// —————————————————————————————————————————————————————————————————
-// fullWidth
-// —————————————————————————————————————————————————————————————————
-
-.buttons-fullWidth .button {
-  width: 100%;
-}
-
-// —————————————————————————————————————————————————————————————————
-// wide
-// —————————————————————————————————————————————————————————————————
-
-.buttons-wide {
-  justify-content: space-between;
-
-  > .buttons {
-    width: fit-content;
-  }
-}

package/dist/styles/components/_card.scss

@@ -1,316 +0,0 @@
-@use '../common/variables';
-@use '../common/mixins';
-@use '../utilities/text';
-@use '../components/buttons';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// size
-// fill
-// 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
-  
-  &:not(.card-transparent) {
-    background-color: variables.$background-paper;
-    border: variables.$border;
-  }
-
-  &_media,
-  &_header,
-  &_content,
-  &_actions {
-    width: 100%;
-  }
-
-  &_media {
-    
-    &Inner {
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-      width: 100%;
-      height: 100%;
-      background-color: variables.$overlay;
-      overflow: hidden;
-      padding-bottom: 50%;
-      
-      .card-transparent & {
-        background-color: variables.$overlay-contrast;
-      }
-    }
-  }
-
-  &_header {
-
-    @include mixins.responsive(down, tablet) {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  &_headerActions {
-    @extend %buttons;
-    width: fit-content;
-    justify-content: flex-end;
-    
-    @include mixins.responsive(up, tablet) { float: right; }
-    @include mixins.responsive(down, tablet) { order: 4; }
-  }
-
-  &_label,
-  &_title {
-    font-weight: variables.$font-bold;
-  }
-
-  &_title {
-    line-height: 1.25;
-  }
-    
-  &_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;
-
-      .button {
-        width: 100%;
-      }
-
-      >*:not(:last-child) {
-        margin-bottom: 1rem;
-      }
-    }
-
-    .buttons {
-      width: fit-content;
-    }
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// size
-// —————————————————————————————————————————————————————————————————
-
-@mixin card-size($value, $size) {
-
-  &:not(.card-transparent) {
-    border-radius: calc($size/2);
-  } 
-
-  > .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 {
-
-    &_headerActions {
-
-      @include mixins.responsive(down, tablet) {
-        margin-top: $size*0.75;
-      }
-    }
-
-    &_label {
-      @if $value == xs { font-size: variables.$overline-size; }
-      @else if $value == sm { font-size: variables.$overline-size; }
-      @else if $value == md { font-size: variables.$overline-size; }
-      @else if $value == lg { font-size: variables.$caption-size; }
-      @else if $value == xl { font-size: variables.$body-size; }
-      margin-bottom: calc($size / 4);
-    }
-
-    &_title {
-      @if $value == xs { font-size: variables.$body-size; }
-      @else if $value == sm { font-size: variables.$subtitle-size; }
-      @else if $value == md { font-size: variables.$h6-size; }
-      @else if $value == lg { font-size: variables.$h5-size; }
-      @else if $value == xl { font-size: variables.$h4-size; }
-    }
-
-    &_subtitle {
-      @if $value == xs { font-size: variables.$caption-size; }
-      @else if $value == sm { font-size: variables.$body-size; }
-      @else if $value == md { font-size: variables.$subtitle-size; }
-      @else if $value == lg { font-size: variables.$h6-size; }
-      @else if $value == xl { font-size: variables.$h5-size; }
-      margin-top: calc($size / 3);
-    }
-
-    &_mediaInner {
-      border-radius: calc($size/8);
-    }
-  }
-
-  > .card_media-fullWidth .card_mediaInner {
-    border-radius: 0;
-  }
-
-  &.card-transparent > .card_media-fullWidth .card_mediaInner {
-    border-radius: calc($size/2);
-  }
-
-  &.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 card-size(md, 1.5rem);
-  &-xs.card { @include card-size(xs, .75rem); }
-  &-sm.card { @include card-size(sm, 1rem); }
-  &-lg.card { @include card-size(lg, 2rem); }
-  &-xl.card { @include card-size(xl, 2.5rem); }
-}
-
-// —————————————————————————————————————————————————————————————————
-// fill
-// —————————————————————————————————————————————————————————————————
-
-// the fill styling is handled by the color utility file
-
-// —————————————————————————————————————————————————————————————————
-// direction
-// —————————————————————————————————————————————————————————————————
-
-// most of the direction styling is handled by the size mixin
-
-.card-landscape {
-  flex-direction: row;
-
-  .card_media {
-    flex-basis: 0;
-  }
-}
-
-// —————————————————————————————————————————————————————————————————
-// 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
-
-.card-hasShadow {
-  box-shadow: 0 1px .5rem rgba(variables.$text, 0.15);
-}

package/dist/styles/components/_divider.scss

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

package/dist/styles/components/_form.scss

@@ -1,58 +0,0 @@
-@use '../common/variables';
-@use '../utilities/text';
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// dense
-// card
-// —————————————————————————————————————————————————————————————————
-
-// —————————————————————————————————————————————————————————————————
-// elements
-// —————————————————————————————————————————————————————————————————
-
-.form {
-	width: 100%;
-
-	&_title,
-	&_content,
-	&_actions {
-
-		&:not(:last-child) {
-			margin-bottom: 1.5rem;
-		}
-	}
-
-	&_title {
-		@extend %subtitle;
-		font-weight: variables.$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;
-	}
-}