From 25be08068415c24996dff17499d04e28353d72c9 Mon Sep 17 00:00:00 2001
From: "Anthony G. Basile" <blueness@gentoo.org>
Date: Tue, 1 Jan 2019 22:21:32 -0500
Subject: Update wordpress-mobile-pack 3.4

Signed-off-by: Anthony G. Basile <blueness@gentoo.org>
---
 .../admin/sass/modules/_content.scss               | 398 +++++++++++++++++++++
 .../admin/sass/modules/_look-and-feel.scss         | 287 +++++++++++++++
 .../admin/sass/modules/_perfect-scrollbar.scss     | 128 +++++++
 .../admin/sass/modules/_pro.scss                   | 123 +++++++
 .../admin/sass/modules/_settings.scss              |  40 +++
 .../admin/sass/modules/_themes.scss                | 275 ++++++++++++++
 .../admin/sass/modules/_whats-new.scss             | 107 ++++++
 7 files changed, 1358 insertions(+)
 create mode 100755 plugins/wordpress-mobile-pack/admin/sass/modules/_content.scss
 create mode 100755 plugins/wordpress-mobile-pack/admin/sass/modules/_look-and-feel.scss
 create mode 100755 plugins/wordpress-mobile-pack/admin/sass/modules/_perfect-scrollbar.scss
 create mode 100755 plugins/wordpress-mobile-pack/admin/sass/modules/_pro.scss
 create mode 100755 plugins/wordpress-mobile-pack/admin/sass/modules/_settings.scss
 create mode 100755 plugins/wordpress-mobile-pack/admin/sass/modules/_themes.scss
 create mode 100755 plugins/wordpress-mobile-pack/admin/sass/modules/_whats-new.scss

(limited to 'plugins/wordpress-mobile-pack/admin/sass/modules')

diff --git a/plugins/wordpress-mobile-pack/admin/sass/modules/_content.scss b/plugins/wordpress-mobile-pack/admin/sass/modules/_content.scss
new file mode 100755
index 00000000..ce1cb44a
--- /dev/null
+++ b/plugins/wordpress-mobile-pack/admin/sass/modules/_content.scss
@@ -0,0 +1,398 @@
+#wmpack-admin{	
+	.content{
+		display: table;
+		width:100%;
+		.left-side{
+			width: 100%;
+			display: table;
+			vertical-align: top;
+			
+			.details{
+				padding:30px;
+				background-color: $box-color; 
+				
+				h2.title{
+					font-family: 'OlRoundGothicLight', sans-serif;
+					font-size: 25px;
+					line-height: normal;
+					color: $base-text-color;
+				}
+			}
+			ul.categories{
+				list-style-type: none;
+				width: 100%;
+				display: block;
+				
+				li{
+					@include wbz-display-box();
+					@include wbz-box-orient(horizontal);
+					@include wbz-box-align(center);
+					@include wbz-box-pack(justify);
+					@include wbz-box-flex(1);
+					background-color: #fcfcfc;
+					height: 64px;
+					width: 100%;
+					border-bottom: #f0f1f2 1px solid;
+					margin-bottom: 5px;
+					cursor: pointer;
+					vertical-align: middle;
+					
+					.row{
+						@include wbz-display-box();
+						@include wbz-box-orient(horizontal);
+						@include wbz-box-align(center);
+						height: 64px;
+						width: 90%;
+						vertical-align: middle;	
+					}
+					
+					&:hover{
+						background-color: lighten($base-blue,45%);
+						border-bottom: lighten($base-blue,41%) 1px solid;
+						@include wbz-display-box();
+						@include wbz-box-orient(horizontal);
+						
+						a{
+							&.edit{
+								display:block;								
+							}
+							&.delete{
+								@include wbz-display-box();
+							}
+							&[class^="icon-"]{
+								.relative{
+									.img{
+										@include wbz-transform(translateY(30%) translateX(30%) scale(0.4));
+										@include wbz-transition(all 0.3s ease-in-out);
+									}
+								}
+							}
+						}
+					}
+					.buttons{
+						@include wbz-display-box();								
+						@include wbz-box-flex(1);
+						@include wbz-box-pack(end);
+					}
+					span,
+					a{
+						font-family: 'AcordeRegular', sans-serif;
+						
+						&.status{
+							@include wbz-display-box();
+							font-size: 12px;
+							color: #8c8d8d;
+							width: 70px; 
+							position: relative;
+    						margin: 0 0 0 20px;
+							 
+							&.active::before{
+								content: '';
+								@include wbz-display-box();
+								position: absolute;
+								width: 19px;
+								height: 19px;
+								border: #fff 3px solid;
+								@include wbz-border-radius(19px);
+								background-color: $base-green;
+								left: -29px;
+								top: 1px;
+							}
+							&.inactive::before{
+								content: '';
+								@include wbz-display-box();
+								position: absolute;
+								width: 19px;
+								height: 19px;
+								border: #fff 3px solid;
+								@include wbz-border-radius(19px);
+								background-color: darken($base-red,30%);
+								left: -29px;
+								top: 1px;
+							}
+						}
+						&.pic{
+							@include wbz-display-box();
+							@include wbz-border-radius(48px);
+
+							width: 48px;
+							height: 48px;
+							margin: 0 20px 0 0;
+
+							background-color: #cbdde2;
+							background-size: cover;
+							background-position: center;
+
+							color: #ffffff;
+
+							&.default {
+								@include wbz-inline-icon(pic, 24px);
+
+								&::before{
+									width: 48px;
+									height: 48px;
+									line-height: 48px;
+									position: absolute;
+								}
+							}
+						}
+						&.title{
+							@include wbz-display-box();
+							font-size: 15px; 
+							color: $base-dark-blue;
+							text-transform: uppercase; 
+							width: 300px;
+						}
+						&.posts{
+							@include wbz-display-box();
+							font-family: 'OpenSansItalic',sans-serif;
+							color: $base-p-color;
+							font-size: 15px; 
+							margin-right: 30px;
+							@include wbz-box-flex(1);
+							@include wbz-box-pack(end);
+						}
+						&.edit{
+							@include wbz-inline-icon(edit, 24px);
+							width: 63px;
+							height: 63px;
+							background: #cbdde2;
+							color: #ffffff;
+							border-left: 1px solid #e0edf1;
+							display: none;
+							position: relative;							
+							&:hover{
+								background: #d3e3e8;
+							}
+							&::before{
+								width: 63px;
+								height: 63px;
+								line-height: 63px;
+								position: absolute;
+							}
+						}
+						&.delete{
+							@include wbz-inline-icon(close-x, 24px);
+							width: 63px;
+							height: 63px;
+							background: #cbdde2;
+							color: #ffffff;
+							border-left: 1px solid #e0edf1;
+							display: none;
+							position: relative;
+							
+							&:hover{
+								background: #d3e3e8;
+							}
+							&::before{
+								width: 63px;
+								height: 63px;
+								line-height: 63px;
+								position: absolute;
+							}
+						}
+						&[class^="icon-"]{
+							@include wbz-display-box();
+							@include wbz-border-radius(48px);
+							width: 48px;
+							height: 48px;
+							margin: 0 20px 0 0;
+							
+							&::before{
+								width: 48px;
+								height: 48px;
+								line-height: 48px;
+							}
+							.relative{
+								display: block;
+								width: 0;
+								
+								.img{
+									@include wbz-border-radius(48px);
+									@include wbz-display-box();
+									@include wbz-transform(translateY(0%) scale(1));
+									@include wbz-transition(all 0.3s ease-in-out);
+									width: 48px;
+									height: 48px;
+									left: 0px; 
+									top: 0px;
+									position: absolute;
+									background-color: #ffffff;
+									@include wbz-box-shadow(inset 0 0 1px rgba(0,0,0,0.5));
+								}
+							}
+						} 
+					}
+				}
+				&.pages{
+					li{
+						span{
+							&.title{
+								
+							}
+						}
+					}
+				}
+			}
+		}
+		.branding-category {
+
+			.custom-upload {
+				position: relative;
+				height: 36px;
+				width: 450px;
+				margin: 10px 0;
+
+				&:hover{
+					.fake-file{
+						.btn{
+							background: darken($base-grey, $darken-amounth/2);
+							border: 1px solid darken($base-grey, $darken-amounth);
+						}
+						input{
+							outline:none;
+							border:1px solid darken($input-border,$darken-amounth);
+						}
+					}
+				}
+				.remove{
+					position: absolute;
+					top: 8px;
+					right: 160px;
+					width: 16px;
+					height: 16px;
+					z-index: 3;
+					@include wbz-inline-icon(close-x, 9px);
+					color: #ffffff;
+					background: $base-color-darken;
+					@include wbz-border-radius(16px);
+					padding: 3px;
+
+					&::before{
+						top: -4px;
+						left: 0px;
+						display: block;
+					}
+				}
+			}
+			.custom-upload input[type=file] {
+				outline: none;
+				position: relative;
+				text-align: right;
+				@include wbz-opacity(0);
+				z-index: 2;
+				width: 430px;
+				height: 100%;
+			}
+			.custom-upload .fake-file {
+				position: relative;
+				top: -38px;
+				left: 0px;
+				width: 430px;
+				padding: 0;
+				margin: 0;
+				z-index: 1;
+				line-height: 100%;
+				@include wbz-display-box();
+
+				.btn{
+					margin: 0px 0px 0px 10px;
+				}
+			}
+			.custom-upload .fake-file input {
+				width: 300px;
+				font-family: 'AcordeSemiBold', sans-serif;
+				color: $input-color;
+				font-size: $input-font-size;
+				margin: 0;
+			}
+			.display-icon{
+				text-align: left;
+				height: 70px;
+
+				.edit{
+					margin: 20px 0 0 0;
+					vertical-align: middle;
+					text-align: center;
+					float: left;
+				}
+				.remove{
+					display: inline-block;
+					margin: 28px 0 0 10px;
+				}
+				img{
+					width: 120px;
+					height: auto;
+					display: inline-block;
+					margin: 0 25px;
+					float: left;
+				}
+				label{
+					width: 100px;
+					display: inline;
+					float: left;
+					margin: 25px 0 0 0;
+				}
+			}
+			.cancel-link{
+				position: relative;
+
+				.cancel{
+					position: absolute;
+					top: -39px;
+					right: -30px;
+				}
+			}
+		}
+		.button{
+			margin:2px;
+			padding: 0px 8px 1px 8px;
+		
+			&.insert-media{
+				color: #555;
+				background: #f7f7f7;
+				box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
+				padding: 0px 7px 1px 5px;
+				margin: 0px 5px 4px 0px;
+				display: inline-block;
+				line-height: 26px;
+				font-size:13px;
+			}
+		}
+		.wp-switch-editor{
+			color:#555;
+			height:20px;
+			background: #ebebeb;
+			border:1px solid #dedede;
+			font: 13px/19px "Open Sans", sans-serif;
+			margin: 5px 0 0 5px;
+			padding: 3px 8px 4px;
+			@include wbz-box-sizing(initial);
+		}
+		.wp-editor-wrap{
+			min-width:100%;
+			textarea{
+				width:100%;				
+				height:auto;
+			}
+			&.tmce-active{
+				.switch-tmce{
+					background: #f5f5f5;
+					color: #555;
+					height: 20px;
+					border-bottom-color:#f5f5f5;
+				}
+			} 
+			&.html-active {
+				.switch-html {
+					background: #f5f5f5;
+					color: #555;
+					height: 20px;
+					border-bottom-color:#f5f5f5;
+				}
+			}
+		}
+		
+	}
+	
+}
\ No newline at end of file
diff --git a/plugins/wordpress-mobile-pack/admin/sass/modules/_look-and-feel.scss b/plugins/wordpress-mobile-pack/admin/sass/modules/_look-and-feel.scss
new file mode 100755
index 00000000..43cd8c32
--- /dev/null
+++ b/plugins/wordpress-mobile-pack/admin/sass/modules/_look-and-feel.scss
@@ -0,0 +1,287 @@
+#wmpack-admin{
+	.look-and-feel{
+		display: table;
+
+		.left-side{
+			width: 100%;
+			display: table;
+			vertical-align: top;
+
+			.details{
+				padding:30px;
+				background-color: $box-color;
+
+				h2.title{
+					font-family: 'OlRoundGothicLight', sans-serif;
+					font-size: 25px;
+					line-height: normal;
+					color: $base-text-color;
+				}
+				.section-header{
+					font-family: 'AcorderSemiBold', sans-serif;
+					font-size: 18px;
+					line-height: normal;
+					color: $base-dark-blue;
+				}
+
+                .color-schemes{
+                    width: 50%;
+                    float: left;
+
+                    .colors{
+                        display: table;
+                        width: 260px;
+                        height: 16px;
+                        border: #daddde  1px solid;
+
+                        &.description{
+                            border: none;
+                            font-family: 'AcordeRegular', sans-serif;
+                            margin-left:56px;
+                        }
+
+                        [class^="color-"]{
+                            display: table-cell;
+                            height: 16px;
+                            width: 27px;
+                            text-align: center;
+                        }
+
+                        [class^="color-custom-"]{
+                            background: #eeeff1;
+                            border-right: 1px solid #fff;
+                            cursor:pointer;
+
+                            &:last-child{
+                                border-right:none;
+                            }
+                        }
+                    }
+                }
+
+                .color-schemes-custom {
+
+                    .set {
+                        width: 50%;
+                        float: left;
+                        margin-bottom: 10px;
+
+                        .wp-picker-container * {
+                            @include wbz-box-sizing(content-box);
+                            /*display: inherit;*/
+
+                            .button {
+                                margin-left: 6px;
+                                @include wbz-box-sizing(border-box);
+                            }
+                        }
+                        > label {
+                            width: 100%;
+                        }
+                    }
+                }
+
+				.font-chooser{
+
+					label {
+						position: relative;
+						display: inline-block;
+						width: 135px;
+					}
+
+                    .subtext {
+                        font-size: 11px;
+
+                        a {
+                             font-size: 11px;
+                        }
+                    }
+				}
+
+				&.branding{
+					label, p{
+						font-family: 'AcordeRegular', sans-serif;
+						font-size: 15px;
+						line-height: normal;
+						color: darken($base-blue,50%);
+
+					}
+					.custom-upload {
+						position: relative;
+						height: 36px;
+						width: 450px;
+						margin: 10px 0;
+
+						&:hover{
+							.fake-file{
+								.btn{
+									background: darken($base-grey, $darken-amounth/2);
+									border: 1px solid darken($base-grey, $darken-amounth);
+								}
+								input{
+									outline:none;
+									border:1px solid darken($input-border,$darken-amounth);
+								}
+							}
+						}
+						.remove{
+							position: absolute;
+							top: 8px;
+							right: 160px;
+							width: 16px;
+							height: 16px;
+							z-index: 3;
+							@include wbz-inline-icon(close-x, 9px);
+							color: #ffffff;
+							background: $base-color-darken;
+							@include wbz-border-radius(16px);
+							padding: 3px;
+
+							&::before{
+								top: -4px;
+								left: 0px;
+								display: block;
+							}
+						}
+					}
+					.custom-upload input[type=file] {
+						outline: none;
+						position: relative;
+						text-align: right;
+						@include wbz-opacity(0);
+						z-index: 2;
+						width: 430px;
+						height: 100%;
+					}
+					.custom-upload .fake-file {
+						position: relative;
+						top: -38px;
+						left: 0px;
+						width: 430px;
+						padding: 0;
+						margin: 0;
+						z-index: 1;
+						line-height: 100%;
+						@include wbz-display-box();
+
+						.btn{
+							margin: 0px 0px 0px 10px;
+						}
+					}
+					.custom-upload .fake-file input {
+						width: 300px;
+						font-family: 'AcordeSemiBold', sans-serif;
+						color: $input-color;
+						font-size: $input-font-size;
+						margin: 0;
+					}
+					.display-logo{
+						text-align: left;
+						height: 120px;
+
+						.edit{
+							margin: 47px 0 0 0;
+							vertical-align: middle;
+							text-align: center;
+							float: left;
+						}
+						.remove{
+							display: inline-block;
+							margin: 55px 0 0 10px;
+						}
+						.img{
+							width: 120px;
+							height: 120px;
+							display: inline-block;
+							margin: 0 25px;
+							float: left;
+						}
+						label{
+							width: 100px;
+							display: inline;
+							float: left;
+							margin: 55px 0 0 0;
+						}
+					}
+					.display-icon{
+						@include wbz-display-box();
+						@include wbz-box-orient(horizontal);
+						@include wbz-box-pack(start);
+						@include wbz-box-align(center);
+						text-align: left;
+						height: 120px;
+
+						.edit{
+							margin: 47px 0 0 0;
+							vertical-align: middle;
+							text-align: center;
+							float: left;
+						}
+						.remove{
+							display: inline-block;
+							margin: 55px 0 0 10px;
+						}
+						img{
+							width: 120px;
+							height: 120px;
+							@include wbz-border-radius(120px);
+							@include wbz-box-shadow(inset 0 0 5px 1px rgba(0,0,0,0.1));
+							display: inline-block;
+							margin: 0 25px;
+							float: left;
+						}
+						label{
+							width: 100px;
+							display: inline;
+							float: left;
+							margin: 55px 0 0 0;
+						}
+					}
+					.cancel-link{
+						position: relative;
+
+						.cancel{
+							position: absolute;
+							top: -39px;
+							right: -30px;
+						}
+					}
+
+                    .wp-switch-editor{
+                        color:#555;
+                        height:20px;
+                        background: #ebebeb;
+                        border:1px solid #dedede;
+                        font: 13px/19px "Open Sans", sans-serif;
+                        margin: 5px 0 0 5px;
+                        padding: 3px 8px 4px;
+                        @include wbz-box-sizing(initial);
+                    }
+                    .wp-editor-wrap{
+                        width: 60%;
+                        float: left;
+                        textarea{
+                            width:100%;
+                        }
+                        &.tmce-active{
+                            .switch-tmce{
+                                background: #f5f5f5;
+                                color: #555;
+                                height: 20px;
+                                border-bottom-color:#f5f5f5;
+                            }
+                        }
+                        &.html-active {
+                            .switch-html {
+                                background: #f5f5f5;
+                                color: #555;
+                                height: 20px;
+                                border-bottom-color:#f5f5f5;
+                            }
+                        }
+                    }
+				}
+			}
+		}
+	}
+}
diff --git a/plugins/wordpress-mobile-pack/admin/sass/modules/_perfect-scrollbar.scss b/plugins/wordpress-mobile-pack/admin/sass/modules/_perfect-scrollbar.scss
new file mode 100755
index 00000000..91d336f0
--- /dev/null
+++ b/plugins/wordpress-mobile-pack/admin/sass/modules/_perfect-scrollbar.scss
@@ -0,0 +1,128 @@
+/****************************/
+/* PERFECT SCROLLBAR */
+
+.ps-container .ps-scrollbar-x-rail {
+  position: absolute; /* please don't change 'position' */
+  bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
+  height: 8px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  filter: alpha(opacity = 0);
+  -o-transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-x-rail,
+.ps-container.hover .ps-scrollbar-x-rail {
+  opacity: 0.6;
+  filter: alpha(opacity = 60);
+}
+
+.ps-container .ps-scrollbar-x-rail:hover,
+.ps-container .ps-scrollbar-x-rail.hover {
+  background-color: #eee;
+  opacity: 0.9;
+  filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-x-rail.in-scrolling {
+  background-color: #eee;
+  opacity: 0.9;
+  filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-y-rail {
+  position: absolute; /* please don't change 'position' */
+  right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
+  width: 8px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  filter: alpha(opacity = 0);
+  -o-transition: background-color .2s linear, opacity .2s linear;
+  -webkit-transition: background-color .2s linear, opacity .2s linear;
+  -moz-transition: background-color .2s linear, opacity .2s linear;
+  transition: background-color .2s linear, opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-y-rail,
+.ps-container.hover .ps-scrollbar-y-rail {
+  opacity: 0.6;
+  filter: alpha(opacity = 60);
+}
+
+.ps-container .ps-scrollbar-y-rail:hover,
+.ps-container .ps-scrollbar-y-rail.hover {
+  background-color: #eee;
+  opacity: 0.9;
+  filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-y-rail.in-scrolling {
+  background-color: #eee;
+  opacity: 0.9;
+  filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-x {
+  position: absolute; /* please don't change 'position' */
+  bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
+  height: 8px;
+  background-color: #aaa;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -o-transition: background-color .2s linear;
+  -webkit-transition: background-color.2s linear;
+  -moz-transition: background-color .2s linear;
+  transition: background-color .2s linear;
+}
+
+.ps-container.ie6 .ps-scrollbar-x {
+  font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
+}
+
+.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
+.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
+  background-color: #999;
+}
+
+.ps-container .ps-scrollbar-y {
+  position: absolute; /* please don't change 'position' */
+  right: 0; /* there must be 'right' for ps-scrollbar-y */
+  width: 8px;
+  background-color: #aaa;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -o-transition: background-color .2s linear;
+  -webkit-transition: background-color.2s linear;
+  -moz-transition: background-color .2s linear;
+  transition: background-color .2s linear;
+}
+
+.ps-container.ie6 .ps-scrollbar-y {
+  font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
+}
+
+.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
+.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
+  background-color: #999;
+}
+
+.ps-container.ie .ps-scrollbar-x,
+.ps-container.ie .ps-scrollbar-y {
+  visibility: hidden;
+}
+
+.ps-container.ie:hover .ps-scrollbar-x,
+.ps-container.ie:hover .ps-scrollbar-y,
+.ps-container.ie.hover .ps-scrollbar-x,
+.ps-container.ie.hover .ps-scrollbar-y {
+  visibility: visible;
+}
\ No newline at end of file
diff --git a/plugins/wordpress-mobile-pack/admin/sass/modules/_pro.scss b/plugins/wordpress-mobile-pack/admin/sass/modules/_pro.scss
new file mode 100755
index 00000000..cc3b5647
--- /dev/null
+++ b/plugins/wordpress-mobile-pack/admin/sass/modules/_pro.scss
@@ -0,0 +1,123 @@
+#wmpack-admin{
+	.pro{
+		display: table;
+
+		.left-side{
+			width: 100%;
+			display: table;
+			vertical-align: top;
+
+			.details{
+				padding:30px;
+				background-color: $box-color;
+
+				h1 {
+					font-family: 'OlRoundGothicLight', sans-serif;
+					font-size: 40px;
+					line-height: 40px;
+					color: $base-text-color;
+					text-align: center;
+					letter-spacing: 0.5px;
+				}
+
+				h2, h3 {
+					text-align: center;
+				}
+
+                .showcase{
+                    width: 671px;
+                    margin: 0 auto;
+                }
+
+                .package {
+                    width: 30%;
+                    float: left;
+                    margin: 10px;
+                    padding: 20px 0 10px 0;
+                    background: #fffced;
+
+                    p {
+                        text-align: center;
+                        font-size:13px;
+						padding: 10px;
+                    }
+
+                    .features-list{
+                        display: block;
+                        margin: 0 auto;
+                        width: 90%;
+
+                        > div {
+                            padding: 10px 5px;
+                            border-bottom: 1px solid #ededed;
+                            font-family: 'OpenSansRegular', sans-serif;
+                            font-size: 14px;
+                            line-height: 22px;
+
+                            &:last-child{
+                                border-bottom: none;
+                            }
+                            span{
+                                display: block;
+                                margin-top: 3px;
+								text-align: center;
+                            }
+                        }
+                    }
+
+					[class^="icon-"]{
+						overflow: hidden;
+						line-height: 40px;
+						color: darken($base-color-darken, 20%);
+
+						&::before{
+							display: block;
+							margin: 0 auto;
+						}
+					}
+
+					.icon-theming{
+						@include wbz-inline-icon(paint, 33px);
+					}
+
+					.icon-monetize{
+						@include wbz-inline-icon(coins, 40px);
+					}
+
+					.icon-notification{
+						@include wbz-inline-icon(notification, 35px);
+					}
+                }
+
+                .upgrade-btns {
+
+                    .btn {
+                        margin: 0 auto;
+                        width: 150px;
+                    }
+
+                    .upgrade-subtext {
+                        text-align: center;
+                        margin-top: 10px;
+
+                        p, a{
+                            font-size: 13px;
+                            line-height: normal;
+                        }
+
+                        a {
+                            text-decoration: underline;
+                        }
+
+						.save {
+							background-color: #66cc80;
+							border-radius: 50px;
+							color: white;
+							padding: 8px;
+						}
+                    }
+                }
+			}
+		}
+	}
+}
diff --git a/plugins/wordpress-mobile-pack/admin/sass/modules/_settings.scss b/plugins/wordpress-mobile-pack/admin/sass/modules/_settings.scss
new file mode 100755
index 00000000..3461a537
--- /dev/null
+++ b/plugins/wordpress-mobile-pack/admin/sass/modules/_settings.scss
@@ -0,0 +1,40 @@
+#wmpack-admin{
+	.settings{
+		display: table;
+
+		.left-side{
+			width: 100%;
+			display: table;
+			vertical-align: top;
+
+			.details{
+				padding: 30px;
+				background-color: $box-color;
+
+				h2.title{
+					font-family: 'OlRoundGothicLight', sans-serif;
+					font-size: 25px;
+					line-height: normal;
+					color: $base-text-color;
+				}
+				.display-mode{
+
+					p, label{
+						font-family: 'AcordeRegular', sans-serif;
+						font-size:15px;
+						line-height: normal;
+						color: $base-text-color;
+					}
+
+					.notices-container {
+						width: 465px;
+
+						.notice {
+							max-width: 90%;
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/plugins/wordpress-mobile-pack/admin/sass/modules/_themes.scss b/plugins/wordpress-mobile-pack/admin/sass/modules/_themes.scss
new file mode 100755
index 00000000..dbf0bce2
--- /dev/null
+++ b/plugins/wordpress-mobile-pack/admin/sass/modules/_themes.scss
@@ -0,0 +1,275 @@
+#wmpack-admin{
+	.themes{
+		display: table;
+
+		.left-side{
+			width: 100%;
+			display: table;
+			vertical-align: top;
+
+            $theme-box-width: 195px;
+            $theme-box-height: 320px;
+            $theme-box-margin: 25px;
+            $theme-box-subsection-height: 41px;
+
+			.corner{
+				z-index: 1;
+
+				&.active{
+					.indicator{
+						@include wbz-inline-icon(active, 11px);
+						color: #ffffff;
+
+                        top: 0px;
+                        left: $theme-box-width - 44px;
+
+						&::before{
+							top: -40px;
+							right: 18px;
+						}
+					}
+				}
+			}
+			.details{
+				padding:30px;
+				background-color: $box-color;
+
+				h2.title{
+					font-family: 'OlRoundGothicLight', sans-serif;
+					font-size: 25px;
+					line-height: normal;
+					color: $base-text-color;
+				}
+				.section-header{
+					font-family: 'AcorderSemiBold', sans-serif;
+					font-size: 18px;
+					line-height: normal;
+					color: $base-dark-blue;
+				}
+
+				.ribbon{
+					float:right;
+
+					.starred{
+						background: url(../images/ribbon-premium.png);
+						width: 67px;
+						height: 68px;
+						position: absolute;
+						top: -35px;
+						right: -35px;
+					}
+				}
+
+                &.theming{
+                    display: table;
+                    width: 100%;
+
+                    h2.title {
+                        text-align: center;
+                    }
+
+                    .themes{
+                        display: block;
+                        width: ($theme-box-width + $theme-box-margin) * 3 + 20;
+                        margin: 0 auto;
+
+                        .theme{
+                            display: inline-block;
+                            width: $theme-box-width;
+                            height: $theme-box-height;
+                            margin: 0 $theme-box-margin $theme-box-margin 0;
+                            position: relative;
+
+                            &:nth-child(3){
+                                margin: 0;
+                            }
+
+                            .name{
+                                font-family: 'AcordeRegular', sans-serif;
+                                font-size: 16px;
+                                color: $base-text-color;
+                                background: $base-color-lighter;
+                                height: $theme-box-subsection-height;
+                                border-bottom: 1px solid #dce0e0;
+                                padding: 10px;
+                                text-transform: uppercase;
+								text-align: center;
+                            }
+                            .content{
+								font-size: 14px;
+                                color: $base-p-color;
+                                height: $theme-box-subsection-height;
+                                padding: 5px 5px;
+								text-align: center;
+                            }
+                            .image{
+                                background-size: cover;
+                                background-repeat: no-repeat;
+                                width: 100%;
+                                height: $theme-box-height - $theme-box-subsection-height * 2;
+                                overflow: hidden;
+                                position: relative;
+
+                                &:hover{
+                                    .overlay{
+                                        visibility: visible;
+                                        @include wbz-transform(translateX(0%));
+                                        @include wbz-opacity(1);
+                                        @include wbz-transition(all 0.3s ease-in-out);
+                                    }
+                                }
+                            }
+                            .overlay{
+                                background: rgba(154,202,64,0.9);
+                                position: absolute;
+                                width: $theme-box-width;
+                                height: $theme-box-height - $theme-box-subsection-height * 2;
+                                text-align: center;
+
+                                @include wbz-transform(translateX(-100%));
+                                @include wbz-opacity(0);
+                                @include wbz-transition(all 0.3s ease-in-out);
+
+                                .actions {
+                                    @include wbz-display-box();
+                                    display: flex;
+                                    @include wbz-box-orient(horizontal);
+                                    @include wbz-box-align(center);
+                                    @include wbz-box-pack(center);
+
+                                    .preview, .select {
+                                        color: #ffffff;
+                                        background: #333333;
+                                        @include wbz-border-radius(33px);
+                                        width: 33px;
+                                        height: 33px;
+                                        margin: 0 2px;
+                                        float: none;
+
+                                        &:hover {
+                                            cursor: pointer;
+                                            background: lighten(#333333, 10%);
+                                        }
+
+                                        &::before {
+                                            width: 33px;
+                                            height: 33px;
+                                            line-height: 33px;
+                                        }
+                                    }
+
+									.preview {
+                                        @include wbz-inline-icon(preview, 20px);
+                                    }
+
+                                    .select {
+                                        @include wbz-inline-icon(active, 14px);
+                                    }
+                                }
+
+                                [class^="text"] {
+                                    font-family: "OpenSansSemiBold", sans-serif;
+                                    font-size: 13px;
+                                    color: #333333;
+                                    text-align: center;
+                                }
+                            }
+							span.price {
+								border-radius: 50px;
+								background: $base-orange;
+								color: #ffffff;
+								padding: 3px 5px;
+							}
+                            &.premium{
+								/*.corner{
+                                    .indicator{
+                                        background: url(../images/ribbon-premium.png);
+                                        width: 67px;
+                                        height: 68px;
+                                        position: absolute;
+                                        top: -4px;
+                                        right: -5px;
+                                        left: $theme-box-width - 62px;
+                                    }
+                                }*/
+                                .overlay{
+                                    background: rgba(#fdf7d3,0.9);
+
+                                    .unlock{
+                                        @include wbz-inline-icon(unlock, 17px);
+                                        color: #ffffff;
+                                        background: $base-orange;
+                                        @include wbz-border-radius(33px);
+                                        width: 33px;
+                                        height: 33px;
+                                        margin: 0 2px;
+                                        float: none;
+
+                                        &:hover{
+                                            cursor: pointer;
+                                            background: lighten($base-orange, 10%);
+                                        }
+
+                                        &::before{
+                                            width: 33px;
+                                            height: 33px;
+                                            top: 7px;
+                                            left: 0px;
+                                        }
+                                    }
+                                    .preview{
+                                        background: $base-orange;
+
+                                        &:hover{
+                                            background: lighten($base-orange, 10%);
+                                        }
+                                    }
+                                    .text{
+                                        font-family: "OpenSansSemiBold", sans-serif;
+                                        font-size: 13px;
+                                        color: $base-text-color;
+                                        text-align: center;
+                                        display: block;
+
+                                        &:last-child{
+                                            font-size: 12px;
+                                            font-family: "OpenSansRegular", sans-serif;
+                                        }
+                                        span{
+                                            font-size: 15px;
+                                            color: $base-text-color;
+                                            display: block;
+                                        }
+                                    }
+                                    .btn{
+                                        margin: 0 auto;
+                                        width: 150px;
+                                    }
+                                    .info{
+                                        margin: 0 auto;
+                                        width: $input-size-smaller + $btn-size-smallest + 10px;
+
+                                        input[type="text"]{
+                                            float: left;
+                                            background: rgba(250,250,250,0.8);
+                                        }
+                                        .btn{
+                                            float: left;
+                                            margin: 0 0 0 10px;
+                                        }
+                                    }
+                                }
+								.content {
+									a.btn.smaller {
+										width: 100%;
+										line-height: normal;
+									}
+								}
+                            }
+                        }
+                    }
+                }
+			}
+		}
+	}
+}
diff --git a/plugins/wordpress-mobile-pack/admin/sass/modules/_whats-new.scss b/plugins/wordpress-mobile-pack/admin/sass/modules/_whats-new.scss
new file mode 100755
index 00000000..74a6bc5c
--- /dev/null
+++ b/plugins/wordpress-mobile-pack/admin/sass/modules/_whats-new.scss
@@ -0,0 +1,107 @@
+#wmpack-admin{
+	.whats-new{
+		display: table;
+		.left-side{
+			width: 100%;
+			display: table;
+			vertical-align: top;
+
+
+			.details{
+				padding:30px;
+				background-color: $box-color;
+
+                &.waitlist {
+                    padding-top: 0px;
+
+					.waitlist-subscribe {
+						border: 2px dotted $base-green;
+						background: #f4f4f4;
+						padding: 20px;
+						margin: 0 20px 0 20px;
+
+						p {
+							text-align: center;
+						}
+
+						form {
+							float: none;
+							text-align: center;
+
+							.error {
+								width: 220px;
+								margin: 0 auto;
+							}
+
+							.btn {
+                        		margin: 0 auto;
+							}
+						}
+					}
+                    .added {
+                        margin: 0 auto;
+                    }
+                }
+
+				h1{
+					font-family: 'OlRoundGothicLight', sans-serif;
+					font-size: 40px;
+					line-height: 40px;
+					color: $base-text-color;
+					text-align: center;
+					letter-spacing: 0.5px;
+				}
+				.upgrade-message{
+					text-align: center;
+				}
+				h2.title{
+					font-family: 'OlRoundGothicLight', sans-serif;
+					font-size: 25px;
+					line-height: normal;
+					color: $base-text-color;
+				}
+				.showcase{
+					width: 671px;
+					margin: 0 auto;
+				}
+
+                &.features {
+
+                    padding-bottom: 0px;
+
+                    .feature {
+
+                        margin-bottom: 30px;
+
+                        img {
+                            width: 130px;
+                            height: auto;
+                            float: left;
+                            margin: 20px 30px 0 0;
+                        }
+                        .text {
+                            span {
+                                font-family: "OpenSansRegular", sans-serif;
+                                font-size: 14px;
+                                color: $base-text-color;
+
+                                &.title {
+                                    display: block;
+                                    margin: 15px 0 8px 0;
+                                    font-size: 18px;
+                                    color: #333333;
+                                }
+                            }
+                        }
+                        &.right {
+                            img {
+                                float: right;
+                                margin: 20px 0 0 30px;
+                            }
+                        }
+                    }
+                }
+			}
+		}
+	}
+}
-- 
cgit v1.2.3-65-gdbad