Commit 2d23654a authored by Petr Balga's avatar Petr Balga

scss made into more partial files, gulp-wait installed.

parent a3945ffc
......@@ -2,9 +2,11 @@ var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var wait = require('gulp-wait');
gulp.task('sass', function () {
return gulp.src('./wp-content/themes/CreepyTheme/scss/*.scss')
.pipe(wait(50))
.pipe(sass())
.pipe(gulp.dest('./wp-content/themes/CreepyTheme/css'));
});
......@@ -17,6 +19,7 @@ gulp.task('sass', function () {
gulp.watch('./wp-content/themes/CreepyTheme/scss/*.scss')
.on('change', function(path, stats) {
return gulp.src('./wp-content/themes/CreepyTheme/scss/*.scss')
.pipe(wait(50))
.pipe(sass())
.pipe(autoprefixer({
cascade: false
......
......@@ -2397,6 +2397,14 @@
}
}
},
"gulp-wait": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/gulp-wait/-/gulp-wait-0.0.2.tgz",
"integrity": "sha1-7Ov/REbhoNU3yx3Hc9vUWB0X+y0=",
"requires": {
"map-stream": "0.0.4"
}
},
"gulplog": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
......@@ -3045,6 +3053,11 @@
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
},
"map-stream": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.4.tgz",
"integrity": "sha1-XsbekCE+9sey65Nn6a3o2k79tos="
},
"map-visit": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
......
@charset "UTF-8";
body, html {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: "Open Sans",sans-serif; }
.clear {
clear: both; }
/* Container vymezující výšku a šířku */
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 375px;
height: 812px;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
overflow-y: hidden; }
/* Styly pro hlavní šablonu */
/* Styly pro landing šablonu */
.main .top {
width: calc(100% - 64px);
height: 260px;
......@@ -169,11 +148,6 @@ body, html {
text-transform: uppercase;
float: right; }
.top-up {
background-color: #ffd300;
width: 100%;
height: 100%; }
/* Spodní menu */
footer {
position: absolute;
......@@ -216,3 +190,32 @@ footer {
background-image: url(./../assets/svg/settings.svg); }
footer .active {
color: #000000; }
/* Styly pro top-up šablonu */
.top-up {
background-color: #ffd300;
width: 100%;
height: calc( 100% - 80px);
box-shadow: 0 5px 0 rgba(202, 172, 0, 0.88), 0 2px 24px rgba(0, 0, 0, 0.5);
border-radius: 20px; }
body, html {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: "Open Sans",sans-serif; }
.clear {
clear: both; }
/* Container vymezující výšku a šířku */
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 375px;
height: 812px;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
overflow-y: hidden; }
/* Spodní menu */
footer {
position: absolute;
bottom: 0;
background-color: $white;
width: calc(100% - 40px);
height: 59px;
box-shadow: 1px -50px 50px 0px rgba(0,0,0,0.3);
//border-radius: 0 0 40px 40px;
padding: 12px 20px;
display:flex;
justify-content:space-around;
a {
display: inline-block;
width: 50px;
font-size: 14px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
text-align: center;
color: $gray;
p {
margin: 0;
}
.icon {
background-size: 25px auto;
width: 50px;
height: 25px;
background-repeat: no-repeat;
background-size: 25px auto;
background-position: 50% 50%;
}
.home {
background-image: url(./../assets/svg/home.svg);
}
.cards {
background-image: url(./../assets/svg/cards.svg);
}
.topup {
background-image: url(./../assets/svg/topup.svg);
}
.support {
background-image: url(./../assets/svg/support.svg);
}
.settings {
background-image: url(./../assets/svg/settings.svg);
}
}
.active {
color: $black;
}
}
\ No newline at end of file
/* Styly pro landing šablonu */
.main {
.top {
width: calc(100% - 64px);
height: 260px; /* v návrhu bylo 280px, ale ve výsledku byl container o hodně vyšší. */
box-shadow: 0 5px 0 rgba(202, 172, 0, 0.88), 0 2px 24px rgba(0, 0, 0, 0.5);
//border-radius: 40px 40px 20px 20px;
border-radius: 0px 0px 20px 20px;
background-color: $yellow;
position: relative;
padding: 0 32px;
#greeting {
margin-top: 71px;
color: $darkgray;
font-size: 24px;
font-weight: 800;
float: left;
}
#user__icon {
background-color: $black;
width: 28px;
height: 28px;
border-radius: 14px;
float: right;
margin-top: 71px;
background-image: url(./../assets/svg/user.svg);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 4px;
background-position-y: 6px;
}
#info__text {
color: #968000;
font-size: 14px;
font-weight: 500;
margin: 0px;
}
#balance {
color: $darkgray;
font-size: 72px;
font-weight: 700;
margin: -10px 0;
float: left;
&::before{
content: '$';
font-size: 24px;
}
}
#eye__icon {
width: 28px;
height: 28px;
border-radius: 14px;
margin-top: 34px;
float: right;
background-image: url(./../assets/svg/eye.svg);
background-repeat: no-repeat;
background-size: 20px auto;
background-position-x: 4px;
background-position-y: 6px;
}
}
.middle {
background-color: $lightgray;
width: calc(100% - 60px);
height: auto;
min-height: 500px;
margin-top: -20px;
padding: 16px 28px 0px 32px;
max-height: calc(100vh - 650px);
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: $lightgray;
}
&::-webkit-scrollbar-thumb {
background: $white;
&:hover{
background: #888;
}
}
#end {
margin-bottom: 70px;
margin-top: 70px;
width: 100%;
text-align: center;
color: $darkgray;
font-size: 14px;
font-weight: 700;
}
#statement {
color: $darkgray;
font-size: 21px;
font-weight: 800;
float: left;
margin-bottom: -7px;
}
#view__all {
float: right;
color: $gray;
font-size: 14px;
margin-top: 27px;
margin-bottom: -7px;
}
.term {
.day {
color: $gray;
font-size: 14px;
font-weight: 500;
margin-bottom: 7px;
}
.item {
width: calc( 100% - 22px);
height: 40px;
border-radius: 4px;
background-color: $white;
margin-bottom: 12px;
padding: 11px;
.icon {
width: 40px;
height: 40px;
border-radius: 4px;
background-color: $darkgray;
float: left;
margin-right: 15px;
background-repeat: no-repeat;
background-size: 20px auto;
background-position: 50% 50%;
}
.grocery {
background-image: url(./../assets/svg/grocery.svg);
background-color: #f25244;
}
.transport {
background-image: url(./../assets/svg/transport.svg);
background-color: $darkgray;
}
.entertainment {
background-image: url(./../assets/svg/entertainment.png);
background-color: #4333a6;
}
.health {
background-image: url(./../assets/svg/health.svg);
background-color: #33a63e;
}
.category {
color: $darkgray;
font-size: 18px;
font-weight: 500;
display: inline-block;
}
.name {
color: $text_gray;
font-size: 12px;
font-weight: 500;
display: inline-block;
margin-top: -10px;
}
.price {
color: $darkgray;
font-size: 18px;
font-weight: 500;
float: right;
}
.time {
color: $text_gray;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
float: right;
}
}
}
}
}
\ No newline at end of file
/* Styly pro top-up šablonu */
.top-up {
background-color: $yellow;
width: 100%;
height: calc( 100% - 80px );
box-shadow: 0 5px 0 rgba(202, 172, 0, 0.88), 0 2px 24px rgba(0, 0, 0, 0.5);
border-radius: 20px;
}
\ No newline at end of file
$yellow: #ffd300;
$darkgray: #231f20;
$lightgray: #dedede;
$gray: #706f73;
$black: #000000;
$white: #ffffff;
$text_gray: #686766;
\ No newline at end of file
$yellow: #ffd300;
$darkgray: #231f20;
$lightgray: #dedede;
$gray: #706f73;
$black: #000000;
$white: #ffffff;
$text_gray: #686766;
@import './_variables.scss';
@import './_landing.scss';
@import './_footer.scss';
@import './_top-up.scss';
body, html {
background-color: $white;
......@@ -27,243 +25,4 @@ body, html {
height: 812px;
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.3);
overflow-y: hidden;
}
/* Styly pro hlavní šablonu */
.main {
.top {
width: calc(100% - 64px);
height: 260px; /* v návrhu bylo 280px, ale ve výsledku byl container o hodně vyšší. */
box-shadow: 0 5px 0 rgba(202, 172, 0, 0.88), 0 2px 24px rgba(0, 0, 0, 0.5);
//border-radius: 40px 40px 20px 20px;
border-radius: 0px 0px 20px 20px;
background-color: $yellow;
position: relative;
padding: 0 32px;
#greeting {
margin-top: 71px;
color: $darkgray;
font-size: 24px;
font-weight: 800;
float: left;
}
#user__icon {
background-color: $black;
width: 28px;
height: 28px;
border-radius: 14px;
float: right;
margin-top: 71px;
background-image: url(./../assets/svg/user.svg);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 4px;
background-position-y: 6px;
}
#info__text {
color: #968000;
font-size: 14px;
font-weight: 500;
margin: 0px;
}
#balance {
color: $darkgray;
font-size: 72px;
font-weight: 700;
margin: -10px 0;
float: left;
&::before{
content: '$';
font-size: 24px;
}
}
#eye__icon {
width: 28px;
height: 28px;
border-radius: 14px;
margin-top: 34px;
float: right;
background-image: url(./../assets/svg/eye.svg);
background-repeat: no-repeat;
background-size: 20px auto;
background-position-x: 4px;
background-position-y: 6px;
}
}
.middle {
background-color: $lightgray;
width: calc(100% - 60px);
height: auto;
min-height: 500px;
margin-top: -20px;
padding: 16px 28px 0px 32px;
max-height: calc(100vh - 650px);
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: $lightgray;
}
&::-webkit-scrollbar-thumb {
background: $white;
&:hover{
background: #888;
}
}
#end {
margin-bottom: 70px;
margin-top: 70px;
width: 100%;
text-align: center;
color: $darkgray;
font-size: 14px;
font-weight: 700;
}
#statement {
color: $darkgray;
font-size: 21px;
font-weight: 800;
float: left;
margin-bottom: -7px;
}
#view__all {
float: right;
color: $gray;
font-size: 14px;
margin-top: 27px;
margin-bottom: -7px;
}
.term {
.day {
color: $gray;
font-size: 14px;
font-weight: 500;
margin-bottom: 7px;
}
.item {
width: calc( 100% - 22px);
height: 40px;
border-radius: 4px;
background-color: $white;
margin-bottom: 12px;
padding: 11px;
.icon {
width: 40px;
height: 40px;
border-radius: 4px;
background-color: $darkgray;
float: left;
margin-right: 15px;
background-repeat: no-repeat;
background-size: 20px auto;
background-position: 50% 50%;
}
.grocery {
background-image: url(./../assets/svg/grocery.svg);
background-color: #f25244;
}
.transport {
background-image: url(./../assets/svg/transport.svg);
background-color: $darkgray;
}
.entertainment {
background-image: url(./../assets/svg/entertainment.png);
background-color: #4333a6;
}
.health {
background-image: url(./../assets/svg/health.svg);
background-color: #33a63e;
}
.category {
color: $darkgray;
font-size: 18px;
font-weight: 500;
display: inline-block;
}
.name {
color: $text_gray;
font-size: 12px;
font-weight: 500;
display: inline-block;
margin-top: -10px;
}
.price {
color: $darkgray;
font-size: 18px;
font-weight: 500;
float: right;
}
.time {
color: $text_gray;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
float: right;
}
}
}
}
}
.top-up {
background-color: $yellow;
width: 100%;
height: 100%;
}
/* Spodní menu */
footer {
position: absolute;
bottom: 0;
background-color: $white;
width: calc(100% - 40px);
height: 59px;
box-shadow: 1px -50px 50px 0px rgba(0,0,0,0.3);
//border-radius: 0 0 40px 40px;
padding: 12px 20px;
display:flex;
justify-content:space-around;
a {
display: inline-block;
width: 50px;
font-size: 14px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
text-align: center;
color: $gray;
p {
margin: 0;
}
.icon {
background-size: 25px auto;
width: 50px;
height: 25px;
background-repeat: no-repeat;
background-size: 25px auto;
background-position: 50% 50%;
}
.home {
background-image: url(./../assets/svg/home.svg);
}
.cards {
background-image: url(./../assets/svg/cards.svg);
}
.topup {
background-image: url(./../assets/svg/topup.svg);
}
.support {
background-image: url(./../assets/svg/support.svg);
}
.settings {
background-image: url(./../assets/svg/settings.svg);
}
}
.active {
color: $black;
}
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment