silverstripe-widgets/scss/WidgetAreaEditor.scss

@import "settings";

// root widget area editor container
.WidgetAreaEditor {
	h2 {
		
	}
	p {
		margin-bottom: 15px;
	}
}

// base styles for a widget
.Widget {
	padding: 0 7px 7px 7px;
	margin: 16px 0 16px 0;
	color: #1f1f1f;
	background-color: #b0bec7;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzkyYTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
	background-size: 100%;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #92a5b2));
	background-image: -webkit-linear-gradient(#b0bec7, #92a5b2);
	background-image: -moz-linear-gradient(#b0bec7, #92a5b2);
	background-image: -o-linear-gradient(#b0bec7, #92a5b2);
	background-image: linear-gradient(#b0bec7, #92a5b2);
	border-top: 1px solid #c2cdd4;
	border-bottom: 1px solid #748d9d;
	@include border-radius(3px);
	h3 {
		margin: 0;
		padding: 0;
		line-height: 40px;
		text-shadow: #bfcad2 1px 1px 0;
		@include transition-property(background-image);
		@include transition-duration(0.2s);
		@include transition-timing-function(ease-out);
	}
	.widgetDescription {
		background: #eceff1;
		padding: 5px 5px 1px 5px;
		margin: 0;
		@include border-radius(3px);
	}
	.widgetFields {
		background: #eceff1;
		padding: 5px;
		margin: 7px 0 0 0;
		@include border-radius(3px);
	}
}

// container for available widgets
.availableWidgetsHolder {
	width: 38%;
	float: left;
}

.availableWidgets {
	.Widget {
		h3 {
			cursor: pointer;
			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAA8tJREFUSImdlk1MHGUYx38zO7u4s18sC10DBItFEEttUAmaTtFTJ34c9MBc/Iw99qDRHjx6682D9lBvatJotibGaGrWg4k6mgBWuggWKA1oKcm2wLJfs7A7s+OB3XRZ2Q/4n2ae9//+/8/zJu/zvAIHQCSqB4CHAAtY0VQl22iPbdsACE2Iq8C7wGkBCpIkLQOCaZpduxLEgE+Bq5qqGAc2ikT1l4GPXE5pqzscynaHQ49LDoe/kmNaVmo1vjGzGt/w5AumG/gQ+EZTlXxDo0hUDwMXREF4buiRnlR7q/9ko6oB1rdSsblbt12WVZwEzmuqsl7TKBLVZeA7n+x2Dg/2nqyuoBlMzS7paSNXAF7QVGW7bCRWmDiBz3yy2zUy1Hf6MCYAI0N9ik92O4GPI1HdU46LFZyzDlEcGhnqU+oJpTLGYipjLDYyczhEBXitHHOUqnkQiDw5+PBOi8sZqiWwdi8xMXPzn561ewlZEIRrrT5PTy1uONSaX41vPPP3rdtfHT/Wky1X9JZPds/7vXJ/vUwTyXQO+B7Qs8a2WY/rbnF1+WT3KjAO94/ujYGjneF6Gw+Dgd7OI8CbAGIkqocFONKomgpsAwaCYDci+j3ygCgIgSs//iaLwBNOp/RvMw5504LdTjCTL5gNuwqAJDkywAkJOBH0eZLVhLV7iYmF5dVjNnhLIQtIAj8ArkQqo/w0+ZdB6fgFyA70di11drSNVuoEfZ5kfDM5LAEd+2WSSKZzNnyuqcr5Gsm+WPkTiepXNpOZ9s6Otv24XglI7bcSDHjd8c3ke5Go/k4pVASmNVV5OhLVu4DLwAggldYdbQHvHzWSuisB1xPp7CvVK50dbaOl7MpCTM8vb0ei+jkgGPR7GX60V67aNlr1TyKd9QMxCZgsmFZXjUz2wCk5bGAMcLp2vxvCNK0AcFPUVCVu2/adRm2l2rMZUipjLBZtOz1+5pRRvrBfLKysxQ9g1BQWVtbuAp/A/c7wZdrIHW1UVVvA6waeB8Y88gNSPW5uJ38nbeT6ga+hYh5FovpZhyi+/+xTxwfrCZSTadRJfr42N2dZxYvjZ05dqqwI4LJVLE5MzS7p9QT8Xrm/kcnU7JJuWcVfNFW5VI7tN8q/9cnu4GEmrGlZqekby7G0kdsCXtdUJfm/CVuBt9NGbkH/88b6+lYq1qzJ+lYq9vv1+eW0kZsAXtVUZU9bq/cKegm44HJKO93hUC4cau11t7j23LeqV5AEfKCpytVKzkHedWPAOUAB2l1Oac62oWCajwEbgA5c1FTl1/32l43+A2DVjDi0+ffsAAAAAElFTkSuQmCC');
			background-position: center right;
			background-repeat: no-repeat;
			&:hover {
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQAxLzUvMTOqzuI/AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAABANJREFUSImdlltsVFUUhr8znbZzbUO4VDPJcZqWSgfqxCalNT1tuEQOXh6UyHkQUQvEmKCxoTwY2wcSW4khEESiQIIXTKMZRGM0mMMDJHpqHILiNG0tnTYzGZwYCjV0rp3ScnxwJkxrOzPt/7bX/tf619rZe60tsAR4VK0ceASYBYKKLMXz+ei6DoBQQHAZaAdadF2/l4jHAoBgsdocgiAA+IDTwEVFlhJLFvKo2nPAsVg0crfvshrXLl96bCqZKMvmmMyWSPPmJ/ulrdutNnuZGTgEfKvI0nReIY+qVQCHZ2dmNp07/UFkyPe7O1/VAC53ve/FfftLSktNV4GDiizdWVTIo2oW4PtwKFh86miPe34FhaC9q0dziM57wNOKLE1lhAxZIsXAZ+FQsOR4d2fLckQAjnd3SuFQsBg44VE1a8ZuyOLsnU6lNhzv7pRyBRIrq0fEyuqRfGKp1JQEvJSxFaWreQjwfHTk3dTk3X9WLhZgo7TJ2/ZGh9jYstlyf3b2t4D/hrgY13ft12lp6/YnhsZufrW+SoxnKno1HAoOhwKjNbkyramtSwI/ANrDDnEmF3fi9rgjHAr+BeyEB0f38je9n1bkclwOLvR+sgZ4BcDgUbUKXdfX5KsmC1NAQid9nXLgZmDs0dmZmfLzl/osBqA+HouGClGw2O3wXyfot9rL8nYVgGQyEQPqjEDd2PDQ5HzCRmmT94Xd+6oEQbClTbPAJPAjULJ23XrpyJneBOnj13U9fuGLs6Ne7Upjdpyx4aFJd0PT40Zg9UKZ1NTWJQVB+FyRpYOLJPtM9sKjaufXujas8mpXFuLajEBkoR3/nwNmd0PTAY+qvZU23QeuK7LU5FE1B9ALNADG9H6Rf2jg2iJJjRuBP6rWuZ6fv+PVrjSms8sE4rUD70x5VG0/sMI/PMiZY+9Z5rk1zltTtc5VBviMwFWL1eZYJJM5SMSiOtAKFCei0by3DsBstpQDfoMiS7cMBkM4X1uZh+JCSGJl9UiR0Rjdua05kXmw53bsaru1BKGCsGNX2zjwITzoDF86RKczX1X+oQEz8BTQ+nc4ZMzFXbl6TdghOmuAryFrHnlUbe90KtXR+eae2lwBMsnk6yTdJ84OlppMJ3duaz6VXRFAb0lpqbe9q0fLFSAUGK3JJ9Le1aOVmkw/KbJ0KmNbaJR/Fw4FVyxnwprMlsjrHZ0+h+i8C+xWZGnyfxM2C3scovPGoaMf33G5632Firjc9b7O908EHKLTC+xSZGlOW8v1C3oWOByLRlJ9l9Xk9au/VE7cHp/z3kxmS0Tasq2/eYtstdnLjMDbiixdzOYs5V/XCuwHJGBVLBoZFAQBq83uAiYADTipyNLPC/lnhP4FKHOWW0c+c/gAAAAASUVORK5CYII=');
			}
		}
	}
}

// container for used widgets
.usedWidgetsHolder {
	width: 60%;
	float: right;
}

.usedWidgets {
	.Widget {
		h3 {
			cursor: move;
		}
		.deleteWidget {
			text-align: right;
			padding-top: 11px;
			margin-bottom: 3px;
		}
	}
}

.noWidgets {
	
}

// one column layout when space is limited
@media only screen and (max-width: 1279px) {
	.availableWidgetsHolder {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	.usedWidgetsHolder {
		width: 100%;
		float: none;
	}
}