Browse Source

changing bar-title to bar-nav

pull/214/head
connors 11 years ago
parent
commit
de81993361
  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

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

2
dist/theme-classic.css vendored

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

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

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

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

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

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

2
examples/app-classic/index.html

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

2
examples/app-classic/settings.html

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

2
examples/app-classic/theaters.html

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

2
examples/app-default/checkout.html

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

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

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

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

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

2
examples/app-default/index.html

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

2
examples/app-default/settings.html

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

2
examples/app-default/theaters.html

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

20
examples/components/classic/index.html

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

4
examples/components/classic/modals.html

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

20
examples/components/default/index.html

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

4
examples/components/default/modals.html

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

36
index.html

@ -49,7 +49,7 @@ layout: default
<div class="iphone"> <div class="iphone">
<div class="iphone-content"> <div class="iphone-content">
<div id="iwindow"> <div id="iwindow">
<header class="bar-title"> <header class="bar-nav">
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
</div> </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> <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"> <div class="component-example component-example-fullbleed">
<header class="bar-title"> <header class="bar-nav">
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
</div> </div>
<pre class="prettyprint"> <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;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/header&gt; &lt;/header&gt;
</pre> </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> <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"> <div class="component-example component-example-fullbleed">
<header class="bar-title"> <header class="bar-nav">
<a class="button"> <a class="button">
Left Left
</a> </a>
@ -92,7 +92,7 @@ layout: default
</div> </div>
<pre class="prettyprint"> <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; &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left Left
&lt;/a&gt; &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> <p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-title"> <header class="bar-nav">
<a class="button-prev"> <a class="button-prev">
Previous Previous
</a> </a>
@ -121,7 +121,7 @@ Right
</div> </div>
<pre class="prettyprint"> <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; &lt;a class=&quot;button-prev&quot; href=&quot;#&quot;&gt;
Previous Previous
&lt;/a&gt; &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> <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"> <div class="component-example component-example-fullbleed">
<header class="bar-title"> <header class="bar-nav">
<a class="button"> <a class="button">
Left Left
</a> </a>
@ -161,7 +161,7 @@ Next
</div> </div>
<pre class="prettyprint"> <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; &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left Left
&lt;/a&gt; &lt;/a&gt;
@ -858,7 +858,7 @@ document
<div class="component-example"> <div class="component-example">
<div id="popover" class="popover"> <div id="popover" class="popover">
<header class="bar-title"> <header class="bar-nav">
<a class="button"> <a class="button">
Left Left
</a> </a>
@ -882,7 +882,7 @@ document
<pre class="prettyprint"> <pre class="prettyprint">
&lt;div id=&quot;myPopover&quot; class=&quot;popover&quot;&gt; &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; &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
Left Left
&lt;/a&gt; &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> <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"> <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;a href=&quot;#myPopover&quot;&gt;
&lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt; &lt;h1 class=&quot;title&quot;&gt;Title&lt;/h1&gt;
&lt;/a&gt; &lt;/a&gt;
@ -923,7 +923,7 @@ document
<div class="component-example"> <div class="component-example">
<a href="#myModalexample" class="button">Open modal</a> <a href="#myModalexample" class="button">Open modal</a>
<div id="myModalexample" class="modal"> <div id="myModalexample" class="modal">
<header class="bar-title"> <header class="bar-nav">
<h1 class="title">Modal</h1> <h1 class="title">Modal</h1>
<a class="button" href="#myModalexample"> <a class="button" href="#myModalexample">
Close Close
@ -941,7 +941,7 @@ document
&lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt; &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;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;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
&lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt; &lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
Close Close
@ -1018,7 +1018,7 @@ document
&lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt; &lt;a href=&quot;two.html&quot;&gt;Two&lt;a&gt;
</pre> </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> <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> <p class="component-description">A working version of push:</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-title"> <header class="bar-nav">
<h1 class="title">Push</h1> <h1 class="title">Push</h1>
</header> </header>
<div class="content"> <div class="content">
@ -1046,7 +1046,7 @@ document
</div> </div>
<pre class="prettyprint push-example"> <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;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
&lt;/header&gt; &lt;/header&gt;
&lt;div class=&quot;content&quot;&gt; &lt;div class=&quot;content&quot;&gt;
@ -1090,7 +1090,7 @@ window.addEventListener('push', myFunction);
<ol class="steps"> <ol class="steps">
<li class="step"> <li class="step">
<h3 class="step-title">1. Fixed bars come first</h3> <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>
<li class="step"> <li class="step">
<h3 class="step-title">2. Everything else goes in <code>.content</code></h3> <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>

8
lib/sass/bars.scss

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

2
lib/sass/base.scss

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

2
lib/sass/buttons.scss

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

2
lib/sass/segmented-controllers.scss

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

2
lib/sass/theme-classic.scss

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

2
one.html

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

2
two.html

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

Loading…
Cancel
Save