Refactored colours to make them more dynamic

This commit is contained in:
Fraham 2017-11-01 15:37:52 +00:00
parent 2efe012411
commit a1f5bea832
2 changed files with 23 additions and 47 deletions

View file

@ -40,21 +40,6 @@
.child-borders > * {
border: 2px solid @primary;
}
.border-primary {
border-color: @primary;
}
.border-secondary {
border-color: @secondary;
}
.border-success {
border-color: @success;
}
.border-warning {
border-color: @warning;
}
.border-danger {
border-color: @danger;
}
.border-white {
border-color: #FFF;
}
@ -66,4 +51,14 @@
}
.border-thick {
border-width: 5px;
}
}
.make-border-color-classes(@i: length(@colors)) when (@i > 0) {
.make-border-color-classes(@i - 1);
@color: extract(@colors, @i);
.border-@{color} {
color: @@color;
}
}
.make-border-color-classes();

View file

@ -13,36 +13,17 @@
@warning-light: lighten(@warning, 30%);
@danger-light: lighten(@danger, 45%);
// Mixin to create colors from list
.text-primary {
color: @primary;
}
.text-secondary {
color: @secondary;
}
.text-success {
color: @success;
}
.text-warning {
color: @warning;
}
.text-danger {
color: @danger;
}
.background {
&-primary {
background-color: @primary-light;
@colors: primary, secondary, success, warning, danger;
.make-text-color-classes(@i: length(@colors)) when (@i > 0) {
.make-text-color-classes(@i - 1);
@color: extract(@colors, @i);
.text-@{color} {
color: @@color;
}
&-secondary {
background-color: @secondary-light;
.background-@{color}{
color: ~"@{@{color}-light}";
}
&-success {
background-color: @success-light;
}
&-warning {
background-color: @warning-light;
}
&-danger {
background-color: @danger-light;
}
}
}
.make-text-color-classes();