Deprecated Design

❗️

Deprecation Warning

This design system is deprecated and will be removed in the future. Please use the Default Design for all new customizations.

The Deprecated Design is available for Yuno clients needing access to CSS class information. However, this option will be removed in the future.

Use the following links to navigate to the desired component:

• Input
• Dropdown
• Button
• Card
• Alert
• Modal

Input

The classes available for customizing the input element while using the Deprecated Design are listed in the following table.

The images below show how each class will affect the input element.

Error warning classes:

The images below show how each class will affect the input element.

Example (input). Add to card when calling yuno.startCheckout:

styles: `
  #root {
    // content
    .Yuno-text-field__content {
      // label
      .Yuno-text-field__label {
        color: white;
      }
      // input
      .Yuno-text-field__input {
        background: lavender;
        border-color: #35363E;
      }
      // input focus
      .Yuno-text-field__input:focus {
        border: '2px solid #35363E';
      }
    }
  }
`,

Result:

Dropdown

The classes available for customizing the dropdown element while using the Deprecated Design are listed in the following table.

The images below show how each class will affect the dropdown element.

Error warning classes:

The images below show how each class will affect the dropdown element.

Example (dropdown). Add to card when calling yuno.startCheckout.

styles: `
  #root {
    //dropdown
    .Yuno-select-field__content {
      .Yuno-select-field__label {
        color: white;
      }
      .Yuno-select-field__select-button {
        background: lavender;
        border-color: #35363E;
      }
      .Yuno-select-field__list {
        background: lavender;
        border-color: #35363E;
      }
    }
  }
`,

Result:

Button

The classes available for customizing the button element while using the Deprecated Design are listed in the following table.

The image below presents how each class will affect the button element.

Example (button). Add to card when calling yuno.startCheckout.

styles: `
  #root {
    .Yuno-button {
      background: rgb(40, 42, 48);
    }
  }
`,

Result:

Card

The classes available for customizing the card element while using the Deprecated Design are listed in the following table.

The image below presents how each class will affect the card element.

Example (card). Add to card when calling yuno.startCheckout.

styles: `
  #root {
    .Yuno-front-side-card__content {
      background: darkslateblue;
    }
  }
`,

Result:

Alert

The classes available for customizing the alert element while using the Deprecated Design are listed in the following table.

The image below presents how each class will affect the alert element.

Example (alert). Add to card when calling yuno.startCheckout.

styles: `
  .yuno-modal-user-form {
    .Yuno-Alert {
      background-color: black;
      .Yuno-Alert__message {
        color: white;
      }
    }
  }
`,

Result:

Modal

The modal element provides two options you can customize:

• Form Card Modal
• APM Modal

Modal customization requirements

Define the modal custom style directly in your web page.

Form Card Modal

Within the Form Card Modal, three iframes exist, where the card number input, expiration input, and CVV input are rendered separated. The name of the card owner is a standard input.

The classes available for customizing the form card modal element while using the Deprecated Design are listed in the following table.

The image below presents how each class will affect the form card modal element.

The code block below presents an example of how you can customize the form card modal element.

styles: `
  .yuno-modal__content {
    background: lavender !important;
  }
`,

Result:

APM Modal

The classes available for customizing the APM modal element while using the Deprecated Design are listed in the following table.

The image below presents how each class will affect the APM modal element.

The code block below presents an example of how you can customize the APM modal element.

styles: `
  .yuno-modal__content {
    background: rgb(40, 42, 48) !important;
  }

  .Yuno-select-field__content {
    .Yuno-select-field__label {
      color: white;
    }
  }

  .yuno-modal__content {
    .yuno-modal__header {
      .yuno-modal__title {
        color: white;
      }
    }
  }

  .yuno-modal-user-form {
    .yuno-user-form__heading.yuno-heading {
      color: white;
    }
  }

  .Yuno-text-field__content {
    .Yuno-text-field__label {
      color: white;
    }
  }

  .yuno-grid-phone label {
    color: white;
  }

  .yuno-user-form__form .yuno-terms-conditions {
    color: white;
  }
`,

Result: