search

Daemonite / material

Material Design for Bootstrap 4
http://daemonite.github.io/material/
MIT License
3.2k stars 725 forks source link

Change color to tabs line #230

Closed vincenzopalazzo closed 4 years ago

vincenzopalazzo commented 4 years ago

Hello,

I'm new in the bootstrap and I have and question to personalize this library.

I'm using the Tabs component an now I want to change the color the line under the tab selected also I want to change the text color selected with the different to the color tab unselected

This is my project screen Selection_040

Selection_041 I want the color line yellow and I want when I will select the new tab the color text yellow.

This is a question and not an issue, Exist a simple mode inside the library to resolve my problem?

djibe commented 4 years ago

Hi, best way would be to customize SCSS to theme whole CSS (and remove components you don't need).

If you want to keep it simple, here is what you need : 

.nav-tabs .nav-link.active {
    color: orange;
}
.nav-tabs .nav-link::before {
    background-color: orange;
}
djibe commented 4 years ago

If you want a more modern Material look, you can use my fork of Material UI : https://raw.githubusercontent.com/djibe/material/master/css/material.min.css

vincenzopalazzo commented 4 years ago

Thanks, @djibe I have resolved this problem override the propriety with scss

This is the code

.nav-tabs{

  .nav-link.active{
    color: $personal-lime !important;
  }

  .nav-link::before{
    background-color: $personal-lime !important;

  }
}
sesemaya commented 4 years ago

Hi @vincenzopalazzo

Your override should work.

If you are importing Material, another workaround is to change the default values of the following variables: