summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnthony G. Basile <blueness@gentoo.org>2019-01-01 22:21:32 -0500
committerAnthony G. Basile <blueness@gentoo.org>2019-01-01 22:21:32 -0500
commit25be08068415c24996dff17499d04e28353d72c9 (patch)
tree988959f47d6746e76ce6ba056aa2634abcb8c7a1 /plugins/wordpress-mobile-pack/admin/sass/modules
parentUpdate public-post-preview 2.8.0 (diff)
downloadblogs-gentoo-25be08068415c24996dff17499d04e28353d72c9.tar.gz
blogs-gentoo-25be08068415c24996dff17499d04e28353d72c9.tar.bz2
blogs-gentoo-25be08068415c24996dff17499d04e28353d72c9.zip
Update wordpress-mobile-pack 3.4
Signed-off-by: Anthony G. Basile <blueness@gentoo.org>
Diffstat (limited to 'plugins/wordpress-mobile-pack/admin/sass/modules')
-rwxr-xr-xplugins/wordpress-mobile-pack/admin/sass/modules/_content.scss398
-rwxr-xr-xplugins/wordpress-mobile-pack/admin/sass/modules/_look-and-feel.scss287
-rwxr-xr-xplugins/wordpress-mobile-pack/admin/sass/modules/_perfect-scrollbar.scss128
-rwxr-xr-xplugins/wordpress-mobile-pack/admin/sass/modules/_pro.scss123
-rwxr-xr-xplugins/wordpress-mobile-pack/admin/sass/modules/_settings.scss40
-rwxr-xr-xplugins/wordpress-mobile-pack/admin/sass/modules/_themes.scss275
-rwxr-xr-xplugins/wordpress-mobile-pack/admin/sass/modules/_whats-new.scss107
7 files changed, 1358 insertions, 0 deletions
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;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}