scss/typography: let typography handle text color
This commit is contained in:
Kazhnuz
parent
d6828eaf21
commit
62db59cf39
3 changed files with 87 additions and 90 deletions
117
css/style.css
117
css/style.css
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue