@rebilly/instruments 3.13.2-beta.0 → 3.13.4-beta.0

package/src/style/components/accordion.js

@@ -0,0 +1,140 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the accordion component.
+// -----------------------------------------------------------------------------
+
+export const accordion = () => `
+  /* ACCORDION CLOSED */
+  .rebilly-instruments-accordion {
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    padding: 0 calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    background: var(--rebilly-colorBackground);
+    transition: border 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+    margin: var(--rebilly-spacings-s) 0;
+    border-radius: var(--rebilly-borderRadius);
+    overflow: hidden;
+    opacity: 0.7;
+  }
+
+  .rebilly-instruments-accordion:hover {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-accordion:first-of-type {
+    margin-top: 0;
+  }
+
+  .rebilly-instruments-accordion:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-s)) calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    margin: 0px calc(-1 * calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs)));
+    background: var(--rebilly-colorBackground);
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
+    position: relative;
+    width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    height: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    border-radius: 50%;
+    opacity: 0;
+    background: var(--rebilly-colorText);
+    margin-left: var(--rebilly-spacings-m);
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark::after {
+    content: '';
+    position: absolute;
+    border: solid var(--rebilly-colorBackground);
+    width: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-2xs));
+    height: calc(var(--rebilly-spacings-xs) - var(--rebilly-spacings-2xs) + 2px);
+    border-width: 2px 2px 0 0;
+    border-radius: 2px;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-60%) translateX(-50%) rotate(135deg);
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-accordion-summary:hover .rebilly-instruments-accordion-summary-checkmark {
+    opacity: 0.5;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary > img {
+    margin-right: var(--rebilly-spacings-s);
+    height: auto;
+    max-width: 40px;
+    width: 100%;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
+    margin: 0;
+    font-weight: 500;
+    flex: 2;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure {
+    margin: auto;
+    padding: 0;
+    height: 26px;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure img {
+    width: auto;
+    height: 100%;
+    border-radius: var(--rebilly-borderRadius);
+    margin-right: var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands span {
+    color: var(--rebilly-colorMutedText);
+    margin: 0 0 0 var(--rebilly-spacings-xs);
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    line-height: 1;
+  }
+
+  /* ACCORDION OPENED */
+  .rebilly-instruments-accordion[open] {
+    padding: 0 calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs)) calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    opacity: 1;
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary {
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    margin-bottom: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
+    background: var(--rebilly-colorText);
+    opacity: 1;
+  }
+
+  @media screen and (max-width: 600px) {
+    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure:nth-child(2),
+    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure:nth-child(3) {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands {
+      display: none;
+    }
+  }
+`;

package/src/style/components/address.js

@@ -0,0 +1,55 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the address component.
+// -----------------------------------------------------------------------------
+export const address = () => `
+  /**
+  * Address
+  */
+  .rebilly-instruments-address {
+    margin: 0 0 var(--rebilly-spacings-base);
+    color: var(--rebilly-colorMutedText);
+    font-style: normal;
+  }
+
+  /**
+   * Address Name: Default
+   */
+  .rebilly-instruments-address-name-default {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Combined
+   */
+  .rebilly-instruments-address-name-combined {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Stacked
+   */
+  .rebilly-instruments-address-name-stacked {
+    /* No style changes */
+  }
+
+  /**
+   * Address Region: Default
+   */
+  .rebilly-instruments-address-region-default {
+    /* No style changes */
+  }
+
+  /**
+   * Address Region: Split
+   */
+  .rebilly-instruments-address-region-split {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Stacked
+   */
+  .rebilly-instruments-address-region-stacked {
+    /* No style changes */
+  }
+`;

package/src/style/components/button.js

@@ -0,0 +1,117 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------
+export const button = () => `
+  /**
+  * Buttons
+  */
+  .rebilly-instruments-button {
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
+    padding: var(--rebilly-spacings-button-py) var(--rebilly-spacings-button-px);
+    box-sizing: border-box;
+    background: var(--rebilly-buttonColorBackground);
+    color: var(--rebilly-buttonColorText);
+    border-radius: var(--rebilly-buttonBorderRadius);
+    font-weight: var(--rebilly-buttonFontWeight);
+    border: var(--rebilly-buttonBorder);
+    box-shadow: var(--rebilly-buttonBoxShadow);
+    margin: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s) / 2) 0;
+    width: 100%;
+    cursor: pointer;
+    min-height: 44px;
+    transition: all 0.2s ease;
+    outline: none;
+  }
+
+  .rebilly-instruments-button:not([disabled]):hover {
+    background: var(--rebilly-buttonHoverColorBackground);
+    color: var(--rebilly-buttonHoverColorText);
+    font-family: var(--rebilly-buttonHoverFontFamily);
+    font-size: var(--rebilly-buttonHoverFontSize);
+    line-height: var(--rebilly-buttonHoverFontLineHeight);
+    font-weight: var(--rebilly-buttonHoverFontWeight);
+    border: var(--rebilly-buttonHoverBorder);
+    border-radius: var(--rebilly-buttonHoverBorderRadius);
+    box-shadow: var(--rebilly-buttonHoverBoxShadow);
+  }
+
+  .rebilly-instruments-button:not([disabled]):active {
+    background: var(--rebilly-buttonActiveColorBackground);
+    color: var(--rebilly-buttonActiveColorText);
+    font-family: var(--rebilly-buttonActiveFontFamily);
+    font-size: var(--rebilly-buttonActiveFontSize);
+    line-height: var(--rebilly-buttonActiveFontLineHeight);
+    font-weight: var(--rebilly-buttonActiveFontWeight);
+    border: var(--rebilly-buttonActiveBorder);
+    border-radius: var(--rebilly-buttonActiveBorderRadius);
+    box-shadow: var(--rebilly-buttonActiveBoxShadow);
+  }
+
+  .rebilly-instruments-button.rebilly-instruments-button-secondary {
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
+    background: var(--rebilly-colorBackground);
+    color: var(--rebilly-buttonColorBackground);
+    border-color: var(--rebilly-buttonColorBackground);
+  }
+
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover,
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active {
+    color: var(--rebilly-buttonColorBackground);
+    background: var(--rebilly-colorBackground);
+  }
+
+  .rebilly-instruments-button:focus { 
+    box-shadow: 0 0 0 1px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-button:disabled,
+  .rebilly-instruments-button:disabled:hover { 
+    cursor: not-allowed;
+    opacity: 0.6; 
+  }
+
+  .rebilly-instruments-button::first-letter { text-transform: uppercase; }
+
+  .rebilly-instruments-button:first-of-type { margin-top: 0; }
+
+  .rebilly-instruments-button:last-of-type { margin-bottom: 0; }
+
+  .rebilly-instruments-button-group {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button {
+    margin: 0 var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
+    margin-left: 0;
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
+    margin-right: 0;
+  }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-button-group {
+      flex-direction: column-reverse;
+    }
+
+    .rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
+      margin: 0;
+    }
+  
+    .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
+      margin: 0;
+    }
+
+    .rebilly-instruments-button-group .rebilly-instruments-button + .rebilly-instruments-button {
+      margin-bottom: var(--rebilly-spacings-s);
+    } 
+  }
+`;

package/src/style/components/divider.js

@@ -0,0 +1,39 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the divider component.
+// -----------------------------------------------------------------------------
+export const divider = () => `
+  /**
+  * Divider
+  */
+  .rebilly-instruments-divider {
+    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    padding: var(--rebilly-spacings-base) 0;
+    margin: 0;
+    position: relative;
+    outline: 0;
+    border: 0;
+    text-align: center;
+  }
+
+  .rebilly-instruments-divider::before {
+    background: var(--rebilly-colorMutedBorder);
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+  }
+
+  .rebilly-instruments-divider .rebilly-instruments-divider-label {
+    color: var(--rebilly-colorMutedText);
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 0 var(--rebilly-spacings-s);
+    line-height: calc(var(--rebilly-fontSizeBase) * 0.875);
+    background-color: var(--rebilly-colorBackground);
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    position: relative;
+    display: inline-block;
+  }
+`;

package/src/style/components/forms/checkbox.js

@@ -0,0 +1,75 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the checkbox component.
+// -----------------------------------------------------------------------------
+export const checkbox = () => `
+  /**
+  * Checkbox
+  */
+  .rebilly-instruments-form-field-checkbox {
+    position: relative;
+    opacity: 1;
+    align-items: center;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
+    cursor: pointer;
+    transform: none;
+  }
+
+  .rebilly-instruments-form-field-checkbox > * {
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .rebilly-instruments-form-field-checkbox span {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    height: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    min-width: calc(var(--rebilly-spacings-m) - var(--rebilly-spacings-2xs));
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorMutedBorder);
+    margin-right: var(--rebilly-spacings-s);
+    background-color: transparent;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-checkbox span:after {
+    content: '';
+    position: absolute;
+    border: solid var(--rebilly-colorPrimary);
+    width: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-2xs));
+    height: calc(var(--rebilly-spacings-xs) - var(--rebilly-spacings-2xs) + 2px);
+    border-width: 2px 2px 0 0;
+    border-radius: 2px;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    transform: translateY(-60%) translateX(-50%) rotate(135deg);
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span {
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span:after {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:disabled ~ span {
+    opacity: 0.6;
+  }
+`;

package/src/style/components/forms/field.js

@@ -0,0 +1,56 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the field component.
+// -----------------------------------------------------------------------------
+export const field = () => `
+  /**
+  * Field
+  */
+  .rebilly-instruments-form-field {
+    margin: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-s)) 0;
+    position: relative;
+  }
+
+  .rebilly-instruments-form-field.is-compact {
+    margin-top: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s));
+    margin-bottom: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s));
+  }
+
+  .rebilly-instruments-form-field > div {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    position: relative;
+  }
+
+  /* Field group */
+  .rebilly-instruments-form-field-group {
+    margin: calc(calc(var(--rebilly-spacings-xs) * -1) - var(--rebilly-spacings-s)) 0;
+    display: flex;
+  }
+
+  .rebilly-instruments-form-field-group > * {
+    flex: 1 0;
+    margin-left: var(--rebilly-spacings-xs);
+    margin-right: var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-form-field-group > *:first-child {
+    margin-left: 0;
+  }
+
+  .rebilly-instruments-form-field-group > *:last-child {
+    margin-right: 0;
+  }
+
+  @media (max-width: 480px) {
+    .rebilly-instruments-form-field-group {
+      display: block;
+      margin: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s)) 0;
+    }
+
+    .rebilly-instruments-form-field-group > * {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+`;

package/src/style/components/forms/form.js

@@ -0,0 +1,18 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the form component.
+// -----------------------------------------------------------------------------
+export const form = () => `
+  /**
+  * Form
+  */
+  /* Chrome autocomplete styles */
+  .rebilly-instruments-form input:-webkit-autofill,
+  .rebilly-instruments-form input:-webkit-autofill:hover, 
+  .rebilly-instruments-form input:-webkit-autofill:focus,
+  .rebilly-instruments-form select:-webkit-autofill,
+  .rebilly-instruments-form select:-webkit-autofill:hover,
+  .rebilly-instruments-form select:-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--rebilly-colorText);
+    transition: background-color 5000s ease-in-out 0s, box-shadow 200ms, border 200ms;
+  }
+`;

package/src/style/components/forms/input.js

@@ -0,0 +1,77 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the input component.
+// -----------------------------------------------------------------------------
+export const input = () => `
+  /**
+  * Input
+  */
+  .rebilly-instruments-form-field-input {
+    font-size: var(--rebilly-inputFontSize);
+    font-family: var(--rebilly-inputFontFamily);
+    font-weight: var(--rebilly-inputFontWeight);
+    line-height: var(--rebilly-inputFontLineHeight);
+    padding: var(--rebilly-spacings-input-py) var(--rebilly-spacings-input-px);
+    min-height: var(--rebilly-spacings-form-element-min-height);
+    border: var(--rebilly-inputBorder);
+    border-radius: var(--rebilly-inputBorderRadius);
+    color: var(--rebilly-inputColorText);
+    background: var(--rebilly-inputColorBackground);
+    box-sizing: border-box;
+    box-shadow: var(--rebilly-inputBoxShadow);
+    width: 100%;
+    transition: all 200ms;
+    order: 1;
+  }
+
+  .rebilly-instruments-form-field-input:hover {
+    background: var(--rebilly-inputHoverColorBackground);
+    color: var(--rebilly-inputHoverColorText);
+    font-family: var(--rebilly-inputHoverFontFamily);
+    font-size: var(--rebilly-inputHoverFontSize);
+    line-height: var(--rebilly-inputHoverFontLineHeight);
+    font-weight: var(--rebilly-inputHoverFontWeight);
+    border: var(--rebilly-inputHoverBorder);
+    border-radius: var(--rebilly-inputHoverBorderRadius);
+    box-shadow: var(--rebilly-inputHoverBoxShadow);
+  }
+
+  .rebilly-instruments-form-field-input:focus {
+    outline: none;
+    background: var(--rebilly-inputFocusColorBackground);
+    color: var(--rebilly-inputFocusColorText);
+    font-family: var(--rebilly-inputFocusFontFamily);
+    font-size: var(--rebilly-inputFocusFontSize);
+    line-height: var(--rebilly-inputFocusFontLineHeight);
+    font-weight: var(--rebilly-inputFocusFontWeight);
+    border: var(--rebilly-inputFocusBorder);
+    border-radius: var(--rebilly-inputFocusBorderRadius);
+    box-shadow: var(--rebilly-inputFocusBoxShadow);
+  }
+
+  .rebilly-instruments-form-field-input::placeholder {
+    color: var(--rebilly-inputPlaceholderColorText);
+    font-family: var(--rebilly-inputPlaceholderFontFamily);
+    font-size: var(--rebilly-inputPlaceholderFontSize);
+    line-height: var(--rebilly-inputPlaceholderFontLineHeight);
+    font-weight: var(--rebilly-inputPlaceholderFontWeight);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-input::selection {
+    color: var(--rebilly-inputSelectionColorText);
+    background: var(--rebilly-inputSelectionColorBackground);
+  }
+
+  .rebilly-instruments-form-field-input:disabled {
+    opacity: 0.6;
+  }
+
+  /* Floating Labels */
+  .is-floating .rebilly-instruments-form-field-input::placeholder {
+    opacity: 0;
+  }
+
+  .is-floating .rebilly-instruments-form-field-input:focus::placeholder {
+    opacity: 1;
+  }
+`;

package/src/style/components/forms/label.js

@@ -0,0 +1,55 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the label component.
+// -----------------------------------------------------------------------------
+export const label = () => `
+  /**
+  * Label
+  */
+  .rebilly-instruments-form-field-label {
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.92);
+    line-height: calc(var(--rebilly-fontSizeBase) * 0.92);
+    margin-bottom: var(--rebilly-spacings-2xs);
+  }
+
+  /* Floating Labels */
+  .is-floating .rebilly-instruments-form-field-label {
+    font-size: var(--rebilly-fontSizeBase);
+    left: var(--rebilly-spacings-label-offset-left);
+    color: var(--rebilly-colorText);
+    top: 50%;
+    background: transparent;
+    opacity: 1;
+    position: absolute;
+    transform: translateY(-50%) scale(1);
+    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), background 0.35s cubic-bezier(0.19, 1, 0.22, 1);
+    cursor: text;
+    pointer-events: none;
+    transform-origin: left top;
+  }
+
+  /* Includes Google autocomplete fix */
+  .is-floating input:-webkit-autofill + .rebilly-instruments-form-field-label,
+  .is-floating input:-webkit-autofill:hover + .rebilly-instruments-form-field-label, 
+  .is-floating input:-webkit-autofill:focus + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill:hover + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill:focus + .rebilly-instruments-form-field-label {
+    padding: 0 var(--rebilly-spacings-2xs);
+    left: calc(var(--rebilly-spacings-label-offset-left) - var(--rebilly-spacings-2xs));
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
+    opacity: 1!important;
+    transform: translateY(-175%) scale(0.875);
+  }
+
+  .is-floating .rebilly-instruments-form-field-input:focus + .rebilly-instruments-form-field-label,
+  .is-floating .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
+  .is-floating .rebilly-instruments-form-field-label.is-active {
+    padding: 0 var(--rebilly-spacings-2xs);
+    left: calc(var(--rebilly-spacings-label-offset-left) - var(--rebilly-spacings-2xs));
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
+    opacity: 1;
+    transform: translateY(-175%) scale(0.875);
+  }
+`;