kolos.mixins v1.0.0

kolos.mixins

Import

@import (reference) "mixins";

Mixins list

• triangle
• grid
• for
• placeholder
• pseudo
• bg
• square
• ellipsis
• burger

Usage

triangle

.figure {
	.triangle(top, 22px);
}

grid

//create simple grid:
.grid(~'.gridSelector'; ~'.itemSelector'; 4; 30px);

//create adaptive grid:
@adaptiveState1000px: 1000px, 3, 20px;
@adaptiveState700px: 700px, 2, 10px;
@adaptiveState400px: 400px, 1;

.grid(~'.gridSelector'; ~'.itemSelector'; 4; 30px; @adaptiveState1000px, @adaptiveState700px, @adaptiveState400px);

for

@colors: #1abc9c, #2ecc71, #3498db, #9b59b6;

.for(@colors, {
	.color-@{i} {
		color: @value;
	}
});

placeholder

.input {
  .placeholder(red);
}

pseudo

.selector:after:extend(.pseudo) { }

bg

.selector {
	.bg();
}

square

.selector:extend(.square all) {}

ellipsis

.selector:extend(.ellipsis) {}

burger

.selector {
	.m-burger(21px, 13px, 1px, #000);
}