common-chat-styles v1.0.8

Common chat elements

Module description

This module includes shared styles:

• colors - provides the most frequently used colors
• common - provides some common classes and mixins
• fonts - provides mixin for set up common fonts
• variables - provides common variables

How to use module

1. Allow project sass loader to load it.

path.resolve(__dirname, 'node_modules/common-chat-styles')

2. Add alias for more convenient usage.

'common-styles': path.resolve(__dirname, 'node_modules/common-chat-styles/core')

3. Import it in your sass file

@import "common-styles/common";

Code usage example

Mixin usage

// import all from common-styles/fonts
@import "common-styles/fonts";
// use mixin 'all-languages-fonts-setup' form common-styles/fonts
@include all-languages-fonts-setup();

Variable usage

// import all from common-styles/colors
@import "common-styles/colors";
// use $red variable form common-styles/colors
.btnEndChat {
  background-color: $red;
  ...
}

Class usage

// import all from common-styles/colors in related to tsx styles
@import "common-styles/common";

// use 'hidden' class from 'common-styles/common'
<div className={typingMessage
  ? styles.visible
  : styles.hidden}
/>