CODEWITHSUNDEEP
javascripthtmlcssless
John Lippson
John Lippson

Reputation: 1319

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

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);
},

Upvotes: 0

Views: 69

Answers (1)

Huangism
Huangism

Reputation: 16448

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.

Upvotes: 2

Related Questions