Cassiopeia/tags x and font size

[hans2103]

Summary of Changes

This PR will convert the px values of choices css into relative sizes.
This PR will also increase font size selected tags.
This PR will also fix the position of the x in the multi select

Testing Instructions

• Login frontend
• Edit an article
• Go to tab "Publishing"
• Notice the position of the x at categories and notice the styling of present tags (add if none are present)
• Apply patch
• run npm run build:css
• Refresh page you are editing.

Expected result

Actual result

Documentation Changes Required

[richard67]

I've just tested.

Before applying PR, issue with Category "x" button see red mark:

After applying PR:

After applying PR with a tag with some letter in name which goes below the base line, i.e. g, j, q, y:

=> Just acceptable, but a little bit more margin (or padding or whatever) between text and the frame would be better, I think.

@hans2103 @chmst @drmenzelit What do you think?

[hans2103]

added inline-flex to improve alignment

[richard67]

@hans2103 Still a bit too little padding at top and bottom of the text, for my taste.

[hans2103]

[richard67]

@hans2103 There is still some RTL missing. Note the difference between the 2 screenshots regarding the space between the "X" and the vertical line which separates it from the tag title:

• LTR
  

• RTL
  

[hans2103]

Padding fixed

[richard67]

@hans2103 Now just a bit SCSS code style to be fixed. The linter finds following errors:

templates/cassiopeia/scss/vendor/choicesjs/choices.scss
 28:5  >  Expected "align-items" to come before "justify-content"   order/properties-order
 30:5  >  Expected "line-height" to come before "text-align"        order/properties-order

[richard67]

@hans2103 I just see it's not only code style to be fixed. There is still a difference between LTR and RTL regarding the padding of the "x".

See following comparison, LTR at the top, RTL below that:

[hans2103]

[richard67]

Looks equal now LTR and RTL:

[richard67]

The linter is happy now, too.

I have tested this PR ✅ with success.

[richard67]

Thanks!