From 77729e8ff3108722d498435d715567297f23db09 Mon Sep 17 00:00:00 2001 From: Gabriel Schammah Date: Tue, 24 Mar 2015 18:51:03 -0300 Subject: [PATCH 1/3] create default theme --- dist/angular-pickadate.css | 11 +++++---- example.html | 15 ++++++++++++ gulpfile.js | 7 ++++++ src/angular-pickadate.scss | 49 ++++++++++++++++++++------------------ src/themes/default.scss | 31 ++++++++++++++++++++++++ 5 files changed, 85 insertions(+), 28 deletions(-) create mode 100644 example.html create mode 100644 src/themes/default.scss diff --git a/dist/angular-pickadate.css b/dist/angular-pickadate.css index f54b8b9..9603fb4 100644 --- a/dist/angular-pickadate.css +++ b/dist/angular-pickadate.css @@ -43,15 +43,16 @@ font-size: 12px; color: #666666; } .pickadate-cell .pickadate-today { - background-color: #eaeaea; } + background-color: #EAEAEA; } .pickadate-cell .pickadate-active { - background-color: #b52a00; - color: white; } + background-color: #B52A00; + color: #FFFFFF; } .pickadate-cell .pickadate-head { border-top: 1px solid #DCDCDC; - background: #f3f3f3; } + background: #F3F3F3; + font-size: 12px; } .pickadate-cell .pickadate-head:nth-child(1), .pickadate-cell .pickadate-head:nth-child(7) { - background: #f3f3f3; } + background: #F3F3F3; } .pickadate-centered-heading { font-weight: normal; diff --git a/example.html b/example.html new file mode 100644 index 0000000..8a84e51 --- /dev/null +++ b/example.html @@ -0,0 +1,15 @@ + + + + + + + + +
+ + + + diff --git a/gulpfile.js b/gulpfile.js index 36228a4..543cfbe 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -73,4 +73,11 @@ gulp.task('tdd', function (done) { karma.start(karmaConfFor('1.4.0'), done); }); +gulp.task('live_sass', function() { + gulp.watch('./src/**/*.scss', ['sass']); +}); + gulp.task('default', ['tdd']); + + + diff --git a/src/angular-pickadate.scss b/src/angular-pickadate.scss index 1880d5a..7d11de5 100644 --- a/src/angular-pickadate.scss +++ b/src/angular-pickadate.scss @@ -1,11 +1,13 @@ +@import 'themes/default'; + .pickadate { - font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif; + font-family: $font-family; a { &:visited { - color: #666666; + color: $anchor-font-color; } - color: #666666; + color: $anchor-font-color; } } @@ -18,7 +20,7 @@ padding: 0; width: 100%; text-align: center; - font-size: 12px; + font-size: $main-font-size; } .pickadate-cell { @@ -28,53 +30,54 @@ li { display: block; float: left; - border: 1px solid #DCDCDC; - border-width: 0 1px 1px 0; + border: $cell-border; + border-width: 0 $inner-cell-width $inner-cell-width 0; width: 14.285%; - padding: 1.3% 0 1.3% 0; + padding: $cell-default-padding 0 $cell-default-padding 0; line-height: normal; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; &:nth-child(7n+0) { - border-right: 1px solid #DCDCDC; + border-right: $cell-border; } &:nth-child(1), &:nth-child(8), &:nth-child(15), &:nth-child(22), &:nth-child(29), &:nth-child(36) { - border-left: 1px solid #DCDCDC; + border-left: $cell-border; } } .pickadate-disabled { - color: #DCDCDC; + color: $disabled-color; a { - color: #DCDCDC; + color: $disabled-color; } } .pickadate-enabled { cursor: pointer; - font-size: 12px; - color: #666666; + font-size: $main-font-size; + color: $anchor-font-color; } .pickadate-today { - background-color: #eaeaea; + background-color: $cell-today-background-color; } .pickadate-active { - background-color: #b52a00; - color: white; + background-color: $cell-active-background-color; + color: $cell-active-font-color; } .pickadate-head { - border-top: 1px solid #DCDCDC; - background: #f3f3f3; + border-top: $cell-border; + background: $month-names-background-color; + font-size: $month-names-font-size; &:nth-child(1), &:nth-child(7) { - background: #f3f3f3; + background: $month-names-background-color; } } } .pickadate-centered-heading { - font-weight: normal; + font-weight: $heading-font-weight; text-align: center; - font-size: 1em; - margin: 13px 0 13px 0; + font-size: $heading-font-size; + margin: $heading-margin 0 $heading-margin 0; line-height: normal; } @@ -87,7 +90,7 @@ } a { text-decoration: none; - font-size: 0.9em; + font-size: $controls-font-size; } } diff --git a/src/themes/default.scss b/src/themes/default.scss new file mode 100644 index 0000000..5bb8465 --- /dev/null +++ b/src/themes/default.scss @@ -0,0 +1,31 @@ +$anchor-font-color: #666666; + +$font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif; + +$cell-border: 1px solid #DCDCDC; + +$inner-cell-width: 1px; + +$disabled-color: #DCDCDC; + +$cell-today-background-color: #EAEAEA; + +$cell-active-background-color: #B52A00; + +$cell-active-font-color: #FFFFFF; + +$month-names-background-color: #F3F3F3; + +$month-names-font-size: 12px; + +$cell-default-padding: 1.3%; + +$main-font-size: 12px; + +$heading-font-weight: normal; + +$heading-font-size: 1em; + +$heading-margin: 13px; + +$controls-font-size: 0.9em; From 3df1e7e8655239dcbd9e0757cc9e242a97393e24 Mon Sep 17 00:00:00 2001 From: Gabriel Schammah Date: Tue, 24 Mar 2015 20:41:05 -0300 Subject: [PATCH 2/3] add theme building --- dist/angular-pickadate-dark.css | 81 +++++++++++++++++++ ...date.css => angular-pickadate-default.css} | 0 example.html | 2 +- gulpfile.js | 21 +++-- package.json | 1 + src/angular-pickadate.scss | 2 - src/themes/dark.scss | 31 +++++++ 7 files changed, 127 insertions(+), 11 deletions(-) create mode 100644 dist/angular-pickadate-dark.css rename dist/{angular-pickadate.css => angular-pickadate-default.css} (100%) create mode 100644 src/themes/dark.scss diff --git a/dist/angular-pickadate-dark.css b/dist/angular-pickadate-dark.css new file mode 100644 index 0000000..769d828 --- /dev/null +++ b/dist/angular-pickadate-dark.css @@ -0,0 +1,81 @@ +.pickadate { + font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif; } + .pickadate a { + color: #666666; } + .pickadate a:visited { + color: #666666; } + +.pickadate-header { + position: relative; } + +.pickadate-main { + margin: 0; + padding: 0; + width: 100%; + text-align: center; + font-size: 12px; } + +.pickadate-cell { + overflow: hidden; + margin: 0; + padding: 0; } + .pickadate-cell li { + display: block; + float: left; + border: 1px solid #DCDCDC; + border-width: 0 1px 1px 0; + width: 14.285%; + padding: 3.3% 0 3.3% 0; + line-height: normal; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; } + .pickadate-cell li:nth-child(7n+0) { + border-right: 1px solid #DCDCDC; } + .pickadate-cell li:nth-child(1), .pickadate-cell li:nth-child(8), .pickadate-cell li:nth-child(15), .pickadate-cell li:nth-child(22), .pickadate-cell li:nth-child(29), .pickadate-cell li:nth-child(36) { + border-left: 1px solid #DCDCDC; } + .pickadate-cell .pickadate-disabled { + color: #DCDCDC; } + .pickadate-cell .pickadate-disabled a { + color: #DCDCDC; } + .pickadate-cell .pickadate-enabled { + cursor: pointer; + font-size: 12px; + color: #666666; } + .pickadate-cell .pickadate-today { + background-color: #EAEAEA; } + .pickadate-cell .pickadate-active { + background-color: #B52A00; + color: #FFFFFF; } + .pickadate-cell .pickadate-head { + border-top: 1px solid #DCDCDC; + background: #F3F3F3; + font-size: 15px; } + .pickadate-cell .pickadate-head:nth-child(1), .pickadate-cell .pickadate-head:nth-child(7) { + background: #F3F3F3; } + +.pickadate-centered-heading { + font-weight: normal; + text-align: center; + font-size: 2em; + margin: 12px 0 12px 0; + line-height: normal; } + +.pickadate-controls { + position: absolute; + z-index: 10; + width: 100%; } + .pickadate-controls .pickadate-next { + float: right; } + .pickadate-controls a { + text-decoration: none; + font-size: 0.9em; } + +.pickadate-modal { + position: absolute; + background-color: #fff; + width: 300px; + border: 1px solid #ccc; + border-radius: 4px; + padding: 0 5px 5px 5px; + z-index: 1000; } diff --git a/dist/angular-pickadate.css b/dist/angular-pickadate-default.css similarity index 100% rename from dist/angular-pickadate.css rename to dist/angular-pickadate-default.css diff --git a/example.html b/example.html index 8a84e51..e622943 100644 --- a/example.html +++ b/example.html @@ -1,7 +1,7 @@ - + diff --git a/gulpfile.js b/gulpfile.js index 543cfbe..80e7197 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,6 +4,8 @@ var gulp = require('gulp'); var sass = require('gulp-sass'); var uglify = require('gulp-uglify'); var rename = require("gulp-rename"); +var footer = require('gulp-footer'); +var fs = require('fs'); var del = require("del"); var _ = require('lodash'); var karma = require('karma').server; @@ -35,8 +37,14 @@ gulp.task('uglify', function() { }); gulp.task('sass', function () { - gulp.src('./src/*.scss') + var css = fs.readFileSync('./src/angular-pickadate.scss'); + + gulp.src('./src/themes/*.scss') + .pipe(footer(css.toString())) .pipe(sass({ errLogToConsole: true })) + .pipe(rename(function(path) { + path.basename = 'angular-pickadate-' + path.basename; + })) .pipe(gulp.dest('./dist')); }); @@ -61,6 +69,10 @@ gulp.task('test:legacy', legacyVersions.map(function(version) { return 'test:legacy:' + version; })); +gulp.task('dev', function() { + gulp.watch('./src/**/*.scss', ['sass']); +}); + /** * Run test once and exit */ @@ -73,11 +85,4 @@ gulp.task('tdd', function (done) { karma.start(karmaConfFor('1.4.0'), done); }); -gulp.task('live_sass', function() { - gulp.watch('./src/**/*.scss', ['sass']); -}); - gulp.task('default', ['tdd']); - - - diff --git a/package.json b/package.json index a485d8a..ab78ddb 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "devDependencies": { "del": "^1.1.1", "gulp": "^3.8.7", + "gulp-footer": "^1.0.5", "gulp-jshint": "^1.8.4", "gulp-rename": "^1.2.0", "gulp-sass": "^1.2.4", diff --git a/src/angular-pickadate.scss b/src/angular-pickadate.scss index 7d11de5..5effb1a 100644 --- a/src/angular-pickadate.scss +++ b/src/angular-pickadate.scss @@ -1,5 +1,3 @@ -@import 'themes/default'; - .pickadate { font-family: $font-family; diff --git a/src/themes/dark.scss b/src/themes/dark.scss new file mode 100644 index 0000000..8afbc8b --- /dev/null +++ b/src/themes/dark.scss @@ -0,0 +1,31 @@ +$anchor-font-color: #666666; + +$font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif; + +$cell-border: 1px solid #DCDCDC; + +$inner-cell-width: 1px; + +$disabled-color: #DCDCDC; + +$cell-today-background-color: #EAEAEA; + +$cell-active-background-color: #B52A00; + +$cell-active-font-color: #FFFFFF; + +$month-names-background-color: #F3F3F3; + +$month-names-font-size: 15px; + +$cell-default-padding: 3.3%; + +$main-font-size: 12px; + +$heading-font-weight: normal; + +$heading-font-size: 2em; + +$heading-margin: 12px; + +$controls-font-size: 0.9em; From f6a742ad660581c93e36ebd64ea7f393e11a6064 Mon Sep 17 00:00:00 2001 From: Gabriel Schammah Date: Tue, 24 Mar 2015 20:45:46 -0300 Subject: [PATCH 3/3] bump version to 1.1 --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 1da1688..5059c30 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-pickadate", - "version": "1.0.0", + "version": "1.1.0", "homepage": "https://github.com/restorando/angular-pickadate", "authors": [ "Gabriel Schammah " diff --git a/package.json b/package.json index ab78ddb..cd4aa78 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-pickadate", - "version": "1.0.0", + "version": "1.1.0", "description": "A simple and fluid inline datepicker for AngularJS with no extra dependencies", "main": "index.js", "scripts": {