pallote-css 0.3.10 → 0.3.12

package/dist/styles/components/_input.scss

@@ -1,3 +1,7 @@
+@use "../common/mixins";
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements / default
 // elements / select
@@ -19,15 +23,15 @@
   text-align: left;
   position: relative;
   width: 100%;
-  max-width: $max-width-form;
+  max-width: variables.$max-width-form;
 
   &:not(:last-child) {
     margin-bottom: 1rem;
   }
 
   &_label {
-		@include transition($transition-md, color);
-		font-weight: $font-bold;
+		@include mixins.transition(variables.$transition-md, color);
+		font-weight: variables.$font-bold;
 		text-overflow: ellipsis;
 		display: block;
 		overflow: hidden;
@@ -43,17 +47,17 @@
   }
 
   &_control {
-		@include transition($transition-md, border-color);
+		@include mixins.transition(variables.$transition-md, border-color);
     font-size: 1rem;
-		font-family: $font, $font-fallback;
+		font-family: variables.$font-fallback;
 		width: 100%;
-    border-radius: $border-radius-md !important;
+    border-radius: variables.$border-radius-md !important;
     padding: .325rem .5rem;
-		background-color: $input-background;
-    border: $border;
+		background-color: variables.$input-background;
+    border: variables.$border;
 
-		@include responsive(down, mobile) {
-      background-color: $input-background;
+		@include mixins.responsive(down, mobile) {
+      background-color: variables.$input-background;
 		}
     
     &:not(textarea):not(.checkboxes):not(.radios) {
@@ -67,13 +71,13 @@
     }
 
     &:not(textarea) {
-      height: $input-height;
+      height: variables.$input-height;
     }
   }
 }
 
-@include placeholder {
-  color: $text-alt;
+@include mixins.placeholder {
+  color: variables.$text-alt;
   opacity: 1;
 }
 
@@ -85,13 +89,13 @@
   
   &:after {
     content: '';
-    border: solid $text;
+    border: solid variables.$text;
     border-width: 0 .125rem .125rem 0;
     padding: .2rem;
     transform: rotate(45deg);
-    margin-left: $nav-item*0.5;
+    margin-left: variables.$nav-item*0.5;
     position: absolute;
-    bottom: $input-height*.45;
+    bottom: variables.$input-height*.45;
     right: 1rem;
   }
     
@@ -153,23 +157,23 @@ input[type='radio'] {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: $checkbox-width;
-  width: $checkbox-width;
-  background-color: $input-background;
-  border: $border;
+  height: variables.$checkbox-width;
+  width: variables.$checkbox-width;
+  background-color: variables.$input-background;
+  border: variables.$border;
   margin-right: .5rem;
 }
 
-input[type='checkbox'] { border-radius: $border-radius-sm; }
+input[type='checkbox'] { border-radius: variables.$border-radius-sm; }
 input[type='radio'] { border-radius: 50%; }
 
 input[type='checkbox']:checked {
-  background-color: $primary;
+  background-color: variables.$primary;
 
   &:after {
     content: "✔";
     font-size: 1rem;
-    color: $text-contrast;
+    color: variables.$text-contrast;
   }
 }
 
@@ -177,9 +181,9 @@ input[type='radio']:checked {
 
   &:after {
     content: "";
-    height: $checkbox-width*.5;
-    width: $checkbox-width*.5;
-    background-color: $primary;
+    height: variables.$checkbox-width*.5;
+    width: variables.$checkbox-width*.5;
+    background-color: variables.$primary;
     border-radius: 50%;
   }
 }
@@ -192,10 +196,10 @@ input[type='radio']:checked {
   
   .input {
     
-    &_label { color: $error; }
+    &_label { color: variables.$error; }
 
     &_control {
-      border: 1px solid $error;
+      border: 1px solid variables.$error;
       
       &.checkboxes,
       &.radios {
@@ -263,7 +267,7 @@ input[type='radio']:checked {
 .input-withIcon {
 
   .input_control {
-    padding-right: $input-height*1.25;
+    padding-right: variables.$input-height*1.25;
   } 
 }
 
@@ -282,10 +286,10 @@ input[type="number"] {
   position: absolute;
   bottom: 0;
   right: 0;
-  width: $input-height;
-  height: $input-height;
+  width: variables.$input-height;
+  height: variables.$input-height;
   pointer-events: none;
-  border-left: $border;
+  border-left: variables.$border;
 
   svg {
     width: 50%;

package/dist/styles/components/_link.scss

@@ -1,3 +1,6 @@
+@use "../common/mixins";
+@use "../common/variables";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // color
@@ -10,7 +13,7 @@
 .link {
   display: inline-flex;
   align-items: center;
-  font-weight: $font-regular;
+  font-weight: variables.$font-regular;
   text-decoration: underline;
   text-underline-offset: 0.1em;
   white-space: nowrap;
@@ -34,10 +37,10 @@
 // links color is handled by the color mixins in utilities/_text.scss
 
 .link {
-  color: $primary;
-  text-decoration: underline rgba($primary, 0.5);
+  color: variables.$primary;
+  text-decoration: underline rgba(variables.$primary, 0.5);
   
-  @include hover {
+  @include mixins.hover {
     text-decoration: underline 0.125em;
   }
 }

package/dist/styles/components/_list.scss

@@ -1,3 +1,5 @@
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // dense

package/dist/styles/components/_nav.scss

@@ -1,3 +1,7 @@
+@use "../common/mixins";
+@use "../common/variables";
+@use "../utilities/text";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // active
@@ -27,7 +31,7 @@
 
   &__item,
   &__trigger {
-    border-radius: $border-radius-md;
+    border-radius: variables.$border-radius-md;
   }
 
   &__item {
@@ -35,7 +39,7 @@
     position: relative;
 
     &:not(:first-child) {
-      margin-left: $spacing-xs;
+      margin-left: variables.$spacing-xs;
       padding-top: 0;
     }
 
@@ -47,28 +51,28 @@
 
   &__trigger {
     @extend %caption;
-    font-weight: $font-bold;
+    font-weight: variables.$font-bold;
     white-space: nowrap;
     cursor: pointer;
-    height: $nav-item*2;
-    padding: $nav-item*0.5 $nav-item;
+    height: variables.$nav-item*2;
+    padding: variables.$nav-item*0.5 variables.$nav-item;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
     &:hover {
-      background-color: $hover;
+      background-color: variables.$hover;
     }
 
     .nav__item--dropdown > & {
       
       &:after {
         content: '';
-        border: solid $text;
-        border-width: 0 $spacing-xxs $spacing-xxs 0;
-        padding: $spacing-xxs;
+        border: solid variables.$text;
+        border-width: 0 variables.$spacing-xxs variables.$spacing-xxs 0;
+        padding: variables.$spacing-xxs;
         transform: rotate(45deg);
-        margin-left: $nav-item*0.5;
+        margin-left: variables.$nav-item*0.5;
       }
     }
   }
@@ -86,22 +90,22 @@
   &__target {
     display: none;
     flex-direction: column;
-    padding: $nav-item*0.25 $nav-item*0.5 $nav-item*0.5 $nav-item*0.5;
+    padding: variables.$nav-item*0.25 variables.$nav-item*0.5 variables.$nav-item*0.5 variables.$nav-item*0.5;
 
     .nav {
 
       &__item {
 
         &:not(:first-child) {
-          margin-top: $spacing-xs;
+          margin-top: variables.$spacing-xs;
           margin-left: 0;
         }
       }
       
       &__trigger {
-        padding-right: $nav-item*0.5;
-        padding-left: $nav-item*0.5;        
-        border-radius: $border-radius-sm;
+        padding-right: variables.$nav-item*0.5;
+        padding-left: variables.$nav-item*0.5;        
+        border-radius: variables.$border-radius-sm;
       }
     }
   }
@@ -112,11 +116,11 @@
 // —————————————————————————————————————————————————————————————————
 
 .nav__trigger--active {
-  color: $primary;
-  background-color: $hover;
+  color: variables.$primary;
+  background-color: variables.$hover;
 
   .nav__item--dropdown &:after {
-    border-color: $primary;
+    border-color: variables.$primary;
   }
 }
 
@@ -126,7 +130,7 @@
 
 .nav__item--dropdown.js-show {
   height: auto;
-  background-color: $hover;
+  background-color: variables.$hover;
 
   > .nav {
 
@@ -153,7 +157,7 @@
     
     &__item:not(:first-child) {
       margin-left: 0;
-      margin-top: $spacing-xs;
+      margin-top: variables.$spacing-xs;
     }
 
     &__group {
@@ -162,7 +166,7 @@
       align-items: stretch;
 
       &:not(:first-child) {
-        margin-top: $nav-item;
+        margin-top: variables.$nav-item;
       }  
     }
   }
@@ -175,29 +179,29 @@
 .nav--dense {
 
   &.nav--portrait .nav__item:not(:first-child) {
-    margin-top: $spacing-xxs;
+    margin-top: variables.$spacing-xxs;
   }
 
   .nav {
 
     &__item,
     &__trigger {
-      border-radius: $border-radius-sm;
+      border-radius: variables.$border-radius-sm;
     }
   
     &__trigger {
-      padding: $nav-item*0.25 $nav-item*0.5;
-      height: $nav-item*1.5;
+      padding: variables.$nav-item*0.25 variables.$nav-item*0.5;
+      height: variables.$nav-item*1.5;
     }
 
     &__item--dropdown {
     
       .nav__target {
-        padding: 0 $nav-item*0.25 $nav-item*0.25 $nav-item*0.25;
+        padding: 0 variables.$nav-item*0.25 variables.$nav-item*0.25 variables.$nav-item*0.25;
 
         .nav__trigger {
-          padding-right: $nav-item*0.25;
-          padding-left: $nav-item*0.25;
+          padding-right: variables.$nav-item*0.25;
+          padding-left: variables.$nav-item*0.25;
         }
       }
     }
@@ -212,23 +216,23 @@
 
   .nav {
 
-    @include responsive(up, tablet) { height: 100%; }
-    @include responsive(down, tablet) { width: 100%; }
+    @include mixins.responsive(up, tablet) { height: 100%; }
+    @include mixins.responsive(down, tablet) { width: 100%; }
 
     &__container {
 
-      @include responsive(up, tablet) {
+      @include mixins.responsive(up, tablet) {
         height: 100%;
         align-items: center;
       }
 
-      @include responsive(down, tablet) {
-        @include calc(max-height, '100vh - '$spacing-xl*3);
+      @include mixins.responsive(down, tablet) {
+        @include mixins.calc(max-height, '100vh - 'variables.$spacing-xl*3);
         align-items: stretch;
         overflow: scroll;
         width: 100%;
-        margin-top: $nav-item;
-        margin-bottom: $nav-item;
+        margin-top: variables.$nav-item;
+        margin-bottom: variables.$nav-item;
         flex-direction: column;
         width: 100%;
       }
@@ -236,33 +240,33 @@
 
     &__item:not(:first-child) {
 
-      @include responsive(down, tablet) {
-        margin-top: $spacing-xs;
+      @include mixins.responsive(down, tablet) {
+        margin-top: variables.$spacing-xs;
         margin-left: 0;
       }
     }
 
     &__item--dropdown {
 
-      @include responsive(up, tablet) {
+      @include mixins.responsive(up, tablet) {
         
         .nav__target {
-          @include calc(top, '100% +' $nav-item*0.5);
+          @include mixins.calc(top, '100% +' variables.$nav-item*0.5);
           position: absolute;
           left: 0;
-          width: $spacing-xl*2.5;
-          padding: $nav-item*0.5;
-          border-radius: $border-radius-md;
-          border: $border;
+          width: variables.$spacing-xl*2.5;
+          padding: variables.$nav-item*0.5;
+          border-radius: variables.$border-radius-md;
+          border: variables.$border;
           z-index: 1;              
-          background-color: $background-paper;
+          background-color: variables.$background-paper;
         }
       }
     }
 
     &__trigger {
 
-      @include responsive(down, tablet) {
+      @include mixins.responsive(down, tablet) {
         height: auto;
       }
     }

package/dist/styles/components/_navbar.scss

@@ -1,41 +1,44 @@
+@use "../common/mixins";
+@use "../common/variables";
+
 // —————————————————————————————————————————————————————————————————
 // elements
 // align
 // —————————————————————————————————————————————————————————————————
 
 // button apparition
-@include keyframes(button-menu-opacity) {
+@include mixins.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); }
+@include mixins.keyframes(button-menu-open-before) {
+	0% 		{ transform: translateY(variables.$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); }
+@include mixins.keyframes(button-menu-open-after) {
+	0% 		{ transform: translateY(-(variables.$spacing-xs)*1.5); }
 	50% 	{ transform: translateY(0); 
 			  	transform: rotate(0); }
 	100% 	{ transform: rotate(-45deg); }
 }
 
 // close > lines
-@include keyframes(button-menu-close-before) {
+@include mixins.keyframes(button-menu-close-before) {
 	0% 		{ transform: rotate(45deg); }
 	50% 	{ transform: rotate(0); 
 			  	transform: translateY(0); }
-	100% 	{ transform: translateY($spacing-xs*1.5); }
+	100% 	{ transform: translateY(variables.$spacing-xs*1.5); }
 }
-@include keyframes(button-menu-close-after) {
+@include mixins.keyframes(button-menu-close-after) {
 	0% 		{ transform: rotate(-45deg); }
 	50% 	{ transform: rotate(0); 
 			  	transform: translateY(0); }
-	100% 	{ transform: translateY(-$spacing-xs*1.5); }
+	100% 	{ transform: translateY(-(variables.$spacing-xs)*1.5); }
 }
 
 // —————————————————————————————————————————————————————————————————
@@ -46,15 +49,15 @@
   top: 0;
   left: 0;
   width: 100%;
-  background-color: $background-paper;
-  border-bottom: $border;
+  background-color: variables.$background-paper;
+  border-bottom: variables.$border;
   z-index: 13;
   
-  @include responsive(up, tablet) {
-    height: $navbar-height;
+  @include mixins.responsive(up, tablet) {
+    height: variables.$navbar-height;
   }
 
-  @include responsive(down, tablet) {
+  @include mixins.responsive(down, tablet) {
     z-index: 11;
   }
   
@@ -71,11 +74,11 @@
     padding-top: 0;
     padding-bottom: 0;
 
-    @include responsive(up, tablet) {
+    @include mixins.responsive(up, tablet) {
       height: 100%;
     }
 
-    @include responsive(down, tablet) {
+    @include mixins.responsive(down, tablet) {
       flex-direction: column;
       align-items: stretch;
       padding-top: 0;
@@ -86,79 +89,79 @@
     display: flex;
     align-items: center;
 
-    @include responsive(down, tablet) {
-      height: $navbar-height-sm;
+    @include mixins.responsive(down, tablet) {
+      height: variables.$navbar-height-sm;
     }
   }
   
   &__logo {
     display: flex;
     align-items: baseline;
-    font-weight: $font-bold;
+    font-weight: variables.$font-bold;
     flex-grow: 1;
     
     > * {
-      margin-right: $spacing-xs;
+      margin-right: variables.$spacing-xs;
     }
   }
   
   &__button {
-    @include transition($transition-md, opacity);
-    animation: button-menu-opacity $transition-lg;
+    @include mixins.transition(variables.$transition-md, opacity);
+    animation: button-menu-opacity variables.$transition-lg;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
-    width: $spacing-md;
-    height: $spacing-md;
+    width: variables.$spacing-md;
+    height: variables.$spacing-md;
     
-    @include responsive(up, tablet) {
+    @include mixins.responsive(up, tablet) {
       display: none;
     }
 
     &:before,
     &:after,
     span {
-      background-color: $text;
+      background-color: variables.$text;
       border-radius: 0.15rem;
     }
   
     &:before,
     &:after {
-      @include pseudo-element('', auto, auto, auto, auto, $spacing-md, 2px);
-      @include transition($transition-md, transform);
+      @include mixins.pseudo-element('', auto, auto, auto, auto, variables.$spacing-md, 2px);
+      @include mixins.transition(variables.$transition-md, transform);
     }
   
     &:before {
-      transform: translateY($spacing-xs*1.5);
-      animation: button-menu-close-before $transition-lg;
+      transform: translateY(variables.$spacing-xs*1.5);
+      animation: button-menu-close-before variables.$transition-lg;
     }
   
     &:after {
-      transform: translateY(-$spacing-xs*1.5);
-      animation: button-menu-close-after $transition-lg;
+      transform: translateY(-(variables.$spacing-xs)*1.5);
+      animation: button-menu-close-after variables.$transition-lg;
     }
   
     span {
-      @include transition($transition-md, opacity);
+      @include mixins.transition(variables.$transition-md, opacity);
       position: absolute;
-      width: $spacing-md;
+      width: variables.$spacing-md;
       height: 2px;
     }
   
     &.js-opened {
   
-      &:before { animation: button-menu-open-before $transition-lg forwards; }
-      &:after { animation: button-menu-open-after $transition-lg forwards; }
+      &:before { animation: button-menu-open-before variables.$transition-lg forwards; }
+      &:after { animation: button-menu-open-after variables.$transition-lg forwards; }
       span { opacity: 0; }
     }
   }  
 
   &__nav {
 
-    @include responsive(down, tablet) {
-      @include transition($transition-md, max-height);
+    @include mixins.responsive(down, tablet) {
+      @include mixins.transition(variables.$transition-md, max-height);
       align-items: flex-start;
       max-height: 0;
       overflow: hidden;
@@ -178,7 +181,7 @@
 
   .section_container {
 
-    @include responsive(up, tablet) {
+    @include mixins.responsive(up, tablet) {
       flex-direction: row-reverse;    
     }
   }