mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-25 03:12:40 +00:00
1741abc3fe
Big change to how the AnchoredBox component is structured so that it can be used in more than just one spot. Now composed of the wrapper Anchored, with two children AnchoredTrigger and AnchoredBox, each of which can have their own arbitrary children. Next steps will involve renaming the component file to Anchored.jsx, moving most styling out of the attached stylesheet (and into brewRenderer.less), and adding props to pass in Anchor Positioning properties.
58 lines
1010 B
Plaintext
58 lines
1010 B
Plaintext
.anchored-trigger {
|
|
&.active {
|
|
background-color: #444444;
|
|
}
|
|
}
|
|
|
|
.anchored-box {
|
|
position:absolute;
|
|
top: 30px;
|
|
@supports (inset-block-start: anchor(bottom)){
|
|
inset-block-start: anchor(bottom);
|
|
}
|
|
justify-self: anchor-center;
|
|
visibility: hidden;
|
|
&.active {
|
|
visibility: visible;
|
|
}
|
|
padding : 15px;
|
|
color : white;
|
|
background-color : #555555;
|
|
border-radius : 5px;
|
|
font-size : .8em;
|
|
margin-top : 10px;
|
|
|
|
h1 {
|
|
border-bottom: 1px solid currentColor;
|
|
margin-bottom: 0.5em;
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
h2 {
|
|
color: lightgray;
|
|
border-bottom: 1px solid currentColor;
|
|
margin: 1em 0 0.5em 0;
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
width: 0px;
|
|
height: 0px;
|
|
position: absolute;
|
|
border: 10px solid transparent;
|
|
border-bottom: 10px solid #555555;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -20px;
|
|
pointer-events: none;
|
|
}
|
|
} |