Separate styling to a dedicated, separate css file

Resolves #49

includes/form.php

@@ -72,6 +72,7 @@ public function enqueue_scripts( $hook ) {
 			wp_enqueue_script( 'select2' );
 			wp_enqueue_script( 'underscore' );
 			wp_enqueue_script( 'jquery-ui-accordion' );
+			wp_enqueue_style( 'stream-notifications-form', WP_STREAM_NOTIFICATIONS_URL . '/ui/css/form.css' );
 			wp_enqueue_script( 'stream-notifications-form', WP_STREAM_NOTIFICATIONS_URL . '/ui/js/form.js', array( 'underscore', 'select2' ) );
 			wp_localize_script( 'stream-notifications-form', 'stream_notifications', $this->get_js_options() );
 		}

ui/css/form.css

@@ -0,0 +1,219 @@
+#triggers .field, .trigger-type, .trigger-options, .trigger-value { float: left; }
+.trigger .form-row {
+	clear: both;
+	overflow: hidden;
+	margin-bottom: 10px;
+	background: #eee;
+	padding: 10px;
+}
+#triggers .inside {
+	padding-bottom: 3px;
+}
+#triggers .inside,
+#alerts .inside {
+	margin-top: 12px;
+}
+#alerts .inside {
+	padding: 0;
+}
+.group {
+	background: rgba(0, 0, 0, 0.08);
+	padding: 20px 20px 12px;
+	margin-bottom: 10px;
+	min-height: 16px;
+	clear: both;
+}
+.inside > .group {
+	margin: 0;
+	min-height: 0;
+	background: none;
+	padding: 0;
+
+	-webkit-box-shadow: none;
+		    box-shadow: none;
+}
+.group .form-row {
+	background: rgba(0, 0, 0, 0.03);
+}
+.group,
+.group .form-row {
+	margin-left: 90px;
+
+	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+		    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+}
+.add-trigger,
+.add-trigger-group {
+	margin-right: 4px !important;
+	margin-bottom: 10px !important;
+}
+.group .delete-trigger,
+.alert .delete-alert {
+	line-height: 29px;
+}
+.group .delete-trigger,
+.group .delete-group,
+.alert .delete-alert {
+	color: #a00;
+	text-decoration: none;
+}
+.group .delete-trigger:hover,
+.group .delete-group:hover,
+.alert .delete-alert:hover {
+	color: #f00;
+	text-decoration: none;
+}
+.inside > .group,
+.inside > .group > .group,
+.inside > .alert {
+	margin-left: 0;
+}
+.inside > .group > .trigger > .form-row {
+	margin-top: 10px;
+}
+.inside > .group > .trigger.first > .form-row {
+	margin-top: 0;
+}
+.inside > .group > .trigger > .form-row,
+.inside > .alert > .form-row {
+	margin-left: 0;
+}
+.group-meta {
+	float: left;
+	margin-top: -10px;
+	margin-left: -10px;
+	padding: 0 0 12px;
+}
+.group-meta a {
+	font-size: 10px;
+}
+.group-meta a.delete-group {
+	line-height: 28px;
+}
+.group .trigger:first-of-type .field.relation,
+.trigger.first .field.relation {
+	display: none;
+}
+.trigger.first .field.type {
+	margin-left: 99px;
+}
+.delete-trigger,
+.delete-alert {
+	float: right;
+}
+.select2-container {
+	margin-right: 6px;
+}
+.select2-results li {
+	margin-bottom: 2px;
+}
+.select2-container .select2-choice > .select2-chosen {
+	font-size: 13px;
+}
+.select2-container.trigger-type {
+	width: 180px !important;
+}
+.select2-container.trigger-operator {
+	width: 140px !important;
+}
+.select2-choices img.avatar,
+.select2-results img.avatar {
+	vertical-align: middle;
+	margin-right: 5px;
+	margin-bottom: 2px;
+
+	-webkit-border-radius: 3px;
+	   -moz-border-radius: 3px;
+	        border-radius: 3px;
+}
+.select2-search-choice-close {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	     -o-transition: all 0 none;
+	        transition: none;
+}
+#alerts .add-alert {
+	margin: 0 0 12px 12px;
+}
+#alerts .select2-container {
+	max-width: 300px;
+}
+.select2-container.alert-type {
+	min-width: 150px;
+}
+.alert .form-row .type {
+	padding: 12px;
+	border: 1px solid #ddd;
+	box-shadow: inset #f5f5f5 0 1px 0 0;
+	background: #eaeaea;
+}
+.alert .form-row .type .circle {
+	display: inline-block;
+	height: 22px;
+	width: 22px;
+	font-size: 12px;
+	line-height: 23px;
+	border-radius: 12px;
+	text-align: center;
+	background: #aaa;
+	color: #fff;
+	margin-right: 10px;
+	vertical-align: middle;
+}
+table.alert-options {
+	margin-top: 0;
+}
+table.alert-options tbody tr th.label {
+	width: 24%;
+	vertical-align: top;
+	background: #f9f9f9;
+	border-right: 1px solid #e1e1e1;
+	border-top: 1px solid #f0f0f0;
+}
+table.alert-options tbody tr th.label label {
+	display: block;
+	font-size: 12px;
+	font-weight: bold;
+	padding: 0;
+	margin: 0 0 3px;
+	color: #333;
+}
+table.alert-options tbody tr th .description {
+	display: block;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: normal;
+	font-style: normal;
+	color: #888;
+}
+table.alert-options tbody tr th,
+table.alert-options tbody tr td {
+	padding: 13px 15px;
+
+}
+table.alert-options tbody tr td {
+	border-top: 1px solid #f5f5f5;
+}
+#data-tags .inside {
+	margin: 0 !important;
+	padding: 0 !important;
+}
+#data-tags header {
+	padding: 10px;
+	padding-left: 25px;
+	background-color: rgba(0, 0, 0, 0.03);
+	cursor: pointer;
+}
+#data-tags dl {
+	padding-bottom: 10px;
+}
+#data-tags header:before {
+	font: normal 20px/1 'dashicons';
+	display: inline-block;
+	content: '\f140';
+	position: absolute;
+	left: 0;
+}
+#data-tags header.ui-state-active:before {
+	content: '\f142';
+}