From 59046f710aa08893ab75900e2f9e93166928b155 Mon Sep 17 00:00:00 2001 From: connors Date: Wed, 11 Sep 2013 12:31:57 -0700 Subject: [PATCH 1/6] adding grunt files --- Gruntfile.js | 31 +++++++++++++++++++++++++++++++ package.json | 26 ++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 Gruntfile.js create mode 100644 package.json diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..5b9ea33 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,31 @@ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + banner: '/*!\n' + + '* Ratchet v<%= pkg.version %> by @connors, @dhg, and @fat\n' + + '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + + '* Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' + + '*\n' + + '* Designed and built by @connors, @dhg, and @fat.\n' + + '*/\n', + uglify: { + options: { + banner: '' + }, + gbuild: { + src: 'src/<%= pkg.name %>.js', + dest: 'build/<%= pkg.name %>.min.js' + } + } + }); + + // Load the plugin that provides the "uglify" task. + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-sass'); + + // Default task(s). + grunt.registerTask('default', ['uglify']); + +}; \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..52ab66d --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "ratchet" + , "version": "2.0.0" + , "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-jshint": "~0.6.3", + "grunt-contrib-nodeunit": "~0.2.0", + "grunt-contrib-uglify": "~0.2.2" + } + , "keywords": ["ratchet", "css", "ios", "prototype"] + , "homepage": "http://maker.github.com/ratchet/" + , "author": "Connor Sears, Dave Gamache, and Jacob Thornton" + , "repository": { + "type": "git" + , "url": "https://github.com/maker/ratchet.git" + } + , "bugs": { + "url": "https://github.com/maker/ratchet/issues" + } + , "licenses": [ + { + "type": "MIT" + , "url": "http://www.opensource.org/licenses/MIT" + } + ] +} \ No newline at end of file From e7a6e2eaa416992368e9548dcc91cf1c7998fc35 Mon Sep 17 00:00:00 2001 From: connors Date: Wed, 11 Sep 2013 12:53:07 -0700 Subject: [PATCH 2/6] Setting up sass --- Gruntfile.js | 21 +++++++- lib/{css/bars.css => scss/bars.scss} | 0 lib/{css/base.css => scss/base.scss} | 0 lib/{css/buttons.css => scss/buttons.scss} | 0 lib/{css/chevrons.css => scss/chevrons.scss} | 0 lib/{css/counts.css => scss/counts.scss} | 0 lib/{css/forms.css => scss/forms.scss} | 0 lib/{css/lists.css => scss/lists.scss} | 0 lib/{css/modals.css => scss/modals.scss} | 0 lib/{css/popovers.css => scss/popovers.scss} | 0 lib/{css/push.css => scss/push.scss} | 0 .../segmented-controllers.scss} | 0 lib/{css/sliders.css => scss/sliders.scss} | 0 lib/{css/toggles.css => scss/toggles.scss} | 0 package.json | 53 +++++++++++-------- 15 files changed, 49 insertions(+), 25 deletions(-) rename lib/{css/bars.css => scss/bars.scss} (100%) rename lib/{css/base.css => scss/base.scss} (100%) rename lib/{css/buttons.css => scss/buttons.scss} (100%) rename lib/{css/chevrons.css => scss/chevrons.scss} (100%) rename lib/{css/counts.css => scss/counts.scss} (100%) rename lib/{css/forms.css => scss/forms.scss} (100%) rename lib/{css/lists.css => scss/lists.scss} (100%) rename lib/{css/modals.css => scss/modals.scss} (100%) rename lib/{css/popovers.css => scss/popovers.scss} (100%) rename lib/{css/push.css => scss/push.scss} (100%) rename lib/{css/segmented-controllers.css => scss/segmented-controllers.scss} (100%) rename lib/{css/sliders.css => scss/sliders.scss} (100%) rename lib/{css/toggles.css => scss/toggles.scss} (100%) diff --git a/Gruntfile.js b/Gruntfile.js index 5b9ea33..05d6037 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -19,13 +19,30 @@ module.exports = function(grunt) { dest: 'build/<%= pkg.name %>.min.js' } } + + sass: { + dist : { + files: [{ + expand: true, + cwd: 'ratchet', + src: ['lib/scss/*.scss'], + dest: 'dist', + ext: '.css' + }] + } + } + }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-sass'); - + // Default task(s). grunt.registerTask('default', ['uglify']); -}; \ No newline at end of file +}; + +grunt.loadNpmTasks('grunt-contrib-sass'); + +grunt.registerTask('default', ['sass']); \ No newline at end of file diff --git a/lib/css/bars.css b/lib/scss/bars.scss similarity index 100% rename from lib/css/bars.css rename to lib/scss/bars.scss diff --git a/lib/css/base.css b/lib/scss/base.scss similarity index 100% rename from lib/css/base.css rename to lib/scss/base.scss diff --git a/lib/css/buttons.css b/lib/scss/buttons.scss similarity index 100% rename from lib/css/buttons.css rename to lib/scss/buttons.scss diff --git a/lib/css/chevrons.css b/lib/scss/chevrons.scss similarity index 100% rename from lib/css/chevrons.css rename to lib/scss/chevrons.scss diff --git a/lib/css/counts.css b/lib/scss/counts.scss similarity index 100% rename from lib/css/counts.css rename to lib/scss/counts.scss diff --git a/lib/css/forms.css b/lib/scss/forms.scss similarity index 100% rename from lib/css/forms.css rename to lib/scss/forms.scss diff --git a/lib/css/lists.css b/lib/scss/lists.scss similarity index 100% rename from lib/css/lists.css rename to lib/scss/lists.scss diff --git a/lib/css/modals.css b/lib/scss/modals.scss similarity index 100% rename from lib/css/modals.css rename to lib/scss/modals.scss diff --git a/lib/css/popovers.css b/lib/scss/popovers.scss similarity index 100% rename from lib/css/popovers.css rename to lib/scss/popovers.scss diff --git a/lib/css/push.css b/lib/scss/push.scss similarity index 100% rename from lib/css/push.css rename to lib/scss/push.scss diff --git a/lib/css/segmented-controllers.css b/lib/scss/segmented-controllers.scss similarity index 100% rename from lib/css/segmented-controllers.css rename to lib/scss/segmented-controllers.scss diff --git a/lib/css/sliders.css b/lib/scss/sliders.scss similarity index 100% rename from lib/css/sliders.css rename to lib/scss/sliders.scss diff --git a/lib/css/toggles.css b/lib/scss/toggles.scss similarity index 100% rename from lib/css/toggles.css rename to lib/scss/toggles.scss diff --git a/package.json b/package.json index 52ab66d..9f41cb7 100644 --- a/package.json +++ b/package.json @@ -1,26 +1,33 @@ { - "name": "ratchet" - , "version": "2.0.0" - , "devDependencies": { - "grunt": "~0.4.1", - "grunt-contrib-jshint": "~0.6.3", - "grunt-contrib-nodeunit": "~0.2.0", - "grunt-contrib-uglify": "~0.2.2" - } - , "keywords": ["ratchet", "css", "ios", "prototype"] - , "homepage": "http://maker.github.com/ratchet/" - , "author": "Connor Sears, Dave Gamache, and Jacob Thornton" - , "repository": { - "type": "git" - , "url": "https://github.com/maker/ratchet.git" - } - , "bugs": { - "url": "https://github.com/maker/ratchet/issues" - } - , "licenses": [ + "name": "ratchet", + "version": "2.0.0", + "dependencies": {}, + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-jshint": "~0.6.3", + "grunt-contrib-nodeunit": "~0.2.0", + "grunt-contrib-uglify": "~0.2.2", + "grunt-contrib-sass": "~0.5.0" + }, + "keywords": [ + "ratchet", + "css", + "ios", + "prototype" + ], + "homepage": "http://maker.github.com/ratchet/", + "author": "Connor Sears, Dave Gamache, and Jacob Thornton", + "repository": { + "type": "git", + "url": "https://github.com/maker/ratchet.git" + }, + "bugs": { + "url": "https://github.com/maker/ratchet/issues" + }, + "licenses": [ { - "type": "MIT" - , "url": "http://www.opensource.org/licenses/MIT" + "type": "MIT", + "url": "http://www.opensource.org/licenses/MIT" } - ] -} \ No newline at end of file + ] +} From fa26c0aebf743216c891e4599c6785371f78486d Mon Sep 17 00:00:00 2001 From: connors Date: Wed, 11 Sep 2013 14:12:32 -0700 Subject: [PATCH 3/6] Renaming folders and setting up grunt for sass --- Gruntfile.js | 63 +- dist/ratchet.css | 576 +++++++----------- lib/{scss => sass}/bars.scss | 0 lib/{scss => sass}/base.scss | 0 lib/{scss => sass}/buttons.scss | 0 lib/{scss => sass}/chevrons.scss | 0 lib/{scss => sass}/counts.scss | 0 lib/{scss => sass}/forms.scss | 0 lib/{scss => sass}/lists.scss | 0 lib/{scss => sass}/modals.scss | 0 lib/{scss => sass}/popovers.scss | 0 lib/{scss => sass}/push.scss | 0 lib/sass/ratchet.scss | 14 + lib/{scss => sass}/segmented-controllers.scss | 0 lib/{scss => sass}/sliders.scss | 0 lib/{scss => sass}/toggles.scss | 0 package.json | 3 +- 17 files changed, 282 insertions(+), 374 deletions(-) rename lib/{scss => sass}/bars.scss (100%) rename lib/{scss => sass}/base.scss (100%) rename lib/{scss => sass}/buttons.scss (100%) rename lib/{scss => sass}/chevrons.scss (100%) rename lib/{scss => sass}/counts.scss (100%) rename lib/{scss => sass}/forms.scss (100%) rename lib/{scss => sass}/lists.scss (100%) rename lib/{scss => sass}/modals.scss (100%) rename lib/{scss => sass}/popovers.scss (100%) rename lib/{scss => sass}/push.scss (100%) create mode 100644 lib/sass/ratchet.scss rename lib/{scss => sass}/segmented-controllers.scss (100%) rename lib/{scss => sass}/sliders.scss (100%) rename lib/{scss => sass}/toggles.scss (100%) diff --git a/Gruntfile.js b/Gruntfile.js index 05d6037..7adbc5a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -3,6 +3,13 @@ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), + + // Metadata. + meta: { + srcPath: 'lib/sass/', + distPath: 'dist/' + }, + banner: '/*!\n' + '* Ratchet v<%= pkg.version %> by @connors, @dhg, and @fat\n' + '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + @@ -10,39 +17,41 @@ module.exports = function(grunt) { '*\n' + '* Designed and built by @connors, @dhg, and @fat.\n' + '*/\n', - uglify: { - options: { - banner: '' - }, - gbuild: { - src: 'src/<%= pkg.name %>.js', - dest: 'build/<%= pkg.name %>.min.js' - } - } - + sass: { - dist : { - files: [{ - expand: true, - cwd: 'ratchet', - src: ['lib/scss/*.scss'], - dest: 'dist', - ext: '.css' - }] - } + options: { + banner: '/**\n' + + '* ==================================\n' + + '* Ratchet v2.0.0\n' + + '* Licensed under The MIT License\n' + + '* http://opensource.org/licenses/MIT\n' + + '* ==================================\n' + + '*/\n', + }, + dist: { + files: { + '<%= meta.distPath %>ratchet.css': '<%= meta.srcPath %>ratchet.scss' + } + } + }, + + watch: { + scripts: { + files: [ + '<%= meta.srcPath %>/**/*.scss' + ], + tasks: ['sass'] + } } - }); // Load the plugin that provides the "uglify" task. - grunt.loadNpmTasks('grunt-contrib-uglify'); + //grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); // Default task(s). - grunt.registerTask('default', ['uglify']); - -}; - -grunt.loadNpmTasks('grunt-contrib-sass'); + //grunt.registerTask('default', ['uglify']); + grunt.registerTask('default', ['sass']); -grunt.registerTask('default', ['sass']); \ No newline at end of file +}; \ No newline at end of file diff --git a/dist/ratchet.css b/dist/ratchet.css index 37de6a1..552c3a0 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1,14 +1,13 @@ /** - * ================================== - * Ratchet v1.0.2 - * Licensed under The MIT License - * http://opensource.org/licenses/MIT - * ================================== - */ +* ================================== +* Ratchet v2.0.0 +* Licensed under The MIT License +* http://opensource.org/licenses/MIT +* ================================== +*/ /* Hard reset -------------------------------------------------- */ - html, body, div, @@ -88,17 +87,14 @@ audio, video { padding: 0; margin: 0; - border: 0; -} + border: 0; } /* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ html { - -webkit-text-size-adjust: 100%; -} + -webkit-text-size-adjust: 100%; } /* Base styles -------------------------------------------------- */ - body { position: fixed; top: 0; @@ -107,15 +103,14 @@ body { left: 0; font: 14px/1.25 "Helvetica Neue", sans-serif; color: #000; - background-color: #fff; -} + background-color: #fff; } /* Universal link styling */ a { color: #007aff; text-decoration: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */ -} + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + /* Removes the dark touch outlines on links */ } /* Wrapper to be used around all content not in .bar-title and .bar-tab */ .content { @@ -127,40 +122,36 @@ a { overflow: auto; background-color: #efeff4; -webkit-transition-property: top, bottom; - transition-property: top, bottom; + transition-property: top, bottom; -webkit-transition-duration: .2s, .2s; - transition-duration: .2s, .2s; + transition-duration: .2s, .2s; -webkit-transition-timing-function: linear, linear; - transition-timing-function: linear, linear; - -webkit-overflow-scrolling: touch; -} + transition-timing-function: linear, linear; + -webkit-overflow-scrolling: touch; } /* Hack to force all relatively and absolutely positioned elements still render while scrolling Note: This is a bug for "-webkit-overflow-scrolling: touch" */ .content > * { -webkit-transform: translateZ(0px); - transform: translateZ(0px); -} + transform: translateZ(0px); } /* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ .content-padded { - padding: 10px; -} + padding: 10px; } /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. Note: For these to work, content must come after both bars in the markup */ .bar-title ~ .content { - padding-top: 44px; -} + padding-top: 44px; } + .bar-tab ~ .content { - padding-bottom: 51px; -} + padding-bottom: 51px; } + .bar-header-secondary ~ .content { - padding-top: 88px; -} + padding-top: 88px; } + /* General bar styles -------------------------------------------------- */ - [class*="bar-"] { position: fixed; right: 0; @@ -168,41 +159,35 @@ a { z-index: 10; height: 44px; padding: 5px; - background-color: rgba(247,247,247,.98); - box-shadow: 0 0px 1px rgba(0,0,0,.85); + background-color: rgba(247, 247, 247, 0.98); + box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); /*border-bottom: 1px solid rgba(0,0,0,.3);*/ - box-sizing: border-box; -} + box-sizing: border-box; } /* Modifier class to dock any bar below .bar-title */ .bar-header-secondary { - top: 44px; -} + top: 44px; } /* Modifier class to dock any bar to bottom of viewport */ .bar-footer { - bottom: 0; -} + bottom: 0; } /* Flip border position to top for footer bars */ .bar-footer.bar-standard, .bar-footer-secondary.bar-standard { /*border-top: 1px solid #aaa; border-bottom-width: 0;*/ - box-shadow: 0 0px 1px rgba(0,0,0,.85); -} + box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } /* Title bar -------------------------------------------------- */ - /* Bar docked to top of viewport for showing page title and actions */ .bar-title { top: 0; display: -webkit-box; display: box; -webkit-box-orient: horizontal; - box-orient: horizontal; -} + box-orient: horizontal; } /* Centered text in the .bar-title */ .bar-title .title { @@ -216,23 +201,19 @@ a { line-height: 44px; color: #000; text-align: center; - white-space: nowrap; -} + white-space: nowrap; } .bar-title > a:not([class*="button"]) { display: block; width: 100%; - height: 100%; -} + height: 100%; } /* Retain specified title color */ .bar-title .title a { - color: inherit; -} + color: inherit; } /* Tab bar -------------------------------------------------- */ - /* Bar docked to bottom used for primary app navigation */ .bar-tab { bottom: 0; @@ -240,8 +221,7 @@ a { padding: 0; /*border-top: 1px solid rgba(0,0,0,.3); border-bottom-width: 0;*/ - box-shadow: 0 0px 1px rgba(0,0,0,.85); -} + box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } /* Wrapper for individual tab */ .tab-inner { @@ -250,8 +230,7 @@ a { height: 100%; list-style: none; -webkit-box-orient: horizontal; - box-orient: horizontal; -} + box-orient: horizontal; } /* Navigational tab */ .tab-item { @@ -260,34 +239,31 @@ a { text-align: center; box-sizing: border-box; -webkit-box-flex: 1; - box-flex: 1; -} + box-flex: 1; } /* Icon for tab */ .tab-icon { display: block; height: 18px; - margin: 0 auto; -} + margin: 0 auto; } /* Label for tab */ .tab-label { margin-top: 1px; font-size: 11px; font-weight: 400; - color: #929292; -} + color: #929292; } + .tab-item.active .tab-label { - color: #007aff; -} + color: #007aff; } /* Buttons in title bars -------------------------------------------------- */ - /* Generic style for all buttons in .bar-title */ .bar-title [class*="button"] { position: relative; - z-index: 10; /* Places buttons over full width title */ + z-index: 10; + /* Places buttons over full width title */ padding-left: 5px; padding-right: 5px; font-size: 16px; @@ -297,9 +273,7 @@ a { border: 0; transition: opacity .2s linear; -webkit-box-flex: 0; - box-flex: 0; -} - + box-flex: 0; } /* Hacky way to right align buttons outside of flex-box system Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ @@ -308,8 +282,7 @@ a { .bar-title [class*="button"].pull-right { position: absolute; top: 5px; - right: 5px; -} + right: 5px; } /* Override standard button active states */ .bar-title .button:active, @@ -317,12 +290,10 @@ a { .bar-title .button-next:active { color: #007aff; background-color: transparent; - opacity: .3; -} + opacity: .3; } /* Directional buttons in title bars -------------------------------------------------- */ - .bar-title .button-prev:before, .bar-title .button-prev:after, .bar-title .button-next:before, @@ -332,126 +303,110 @@ a { width: 15px; height: 3px; background-color: #007aff; - content: ''; -} + content: ''; } /* Prev/next button base styles */ .bar-title .button-prev { - padding-left: 22px; /* Push over to make room for chevrons */ -} + padding-left: 22px; + /* Push over to make room for chevrons */ } + .bar-title .button-next { - padding-right: 22px; /* Push over to make room for chevrons */ -} + padding-right: 22px; + /* Push over to make room for chevrons */ } /* Position the chevrons horizontally */ .bar-title .button-prev:before, .bar-title .button-prev:after { - left: 0; -} + left: 0; } + .bar-title .button-next:before, .bar-title .button-next:after { - right: 0; -} + right: 0; } /* Position the chevrons vertically */ -.bar-title .button-prev:before, +.bar-title .button-prev:before, .bar-title .button-next:before { - top: 12px; -} -.bar-title .button-prev:after, + top: 12px; } + +.bar-title .button-prev:after, .bar-title .button-next:after { - top: 21px; -} + top: 21px; } /* Rotate the chevrons */ .bar-title .button-prev:before { -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} + transform: rotate(-45deg); } + .bar-title .button-prev:after { -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} + transform: rotate(45deg); } + .bar-title .button-next:before { -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} + transform: rotate(45deg); } + .bar-title .button-next:after { -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} + transform: rotate(-45deg); } /* Block buttons in any bar -------------------------------------------------- */ - /* Add proper padding and replace buttons normal dropshadow with a shine from bar */ [class*="bar"] .button-block { padding: 7px 0; - margin-bottom: 0; -} + margin-bottom: 0; } /* Override standard padding changes for .button-blocks */ [class*="bar"] .button-block:active { - padding: 7px 0; -} + padding: 7px 0; } /* Segmented controller in any bar -------------------------------------------------- */ - /* Remove standard segmented bottom margin */ [class*="bar-"] .segmented-controller { - margin-bottom: 0; -} + margin-bottom: 0; } /* Add margins between segmented controllers and buttons */ [class*="bar-"] .segmented-controller + [class*="button"], [class*="bar-"] [class*="button"] + .segmented-controller { - margin-left: 5px; -} + margin-left: 5px; } /* Segmented controller in a title bar -------------------------------------------------- */ - .bar-title .segmented-controller { line-height: 18px; -webkit-box-flex: 1; - box-flex: 1; -} - + box-flex: 1; } /* Search forms in standard bar -------------------------------------------------- */ - /* Position/size search bar within the bar */ .bar-standard input[type=search] { height: 32px; - margin: 0; -}/* Lists --------------------------------------------------- */ + margin: 0; } +/* Lists +-------------------------------------------------- */ /* Remove usual bullet styles from list */ .list { list-style: none; - background-color: #fff; -} + background-color: #fff; } /* Pad each list item and add dividers */ .list li { position: relative; - padding: 11px 60px 11px 0; /* Given extra right padding to accomodate counts, chevrons or buttons */ + padding: 11px 60px 11px 0; + /* Given extra right padding to accomodate counts, chevrons or buttons */ margin-left: 15px; - border-bottom: 1px solid rgba(0, 0, 0, .1); -} + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } /* Give top border to first list items */ .list li:first-child { - border-top: 1px solid rgba(0, 0, 0, .1); -} + border-top: 1px solid rgba(0, 0, 0, 0.1); } /* Remove the border from the last list item*/ .list li:last-child { - border-bottom: 0; -} + border-bottom: 0; } /* If a list of links, make sure the child takes up full list item tap area (want to avoid selecting child buttons though) */ .list li > a:not([class*="button"]) { @@ -459,59 +414,50 @@ a { display: block; padding: inherit; margin: -11px -60px -11px 0; - color: inherit; -} + color: inherit; } /* Inset list -------------------------------------------------- */ - .list.inset { width: auto; margin-right: 10px; margin-left: 10px; - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; - box-sizing: border-box; -} + box-sizing: border-box; } /* Remove border from first/last standard list items to avoid double border at top/bottom of lists */ .list.inset li:first-child { - border-top-width: 0; -} -.list.inset li:last-child { - border-bottom-width: 0; -} + border-top-width: 0; } +.list.inset li:last-child { + border-bottom-width: 0; } /* List dividers -------------------------------------------------- */ - .list .list-divider { position: relative; top: -1px; padding-top: 6px; padding-bottom: 6px; - padding-left: 15px; + padding-left: 15px; margin-left: 0; font-weight: bold; line-height: 18px; background-color: #f8f8f8; - border-top: 1px solid rgba(0, 0, 0, .1); - border-bottom: 1px solid rgba(0, 0, 0, .1); - box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); -} + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); } /* Rounding first divider on inset lists and remove border on the top */ .list.inset .list-divider:first-child { top: 0; border-top-width: 0; - border-radius: 6px 6px 0 0; -} + border-radius: 6px 6px 0 0; } /* Rounding last divider on inset lists */ .list.inset .list-divider:last-child { - border-radius: 0 0 6px 6px; -} + border-radius: 0 0 6px 6px; } /* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles) -------------------------------------------------- */ @@ -521,39 +467,37 @@ a { .list .toggle { position: absolute; top: 50%; - right: 10px; -} + right: 10px; } - /* Position chevrons/counts vertically centered on the right in list items */ +/* Position chevrons/counts vertically centered on the right in list items */ .list .chevron, .list [class*="count"] { - margin-top: -10px; /* Half height of chevron */ -} + margin-top: -10px; + /* Half height of chevron */ } /* Push count over if there's a sibling chevron */ .list .chevron + [class*="count"] { - right: 30px; -} + right: 30px; } /* Position buttons vertically centered on the right in list items */ .list [class*="button"] { left: auto; - margin-top: -14px; /* Half height of button */ -} + margin-top: -14px; + /* Half height of button */ } .list .toggle { - margin-top: -15px; /* Half height of toggle */ -}/* Forms --------------------------------------------------- */ + margin-top: -15px; + /* Half height of toggle */ } +/* Forms +-------------------------------------------------- */ /* Force form elements to inherit font styles */ input, textarea, button, select { font-family: inherit; - font-size: inherit; -} + font-size: inherit; } /* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */ select, @@ -578,12 +522,11 @@ input[type="color"], padding: 10px; margin-bottom: 10px; background-color: #fff; - border: 1px solid rgba(0, 0, 0, .2); + border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; -webkit-appearance: none; box-sizing: border-box; - outline: none; -} + outline: none; } /* Fully round search input */ input[type=search] { @@ -591,13 +534,11 @@ input[type=search] { font-size: 14px; border-radius: 6px; border-width: 0; - background-color: rgba(0,0,0,.1); -} + background-color: rgba(0, 0, 0, 0.1); } /* Allow text area's height to grow larger than a normal input */ textarea { - height: auto; -} + height: auto; } /* Style select button to look like part of the Ratchet's style */ select { @@ -606,56 +547,47 @@ select { background-color: #f8f8f8; background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%); background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); -} - + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } /* Input groups (cluster multiple inputs together into a single group) -------------------------------------------------- */ - /* Reset from initial form setup styles */ .input-group { width: auto; height: auto; - padding: 0; -} + padding: 0; } /* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */ .input-group input { margin-bottom: 0; background-color: transparent; border: 0; - border-bottom: 1px solid rgba(0, 0, 0, .2); + border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; - box-shadow: none; -} + box-shadow: none; } /* Remove bottom border on last input to avoid double bottom border */ .input-group input:last-child { - border-bottom-width: 0; -} + border-bottom-width: 0; } /* Input groups with labels -------------------------------------------------- */ - /* To use labels with input groups, wrap a label and an input in an .input-row */ .input-row { overflow: hidden; - border-bottom: 1px solid rgba(0, 0, 0, .2); -} + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } /* Remove bottom border on last input-row to avoid double bottom border */ .input-row:last-child { - border-bottom-width: 0; -} + border-bottom-width: 0; } /* Labels get floated left with a set percentage width */ .input-row label { float: left; width: 25%; - padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */ - font-weight: bold; -} + padding: 11px 10px 9px 13px; + /* Optimizing the baseline for mobile. */ + font-weight: bold; } /* Actual inputs float to right of labels and also have a set percentage */ .input-row label + input { @@ -663,10 +595,10 @@ select { width: 65%; padding-left: 0; margin-bottom: 0; - border-bottom: 0; -}/* General button styles --------------------------------------------------- */ + border-bottom: 0; } +/* General button styles +-------------------------------------------------- */ [class*="button"] { position: relative; display: inline-block; @@ -679,88 +611,75 @@ select { vertical-align: top; cursor: pointer; background-color: transparent; - border: 1px solid rgba(0, 0, 0, .5); - border-radius: 4px; -} + border: 1px solid rgba(0, 0, 0, 0.5); + border-radius: 4px; } /* Active */ [class*="button"]:active { background-color: #333; - transition: background-color .1s linear; -} + transition: background-color .1s linear; } /* Button modifiers -------------------------------------------------- */ - /* Overriding styles for buttons with modifiers */ .button-main, .button-positive, .button-negative { - color: #fff; -} + color: #fff; } /* Main button */ .button-main { color: #007aff; - border: 1px solid #007aff; -} + border: 1px solid #007aff; } /* Positive button */ .button-positive { color: #4cd964; - border: 1px solid #4cd964; -} + border: 1px solid #4cd964; } /* Negative button */ .button-negative { color: #e71e1e; - border: 1px solid #b51a1a; -} + border: 1px solid #b51a1a; } /* Active state for buttons with modifiers */ [class*="button"]:active, .button-main:active, .button-positive:active, .button-negative:active { - color: #fff; -} + color: #fff; } + .button-main:active { color: #fff; - background-color: #007aff; -} + background-color: #007aff; } + .button-positive:active { color: #fff; - background-color: #4cd964; -} + background-color: #4cd964; } + .button-negative:active { - background-color: #b21a1a; -} + background-color: #b21a1a; } /* Block level buttons (full width buttons) */ .button-block { display: block; padding: 11px 0 13px; margin-bottom: 10px; - font-size: 16px; -} - + font-size: 16px; } /* Make button elements go full width when given .button-block class */ button.button-block { - width: 100%; -} + width: 100%; } /* Counts in buttons -------------------------------------------------- */ - /* Generic styles for all counts within buttons */ [class*="button"] [class*="count"] { padding-top: 2px; padding-bottom: 2px; margin-right: -4px; margin-left: 4px; - background-color: rgba(0, 0, 0, .1); -} + background-color: rgba(0, 0, 0, 0.1); } /* Position counts within block level buttons Note: These are absolutely positioned so that text of button isn't "pushed" by count and always @@ -770,14 +689,13 @@ button.button-block { right: 0; padding-top: 4px; padding-bottom: 4px; - margin-right: 10px; -}/* Chevrons --------------------------------------------------- */ + margin-right: 10px; } +/* Chevrons +-------------------------------------------------- */ .chevron { display: block; - height: 20px; -} + height: 20px; } /* Base styles for both 1/2's of the chevron */ .chevron:before, @@ -787,22 +705,21 @@ button.button-block { width: 10px; height: 3px; background-color: #c7c7cc; - content: ''; -} + content: ''; } /* Position and rotate respective 1/2's of the chevron */ .chevron:before { top: 6px; -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} + transform: rotate(45deg); } + .chevron:after { top: 8px; -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -}/* General count styles --------------------------------------------------- */ + transform: rotate(-45deg); } +/* General count styles +-------------------------------------------------- */ [class*="count"] { display: inline-block; padding: 4px 9px; @@ -810,36 +727,31 @@ button.button-block { font-weight: bold; line-height: 13px; color: #fff; - background-color: rgba(0, 0, 0, .3); - border-radius: 100px; -} + background-color: rgba(0, 0, 0, 0.3); + border-radius: 100px; } /* Count modifiers -------------------------------------------------- */ - /* Overriding styles for counts with modifiers */ .count-main, .count-positive, .count-negative { - color: #fff; -} + color: #fff; } /* Main count */ .count-main { - background-color: #1eafe7; -} + background-color: #1eafe7; } /* Positive count */ .count-positive { - background-color: #4cd964; -} + background-color: #4cd964; } /* Negative count */ .count-negative { - background-color: #e71e1e; -}/* Segmented controllers --------------------------------------------------- */ + background-color: #e71e1e; } +/* Segmented controllers +-------------------------------------------------- */ .segmented-controller { display: -webkit-box; display: box; @@ -852,8 +764,7 @@ button.button-block { border: 1px solid #007aff; border-radius: 4px; -webkit-box-orient: horizontal; - box-orient: horizontal; -} + box-orient: horizontal; } /* Section within controller */ .segmented-controller li { @@ -862,8 +773,7 @@ button.button-block { white-space: nowrap; border-left: 1px solid #007aff; -webkit-box-flex: 1; - box-flex: 1; -} + box-flex: 1; } /* Link that fills each section */ .segmented-controller li > a { @@ -872,33 +782,29 @@ button.button-block { overflow: hidden; line-height: 15px; color: #007aff; - text-overflow: ellipsis; -} + text-overflow: ellipsis; } /* Remove border-left and shadow from first section */ .segmented-controller li:first-child { - border-left-width: 0; -} + border-left-width: 0; } /* Active segment of controller */ .segmented-controller li.active { background-color: #007aff; - transition: background-color .2s linear; -} + transition: background-color .2s linear; } + /* Set color of links to white */ .segmented-controller li.active > a { - color: #fff; -} + color: #fff; } .segmented-controller-item { - display: none; -} + display: none; } .segmented-controller-item.active { - display: block; -}/* Popovers (to be used with popovers.js) --------------------------------------------------- */ + display: block; } +/* Popovers (to be used with popovers.js) +-------------------------------------------------- */ .popover { position: fixed; top: 55px; @@ -909,17 +815,16 @@ button.button-block { padding: 5px; margin-left: -146px; background-color: #555; - background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%); - background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%); + background-image: -webkit-linear-gradient(top, #555555 5%, #555555 6%, #111111 30%); + background-image: linear-gradient(to bottom, #555555 5%, #555555 6%, #111111 30%); border: 1px solid #111; border-radius: 6px; opacity: 0; - box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3); + box-shadow: inset 0 1px 1px -1px white, 0 3px 10px rgba(0, 0, 0, 0.3); -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -} + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } /* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */ .popover:before, @@ -928,30 +833,28 @@ button.button-block { left: 50%; width: 0; height: 0; - content: ''; -} + content: ''; } + .popover:before { top: -20px; margin-left: -21px; border-right: 21px solid transparent; border-bottom: 21px solid #111; - border-left: 21px solid transparent; -} + border-left: 21px solid transparent; } + .popover:after { top: -19px; margin-left: -20px; border-right: 20px solid transparent; border-bottom: 20px solid #555; - border-left: 20px solid transparent; -} + border-left: 20px solid transparent; } /* Wrapper for a title and buttons */ .popover-header { display: -webkit-box; display: box; height: 34px; - margin-bottom: 5px; -} + margin-bottom: 5px; } /* Centered title for popover */ .popover-header .title { @@ -965,8 +868,7 @@ button.button-block { line-height: 12px; color: #fff; text-align: center; - text-shadow: 0 -1px rgba(0, 0, 0, .5); -} + text-shadow: 0 -1px rgba(0, 0, 0, 0.5); } /* Generic style for all buttons in .popover-header */ .popover-header [class*="button"] { @@ -974,14 +876,13 @@ button.button-block { font-size: 12px; line-height: 22px; color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); background-color: #454545; background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%); background-image: linear-gradient(to bottom, #454545 0, #353535 100%); border: 1px solid #111; -webkit-box-flex: 0; - box-flex: 0; -} + box-flex: 0; } /* Hacky way to right align buttons outside of flex-box system Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ @@ -990,53 +891,43 @@ button.button-block { .popover-header [class*="button"].pull-right { position: absolute; top: 5px; - right: 5px; -} + right: 5px; } /* Active state for popover header buttons */ .popover-header .button:active { color: #fff; - background-color: #0876b1; -} + background-color: #0876b1; } /* Popover animation -------------------------------------------------- */ - .popover.visible { opacity: 1; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} + transform: translate3d(0, 0, 0); } /* Backdrop (used as invisible touch escape) -------------------------------------------------- */ - .backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: 10; -} + z-index: 10; } /* Block level buttons in popovers -------------------------------------------------- */ - /* Positioning and giving darker border to look sharp against dark popover */ .popover .button-block { margin-bottom: 5px; - border: 1px solid #111; -} + border: 1px solid #111; } /* Remove extra margin on bottom of last button */ .popover .button-block:last-child { - margin-bottom: 0; -} + margin-bottom: 0; } /* Lists in popovers -------------------------------------------------- */ - .popover .list { width: auto; max-height: 250px; @@ -1047,23 +938,23 @@ button.button-block { background-color: #fff; border: 1px solid #000; border-radius: 3px; - -webkit-overflow-scrolling: touch; -}/* Modals + -webkit-overflow-scrolling: touch; } + +/* Modals -------------------------------------------------- */ .modal { - position: fixed; + position: fixed; top: 0; opacity: 0; - z-index: 11; + z-index: 11; width: 100%; min-height: 100%; overflow: hidden; - background-color: #fff; + background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; - transition: transform .25s ease-in-out, opacity 1ms .25s; -} + transition: transform .25s ease-in-out, opacity 1ms .25s; } /* Modal - When active -------------------------------------------------- */ @@ -1071,56 +962,53 @@ button.button-block { opacity: 1; height: 100%; -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform .25 ease-in-out; + transition: transform .25 ease-in-out; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -}/* Slider styles (to be used with sliders.js) --------------------------------------------------- */ + transform: translate3d(0, 0, 0); } +/* Slider styles (to be used with sliders.js) +-------------------------------------------------- */ /* Width/height of slider */ .slider, .slider > li { width: 100%; - height: 200px; -} + height: 200px; } /* Outer wrapper for slider */ .slider { overflow: hidden; - background-color: #000; -} + background-color: #000; } /* Inner wrapper for slider (width of all slides together) */ .slider > ul { position: relative; - font-size: 0; /* Remove spaces from inline-block children */ + font-size: 0; + /* Remove spaces from inline-block children */ white-space: nowrap; -webkit-transition: all 0 linear; - transition: all 0 linear; -} + transition: all 0 linear; } /* Individual slide */ .slider > ul > li { display: inline-block; - vertical-align: top; /* Ensure that li always aligns to top */ - width: 100%; - height: 100%; -} + vertical-align: top; + /* Ensure that li always aligns to top */ + width: 100%; + height: 100%; } /* Required reset of font-size to same as standard body */ .slider > ul > li > * { - font-size: 14px; -}/* Toggle styles (to be used with toggles.js) --------------------------------------------------- */ + font-size: 14px; } +/* Toggle styles (to be used with toggles.js) +-------------------------------------------------- */ .toggle { position: relative; width: 45px; height: 28px; background-color: #fff; border: 2px solid #e6e6e6; - border-radius: 20px; -} + border-radius: 20px; } /* Sliding handle */ .toggle-handle { @@ -1131,50 +1019,46 @@ button.button-block { width: 28px; height: 28px; background-color: #fff; - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 100px; - box-shadow: 0 3px 3px rgba(0,0,0,.08); + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out; - transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; -} + transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; } /* Active state for toggle */ .toggle.active { background-color: #4cd964; - border: 2px solid #4cd964; -} + border: 2px solid #4cd964; } /* Active state for toggle handle */ .toggle.active .toggle-handle { border-color: #4cd964; - -webkit-transform: translate3d(17px,0,0); - transform: translate3d(17px,0,0); -}/* Push styles (to be used with push.js) --------------------------------------------------- */ + -webkit-transform: translate3d(17px, 0, 0); + transform: translate3d(17px, 0, 0); } +/* Push styles (to be used with push.js) +-------------------------------------------------- */ /* Fade animation */ .content.fade { left: 0; opacity: 0; -webkit-transition: opacity .2s ease-in-out; - transition: opacity .2s ease-in-out; -} + transition: opacity .2s ease-in-out; } + .content.fade.in { - opacity: 1; -} + opacity: 1; } /* Slide animation */ .content.slide { -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform .25s ease-in-out; -} + transform: translate3d(0, 0, 0); + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out; } + .content.slide.left { -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); -} + transform: translate3d(-100%, 0, 0); } + .content.slide.right { -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); -} \ No newline at end of file + transform: translate3d(100%, 0, 0); } diff --git a/lib/scss/bars.scss b/lib/sass/bars.scss similarity index 100% rename from lib/scss/bars.scss rename to lib/sass/bars.scss diff --git a/lib/scss/base.scss b/lib/sass/base.scss similarity index 100% rename from lib/scss/base.scss rename to lib/sass/base.scss diff --git a/lib/scss/buttons.scss b/lib/sass/buttons.scss similarity index 100% rename from lib/scss/buttons.scss rename to lib/sass/buttons.scss diff --git a/lib/scss/chevrons.scss b/lib/sass/chevrons.scss similarity index 100% rename from lib/scss/chevrons.scss rename to lib/sass/chevrons.scss diff --git a/lib/scss/counts.scss b/lib/sass/counts.scss similarity index 100% rename from lib/scss/counts.scss rename to lib/sass/counts.scss diff --git a/lib/scss/forms.scss b/lib/sass/forms.scss similarity index 100% rename from lib/scss/forms.scss rename to lib/sass/forms.scss diff --git a/lib/scss/lists.scss b/lib/sass/lists.scss similarity index 100% rename from lib/scss/lists.scss rename to lib/sass/lists.scss diff --git a/lib/scss/modals.scss b/lib/sass/modals.scss similarity index 100% rename from lib/scss/modals.scss rename to lib/sass/modals.scss diff --git a/lib/scss/popovers.scss b/lib/sass/popovers.scss similarity index 100% rename from lib/scss/popovers.scss rename to lib/sass/popovers.scss diff --git a/lib/scss/push.scss b/lib/sass/push.scss similarity index 100% rename from lib/scss/push.scss rename to lib/sass/push.scss diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss new file mode 100644 index 0000000..2471983 --- /dev/null +++ b/lib/sass/ratchet.scss @@ -0,0 +1,14 @@ + @import "base.scss"; + @import "bars.scss"; + @import "lists.scss"; + @import "forms.scss"; + @import "buttons.scss"; + @import "chevrons.scss"; + @import "counts.scss"; + @import "segmented-controllers.scss"; + @import "popovers.scss"; + @import "modals.scss"; + @import "sliders.scss"; + @import "toggles.scss"; + @import "push.scss"; + \ No newline at end of file diff --git a/lib/scss/segmented-controllers.scss b/lib/sass/segmented-controllers.scss similarity index 100% rename from lib/scss/segmented-controllers.scss rename to lib/sass/segmented-controllers.scss diff --git a/lib/scss/sliders.scss b/lib/sass/sliders.scss similarity index 100% rename from lib/scss/sliders.scss rename to lib/sass/sliders.scss diff --git a/lib/scss/toggles.scss b/lib/sass/toggles.scss similarity index 100% rename from lib/scss/toggles.scss rename to lib/sass/toggles.scss diff --git a/package.json b/package.json index 9f41cb7..c0a8042 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2", - "grunt-contrib-sass": "~0.5.0" + "grunt-contrib-sass": "~0.5.0", + "grunt-contrib-watch": "~0.5.3" }, "keywords": [ "ratchet", From bc7a09892f52727051b82d99eac53611eaba4dcb Mon Sep 17 00:00:00 2001 From: connors Date: Wed, 11 Sep 2013 14:24:02 -0700 Subject: [PATCH 4/6] removing the Makefile. --- Gruntfile.js | 25 ++++++++---------- Makefile | 69 ------------------------------------------------ dist/ratchet.css | 12 +++++---- 3 files changed, 18 insertions(+), 88 deletions(-) delete mode 100644 Makefile diff --git a/Gruntfile.js b/Gruntfile.js index 7adbc5a..be2364f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,23 +10,20 @@ module.exports = function(grunt) { distPath: 'dist/' }, - banner: '/*!\n' + - '* Ratchet v<%= pkg.version %> by @connors, @dhg, and @fat\n' + - '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + - '* Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' + - '*\n' + - '* Designed and built by @connors, @dhg, and @fat.\n' + - '*/\n', + banner: '/*\n' + + '* =====================================================\n' + + '* Ratchet v<%= pkg.version %>\n' + + '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + + '* Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' + + '*\n' + + '* Designed and built by @connors, @dhg, and @fat.\n' + + '* =====================================================\n' + + '*/\n', + sass: { options: { - banner: '/**\n' + - '* ==================================\n' + - '* Ratchet v2.0.0\n' + - '* Licensed under The MIT License\n' + - '* http://opensource.org/licenses/MIT\n' + - '* ==================================\n' + - '*/\n', + banner: '<%= banner %>', }, dist: { files: { diff --git a/Makefile b/Makefile deleted file mode 100644 index 9f52a77..0000000 --- a/Makefile +++ /dev/null @@ -1,69 +0,0 @@ -# -# BUILD LIB FILES -# - -build: - mkdir -p dist - cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/modals.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css - cat lib/js/*.js > ./dist/ratchet.tmp.js - @echo "/**\n * ==================================\n * Ratchet v1.0.2\n * Licensed under The MIT License\n * http://opensource.org/licenses/MIT\n * ==================================\n */\n" > ./dist/copywrite.txt - cat ./dist/copywrite.txt ./dist/ratchet.tmp.js > ./dist/ratchet.js - cat ./dist/copywrite.txt ./dist/ratchet.tmp.css > ./dist/ratchet.css - rm ./dist/ratchet.tmp.css ./dist/ratchet.tmp.js ./dist/copywrite.txt - - -# -# START DOCS SERVER -# - -docs: - open http://localhost:8000/docs - python -m SimpleHTTPServer - - -# -# BUILDS GH-PAGES BRANCH -# - -gh-pages: build - mkdir -p gh-pages - cp -r docs/ gh-pages/ - cp -r lib gh-pages/lib - cp -r dist gh-pages/dist - cd gh-pages - cp -r dist ratchet - zip -r ratchet.zip ratchet - rm -rf ratchet - cd .. - git fetch origin - git checkout gh-pages - sed -i -e 's/\.\.\//\.\//g' gh-pages/index.html - sed -i -e 's/\.\.\//\.\//g' gh-pages/one.html - sed -i -e 's/\.\.\//\.\//g' gh-pages/two.html - rm -rf ./css - rm -rf ./img - rm -rf ./js - rm -rf ./lib - rm -rf ./dist - mv gh-pages/* . - rm -rf ./*-e - rm -rf gh-pages - -# -# START DEMO SERVER -# - -demo: build_demo - open http://localhost:8000/test/app - python -m SimpleHTTPServer - -# -# START TEST SERVER -# - -test: - open http://localhost:8000/test - python -m SimpleHTTPServer - - -.PHONY: docs demo test gh-pages \ No newline at end of file diff --git a/dist/ratchet.css b/dist/ratchet.css index 552c3a0..e08ce8a 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1,9 +1,11 @@ -/** -* ================================== +/* +* ===================================================== * Ratchet v2.0.0 -* Licensed under The MIT License -* http://opensource.org/licenses/MIT -* ================================== +* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton +* Licensed under http://www.opensource.org/licenses/MIT +* +* Designed and built by @connors, @dhg, and @fat. +* ===================================================== */ /* Hard reset From a5246480e623f80d72e7da22925c8424639effea Mon Sep 17 00:00:00 2001 From: connors Date: Wed, 11 Sep 2013 14:58:52 -0700 Subject: [PATCH 5/6] Compiling the js with grunt. --- Gruntfile.js | 28 +++++++++++++---- dist/ratchet.js | 84 ++++++++----------------------------------------- package.json | 3 +- 3 files changed, 37 insertions(+), 78 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index be2364f..5232725 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -6,7 +6,7 @@ module.exports = function(grunt) { // Metadata. meta: { - srcPath: 'lib/sass/', + srcPath: 'lib/', distPath: 'dist/' }, @@ -19,7 +19,23 @@ module.exports = function(grunt) { '* Designed and built by @connors, @dhg, and @fat.\n' + '* =====================================================\n' + '*/\n', - + + concat: { + options: { + banner: '<%= banner %><%= jqueryCheck %>' + }, + ratchet: { + src: [ + '<%= meta.srcPath %>js/modals.js', + '<%= meta.srcPath %>js/popover.js', + '<%= meta.srcPath %>js/push.js', + '<%= meta.srcPath %>js/segmented-controllers.js', + '<%= meta.srcPath %>js/sliders.js', + '<%= meta.srcPath %>js/toggles.js' + ], + dest: '<%= meta.distPath %><%= pkg.name %>.js' + } + }, sass: { options: { @@ -27,7 +43,7 @@ module.exports = function(grunt) { }, dist: { files: { - '<%= meta.distPath %>ratchet.css': '<%= meta.srcPath %>ratchet.scss' + '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss' } } }, @@ -43,12 +59,12 @@ module.exports = function(grunt) { }); // Load the plugin that provides the "uglify" task. - //grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-concat'); // Default task(s). - //grunt.registerTask('default', ['uglify']); - grunt.registerTask('default', ['sass']); + grunt.registerTask('default', ['sass', 'concat']); + grunt.registerTask('build', ['sass', 'concat']); }; \ No newline at end of file diff --git a/dist/ratchet.js b/dist/ratchet.js index f4006b4..1f5c5d1 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -1,11 +1,12 @@ -/** - * ================================== - * Ratchet v1.0.2 - * Licensed under The MIT License - * http://opensource.org/licenses/MIT - * ================================== - */ - +/* +* ===================================================== +* Ratchet v2.0.0 +* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton +* Licensed under http://www.opensource.org/licenses/MIT +* +* Designed and built by @connors, @dhg, and @fat. +* ===================================================== +*/ /* ---------------------------------- * MODAL v1.0.0 * Licensed under The MIT License @@ -30,68 +31,6 @@ var modal = getModal(event); if (modal) modal.classList.toggle('active'); }); -}();/* ---------------------------------- - * POPOVER v1.0.0 - * Licensed under The MIT License - * http://opensource.org/licenses/MIT - * ---------------------------------- */ - -!function () { - - var popover; - - var findPopovers = function (target) { - var i, popovers = document.querySelectorAll('a'); - for (; target && target !== document; target = target.parentNode) { - for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } - } - }; - - var onPopoverHidden = function () { - document.body.removeChild(backdrop); - popover.style.display = 'none'; - popover.removeEventListener('webkitTransitionEnd', onPopoverHidden); - } - - var backdrop = function () { - var element = document.createElement('div'); - - element.classList.add('backdrop'); - - element.addEventListener('touchend', function () { - popover.addEventListener('webkitTransitionEnd', onPopoverHidden); - popover.classList.remove('visible'); - }); - - return element; - }(); - - var getPopover = function (e) { - var anchor = findPopovers(e.target); - - if (!anchor || !anchor.hash) return; - - popover = document.querySelector(anchor.hash); - - if (!popover || !popover.classList.contains('popover')) return; - - return popover; - } - - window.addEventListener('touchend', function (e) { - var popover = getPopover(e); - - if (!popover) return; - - popover.style.display = 'block'; - popover.offsetHeight; - popover.classList.add('visible'); - - popover.parentNode.appendChild(backdrop); - }); - - window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); }); - }(); /* ---------------------------------- * PUSH v1.0.0 @@ -511,6 +450,7 @@ window.addEventListener('popstate', popstate); }(); + /* ---------------------------------- * TABS v1.0.0 * Licensed under The MIT License @@ -557,7 +497,8 @@ }); window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); }); -}();/* ---------------------------------- +}(); +/* ---------------------------------- * SLIDER v1.0.1 * Licensed under The MIT License * Adapted from Brad Birdsall's swipe @@ -671,6 +612,7 @@ window.addEventListener('touchend', onTouchEnd); }(); + /* ---------------------------------- * TOGGLE v1.0.0 * Licensed under The MIT License diff --git a/package.json b/package.json index c0a8042..59f4079 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2", "grunt-contrib-sass": "~0.5.0", - "grunt-contrib-watch": "~0.5.3" + "grunt-contrib-watch": "~0.5.3", + "grunt-contrib-concat": "~0.3.0" }, "keywords": [ "ratchet", From 54ce0835a2c8df6e5b29d78e009b46225d18375c Mon Sep 17 00:00:00 2001 From: connors Date: Thu, 12 Sep 2013 21:06:52 -0700 Subject: [PATCH 6/6] Setting up the basic SASS and changing up the commenting strategy. Still need to convert to CSS to SASS. --- dist/ratchet.css | 114 ++-------------------------- lib/sass/bars.scss | 59 +++++++------- lib/sass/base.scss | 18 ++--- lib/sass/buttons.scss | 25 +++--- lib/sass/chevrons.scss | 4 +- lib/sass/counts.scss | 8 +- lib/sass/forms.scss | 28 +++---- lib/sass/lists.scss | 14 ++-- lib/sass/popovers.scss | 18 ++--- lib/sass/push.scss | 10 +-- lib/sass/segmented-controllers.scss | 10 +-- lib/sass/sliders.scss | 14 ++-- lib/sass/toggles.scss | 6 +- 13 files changed, 109 insertions(+), 219 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index e08ce8a..9846400 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -91,7 +91,6 @@ video { margin: 0; border: 0; } -/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ html { -webkit-text-size-adjust: 100%; } @@ -107,14 +106,11 @@ body { color: #000; background-color: #fff; } -/* Universal link styling */ a { color: #007aff; text-decoration: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - /* Removes the dark touch outlines on links */ } + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -/* Wrapper to be used around all content not in .bar-title and .bar-tab */ .content { position: fixed; top: 0; @@ -131,18 +127,13 @@ a { transition-timing-function: linear, linear; -webkit-overflow-scrolling: touch; } -/* Hack to force all relatively and absolutely positioned elements still render while scrolling - Note: This is a bug for "-webkit-overflow-scrolling: touch" */ .content > * { -webkit-transform: translateZ(0px); transform: translateZ(0px); } -/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ .content-padded { padding: 10px; } -/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. - Note: For these to work, content must come after both bars in the markup */ .bar-title ~ .content { padding-top: 44px; } @@ -163,27 +154,20 @@ a { padding: 5px; background-color: rgba(247, 247, 247, 0.98); box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); - /*border-bottom: 1px solid rgba(0,0,0,.3);*/ box-sizing: border-box; } -/* Modifier class to dock any bar below .bar-title */ .bar-header-secondary { top: 44px; } -/* Modifier class to dock any bar to bottom of viewport */ .bar-footer { bottom: 0; } -/* Flip border position to top for footer bars */ .bar-footer.bar-standard, .bar-footer-secondary.bar-standard { - /*border-top: 1px solid #aaa; - border-bottom-width: 0;*/ box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } /* Title bar -------------------------------------------------- */ -/* Bar docked to top of viewport for showing page title and actions */ .bar-title { top: 0; display: -webkit-box; @@ -191,7 +175,6 @@ a { -webkit-box-orient: horizontal; box-orient: horizontal; } -/* Centered text in the .bar-title */ .bar-title .title { position: absolute; top: 0; @@ -210,22 +193,17 @@ a { width: 100%; height: 100%; } -/* Retain specified title color */ .bar-title .title a { color: inherit; } /* Tab bar -------------------------------------------------- */ -/* Bar docked to bottom used for primary app navigation */ .bar-tab { bottom: 0; height: 50px; padding: 0; - /*border-top: 1px solid rgba(0,0,0,.3); - border-bottom-width: 0;*/ box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } -/* Wrapper for individual tab */ .tab-inner { display: -webkit-box; display: box; @@ -234,7 +212,6 @@ a { -webkit-box-orient: horizontal; box-orient: horizontal; } -/* Navigational tab */ .tab-item { height: 100%; padding-top: 9px; @@ -243,13 +220,11 @@ a { -webkit-box-flex: 1; box-flex: 1; } -/* Icon for tab */ .tab-icon { display: block; height: 18px; margin: 0 auto; } -/* Label for tab */ .tab-label { margin-top: 1px; font-size: 11px; @@ -261,11 +236,9 @@ a { /* Buttons in title bars -------------------------------------------------- */ -/* Generic style for all buttons in .bar-title */ .bar-title [class*="button"] { position: relative; z-index: 10; - /* Places buttons over full width title */ padding-left: 5px; padding-right: 5px; font-size: 16px; @@ -277,8 +250,6 @@ a { -webkit-box-flex: 0; box-flex: 0; } -/* Hacky way to right align buttons outside of flex-box system - Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ .bar-title .title + [class*="button"]:last-child, .bar-title .button + [class*="button"]:last-child, .bar-title [class*="button"].pull-right { @@ -286,7 +257,6 @@ a { top: 5px; right: 5px; } -/* Override standard button active states */ .bar-title .button:active, .bar-title .button-prev:active, .bar-title .button-next:active { @@ -307,16 +277,12 @@ a { background-color: #007aff; content: ''; } -/* Prev/next button base styles */ .bar-title .button-prev { - padding-left: 22px; - /* Push over to make room for chevrons */ } + padding-left: 22px; } .bar-title .button-next { - padding-right: 22px; - /* Push over to make room for chevrons */ } + padding-right: 22px; } -/* Position the chevrons horizontally */ .bar-title .button-prev:before, .bar-title .button-prev:after { left: 0; } @@ -325,7 +291,6 @@ a { .bar-title .button-next:after { right: 0; } -/* Position the chevrons vertically */ .bar-title .button-prev:before, .bar-title .button-next:before { top: 12px; } @@ -334,7 +299,6 @@ a { .bar-title .button-next:after { top: 21px; } -/* Rotate the chevrons */ .bar-title .button-prev:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -353,22 +317,18 @@ a { /* Block buttons in any bar -------------------------------------------------- */ -/* Add proper padding and replace buttons normal dropshadow with a shine from bar */ [class*="bar"] .button-block { padding: 7px 0; margin-bottom: 0; } -/* Override standard padding changes for .button-blocks */ [class*="bar"] .button-block:active { padding: 7px 0; } /* Segmented controller in any bar -------------------------------------------------- */ -/* Remove standard segmented bottom margin */ [class*="bar-"] .segmented-controller { margin-bottom: 0; } -/* Add margins between segmented controllers and buttons */ [class*="bar-"] .segmented-controller + [class*="button"], [class*="bar-"] [class*="button"] + .segmented-controller { margin-left: 5px; } @@ -382,35 +342,28 @@ a { /* Search forms in standard bar -------------------------------------------------- */ -/* Position/size search bar within the bar */ .bar-standard input[type=search] { height: 32px; margin: 0; } /* Lists -------------------------------------------------- */ -/* Remove usual bullet styles from list */ .list { list-style: none; background-color: #fff; } -/* Pad each list item and add dividers */ .list li { position: relative; padding: 11px 60px 11px 0; - /* Given extra right padding to accomodate counts, chevrons or buttons */ margin-left: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } -/* Give top border to first list items */ .list li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); } -/* Remove the border from the last list item*/ .list li:last-child { border-bottom: 0; } -/* If a list of links, make sure the child takes up full list item tap area (want to avoid selecting child buttons though) */ .list li > a:not([class*="button"]) { position: relative; display: block; @@ -428,7 +381,6 @@ a { border-radius: 6px; box-sizing: border-box; } -/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */ .list.inset li:first-child { border-top-width: 0; } @@ -493,7 +445,6 @@ a { /* Forms -------------------------------------------------- */ -/* Force form elements to inherit font styles */ input, textarea, button, @@ -501,7 +452,6 @@ select { font-family: inherit; font-size: inherit; } -/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */ select, textarea, input[type="text"], @@ -530,7 +480,6 @@ input[type="color"], box-sizing: border-box; outline: none; } -/* Fully round search input */ input[type=search] { height: 34px; font-size: 14px; @@ -538,11 +487,9 @@ input[type=search] { border-width: 0; background-color: rgba(0, 0, 0, 0.1); } -/* Allow text area's height to grow larger than a normal input */ textarea { height: auto; } -/* Style select button to look like part of the Ratchet's style */ select { height: auto; font-size: 14px; @@ -552,14 +499,12 @@ select { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } /* Input groups (cluster multiple inputs together into a single group) --------------------------------------------------- */ -/* Reset from initial form setup styles */ +---------------------------------------------------------------------- */ .input-group { width: auto; height: auto; padding: 0; } -/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */ .input-group input { margin-bottom: 0; background-color: transparent; @@ -568,30 +513,24 @@ select { border-radius: 0; box-shadow: none; } -/* Remove bottom border on last input to avoid double bottom border */ .input-group input:last-child { border-bottom-width: 0; } /* Input groups with labels -------------------------------------------------- */ -/* To use labels with input groups, wrap a label and an input in an .input-row */ .input-row { overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } -/* Remove bottom border on last input-row to avoid double bottom border */ .input-row:last-child { border-bottom-width: 0; } -/* Labels get floated left with a set percentage width */ .input-row label { float: left; width: 25%; padding: 11px 10px 9px 13px; - /* Optimizing the baseline for mobile. */ font-weight: bold; } -/* Actual inputs float to right of labels and also have a set percentage */ .input-row label + input { float: right; width: 65%; @@ -616,35 +555,29 @@ select { border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px; } -/* Active */ [class*="button"]:active { background-color: #333; transition: background-color .1s linear; } /* Button modifiers -------------------------------------------------- */ -/* Overriding styles for buttons with modifiers */ .button-main, .button-positive, .button-negative { color: #fff; } -/* Main button */ .button-main { color: #007aff; border: 1px solid #007aff; } -/* Positive button */ .button-positive { color: #4cd964; border: 1px solid #4cd964; } -/* Negative button */ .button-negative { color: #e71e1e; border: 1px solid #b51a1a; } -/* Active state for buttons with modifiers */ [class*="button"]:active, .button-main:active, .button-positive:active, @@ -662,20 +595,17 @@ select { .button-negative:active { background-color: #b21a1a; } -/* Block level buttons (full width buttons) */ .button-block { display: block; padding: 11px 0 13px; margin-bottom: 10px; font-size: 16px; } -/* Make button elements go full width when given .button-block class */ button.button-block { width: 100%; } /* Counts in buttons -------------------------------------------------- */ -/* Generic styles for all counts within buttons */ [class*="button"] [class*="count"] { padding-top: 2px; padding-bottom: 2px; @@ -683,9 +613,6 @@ button.button-block { margin-left: 4px; background-color: rgba(0, 0, 0, 0.1); } -/* Position counts within block level buttons - Note: These are absolutely positioned so that text of button isn't "pushed" by count and always - stays at true center of button */ .button-block [class*="count"] { position: absolute; right: 0; @@ -699,7 +626,6 @@ button.button-block { display: block; height: 20px; } -/* Base styles for both 1/2's of the chevron */ .chevron:before, .chevron:after { position: relative; @@ -709,7 +635,6 @@ button.button-block { background-color: #c7c7cc; content: ''; } -/* Position and rotate respective 1/2's of the chevron */ .chevron:before { top: 6px; -webkit-transform: rotate(45deg); @@ -734,21 +659,17 @@ button.button-block { /* Count modifiers -------------------------------------------------- */ -/* Overriding styles for counts with modifiers */ .count-main, .count-positive, .count-negative { color: #fff; } -/* Main count */ .count-main { background-color: #1eafe7; } -/* Positive count */ .count-positive { background-color: #4cd964; } -/* Negative count */ .count-negative { background-color: #e71e1e; } @@ -768,7 +689,6 @@ button.button-block { -webkit-box-orient: horizontal; box-orient: horizontal; } -/* Section within controller */ .segmented-controller li { overflow: hidden; text-align: center; @@ -777,7 +697,6 @@ button.button-block { -webkit-box-flex: 1; box-flex: 1; } -/* Link that fills each section */ .segmented-controller li > a { display: block; padding: 8px 16px; @@ -786,16 +705,13 @@ button.button-block { color: #007aff; text-overflow: ellipsis; } -/* Remove border-left and shadow from first section */ .segmented-controller li:first-child { border-left-width: 0; } -/* Active segment of controller */ .segmented-controller li.active { background-color: #007aff; transition: background-color .2s linear; } -/* Set color of links to white */ .segmented-controller li.active > a { color: #fff; } @@ -828,7 +744,6 @@ button.button-block { -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } -/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */ .popover:before, .popover:after { position: absolute; @@ -851,14 +766,12 @@ button.button-block { border-bottom: 20px solid #555; border-left: 20px solid transparent; } -/* Wrapper for a title and buttons */ .popover-header { display: -webkit-box; display: box; height: 34px; margin-bottom: 5px; } -/* Centered title for popover */ .popover-header .title { position: absolute; top: 0; @@ -872,7 +785,6 @@ button.button-block { text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); } -/* Generic style for all buttons in .popover-header */ .popover-header [class*="button"] { z-index: 25; font-size: 12px; @@ -886,8 +798,6 @@ button.button-block { -webkit-box-flex: 0; box-flex: 0; } -/* Hacky way to right align buttons outside of flex-box system - Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ .popover-header .title + [class*="button"]:last-child, .popover-header .button + [class*="button"]:last-child, .popover-header [class*="button"].pull-right { @@ -895,7 +805,6 @@ button.button-block { top: 5px; right: 5px; } -/* Active state for popover header buttons */ .popover-header .button:active { color: #fff; background-color: #0876b1; } @@ -919,12 +828,10 @@ button.button-block { /* Block level buttons in popovers -------------------------------------------------- */ -/* Positioning and giving darker border to look sharp against dark popover */ .popover .button-block { margin-bottom: 5px; border: 1px solid #111; } -/* Remove extra margin on bottom of last button */ .popover .button-block:last-child { margin-bottom: 0; } @@ -970,35 +877,28 @@ button.button-block { /* Slider styles (to be used with sliders.js) -------------------------------------------------- */ -/* Width/height of slider */ .slider, .slider > li { width: 100%; height: 200px; } -/* Outer wrapper for slider */ .slider { overflow: hidden; background-color: #000; } -/* Inner wrapper for slider (width of all slides together) */ .slider > ul { position: relative; font-size: 0; - /* Remove spaces from inline-block children */ white-space: nowrap; -webkit-transition: all 0 linear; transition: all 0 linear; } -/* Individual slide */ .slider > ul > li { display: inline-block; vertical-align: top; - /* Ensure that li always aligns to top */ width: 100%; height: 100%; } -/* Required reset of font-size to same as standard body */ .slider > ul > li > * { font-size: 14px; } @@ -1012,7 +912,6 @@ button.button-block { border: 2px solid #e6e6e6; border-radius: 20px; } -/* Sliding handle */ .toggle-handle { position: absolute; top: -1px; @@ -1027,12 +926,10 @@ button.button-block { -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out; transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; } -/* Active state for toggle */ .toggle.active { background-color: #4cd964; border: 2px solid #4cd964; } -/* Active state for toggle handle */ .toggle.active .toggle-handle { border-color: #4cd964; -webkit-transform: translate3d(17px, 0, 0); @@ -1040,7 +937,6 @@ button.button-block { /* Push styles (to be used with push.js) -------------------------------------------------- */ -/* Fade animation */ .content.fade { left: 0; opacity: 0; @@ -1050,8 +946,8 @@ button.button-block { .content.fade.in { opacity: 1; } -/* Slide animation */ .content.slide { + -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform .25s ease-in-out; diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index efa9e1b..a5146ed 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -10,32 +10,29 @@ padding: 5px; background-color: rgba(247,247,247,.98); box-shadow: 0 0px 1px rgba(0,0,0,.85); - /*border-bottom: 1px solid rgba(0,0,0,.3);*/ box-sizing: border-box; } -/* Modifier class to dock any bar below .bar-title */ +// Modifier class to dock any bar below .bar-title .bar-header-secondary { top: 44px; } -/* Modifier class to dock any bar to bottom of viewport */ +// Modifier class to dock any bar to bottom of viewport .bar-footer { bottom: 0; } -/* Flip border position to top for footer bars */ +// Flip border position to top for footer bars .bar-footer.bar-standard, .bar-footer-secondary.bar-standard { - /*border-top: 1px solid #aaa; - border-bottom-width: 0;*/ box-shadow: 0 0px 1px rgba(0,0,0,.85); } /* Title bar -------------------------------------------------- */ -/* Bar docked to top of viewport for showing page title and actions */ +// Bar docked to top of viewport for showing page title and actions .bar-title { top: 0; display: -webkit-box; @@ -44,7 +41,7 @@ box-orient: horizontal; } -/* Centered text in the .bar-title */ +// Centered text in the .bar-title .bar-title .title { position: absolute; top: 0; @@ -65,7 +62,7 @@ height: 100%; } -/* Retain specified title color */ +//Retain specified title color .bar-title .title a { color: inherit; } @@ -73,17 +70,15 @@ /* Tab bar -------------------------------------------------- */ -/* Bar docked to bottom used for primary app navigation */ +// Bar docked to bottom used for primary app navigation .bar-tab { bottom: 0; height: 50px; padding: 0; - /*border-top: 1px solid rgba(0,0,0,.3); - border-bottom-width: 0;*/ box-shadow: 0 0px 1px rgba(0,0,0,.85); } -/* Wrapper for individual tab */ +// Wrapper for individual tab .tab-inner { display: -webkit-box; display: box; @@ -93,7 +88,7 @@ box-orient: horizontal; } -/* Navigational tab */ +// Navigational tab .tab-item { height: 100%; padding-top: 9px; @@ -103,14 +98,14 @@ box-flex: 1; } -/* Icon for tab */ +// Icon for tab .tab-icon { display: block; height: 18px; margin: 0 auto; } -/* Label for tab */ +// Label for tab .tab-label { margin-top: 1px; font-size: 11px; @@ -124,10 +119,10 @@ /* Buttons in title bars -------------------------------------------------- */ -/* Generic style for all buttons in .bar-title */ +// Generic style for all buttons in .bar-title .bar-title [class*="button"] { position: relative; - z-index: 10; /* Places buttons over full width title */ + z-index: 10; // Places buttons over full width title padding-left: 5px; padding-right: 5px; font-size: 16px; @@ -141,8 +136,8 @@ } -/* Hacky way to right align buttons outside of flex-box system - Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ +// Hacky way to right align buttons outside of flex-box system +// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option .bar-title .title + [class*="button"]:last-child, .bar-title .button + [class*="button"]:last-child, .bar-title [class*="button"].pull-right { @@ -151,7 +146,7 @@ right: 5px; } -/* Override standard button active states */ +// Override standard button active states .bar-title .button:active, .bar-title .button-prev:active, .bar-title .button-next:active { @@ -175,15 +170,15 @@ content: ''; } -/* Prev/next button base styles */ +// Prev/next button base styles .bar-title .button-prev { - padding-left: 22px; /* Push over to make room for chevrons */ + padding-left: 22px; // Push over to make room for chevrons } .bar-title .button-next { - padding-right: 22px; /* Push over to make room for chevrons */ + padding-right: 22px; // Push over to make room for chevrons } -/* Position the chevrons horizontally */ +// Position the chevrons horizontally .bar-title .button-prev:before, .bar-title .button-prev:after { left: 0; @@ -193,7 +188,7 @@ right: 0; } -/* Position the chevrons vertically */ +// Position the chevrons vertically .bar-title .button-prev:before, .bar-title .button-next:before { top: 12px; @@ -203,7 +198,7 @@ top: 21px; } -/* Rotate the chevrons */ +// Rotate the chevrons .bar-title .button-prev:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); @@ -224,13 +219,13 @@ /* Block buttons in any bar -------------------------------------------------- */ -/* Add proper padding and replace buttons normal dropshadow with a shine from bar */ +// Add proper padding and replace buttons normal dropshadow with a shine from bar [class*="bar"] .button-block { padding: 7px 0; margin-bottom: 0; } -/* Override standard padding changes for .button-blocks */ +// Override standard padding changes for .button-blocks [class*="bar"] .button-block:active { padding: 7px 0; } @@ -238,12 +233,12 @@ /* Segmented controller in any bar -------------------------------------------------- */ -/* Remove standard segmented bottom margin */ +// Remove standard segmented bottom margin [class*="bar-"] .segmented-controller { margin-bottom: 0; } -/* Add margins between segmented controllers and buttons */ +// Add margins between segmented controllers and buttons [class*="bar-"] .segmented-controller + [class*="button"], [class*="bar-"] [class*="button"] + .segmented-controller { margin-left: 5px; @@ -262,7 +257,7 @@ /* Search forms in standard bar -------------------------------------------------- */ -/* Position/size search bar within the bar */ +// Position/size search bar within the bar .bar-standard input[type=search] { height: 32px; margin: 0; diff --git a/lib/sass/base.scss b/lib/sass/base.scss index b558e8a..5b54df4 100644 --- a/lib/sass/base.scss +++ b/lib/sass/base.scss @@ -83,7 +83,7 @@ video { border: 0; } -/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ +// Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) html { -webkit-text-size-adjust: 100%; } @@ -102,14 +102,14 @@ body { background-color: #fff; } -/* Universal link styling */ +// Universal link styling a { color: #007aff; text-decoration: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links } -/* Wrapper to be used around all content not in .bar-title and .bar-tab */ +// Wrapper to be used around all content not in .bar-title and .bar-tab .content { position: fixed; top: 0; @@ -127,20 +127,20 @@ a { -webkit-overflow-scrolling: touch; } -/* Hack to force all relatively and absolutely positioned elements still render while scrolling - Note: This is a bug for "-webkit-overflow-scrolling: touch" */ +// Hack to force all relatively and absolutely positioned elements still render while scrolling +// Note: This is a bug for "-webkit-overflow-scrolling: touch" .content > * { -webkit-transform: translateZ(0px); transform: translateZ(0px); } -/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ +// Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed .content-padded { padding: 10px; } -/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. - Note: For these to work, content must come after both bars in the markup */ +// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. +// Note: For these to work, content must come after both bars in the markup .bar-title ~ .content { padding-top: 44px; } diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 4b75beb..35542ca 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -17,7 +17,7 @@ border-radius: 4px; } -/* Active */ +// Active [class*="button"]:active { background-color: #333; transition: background-color .1s linear; @@ -26,32 +26,32 @@ /* Button modifiers -------------------------------------------------- */ -/* Overriding styles for buttons with modifiers */ +// Overriding styles for buttons with modifiers .button-main, .button-positive, .button-negative { color: #fff; } -/* Main button */ +// Main button .button-main { color: #007aff; border: 1px solid #007aff; } -/* Positive button */ +// Positive button .button-positive { color: #4cd964; border: 1px solid #4cd964; } -/* Negative button */ +// Negative button .button-negative { color: #e71e1e; border: 1px solid #b51a1a; } -/* Active state for buttons with modifiers */ +// Active state for buttons with modifiers [class*="button"]:active, .button-main:active, .button-positive:active, @@ -70,7 +70,7 @@ background-color: #b21a1a; } -/* Block level buttons (full width buttons) */ +// Block level buttons (full width buttons) .button-block { display: block; padding: 11px 0 13px; @@ -78,8 +78,7 @@ font-size: 16px; } - -/* Make button elements go full width when given .button-block class */ +// Make button elements go full width when given .button-block class button.button-block { width: 100%; } @@ -87,7 +86,7 @@ button.button-block { /* Counts in buttons -------------------------------------------------- */ -/* Generic styles for all counts within buttons */ +// Generic styles for all counts within buttons [class*="button"] [class*="count"] { padding-top: 2px; padding-bottom: 2px; @@ -96,9 +95,9 @@ button.button-block { background-color: rgba(0, 0, 0, .1); } -/* Position counts within block level buttons - Note: These are absolutely positioned so that text of button isn't "pushed" by count and always - stays at true center of button */ +// Position counts within block level buttons +// Note: These are absolutely positioned so that text of button isn't "pushed" by count and always +// stays at true center of button .button-block [class*="count"] { position: absolute; right: 0; diff --git a/lib/sass/chevrons.scss b/lib/sass/chevrons.scss index 69c178c..bf1c1cd 100644 --- a/lib/sass/chevrons.scss +++ b/lib/sass/chevrons.scss @@ -6,7 +6,7 @@ height: 20px; } -/* Base styles for both 1/2's of the chevron */ +// Base styles for both 1/2's of the chevron .chevron:before, .chevron:after { position: relative; @@ -17,7 +17,7 @@ content: ''; } -/* Position and rotate respective 1/2's of the chevron */ +// Position and rotate respective 1/2's of the chevron .chevron:before { top: 6px; -webkit-transform: rotate(45deg); diff --git a/lib/sass/counts.scss b/lib/sass/counts.scss index 04bd936..a8e1616 100644 --- a/lib/sass/counts.scss +++ b/lib/sass/counts.scss @@ -15,24 +15,24 @@ /* Count modifiers -------------------------------------------------- */ -/* Overriding styles for counts with modifiers */ +// Overriding styles for counts with modifiers .count-main, .count-positive, .count-negative { color: #fff; } -/* Main count */ +// Main count .count-main { background-color: #1eafe7; } -/* Positive count */ +// Positive count .count-positive { background-color: #4cd964; } -/* Negative count */ +// Negative count .count-negative { background-color: #e71e1e; } \ No newline at end of file diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index c25111a..3255ae5 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -1,7 +1,7 @@ /* Forms -------------------------------------------------- */ -/* Force form elements to inherit font styles */ +// Force form elements to inherit font styles input, textarea, button, @@ -10,7 +10,7 @@ select { font-size: inherit; } -/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */ +// Stretch inputs/textareas to full width and add height to maintain a consistent baseline select, textarea, input[type="text"], @@ -40,7 +40,7 @@ input[type="color"], outline: none; } -/* Fully round search input */ +// Fully round search input input[type=search] { height: 34px; font-size: 14px; @@ -49,12 +49,12 @@ input[type=search] { background-color: rgba(0,0,0,.1); } -/* Allow text area's height to grow larger than a normal input */ +// Allow text area's height to grow larger than a normal input textarea { height: auto; } -/* Style select button to look like part of the Ratchet's style */ +// Style select button to look like part of the Ratchet's style select { height: auto; font-size: 14px; @@ -66,16 +66,16 @@ select { /* Input groups (cluster multiple inputs together into a single group) --------------------------------------------------- */ +---------------------------------------------------------------------- */ -/* Reset from initial form setup styles */ +// Reset from initial form setup styles .input-group { width: auto; height: auto; padding: 0; } -/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */ +// Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input .input-group input { margin-bottom: 0; background-color: transparent; @@ -85,7 +85,7 @@ select { box-shadow: none; } -/* Remove bottom border on last input to avoid double bottom border */ +// Remove bottom border on last input to avoid double bottom border .input-group input:last-child { border-bottom-width: 0; } @@ -93,26 +93,26 @@ select { /* Input groups with labels -------------------------------------------------- */ -/* To use labels with input groups, wrap a label and an input in an .input-row */ +// To use labels with input groups, wrap a label and an input in an .input-row .input-row { overflow: hidden; border-bottom: 1px solid rgba(0, 0, 0, .2); } -/* Remove bottom border on last input-row to avoid double bottom border */ +// Remove bottom border on last input-row to avoid double bottom border .input-row:last-child { border-bottom-width: 0; } -/* Labels get floated left with a set percentage width */ +// Labels get floated left with a set percentage width .input-row label { float: left; width: 25%; - padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */ + padding: 11px 10px 9px 13px; // Optimizing the baseline for mobile. font-weight: bold; } -/* Actual inputs float to right of labels and also have a set percentage */ +// Actual inputs float to right of labels and also have a set percentage .input-row label + input { float: right; width: 65%; diff --git a/lib/sass/lists.scss b/lib/sass/lists.scss index bbaf89e..6e8c99d 100644 --- a/lib/sass/lists.scss +++ b/lib/sass/lists.scss @@ -1,31 +1,31 @@ /* Lists -------------------------------------------------- */ -/* Remove usual bullet styles from list */ +// Remove usual bullet styles from list .list { list-style: none; background-color: #fff; } -/* Pad each list item and add dividers */ +// Pad each list item and add dividers .list li { position: relative; - padding: 11px 60px 11px 0; /* Given extra right padding to accomodate counts, chevrons or buttons */ + padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons margin-left: 15px; border-bottom: 1px solid rgba(0, 0, 0, .1); } -/* Give top border to first list items */ +// Give top border to first list items .list li:first-child { border-top: 1px solid rgba(0, 0, 0, .1); } -/* Remove the border from the last list item*/ +// Remove the border from the last list item .list li:last-child { border-bottom: 0; } -/* If a list of links, make sure the child takes up full list item tap area (want to avoid selecting child buttons though) */ +// If a list of links, make sure the child takes up full list item tap area (want to avoid selecting child buttons though) .list li > a:not([class*="button"]) { position: relative; display: block; @@ -46,7 +46,7 @@ box-sizing: border-box; } -/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */ +// Remove border from first/last standard list items to avoid double border at top/bottom of lists .list.inset li:first-child { border-top-width: 0; } diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss index b9d1755..730c43d 100644 --- a/lib/sass/popovers.scss +++ b/lib/sass/popovers.scss @@ -23,7 +23,7 @@ transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } -/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */ +// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) .popover:before, .popover:after { position: absolute; @@ -47,7 +47,7 @@ border-left: 20px solid transparent; } -/* Wrapper for a title and buttons */ +// Wrapper for a title and buttons .popover-header { display: -webkit-box; display: box; @@ -55,7 +55,7 @@ margin-bottom: 5px; } -/* Centered title for popover */ +// Centered title for popover .popover-header .title { position: absolute; top: 0; @@ -70,7 +70,7 @@ text-shadow: 0 -1px rgba(0, 0, 0, .5); } -/* Generic style for all buttons in .popover-header */ +// Generic style for all buttons in .popover-header .popover-header [class*="button"] { z-index: 25; font-size: 12px; @@ -85,8 +85,8 @@ box-flex: 0; } -/* Hacky way to right align buttons outside of flex-box system - Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ +// Hacky way to right align buttons outside of flex-box system +// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option .popover-header .title + [class*="button"]:last-child, .popover-header .button + [class*="button"]:last-child, .popover-header [class*="button"].pull-right { @@ -95,7 +95,7 @@ right: 5px; } -/* Active state for popover header buttons */ +// Active state for popover header buttons .popover-header .button:active { color: #fff; background-color: #0876b1; @@ -125,13 +125,13 @@ /* Block level buttons in popovers -------------------------------------------------- */ -/* Positioning and giving darker border to look sharp against dark popover */ +// Positioning and giving darker border to look sharp against dark popover .popover .button-block { margin-bottom: 5px; border: 1px solid #111; } -/* Remove extra margin on bottom of last button */ +// Remove extra margin on bottom of last button .popover .button-block:last-child { margin-bottom: 0; } diff --git a/lib/sass/push.scss b/lib/sass/push.scss index d3770a8..826418e 100644 --- a/lib/sass/push.scss +++ b/lib/sass/push.scss @@ -1,7 +1,7 @@ /* Push styles (to be used with push.js) -------------------------------------------------- */ -/* Fade animation */ +// Fade animation .content.fade { left: 0; opacity: 0; @@ -11,13 +11,13 @@ .content.fade.in { opacity: 1; } - -/* Slide animation */ +// Slide animation iOS7 .content.slide { + -webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); //Thanks to @c2prods -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); - -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform .25s ease-in-out; + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out; } .content.slide.left { -webkit-transform: translate3d(-100%, 0, 0); diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss index 0ca5f9d..416ddfd 100644 --- a/lib/sass/segmented-controllers.scss +++ b/lib/sass/segmented-controllers.scss @@ -16,7 +16,7 @@ box-orient: horizontal; } -/* Section within controller */ +// Section within controller .segmented-controller li { overflow: hidden; text-align: center; @@ -26,7 +26,7 @@ box-flex: 1; } -/* Link that fills each section */ +// Link that fills each section .segmented-controller li > a { display: block; padding: 8px 16px; @@ -36,17 +36,17 @@ text-overflow: ellipsis; } -/* Remove border-left and shadow from first section */ +// Remove border-left and shadow from first section .segmented-controller li:first-child { border-left-width: 0; } -/* Active segment of controller */ +// Active segment of controller .segmented-controller li.active { background-color: #007aff; transition: background-color .2s linear; } -/* Set color of links to white */ +// Set color of links to white .segmented-controller li.active > a { color: #fff; } diff --git a/lib/sass/sliders.scss b/lib/sass/sliders.scss index eaca8f0..61aa4d0 100644 --- a/lib/sass/sliders.scss +++ b/lib/sass/sliders.scss @@ -1,37 +1,37 @@ /* Slider styles (to be used with sliders.js) -------------------------------------------------- */ -/* Width/height of slider */ +// Width/height of slider .slider, .slider > li { width: 100%; height: 200px; } -/* Outer wrapper for slider */ +// Outer wrapper for slider .slider { overflow: hidden; background-color: #000; } -/* Inner wrapper for slider (width of all slides together) */ +// Inner wrapper for slider (width of all slides together) .slider > ul { position: relative; - font-size: 0; /* Remove spaces from inline-block children */ + font-size: 0; // Remove spaces from inline-block children white-space: nowrap; -webkit-transition: all 0 linear; transition: all 0 linear; } -/* Individual slide */ +// Individual slide */ .slider > ul > li { display: inline-block; - vertical-align: top; /* Ensure that li always aligns to top */ + vertical-align: top; // Ensure that li always aligns to top width: 100%; height: 100%; } -/* Required reset of font-size to same as standard body */ +// Required reset of font-size to same as standard body .slider > ul > li > * { font-size: 14px; } \ No newline at end of file diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss index d1a9d6b..dd08883 100644 --- a/lib/sass/toggles.scss +++ b/lib/sass/toggles.scss @@ -10,7 +10,7 @@ border-radius: 20px; } -/* Sliding handle */ +// Sliding handle .toggle-handle { position: absolute; top: -1px; @@ -26,13 +26,13 @@ transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; } -/* Active state for toggle */ +// Active state for toggle .toggle.active { background-color: #4cd964; border: 2px solid #4cd964; } -/* Active state for toggle handle */ +// Active state for toggle handle .toggle.active .toggle-handle { border-color: #4cd964; -webkit-transform: translate3d(17px,0,0);