9718c517d9
Summary: This adds a web-based playground to try out Yoga. The playground uses yogas javascript bindings to use yoga within the browser. The layout tree can be modified and shared. Code generators for litho, ComponentKit and React Native allow the layout to be copied into any app. allow-large-files Reviewed By: emilsjolander Differential Revision: D6871601 fbshipit-source-id: 3b97c87e91d6bafe8e1c38b8b7eca8d372324c0b
52 lines
873 B
CSS
52 lines
873 B
CSS
.YogaNode {
|
|
background: white;
|
|
position: absolute;
|
|
transform: scale(1);
|
|
box-shadow: inset 0 0 0px 1px rgba(48, 56, 69, 0.2);
|
|
transition: 0.2s all, 0s outline, 0s box-shadow;
|
|
}
|
|
|
|
.YogaNode .YogaNode {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.YogaNode > .info {
|
|
position: absolute;
|
|
opacity: 0;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.YogaNode:hover > .info {
|
|
opacity: 1;
|
|
}
|
|
|
|
.YogaNode:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.YogaNode.focused {
|
|
box-shadow: 0 0 0 2px #0894fb, 0 0 15px rgba(0, 0, 0, 0.2),
|
|
inset 0 0 0px 1px rgba(255, 255, 255, 0.2);
|
|
z-index: 2;
|
|
}
|
|
|
|
.YogaNode.invisible {
|
|
transform: scale(0);
|
|
}
|
|
|
|
.YogaNode .label {
|
|
user-select: none;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
letter-spacing: 1px;
|
|
}
|