Skip to content

Commit

Permalink
Use less for CSS compilation.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ozdemirburak
ozdemirburak committed Oct 9, 2017
1 parent eaf72f3 commit 4a664e5
Show file tree
Hide file tree
Showing 6 changed files with 315 additions and 146 deletions.
2 changes: 1 addition & 1 deletion dist/jquery.floating-social-share.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 21 additions & 12 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
var gulp = require('gulp'),
concat = require('gulp-concat'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify');
concat = require('gulp-concat'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
less = require('gulp-less'),
rename = require('gulp-rename');

var src = 'src/', dist = 'dist/';

gulp.task('compile-css', function () {
return gulp.src(src + '/less/main.less')
.pipe(less())
.pipe(rename('jquery.floating-social-share.css'))
.pipe(gulp.dest(src));
});

gulp.task('minify-css', function() {
return gulp.src(src + 'jquery.floating-social-share.css')
.pipe(concat('jquery.floating-social-share.min.css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(dist));
return gulp.src(src + 'jquery.floating-social-share.css')
.pipe(concat('jquery.floating-social-share.min.css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(dist));
});

gulp.task('minify-js', function() {
return gulp.src(src + 'jquery.floating-social-share.js')
.pipe(concat('jquery.floating-social-share.min.js'))
.pipe(uglify({mangle: false}))
.pipe(gulp.dest(dist));
return gulp.src(src + 'jquery.floating-social-share.js')
.pipe(concat('jquery.floating-social-share.min.js'))
.pipe(uglify({mangle: false}))
.pipe(gulp.dest(dist));
});

gulp.task('default', function() {
gulp.run('minify-js', 'minify-css');
gulp.run('minify-js', 'compile-css', 'minify-css');
})
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.12",
"gulp-concat": "^2.6.0",
"gulp-less": "^3.3.2",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0"
},
"keywords": [
Expand Down
247 changes: 114 additions & 133 deletions src/jquery.floating-social-share.css
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,159 @@
#floatingSocialShare {
position: relative;
position: relative;
}

#floatingSocialShare *,
#floatingSocialShare *:before,
#floatingSocialShare *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}

#floatingSocialShare a {
position: relative;
width: 45px;
height: 30px;
line-height: 20px;
padding: 8px 0;
display:list-item;
list-style-type: none;
text-align: center;
color: #fff;
position: relative;
width: 45px;
height: 30px;
line-height: 20px;
padding: 8px 0;
display: list-item;
list-style-type: none;
text-align: center;
color: #FFFFFF;
outline: 0 none !important;
}
#floatingSocialShare a:focus,
#floatingSocialShare a:hover {
color: #FFFFFF;
width: 52px;
opacity: 0.8;
transition-duration: 0.3s;
transition-property: right;
transition-timing-function: ease-out;
}
#floatingSocialShare a:focus,
#floatingSocialShare a:hover,
#floatingSocialShare a:visited,
#floatingSocialShare a:active {
outline: 0 none !important;
}

#floatingSocialShare svg {
fill: #fff;
height: 30px;
fill: #FFFFFF;
height: 30px;
}

#floatingSocialShare a.without-counter svg {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}

#floatingSocialShare .shareCount {
position: absolute;
top: 36px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
color: #ffffff;
font-size: 10px;
}

#floatingSocialShare a:focus, #floatingSocialShare a:hover {
color: #fff;
width: 52px;
opacity: 0.8;
transition-duration: 0.3s;
transition-property: right;
transition-timing-function: ease-out;
}

#floatingSocialShare a, #floatingSocialShare a:visited, #floatingSocialShare a:focus, #floatingSocialShare a:active, #floatingSocialShare a:hover {
outline: 0 none !important;
}

#floatingSocialShare .top-left, #floatingSocialShare .top-right, #floatingSocialShare .content-left, #floatingSocialShare .content-right {
position: fixed;
top: 25%;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}

position: absolute;
top: 36px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
color: #FFFFFF;
font-size: 10px;
}
#floatingSocialShare .top-left,
#floatingSocialShare .top-right,
#floatingSocialShare .content-left,
#floatingSocialShare .content-right {
position: fixed;
top: 25%;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
#floatingSocialShare .top-left {
left: 0;
left: 0;
}

#floatingSocialShare .top-right {
right: 0;
right: 0;
direction: rtl;
}

#floatingSocialShare .content-left, #floatingSocialShare .content-right {
margin: 0;
#floatingSocialShare .content-left {
margin: 0;
}

#floatingSocialShare .top-right {
direction: rtl;
#floatingSocialShare .content-right {
margin: 0;
}

#floatingSocialShare .mail {
background-color: #D14836;
background-color: #D14836;
}

#floatingSocialShare .facebook {
background-color: #3B5998;
background-color: #3B5998;
}

#floatingSocialShare .google-plus {
background-color: #DC4E41;
background-color: #DC4E41;
}

#floatingSocialShare .linkedin {
background-color: #0077B5;
background-color: #0077B5;
}

#floatingSocialShare .odnoklassniki {
background-color: #F4731C;
background-color: #F4731C;
}

#floatingSocialShare .pinterest {
background-color: #BD081C;
background-color: #BD081C;
}

#floatingSocialShare .reddit {
background-color: #FF4500;
background-color: #FF4500;
}

#floatingSocialShare .stumbleupon {
background-color: #EB4924;
background-color: #EB4924;
}

#floatingSocialShare .telegram {
background-color: #2CA5E0;
background-color: #2CA5E0;
}

#floatingSocialShare .tumblr {
background-color: #36465D;
background-color: #36465D;
}

#floatingSocialShare .twitter {
background-color: #1DA1F2;
background-color: #1DA1F2;
}

#floatingSocialShare .vk {
background-color: #6383A8;
background-color: #6383A8;
}

#floatingSocialShare .whatsapp {
background-color: #00E676;
}

@media only screen and (min-device-width: 0px) and (max-width:961px) {

#floatingSocialShare {
margin-top: 50px;
}

#floatingSocialShare .top-left, #floatingSocialShare .top-right, #floatingSocialShare .content-left, #floatingSocialShare .content-right {
top: auto;
bottom: 0;
margin: 0;
right: 0;
left: 0;
width: 100%;
z-index: 999;
}

#floatingSocialShare a {
position: relative;
float: left;
display:list-item;
list-style-type: none;
}

#floatingSocialShare svg {
height: 24px;
}

#floatingSocialShare .shareCount {
top: 30px;
}

#floatingSocialShare a:focus, #floatingSocialShare a:hover {
-moz-transition-property: none;
-webkit-transition-property: none;
-o-transition-property: none;
transition-property: none;
}
background-color: #00E676;
}
@media only screen and (max-width: 961px) {
#floatingSocialShare {
margin-top: 50px;
}
#floatingSocialShare .top-left,
#floatingSocialShare .top-right,
#floatingSocialShare .content-left,
#floatingSocialShare .content-right {
top: auto;
bottom: 0;
margin: 0;
right: 0;
left: 0;
width: 100%;
z-index: 999;
}
#floatingSocialShare a {
position: relative;
float: left;
display: list-item;
list-style-type: none;
}
#floatingSocialShare a:focus,
#floatingSocialShare a:hover {
-moz-transition-property: none;
-webkit-transition-property: none;
-o-transition-property: none;
transition-property: none;
}
#floatingSocialShare svg {
height: 24px;
}
#floatingSocialShare .shareCount {
top: 30px;
}
}
Loading

0 comments on commit 4a664e5

Please sign in to comment.