mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 19:36:24 +00:00
a4a3dbb95e
* Add react layout grid playground * Add BookWidget and style * Rename basic.js back to main.js
139 lines
3.1 KiB
CSS
139 lines
3.1 KiB
CSS
.react-grid-layout {
|
|
position: relative;
|
|
transition: height 200ms ease;
|
|
}
|
|
.react-grid-item {
|
|
transition: all 200ms ease;
|
|
transition-property: left, top;
|
|
}
|
|
.react-grid-item img {
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
.react-grid-item.cssTransforms {
|
|
transition-property: transform;
|
|
}
|
|
.react-grid-item.resizing {
|
|
z-index: 1;
|
|
will-change: width, height;
|
|
}
|
|
|
|
.react-grid-item.react-draggable-dragging {
|
|
transition: none;
|
|
z-index: 3;
|
|
will-change: transform;
|
|
}
|
|
|
|
.react-grid-item.dropping {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.react-grid-item.react-grid-placeholder {
|
|
background: #1976d2;
|
|
opacity: 0.2;
|
|
transition-duration: 100ms;
|
|
z-index: 2;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.react-grid-item > .react-resizable-handle {
|
|
position: absolute;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.react-grid-item > .react-resizable-handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0.3em;
|
|
bottom: 0.3em;
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
border-right: 2px solid #1976d2;
|
|
border-bottom: 2px solid #1976d2;
|
|
}
|
|
|
|
.react-resizable-hide > .react-resizable-handle {
|
|
display: none;
|
|
}
|
|
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
|
|
bottom: 0;
|
|
left: 0;
|
|
cursor: sw-resize;
|
|
transform: rotate(90deg);
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
|
|
bottom: 0;
|
|
right: 0;
|
|
cursor: se-resize;
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
|
|
top: 0;
|
|
left: 0;
|
|
cursor: nw-resize;
|
|
transform: rotate(180deg);
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
|
|
top: 0;
|
|
right: 0;
|
|
cursor: ne-resize;
|
|
transform: rotate(270deg);
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
|
|
top: 50%;
|
|
margin-top: -10px;
|
|
cursor: ew-resize;
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
|
|
left: 0;
|
|
transform: rotate(135deg);
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
|
|
right: 0;
|
|
transform: rotate(315deg);
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
|
|
left: 50%;
|
|
margin-left: -10px;
|
|
cursor: ns-resize;
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
|
|
top: 0;
|
|
transform: rotate(225deg);
|
|
}
|
|
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
|
|
bottom: 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.react-grid-item.react-grid-placeholder {
|
|
background: #90caf9;
|
|
opacity: 0.4;
|
|
transition-duration: 100ms;
|
|
z-index: 2;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.react-grid-item > .react-resizable-handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0.3em;
|
|
bottom: 0.3em;
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
border-right: 2px solid #90caf9;
|
|
border-bottom: 2px solid #90caf9;
|
|
}
|
|
}
|