How do I control sp-button css?

Photoshop UXP Plugin API
1

Hi,
I placed an image inside an sp-button.
How do I control it’s
How do I control the sp-button padding inside?
I want all the buttons to have the same width.


A button is defined like this:
 <sp-button size="s" variant="secondary" class="methodWidth_split" id="select_A_split"
          style="background: url(./images/light/preButtonLight.png)">
 </sp-button>

CSS:

.methodWidth_split{
  border-radius: 15px;
  background-repeat: no-repeat;
  background-position: center;
  width: 50px;
  height: 30px;
  vertical-align: middle;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 2px;
  margin-left: 2px;
  margin-right: 2px;
}

The height is respected but the width not.

I also want to be able to change the inner color if possible.

image
image425×190 18.5 KB

2

If you want to achieve equal widths (while keeping your layout responsive as well), I think flexbox is the same solution. Just put the buttons in a wrapper and style it with

flex-grow: 1;
flex-basis: 0;

By inner color do you mean the background color or the color of the image? Since the image you provided is a PNG, there might not be a way to colorize it. In a normal browser environment you could use the CSS filter to change the hue, but I don’t think they’re available for UXP.

I’d recommend building such simple (shape) graphics as vectors and exporting them as an svg - then you can colorize it much better.

3

Thanks
The layout is not responsive. I set a fixed width for all sizes.
I tried applying the flex to either the parent of the button or teh button but it did not work.

What do you suggest modify below?

      <div id="methodPanel_split" class="hCenter">
        <sp-button size="s" variant="secondary" class="methodWidth_split" id="select_A_split"
          style="background: url(./images/light/preButtonLight.png)">
        </sp-button>
        <sp-button variant="secondary" class="methodWidth_split" id="select_V_split"
          style="background: url(./images/light/vButtonLight.png)">
        </sp-button>
        <sp-button variant="secondary" class="methodWidth_split" id="select_H_split"
          style="background: url(./images/light/hButtonLight.png)">
        </sp-button>
        <sp-button variant="secondary" class="methodWidth_split" id="select_M_split"
          style="background: url(./images/light/matButtonLight.png)">
        </sp-button>
        <input id="method_split" value="" type="hidden">
      </div>

CSS:

.methodWidth_split{
  border-radius: 14px;
  background-repeat: no-repeat;
  background-position: center;
  width: 45px;
  height: 30px;
  vertical-align: middle;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
  margin-left: 1px;
  margin-right: 1px;
}
4

Sorry, I meant to say “Just put the buttons in a wrapper and style the children with…” - the original sentence was wrong and misleading. This should work with your current setup:

#methodPanel_split {
   display: flex;
}

#methodPanel_split > * {
   flex-grow: 1;
   flex-basis: 0;
}

If you need gaps between flexbox items, you can give a margin to each child and a negative margin to the wrapper to get rid of the “outside” margin.

5

It works!
Thou the margin is still more then I would want.
Each inner image is 26px wide and the width of the button should be, in the case below 26px with 0 padding, yet i get hits:

image
image395×103 2.25 KB

BTW, what does the “> *” do? why does it not work if I place all the styles under a single CSS rule?

6

I would not suggest using * selector. In this case #methodPanel_split > sp-button would be better.

@karpiyon it’s a child combinator. Eg #methodPanel_split > sp-button

These buttons will match the selector:

      <div id="methodPanel_split">
        <sp-button size="s" variant="secondary" ></sp-button>
        <sp-button size="s" variant="secondary" ></sp-button>
      </div>

These will not:

    <div id="methodPanel_split">
      <div>
        <sp-button size="s" variant="secondary" ></sp-button>
        <sp-button size="s" variant="secondary" ></sp-button>
      </div>
    </div>