scss/typography: let typography handle text color
This commit is contained in:
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%;
|
width: 100%;
|
||||||
display: block; }
|
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 )
|
* 3 - Global elements ( _global.scss )
|
||||||
*
|
*
|
||||||
|
@ -1153,65 +1211,6 @@ a.list-group-item:hover {
|
||||||
background-color: #cdebad;
|
background-color: #cdebad;
|
||||||
color: black; }
|
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 {
|
.card-meta {
|
||||||
border-radius: 0px 0px 0px 0px;
|
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);
|
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%);
|
color: darken($background-color, 80%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin text-color($text-color) {
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CARDS */
|
/* CARDS */
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
@ -177,30 +173,3 @@
|
||||||
&-info { @include alert-color($color-info); }
|
&-info { @include alert-color($color-info); }
|
||||||
&-success { @include alert-color($color-success); }
|
&-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%;
|
width: 100%;
|
||||||
display: block;
|
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