0

I have a sort of webshop, and on mobile when user selects filters, I want the filter button to have borders - this way user would know they have some of the filters applied. Respectively, when none of the filters applied, I want the button to go back to normal no-border state.

I can do this:

@include mobile {
    border: solid;
}

But this way, the border will appear always, which is not what I want. The filters which can be selected are located in another .scss file and folder, so I can't (?) link them to this file I'm working on. So is there any way I could achieve this using CSS/SASS, or will I have to apply some JS here?

Danylo Herasymov
  • 21
  • 7
  • _"The filters which can be selected are located in another .scss file"_ - the actual filtering _elements_ aren't, only their formatting is. For this question to become answerable, you should first of all show us an example of your HTML structure. (But most likely this will _not_ be possible using CSS alone, and will require some scripting logic.) – CBroe May 10 '22 at 11:17
  • Does this answer your question? [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) – Sigurd Mazanti May 10 '22 at 11:17
  • @SigurdMazanti not really: my problem is the element the style of which I want to change is different from an element that's going to be clicked – Danylo Herasymov May 10 '22 at 12:08

1 Answers1

0

Alright, so what you need to do is detect whether you have at least a filter applied or not. This requires some javascript to condition on it.

If the condition returns true(in your case meaning some filters are selected), you'll have to add a CSS class to the filter button that will make it have borders. Initially, your filter button shouldn't have any filters since we suppose that there are no filters when the user starts navigating.

so for example here's some scss:

    .filter-button{
         border:1px solid transparent; /* has a transparent border*/
         transition: border 0.3s ease-in-out; /*adds a cool transition when you 
         add the has-filters class*/
         &.has-filters{
         /*when the condition if (filters_exist) returns true, you add this class to 
          the HTML filter button which has the class .filter-button*/
          border:1px solid blue;
         }
     }
Charbel Kahwaji
  • 71
  • 6