@1024pix/pix-ui 38.2.1 → 38.2.2

package/addon/styles/_pix-select.scss

@@ -1,6 +1,6 @@
 .pix-select {
-  display: inline-block;
   position: relative;
+  display: inline-block;
 
   &__label {
     @include label();
@@ -11,35 +11,35 @@
   }
 
   &__dropdown {
-    z-index: 200;
     position: absolute;
-    max-height: 12.5rem;
+    z-index: 200;
     width: inherit;
-    border-top: none;
-    border-radius: 0 0 $pix-spacing-xxs $pix-spacing-xxs;
-    list-style-type: none;
+    max-height: 12.5rem;
+    margin-top: $pix-spacing-xxs;
     padding: 0;
+    overflow-y: auto;
+    white-space: nowrap;
+    list-style-type: none;
     background-color: $pix-neutral-0;
+    border-top: none;
+    border-radius: 0 0 $pix-spacing-xxs $pix-spacing-xxs;
     box-shadow: 0 6px 12px rgba(7, 20, 46, 0.08);
     transition: all 0.1s ease-in-out;
-    white-space: nowrap;
-    margin-top: $pix-spacing-xxs;
-    overflow-y: auto;
 
     &::-webkit-scrollbar {
       width: 0.5rem;
     }
 
     &::-webkit-scrollbar-track {
-      border-radius: $pix-spacing-xxs;
-      border: 1px solid $pix-neutral-20;
       background: $pix-neutral-20;
+      border: 1px solid $pix-neutral-20;
+      border-radius: $pix-spacing-xxs;
     }
 
     &::-webkit-scrollbar-thumb {
-      border-radius: $pix-spacing-xxs;
       width: 0.375rem;
       background: $pix-neutral-30;
+      border-radius: $pix-spacing-xxs;
     }
 
     &::-webkit-scrollbar-thumb:hover {
@@ -61,9 +61,9 @@
 
   &__search {
     display: flex;
-    border-bottom: 2px solid $pix-neutral-22;
     margin: $pix-spacing-s $pix-spacing-m;
     color: $pix-neutral-30;
+    border-bottom: 2px solid $pix-neutral-22;
     border-radius: $pix-spacing-xxs $pix-spacing-xxs 0 0;
 
     &:focus-within {
@@ -82,19 +82,19 @@
 }
 
 .pix-select-button {
+  position: relative;
   display: flex;
   align-items: center;
-  position: relative;
-  border: 1px $pix-neutral-45 solid;
-  padding: 0 $pix-spacing-s 0 $pix-spacing-s;
+  justify-content: space-between;
   width: 100%;
+  height: 2.25rem;
+  padding: 0 $pix-spacing-s 0 $pix-spacing-s;
+  color: $pix-neutral-90;
   background-color: $pix-neutral-0;
+  border: 1px $pix-neutral-45 solid;
   border-radius: $pix-spacing-xxs;
   outline: none;
-  height: 2.25rem;
   cursor: pointer;
-  color: $pix-neutral-90;
-  justify-content: space-between;
 
   @extend %pix-body-s;
   @include hoverFormElement();
@@ -125,9 +125,9 @@
 }
 
 .pix-select-options__category {
-  list-style: none;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .pix-select-options-category {
@@ -135,8 +135,8 @@
     @extend %pix-body-s;
 
     padding: $pix-spacing-s $pix-spacing-m $pix-spacing-xs $pix-spacing-m;
-    text-transform: uppercase;
     color: $pix-neutral-45;
+    text-transform: uppercase;
   }
 
   &__option {
@@ -149,20 +149,20 @@
 
     &:hover,
     &:focus {
+      background-color: $pix-neutral-10;
       outline: none;
       cursor: pointer;
-      background-color: $pix-neutral-10;
     }
 
     svg {
+      font-size: 1.125rem;
       visibility: hidden;
       opacity: 0;
-      font-size: 1.125rem;
     }
 
     &--selected {
-      background-color: $pix-primary-5;
       align-items: center;
+      background-color: $pix-primary-5;
 
       svg {
         visibility: visible;
@@ -171,10 +171,10 @@
     }
 
     &--hidden {
-      visibility: hidden;
       height: 0;
       padding-top: 0;
       padding-bottom: 0;
+      visibility: hidden;
     }
   }
 }
@@ -184,13 +184,13 @@
     @extend %pix-body-s;
 
     width: 100%;
-    border: none;
-    padding-left: $pix-spacing-xs;
     margin: $pix-spacing-xxs;
+    padding-left: $pix-spacing-xs;
+    border: none;
 
     &:focus {
-      outline: none;
       background: $pix-neutral-10;
+      outline: none;
     }
   }
 

package/addon/styles/_pix-selectable-tag.scss

@@ -20,26 +20,26 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 .pix-selectable-tag {
   @extend %pix-body-s;
 
-  display: inline-block;
-  text-align: center;
   position: relative;
+  display: inline-block;
   padding: 3px calc(8px + #{$checkmark-width-with-space} / 2);
-  letter-spacing: 0.009rem;
-  border-radius: 0.95rem;
-  border: $pix-neutral-30 solid 1px;
   color: $pix-neutral-60;
+  font-weight: $font-medium;
+  letter-spacing: 0.009rem;
+  text-align: center;
   background-color: $pix-neutral-0;
+  border: $pix-neutral-30 solid 1px;
+  border-radius: 0.95rem;
   cursor: pointer;
-  font-weight: $font-medium;
 
   input {
     position: absolute;
-    opacity: 0;
-    cursor: pointer;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    left: 0;
-    top: 0;
+    cursor: pointer;
+    opacity: 0;
   }
 
   label {
@@ -47,25 +47,25 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   }
 
   &:hover {
+    color: $pix-neutral-70;
     background-color: $pix-neutral-22;
     border: $pix-neutral-25 solid 1px;
-    color: $pix-neutral-70;
   }
 
   &--checked {
     @include checkmarkColor($pix-neutral-70);
 
-    border: $pix-neutral-22 solid 1px;
-    background-color: $pix-neutral-20;
-    color: $pix-neutral-70;
     padding: 3px 8px;
+    color: $pix-neutral-70;
+    background-color: $pix-neutral-20;
+    border: $pix-neutral-22 solid 1px;
 
     &:hover {
       @include checkmarkColor($pix-neutral-70);
 
+      color: $pix-neutral-70;
       background-color: $pix-neutral-22;
       border: $pix-neutral-25 solid 1px;
-      color: $pix-neutral-70;
     }
 
     & label {
@@ -76,11 +76,11 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   &:focus-within {
     @include checkmarkColor($pix-neutral-0);
 
-    background-color: $pix-neutral-60;
     color: $pix-neutral-0;
-    box-shadow: 0 0 0 1px $pix-neutral-60;
+    background-color: $pix-neutral-60;
     border-color: $pix-neutral-0;
     outline: none;
+    box-shadow: 0 0 0 1px $pix-neutral-60;
 
     &:hover {
       @include checkmarkColor($pix-neutral-70);

package/addon/styles/_pix-sidebar.scss

@@ -1,10 +1,10 @@
 .pix-sidebar__overlay {
   position: fixed;
-  z-index: 1000;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
+  z-index: 1000;
   overflow-y: scroll;
   background-color: rgba(52, 69, 99, 0.7);
   transition: all 0.3s ease-in-out;
@@ -24,10 +24,10 @@ $button-margin: 16px;
 .pix-sidebar {
   display: flex;
   flex-direction: column;
-  height: 100%;
   max-width: 320px;
-  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+  height: 100%;
   background: $pix-neutral-0;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
   transform: translate(0);
   transition: transform 0.3s ease-in-out;
 
@@ -36,19 +36,19 @@ $button-margin: 16px;
   }
 
   &__header {
-    border-bottom: 1px solid $pix-neutral-20;
-    padding: $sidebar-padding;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: $sidebar-padding;
+    border-bottom: 1px solid $pix-neutral-20;
   }
 
   &__close-button {
     flex-shrink: 0;
 
     @include device-is('tablet') {
-      height: $tablet-close-button-size;
       width: $tablet-close-button-size;
+      height: $tablet-close-button-size;
     }
   }
 
@@ -61,8 +61,8 @@ $button-margin: 16px;
     @extend %pix-title-s;
 
     margin-bottom: 0;
-    color: $pix-neutral-90;
     padding-right: $mobile-close-button-size + $space-between-title-and-close-button;
+    color: $pix-neutral-90;
 
     @include device-is('tablet') {
       padding-right: $tablet-close-button-size + $space-between-title-and-close-button;

package/addon/styles/_pix-tag.scss

@@ -2,15 +2,15 @@
   @extend %pix-body-s;
 
   display: inline-block;
+  padding: 4px 16px;
+  color: $pix-neutral-0;
+  font-weight: $font-medium;
+  white-space: nowrap;
   text-align: center;
   vertical-align: baseline;
-  white-space: nowrap;
-  padding: 4px 16px;
+  background-color: $pix-primary;
   border: 1px solid transparent;
   border-radius: 0.95rem;
-  color: $pix-neutral-0;
-  background-color: $pix-primary;
-  font-weight: $font-medium;
 
   &--blue-light {
     color: $pix-primary-80;
@@ -67,9 +67,9 @@
   &--compact {
     @extend %pix-body-xs;
 
-    font-weight: $font-medium;
-    text-transform: uppercase;
     padding: 4px 13px;
+    font-weight: $font-medium;
     line-height: inherit;
+    text-transform: uppercase;
   }
 }

package/addon/styles/_pix-textarea.scss

@@ -1,12 +1,12 @@
 .pix-textarea {
   textarea {
     width: 100%;
-    border: 1px solid $pix-neutral-40;
-    border-style: solid;
-    border-radius: 4px;
     padding: 10px 16px;
     color: $pix-neutral-90;
     font-size: 0.875rem;
+    border: 1px solid $pix-neutral-40;
+    border-style: solid;
+    border-radius: 4px;
     resize: vertical;
 
     @include hoverFormElement();
@@ -18,12 +18,12 @@
   }
 
   p {
-    color: $pix-neutral-45;
-    margin-top: 6px;
-    font-size: 12px;
     display: flex;
     flex-direction: row-reverse;
+    margin-top: 6px;
     margin-bottom: 0;
+    color: $pix-neutral-45;
+    font-size: 12px;
   }
 
   &__label {

package/addon/styles/_pix-toggle.scss

@@ -10,32 +10,32 @@
 
   &__button {
     width: fit-content;
+    margin-top: $pix-spacing-xxs;
+    padding: $pix-spacing-xxs;
     background-color: transparent;
     border: 1px solid $pix-neutral-30;
     border-radius: 4px;
-    padding: $pix-spacing-xxs;
-    margin-top: $pix-spacing-xxs;
   }
 
   &__on,
   &__off {
     display: inline-block;
-    border-radius: 4px;
     padding: $pix-spacing-xs;
     color: $pix-neutral-70;
+    border-radius: 4px;
 
     @extend %pix-body-s;
   }
 
   &__off {
-    background-color: $pix-neutral-45;
     color: $pix-neutral-0;
+    background-color: $pix-neutral-45;
   }
 
   &--inline {
     flex-direction: row;
-    align-items: center;
     gap: $pix-spacing-xxs;
+    align-items: center;
   }
 
   &--inline,
@@ -50,13 +50,13 @@
   &--pressed {
     .pix-toggle {
       &__on {
-        background-color: $pix-neutral-45;
         color: $pix-neutral-0;
+        background-color: $pix-neutral-45;
       }
 
       &__off {
-        background-color: transparent;
         color: inherit;
+        background-color: transparent;
       }
     }
   }

package/addon/styles/_pix-tooltip.scss

@@ -1,8 +1,8 @@
 .pix-tooltip {
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 
   &__trigger-element {
     display: block;
@@ -11,19 +11,19 @@
 }
 
 .pix-tooltip__content {
-  display: none;
-  opacity: 0;
-  pointer-events: none;
-  background-color: $pix-neutral-100;
   position: absolute;
+  left: auto;
   z-index: 100;
+  display: none;
   padding: 8px 16px;
-  left: auto;
   color: $pix-neutral-0;
   font-size: 0.875rem;
-  border-radius: 6px;
   line-height: 1.4rem;
+  background-color: $pix-neutral-100;
+  border-radius: 6px;
+  opacity: 0;
   transition: opacity 0.3s;
+  pointer-events: none;
 
   &--visible {
     display: block;
@@ -35,10 +35,10 @@
   }
 
   &::before {
-    content: '';
     position: absolute;
-    border-width: 5px;
     border-style: solid;
+    border-width: 5px;
+    content: '';
   }
 
   &--wide {
@@ -46,16 +46,16 @@
   }
 
   &--light {
+    color: $pix-neutral-60;
     font-weight: $font-medium;
     background-color: $pix-neutral-0;
-    color: $pix-neutral-60;
     box-shadow: 0 6px 24px 0 rgba($pix-neutral-70, 0.14);
 
     &::before {
-      border-width: 0;
-      height: 8px;
       width: 8px;
+      height: 8px;
       background-color: $pix-neutral-0;
+      border-width: 0;
     }
   }
 }
@@ -71,8 +71,8 @@
 
   &.pix-tooltip__content--light::before {
     left: -5px;
-    transform: rotate(315deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(315deg);
   }
 }
 
@@ -89,8 +89,8 @@
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
-    transform: rotate(225deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(225deg);
   }
 }
 
@@ -107,8 +107,8 @@
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
     left: calc(100% - 26px);
-    transform: rotate(225deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(225deg);
   }
 }
 
@@ -123,8 +123,8 @@
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
-    transform: rotate(225deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(225deg);
   }
 }
 
@@ -141,8 +141,8 @@
 
   &.pix-tooltip__content--light::before {
     top: -5px;
-    transform: rotate(45deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(45deg);
   }
 }
 
@@ -159,8 +159,8 @@
   &.pix-tooltip__content--light::before {
     top: -5px;
     left: calc(100% - 26px);
-    transform: rotate(45deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(45deg);
   }
 }
 
@@ -175,8 +175,8 @@
 
   &.pix-tooltip__content--light::before {
     top: -5px;
-    transform: rotate(45deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(45deg);
   }
 }
 
@@ -191,7 +191,7 @@
 
   &.pix-tooltip__content--light::before {
     right: -5px;
-    transform: rotate(135deg);
     border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    transform: rotate(135deg);
   }
 }

package/addon/styles/normalize-reset/_normalize.scss

@@ -38,8 +38,8 @@ main {
    */
   
 h1 {
-  font-size: 2em;
   margin: 0.67em 0;
+  font-size: 2em;
 }
   
 /* Grouping content
@@ -62,8 +62,8 @@ hr {
    */
   
 pre {
-  font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
+  font-family: monospace, monospace; /* 1 */
 }
   
 /* Text-level semantics
@@ -83,9 +83,9 @@ a {
    */
   
 abbr[title] {
-  border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
+  border-bottom: none; /* 1 */
 }
   
 /**
@@ -105,8 +105,8 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
+  font-family: monospace, monospace; /* 1 */
 }
   
 /**
@@ -124,9 +124,9 @@ small {
   
 sub,
 sup {
+  position: relative;
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
   
@@ -162,10 +162,10 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
+  margin: 0; /* 2 */
   font-size: 100%; /* 1 */
+  font-family: inherit; /* 1 */
   line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
 }
   
 /**
@@ -207,8 +207,8 @@ button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
-  border-style: none;
   padding: 0;
+  border-style: none;
 }
   
 /**
@@ -238,11 +238,11 @@ fieldset {
    */
   
 legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
   display: table; /* 1 */
+  box-sizing: border-box; /* 1 */
   max-width: 100%; /* 1 */
   padding: 0; /* 3 */
+  color: inherit; /* 2 */
   white-space: normal; /* 1 */
 }
   
@@ -288,8 +288,8 @@ textarea {
    */
   
 [type="search"] {
-  -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield; /* 1 */
 }
   
 /**
@@ -306,8 +306,8 @@ textarea {
    */
   
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
+  -webkit-appearance: button; /* 1 */
 }
   
 /* Interactive

package/addon/styles/normalize-reset/_reset.scss

@@ -20,16 +20,16 @@ body {
 }
 
 a {
-  text-decoration: none;
   color: inherit;
+  text-decoration: none;
   cursor: pointer;
 }
 
 button {
-  background-color: transparent;
+  padding: 0;
   color: inherit;
+  background-color: transparent;
   border-width: 0;
-  padding: 0;
   cursor: pointer;
 }
 
@@ -38,9 +38,9 @@ figure {
 }
 
 input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  border: 0;
 }
 
 ul,
@@ -63,8 +63,8 @@ h4,
 h5,
 h6 {
   margin: 0;
-  font-size: inherit;
   font-weight: inherit;
+  font-size: inherit;
 }
 
 p {
@@ -76,7 +76,7 @@ cite {
 }
 
 fieldset {
-  border-width: 0;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  border-width: 0;
 }