Browse Source

Resolving derps

pull/214/head
connors 11 years ago
parent
commit
2479d14ffc
  1. 69
      Gruntfile.js
  2. 69
      Makefile
  3. 658
      dist/ratchet.css
  4. 84
      dist/ratchet.js
  5. 59
      lib/sass/bars.scss
  6. 18
      lib/sass/base.scss
  7. 25
      lib/sass/buttons.scss
  8. 4
      lib/sass/chevrons.scss
  9. 8
      lib/sass/counts.scss
  10. 28
      lib/sass/forms.scss
  11. 14
      lib/sass/lists.scss
  12. 0
      lib/sass/modals.scss
  13. 18
      lib/sass/popovers.scss
  14. 10
      lib/sass/push.scss
  15. 14
      lib/sass/ratchet.scss
  16. 10
      lib/sass/segmented-controllers.scss
  17. 14
      lib/sass/sliders.scss
  18. 6
      lib/sass/toggles.scss
  19. 37
      package.json

69
Gruntfile.js

@ -3,28 +3,67 @@ 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: {
// Metadata.
meta: {
srcPath: 'lib/',
distPath: 'dist/'
},
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',
concat: {
options: {
banner: ''
banner: '<%= banner %><%= jqueryCheck %>'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
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: {
banner: '<%= banner %>',
},
dist: {
files: {
'<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/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-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['uglify']);
grunt.registerTask('default', ['sass', 'concat']);
grunt.registerTask('build', ['sass', 'concat']);
};

69
Makefile

@ -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

658
dist/ratchet.css vendored

File diff suppressed because it is too large Load Diff

84
dist/ratchet.js vendored

@ -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

59
lib/css/bars.css → 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;

18
lib/css/base.css → 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;
}

25
lib/css/buttons.css → 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;

4
lib/css/chevrons.css → 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);

8
lib/css/counts.css → 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;
}

28
lib/css/forms.css → 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%;

14
lib/css/lists.css → 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 <a> takes up full list item tap area (want to avoid selecting child buttons though) */
// If a list of links, make sure the child <a> 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;
}

0
lib/css/modals.css → lib/sass/modals.scss

18
lib/css/popovers.css → 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;
}

10
lib/css/push.css → 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);

14
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";

10
lib/css/segmented-controllers.css → 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;
}

14
lib/css/sliders.css → 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;
}

6
lib/css/toggles.css → 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);

37
package.json

@ -1,4 +1,5 @@
{
<<<<<<< HEAD
"name": "ratchet"
, "version": "2.0.0"
, "devDependencies": {
@ -24,3 +25,39 @@
}
]
}
=======
"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",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-concat": "~0.3.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"
}
]
}
>>>>>>> derp

Loading…
Cancel
Save