/* For both examples */
.draggable {
	margin: 10px;
}

.clearfix:after {
	content: "";
  	display: table;
  	clear: both;
}

#example1 {
	/* Use my custom .test class for styling */
	.test {
		width: 50%;
		background-color: yellow;
		height: 50px;

	  	&.bigger {
				width: 75%;
				height: 100px;
			}

			&.dragged {
				border: 1px solid red;
			}

			&.placeholder {
				opacity: 0.5;
			}
	 }
}

#example2 {
	/* Use the default .draggable class for styling */
	.draggable {
		height: 50px;
	  background-color: yellow;
		width: 100px;

		&.bigger {
			width: 200px;
			height: 100px;
		}

		&.placeholder {
			opacity: 0.5;
			color: white;
			background-color: red;
			text-align: center;
		}
	}
}

#example3 {
	/* Use the default .draggable class for styling */
	.draggable {
		float: left;
		width: 25%;
		height: 150px;
		background-color: yellow;

		&.dragged {
			border: 1px solid red;
		}

		&.placeholder {
			opacity: 0.5;
		}
	}
}