cps-message v1.0.1

Message Web Component

Install

npm install cps-message

Usage

<cps-message
  type="info"
  heading="Info"
  text="Lorem ipsum..."
>
</cps-message>

Properties

CSS Variables

--cps-font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

--cps-success-bg-color: #edf7ed;
--cps-success-font-color: #4caf50;
--cps-success-icon-color: #4caf50;

--cps-error-bg-color: #fdecea;
--cps-error-font-color: #ec5541;
--cps-error-icon-color: #ec5541;

--cps-warning-bg-color: #fff4e5;
--cps-warning-font-color: #de7c0c;
--cps-warning-icon-color: #de7c0c;

--cps-info-bg-color: #e8f4fd;
--cps-info-font-color: #69aada;
--cps-info-icon-color: #69aada;

--cps-body-padding: 1.5625rem  /* 25/16 */;
--cps-content-padding: 0.1875rem  /* 3/16 */ 0 0 2.8125rem  /* 45/16 */;
--cps-font-weight: 600;
--cps-heading-mb: 0.625rem  /* 10/16 */;
--cps-heading-font-size: 1.125rem  /* 18/16 */;
--cps-text-mb: 1.25rem  /* 20/16 */;
--cps-text-font-size: 0.875rem  /* 14/16 */;

Overwrite CSS Variables

<style>
  cps-message {
    --cps-success-bg-color: green;
  }
</style>
<cps-message
  type="info"
  heading="Info"
  text="Lorem ipsum..."
>
</cps-message>

Browser compatibility

• Chrome
• Edge
• Firefox
• Safari
• Opera

Changelog

1.0.1

• Release 19.05.2020
  • Removed message interface

1.0.0

• Release 12.05.2020

Built with StencilJS