Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added Algolia Docsearch to docs website #1365
Added Algolia Docsearch to docs website #1365
Changes from 8 commits
fcfc8b2
7614a21
bb5be19
fe497ca
9d30415
77428b1
c427145
d4ad754
2517a8a
bb3a7c3
0b07023
9156577
814e2e9
09ff2ad
a16f453
5a6d195
3f5a944
05eea2d
5b1dacf
7c9e00d
232ed8c
3236957
fa7f566
89f9c8e
82507a9
9632db7
76d31b1
ba09a7b
File filter
Filter by extension
Conversations
Jump to
There are no files selected for viewing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if you import this inside a style tag, you will be able to use cascade layers like this:
this will avoid the need for
!important
when overriding variablesThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the idea! I tried this but unfortunately could not get it working. Even with importing into the cascade layer, I found some styles applied outside the layer. I could not figure out why.
Here is the current code. Can you please take a look?
https://github.com/iTwin/iTwinUI/pull/1365/files#diff-595fc35b63ffd581acefb86333565cf14eb0a0747438807742a45f57f98e4ebdR18-R30
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a bug in astro that they are not interested in fixing. withastro/astro#5857
You might be able to work around it by adding the variables to
body
instead of:root
.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I am now using
body
and I don't need!important
anymore. The Algolia styles still appear outside the cascade layer, but the<style>
that containsbody
(instead of:root
) appears higher in the layer specificity list. Just wondering, why could that be the case?Here is the screenshot where the first layer is the Algolia class, the second layer with
body
are my classes, the third layer with:root
is the duplicate layer, and the fourth layer are the algolia styles inside the cascade layer.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
are you asking why
body
variables take preference over:root
? that's because they are lower in the dom tree, so they override anything above it, regardless of specificity.the layer issue is also just a dev-only thing. i'd suggest inspecting prod build to confirm everything is working
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
body
has a specificity of(0, 0, 1)
and:root
has a specificity of(0, 1, 0)
. So I first was a bit confused regarding whybody
took preference over:root
.Upon looking in the inpect panel, I saw that the layer with
body
is higher list of layers in the inspect panel. But I am not sure why did thebody
layer appear higher than the:root
layer and thus override the styles in the layer with:root
.Sounds good, will inspect prod version.