Schedule UI for snapshot in customizer

.travis.yml

@@ -16,6 +16,7 @@ env:
     - WP_VERSION=latest WP_MULTISITE=1
 
 install:
+    - nvm install 4 && nvm use 4
     - export DEV_LIB_PATH=dev-lib
     - if [ ! -e "$DEV_LIB_PATH" ] && [ -L .travis.yml ]; then export DEV_LIB_PATH=$( dirname $( readlink .travis.yml ) ); fi
     - source $DEV_LIB_PATH/travis.install.sh

css/customize-snapshots.css

@@ -1,10 +1,12 @@
-#snapshot-preview-link, #snapshot-edit-link {
+#snapshot-preview-link,
+#snapshot-schedule-button {
 	float: right;
 	margin-top: 13px;
 	margin-right: 4px;
 	color: #656a6f;
 }
-#snapshot-edit-link{
+
+#snapshot-schedule-button {
 	display: block;
 }
 
@@ -13,11 +15,13 @@
 #snapshot-preview-link:active {
 	color: #191e23;
 }
+
 #snapshot-save {
 	float: right;
 	margin-top: 9px;
 	margin-right: 9px;
 }
+
 #customize-header-actions:not(.button-added) .button#save {
 	visibility: hidden;
 }
@@ -53,4 +57,107 @@
 		margin-top: 6px;
 		margin-right: 6px;
 	}
-}
+}
+
+#snapshot-schedule {
+	background: #fff !important;
+	border-bottom: 1px solid #ddd;
+	line-height: 1.5;
+	left: 0;
+	top: 46px;
+	position: absolute;
+	width: 100%;
+	box-shadow: 0 5px 0 0 rgba(0,0,0,0.05);
+}
+
+#snapshot-schedule .snapshot-schedule-title {
+	color: #555;
+	padding: 10px 10px 0;
+}
+
+#snapshot-schedule .snapshot-schedule-title h3 {
+	margin: .2em 2em .75em 0;
+}
+
+#snapshot-schedule a.snapshot-edit-link {
+	position: absolute;
+	top: 4px;
+	right: 1px;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	-webkit-appearance: none;
+	background: transparent;
+	color: #555;
+	border: none;
+	padding: 10px;
+}
+
+#snapshot-schedule a.snapshot-edit-link:focus,
+#snapshot-schedule a.snapshot-edit-link:hover {
+	color: #0073aa;
+
+}
+
+#snapshot-schedule a.snapshot-edit-link:before {
+	padding: 4px;
+	position: absolute;
+	top: 5px;
+	left: 6px;
+	-webkit-border-radius: 100%;
+	border-radius: 100%;
+}
+
+#snapshot-schedule a.snapshot-edit-link:focus:before {
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+#snapshot-schedule .snapshot-schedule-control {
+	padding: 10px;
+}
+
+#snapshot-schedule .accordion-section-title {
+	padding: 10px;
+}
+
+#snapshot-schedule .reset-time {
+	font-weight: normal;
+	font-size: 80%;
+	display: none;
+}
+
+.snapshot-schedule-control select.date-input {
+	height: 28px;
+}
+
+.snapshot-schedule-control select,
+.snapshot-schedule-control input.date-input {
+	min-width: 10%;
+	width: auto;
+}
+
+.snapshot-schedule-control input.date-input {
+	-moz-appearance: textfield;
+}
+
+.snapshot-schedule-control input.date-input::-webkit-outer-spin-button,
+.snapshot-schedule-control input.date-input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.wp-full-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
+	padding-left: 15px;
+	z-index: 500101;
+}
+
+.select2-container {
+	z-index: 500100 !important;
+}