discourse/app/assets/stylesheets/common
Osama Sayegh eff6e4b405
FIX: Position Float Kit elements correctly in RTL mode (#24908)
Float-kit elements (menus/tooltips) are positioned where they should be by setting an inline `left` property in JavaScript when they're rendered. For some reasons, we also set `left: 0` on float-kit elements here:

25d9927785/app/assets/stylesheets/common/float-kit/d-menu.scss (L11-L15)

This property is overridden by the inline property that the library sets in JavaScript. However, in RTL mode, all of our scss files are flipped where everything left becomes right and vice versa. In this case, the `left: 0` property in the scss file above becomes `right: 0`.

This results in a conflict specific to RTL mode where both the `left` and `right` properties are defined on the same absolute-positioned element; the `right` property will always be set to 0 because it comes from the (flipped) scss file above, and the inline `left` property will be set to some px amount determined in JavaScript.

The `right` property will take precedence over the inline `left` property due to the page being right-to-left (source: https://developer.mozilla.org/en-US/docs/Web/CSS/right#description) and this causes float-kit elements to incorrectly always stick to the right.

This commit removes the `left: 0` property altogether for float-kit elements from our scss files. It's not clear from git history why the property was added, and removing it doesn't seem to cause any issues.

Meta topic: https://meta.discourse.org/t/positioning-issues-with-rtl-locales-after-recent-updates/280220?u=osama
2023-12-15 13:16:31 +03:00
..
admin FIX: Further improvements for plugin list (#24622) 2023-11-30 10:53:17 +10:00
base UX: Align icon with username in menu panel (#24854) 2023-12-12 15:32:16 -06:00
components DEV: Add file_size_restriction site setting type (#24704) 2023-12-13 16:22:48 -07:00
float-kit FIX: Position Float Kit elements correctly in RTL mode (#24908) 2023-12-15 13:16:31 +03:00
foundation UX: have svg icons inherit colour (#24871) 2023-12-13 15:34:29 +01:00
login UX: Invite signup page styling + separation (#24293) 2023-11-08 12:57:06 +01:00
modal UX: login modal sizing fixes (#24794) 2023-12-08 17:21:37 +01:00
select-kit UX: make summary 100% height (#24649) 2023-11-30 12:29:26 +01:00
table-builder DEV: Port discourse-table-builder theme component to core (#24441) 2023-11-30 10:54:29 -08:00
d-editor.scss FIX: Form template form error visiblity (#24779) 2023-12-07 12:26:56 -08:00
font-variables.scss
input_tip.scss A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
loading-slider.scss DEV: Make loading spinner implementation consistent with slider (#24480) 2023-11-21 16:40:10 +00:00
printer-friendly.scss FEATURE: remove category badge style options, set bullet style as default (#24198) 2023-11-13 10:46:15 -05:00
software-update-prompt.scss REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
topic-entrance.scss REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
topic-timeline.scss UX: improve touch, swipe, panning performance on mobile menus (#23775) 2023-10-16 11:27:00 -07:00
whcm.scss A11Y: Improve accessibility in WHCM themes (#18606) 2022-10-17 07:07:46 -07:00