pallote-css 0.3.12 → 0.4.0

package/dist/styles/components/_card.scss

@@ -1,9 +1,12 @@
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/variables';
+@use '../common/mixins';
+@use '../utilities/text';
+@use '../components/buttons';
 
 // —————————————————————————————————————————————————————————————————
 // elements
 // size
+// fill
 // direction
 // align
 // transparent
@@ -20,14 +23,20 @@
   align-items: stretch;
   width: 100%;
   overflow: hidden; // hide corners when CardMedia has fullWidth prop set to true
-  border: variables.$border;
-
-  &:not(.card--transparent) {
+  
+  &:not(.card-transparent) {
     background-color: variables.$background-paper;
+    border: variables.$border;
   }
 
-  &__media {
-    flex-basis: 0;
+  &_media,
+  &_header,
+  &_content,
+  &_actions {
+    width: 100%;
+  }
+
+  &_media {
     
     &Inner {
       background-size: cover;
@@ -39,40 +48,53 @@
       overflow: hidden;
       padding-bottom: 50%;
       
-      .card--transparent & {
+      .card-transparent & {
         background-color: variables.$overlay-contrast;
       }
     }
   }
 
-  &__label,
-  &__title {
-    @extend %text-bold;
+  &_header {
+
+    @include mixins.responsive(down, tablet) {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
-  &__title {
-    line-height: 1.25;
+  &_headerActions {
+    @extend %buttons;
+    width: fit-content;
+    justify-content: flex-end;
+    
+    @include mixins.responsive(up, tablet) { float: right; }
+    @include mixins.responsive(down, tablet) { order: 4; }
   }
-  
-  &__subtitle {
-    @extend %text-regular;
+
+  &_label,
+  &_title {
+    font-weight: variables.$font-bold;
   }
-  
-  &__content {
+
+  &_title {
+    line-height: 1.25;
+  }
+    
+  &_content {
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
 
-    &--fullWidth {
+    &-fullWidth {
 
-      .card > &.card__content {
+      .card > &.card_content {
         padding-right: 0;
         padding-left: 0;
       }
     }
   }
 
-  &__actions {
+  &_actions {
     display: flex;
     justify-content: space-between;
 
@@ -80,13 +102,21 @@
       margin-left: auto;
     }
 
-    &--portrait {
+    &-portrait {
       flex-direction: column;
 
+      .button {
+        width: 100%;
+      }
+
       >*:not(:last-child) {
-        margin-bottom: variables.$spacing-md;
+        margin-bottom: 1rem;
       }
     }
+
+    .buttons {
+      width: fit-content;
+    }
   }
 }
 
@@ -94,20 +124,16 @@
 // size
 // —————————————————————————————————————————————————————————————————
 
-@mixin size($value, $size) {
+@mixin card-size($value, $size) {
 
-  &:not(.card--transparent) {
-    border-radius: $size;
+  &:not(.card-transparent) {
+    border-radius: calc($size/2);
   } 
-  
-  &.card--hasShadow {
-    box-shadow: 0 0 $size $size*0.25 rgba(variables.$main ,0.3);
-  }
 
-  > .card__media,
-  > .card__header,
-  > .card__content,
-  > .card__actions {
+  > .card_media,
+  > .card_header,
+  > .card_content,
+  > .card_actions {
     padding: $size;
 
     &:not(:first-child) {
@@ -115,16 +141,16 @@
     }
   }
 
-  > .card__actions {
+  > .card_actions {
     margin-top: auto;
   }
 
-  &.card--transparent {
+  &.card-transparent {
 
-    > .card__media,
-    > .card__header,
-    > .card__content,
-    > .card__actions {
+    > .card_media,
+    > .card_header,
+    > .card_content,
+    > .card_actions {
       padding: 0;
         
       &:not(:first-child) {
@@ -132,12 +158,12 @@
       }
     }
 
-    > .card__media .card__mediaInner {
+    > .card_media .card_mediaInner {
       border-radius: calc($size/2);
     }
   }
 
-  .card__media--fullWidth {
+  .card_media-fullWidth {
     padding-right: 0;
     padding-top: 0;
     padding-left: 0;
@@ -145,50 +171,58 @@
 
   .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; }
+    &_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 { @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; }
+    &_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 { @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; }
+    &_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: $size*0.25;
+    &_mediaInner {
+      border-radius: calc($size/8);
     }
   }
 
-  > .card__media--fullWidth .card__mediaInner {
+  > .card_media-fullWidth .card_mediaInner {
     border-radius: 0;
   }
 
-  &.card--transparent > .card__media--fullWidth .card__mediaInner {
-    border-radius: $size*0.5;
+  &.card-transparent > .card_media-fullWidth .card_mediaInner {
+    border-radius: calc($size/2);
   }
 
-  &.card--landscape {
+  &.card-landscape {
 
-    > .card__media,
-    > .card__header,
-    > .card__content,
-    > .card__actions {
+    > .card_media,
+    > .card_header,
+    > .card_content,
+    > .card_actions {
       padding-top: $size;
 
       &:not(:first-child) {
@@ -196,18 +230,18 @@
       }
     }
 
-    > .card__actions {
+    > .card_actions {
       margin-left: auto;
       flex-direction: column;
       justify-content: flex-start;
     }
 
-    &.card--transparent {
+    &.card-transparent {
 
-      > .card__media,
-      > .card__header,
-      > .card__content,
-      > .card__actions {
+      > .card_media,
+      > .card_header,
+      > .card_content,
+      > .card_actions {
         padding: 0;
         
         &:not(:first-child) {
@@ -215,12 +249,12 @@
         }
       }
 
-      > .card__media .card__mediaInner {
+      > .card_media .card_mediaInner {
         border-radius: calc($size/2);
       }
     }
 
-    .card__media--fullWidth {
+    .card_media-fullWidth {
       padding-top: 0;
       padding-bottom: 0;
       padding-left: 0;
@@ -229,21 +263,31 @@
 }
 
 .card {
-  @include size(md, variables.$spacing-md+variables.$spacing-sm);
-  &--xs.card { @include size(xs, variables.$spacing-sm+variables.$spacing-xs); }
-  &--sm.card { @include size(sm, variables.$spacing-md); }
-  &--lg.card { @include size(lg, variables.$spacing-lg); }
-  &--xl.card { @include size(xl, variables.$spacing-lg+variables.$spacing-sm); }
+  @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 {
+.card-landscape {
   flex-direction: row;
+
+  .card_media {
+    flex-basis: 0;
+  }
 }
 
 // —————————————————————————————————————————————————————————————————
@@ -252,8 +296,8 @@
 
 .card {
 
-  &--center { text-align: center; }
-  &--right { text-align: right; }
+  &-center { text-align: center; }
+  &-right { text-align: right; }
 }
 // —————————————————————————————————————————————————————————————————
 // transparent
@@ -266,3 +310,7 @@
 // —————————————————————————————————————————————————————————————————
 
 // 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,9 +1,9 @@
-@use "../common/variables";
+@use '../common/variables';
 
 // —————————————————————————————————————————————————————————————————
 // elements
 // direction
-// size
+// padding
 // —————————————————————————————————————————————————————————————————
 
 // —————————————————————————————————————————————————————————————————
@@ -30,23 +30,24 @@
 }
 
 // —————————————————————————————————————————————————————————————————
-// size
+// padding
 // —————————————————————————————————————————————————————————————————
 
-@mixin size($size) {
-  margin-top: $size;
-  margin-bottom: $size;
+@mixin divider-padding($padding) {
+  margin-top: $padding;
+  margin-bottom: $padding;
 
   &.divider-portrait {
     margin-top: 0;
-    margin-right: $size;
+    margin-right: $padding;
     margin-bottom: 0;
-    margin-left: $size;
+    margin-left: $padding;
   }
 }
 
 .divider {
-  @include size(1rem);
-  &-sm { @include size(.5rem); }
-  &-lg { @include size(2rem); }
+  @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,5 +1,5 @@
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/variables';
+@use '../utilities/text';
 
 // —————————————————————————————————————————————————————————————————
 // elements