cbscroll-top
v1.0.2
Published
π₯ Take the user π to the top of the page with just one click π.
Downloads
4
Maintainers
Readme
- π¨ Demo
- π Documentation
- π¬ Description
- π¦ Installation
- βΆοΈ Getting started
- π¨ Colors
π Demo
π Documentation
π Description
π¦ Installation
// To install using npm
npm install sass-colors -S
// To install using yarn
yarn add sass-colors
βΆοΈ Getting started
// If you use nodejs, reactjs, vuejs or angular
@import "node_modules/sass-colors/src/colors.scss";
// You can also download it directly and import the file colors.scss, as follows
@import "src/colors.scss";
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
@import "src/colors.scss";
body {
// First parameter receives the name of the main color, and as a second parameter requires the name of the secondary color
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
background: color("red", "base");
}
.button {
background: color("blue", "accent-1");
color: white;
border: 1px solid color("blue", "darken-1");
}
// I will explain more clearly!
// First we import this color map for this example.
/**
| Main Color | Color value |
**/
$deep-red: (
"base": #e51c23,
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
// When you execute the function that requires two parameters
/**
color($primary-color, $secondary-color)
**/
π¨ Colors
| NΒ° | Name | Lighten | Darken | Accent | |----|-------------|---------|--------|--------| | 1 | deep-red | βοΈ | βοΈ | β | | 2 | red | βοΈ | βοΈ | βοΈ | | 3 | pink | βοΈ | βοΈ | βοΈ | | 4 | purple | βοΈ | βοΈ | βοΈ | | 5 | deep-purple | βοΈ | βοΈ | βοΈ | | 6 | indigo | βοΈ | βοΈ | βοΈ | | 7 | blue | βοΈ | βοΈ | βοΈ | | 8 | light-blue | βοΈ | βοΈ | βοΈ | | 9 | cyan | βοΈ | βοΈ | βοΈ | | 10 | teal | βοΈ | βοΈ | βοΈ | | 11 | green | βοΈ | βοΈ | βοΈ | | 12 | light-green | βοΈ | βοΈ | βοΈ | | 13 | lime | βοΈ | βοΈ | βοΈ | | 15 | yellow | βοΈ | βοΈ | βοΈ | | 16 | amber | βοΈ | βοΈ | βοΈ | | 17 | orange | βοΈ | βοΈ | βοΈ | | 18 | deep-orange | βοΈ | βοΈ | βοΈ | | 19 | brown | βοΈ | βοΈ | β | | 20 | blue-grey | βοΈ | βοΈ | β | | 21 | grey | βοΈ | βοΈ | β |
π¨ Shades
| NΒ° | Name | Ligthen | Darken | Accent | |----|-------------|---------|--------|--------| | 22 | black | β | β | β | | 23 | white | β | β | β | | 24 | transparent | β | β | β |
β Support for
Sass-colors is an open source project licensed by MIT. You can grow thanks to the sponsors and the support of the amazing sponsors. If you want to join them, contact me here.
π© Stay in touch
- Author Yoni Calsin
- Twitter Yoni Calsin
This project follows the all-contributors specification. Contributions of any kind welcome!
π License
Sass-colors is MIT licensed.