search

EragonJ / Trip.js

🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
https://eragonj.github.io/Trip.js/
MIT License
793 stars 111 forks source link

.trip-exposed use of background color is breaking the UI #175

Closed 71FIL closed 7 years ago

71FIL commented 7 years ago

There appears to be an issue with the use of background: white; in the default theme CSS. It seems to be impossible to not use that for elements that might have a background that is not white to start with. It is happening for a bootstrap button which has a dark green background: I don't want it to be changed but it ends up being white.

A work-around for this would be to wrap the element inside another element which would not affect the button background but it seems to be a little intrusive on the application.

Since the z-index of the exposed element is above the overlay, the non-greyed out look would seem to be enough.

EragonJ commented 7 years ago

Expose function was made in a rush before so it's kinda buggy to be honest. I have thought about which is the best way to expose elements but I didn't have a good conclusion because it mainly depends on the use case.

Since the z-index of the exposed element is above the overlay, the non-greyed out look would seem to be enough.

I think that in order to make it more like exposed from the other elements, maybe we can try to append an element with the same position of that exposed element but its width / height would be 1~2px wider with white background to make it look like really exposed. What do you think ? or is there any other better way ?

71FIL commented 7 years ago

For my needs, just removing the white background and relying on the overlay opacity not being applied on the exposed element is enough. Everything not exposed being grey, having the exposed element in the original color is totally fine. BTW I found the overlay opacity to be too high, I set it to 0.3 instead of 0.7.

What about a solid outline? The following is a little aggressive but makes the point. I just tried it and does not affect the layout, although in my case I would need to adjust some exposed element to get the right effect.

.trip-exposed {
  outline: solid 3px red;
}

The most important change here is not to change the background-color as it can't be undone, unset or reverted to the original value.

EragonJ commented 7 years ago

@71FIL looks like outline can be a better solution and it can be applied to every element based on the doc. Let me fix this part.