From 04ed0803b5f052a2e38d55295e781ee42fc5dafe Mon Sep 17 00:00:00 2001 From: helloilya Date: Sun, 17 Jan 2016 22:19:28 +0300 Subject: [PATCH 1/4] Updated .gitignore --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index 7bf6eb18..4106b51c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,6 @@ bower_components node_modules + +.DS_Store +Thumbs.db +desktop.ini \ No newline at end of file From 925f981425a36492ae41080e3d718a762b68f65e Mon Sep 17 00:00:00 2001 From: helloilya Date: Sun, 17 Jan 2016 22:20:59 +0300 Subject: [PATCH 2/4] Support sass preprocessor --- src/sass/lightbox.sass | 165 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 src/sass/lightbox.sass diff --git a/src/sass/lightbox.sass b/src/sass/lightbox.sass new file mode 100644 index 00000000..26aaf699 --- /dev/null +++ b/src/sass/lightbox.sass @@ -0,0 +1,165 @@ +// Preload images + +body:after + display: none + content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png) + +body.lb-disable-scrolling + overflow: hidden + +.lightboxOverlay + display: none + position: absolute + top: 0 + left: 0 + z-index: 9999 + background-color: black + opacity: 0.8 + +.lb-outerContainer + width: 250px + height: 250px + position: relative + margin: 0 auto + *zoom: 1 + border-radius: 4px + background-color: white + + &:after + display: table + clear: both + content: '' + +// Lightbox + +.lightbox + width: 100% + position: absolute + left: 0 + z-index: 10000 + line-height: 0 + font-weight: normal + text-align: center + + .lb-image + display: block + max-width: inherit + height: auto + border-radius: 3px + + img + border: none + +.lb-container + padding: 4px + + & > .nav + left: 0 + +// Nav + +.lb-prev, +.lb-next + display: block + height: 100% + cursor: pointer + +.lb-nav + width: 100% + height: 100% + position: absolute + top: 0 + left: 0 + z-index: 10 + + a + outline: none + background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==') + + .lb-prev + width: 34% + left: 0 + float: left + background: url(../images/prev.png) left 48% no-repeat + opacity: 0 + transition: opacity 0.6s + + &:hover + opacity: 1 + + .lb-next + width: 64% + right: 0 + float: right + background: url(../images/next.png) right 48% no-repeat + opacity: 0 + transition: opacity 0.6s + + &:hover + opacity: 1 + +.lb-loader + width: 100% + height: 25% + position: absolute + top: 43% + left: 0 + line-height: 0 + text-align: center + +.lb-cancel + display: block + width: 32px + height: 32px + margin: 0 auto + background: url(../images/loading.gif) no-repeat + +.lb-dataContainer + width: 100% + margin: 0 auto + padding-top: 5px + *zoom: 1 + border-bottom-left-radius: 4px + border-bottom-right-radius: 4px + + &:after + display: table + clear: both + content: '' + +.lb-data + padding: 0 4px + color: #ccc + + .lb-details + width: 85% + float: left + text-align: left + line-height: 1.1em + + .lb-caption + font-size: 13px + font-weight: bold + line-height: 1em + + .lb-number + display: block + clear: left + padding-bottom: 1em + font-size: 12px + color: #999999 + + .lb-close + display: block + float: right + width: 30px + height: 30px + background: url(../images/close.png) top right no-repeat + text-align: right + outline: none + opacity: 0.7 + transition: opacity 0.2s + + &:hover + cursor: pointer + opacity: 1 \ No newline at end of file From 66e13cd15e9a60dcab29e63cf3757016c42476f9 Mon Sep 17 00:00:00 2001 From: helloilya Date: Sun, 17 Jan 2016 22:22:02 +0300 Subject: [PATCH 3/4] Added buildsass grunt task --- Gruntfile.js | 44 ++++++++++++++++++++++++++++++++++++++++++-- package.json | 2 ++ 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 6eea00c4..28d1b903 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -58,12 +58,49 @@ module.exports = function(grunt) { jshint: { files: ['src/js/lightbox.js'], tasks: ['jshint', 'jscs'] + }, + sass: { + files: ['src/sass/**/*.sass'], + tasks: ['sass'] } }, cssmin: { minify: { - src: 'dist/css/lightbox.css', - dest: 'dist/css/lightbox.min.css' + src: 'dist/css/lightbox.css', + dest: 'dist/css/lightbox.min.css' + } + }, + sass: { + minify: { + options: { + noCache: true, + sourcemap: 'none', + style: 'compressed' + }, + files: { + 'dist/css/lightbox.min.css': ['src/sass/**/*.sass'] + } + }, + default: { + options: { + noCache: true, + sourcemap: 'none', + style: 'expanded' + }, + files: { + 'dist/css/lightbox.css': ['src/sass/**/*.sass'] + } + } + }, + autoprefixer: { + options: { + browsers: ['last 2 versions'] + }, + dist: { + files: { + 'dist/css/lightbox.css': 'dist/css/lightbox.css', + 'dist/css/lightbox.min.css': 'dist/css/lightbox.min.css' + } } } }); @@ -75,9 +112,12 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks("grunt-jscs"); grunt.registerTask('default', ['connect', 'watch']); grunt.registerTask('test', ['jshint', 'jscs']); grunt.registerTask('build', ['jshint', 'jscs', 'copy:dist', 'concat', 'uglify', 'cssmin:minify']); + grunt.registerTask('buildsass', ['sass', 'autoprefixer']); }; diff --git a/package.json b/package.json index 2bc806d0..32a72f06 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ ], "devDependencies": { "grunt": "^0.4.5", + "grunt-autoprefixer": "^3.0.3", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-connect": "^0.7.1", "grunt-contrib-copy": "^0.8.0", @@ -35,6 +36,7 @@ "grunt-contrib-jshint": "^0.11.2", "grunt-contrib-uglify": "~0.4.0", "grunt-contrib-watch": "^0.5.3", + "grunt-contrib-sass": "~0.8.1", "grunt-jscs": "^1.8.0" } } From 2988ca176ae0fb1ebda87a8769151ecabc244462 Mon Sep 17 00:00:00 2001 From: helloilya Date: Mon, 20 Jun 2016 10:40:30 +0200 Subject: [PATCH 4/4] Sass improvement --- src/sass/_base.sass | 167 +++++++++++++++++++++++++++++++++++++++ src/sass/_variables.sass | 10 +++ src/sass/lightbox.sass | 167 +-------------------------------------- 3 files changed, 179 insertions(+), 165 deletions(-) create mode 100644 src/sass/_base.sass create mode 100644 src/sass/_variables.sass diff --git a/src/sass/_base.sass b/src/sass/_base.sass new file mode 100644 index 00000000..e4d8e57b --- /dev/null +++ b/src/sass/_base.sass @@ -0,0 +1,167 @@ +// Preload + +body + + &:after + display: none + content: url(#{$lb-image-url}close.png) url(#{$lb-image-url}loading.gif) url(#{$lb-image-url}prev.png) url(#{$lb-image-url}next.png) + + &.lb-disable-scrolling + overflow: hidden + +// Lightbox + +.lightbox + width: 100% + position: absolute + left: 0 + z-index: 10000 + text-align: center + line-height: 0 + font-weight: normal + + &Overlay + display: none + position: absolute + top: 0 + left: 0 + z-index: 9999 + background-color: #000 + opacity: 0.8 + + a img + border: none + + .lb-image + display: block + height: auto + max-width: inherit + border-radius: 3px + +// Container + +.lb-outerContainer + width: 250px + height: 250px + position: relative + background-color: #fff + margin: 0 auto + border-radius: 4px + *zoom: 1 + + &:after + @extend %clearfix + +.lb-container + padding: 4px + + & > .nav + left: 0 + +// Controls + +.lb-loader + width: 100% + height: 25% + position: absolute + top: 43% + left: 0 + text-align: center + line-height: 0 + +.lb-cancel + display: block + width: 32px + height: 32px + margin: 0 auto + background: url(#{$lb-image-url}loading.gif) no-repeat + +// Navigation + +.lb-nav + width: 100% + height: 100% + position: absolute + top: 0 + left: 0 + z-index: 10 + + .lb-prev, + .lb-next + display: block + height: 100% + cursor: pointer + + a + outline: none + + &:hover + opacity: 1 + + &.lb-prev + width: 34% + left: 0 + float: left + background: url(#{$lb-image-url}prev.png) left 48% no-repeat + opacity: 0 + transition: opacity 0.6s + + &.lb-next + width: 64% + right: 0 + float: right + background: url(#{$lb-image-url}next.png) right 48% no-repeat + opacity: 0 + transition: opacity 0.6s + +// Data container + +.lb-dataContainer + width: 100% + margin: 0 auto + padding-top: 5px + border-bottom-left-radius: 4px + border-bottom-right-radius: 4px + *zoom: 1 + + &:after + @extend %clearfix + +// Data + +.lb-data + padding: 0 4px + color: #CCC + + .lb-details + width: 85% + float: left + text-align: left + line-height: 1.1em + + .lb-caption + font-size: 13px + font-weight: bold + line-height: 1em + + .lb-number + display: block + clear: left + padding-bottom: 1em + font-size: 12px + color: #999 + + .lb-close + display: block + width: 30px + height: 30px + float: right + background: url(#{$lb-image-url}close.png) top right no-repeat + text-align: right + outline: none + opacity: 0.7 + transition: opacity 0.2s + + &:hover + cursor: pointer + opacity: 1 \ No newline at end of file diff --git a/src/sass/_variables.sass b/src/sass/_variables.sass new file mode 100644 index 00000000..42cafb04 --- /dev/null +++ b/src/sass/_variables.sass @@ -0,0 +1,10 @@ +// Variables + +$lb-image-url: '../images/' !default + +// Extends + +%clearfix + display: table + clear: both + content: '' \ No newline at end of file diff --git a/src/sass/lightbox.sass b/src/sass/lightbox.sass index 26aaf699..9f2ade14 100644 --- a/src/sass/lightbox.sass +++ b/src/sass/lightbox.sass @@ -1,165 +1,2 @@ -// Preload images - -body:after - display: none - content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png) - -body.lb-disable-scrolling - overflow: hidden - -.lightboxOverlay - display: none - position: absolute - top: 0 - left: 0 - z-index: 9999 - background-color: black - opacity: 0.8 - -.lb-outerContainer - width: 250px - height: 250px - position: relative - margin: 0 auto - *zoom: 1 - border-radius: 4px - background-color: white - - &:after - display: table - clear: both - content: '' - -// Lightbox - -.lightbox - width: 100% - position: absolute - left: 0 - z-index: 10000 - line-height: 0 - font-weight: normal - text-align: center - - .lb-image - display: block - max-width: inherit - height: auto - border-radius: 3px - - img - border: none - -.lb-container - padding: 4px - - & > .nav - left: 0 - -// Nav - -.lb-prev, -.lb-next - display: block - height: 100% - cursor: pointer - -.lb-nav - width: 100% - height: 100% - position: absolute - top: 0 - left: 0 - z-index: 10 - - a - outline: none - background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==') - - .lb-prev - width: 34% - left: 0 - float: left - background: url(../images/prev.png) left 48% no-repeat - opacity: 0 - transition: opacity 0.6s - - &:hover - opacity: 1 - - .lb-next - width: 64% - right: 0 - float: right - background: url(../images/next.png) right 48% no-repeat - opacity: 0 - transition: opacity 0.6s - - &:hover - opacity: 1 - -.lb-loader - width: 100% - height: 25% - position: absolute - top: 43% - left: 0 - line-height: 0 - text-align: center - -.lb-cancel - display: block - width: 32px - height: 32px - margin: 0 auto - background: url(../images/loading.gif) no-repeat - -.lb-dataContainer - width: 100% - margin: 0 auto - padding-top: 5px - *zoom: 1 - border-bottom-left-radius: 4px - border-bottom-right-radius: 4px - - &:after - display: table - clear: both - content: '' - -.lb-data - padding: 0 4px - color: #ccc - - .lb-details - width: 85% - float: left - text-align: left - line-height: 1.1em - - .lb-caption - font-size: 13px - font-weight: bold - line-height: 1em - - .lb-number - display: block - clear: left - padding-bottom: 1em - font-size: 12px - color: #999999 - - .lb-close - display: block - float: right - width: 30px - height: 30px - background: url(../images/close.png) top right no-repeat - text-align: right - outline: none - opacity: 0.7 - transition: opacity 0.2s - - &:hover - cursor: pointer - opacity: 1 \ No newline at end of file +@import "variables" +@import "base" \ No newline at end of file