@1024pix/pix-ui 11.1.0

package/addon/styles/_pix-select.scss

@@ -0,0 +1,71 @@
+.pix-select {
+  @import 'reset-css';
+
+  position: relative;
+
+  @mixin pixSelect {
+    appearance: none;
+    border: 1px $grey-40 solid;
+    border-radius: 4px;
+    color: $grey-90;
+    font-family: $font-roboto;
+    font-size: 0.875rem;
+    height: 36px;
+    max-width: 100%;
+    text-overflow: ellipsis;
+
+    @include hoverFormElement();
+    @include focusFormElement();
+    @include focusWithinFormElement();
+  }
+
+  select {
+    @include pixSelect;
+    padding: 0 32px 0 16px;
+
+    &.pix-select--big {
+      height: 44px;
+    }
+
+    &::-ms-expand {
+      display: none;
+    }
+  }
+
+  input {
+    @include pixSelect;
+    padding: 0 8px 0 16px;
+
+    &.pix-select--big {
+      height: 44px;
+    }
+
+    // Remove arrow for Chrome
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+
+    &.pix-select--is-valid:focus,
+    &.pix-select--is-valid:focus-within {
+      border-color: $green;
+    }
+  }
+
+  &__icon {
+    font-size: 11px;
+    color: $grey-30;
+    right: 10px;
+    top: calc(50% - 6px);
+    padding: 0 0 2px;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &__label {
+    @include label();
+  }
+
+  .pix-select__label ~ .pix-select__icon {
+    top: calc(50% + 6px);
+  }
+}

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

@@ -0,0 +1,86 @@
+$checkmark-width: 0.625rem;
+$checkmark-width-with-space: $checkmark-width + 0.438rem;
+@mixin checkmarkColor($borderColor) {
+  
+  input[type="checkbox"]:checked + label::before {
+    position: absolute;
+    top: 6px;
+    left: 8px;
+    width: $checkmark-width;
+    height: 0.3125rem;
+    border: 2px solid;
+    border-color: $borderColor;
+    border-top: none;
+    border-right: none;
+    transform: rotate(-45deg);
+    content: "";
+  }
+}
+
+.pix-selectable-tag {
+  @import 'reset-css';
+  display: inline-block;
+  text-align: center;
+  position: relative;
+  padding: 3px calc(8px + #{$checkmark-width-with-space} / 2);
+  letter-spacing: 0.009rem;
+  border-radius: 0.75rem;
+  border: $grey-30 solid 1px;
+  color: $grey-60;
+  background-color: $white;
+  font-family: $font-roboto;
+  font-size: 0.8125rem;
+  font-weight: $font-normal;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  label {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: $grey-22;
+    border: $grey-25 solid 1px;
+    color: $grey-70;
+  }
+  
+  &--checked {
+    @include checkmarkColor($grey-70);
+    border: $grey-22 solid 1px;
+    background-color: $grey-20;
+    color: $grey-70;
+    padding: 3px 8px;
+
+    &:hover {
+      @include checkmarkColor($grey-70);
+      background-color: $grey-22;
+      border: $grey-25 solid 1px;
+      color: $grey-70;
+    }
+
+    & label {
+      padding-left: $checkmark-width-with-space;
+    }
+  }
+
+  &:focus-within {
+    @include checkmarkColor($white);
+    background-color: $blue-zodiac;
+    color: $white;
+    box-shadow: 0 0 0 1px $blue-zodiac;
+    border-color: $white;
+    outline: none;
+
+    &:hover {
+      @include checkmarkColor($grey-70);
+      color: $grey-70;
+      background-color: $grey-22;
+      border: $grey-25 solid 1px;
+    }
+  }
+}

package/addon/styles/_pix-stars.scss

@@ -0,0 +1,43 @@
+.pix-stars {
+  @import 'reset-css';
+
+  > svg {
+    width: 36px;
+    height: 36px;
+  }
+
+  &--blue > &__acquired {
+    fill: $blue;
+  }
+
+  &--blue > &__unacquired {
+    fill: #e9eafc;
+  }
+
+  &--grey > &__acquired {
+    fill: $grey-40;
+  }
+  &--grey > &__unacquired {
+    fill: white;
+    stroke: $grey-40;
+  }
+
+  &__acquired {
+    fill: url(#pix-stars-default);
+  }
+
+  &__unacquired {
+    fill: #e9eafc;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}

package/addon/styles/_pix-tag.scss

@@ -0,0 +1,69 @@
+.pix-tag {
+  @import 'reset-css';
+
+  display: inline-block;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+  padding: 4px 16px;
+
+  font-family: $font-roboto;
+  font-size: 0.8125rem;
+  font-weight: $font-normal;
+
+  border: 1px solid transparent;
+  border-radius: 0.75rem;
+
+  color: $white;
+  background-color: $blue;
+
+  &--blue-light {
+    color: darken($blue, 10%);
+    background-color: lighten($blue, 30%);
+  }
+
+  &--green {
+    background-color: $green;
+  }
+
+  &--green-light {
+    color: $green;
+    background-color: lighten($green, 65%);
+  }
+
+  &--purple {
+    background-color: $purple;
+  }
+
+  &--purple-light {
+    color: darken($purple, 10%);
+    background-color: lighten($purple, 30%);
+  }
+
+  &--yellow {
+    color: $grey-90;
+    background-color: $yellow;
+  }
+
+  &--yellow-light {
+    color: darken($yellow, 25%);
+    background-color: lighten($yellow, 35%);
+  }
+
+  &--grey {
+    color: $grey-15;
+    background-color: $grey-60;
+  }
+
+  &--grey-light {
+    color: $grey-60;
+    background-color: $grey-15;
+  }
+
+  &--compact {
+    font-size: 0.6875rem;
+    font-weight: $font-medium;
+    text-transform: uppercase;
+    padding: 4px 13px;
+  }
+}

package/addon/styles/_pix-textarea.scss

@@ -0,0 +1,39 @@
+.pix-textarea {
+  @import 'reset-css';
+
+  textarea {
+    width: 100%;
+    border: 1px solid $grey-40;
+    border-style: solid;
+    border-radius: 4px;
+    padding: 10px 16px;
+    font-family: $font-roboto;
+    color: $grey-90;
+    font-size: 0.875rem;
+    resize: vertical;
+
+    @include hoverFormElement();
+    @include focusFormElement();
+
+    &.pix-textarea--error {
+      @include formElementInError();
+    }
+  }
+
+  p {
+    color: $grey-45;
+    margin-top: 6px;
+    font-size: 12px;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-bottom: 0;
+  }
+
+  &__label{
+    @include label();
+  }
+
+  &__error-message {
+    @include errorMessage();
+  }
+}

package/addon/styles/_pix-tooltip.scss

@@ -0,0 +1,196 @@
+.pix-tooltip {
+  @import 'reset-css';
+
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > *:first-child:hover + .pix-tooltip__content,
+  & > *:first-child:focus + .pix-tooltip__content{
+    display: block;
+    opacity: 1;
+  }
+}
+
+.pix-tooltip__content {
+  display: none;
+  opacity: 0;
+  pointer-events: none;
+  background-color: $grey-100;
+  position: absolute;
+  z-index: 100;
+  padding: 8px 16px;
+  left: auto;
+  color: $white;
+  font-family: $font-roboto;
+  font-size: 0.875rem;
+  border-radius: 6px;
+  line-height: 1.4rem;
+  transition: opacity 0.3s;
+
+  &--inline {
+    white-space: nowrap;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    border-width: 5px;
+    border-style: solid;
+  }
+
+  &--wide {
+    width: 382px;
+  }
+
+  &--light {
+    font-weight: $font-medium;
+    background-color: $white;
+    color: $grey-60;
+    box-shadow: 0px 6px 24px 0px rgba($grey-70, 0.14);
+
+    &::before {
+      border-width: 0px;
+      height: 8px;
+      width: 8px;
+      background-color: $white;
+    }
+  }
+}
+
+.pix-tooltip__content--right {
+  left: calc(100% + 10px);
+
+  &::before {
+    top: calc(50% - 5px); // 50% is the height of the parent and 5px the height of the triangle
+    left: -10px; // 10px is width of the ::before elmt
+    border-color: transparent $grey-100 transparent transparent;
+  }
+
+  &.pix-tooltip__content--light::before {
+    left: -5px;
+    transform: rotate(315deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}
+
+.pix-tooltip__content--top {
+  bottom: calc(100% + 10px);
+  left: 50%; // 50% here is the parent width
+  transform: translate(-50%); // 50% here is the width of this current element
+
+  &::before {
+    top: 100%;
+    left: calc(50% - 5px);
+    border-color: $grey-100 transparent transparent transparent;
+  }
+
+  &.pix-tooltip__content--light::before {
+    top: calc(100% - 5px);
+    transform: rotate(225deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}
+
+.pix-tooltip__content--top-left {
+  bottom: calc(100% + 10px);
+  transform: translate(calc(-50% + 22px));
+
+  &::before {
+    top: 100%;
+    left: calc(100% - 27px);
+    border-color: $grey-100 transparent transparent transparent;
+  }
+
+  &.pix-tooltip__content--light::before {
+    top: calc(100% - 5px);
+    left: calc(100% - 26px);
+    transform: rotate(225deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}
+
+.pix-tooltip__content--top-right {
+  bottom: calc(100% + 10px);
+  transform: translate(calc(50% - 22px));
+
+  &::before {
+    top: 100%;
+    border-color: $grey-100 transparent transparent transparent;
+  }
+
+  &.pix-tooltip__content--light::before {
+    top: calc(100% - 5px);
+    transform: rotate(225deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}
+
+.pix-tooltip__content--bottom {
+  top: calc(100% + 10px);
+  left: 50%;
+  transform: translate(-50%);
+
+  &::before {
+    top: -10px;
+    left: calc(50% - 5px);
+    border-color: transparent transparent $grey-100 transparent;
+  }
+
+  &.pix-tooltip__content--light::before {
+    top: -5px;
+    transform: rotate(45deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}
+
+.pix-tooltip__content--bottom-left {
+  top: calc(100% + 10px);
+  transform: translate(calc(-50% + 22px));
+
+  &::before {
+    top: -10px;
+    left: calc(100% - 27px);
+    border-color: transparent transparent $grey-100 transparent;
+  }
+
+  &.pix-tooltip__content--light::before {
+    top: -5px;
+    left: calc(100% - 26px);
+    transform: rotate(45deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}
+
+.pix-tooltip__content--bottom-right {
+  top: calc(100% + 10px);
+  transform: translate(calc(50% - 22px));
+
+  &::before {
+    top: -10px;
+    border-color: transparent transparent $grey-100 transparent;
+  }
+
+  &.pix-tooltip__content--light::before {
+    top: -5px;
+    transform: rotate(45deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}
+
+.pix-tooltip__content--left {
+  right: calc(100% + 10px);
+
+  &::before {
+    top: calc(50% - 5px);
+    right: -10px;
+    border-color: transparent transparent transparent $grey-100;
+  }
+
+  &.pix-tooltip__content--light::before {
+    right: -5px;
+    transform: rotate(135deg);
+    border-color: $grey-40 transparent transparent $grey-40;
+  }
+}

package/addon/styles/_reset-css.scss

@@ -0,0 +1,36 @@
+ul, ol, li, form, fieldset, legend
+{
+	margin: 0;
+	padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
+
+fieldset,img { border: 0; }
+
+legend { color: #000; }
+
+li { list-style: none; }
+
+sup { vertical-align: text-top; }
+
+sub { vertical-align: text-bottom; }
+
+table
+{
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+caption, th, td
+{
+	text-align: left;
+	vertical-align: top;
+	font-weight: normal;
+}
+
+abbr, acronym
+{
+	border-bottom: .1em dotted;
+	cursor: help;
+}

package/addon/styles/_spacing.scss

@@ -0,0 +1,9 @@
+// See https://zeroheight.com/8dd127da7/p/6877af-layout/t/053b83
+
+$spacing-xxs: 4px;
+$spacing-xs: 8px;
+$spacing-s: 16px;
+$spacing-m: 24px;
+$spacing-l: 32px;
+$spacing-xl: 40px;
+$spacing-xxl: 48px;

package/addon/styles/addon.scss

@@ -0,0 +1,41 @@
+@import 'breakpoints';
+@import 'colors';
+@import 'fonts';
+@import 'spacing';
+@import 'form';
+@import 'pix-background-header';
+@import 'pix-banner';
+@import 'pix-block';
+@import 'pix-button-base';
+@import 'pix-button';
+@import 'pix-collapsible';
+@import 'pix-filter-banner';
+@import 'pix-icon-button';
+@import 'pix-message';
+@import 'pix-multi-select';
+@import 'pix-progress-gauge';
+@import 'pix-return-to';
+@import 'pix-select';
+@import 'pix-stars';
+@import 'pix-tag';
+@import 'pix-textarea';
+@import 'pix-tooltip';
+@import 'pix-button-link';
+@import 'pix-button-upload';
+@import 'pix-input';
+@import 'pix-input-password';
+@import 'pix-radio-button';
+@import 'pix-input-code';
+@import 'pix-selectable-tag';
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: $font-roboto;
+}
+
+* {
+  box-sizing: border-box;
+}

package/app/components/pix-background-header.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-background-header';

package/app/components/pix-banner.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-banner';

package/app/components/pix-block.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-block';

package/app/components/pix-button-link.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-button-link';

package/app/components/pix-button-upload.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-button-upload';

package/app/components/pix-button.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-button';

package/app/components/pix-collapsible.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-collapsible';

package/app/components/pix-filter-banner.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-filter-banner';

package/app/components/pix-icon-button.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-icon-button';

package/app/components/pix-input-code.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-input-code';

package/app/components/pix-input-password.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-input-password';

package/app/components/pix-input.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-input';

package/app/components/pix-message.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-message';

package/app/components/pix-multi-select.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-multi-select';

package/app/components/pix-progress-gauge.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-progress-gauge';

package/app/components/pix-radio-button.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-radio-button';

package/app/components/pix-return-to.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-return-to';

package/app/components/pix-select.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-select';

package/app/components/pix-selectable-tag.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-selectable-tag';

package/app/components/pix-stars.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-stars';

package/app/components/pix-tag.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-tag';

package/app/components/pix-textarea.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-textarea';

package/app/components/pix-tooltip-deprecated.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-tooltip-deprecated';

package/app/components/pix-tooltip.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-tooltip';