Color of moving squares

creativetimofficial / blk-design-system

232 stars 137 forks source link

Color of moving squares #1

Closed Viper7171 closed 5 years ago

Viper7171 commented 5 years ago

How do I change the colors of those floating squares on the main page that use header-filter? Like to bg-warning color.

JKannekens commented 5 years ago

You can change the colour of the moving squares by editing the blk-design-system.css. Find .index-page .squares its somewhere around line 16408.

.index-page .squares { animation: move-left-right 1s infinite; background: #ba54f5; background: -webkit-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); background: -o-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); background: -moz-linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); background: linear-gradient(0deg, #ba54f5 0%, #e14eca 100%); position: absolute; transition: 0.5s ease-out; overflow: hidden; border-radius: 20%; }

(Change the highlighted gradient with your color)

Viper7171 commented 5 years ago

Thanks

adonix-dev commented 4 years ago

To change the color of the moving scuares if you use SCSS go in assets/scss/blk-design-systm/angular/_*page.scss ( default: _exemple-pages.scss )
You can change the colors variables in assets/scss/blk-design-systm/custom/variables.scss ( default : $danger-states and $danger)