Use CSS custom properties for colors

This commit is contained in:
Penar Musaraj 2021-03-15 10:19:02 -04:00
parent 1ef4900c0f
commit 7947c0a702

View File

@ -34,24 +34,24 @@
//underline navigation links
.nav-pills > li.active > a,
.nav-pills > li > a.active {
color: $primary;
color: var(--primary);
font-weight: 500;
background-color: $secondary;
border-bottom: 3px solid $tertiary;
background-color: var(--secondary);
border-bottom: 3px solid var(--tertiary);
}
//remove highlighting navigation background on hover
.nav-pills > li > a:hover {
background-color: $secondary;
background-color: var(--secondary);
}
//fix color of user profile navigation icons
.user-main .nav-pills {
a.active i {
color: $primary;
color: var(--primary);
}
a:hover:not(.active) i {
color: $quaternary;
color: var(--quaternary);
}
}
@ -99,7 +99,7 @@
.embedded-posts.top.topic-body {
box-shadow: none;
background-color: $secondary;
background-color: var(--secondary);
}
//darken color, remove shadow and border when pressed
@ -124,13 +124,13 @@
bottom: 30px;
right: 50px;
z-index: z("composer", "content") - 1;
background-color: $tertiary;
color: $secondary;
background-color: var(--tertiary);
color: var(--secondary);
white-space: nowrap;
overflow: hidden;
.d-icon {
margin: 0;
color: $secondary;
color: var(--secondary);
}
.d-button-label {
display: inline-block;
@ -151,7 +151,7 @@
}
#create-topic.btn-default .fa-plus {
color: $secondary;
color: var(--secondary);
}
#create-topic.btn-default:hover {
@ -168,20 +168,20 @@
position: absolute;
top: 55px;
left: -10px;
background-color: $tertiary;
background-color: var(--tertiary);
@include buttonShadow;
overflow: hidden;
width: 60px;
height: 60px;
@include buttonTransition;
.d-icon {
color: $secondary;
color: var(--secondary);
}
}
//Increase size of reply icon
.widget-button.btn.create .fa-reply {
color: $secondary;
color: var(--secondary);
font-size: 20px;
}