CODEWITHSUNDEEP
csssassbulma
JeanValjean
JeanValjean

Reputation: 17713

SASS solution to make inherited css styles disjoint

I'm using [Bulma] CSS framework1. This CSS framework provides default styles for tabs and dropdowns. For the tabs, it has (also) the following CSS

.tabs.is-boxed a {
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

while for dropdowns it has

a.dropdown-item {
  padding-right: 3rem;
  white-space: nowrap;
}

a.dropdown-item:hover {
  background-color: whitesmoke;
  color: #0a0a0a;
}

a.dropdown-item.is-active {
  background-color: #3273dc;
  color: #fff;
}

It means that if you have an html that more or less looks like the following

<div class="tabs">
 <ul>
   <li>

     <!-- DROPDOWN GOES HERE -->   
     <div class="dropdown is-active">
       <div class="dropdown-trigger">
         <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
           <span>Dropdown button</span>
           <span class="icon is-small">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
           </span>
         </button>
       </div>
       <div class="dropdown-menu" id="dropdown-menu" role="menu">
         <div class="dropdown-content">
           <a href="#" class="dropdown-item">
             Dropdown item
           </a>
         </div>
       </div>
     </div>
     <!-- DROPDOWN ENDS -->

   </li>
 </ul>
</div>

then the style applied to all the anchors included in the tabs class is also applied to the anchors in the dropdown. This will results in an horrible rendering.

Of course I could write my own CSS, but I think that it would be an horrible solution against common sense and design principles.

I wonder if I can fix somehow this situation by using SASS or just CSS in order to make the styles applied to the anchors that have the .dropdown-item disjoint by the one defined by tabs.a.

Upvotes: 0

Views: 70

Answers (1)

Quentin
Quentin

Reputation: 3289

You could rewrite the .tabs statement.

.tabs.is-boxed a:not(.dropdown-item) {
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

This way, it won't affect any dropdown anchor anymore.

Edit, Another way:

.tabs.is-boxed a.dropdown-item {
  border: none;
  border-radius: 0;
}

Upvotes: 2

Related Questions