playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Resolving conflicts. yay

pull/249/head
connors 11 years ago
parent
d9bd8ad148 59536556f6
commit
aa62eaa76c
21 changed files with 1144 additions and 1046 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 93
      dist/ratchet.css
  2. 1
      dist/theme-classic.css
  3. 28
      examples/app-classic/choose-movie.html
  4. 22
      examples/app-classic/choose-theater.html
  5. 28
      examples/app-classic/index.html
  6. 22
      examples/app-classic/theaters.html
  7. 28
      examples/app-default/choose-movie.html
  8. 22
      examples/app-default/choose-theater.html
  9. 28
      examples/app-default/index.html
  10. 22
      examples/app-default/theaters.html
  11. 874
      examples/components/classic/index.html
  12. 874
      examples/components/default/index.html
  13. 10
      lib/sass/badges.scss
  14. 8
      lib/sass/base.scss
  15. 26
      lib/sass/buttons.scss
  16. 18
      lib/sass/mixins.scss
  17. 71
      lib/sass/table-views.scss
  18. 1
      lib/sass/theme-classic.scss
  19. 10
      lib/sass/variables.scss
  20. 2
      one.html
  21. 2
      two.html

93
dist/ratchet.css vendored
Unescape View File

@ -278,6 +278,14 @@ strong {
padding-top: 88px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
[class*="bar-"] {
position: fixed;
right: 0;
@ -398,23 +406,27 @@ strong {
list-style: none;
background-color: #fff;
}
.table-view li {
.table-view .table-view-cell {
position: relative;
padding: 11px 60px 11px 0;
margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
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-position: 15px 100%;
background-repeat: no-repeat;
}
.table-view li:last-child {
border-bottom: 0;
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view li > a:not([class*="button"]) {
.table-view .table-view-cell > a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
margin: -11px -60px -12px -15px;
color: inherit;
}
.table-view li p {
.table-view .table-view-cell > a:not([class*="button"]):active {
background-color: #eee;
}
.table-view .table-view-cell p {
margin: 0;
}
.table-view.inset {
@ -424,28 +436,24 @@ strong {
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
}
.table-view.inset li:first-child {
border-top-width: 0;
}
.table-view.inset li:last-child {
border-bottom-width: 0;
background-image: none;
}
.table-view .table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px;
margin-left: 0;
color: #999;
font-weight: 500;
background-color: #f8f8f8;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
opacity: .4;
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-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.table-view .table-view-divider:first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0;
}
.table-view .table-view-divider:last-child {
@ -453,27 +461,41 @@ strong {
}
.table-view .chevron,
.table-view [class*="button"],
.table-view [class*="count"],
.table-view [class*="badge"],
.table-view .toggle {
position: absolute;
top: 50%;
right: 10px;
}
.table-view .chevron,
.table-view [class*="count"] {
.table-view [class*="badge"] {
margin-top: -10px;
}
.table-view .chevron + [class*="count"] {
.table-view .chevron + [class*="badge"] {
right: 30px;
}
.table-view [class*="button"] {
left: auto;
margin-top: -14px;
margin-top: -12px;
}
.table-view .toggle {
margin-top: -15px;
}
.table-view-indented .table-view-cell {
padding-left: 59px;
background-position-x: 59px;
}
.table-view-indented .table-view-cell > a:not([class*="button"]) {
margin-left: -59px;
}
.table-view-indented .table-view-cell > .pull-left,
.table-view-indented .table-view-cell > a:not([class*="button"]) .pull-left {
position: absolute;
left: 15px;
z-index: 1;
}
.popover .table-view {
width: auto;
max-height: 300px;
@ -605,11 +627,11 @@ select {
[class*="button"] {
position: relative;
display: inline-block;
padding: 5px 10px 7px;
padding: 5px 8px;
margin: 0;
font-size: 14px;
font-size: 12px;
font-weight: 400;
line-height: 1;
line-height: 1.15;
color: #929292;
text-align: center;
vertical-align: top;
@ -656,11 +678,23 @@ select {
background-color: #dd524d;
}
.button-link {
color: #007aff;
border: none;
}
.button-link:active, .button-link.active {
color: #007aff;
opacity: .3;
}
.button-link.button-filled {
background-color: transparent;
}
.button-block {
display: block;
padding: 12px 0;
padding: 15px 0;
margin-bottom: 10px;
font-size: 16px;
font-size: 18px;
}
.bar-nav [class*="button"] {
@ -749,6 +783,7 @@ select {
[class*="bar"] .button-block {
padding: 7px 0;
margin-top: 1px;
font-size: 16px;
}
input[type="submit"],

1
dist/theme-classic.css vendored
Unescape View File

@ -122,5 +122,4 @@
input[type=search] {
color: #555;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 17px;
}

28
examples/app-classic/choose-movie.html
Unescape View File

@ -34,64 +34,64 @@
<div class="content">
<ul class="table-view">
<li class="table-view-divider">Recommended movies</li>
<li>
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-divider">Top movies</li>
<li>
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>

22
examples/app-classic/choose-theater.html
Unescape View File

@ -34,53 +34,53 @@
<div class="content">
<ul class="table-view">
<li class="table-view-divider">Theaters nearby</li>
<li>
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 10</strong>
<p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>

28
examples/app-classic/index.html
Unescape View File

@ -45,86 +45,86 @@
</div>
<ul class="table-view">
<li class="table-view-divider">Recommended movies</li>
<li>
<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>
<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>
<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-divider">Top movies</li>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>

22
examples/app-classic/theaters.html
Unescape View File

@ -30,71 +30,71 @@
<div class="content">
<ul class="table-view">
<li class="table-view-divider">Theaters nearby</li>
<li>
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 10</strong>
<p>15 miles away</p>

28
examples/app-default/choose-movie.html
Unescape View File

@ -56,64 +56,64 @@
<div class="content">
<ul class="table-view">
<li class="table-view-divider">Recommended movies</li>
<li>
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li class="table-view-divider">Top movies</li>
<li>
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>

22
examples/app-default/choose-theater.html
Unescape View File

@ -56,53 +56,53 @@
<div class="content">
<ul class="table-view">
<li class="table-view-divider">Theaters nearby</li>
<li>
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li>
<li>
<li class="table-view-cell">
<strong>AMC 10</strong>
<p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>

28
examples/app-default/index.html
Unescape View File

@ -67,86 +67,86 @@
</div>
<ul class="table-view">
<li class="table-view-divider">Recommended movies</li>
<li>
<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>
<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>
<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-divider">Top movies</li>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>

22
examples/app-default/theaters.html
Unescape View File

@ -53,71 +53,71 @@
<div class="content">
<ul class="table-view">
<li class="table-view-divider">Theaters nearby</li>
<li>
<li class="table-view-cell table-view-divider">Theaters nearby</li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Metreon 16</strong>
<p>1.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 5</strong>
<p>3.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Regal 42</strong>
<p>7.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>Shorline theater</strong>
<p>12.5 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 16</strong>
<p>12.2 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>BW3 16</strong>
<p>13.4 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>MC Hammer 16</strong>
<p>14.1 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 3</strong>
<p>14.3 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 2</strong>
<p>14.7 miles away</p>
<span class="chevron"></span>
</a>
</li>
<li>
<li class="table-view-cell">
<a href="choose-movie.html" data-transition="slide-in">
<strong>AMC 10</strong>
<p>15 miles away</p>

874
examples/components/classic/index.html
Unescape View File

@ -46,483 +46,483 @@
</a>
</header>
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell table-view-divider">With badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-cell table-view-divider">With chevrons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span></li>
</ul>
</div>
<div class="content">
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#item1">Thing one</a>
</li>
<li>
<a href="#item2">Thing two</a>
</li>
</ul>
</header>
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#item1">Thing one</a>
</li>
<li>
<a href="#item2">Thing two</a>
</li>
</ul>
</header>
<div>
<div id="item1" class="segmented-controller-item selected"><p>section #1</p></div>
<div id="item2" class="segmented-controller-item"><p>section #2</p></div>
</div>
<div>
<div id="item1" class="segmented-controller-item selected"><p>section #1</p></div>
<div id="item2" class="segmented-controller-item"><p>section #2</p></div>
</div>
<!-- SLIDER ============================================================ -->
<div class="slider">
<ul>
<li>
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
<!-- SLIDER ============================================================ -->
<div class="slider">
<ul>
<li>
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
</li>
<li>
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
</li>
<li>
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
</li>
</ul>
</div>
<!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons -->
<header class="bar-nav">
<a class="button button-prev" href="#">
Left
</a>
<h1 class="title">Title</h1>
<a class="button button-next" href="#">
Right
</a>
</header>
<!-- Title-bar -->
<header class="bar-nav">
<h1 class="title"><a href="#myPopover">Title</a></h1>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open fatty
</a>
<h1 class="title">Title</h1>
</header>
<!-- Title-bar right button -->
<header class="bar-nav">
<h1 class="title">Title</h1>
<a class="button" href="#">
Filter
</a>
</header>
<div class="test"></div>
<!-- Title-bar right button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#">Thing one</a>
</li>
<li>
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing three</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav" id="newshit">
<a class="button-primary open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- BAR-TAB ============================================================ -->
<!-- Bar-tab 5 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 4 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 3 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- SEARCH BAR ============================================================ -->
<!-- Search bar -->
<div class="bar-standard">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<!-- CONTROLLER BAR ============================================================ -->
<!-- Segmented controller as a bar -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
</nav>
<!-- Segmented controller as a bar w/ 3 options -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing one</a>
</li>
</ul>
</nav>
<!-- BUTTON BAR ============================================================ -->
<!-- Button bar -->
<div class="bar-standard">
<a class="button-block">Block level button</a>
</div>
<!-- Button bar main -->
<div class="bar-standard">
<a class="button-primary button-block">Block level button</a>
</div>
<!-- Button bar positive -->
<div class="bar-standard">
<a class="button-positive button-block">Block level button</a>
</div>
<!-- Button bar negative -->
<div class="bar-standard">
<a class="button-negative button-block">Block level button</a>
</div>
<!-- BUTTONS ============================================================ -->
<!-- Standard buttons -->
<a class="button">Button</a>
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
<!-- Buttons w/ badges -->
<a class="button">Button <span class="badge">1</span></a>
<a class="button-primary">Button <span class="badge">1</span></a>
<a class="button-positive">Button <span class="badge">1</span></a>
<a class="button-negative">Button <span class="badge">1</span></a>
<!-- Buttons at block level -->
<a class="button-block">Block level button</a>
<a class="button-primary button-block">Block level button</a>
<a class="button-positive button-block">Block level button</a>
<a class="button-negative button-block">Block level button</a>
<!-- Buttons at block level w/ badges -->
<a class="button-block">Block level button <span class="badge">1</span></a>
<a class="button-primary button-block">Block level button <span class="badge">1</span></a>
<a class="button-positive button-block">Block level button <span class="badge">1</span></a>
<a class="button-negative button-block">Block level button <span class="badge">1</span></a>
<!-- TOGGLE ============================================================ -->
<div class="toggle">
<div class="toggle-handle"></div>
</div>
<!-- BADGES ============================================================ -->
<span class="badge">1</span>
<span class="badge-primary">2</span>
<span class="badge-positive">3</span>
<span class="badge-negative">4</span>
<span class="badge">5</span>
<!-- LIST ============================================================ -->
<ul class="table-view">
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell table-view-divider">With badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-cell table-view-divider">With chevrons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
<li class="table-view-cell table-view-divider">With buttons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-cell table-view-divider">With a toggle</li>
<li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
<li class="table-view-cell">
<a href="#">
Item2
</a>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
<li class="table-view-cell">
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
</div>
<!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons -->
<header class="bar-nav">
<a class="button button-prev" href="#">
Left
</a>
<h1 class="title">Title</h1>
<a class="button button-next" href="#">
Right
</a>
</header>
<!-- Title-bar -->
<header class="bar-nav">
<h1 class="title"><a href="#myPopover">Title</a></h1>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open fatty
</a>
<h1 class="title">Title</h1>
</header>
<!-- Title-bar right button -->
<header class="bar-nav">
<h1 class="title">Title</h1>
<a class="button" href="#">
Filter
</a>
</header>
<div class="test"></div>
<!-- Title-bar right button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#">Thing one</a>
<ul class="table-view inset">
<li class="table-view-cell table-view-divider">Normal</li>
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell table-view-divider">With badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-cell table-view-divider">With chevrons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-divider">With buttons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-cell table-view-divider">With a toggle</li>
<li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<a href="#">Thing two</a>
<li class="table-view-cell">
Item2
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<a href="#">Thing three</a>
<li class="table-view-cell">
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell table-view-divider">Bottom table-view-divider test</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav" id="newshit">
<a class="button-primary open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<!-- List with <a>'s -->
<ul class="inset table-view">
<li>
<a href="#">Thing one</a>
<a href="#">Item1</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
<li>
<a href="#">Item2</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<!-- SEGMENTED CONTROLLER ============================================================ -->
<!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li><a href="#">Thing one</a></li>
<li class="selected"><a href="#">Thing two</a></li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open
</a>
<!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- BAR-TAB ============================================================ -->
<!-- Bar-tab 5 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 4 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 3 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- SEARCH BAR ============================================================ -->
<!-- Search bar -->
<div class="bar-standard">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<!-- CONTROLLER BAR ============================================================ -->
<!-- Segmented controller as a bar -->
<nav class="bar-standard">
<!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
</ul>
</nav>
<!-- Segmented controller as a bar w/ 3 options -->
<nav class="bar-standard">
<!-- Segmented controller with 5 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing one</a>
</li>
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
<li><a href="#">Thing five</a></li>
</ul>
</nav>
<!-- BUTTON BAR ============================================================ -->
<!-- Button bar -->
<div class="bar-standard">
<a class="button-block">Block level button</a>
</div>
<!-- FORMS ============================================================ -->
<!-- Button bar main -->
<div class="bar-standard">
<a class="button-primary button-block">Block level button</a>
</div>
<!-- Button bar positive -->
<div class="bar-standard">
<a class="button-positive button-block">Block level button</a>
</div>
<!-- Button bar negative -->
<div class="bar-standard">
<a class="button-negative button-block">Block level button</a>
</div>
<!-- Input -->
<form>
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="button-positive button-block button-filled">Choose existing</a>
</form>
<!-- BUTTONS ============================================================ -->
<!-- Standard buttons -->
<a class="button">Button</a>
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
<!-- Buttons w/ badges -->
<a class="button">Button <span class="badge">1</span></a>
<a class="button-primary">Button <span class="badge">1</span></a>
<a class="button-positive">Button <span class="badge">1</span></a>
<a class="button-negative">Button <span class="badge">1</span></a>
<!-- Buttons at block level -->
<a class="button-block">Block level button</a>
<a class="button-primary button-block">Block level button</a>
<a class="button-positive button-block">Block level button</a>
<a class="button-negative button-block">Block level button</a>
<!-- Buttons at block level w/ badges -->
<a class="button-block">Block level button <span class="badge">1</span></a>
<a class="button-primary button-block">Block level button <span class="badge">1</span></a>
<a class="button-positive button-block">Block level button <span class="badge">1</span></a>
<a class="button-negative button-block">Block level button <span class="badge">1</span></a>
<!-- TOGGLE ============================================================ -->
<div class="toggle">
<div class="toggle-handle"></div>
</div>
<!-- Input group -->
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<!-- BADGES ============================================================ -->
<span class="badge">1</span>
<span class="badge-primary">2</span>
<span class="badge-positive">3</span>
<span class="badge-negative">4</span>
<span class="badge">5</span>
<!-- LIST ============================================================ -->
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
<li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li>
<li>
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
<!-- Input group with labels-->
<form class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
</li>
<li>
<a href="#">
Item2
</a>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<ul class="table-view inset">
<li class="table-view-divider">Normal</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li>
<li>
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item2
<div class="toggle">
<div class="toggle-handle"></div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
</li>
<li>
Item3
<div class="toggle">
<div class="toggle-handle"></div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</li>
<li class="table-view-divider">Bottom table-view-divider test</li>
</ul>
<!-- List with <a>'s -->
<ul class="inset table-view">
<li>
<a href="#">Item1</a>
</li>
<li>
<a href="#">Item2</a>
</li>
</ul>
<!-- SEGMENTED CONTROLLER ============================================================ -->
<!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li class="selected"><a href="#">Thing two</a></li>
</ul>
<!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
</ul>
<!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
</ul>
<!-- Segmented controller with 5 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
<li><a href="#">Thing five</a></li>
</ul>
<!-- FORMS ============================================================ -->
<!-- Input -->
<form>
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="button-positive button-block button-filled">Choose existing</a>
</form>
<!-- Input group -->
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<!-- Input group with labels-->
<form class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</form>
</form>
</div>

874
examples/components/default/index.html
Unescape View File

@ -46,483 +46,483 @@
</a>
</header>
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell table-view-divider">With badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-cell table-view-divider">With chevrons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span></li>
</ul>
</div>
<div class="content">
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#item1">Thing one</a>
</li>
<li>
<a href="#item2">Thing two</a>
</li>
</ul>
</header>
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#item1">Thing one</a>
</li>
<li>
<a href="#item2">Thing two</a>
</li>
</ul>
</header>
<div>
<div id="item1" class="segmented-controller-item active"><p>section #1</p></div>
<div id="item2" class="segmented-controller-item"><p>section #2</p></div>
</div>
<div>
<div id="item1" class="segmented-controller-item selected"><p>section #1</p></div>
<div id="item2" class="segmented-controller-item"><p>section #2</p></div>
</div>
<!-- SLIDER ============================================================ -->
<div class="slider">
<ul>
<li>
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
<!-- SLIDER ============================================================ -->
<div class="slider">
<ul>
<li>
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
</li>
<li>
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
</li>
<li>
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
</li>
</ul>
</div>
<!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons -->
<header class="bar-nav">
<a class="button button-prev" href="#">
Left
</a>
<h1 class="title">Title</h1>
<a class="button button-next" href="#">
Right
</a>
</header>
<!-- Title-bar -->
<header class="bar-nav">
<h1 class="title"><a href="#myPopover">Title</a></h1>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open fatty
</a>
<h1 class="title">Title</h1>
</header>
<!-- Title-bar right button -->
<header class="bar-nav">
<h1 class="title">Title</h1>
<a class="button" href="#">
Filter
</a>
</header>
<div class="test"></div>
<!-- Title-bar right button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#">Thing one</a>
</li>
<li>
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing three</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav" id="newshit">
<a class="button-primary open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- BAR-TAB ============================================================ -->
<!-- Bar-tab 5 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 4 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 3 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- SEARCH BAR ============================================================ -->
<!-- Search bar -->
<div class="bar-standard">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<!-- CONTROLLER BAR ============================================================ -->
<!-- Segmented controller as a bar -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
</nav>
<!-- Segmented controller as a bar w/ 3 options -->
<nav class="bar-standard">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing one</a>
</li>
</ul>
</nav>
<!-- BUTTON BAR ============================================================ -->
<!-- Button bar -->
<div class="bar-standard">
<a class="button-block">Block level button</a>
</div>
<!-- Button bar main -->
<div class="bar-standard">
<a class="button-primary button-block">Block level button</a>
</div>
<!-- Button bar positive -->
<div class="bar-standard">
<a class="button-positive button-block">Block level button</a>
</div>
<!-- Button bar negative -->
<div class="bar-standard">
<a class="button-negative button-block">Block level button</a>
</div>
<!-- BUTTONS ============================================================ -->
<!-- Standard buttons -->
<a class="button">Button</a>
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
<!-- Buttons w/ badges -->
<a class="button">Button <span class="badge">1</span></a>
<a class="button-primary">Button <span class="badge">1</span></a>
<a class="button-positive">Button <span class="badge">1</span></a>
<a class="button-negative">Button <span class="badge">1</span></a>
<!-- Buttons at block level -->
<a class="button-block">Block level button</a>
<a class="button-primary button-block">Block level button</a>
<a class="button-positive button-block">Block level button</a>
<a class="button-negative button-block">Block level button</a>
<!-- Buttons at block level w/ badges -->
<a class="button-block">Block level button <span class="badge">1</span></a>
<a class="button-primary button-block">Block level button <span class="badge">1</span></a>
<a class="button-positive button-block">Block level button <span class="badge">1</span></a>
<a class="button-negative button-block">Block level button <span class="badge">1</span></a>
<!-- TOGGLE ============================================================ -->
<div class="toggle">
<div class="toggle-handle"></div>
</div>
<!-- BADGES ============================================================ -->
<span class="badge">1</span>
<span class="badge-primary">2</span>
<span class="badge-positive">3</span>
<span class="badge-negative">4</span>
<span class="badge">5</span>
<!-- LIST ============================================================ -->
<ul class="table-view">
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell table-view-divider">With badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-cell table-view-divider">With chevrons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
<li class="table-view-cell table-view-divider">With buttons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-cell table-view-divider">With a toggle</li>
<li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
<li class="table-view-cell">
<a href="#">
Item2
</a>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
<li class="table-view-cell">
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
</div>
<!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons -->
<header class="bar-nav">
<a class="button button-prev" href="#">
Left
</a>
<h1 class="title">Title</h1>
<a class="button button-next" href="#">
Right
</a>
</header>
<!-- Title-bar -->
<header class="bar-nav">
<h1 class="title"><a href="#myPopover">Title</a></h1>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open fatty
</a>
<h1 class="title">Title</h1>
</header>
<!-- Title-bar right button -->
<header class="bar-nav">
<h1 class="title">Title</h1>
<a class="button" href="#">
Filter
</a>
</header>
<div class="test"></div>
<!-- Title-bar right button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li class="selected">
<a href="#">Thing one</a>
<ul class="table-view inset">
<li class="table-view-cell table-view-divider">Normal</li>
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
<li class="table-view-cell">Item3</li>
<li class="table-view-cell table-view-divider">With badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="badge">1</span></li>
<li class="table-view-cell table-view-divider">With chevrons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span></li>
<li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-divider">With buttons</li>
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
<li class="table-view-cell table-view-divider">With a toggle</li>
<li class="table-view-cell">
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<a href="#">Thing two</a>
<li class="table-view-cell">
Item2
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
<a href="#">Thing three</a>
<li class="table-view-cell">
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell table-view-divider">Bottom table-view-divider test</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav" id="newshit">
<a class="button-primary open-shelf" href="#">
Open
</a>
<ul class="segmented-controller">
<!-- List with <a>'s -->
<ul class="inset table-view">
<li>
<a href="#">Thing one</a>
<a href="#">Item1</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
<li>
<a href="#">Item2</a>
</li>
</ul>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<!-- SEGMENTED CONTROLLER ============================================================ -->
<!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li><a href="#">Thing one</a></li>
<li class="selected"><a href="#">Thing two</a></li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- Title-bar left button -->
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open
</a>
<!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
</ul>
<a class="button" href="#">
Filter
</a>
</header>
<!-- BAR-TAB ============================================================ -->
<!-- Bar-tab 5 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 4 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- Bar-tab 3 -->
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div>
</li>
<li class="tab-item">
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div>
</li>
</ul>
</nav>
<!-- SEARCH BAR ============================================================ -->
<!-- Search bar -->
<div class="bar-standard">
<form>
<input type="search" placeholder="Search">
</form>
</div>
<!-- CONTROLLER BAR ============================================================ -->
<!-- Segmented controller as a bar -->
<nav class="bar-standard">
<!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
</ul>
</nav>
<!-- Segmented controller as a bar w/ 3 options -->
<nav class="bar-standard">
<!-- Segmented controller with 5 tabs -->
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
</li>
<li class="selected">
<a href="#">Thing two</a>
</li>
<li>
<a href="#">Thing one</a>
</li>
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
<li><a href="#">Thing five</a></li>
</ul>
</nav>
<!-- BUTTON BAR ============================================================ -->
<!-- Button bar -->
<div class="bar-standard">
<a class="button-block">Block level button</a>
</div>
<!-- FORMS ============================================================ -->
<!-- Button bar main -->
<div class="bar-standard">
<a class="button-primary button-block">Block level button</a>
</div>
<!-- Button bar positive -->
<div class="bar-standard">
<a class="button-positive button-block">Block level button</a>
</div>
<!-- Button bar negative -->
<div class="bar-standard">
<a class="button-negative button-block">Block level button</a>
</div>
<!-- Input -->
<form>
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="button-positive button-block button-filled">Choose existing</a>
</form>
<!-- BUTTONS ============================================================ -->
<!-- Standard buttons -->
<a class="button">Button</a>
<a class="button-primary">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>
<!-- Buttons w/ badges -->
<a class="button">Button <span class="badge">1</span></a>
<a class="button-primary">Button <span class="badge">1</span></a>
<a class="button-positive">Button <span class="badge">1</span></a>
<a class="button-negative">Button <span class="badge">1</span></a>
<!-- Buttons at block level -->
<a class="button-block">Block level button</a>
<a class="button-primary button-block">Block level button</a>
<a class="button-positive button-block">Block level button</a>
<a class="button-negative button-block">Block level button</a>
<!-- Buttons at block level w/ badges -->
<a class="button-block">Block level button <span class="badge">1</span></a>
<a class="button-primary button-block">Block level button <span class="badge">1</span></a>
<a class="button-positive button-block">Block level button <span class="badge">1</span></a>
<a class="button-negative button-block">Block level button <span class="badge">1</span></a>
<!-- TOGGLE ============================================================ -->
<div class="toggle">
<div class="toggle-handle"></div>
</div>
<!-- Input group -->
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<!-- BADGES ============================================================ -->
<span class="badge">1</span>
<span class="badge-primary">2</span>
<span class="badge-positive">3</span>
<span class="badge-negative">4</span>
<span class="badge">5</span>
<!-- LIST ============================================================ -->
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
<li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li>
<li>
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
<!-- Input group with labels-->
<form class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
</li>
<li>
<a href="#">
Item2
</a>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<ul class="table-view inset">
<li class="table-view-divider">Normal</li>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li class="table-view-divider">With badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
<li>Item2 <span class="badge">1</span></li>
<li>Item3 <span class="badge">1</span></li>
<li class="table-view-divider">With chevrons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li>
<li class="table-view-divider">With chevrons &amp; badges</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item2 <span class="chevron"></span><span class="badge">1</span></li>
<li>Item3 <span class="chevron"></span><span class="badge">1</span></li>
<li class="table-view-divider">With buttons</li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
<li>Item2 <a class="button-primary">Button</a></li>
<li>Item3 <a class="button-positive">Button</a></li>
<li>Item4 <a class="button-negative">Button</a></li>
<li class="table-view-divider">With a toggle</li>
<li>
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
Item2
<div class="toggle">
<div class="toggle-handle"></div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
</li>
<li>
Item3
<div class="toggle">
<div class="toggle-handle"></div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</li>
<li class="table-view-divider">Bottom table-view-divider test</li>
</ul>
<!-- List with <a>'s -->
<ul class="inset table-view">
<li>
<a href="#">Item1</a>
</li>
<li>
<a href="#">Item2</a>
</li>
</ul>
<!-- SEGMENTED CONTROLLER ============================================================ -->
<!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li class="selected"><a href="#">Thing two</a></li>
</ul>
<!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
</ul>
<!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
</ul>
<!-- Segmented controller with 5 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li>
<li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li>
<li><a href="#">Thing five</a></li>
</ul>
<!-- FORMS ============================================================ -->
<!-- Input -->
<form>
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="button-positive button-block button-filled">Choose existing</a>
</form>
<!-- Input group -->
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<!-- Input group with labels-->
<form class="input-group">
<div class="input-row">
<label>Full name</label>
<input type="text" placeholder="Mister Ratchet">
</div>
<div class="input-row">
<label>Email</label>
<input type="email" placeholder="ratchetframework@gmail.com">
</div>
<div class="input-row">
<label>Username</label>
<input type="text" placeholder="goRatchet">
</div>
</form>
</form>
</div>

10
lib/sass/badges.scss
Unescape View File

@ -48,22 +48,24 @@
}
// Counts in buttons
// Badges in buttons
// --------------------------------------------------
// Generic styles for all counts within default buttons
// Generic styles for all badges within default buttons
[class*="button"] [class*="badge"] {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
}
// Styles for filled counts within filled buttons
// Styles for filled badges within filled buttons
.button-filled .badge-filled,
[class*="button"]:active .badge-filled {
background-color: rgba(0,0,0,.2);
}
// Position counts within block level buttons
// Position badges within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
// stays at true center of button
.button-block [class*="badge"] {

8
lib/sass/base.scss
Unescape View File

@ -63,3 +63,11 @@ strong {
.bar-header-secondary ~ .content {
padding-top: 88px;
}
// Utility classes
.pull-left {
float: left;
}
.pull-right {
float: right;
}

26
lib/sass/buttons.scss
Unescape View File

@ -5,11 +5,11 @@
[class*="button"] {
position: relative;
display: inline-block;
padding: 5px 10px 7px;
padding: 5px 8px;
margin: 0;
font-size: $button-font-size;
font-weight: $font-weight-light;
line-height: 1;
line-height: 1.15; // Center button text on the phone.
color: $default-color;
text-align: center;
vertical-align: top;
@ -77,12 +77,27 @@
}
}
// Link button (Buttons that look like links)
.button-link {
color: $primary-color;
border: none;
&:active,
&.active {
color: $primary-color;
opacity: .3;
}
&.button-filled {
background-color: transparent;
}
}
// Block level buttons (full width buttons)
.button-block {
display: block;
padding: 12px 0;
padding: 15px 0;
margin-bottom: 10px;
font-size: 16px;
font-size: 18px;
}
// Buttons in nav bars
@ -194,10 +209,11 @@
// Block buttons in all bars
// --------------------------------------------------
// Add proper padding and replace buttons normal dropshadow with a shine from bar
// Add proper padding
[class*="bar"] .button-block {
padding: 7px 0;
margin-top: 1px;
font-size: 16px; // Scale down font size to fit in bar.
}
// Button overrides

18
lib/sass/mixins.scss
Unescape View File

@ -66,4 +66,20 @@
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
}
// Misc
// --------------------------------------------------
@mixin hairline($type, $color, $width, $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-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-position: $offset 100%, $offset 0%;
}
background-repeat: no-repeat;
}

71
lib/sass/table-views.scss
Unescape View File

@ -9,24 +9,28 @@
background-color: #fff;
// Pad each table view item and add dividers
li {
.table-view-cell {
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, .1);
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.
// Remove the border from the last table view item
&:last-child {
border-bottom: 0;
background-image: none;
}
// If a it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
// If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
> a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
margin: -11px -60px -12px -15px; // Make the entire list item tappable.
color: inherit;
&:active {
background-color: #eee;
}
}
p {
@ -45,12 +49,9 @@
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 6px;
// Remove border from first/last standard list items to avoid double border at top/bottom of table views
li:first-child {
border-top-width: 0;
}
// Remove border from last standard list items to avoid double border at top/bottom of table views
li:last-child {
border-bottom-width: 0;
background-image: none;
}
}
@ -59,22 +60,19 @@
// --------------------------------------------------
.table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item
margin-left: 0;
color: #999;
font-weight: $font-weight;
background-color: #f8f8f8;
border-top: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1);
opacity: .4;
background-color: #fafafa;
@include hairline(double, #c8c7cc, 320px, 0); // Double (top and bottom) grey border with a width of 320px and no offset.
// Rounding first divider on inset lists and remove border on the top
&:first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0;
}
@ -85,33 +83,33 @@
}
// Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
// Right-aligned subcontent in table views (chevrons, buttons, badges and toggles)
// -------------------------------------------------------------------------------
.chevron,
[class*="button"],
[class*="count"],
[class*="badge"],
.toggle {
position: absolute;
top: 50%;
right: 10px;
}
// Position chevrons/counts vertically centered on the right in table view items
// Position chevrons/badges vertically centered on the right in table view items
.chevron,
[class*="count"] {
[class*="badge"] {
margin-top: -10px; // Half height of chevron
}
// Push count over if there's a sibling chevron
.chevron + [class*="count"] {
// Push badge over if there's a sibling chevron
.chevron + [class*="badge"] {
right: 30px;
}
// Position buttons vertically centered on the right in table view items
[class*="button"] {
left: auto;
margin-top: -14px; // Half height of button
margin-top: -12px; // Half height of button
}
.toggle {
@ -119,6 +117,25 @@
}
}
// Indented table views
// --------------------------------------------------
.table-view-indented .table-view-cell {
padding-left: 59px;
background-position-x: 59px; // Make room for your left aligned media/icons.
> a:not([class*="button"]) {
margin-left: -59px;
}
> .pull-left,
> a:not([class*="button"]) .pull-left {
position: absolute;
left: 15px;
z-index: 1;
}
}
// Table views in popovers
// --------------------------------------------------

1
lib/sass/theme-classic.scss
Unescape View File

@ -181,5 +181,4 @@ $negative-color: #e71e1e;
input[type=search] {
color: #555;
background-color: rgba(0,0,0,.1);
border-radius: 17px;
}

10
lib/sass/variables.scss
Unescape View File

@ -36,9 +36,15 @@ $bar-side-spacing: 10px;
// --------------------------------------------------
$button-directional-padding: 20px;
$button-directional-margin: -($bar-side-spacing/2);
$button-font-size: 14px;
$button-font-size: 12px;
// Transitions
// --------------------------------------------------
$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
// Misc
// --------------------------------------------------
// Hairline dividers (.5px tall for retina devices.)
$hairline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"); // Thanks to @madrobby

2
one.html
Unescape View File

@ -27,7 +27,7 @@
</header>
<div class="content">
<ul class="table-view">
<li>
<li class="table-view-cell">
<a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
Load new page with push
</a>

2
two.html
Unescape View File

@ -27,7 +27,7 @@
</header>
<div class="content">
<ul class="table-view">
<li>Tap or click <a href="one.html" data-transition="slide-out">here</a> to go back. You can also try your browser's back button.</li>
<li class="table-view-cell">Tap or click <a href="one.html" data-transition="slide-out">here</a> to go back. You can also try your browser's back button.</li>
</ul>
</div>
</body>

Write Preview
Loading…
Cancel
Save