pallote-css 0.3.12 → 0.4.0

package/dist/styles/components/_grid.scss

@@ -2,54 +2,40 @@
 @use "../common/variables";
 
 // —————————————————————————————————————————————————————————————————
-// variables
 // elements
 // wrap
 // direction
-// justifyContent
-// alignItems
-// alignSelf
-// flexGrow
-// spacing
-// width
+// justify
+// items
+// self
+// gap and col
 // —————————————————————————————————————————————————————————————————
 
-// —————————————————————————————————————————————————————————————————
-// variables
-// —————————————————————————————————————————————————————————————————
-
-variables.$col:	calc(100% / 12);
-
 // —————————————————————————————————————————————————————————————————
 // elements
 // —————————————————————————————————————————————————————————————————
 
-.grid {
+.flex,
+.flex_item {
   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
+.flex-wrap {
+  justify-content: center;
 
-  // have children wrap automatically
-  &--wrap {
-    justify-content: center;
+  > .flex_item {
+    flex: 1 0 0;
 
-    > .grid__item {
-      flex: 1 0 0;
+    > * {
+      width: 100%;
     }
   }
 }
@@ -58,133 +44,84 @@ variables.$col:	calc(100% / 12);
 // 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; }
+.flex-column { flex-direction: column; }
+.flex-columnReverse { flex-direction: column-reverse; }
+.flex-row { flex-direction: row; flex-wrap: wrap; }
+.flex-rowReverse { flex-direction: row-reverse; flex-wrap: wrap; }
 
 // —————————————————————————————————————————————————————————————————
-// justifyContent
+// justify
 // —————————————————————————————————————————————————————————————————
 
-.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;}
+.flex-jc-center { justify-content: center;}
+.flex-jc-end { justify-content: flex-end;}
+.flex-jc-start { justify-content: flex-start;}
+.flex-jc-spaceAround { justify-content: space-around;}
+.flex-jc-spaceBetween { justify-content: space-between;}
+.flex-jc-spaceEvenly { justify-content: space-evenly;}
 
 // —————————————————————————————————————————————————————————————————
-// alignItems
+// items
 // —————————————————————————————————————————————————————————————————
 
-.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; }
-
+.flex-ai-stretch { align-items: stretch; }
+.flex-ai-center { align-items: center; }
+.flex-ai-end { align-items: flex-end; }
+.flex-ai-start { align-items: flex-start; }
+.flex-ai-baseline { align-items: baseline; }
 
 // —————————————————————————————————————————————————————————————————
-// flexGrow
+// self
 // —————————————————————————————————————————————————————————————————
 
-.grid--fg {
-
-  &-0 { flex-grow: 0; }
-  &-1 { flex-grow: 1; }
-  &-auto { flex-grow: auto; }
-}
+.flex-as-stretch { align-self: stretch; }
+.flex-as-center { align-self: center; }
+.flex-as-end { align-self: flex-end; }
+.flex-as-start { align-self: flex-start; }
+.flex-as-baseline { align-self: baseline; }
 
 // —————————————————————————————————————————————————————————————————
-// spacing
+// gap and col
 // —————————————————————————————————————————————————————————————————
 
-@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;
-    }
+$columns: 12;
+$breakpoints: (
+  xs: mobile-sm,
+  sm: mobile,
+  md: tablet,
+  lg: laptop,
+  xl: desktop
+);
 
-    &.grid__item {
-      width: calc(100% + #{$spacingWidth * 0.5rem});
-    }
+@for $i from 1 through $columns {
+  .col-#{$i} {
+    width: variables.$col * $i;
   }
 }
 
-// —————————————————————————————————————————————————————————————————
-// width
-// —————————————————————————————————————————————————————————————————
-
-@for $colWidth from 1 through 12 {
-
-  .grid--#{$colWidth} {
-    width: $colWidth*variables.$col;
-
-    &.grid {
-      width: $colWidth*variables.$col;
-    }
-
-    @for $spacingWidth from 1 through 12 {
+[class*="gap-"],
+[class*="col-"] {
+  width: 100%;
+}
 
-      &.grid--spacing#{$spacingWidth} {
-        width: calc(#{$colWidth*variables.$col} + #{$spacingWidth * 0.5rem});
+@for $i from 1 through $columns {
+  .gap-#{$i} {
+    gap: #{$i * .25}rem;
+    
+    @for $j from 1 through $columns {
+      > .col-#{$j} {
+        width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
       }
     }
-  }
-}
-
-@mixin break-width($breakpoint) {
-
-  @include mixins.responsive(up, $breakpoint) {
-
-    @for $colWidth from 1 through 12 {
 
-      &#{$colWidth} {
-        width: $colWidth*variables.$col;
-
-        &.grid {
-          width: $colWidth*variables.$col;
-        }
-
-        @for $spacingWidth from 1 through 12 {
-
-          &.grid--spacing#{$spacingWidth} {
-            width: calc(#{$colWidth*variables.$col} + #{$spacingWidth * 0.5rem});
+    @each $suffix, $breakpoint in $breakpoints {
+      @include mixins.responsive(up, $breakpoint) {
+        @for $j from 1 through $columns {
+          > .col-#{$suffix}-#{$j} {
+            width: calc((variables.$col * $j) - (#{$i * .25}rem * (($columns / $j - 1) / ($columns / $j))));
           }
         }
       }
     }
   }
 }
-
-[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); }
-}

package/dist/styles/components/_input.scss

@@ -1,6 +1,6 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/mixins';
+@use '../common/variables';
+@use '../utilities/text';
 
 // —————————————————————————————————————————————————————————————————
 // elements / default
@@ -10,6 +10,7 @@
 // error
 // disabled
 // optional
+// dense
 // icon
 // —————————————————————————————————————————————————————————————————
 
@@ -25,8 +26,8 @@
   width: 100%;
   max-width: variables.$max-width-form;
 
-  &:not(:last-child) {
-    margin-bottom: 1rem;
+  & + & {
+    margin-top: 1rem;
   }
 
   &_label {
@@ -49,7 +50,7 @@
   &_control {
 		@include mixins.transition(variables.$transition-md, border-color);
     font-size: 1rem;
-		font-family: variables.$font-fallback;
+		font-family: variables.$font, variables.$font-fallback;
 		width: 100%;
     border-radius: variables.$border-radius-md !important;
     padding: .325rem .5rem;
@@ -60,6 +61,10 @@
       background-color: variables.$input-background;
 		}
     
+    &:focus {
+      outline: 2px solid variables.$primary;
+    }
+    
     &:not(textarea):not(.checkboxes):not(.radios) {
       display: inline-block;
       align-items: center;
@@ -86,7 +91,7 @@
 // —————————————————————————————————————————————————————————————————
 
 .select {
-  
+
   &:after {
     content: '';
     border: solid variables.$text;
@@ -102,6 +107,7 @@
   .input_control {
     display: flex;
     align-items: center;
+    padding-right: 2rem;
   }
 }
 
@@ -162,6 +168,7 @@ input[type='radio'] {
   background-color: variables.$input-background;
   border: variables.$border;
   margin-right: .5rem;
+  color: variables.$primary;
 }
 
 input[type='checkbox'] { border-radius: variables.$border-radius-sm; }
@@ -260,6 +267,29 @@ input[type='radio']:checked {
   }
 }
 
+// —————————————————————————————————————————————————————————————————
+// dense
+// —————————————————————————————————————————————————————————————————
+
+.input-dense {
+
+  .input_control:not(textarea) {
+    height: 2rem;
+  }
+
+  &.select {
+
+    &:after {
+      bottom: 0.9rem;
+      right: 0.75rem;
+    }
+ 
+    .input_control {
+      padding-right: 1.5rem;
+    }
+  }
+}
+
 // —————————————————————————————————————————————————————————————————
 // icon
 // —————————————————————————————————————————————————————————————————

package/dist/styles/components/_link.scss

@@ -1,5 +1,5 @@
-@use "../common/mixins";
-@use "../common/variables";
+@use '../common/mixins';
+@use '../common/variables';
 
 // —————————————————————————————————————————————————————————————————
 // elements
@@ -14,11 +14,12 @@
   display: inline-flex;
   align-items: center;
   font-weight: variables.$font-regular;
+  border-radius: variables.$border-radius-sm;
   text-decoration: underline;
-  text-underline-offset: 0.1em;
+  text-underline-offset: .15em;
   white-space: nowrap;
 
-  &__icon {
+  &_icon {
     display: flex;
     margin-top: 0.1em;
     margin-left: 0.25em;
@@ -34,13 +35,17 @@
 // color
 // —————————————————————————————————————————————————————————————————
 
-// links color is handled by the color mixins in utilities/_text.scss
+// change the link colour using text utililty classes
 
 .link {
   color: variables.$primary;
-  text-decoration: underline rgba(variables.$primary, 0.5);
-  
-  @include mixins.hover {
-    text-decoration: underline 0.125em;
+  text-decoration: underline currentColor;
+
+  &:hover {
+    text-decoration: underline 3px;
+  }
+
+  &.text-inherit {
+    color: inherit;
   }
 }

package/dist/styles/components/_list.scss

@@ -1,4 +1,4 @@
-@use "../utilities/text";
+@use '../utilities/text';
 
 // —————————————————————————————————————————————————————————————————
 // elements
@@ -18,11 +18,11 @@
   &_item {
     display: flex;
     align-items: center;
-    
-    &:not(:last-child) {
-      margin-bottom: .5rem;
+
+    & + & {
+      margin-top: .5rem;
     }
-    
+
     &Icon {
       display: flex;
       height: 1em;
@@ -39,10 +39,9 @@
 .list-dense .list_item,
 .list_item-dense {
   @extend %caption;
-  margin-top: 0 !important;
 
-  &:not(:last-child) {
-    margin-bottom: .25rem;
+  + .list_item {
+    margin-top: .25rem;
   }
 }
 

package/dist/styles/components/_nav.scss

@@ -1,6 +1,6 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/mixins';
+@use '../common/variables';
+@use '../utilities/text';
 
 // —————————————————————————————————————————————————————————————————
 // elements

package/dist/styles/components/_navbar.scss

@@ -1,5 +1,5 @@
-@use "../common/mixins";
-@use "../common/variables";
+@use '../common/mixins';
+@use '../common/variables';
 
 // —————————————————————————————————————————————————————————————————
 // elements

package/dist/styles/components/_section.scss

@@ -1,6 +1,6 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/mixins';
+@use '../common/variables';
+@use '../utilities/text';
 
 // —————————————————————————————————————————————————————————————————
 // elements
@@ -51,37 +51,23 @@
   &_label {
     color: variables.$text-alt;
     font-weight: variables.$font-bold;
+    margin-bottom: .5rem;
   }
-  
+
   &_title {
     @extend %h3;
     color: variables.$primary;
     max-width: variables.$desktop*0.75;
-    
-    .section_label + & {
-      margin-top: .5rem;
-    }
   }
   
   &_subtitle {
     @extend %subtitle;
     max-width: variables.$max-width-subtitle;
-    
-    .section_title + & {
-      margin-top: 2rem - 1rem;
-    }
-
-    & + & {
-      margin-top: 1rem;
-    }
+    margin-top: 1rem;
   }
 
   &_actions {
-
-    .section_title + &,
-    .section_subtitle + & {
-      margin-top: 2rem;
-    }
+    margin-top: 2rem;
   }
 }
 
@@ -112,7 +98,7 @@
 // color
 // —————————————————————————————————————————————————————————————————
 
-@mixin color(
+@mixin section-color(
   $background-color,
   $title-color: variables.$primary,
   $color: variables.$text,
@@ -137,16 +123,16 @@
 }
 
 .section {
-  &-default { @include color(variables.$background-default); }
-  &-paper { @include color(variables.$background-paper); }
-  &-primary { @include color(
+  &-default { @include section-color(variables.$background-default); }
+  &-paper { @include section-color(variables.$background-paper); }
+  &-primary { @include section-color(
     variables.$primary, // background-color
     variables.$primary-contrast, // title-color
     variables.$primary-contrast, // color
     variables.$hover-contrast, // paper-color
     variables.$border-color-contrast // border-color
   );}
-  &-primaryLight { @include color(
+  &-primaryLight { @include section-color(
     variables.$primary-light, // background-color
     variables.$text, // title-color
     variables.$text, // color
@@ -168,11 +154,10 @@
       @include mixins.clamp(padding-bottom, 2rem, 10vw, 7rem);
     }
 
+    &_label { margin-bottom: 1rem; }
     &_title { @extend %h1; max-width: variables.$desktop*0.5; }
-    &_subtitle { @extend %h5; }
-    &_title + .section_subtitle { margin-top: 2rem; }
-    &_title + .section_actions,
-    &_subtitle + .section_actions { margin-top: 3rem; }
+    &_subtitle { @extend %h5; margin-top: 2rem; }
+    &_actions { margin-top: 4rem; }
   }
 }
 
@@ -184,10 +169,9 @@
 
   .section {
 
+    &_label { margin-bottom: .75rem; }
     &_title { @extend %h2; }
-    &_subtitle { @extend %subtitle; }
-    &_title + .section_subtitle { margin-top: 2rem; }
-    &_title + .section_actions,
-    &_subtitle + .section_actions { margin-top: 2.5rem; }
+    &_subtitle { margin-top: 1.5rem; }
+    &_actions { margin-top: 2.5rem; }
   }
 }

package/dist/styles/components/_sidebar.scss

@@ -1,6 +1,6 @@
-@use "../common/mixins";
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/mixins';
+@use '../common/variables';
+@use '../utilities/text';
 
 $sidebar-width: 200px;
 

package/dist/styles/components/_snippet.scss

@@ -1,5 +1,5 @@
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/variables';
+@use '../utilities/text';
 
 // —————————————————————————————————————————————————————————————————
 // elements
@@ -33,7 +33,7 @@
   }
 
   .tag {
-    font-family: variables.$font-fallback;
+    font-family: variables.$font, variables.$font-fallback;
     float: right;
     margin-top: 1px;
     margin-right: -(variables.$spacing-xs);
@@ -49,7 +49,7 @@
   &:after {
     @extend %overline;
     content: "Default";
-    font-family: variables.$font-fallback;
+    font-family: variables.$font, variables.$font-fallback;
     float: right;
     margin-top: 1px;
     margin-right: -(variables.$spacing-xs);

package/dist/styles/components/_status.scss

@@ -1,5 +1,5 @@
-@use "../common/variables";
-@use "../utilities/text";
+@use '../common/variables';
+@use '../utilities/text';
 
 // —————————————————————————————————————————————————————————————————
 // elements
@@ -31,7 +31,7 @@ $spacing-status: .5rem;
 // color
 // —————————————————————————————————————————————————————————————————
 
-@mixin color($color) {
+@mixin status-color($color) {
 
   &:before {
     background-color: $color;
@@ -40,10 +40,10 @@ $spacing-status: .5rem;
 
 .status {
 
-  &-success { @include color(variables.$success); }
-  &-info { @include color(variables.$info); }
-  &-warning { @include color(variables.$warning); }
-  &-error { @include color(variables.$error); }
+  &-success { @include status-color(variables.$success); }
+  &-info { @include status-color(variables.$info); }
+  &-warning { @include status-color(variables.$warning); }
+  &-error { @include status-color(variables.$error); }
 }
 
 // —————————————————————————————————————————————————————————————————

package/dist/styles/components/_switch.scss

@@ -1,5 +1,5 @@
-@use "../common/mixins";
-@use "../common/variables";
+@use '../common/mixins';
+@use '../common/variables';
 
 // —————————————————————————————————————————————————————————————————
 // elements