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/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 92% rename from dist/angular-pickadate.css rename to dist/angular-pickadate-default.css index f54b8b9..9603fb4 100644 --- a/dist/angular-pickadate.css +++ b/dist/angular-pickadate-default.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..e622943 --- /dev/null +++ b/example.html @@ -0,0 +1,15 @@ + + + + + + + + +
+ + + + diff --git a/gulpfile.js b/gulpfile.js index 36228a4..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 */ diff --git a/package.json b/package.json index a485d8a..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": { @@ -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 1880d5a..5effb1a 100644 --- a/src/angular-pickadate.scss +++ b/src/angular-pickadate.scss @@ -1,11 +1,11 @@ .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 +18,7 @@ padding: 0; width: 100%; text-align: center; - font-size: 12px; + font-size: $main-font-size; } .pickadate-cell { @@ -28,53 +28,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 +88,7 @@ } a { text-decoration: none; - font-size: 0.9em; + font-size: $controls-font-size; } } 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; 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;