mirror of
https://github.com/papercss/papercss
synced 2024-06-08 00:42:20 +02:00
Refactored colours to make them more dynamic
This commit is contained in:
parent
2efe012411
commit
a1f5bea832
|
@ -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();
|
|
@ -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();
|
Loading…
Reference in a new issue