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
Unified 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); 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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save