Browse Source

Resolve yo self.

pull/249/head
connors 11 years ago
parent
commit
c716f075ed
  1. 3
      Gruntfile.js
  2. 18
      README.md
  3. 0
      dist/ratchet-theme.css
  4. 82
      dist/ratchet.css
  5. 59
      dist/ratchet.js
  6. 2
      examples/app-classic/checkout.html
  7. 2
      examples/app-classic/choose-movie.html
  8. 2
      examples/app-classic/choose-theater.html
  9. 2
      examples/app-classic/index.html
  10. 2
      examples/app-classic/settings.html
  11. 1
      examples/app-classic/theaters.html
  12. 268
      examples/app-default/index.html
  13. 2
      examples/components/classic/index.html
  14. 36
      lib/js/alerts.js
  15. 7
      lib/js/modals.js
  16. 11
      lib/js/popovers.js
  17. 4
      lib/js/sliders.js
  18. 52
      lib/sass/alerts.scss
  19. 13
      lib/sass/bars.scss
  20. 15
      lib/sass/forms.scss
  21. 8
      lib/sass/mixins.scss
  22. 1
      lib/sass/ratchet.scss
  23. 4
      lib/sass/table-views.scss
  24. 2
      package.json

3
Gruntfile.js

@ -32,7 +32,8 @@ module.exports = function(grunt) {
'<%= meta.srcPath %>js/push.js',
'<%= meta.srcPath %>js/segmented-controllers.js',
'<%= meta.srcPath %>js/sliders.js',
'<%= meta.srcPath %>js/toggles.js'
'<%= meta.srcPath %>js/toggles.js',
'<%= meta.srcPath %>js/alerts.js'
],
dest: '<%= meta.distPath %><%= pkg.name %>.js'
}

18
README.md

@ -12,19 +12,19 @@ Take note that our master branch is our active, unstable development branch and
## Documentation
Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://maker.github.io/ratchet](http://maker.github.io/ratchet). The docs may also be run locally.
Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://maker.github.io/ratchet>. The docs may also be run locally.
### Running documentation locally
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation).
2. From the root `/ratchet` directory, run `jekyll serve` in the command line.
3. Open [http://localhost:4000](http://localhost:4000) in your browser, and boom!
3. Open <http://localhost:4000> in your browser, and boom!
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
## Support
Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@goRatchet](http://www.twitter.com/goratchet).
Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@GoRatchet](https://twitter.com/goratchet).
## Reporting bugs & contributing
@ -45,18 +45,18 @@ A small list of "gotchas" are provided below for designers and developers starti
Connor Sears
- https://twitter.com/connors
- https://github.com/connors
- <https://twitter.com/connors>
- <https://github.com/connors>
Dave Gamache
- https://twitter.com/dhg
- https://github.com/dhg
- <https://twitter.com/dhg>
- <https://github.com/dhg>
Jacob Thornton
- https://twitter.com/fat
- https://github.com/fat
- <https://twitter.com/fat>
- <https://github.com/fat>
## License

0
dist/theme-classic.css → dist/ratchet-theme.css vendored

82
dist/ratchet.css vendored

@ -303,9 +303,11 @@ strong {
[class*="bar-"].bar-footer {
bottom: 0;
}
[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard {
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
[class*="bar-"].bar-footer-secondary {
bottom: 44px;
}
[class*="bar-"].bar-footer-secondary-tab {
bottom: 50px;
}
.bar-nav {
@ -346,8 +348,6 @@ strong {
bottom: 0;
height: 50px;
padding: 0;
-webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
}
.tab-inner {
@ -409,7 +409,7 @@ strong {
.table-view .table-view-cell {
position: relative;
padding: 11px 60px 12px 15px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
@ -448,7 +448,7 @@ strong {
color: #999;
font-weight: 500;
background-color: #fafafa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
@ -537,6 +537,7 @@ input[type="color"],
height: 40px;
padding: 10px 15px;
margin-bottom: 10px;
line-height: 21px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
@ -584,31 +585,35 @@ select {
margin-bottom: 0;
background-color: transparent;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.input-group input:last-child {
border-bottom-width: 0;
background-image: none;
}
.input-row {
overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='1000' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.input-row:last-child {
border-bottom-width: 0;
background-image: none;
}
.input-row label {
float: left;
width: 35%;
padding: 11px 10px 9px 15px;
padding: 10px 15px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight: 500;
line-height: 1.1;
}
.input-row label + input {
@ -616,7 +621,7 @@ select {
width: 65%;
padding-left: 0;
margin-bottom: 0;
border-bottom: 0;
background-image: none;
}
[class*="bar-"] input[type=search] {
@ -988,6 +993,55 @@ input[type="button"] {
background-color: rgba(0, 0, 0, 0.15);
}
.alert {
position: fixed;
right: 15px;
left: 15px;
bottom: 65px;
padding: 15px;
color: #fff;
border-radius: 3px;
z-index: 10;
-webkit-transition: opacity;
transition: opacity;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.alert .close {
position: relative;
top: -2px;
float: right;
color: inherit;
cursor: pointer;
-webkit-transition: opacity;
transition: opacity;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.alert .close:active {
opacity: .6;
}
.alert.dismiss {
opacity: 0;
}
.alert-positive {
background-color: rgba(76, 217, 100, 0.97);
}
.alert-negative {
background-color: rgba(221, 82, 77, 0.97);
}
.alert-inline {
position: static;
margin: 15px;
}
.modal {
position: fixed;
top: 0;

59
dist/ratchet.js vendored

@ -15,8 +15,7 @@
!function () {
var findModals = function (target) {
var i;
var modals = document.querySelectorAll('a');
var i, modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; }
}
@ -30,13 +29,14 @@
window.addEventListener('touchend', function (event) {
var modal = getModal(event);
if (modal) {
modal.classList.toggle('active');
if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
}
});
}();
/* ----------------------------------
* POPOVER v1.0.0
* POPOVER v1.0.1
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
@ -76,7 +76,14 @@
if (!anchor || !anchor.hash) return;
popover = document.querySelector(anchor.hash);
try {
popover = document.querySelector(anchor.hash);
}
catch (error) {
popover = null;
}
if (popover == null) return;
if (!popover || !popover.classList.contains('popover')) return;
@ -626,8 +633,8 @@
startTime = +new Date;
pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY;
deltaX = 0;
deltaY = 0;
deltaX = 0;
deltaY = 0;
setSlideNumber(0);
@ -775,4 +782,40 @@
toggle = false;
});
}();
}();
/* ----------------------------------
* ALERT v0.0.1
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
!function () {
var findAlerts = function (target) {
var i, alerts = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
}
};
var onAlertHidden = function () {
var alert = getAlert(event);
alert.style.display = 'none';
alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
}
var getAlert = function (event) {
var alertDismiss = findAlerts(event.target);
if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
};
window.addEventListener('click', function (event) {
var alert = getAlert(event);
if (alert) {
if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
alert.addEventListener('webkitTransitionEnd', onAlertHidden);
event.preventDefault();
}
});
}();

2
examples/app-classic/checkout.html

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/theme-classic.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>

2
examples/app-classic/choose-movie.html

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/theme-classic.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>

2
examples/app-classic/choose-theater.html

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/theme-classic.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>

2
examples/app-classic/index.html

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/theme-classic.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>

2
examples/app-classic/settings.html

@ -12,7 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/theme-classic.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>

1
examples/app-classic/theaters.html

@ -12,6 +12,7 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ratchet-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>

268
examples/app-default/index.html

@ -18,143 +18,153 @@
</head>
<body>
<header class="bar-nav">
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<!-- Alert -->
<div id="myAlert" class="alert alert-negative">
<a href="#myAlert" class="icon icon-share close"></a>
<strong>This</strong> is an alert.
</div>
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
</nav>
<header class="bar-nav">
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<div class="content">
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
</li>
<li class="tab-item">
<a href="theaters.html" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
</li>
<li class="tab-item">
<a href="settings.html" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</li>
</ul>
</nav>
<div class="slider">
<ul>
<li>
<img src="img/argo.png">
<div class="content">
<div class="slider">
<ul>
<li>
<img src="img/argo.png">
</li>
<li>
<img src="img/skyfall.png">
</li>
<li>
<img src="img/ralph.png">
</li>
</ul>
</div>
<div id="myAlert2" class="alert alert-positive alert-inline">
<a href="#myAlert2" class="icon icon-share close"></a>
<strong>This</strong> is an inline alert.
</div>
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<img src="img/skyfall.png">
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li>
<img src="img/ralph.png">
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>

2
examples/components/classic/index.html

@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<link rel="stylesheet" href="../../../dist/ratchet.css">
<link rel="stylesheet" href="../../../dist/theme-classic.css">
<link rel="stylesheet" href="../../../dist/ratchet-theme.css">
<script src="../../../dist/ratchet.js"></script>
<script src="../../../docs/js/fingerblast.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

36
lib/js/alerts.js

@ -0,0 +1,36 @@
/* ----------------------------------
* ALERT v0.0.1
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
!function () {
var findAlerts = function (target) {
var i, alerts = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
}
};
var onAlertHidden = function () {
var alert = getAlert(event);
alert.style.display = 'none';
alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
}
var getAlert = function (event) {
var alertDismiss = findAlerts(event.target);
if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
};
window.addEventListener('click', function (event) {
var alert = getAlert(event);
if (alert) {
if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
alert.addEventListener('webkitTransitionEnd', onAlertHidden);
event.preventDefault();
}
});
}();

7
lib/js/modals.js

@ -6,8 +6,7 @@
!function () {
var findModals = function (target) {
var i;
var modals = document.querySelectorAll('a');
var i, modals = document.querySelectorAll('a');
for (; target && target !== document; target = target.parentNode) {
for (i = modals.length; i--;) { if (modals[i] === target) return target; }
}
@ -21,8 +20,8 @@
window.addEventListener('touchend', function (event) {
var modal = getModal(event);
if (modal) {
modal.classList.toggle('active');
if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
}
});
}();
}();

11
lib/js/popovers.js

@ -1,5 +1,5 @@
/* ----------------------------------
* POPOVER v1.0.0
* POPOVER v1.0.1
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
@ -39,7 +39,14 @@
if (!anchor || !anchor.hash) return;
popover = document.querySelector(anchor.hash);
try {
popover = document.querySelector(anchor.hash);
}
catch (error) {
popover = null;
}
if (popover == null) return;
if (!popover || !popover.classList.contains('popover')) return;

4
lib/js/sliders.js

@ -56,8 +56,8 @@
startTime = +new Date;
pageX = e.touches[0].pageX;
pageY = e.touches[0].pageY;
deltaX = 0;
deltaY = 0;
deltaX = 0;
deltaY = 0;
setSlideNumber(0);

52
lib/sass/alerts.scss

@ -0,0 +1,52 @@
//
// Alerts
// --------------------------------------------------
.alert {
position: fixed;
right: 15px;
left: 15px;
bottom: $bar-tab-height + 15px;
padding: 15px;
color: #fff;
border-radius: 3px;
z-index: 10;
@include transition(opacity);
@include transition-duration(.2s);
@include transition-timing-function(linear);
.close {
position: relative;
top: -2px;
float: right;
color: inherit;
cursor: pointer;
@include transition(opacity);
@include transition-duration(.2s);
@include transition-timing-function(linear);
&:active {
opacity: .6;
}
}
&.dismiss {
opacity: 0;
}
}
// Positive alert (Default color is green)
.alert-positive {
background-color: transparentize($positive-color, .03);
}
// Negative alert (Default color is red)
.alert-negative {
background-color: transparentize($negative-color, .03);
}
// Inline alert
.alert-inline {
position: static;
margin: 15px;
}

13
lib/sass/bars.scss

@ -22,10 +22,14 @@
bottom: 0;
}
// Flip border position to top for footer bars
&.bar-footer.bar-standard,
&.bar-footer-secondary.bar-standard {
@include box-shadow(0 0 1px rgba(0,0,0,.85));
// Modifier class to dock any bar above a standard bar
&.bar-footer-secondary {
bottom: $bar-base-height;
}
// Modifier class to dock any bar above a .bar-tab
&.bar-footer-secondary-tab {
bottom: $bar-tab-height;
}
}
@ -78,7 +82,6 @@
bottom: 0;
height: $bar-tab-height;
padding: 0;
@include box-shadow(0 0px 1px rgba(0,0,0,.85));
}
// Wrapper for individual tab

15
lib/sass/forms.scss

@ -33,6 +33,7 @@ input[type="color"],
height: 40px;
padding: 10px 15px;
margin-bottom: 10px;
line-height: $line-height-default;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
@ -87,14 +88,14 @@ select {
margin-bottom: 0;
background-color: transparent;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0;
@include box-shadow(none);
@include hairline(single, #c8c7cc, 15px);
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
border-bottom-width: 0;
background-image: none;
}
// Input groups with labels
@ -104,21 +105,21 @@ select {
// 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);
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child {
border-bottom-width: 0;
background-image: none;
}
// Labels get floated left with a set percentage width
.input-row label {
float: left;
width: 35%;
padding: 11px 10px 9px 15px; // Optimizing the baseline for mobile.
padding: 10px 15px;
font-family: $font-family-default;
font-weight: $font-weight;
line-height: 1.1; // Put the text on the baseline.
}
// Actual inputs float to right of labels and also have a set percentage
@ -127,7 +128,7 @@ select {
width: 65%;
padding-left: 0;
margin-bottom: 0;
border-bottom: 0;
background-image: none;
}

8
lib/sass/mixins.scss

@ -71,14 +71,14 @@
// Misc
// --------------------------------------------------
@mixin hairline($type, $color, $width, $offset) {
@mixin hairline($type, $color, $offset) {
@if $type == single {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: $offset 100%;
} @else if $type == double {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>"),
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{$color}' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: $offset 100%, $offset 0%;
}
background-repeat: no-repeat;

1
lib/sass/ratchet.scss

@ -18,6 +18,7 @@
@import "badges.scss";
@import "segmented-controllers.scss";
@import "popovers.scss";
@import "alerts.scss";
// Javascript components
@import "modals.scss";

4
lib/sass/table-views.scss

@ -12,7 +12,7 @@
.table-view-cell {
position: relative;
padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
@include hairline(single, #c8c7cc, 320px, 15px); // Single grey border with a width of 320px and 15px offset.
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
// Remove the border from the last table view item
@ -68,7 +68,7 @@
color: #999;
font-weight: $font-weight;
background-color: #fafafa;
@include hairline(double, #c8c7cc, 320px, 0); // Double (top and bottom) grey border with a width of 320px and no offset.
@include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset.
// Rounding first divider on inset lists and remove border on the top
&:first-child {

2
package.json

@ -6,7 +6,7 @@
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-nodeunit": "~0.2.1",
"grunt-contrib-nodeunit": "~0.2.2",
"grunt-contrib-sass": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-jekyll": "~0.4.0"

Loading…
Cancel
Save