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

changing bar-title to bar-nav

pull/214/head
connors 11 years ago
parent
d049689b4a
commit
de81993361
26 changed files with 100 additions and 100 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. 70
      dist/ratchet.css
  2. 2
      dist/theme-classic.css
  3. 2
      examples/app-classic/checkout.html
  4. 2
      examples/app-classic/choose-movie.html
  5. 2
      examples/app-classic/choose-theater.html
  6. 2
      examples/app-classic/index.html
  7. 2
      examples/app-classic/settings.html
  8. 2
      examples/app-classic/theaters.html
  9. 2
      examples/app-default/checkout.html
  10. 2
      examples/app-default/choose-movie.html
  11. 2
      examples/app-default/choose-theater.html
  12. 2
      examples/app-default/index.html
  13. 2
      examples/app-default/settings.html
  14. 2
      examples/app-default/theaters.html
  15. 20
      examples/components/classic/index.html
  16. 4
      examples/components/classic/modals.html
  17. 20
      examples/components/default/index.html
  18. 4
      examples/components/default/modals.html
  19. 36
      index.html
  20. 8
      lib/sass/bars.scss
  21. 2
      lib/sass/base.scss
  22. 2
      lib/sass/buttons.scss
  23. 2
      lib/sass/segmented-controllers.scss
  24. 2
      lib/sass/theme-classic.scss
  25. 2
      one.html
  26. 2
      two.html

70
dist/ratchet.css vendored
Unescape View File

@ -304,7 +304,7 @@ strong {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
.bar-title {
.bar-nav {
top: 0;
display: -webkit-box;
display: box;
@ -380,14 +380,14 @@ strong {
color: #007aff;
}
.popover .bar-title {
.popover .bar-nav {
padding-right: 15px;
padding-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 12px 12px 0 0;
box-shadow: none;
}
.popover .bar-title .title + [class*="button"]:last-child {
.popover .bar-nav .title + [class*="button"]:last-child {
right: 15px;
}
@ -658,7 +658,7 @@ select {
font-size: 16px;
}
.bar-title [class*="button"] {
.bar-nav [class*="button"] {
position: relative;
z-index: 10;
padding: 0;
@ -673,32 +673,32 @@ select {
-webkit-box-flex: 0;
box-flex: 0;
}
.bar-title .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right {
.bar-nav .title + [class*="button"]:last-child,
.bar-nav .button + [class*="button"]:last-child,
.bar-nav [class*="button"].pull-right {
position: absolute;
top: 5px;
right: 10px;
}
.bar-title .button:active,
.bar-title .button.active,
.bar-title .button-prev:active,
.bar-title .button-prev.active,
.bar-title .button-next:active,
.bar-title .button-next.active,
.bar-title .button-primary:active,
.bar-title .button-primary.active {
.bar-nav .button:active,
.bar-nav .button.active,
.bar-nav .button-prev:active,
.bar-nav .button-prev.active,
.bar-nav .button-next:active,
.bar-nav .button-next.active,
.bar-nav .button-primary:active,
.bar-nav .button-primary.active {
color: #007aff;
background-color: transparent;
opacity: .3;
}
.bar-title .button-primary {
.bar-nav .button-primary {
font-weight: 500;
}
.bar-title .button-prev:before,
.bar-title .button-prev:after,
.bar-title .button-next:before,
.bar-title .button-next:after {
.bar-nav .button-prev:before,
.bar-nav .button-prev:after,
.bar-nav .button-next:before,
.bar-nav .button-next:after {
position: absolute;
display: block;
width: 15px;
@ -706,37 +706,37 @@ select {
background-color: #007aff;
content: '';
}
.bar-title .button-prev {
.bar-nav .button-prev {
padding-left: 20px;
margin-left: -5px;
}
.bar-title .button-next {
.bar-nav .button-next {
padding-right: 20px;
margin-right: -5px;
}
.bar-title .button-prev:before,
.bar-title .button-prev:after {
.bar-nav .button-prev:before,
.bar-nav .button-prev:after {
left: 0;
}
.bar-title .button-next:before,
.bar-title .button-next:after {
.bar-nav .button-next:before,
.bar-nav .button-next:after {
right: 0;
}
.bar-title .button-prev:before,
.bar-title .button-next:before {
.bar-nav .button-prev:before,
.bar-nav .button-next:before {
top: 16px;
}
.bar-title .button-prev:after,
.bar-title .button-next:after {
.bar-nav .button-prev:after,
.bar-nav .button-next:after {
top: 25px;
}
.bar-title .button-prev:before,
.bar-title .button-next:after {
.bar-nav .button-prev:before,
.bar-nav .button-next:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bar-title .button-prev:after,
.bar-title .button-next:before {
.bar-nav .button-prev:after,
.bar-nav .button-next:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@ -890,7 +890,7 @@ input[type="button"] {
box-flex: 1;
}
.bar-title .segmented-controller {
.bar-nav .segmented-controller {
margin-bottom: 4px;
}

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

@ -19,7 +19,7 @@
background-color: rgba(245, 245, 245, 0.98);
}
.bar-title {
.bar-nav {
top: 20px;
box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
}

2
examples/app-classic/checkout.html
Unescape View File

@ -18,7 +18,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev" href="choose-theater.html" data-transition="slide-out">
Back
</a>

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

@ -19,7 +19,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev" href="theaters.html" data-transition="slide-out">
Back
</a>

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

@ -19,7 +19,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev" href="index.html" data-transition="slide-out">
Back
</a>

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

@ -19,7 +19,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar-standard bar-header-secondary">

2
examples/app-classic/settings.html
Unescape View File

@ -19,7 +19,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Settings</h1>
</header>

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

@ -18,7 +18,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Find a theater</h1>
</header>
<nav class="bar-standard bar-header-secondary">

2
examples/app-default/checkout.html
Unescape View File

@ -17,7 +17,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev" href="choose-theater.html" data-transition="slide-out">
Back
</a>

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

@ -18,7 +18,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev" href="theaters.html" data-transition="slide-out">
Back
</a>

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

@ -18,7 +18,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev" href="index.html" data-transition="slide-out">
Back
</a>

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

@ -18,7 +18,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar-standard bar-header-secondary">

2
examples/app-default/settings.html
Unescape View File

@ -18,7 +18,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Settings</h1>
</header>

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

@ -18,7 +18,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Find a theater</h1>
</header>
<nav class="bar-standard bar-header-secondary">

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

@ -36,7 +36,7 @@
<!-- POPOVER ============================================================ -->
<div id="myPopover" class="popover">
<header class="bar-title">
<header class="bar-nav">
<a class="button" href="#">
Open
</a>
@ -62,7 +62,7 @@
<div class="content">
<header class="bar-title">
<header class="bar-nav">
<ul class="segmented-controller">
<li class="active">
<a href="#item1">Thing one</a>
@ -97,7 +97,7 @@
<!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons -->
<header class="bar-title">
<header class="bar-nav">
<a class="button button-prev" href="#">
Left
</a>
@ -108,12 +108,12 @@
</header>
<!-- Title-bar -->
<header class="bar-title">
<header class="bar-nav">
<h1 class="title"><a href="#myPopover">Title</a></h1>
</header>
<!-- Title-bar left button -->
<header class="bar-title">
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open fatty
</a>
@ -121,7 +121,7 @@
</header>
<!-- Title-bar right button -->
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Title</h1>
<a class="button" href="#">
Filter
@ -131,7 +131,7 @@
<div class="test"></div>
<!-- Title-bar right button -->
<header class="bar-title">
<header class="bar-nav">
<ul class="segmented-controller">
<li class="active">
<a href="#">Thing one</a>
@ -146,7 +146,7 @@
</header>
<!-- Title-bar left button -->
<header class="bar-title" id="newshit">
<header class="bar-nav" id="newshit">
<a class="button-primary open-shelf" href="#">
Open
</a>
@ -161,7 +161,7 @@
</header>
<!-- Title-bar left button -->
<header class="bar-title">
<header class="bar-nav">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
@ -176,7 +176,7 @@
</header>
<!-- Title-bar left button -->
<header class="bar-title">
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open
</a>

4
examples/components/classic/modals.html
Unescape View File

@ -12,7 +12,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Modal slideup</h1>
</header>
@ -21,7 +21,7 @@
</div>
<div id="myModal" class="modal">
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Modal</h1>
<a class="button" href="#myModal">
Close

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

@ -36,7 +36,7 @@
<!-- POPOVER ============================================================ -->
<div id="myPopover" class="popover">
<header class="bar-title">
<header class="bar-nav">
<a class="button" href="#">
Open
</a>
@ -62,7 +62,7 @@
<div class="content">
<header class="bar-title">
<header class="bar-nav">
<ul class="segmented-controller">
<li class="active">
<a href="#item1">Thing one</a>
@ -97,7 +97,7 @@
<!-- TITLEBAR ============================================================ -->
<!-- Title-bar left and right buttons -->
<header class="bar-title">
<header class="bar-nav">
<a class="button button-prev" href="#">
Left
</a>
@ -108,12 +108,12 @@
</header>
<!-- Title-bar -->
<header class="bar-title">
<header class="bar-nav">
<h1 class="title"><a href="#myPopover">Title</a></h1>
</header>
<!-- Title-bar left button -->
<header class="bar-title">
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open fatty
</a>
@ -121,7 +121,7 @@
</header>
<!-- Title-bar right button -->
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Title</h1>
<a class="button" href="#">
Filter
@ -131,7 +131,7 @@
<div class="test"></div>
<!-- Title-bar right button -->
<header class="bar-title">
<header class="bar-nav">
<ul class="segmented-controller">
<li class="active">
<a href="#">Thing one</a>
@ -146,7 +146,7 @@
</header>
<!-- Title-bar left button -->
<header class="bar-title" id="newshit">
<header class="bar-nav" id="newshit">
<a class="button-primary open-shelf" href="#">
Open
</a>
@ -161,7 +161,7 @@
</header>
<!-- Title-bar left button -->
<header class="bar-title">
<header class="bar-nav">
<ul class="segmented-controller">
<li>
<a href="#">Thing one</a>
@ -176,7 +176,7 @@
</header>
<!-- Title-bar left button -->
<header class="bar-title">
<header class="bar-nav">
<a class="button open-shelf" href="#">
Open
</a>

4
examples/components/default/modals.html
Unescape View File

@ -11,7 +11,7 @@
</head>
<body>
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Modal slideup</h1>
</header>
@ -20,7 +20,7 @@
</div>
<div id="myModal" class="modal">
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Modal</h1>
<a class="button" href="#myModal">
Close

36
index.html
Unescape View File

@ -49,7 +49,7 @@ layout: default
<div class="iphone">
<div class="iphone-content">
<div id="iwindow">
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Title</h1>
</header>
</div>
@ -62,13 +62,13 @@ layout: default
<p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Title</h1>
</header>
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/header&gt;
</pre>
@ -80,7 +80,7 @@ layout: default
<p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<header class="bar-nav">
<a class="button">
Left
</a>
@ -92,7 +92,7 @@ layout: default
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
@ -109,7 +109,7 @@ Right
<p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev">
Previous
</a>
@ -121,7 +121,7 @@ Right
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
Previous
&lt;/a&gt;
@ -139,7 +139,7 @@ Next
<p class="component-description">Title bars can also house segmented controllers (with or without accompanying buttons). It all uses flex-box to create perfectly even spacing no matter their labels.</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<header class="bar-nav">
<a class="button">
Left
</a>
@ -161,7 +161,7 @@ Next
</div>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
@ -858,7 +858,7 @@ document
<div class="component-example">
<div id="popover" class="popover">
<header class="bar-title">
<header class="bar-nav">
<a class="button">
Left
</a>
@ -882,7 +882,7 @@ document
<pre class="prettyprint">
&lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt;
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left
&lt;/a&gt;
@ -907,7 +907,7 @@ document
<p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>
<pre class="prettyprint">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;a href=&quot;#myPopover&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/a&gt;
@ -923,7 +923,7 @@ document
<div class="component-example">
<a href="#myModalexample" class="button">Open modal</a>
<div id="myModalexample" class="modal">
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Modal</h1>
<a class="button" href="#myModalexample">
Close
@ -941,7 +941,7 @@ document
&lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
&lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
&lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
Close
@ -1018,7 +1018,7 @@ document
&lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt;
</pre>
<p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-title and .bar-tab according to their presences in two.html.</p>
<p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
<p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
@ -1030,7 +1030,7 @@ document
<p class="component-description">A working version of push:</p>
<div class="component-example component-example-fullbleed">
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">
@ -1046,7 +1046,7 @@ document
</div>
<pre class="prettyprint push-example">
&lt;header class=&quot;bar-title&quot;&gt;
&lt;header class=&quot;bar-nav&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
&lt;/header&gt;
&lt;div class=&quot;content&quot;&gt;
@ -1090,7 +1090,7 @@ window.addEventListener('push', myFunction);
<ol class="steps">
<li class="step">
<h3 class="step-title">1. Fixed bars come first</h3>
<p class="step-description">All fixed bars (<code>.bar-title, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
<p class="step-description">All fixed bars (<code>.bar-nav, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
</li>
<li class="step">
<h3 class="step-title">2. Everything else goes in <code>.content</code></h3>

8
lib/sass/bars.scss
Unescape View File

@ -12,7 +12,7 @@
background-color: $chrome-color;
box-shadow: 0 0 1px rgba(0,0,0,.85);
// Modifier class to dock any bar below .bar-title
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
top: $bar-base-height;
}
@ -34,7 +34,7 @@
// --------------------------------------------------
// Bar docked to top of viewport for showing page title and actions
.bar-title {
.bar-nav {
top: 0;
display: -webkit-box;
display: box;
@ -42,7 +42,7 @@
box-orient: horizontal;
}
// Centered text in the .bar-title
// Centered text in the .bar-nav
.title {
position: absolute;
top: 0;
@ -123,7 +123,7 @@
// Nav bar in popovers
// --------------------------------------------------
.popover .bar-title {
.popover .bar-nav {
padding-right: 15px;
padding-left: 15px;
border-bottom: 1px solid rgba(0,0,0,.15);

2
lib/sass/base.scss
Unescape View File

@ -60,7 +60,7 @@ strong {
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
// Note: For these to work, content must come after both bars in the markup
.bar-title ~ .content {
.bar-nav ~ .content {
padding-top: 44px;
}
.bar-tab ~ .content {

2
lib/sass/buttons.scss
Unescape View File

@ -87,7 +87,7 @@
// Buttons in nav bars
// --------------------------------------------------
.bar-title {
.bar-nav {
// Generic style for all buttons in .bar-title
[class*="button"] {

2
lib/sass/segmented-controllers.scss
Unescape View File

@ -72,7 +72,7 @@
-webkit-box-flex: 1;
box-flex: 1;
}
.bar-title .segmented-controller {
.bar-nav .segmented-controller {
margin-bottom: 4px;
}

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

@ -32,7 +32,7 @@ $negative-color: #e71e1e;
background-color: rgba(245,245,245,.98);
}
}
.bar-title {
.bar-nav {
top: 20px;
box-shadow: 0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)
}

2
one.html
Unescape View File

@ -24,7 +24,7 @@
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
</head>
<body ontouchstart="">
<header class="bar-title">
<header class="bar-nav">
<h1 class="title">Push</h1>
</header>
<div class="content">

2
two.html
Unescape View File

@ -24,7 +24,7 @@
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
</head>
<body ontouchstart="">
<header class="bar-title">
<header class="bar-nav">
<a class="button-prev" href="one.html" data-transition="slide-out">
Back
</a>

Write Preview
Loading…
Cancel
Save