From 4a664e583a36e30f774c99315d6ee84bbacbe7ec Mon Sep 17 00:00:00 2001 From: Burak Ozdemir Date: Mon, 9 Oct 2017 18:04:00 +0300 Subject: [PATCH] Use less for CSS compilation. --- dist/jquery.floating-social-share.min.css | 2 +- gulpfile.js | 33 +-- package.json | 2 + src/jquery.floating-social-share.css | 247 ++++++++++------------ src/less/main.less | 150 +++++++++++++ src/less/variables.less | 27 +++ 6 files changed, 315 insertions(+), 146 deletions(-) create mode 100644 src/less/main.less create mode 100644 src/less/variables.less diff --git a/dist/jquery.floating-social-share.min.css b/dist/jquery.floating-social-share.min.css index 4e9ce3d..75282d1 100644 --- a/dist/jquery.floating-social-share.min.css +++ b/dist/jquery.floating-social-share.min.css @@ -1 +1 @@ -#floatingSocialShare{position:relative}#floatingSocialShare *,#floatingSocialShare :after,#floatingSocialShare :before{-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}#floatingSocialShare svg{fill:#fff;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}#floatingSocialShare .shareCount{position:absolute;top:36px;bottom:0;right:0;left:0;margin:auto;color:#fff;font-size:10px}#floatingSocialShare a:focus,#floatingSocialShare a:hover{color:#fff;width:52px;opacity:.8;transition-duration:.3s;transition-property:right;transition-timing-function:ease-out}#floatingSocialShare a,#floatingSocialShare a:active,#floatingSocialShare a:focus,#floatingSocialShare a:hover,#floatingSocialShare a:visited{outline:0!important}#floatingSocialShare .content-left,#floatingSocialShare .content-right,#floatingSocialShare .top-left,#floatingSocialShare .top-right{position:fixed;top:25%;transform:translateZ(0);-webkit-transform:translateZ(0)}#floatingSocialShare .top-left{left:0}#floatingSocialShare .top-right{right:0;direction:rtl}#floatingSocialShare .content-left,#floatingSocialShare .content-right{margin:0}#floatingSocialShare .mail{background-color:#D14836}#floatingSocialShare .facebook{background-color:#3B5998}#floatingSocialShare .google-plus{background-color:#DC4E41}#floatingSocialShare .linkedin{background-color:#0077B5}#floatingSocialShare .odnoklassniki{background-color:#F4731C}#floatingSocialShare .pinterest{background-color:#BD081C}#floatingSocialShare .reddit{background-color:#FF4500}#floatingSocialShare .stumbleupon{background-color:#EB4924}#floatingSocialShare .telegram{background-color:#2CA5E0}#floatingSocialShare .tumblr{background-color:#36465D}#floatingSocialShare .twitter{background-color:#1DA1F2}#floatingSocialShare .vk{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 .content-left,#floatingSocialShare .content-right,#floatingSocialShare .top-left,#floatingSocialShare .top-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}} \ No newline at end of file +#floatingSocialShare{position:relative}#floatingSocialShare *,#floatingSocialShare :after,#floatingSocialShare :before{-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;outline:0!important}#floatingSocialShare a:focus,#floatingSocialShare a:hover{color:#fff;width:52px;opacity:.8;transition-duration:.3s;transition-property:right;transition-timing-function:ease-out;outline:0!important}#floatingSocialShare a:active,#floatingSocialShare a:visited{outline:0!important}#floatingSocialShare svg{fill:#fff;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}#floatingSocialShare .shareCount{position:absolute;top:36px;bottom:0;right:0;left:0;margin:auto;color:#fff;font-size:10px}#floatingSocialShare .top-left{position:fixed;top:25%;transform:translateZ(0);-webkit-transform:translateZ(0);left:0}#floatingSocialShare .top-right{position:fixed;top:25%;transform:translateZ(0);-webkit-transform:translateZ(0);right:0;direction:rtl}#floatingSocialShare .content-left,#floatingSocialShare .content-right{position:fixed;top:25%;transform:translateZ(0);-webkit-transform:translateZ(0);margin:0}#floatingSocialShare .mail{background-color:#D14836}#floatingSocialShare .facebook{background-color:#3B5998}#floatingSocialShare .google-plus{background-color:#DC4E41}#floatingSocialShare .linkedin{background-color:#0077B5}#floatingSocialShare .odnoklassniki{background-color:#F4731C}#floatingSocialShare .pinterest{background-color:#BD081C}#floatingSocialShare .reddit{background-color:#FF4500}#floatingSocialShare .stumbleupon{background-color:#EB4924}#floatingSocialShare .telegram{background-color:#2CA5E0}#floatingSocialShare .tumblr{background-color:#36465D}#floatingSocialShare .twitter{background-color:#1DA1F2}#floatingSocialShare .vk{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 .content-left,#floatingSocialShare .content-right,#floatingSocialShare .top-left,#floatingSocialShare .top-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}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 694180a..2f660af 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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'); }) diff --git a/package.json b/package.json index 53bd14a..7c331fa 100644 --- a/package.json +++ b/package.json @@ -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": [ diff --git a/src/jquery.floating-social-share.css b/src/jquery.floating-social-share.css index 06cce18..9c81e57 100644 --- a/src/jquery.floating-social-share.css +++ b/src/jquery.floating-social-share.css @@ -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; + } } diff --git a/src/less/main.less b/src/less/main.less new file mode 100644 index 0000000..c8308e3 --- /dev/null +++ b/src/less/main.less @@ -0,0 +1,150 @@ +@import 'variables'; + +#floatingSocialShare { + position: relative; + *, *:before, *:after { + -webkit-box-sizing: content-box !important; + -moz-box-sizing: content-box !important; + box-sizing: content-box !important; + } + a { + position: relative; + width: @width; + height: @height; + line-height: @lineHeight; + padding: @padding; + display: list-item; + list-style-type: none; + text-align: center; + color: @white; + outline: 0 none !important; + &:focus, &:hover { + color: @white; + width: @hoverWidth; + opacity: @hoverOpacity; + transition-duration: @hoverTransitionDuration; + transition-property: right; + transition-timing-function: ease-out; + } + &:focus, &:hover, &:visited, &:active { + outline: 0 none !important; + } + } + svg { + fill: @white; + height: @height; + } + 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; + } + } + .shareCount { + position: absolute; + top: @countTop; + bottom: 0; + right: 0; + left: 0; + margin: auto; + color: @white; + font-size: @countFontSize; + } + .top-left, .top-right, .content-left, .content-right { + position: fixed; + top: 25%; + transform: translateZ(0); + -webkit-transform: translateZ(0); + } + .top-left { + left: 0; + } + .top-right { + right: 0; + direction: rtl; + } + .content-left { + margin: 0; + } + .content-right { + margin: 0; + } + .mail { + background-color: @mail; + } + .facebook { + background-color: @facebook; + } + .google-plus { + background-color: @google-plus; + } + .linkedin { + background-color: @linkedin; + } + .odnoklassniki { + background-color: @odnoklassniki; + } + .pinterest { + background-color: @pinterest; + } + .reddit { + background-color: @reddit; + } + .stumbleupon { + background-color: @stumbleupon; + } + .telegram { + background-color: @telegram; + } + .tumblr { + background-color: @tumblr; + } + .twitter { + background-color: @twitter; + } + .vk { + background-color: @vk; + } + .whatsapp { + background-color: @whatsapp; + } +} +@media only screen and (max-width: @screenSm) { + #floatingSocialShare { + margin-top: @topMarginMobile; + .top-left, .top-right, .content-left, .content-right { + top: auto; + bottom: 0; + margin: 0; + right: 0; + left: 0; + width: 100%; + z-index: 999; + } + a { + position: relative; + float: left; + display: list-item; + list-style-type: none; + &:focus, &:hover { + -moz-transition-property: none; + -webkit-transition-property: none; + -o-transition-property: none; + transition-property: none; + } + } + svg { + height: @svgMobileHeight; + } + .shareCount { + top: @height; + } + } +} diff --git a/src/less/variables.less b/src/less/variables.less new file mode 100644 index 0000000..d311cef --- /dev/null +++ b/src/less/variables.less @@ -0,0 +1,27 @@ +@height: 30px; +@width: 45px; +@padding: 8px 0; +@hoverWidth: 52px; +@hoverOpacity: 0.8; +@hoverTransitionDuration: 0.3s; +@lineHeight: 20px; +@svgMobileHeight: 24px; +@countTop: 36px; +@countFontSize: 10px; +@topMarginMobile: 50px; +@screenSm: 961px; + +@white: #FFFFFF; +@mail: #D14836; +@facebook: #3B5998; +@google-plus: #DC4E41; +@linkedin: #0077B5; +@odnoklassniki: #F4731C; +@pinterest: #BD081C; +@reddit: #FF4500; +@stumbleupon: #EB4924; +@telegram: #2CA5E0; +@tumblr: #36465D; +@twitter: #1DA1F2; +@vk: #6383A8; +@whatsapp: #00E676;