Grouping common css rules based on condition in LESS/Javascript?

Question

I'm looking for some refactoring assistance to group common button properties under one rule to reduce the amount of code for my CSS rules.

The logic basically says if "show-footer" is true then I display two buttons side-by-side. Otherwise, I display one button with 100% width. I want to try and group whatever base button properties under that first rule, but not sure how to clean this up.

Is there any way to abstract that logic out from the two custom elements and put them into that first LESS rule to make it seem less brittle?

LESS

  > .editor-properties > .editor-btn-group > button {
    display: none;
  }
}

@{customElementNamespace}search-settings.show-save {
  > .editor-properties > .editor-btn-group > .editor-save {
    display: block;
    width: 100%;
  }
}

@{customElementNamespace}search-settings.save-cancel {
  > .editor-properties > .editor-btn-group > button {
    width: 49%;
    display: inline-block;
  }
}

HTML

<div class="editor-btn-group">
  <button class="editor-cancel is-negative">
      <span class="fa fa-times"></span>
      <span>
          Cancel
      </span>
  </button>
  <button class="editor-save is-positive">
       <span class="fa fa-floppy-o">
       </span>
      <span>
          Save
      </span>
  </button>
</div>

JS

showSave: function() {
    this.$el.toggleClass('show-save', this.options.showSave === true);
},
showCancel: function() {
    this.$el.toggleClass('save-cancel', this.options.showFooter === true);
},

Huangism · Accepted Answer · 2018-03-05 17:26:19Z

2

I believe you can achieve this with flex

You need flex-grow: 1 on the buttons so they will grow to your container width when there is only 1 button and justify-content: space-between on the container so the buttons are on the edge of let and right

div {
  display: flex;
  justify-content: space-between
}
button {
  flex-grow: 1;
}

<div class="editor-btn-group">
  <button class="editor-cancel is-negative">
      <span class="fa fa-times"></span>
      <span>
          Cancel
      </span>
  </button>
  <button class="editor-save is-positive">
       <span class="fa fa-floppy-o">
       </span>
      <span>
          Save
      </span>
  </button>
</div>

Now with only 1 button(pretend the other button is hidden), note the css is the same

div {
  display: flex;
  justify-content: space-between
}
button {
  flex-grow: 1;
}

<div class="editor-btn-group">
  <button class="editor-cancel is-negative">
      <span class="fa fa-times"></span>
      <span>
          Cancel
      </span>
  </button>
  
</div>

For displaying the buttons you just need

.show-save .editor-cancel,
.show-cancel .editor-save { 
    display: none;
}

The only way to reduce that anymore is that you create a class for display none and add/remove it via js.

edited Mar 5, 2018 at 17:26

answered Mar 5, 2018 at 16:40

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

John Lippson Over a year ago

I still need two buttons since they both have cancel and save, just on a conditional basis.

Huangism Over a year ago

Yes I know I am just showing you how both cases looks, your js/html is not changing.

John Lippson Over a year ago

Gotcha. I still need to account for conditional visibility though. How does that work in this case?

Huangism Over a year ago

Sorry what do you mean conditional visibility? You would show/hide the buttons the same way by setting display none to which button that needs it. Is that what you mean?

John Lippson Over a year ago

Correct. So based on the conditionals in the javascript I need to alter the visibility of the buttons. So do I still need 2 css rules for each of those buttons?

|

Collectives™ on Stack Overflow

Grouping common css rules based on condition in LESS/Javascript?

LESS

HTML

JS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

LESS

HTML

JS

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related