apps/demo/src/assets/css/example.css
body {
background-color: #942A57;
margin: 0 auto;
max-width: 760px;
}
html, body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body, input, button {
font-family: Georgia, Helvetica;
font-size: 17px;
color: #ecf0f1;
}
h1 {
text-align: center;
background-color: #AC5C7E;
margin-top: 20px;
margin-bottom: 0;
padding: 10px;
}
h3 {
background-color: rgba(255, 255, 255, 0.2);
border-bottom: 5px solid #A13462;
text-align: center;
padding: 10px;
}
h3 div {
margin-bottom: 10px;
}
.tagline {
margin-top: 0;
}
.promo {
margin-bottom: 0;
font-style: italic;
padding: 10px;
background-color: #ff4020;
border-bottom: 5px solid #c00;
}
a {
font-weight: bold;
}
a,
a:hover {
color: #ecf0f1;
}
pre {
white-space: pre-wrap;
}
pre code {
color: #fff;
font-size: 14px;
line-height: 1.3;
}
label {
display: block;
margin-bottom: 15px;
}
sub {
display: block;
margin-top: -10px;
margin-bottom: 15px;
font-size: 11px;
font-style: italic;
}
ul {
margin: 0;
padding: 0;
}
.parent {
background-color: rgba(255, 255, 255, 0.2);
margin: 50px 0;
padding: 20px;
}
input {
border: none;
outline: none;
background-color: #ecf0f1;
padding: 10px;
color: #942A57;
border: 0;
margin: 5px 0;
display: block;
width: 100%;
}
button {
background-color: #ecf0f1;
color: #942A57;
border: 0;
padding: 18px 12px;
margin-left: 6px;
cursor: pointer;
outline: none;
}
button:hover {
background-color: #e74c3c;
color: #ecf0f1;
}
.gh-fork {
position: fixed;
top: 0;
right: 0;
border: 0;
}
/* dragula-specific example page styles */
.wrapper {
display: table;
}
.container {
display: table-cell;
background-color: rgba(255, 255, 255, 0.2);
width: 50%;
}
.container:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.2);
}
/*
* note that styling gu-mirror directly is a bad practice because it's too generic.
* you're better off giving the draggable elements a unique class and styling that directly!
*/
.container div, .gu-mirror:not(.container) {
margin: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.2);
transition: opacity 0.4s ease-in-out;
}
.container div {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.gu-mirror {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.container .ex-moved {
background-color: #e74c3c;
}
.container.ex-over {
background-color: rgba(255, 255, 255, 0.3);
}
.handle {
padding: 0 5px;
margin-right: 5px;
background-color: rgba(0, 0, 0, 0.4);
cursor: move;
}