valitydev/gentelella
14
0
Fork 0
mirror of https://github.com/valitydev/gentelella.git synced 2024-11-06 00:05:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Browsersync and Autoprefixer on gulp

Browse Source
This commit is contained in:
christianesperar 2016-05-29 01:20:52 +08:00
parent 01626062af
commit 45e4883e27
4 changed files with 31 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
build/css/custom.css
View File

@ -190,6 +190,7 @@
width: 230px;
padding: 0;
position: absolute;
display: -ms-flexbox;
display: flex;
z-index: 9999; }
@ -513,8 +514,6 @@ a:hover, a:focus {
right: auto;
width: 8px;
z-index: 1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; }
.nav-md ul.nav.child_menu li:after {
@ -556,13 +555,7 @@ a:hover, a:focus {
.nav.side-menu > li.active > a {
text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b6479), color-stop(100%, #4c5566)), #686e78;
background: -webkit-linear-gradient(#334556, #2C4257), #2A3F54;
background: -moz-linear-gradient(#334556, #2C4257), #2A3F54;
background: -o-linear-gradient(#334556, #2C4257), #2A3F54;
background: linear-gradient(#334556, #2C4257), #2A3F54;
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0; }
.navbar-brand, .navbar-nav > li > a {
@ -726,8 +719,6 @@ article.media {
/* ********* custom accordion **************************** */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
#integration-list {
@ -824,10 +815,6 @@ h2 {
-moz-column-break-inside: avoid;
column-break-inside: avoid;
opacity: 1;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-webkit-transition: all .2s ease;
-ms-transition: all .2s ease;
transition: all .2s ease; }
.x_title {
@ -1278,6 +1265,7 @@ div.box {
ul.msg_list li {
background: #f7f7f7;
padding: 5px;
display: -ms-flexbox;
display: flex;
margin: 6px 6px 0;
width: 96% !important; }
@ -1357,8 +1345,6 @@ ul.to_do {
ul.to_do li {
background: #f3f3f3;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
padding: 7px;
@ -1428,6 +1414,7 @@ ul.quick-list li i {
.widget_summary {
width: 100%;
display: -ms-inline-flexbox;
display: inline-flex; }
.widget_summary .w_left {
@ -1659,9 +1646,6 @@ h4.graph_title {
border-radius: 5px;
background-clip: padding-box;
background: #FFF;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out; }
.tile-stats:hover .icon i {
@ -2043,8 +2027,6 @@ input.parsley-error, textarea.parsley-error, select.parsley-error {
-webkit-animation: 0.7s 1 shake linear; }
.item input, .item textarea {
-webkit-transition: 0.42s;
-moz-transition: 0.42s;
transition: 0.42s; }
/* alerts (when validation fails) */
@ -2158,11 +2140,7 @@ a.btn-success, a.btn-primary, a.btn-warning, a.btn-danger {
margin: 0 0 10px 10px;
min-width: 80px;
height: 60px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-align: center;
color: #666;
@ -2180,8 +2158,6 @@ a.btn-success, a.btn-primary, a.btn-warning, a.btn-danger {
border-color: #aaa; }
.btn.btn-app:active, .btn.btn-app:focus {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.btn.btn-app > .badge {
@ -2215,10 +2191,6 @@ textarea:focus {
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
@ -2227,11 +2199,7 @@ textarea:focus {
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); }
/* ********* /form textarea **************************** */
@ -2589,17 +2557,14 @@ ul.widget_tally .count {
.pie_bg {
border-bottom: 1px solid rgba(101, 204, 182, 0.16);
padding-bottom: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
padding-bottom: 10px;
-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 4px 6px -6px #222; }
.widget_tally_box .flex {
display: -ms-flexbox;
display: flex; }
ul.widget_profile_box {
@ -2726,8 +2691,6 @@ ul.messages li img.avatar, img.avatar {
width: 32px;
float: left;
display: inline-block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 2px;
background: #f7f7f7;
@ -2773,6 +2736,7 @@ ul.user_data li .progress {
background: #F5F7FA;
border: 0;
padding: 7px 0;
display: -ms-flexbox;
display: flex; }
ul.stats-overview {
@ -2888,10 +2852,6 @@ ul.project_files li a i {
font-size: 15px;
font-weight: 700;
color: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
padding: 7px 0;
left: -5px;
@ -3103,17 +3063,9 @@ ul.project_files li a i {
right: -50px; }
.sideways.tabs-right > li {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
.sideways.tabs-left > li {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg); }
/* ********* /verticle tabs **************************** */
@ -3327,22 +3279,10 @@ a.hiddenanchor {
#signup:target ~ .login_wrapper .registration_form, #signin:target ~ .login_wrapper .login_form {
z-index: 22;
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-ms-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-o-animation-delay: .1s;
-ms-animation-delay: .1s;
animation-delay: .1s; }
#signup:target ~ .login_wrapper .login_form, #signin:target ~ .login_wrapper .registration_form {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-ms-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft; }
.animate {
@ -3416,19 +3356,11 @@ a.hiddenanchor {
.login_content h1:after {
background: #7e7e7e;
background: -moz-linear-gradient(left, #7e7e7e 0%, white 100%);
background: -webkit-linear-gradient(left, #7e7e7e 0%, white 100%);
background: -o-linear-gradient(left, #7e7e7e 0%, white 100%);
background: -ms-linear-gradient(left, #7e7e7e 0%, white 100%);
background: linear-gradient(left, #7e7e7e 0%, white 100%);
right: 0; }
.login_content h1:before {
background: #7e7e7e;
background: -moz-linear-gradient(right, #7e7e7e 0%, white 100%);
background: -webkit-linear-gradient(right, #7e7e7e 0%, white 100%);
background: -o-linear-gradient(right, #7e7e7e 0%, white 100%);
background: -ms-linear-gradient(right, #7e7e7e 0%, white 100%);
background: linear-gradient(right, #7e7e7e 0%, white 100%);
left: 0; }
@ -3441,19 +3373,11 @@ a.hiddenanchor {
.login_content h1:after {
background: #7e7e7e;
background: -moz-linear-gradient(left, #7e7e7e 0%, white 100%);
background: -webkit-linear-gradient(left, #7e7e7e 0%, white 100%);
background: -o-linear-gradient(left, #7e7e7e 0%, white 100%);
background: -ms-linear-gradient(left, #7e7e7e 0%, white 100%);
background: linear-gradient(left, #7e7e7e 0%, white 100%);
right: 0; }
.login_content h1:before {
background: #7e7e7e;
background: -moz-linear-gradient(right, #7e7e7e 0%, white 100%);
background: -webkit-linear-gradient(right, #7e7e7e 0%, white 100%);
background: -o-linear-gradient(right, #7e7e7e 0%, white 100%);
background: -ms-linear-gradient(right, #7e7e7e 0%, white 100%);
background: linear-gradient(right, #7e7e7e 0%, white 100%);
left: 0; }
@ -3462,13 +3386,7 @@ a.hiddenanchor {
position: relative; }
.login_content form input[type="text"], .login_content form input[type="email"], .login_content form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset;
@ -3478,8 +3396,6 @@ a.hiddenanchor {
width: 100%; }
.login_content form input[type="text"]:focus, .login_content form input[type="email"]:focus, .login_content form input[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #AA77B4 inset;
-moz-box-shadow: 0 0 2px #ed1c24 inset;
-ms-box-shadow: 0 0 2px #ed1c24 inset;
-o-box-shadow: 0 0 2px #ed1c24 inset;
box-shadow: 0 0 2px #A97AAD inset;
@ -3512,21 +3428,11 @@ a.hiddenanchor {
.button {
background: #f7f9fa;
background: -moz-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
background: -webkit-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
background: -o-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
background: linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
border-top: 1px solid #CFD5D9;
padding: 15px 0; }
@ -3541,10 +3447,6 @@ a.hiddenanchor {
font-size: 17px;
padding: 2px 0 2px 40px;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease; }
.button a:hover {
@ -3578,8 +3480,6 @@ header {
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px); }
/* Remove these to get rid of the spinner */
@ -3598,7 +3498,6 @@ header {
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite; }
.nprogress-custom-parent {
@ -3607,12 +3506,6 @@ header {
.nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar {
position: absolute; }
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg); }
@ -3627,7 +3520,6 @@ header {
border: 1px solid #cccccc;
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.07451) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.07451) 0px 1px 1px 0px inset;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
@ -3919,7 +3811,6 @@ fieldset {
pointer-events: none;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none; }
.actionBar a {
@ -4222,7 +4113,6 @@ ul.notifications {
.xdisplay {
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
margin-bottom: 20px;
@ -4230,7 +4120,6 @@ ul.notifications {
border-radius: 4px;
width: 230px;
overflow: hidden;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar, .daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
@ -4259,23 +4148,15 @@ ul.notifications {
.daterangepicker td.in-range {
background: #E4E7EA;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; }
.daterangepicker td.available + td.start-date {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
.daterangepicker td.in-range + td.end-date {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
.daterangepicker td.start-date.end-date {
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important; }
.daterangepicker td.active, .daterangepicker td.active:hover {
@ -4362,8 +4243,6 @@ ul.notifications {
color: #536A7F;
padding: 3px 12px;
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer; }

4
build/css/custom.min.css vendored
View File

File diff suppressed because one or more lines are too long

28
gulpfile.js
View File

@ -2,7 +2,9 @@ var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-ruby-sass');
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create();
var DEST = 'build/';
@ -12,14 +14,17 @@ gulp.task('scripts', function() {
.pipe(gulp.dest(DEST+'/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(DEST+'/js'));
.pipe(gulp.dest(DEST+'/js'))
.pipe(browserSync.stream());
});
// TODO: Maybe we can simplify how sass compile the minify and unminify version
var compileSASS = function (filename, options) {
return sass('src/scss/*.scss', options)
.pipe(autoprefixer('last 2 versions', '> 5%'))
.pipe(concat(filename))
.pipe(gulp.dest(DEST+'/css'));
.pipe(gulp.dest(DEST+'/css'))
.pipe(browserSync.stream());
};
gulp.task('sass', function() {
@ -30,12 +35,23 @@ gulp.task('sass-minify', function() {
return compileSASS('custom.min.css', {style: 'compressed'});
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: './'
},
startPath: './production/index.html'
});
});
gulp.task('watch', function() {
// Watch .js files
// Watch .html files
gulp.watch('production/*.html', browserSync.reload);
// Watch .js files
gulp.watch('src/js/*.js', ['scripts']);
// Watch .scss files
// Watch .scss files
gulp.watch('src/scss/*.scss', ['sass', 'sass-minify']);
});
// Default Task
gulp.task('default', ['watch']);
gulp.task('default', ['browser-sync', 'watch']);

2
package.json
View File

@ -30,7 +30,9 @@
},
"homepage": "https://github.com/puikinsh/gentelella#readme",
"devDependencies": {
"browser-sync": "^2.12.10",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.0.6",