docs/app/styles/app.css
.demo {
font-size: 32px;
font-family: sans-serif;
}
.demo h2 {
font-size: 1em;
}
.demo h3 {
font-size: 1em;
color: gray;
}
.demo ol {
display: block;
margin: 0;
padding: 0;
list-style: none outside;
}
.demo footer {
margin-top: 2em;
font-size: 0.5em;
}
.demo .sortable-item {
padding: 4px;
transition: all 0.125s;
}
.demo .sortable-item.is-dragging {
transition-duration: 0s;
z-index: 10;
}
.demo .sortable-item .handle {
padding: 0 0.5em;
cursor: move;
display: flex;
flex-direction: column;
justify-content: center;
}
.vertical-demo .sortable-item {
display: block;
position: relative;
background: pink;
margin: 4px 0;
}
.vertical-demo .sortable-item.is-dragging {
background: red;
}
.vertical-demo .sortable-item.is-dropping {
background: #f66;
z-index: 10;
}
.vertical-demo .sortable-item .handle {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: rgba(71, 1, 1, 0.5);
color: pink;
}
.vertical-spacing-demo .sortable-item,
.vertical-distance-demo .sortable-item,
.vertical-doc-auto-scroll-demo .sortable-item {
display: block;
position: relative;
background: #58d3f7;
width: 50%;
line-height: 50px;
margin: 5px auto;
text-align: center;
}
.vertical-spacing-demo .sortable-item.is-dragging,
.vertical-distance-demo .sortable-item.is-dragging {
background: #a9e2f3;
}
.horizontal-demo {
overflow: auto;
white-space: nowrap;
}
.horizontal-doc-auto-scroll-demo {
white-space: nowrap;
}
.horizontal-doc-auto-scroll-demo ol {
padding-left: 0px;
}
.horizontal-doc-auto-scroll-demo .sortable-item {
width: 70px;
}
.horizontal-demo .sortable-item,
.horizontal-doc-auto-scroll-demo .sortable-item {
display: inline-block;
position: relative;
cursor: move;
background-color: hsl(197, 100%, 45%);
margin: 0 4px;
}
.horizontal-demo .sortable-item.is-dragging {
background: hsl(197, 100%, 35%);
}
.horizontal-demo .sortable-item.is-dropping {
background: hsl(197, 100%, 40%);
z-index: 10;
}
.table-demo table {
position: relative;
border-collapse: separate;
border-spacing: 2px;
}
.table-demo td,
.table-demo th {
border: 1px solid #ddd;
text-align: left;
padding: 0;
background: white;
}
.table-demo td:last-child,
.table-demo th:last-child {
padding: 0 1em 0 4px;
}
.table-demo .sortable-item .handle {
display: block;
background: transparent;
color: black;
}
.scrollable-demo .sortable-container {
height: 300px;
overflow-y: auto;
}
.scrollable-demo ol {
height: 500px;
}
.scrollable-demo .sortable-item {
display: block;
position: relative;
background: pink;
margin: 4px 0;
}
.scrollable-demo .sortable-item.is-dragging {
background: red;
}
.scrollable-demo .sortable-item.is-dropping {
background: #f66;
z-index: 10;
}
.scrollable-demo .sortable-item .handle {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: rgba(71, 1, 1, 0.5);
color: pink;
}
#ember-testing {
transform: none !important;
}
.sortable-item--active {
outline: 2px solid purple;
}
.sortable-handle-up,
.sortable-handle-down,
.sortable-handle-left,
.sortable-handle-right {
position: relative;
}
.sortable-handle-up:before,
.sortable-handle-down:after,
.sortable-handle-left:before,
.sortable-handle-right:after {
position: absolute;
left: 50%;
margin-left: -4px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 4px;
}
.sortable-handle-up:before {
top: -10px;
border-bottom-color: #000;
}
.sortable-handle-down:after {
bottom: -10px;
border-top-color: #000;
}
.sortable-handle-left:before {
top: 50%;
left: -10px;
border-right-color: #000;
}
.sortable-handle-right:after {
top: 50%;
left: calc(100% + 10px);
border-left-color: #000;
}
.word-break {
word-wrap: break-word;
}