scss/typography: let typography handle text color

This commit is contained in:
Kazhnuz 2018-10-24 11:30:53 +02:00
parent d6828eaf21
commit 62db59cf39
3 changed files with 87 additions and 90 deletions

View File

@ -282,6 +282,64 @@ mark {
width: 100%;
display: block; }
/* 2.6.1 - Colored texts */
.text-blue {
color: #4e63c9; }
.text-violet {
color: #ce4dcd; }
.text-purple {
color: #7951c0; }
.text-red {
color: #e33d22; }
.text-orange {
color: #eb790a; }
.text-green {
color: #75b82d; }
.text-skyblue {
color: #42a0f3; }
.text-dark {
color: #2D2D2D; }
.text-light {
color: #eeeeec; }
.text-turquoise {
color: #46bd9e; }
.text-yellow {
color: #f6d32d; }
.text-brown {
color: #986a44; }
.text-grey {
color: #77767b; }
.text-primary {
color: #e33d22; }
.text-secondary {
color: #2D2D2D; }
.text-warning {
color: #eb790a; }
.text-danger {
color: #e33d22; }
.text-info {
color: #42a0f3; }
.text-success {
color: #75b82d; }
/*
* 3 - Global elements ( _global.scss )
*
@ -1153,65 +1211,6 @@ a.list-group-item:hover {
background-color: #cdebad;
color: black; }
/* TEXT */
.text-blue {
color: #4e63c9; }
.text-violet {
color: #ce4dcd; }
.text-purple {
color: #7951c0; }
.text-red {
color: #e33d22; }
.text-orange {
color: #eb790a; }
.text-green {
color: #75b82d; }
.text-skyblue {
color: #42a0f3; }
.text-dark {
color: #2D2D2D; }
.text-light {
color: #eeeeec; }
.text-turquoise {
color: #46bd9e; }
.text-yellow {
color: #f6d32d; }
.text-brown {
color: #986a44; }
.text-grey {
color: #77767b; }
.text-primary {
color: #e33d22; }
.text-secondary {
color: #2D2D2D; }
.text-warning {
color: #eb790a; }
.text-danger {
color: #e33d22; }
.text-info {
color: #42a0f3; }
.text-success {
color: #75b82d; }
/* Clear-Typography overrides */
.card-meta {
border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);

View File

@ -39,10 +39,6 @@
color: darken($background-color, 80%);
}
@mixin text-color($text-color) {
color: $text-color;
}
/* CARDS */
.card {
@ -177,30 +173,3 @@
&-info { @include alert-color($color-info); }
&-success { @include alert-color($color-success); }
}
/* TEXT */
.text {
&-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); }
&-purple { @include text-color($color-purple); }
&-red { @include text-color($color-red); }
&-orange { @include text-color($color-orange); }
&-green { @include text-color($color-green); }
&-skyblue { @include text-color($color-skyblue); }
&-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); }
&-turquoise { @include text-color($color-turquoise); }
&-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); }
&-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); }
&-danger { @include text-color($color-danger); }
&-info { @include text-color($color-info); }
&-success { @include text-color($color-success); }
}
/* Clear-Typography overrides */

View File

@ -227,3 +227,32 @@ mark {
width: 100%;
display: block;
}
/* 2.6.1 - Colored texts */
@mixin text-color($text-color) {
color: $text-color;
}
.text {
&-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); }
&-purple { @include text-color($color-purple); }
&-red { @include text-color($color-red); }
&-orange { @include text-color($color-orange); }
&-green { @include text-color($color-green); }
&-skyblue { @include text-color($color-skyblue); }
&-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); }
&-turquoise { @include text-color($color-turquoise); }
&-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); }
&-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); }
&-danger { @include text-color($color-danger); }
&-info { @include text-color($color-info); }
&-success { @include text-color($color-success); }
}