diff options
| -rw-r--r-- | .gitignore | 4 | ||||
| -rw-r--r-- | CONTRIBUTING.md | 9 | ||||
| -rw-r--r-- | awesomplete.base.css | 33 | ||||
| -rw-r--r-- | awesomplete.css | 70 | ||||
| -rw-r--r-- | awesomplete.theme.css | 69 | ||||
| -rw-r--r-- | gulpfile.js | 12 | ||||
| -rw-r--r-- | package.json | 1 |
7 files changed, 162 insertions, 36 deletions
@@ -1,2 +1,2 @@ -node_modules -coverage +node_modules/ +coverage/
\ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3d14f21..af0c206 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -45,8 +45,15 @@ describe("A fact", function(){ See existing tests in ```test``` directory as an example. More expectations and examples on how to use Jasmine can be found on the official [documentation](http://jasmine.github.io/2.2/introduction.html). -**Build minified version** +**Build** + +Run the build with the following command: ``` gulp ``` + +The build will: + +1. Minify `awesomplete.js` and generate `awesomplete.min.js`. +2. Merge `awesomplete.base.css` and `awesomplete.theme.css` and generate `awesomplete.css`.
\ No newline at end of file diff --git a/awesomplete.base.css b/awesomplete.base.css new file mode 100644 index 0000000..8e5ec12 --- /dev/null +++ b/awesomplete.base.css @@ -0,0 +1,33 @@ +.awesomplete [hidden] { + display: none; +} + +.awesomplete .visually-hidden { + position: absolute; + clip: rect(0, 0, 0, 0); +} + +.awesomplete { + display: inline-block; + position: relative; +} + +.awesomplete > input { + display: block; +} + +.awesomplete > ul { + position: absolute; + left: 0; + z-index: 1; + min-width: 100%; + box-sizing: border-box; + list-style: none; + padding: 0; + margin: 0; + background: #fff; +} + +.awesomplete > ul:empty { + display: none; +} diff --git a/awesomplete.css b/awesomplete.css index c9d5e94..696dd2f 100644 --- a/awesomplete.css +++ b/awesomplete.css @@ -1,27 +1,38 @@ -[hidden] { display: none; } +.awesomplete [hidden] { + display: none; +} + +.awesomplete .visually-hidden { + position: absolute; + clip: rect(0, 0, 0, 0); +} -.visually-hidden { - position: absolute; - clip: rect(0, 0, 0, 0); +.awesomplete { + display: inline-block; + position: relative; } -div.awesomplete { - display: inline-block; - position: relative; +.awesomplete > input { + display: block; } -div.awesomplete > input { - display: block; +.awesomplete > ul { + position: absolute; + left: 0; + z-index: 1; + min-width: 100%; + box-sizing: border-box; + list-style: none; + padding: 0; + margin: 0; + background: #fff; } -div.awesomplete > ul { - position: absolute; - left: 0; - z-index: 1; - min-width: 100%; - box-sizing: border-box; - list-style: none; - padding: 0; +.awesomplete > ul:empty { + display: none; +} + +.awesomplete > ul { border-radius: .3em; margin: .2em 0 0; background: hsla(0,0%,100%,.9); @@ -31,19 +42,14 @@ div.awesomplete > ul { text-shadow: none; } -div.awesomplete > ul[hidden], -div.awesomplete > ul:empty { - display: none; -} - @supports (transform: scale(0)) { - div.awesomplete > ul { + .awesomplete > ul { transition: .3s cubic-bezier(.4,.2,.5,1.4); transform-origin: 1.43em -.43em; } - div.awesomplete > ul[hidden], - div.awesomplete > ul:empty { + .awesomplete > ul[hidden], + .awesomplete > ul:empty { opacity: 0; transform: scale(0); display: block; @@ -52,7 +58,7 @@ div.awesomplete > ul:empty { } /* Pointer */ - div.awesomplete > ul:before { + .awesomplete > ul:before { content: ""; position: absolute; top: -.43em; @@ -67,31 +73,31 @@ div.awesomplete > ul:empty { transform: rotate(45deg); } - div.awesomplete > ul > li { + .awesomplete > ul > li { position: relative; padding: .2em .5em; cursor: pointer; } - div.awesomplete > ul > li:hover { + .awesomplete > ul > li:hover { background: hsl(200, 40%, 80%); color: black; } - div.awesomplete > ul > li[aria-selected="true"] { + .awesomplete > ul > li[aria-selected="true"] { background: hsl(205, 40%, 40%); color: white; } - div.awesomplete mark { + .awesomplete mark { background: hsl(65, 100%, 50%); } - div.awesomplete li:hover mark { + .awesomplete li:hover mark { background: hsl(68, 100%, 41%); } - div.awesomplete li[aria-selected="true"] mark { + .awesomplete li[aria-selected="true"] mark { background: hsl(86, 100%, 21%); color: inherit; }
\ No newline at end of file diff --git a/awesomplete.theme.css b/awesomplete.theme.css new file mode 100644 index 0000000..8a964f1 --- /dev/null +++ b/awesomplete.theme.css @@ -0,0 +1,69 @@ +.awesomplete > ul { + border-radius: .3em; + margin: .2em 0 0; + background: hsla(0,0%,100%,.9); + background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8)); + border: 1px solid rgba(0,0,0,.3); + box-shadow: .05em .2em .6em rgba(0,0,0,.2); + text-shadow: none; +} + +@supports (transform: scale(0)) { + .awesomplete > ul { + transition: .3s cubic-bezier(.4,.2,.5,1.4); + transform-origin: 1.43em -.43em; + } + + .awesomplete > ul[hidden], + .awesomplete > ul:empty { + opacity: 0; + transform: scale(0); + display: block; + transition-timing-function: ease; + } +} + + /* Pointer */ + .awesomplete > ul:before { + content: ""; + position: absolute; + top: -.43em; + left: 1em; + width: 0; height: 0; + padding: .4em; + background: white; + border: inherit; + border-right: 0; + border-bottom: 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + + .awesomplete > ul > li { + position: relative; + padding: .2em .5em; + cursor: pointer; + } + + .awesomplete > ul > li:hover { + background: hsl(200, 40%, 80%); + color: black; + } + + .awesomplete > ul > li[aria-selected="true"] { + background: hsl(205, 40%, 40%); + color: white; + } + + .awesomplete mark { + background: hsl(65, 100%, 50%); + } + + .awesomplete li:hover mark { + background: hsl(68, 100%, 41%); + } + + .awesomplete li[aria-selected="true"] mark { + background: hsl(86, 100%, 21%); + color: inherit; + }
\ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index dfccef6..f7713ce 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,6 +2,7 @@ var gulp = require('gulp'); var closure = require('gulp-closure-compiler-service'); var rename = require('gulp-rename'); var header = require('gulp-header'); +var concat = require('gulp-concat'); var banner = "// Awesomplete - Lea Verou - MIT license\n"; @@ -16,4 +17,13 @@ gulp.task('minify', function() { .pipe(gulp.dest('.')); }); -gulp.task('default', ['minify']); +gulp.task('concat', function() { + + return gulp.src(['awesomplete.base.css', 'awesomplete.theme.css']) + .pipe(concat('awesomplete.css')) + .pipe(gulp.dest('.')); + + +}); + +gulp.task('default', ['minify', 'concat']); diff --git a/package.json b/package.json index 5f08225..aef868a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "devDependencies": { "gulp": "^3.9.0", "gulp-closure-compiler-service": "^0.5.0", + "gulp-concat": "^2.6.0", "gulp-header": "^1.7.1", "gulp-rename": "^1.2.2", "jasmine-core": "^2.4.1", |