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

do away with attribute selector

pull/249/head
connors 11 years ago
parent
e34b9d74c2
commit
e87469d3b6
16 changed files with 70 additions and 70 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. 44
      components.html
  2. 10
      dist/android-theme.css
  3. 8
      dist/ios-theme.css
  4. 6
      dist/ratchet-theme.css
  5. 16
      dist/ratchet.css
  6. 22
      docs-assets/css/docs.css
  7. 6
      examples/app-default/choose-theater.html
  8. 6
      examples/app-default/index.html
  9. 2
      lib/sass/bars.scss
  10. 2
      lib/sass/buttons.scss
  11. 4
      lib/sass/docs.scss
  12. 2
      lib/sass/forms.scss
  13. 2
      lib/sass/segmented-controllers.scss
  14. 4
      lib/sass/theme-android.scss
  15. 4
      lib/sass/theme-classic.scss
  16. 2
      lib/sass/theme-ios.scss

44
components.html
Unescape View File

@ -43,7 +43,7 @@ base_url: "../"
<div class="device"> <div class="device">
<div class="device-content"> <div class="device-content">
<div id="iwindow"> <div id="iwindow">
<header class="bar-nav"> <header class="bar bar-nav">
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
</div> </div>
@ -58,13 +58,13 @@ base_url: "../"
<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-nav"> <header class="bar bar-nav">
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar bar-nav">
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -76,7 +76,7 @@ base_url: "../"
<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-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
@ -88,7 +88,7 @@ base_url: "../"
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
@ -104,7 +104,7 @@ base_url: "../"
<h3 class="component-title">Title bar with link buttons</h3> <h3 class="component-title">Title bar with link buttons</h3>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn btn-link pull-left"> <a class="btn btn-link pull-left">
Previous Previous
</a> </a>
@ -116,7 +116,7 @@ base_url: "../"
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn btn-link pull-left"> <a class="btn btn-link pull-left">
Previous Previous
</a> </a>
@ -134,7 +134,7 @@ base_url: "../"
<p class="component-description">Title bars can also house segmented controllers. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p> <p class="component-description">Title bars can also house segmented controllers. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
@ -156,7 +156,7 @@ base_url: "../"
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
@ -184,7 +184,7 @@ base_url: "../"
<p class="component-description">Use Ratchicons in the tab bar to represent different sections of your app.</p> <p class="component-description">Use Ratchicons in the tab bar to represent different sections of your app.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<nav class="bar-tab"> <nav class="bar bar-tab">
<a class="tab-item active" href="#"> <a class="tab-item active" href="#">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Label</div> <div class="tab-label">Label</div>
@ -209,7 +209,7 @@ base_url: "../"
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="bar-tab"> <nav class="bar bar-tab">
<a class="tab-item active" href="#"> <a class="tab-item active" href="#">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Label</div> <div class="tab-label">Label</div>
@ -242,7 +242,7 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<!-- Segmented controller in standard bar fixed to top --> <!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard"> <nav class="bar bar-standard">
<ul class="segmented-control"> <ul class="segmented-control">
<li class="active"> <li class="active">
<a>Thing one</a> <a>Thing one</a>
@ -257,14 +257,14 @@ base_url: "../"
</nav> </nav>
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
<div class="bar-standard bar-header-secondary"> <div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a> <a class="btn btn-block">Block level button</a>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<!-- Segmented controller in standard bar fixed to top --> <!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard"> <nav class="bar bar-standard">
<ul class="segmented-control"> <ul class="segmented-control">
<li class="active"> <li class="active">
<a>Thing one</a> <a>Thing one</a>
@ -279,7 +279,7 @@ base_url: "../"
</nav> </nav>
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
<div class="bar-standard bar-header-secondary"> <div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a> <a class="btn btn-block">Block level button</a>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -822,7 +822,7 @@ document
<div class="component-example"> <div class="component-example">
<div id="popover" class="popover"> <div id="popover" class="popover">
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn btn-link pull-left"> <a class="btn btn-link pull-left">
Left Left
</a> </a>
@ -846,7 +846,7 @@ document
{% highlight html %} {% highlight html %}
<div id="popover" class="popover"> <div id="popover" class="popover">
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn btn-link pull-left"> <a class="btn btn-link pull-left">
Left Left
</a> </a>
@ -871,7 +871,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>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar bar-nav">
<a href="#myPopover"> <a href="#myPopover">
<h1 class="title">Popover title</h3> <h1 class="title">Popover title</h3>
</a> </a>
@ -887,7 +887,7 @@ document
<div class="component-example"> <div class="component-example">
<a href="#myModalexample" class="btn">Open modal</a> <a href="#myModalexample" class="btn">Open modal</a>
<div id="myModalexample" class="modal"> <div id="myModalexample" class="modal">
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn pull-right" href="#myModalexample"> <a class="btn pull-right" href="#myModalexample">
Close Close
</a> </a>
@ -905,7 +905,7 @@ document
{% highlight html %} {% highlight html %}
<a href="#myModalexample" class="btn">Open modal</a> <a href="#myModalexample" class="btn">Open modal</a>
<div id="myModalexample" class="modal"> <div id="myModalexample" class="modal">
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn pull-right" href="#myModalexample"> <a class="btn pull-right" href="#myModalexample">
Close Close
</a> </a>
@ -996,7 +996,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-nav"> <header class="bar bar-nav">
<h1 class="title">Push</h1> <h1 class="title">Push</h1>
</header> </header>
<div class="content"> <div class="content">
@ -1014,7 +1014,7 @@ document
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar bar-nav">
<h1 class="title">Push</h1> <h1 class="title">Push</h1>
</header> </header>
<div class="content"> <div class="content">

10
dist/android-theme.css vendored
Unescape View File

@ -19,12 +19,12 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 );
} }
[class*="bar-"] { .bar {
height: 50px; height: 50px;
background-color: #111111; background-color: #111111;
border-bottom: 1px solid #565656; border-bottom: 1px solid #565656;
} }
[class*="bar-"].bar-header-secondary { .bar.bar-header-secondary {
top: 51px; top: 51px;
} }
@ -133,16 +133,16 @@ textarea,
background-color: white; background-color: white;
} }
[class*="bar-"] .btn { .bar .btn {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
[class*="bar-"] .btn-link { .bar .btn-link {
padding: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
line-height: 50px; line-height: 50px;
} }
[class*="bar-"] .btn-link:active, [class*="bar-"] .btn-link.active { .bar .btn-link:active, .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
} }

8
dist/ios-theme.css vendored
Unescape View File

@ -12,19 +12,19 @@
background-color: #efeff4; background-color: #efeff4;
} }
[class*="bar-"] { .bar {
border-bottom: 0; border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, 0.98);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
} }
[class*="bar-"].bar-header-secondary { .bar.bar-header-secondary {
top: 44px; top: 44px;
} }
[class*="bar-"].bar-footer-secondary { .bar.bar-footer-secondary {
bottom: 44px; bottom: 44px;
} }
[class*="bar-"].bar-footer-secondary-tab { .bar.bar-footer-secondary-tab {
bottom: 50px; bottom: 50px;
} }

6
dist/ratchet-theme.css vendored
Unescape View File

@ -12,10 +12,10 @@
padding-top: 108px; padding-top: 108px;
} }
[class*="bar-"] { .bar {
background-color: rgba(30, 176, 233, 0.98); background-color: rgba(30, 176, 233, 0.98);
} }
[class*="bar-"].bar-standard, [class*="bar-"].bar-footer-secondary { .bar.bar-standard, .bar.bar-footer-secondary {
background-color: rgba(245, 245, 245, 0.98); background-color: rgba(245, 245, 245, 0.98);
} }
@ -25,7 +25,7 @@
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);
} }
[class*="bar-"].bar-header-secondary { .bar.bar-header-secondary {
top: 64px; top: 64px;
} }

16
dist/ratchet.css vendored
Unescape View File

@ -282,7 +282,7 @@ strong {
float: right; float: right;
} }
[class*="bar-"] { .bar {
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
@ -293,16 +293,16 @@ strong {
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
background-color: white; background-color: white;
} }
[class*="bar-"].bar-header-secondary { .bar.bar-header-secondary {
top: 44px; top: 44px;
} }
[class*="bar-"].bar-footer { .bar.bar-footer {
bottom: 0; bottom: 0;
} }
[class*="bar-"].bar-footer-secondary { .bar.bar-footer-secondary {
bottom: 44px; bottom: 44px;
} }
[class*="bar-"].bar-footer-secondary-tab { .bar.bar-footer-secondary-tab {
bottom: 50px; bottom: 50px;
} }
@ -602,7 +602,7 @@ select {
border: 0; border: 0;
} }
[class*="bar-"] input[type=search] { .bar input[type=search] {
height: 29px; height: 29px;
margin: 6px 0; margin: 6px 0;
} }
@ -727,7 +727,7 @@ input[type="button"] {
color: #3071a9; color: #3071a9;
} }
[class*="bar"] .btn-block { .bar .btn-block {
padding: 7px 0; padding: 7px 0;
margin-top: 4px; margin-top: 4px;
margin-bottom: 5px; margin-bottom: 5px;
@ -936,7 +936,7 @@ input[type="button"] {
display: block; display: block;
} }
[class*="bar-"] .segmented-control { .bar .segmented-control {
top: 8px; top: 8px;
margin: 0 auto; margin: 0 auto;
} }

22
docs-assets/css/docs.css
Unescape View File

@ -344,7 +344,7 @@ body {
} }
.component-example, .component-example,
.component-example [class*="bar"], .component-example .bar,
.component-example .content { .component-example .content {
position: relative; position: relative;
} }
@ -560,7 +560,7 @@ hr {
} }
.device .content, .device .content,
.device [class*="bar"], .device .bar,
.device .modal { .device .modal {
position: absolute; position: absolute;
} }
@ -806,19 +806,19 @@ hr {
.platform-ios .content { .platform-ios .content {
background-color: #efeff4; background-color: #efeff4;
} }
.platform-ios [class*="bar-"] { .platform-ios .bar {
border-bottom: 0; border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, 0.98);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
} }
.platform-ios [class*="bar-"].bar-header-secondary { .platform-ios .bar.bar-header-secondary {
top: 44px; top: 44px;
} }
.platform-ios [class*="bar-"].bar-footer-secondary { .platform-ios .bar.bar-footer-secondary {
bottom: 44px; bottom: 44px;
} }
.platform-ios [class*="bar-"].bar-footer-secondary-tab { .platform-ios .bar.bar-footer-secondary-tab {
bottom: 50px; bottom: 50px;
} }
.platform-ios .bar-tab { .platform-ios .bar-tab {
@ -1180,12 +1180,12 @@ hr {
background: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%); background: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 );
} }
.platform-android [class*="bar-"] { .platform-android .bar {
height: 50px; height: 50px;
background-color: #111111; background-color: #111111;
border-bottom: 1px solid #565656; border-bottom: 1px solid #565656;
} }
.platform-android [class*="bar-"].bar-header-secondary { .platform-android .bar.bar-header-secondary {
top: 51px; top: 51px;
} }
.platform-android .bar-tab { .platform-android .bar-tab {
@ -1278,16 +1278,16 @@ hr {
color: #fff; color: #fff;
background-color: white; background-color: white;
} }
.platform-android [class*="bar-"] .btn { .platform-android .bar .btn {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.platform-android [class*="bar-"] .btn-link { .platform-android .bar .btn-link {
padding: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
line-height: 50px; line-height: 50px;
} }
.platform-android [class*="bar-"] .btn-link:active, .platform-android [class*="bar-"] .btn-link.active { .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
} }
.platform-android .btn-primary { .platform-android .btn-primary {

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

@ -18,20 +18,20 @@
</head> </head>
<body> <body>
<header class="bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left" href="index.html" data-transition="slide-out"> <a class="btn pull-left" href="index.html" data-transition="slide-out">
Back Back
</a> </a>
<h1 class="title">Argo</h1> <h1 class="title">Argo</h1>
</header> </header>
<nav class="bar-standard bar-header-secondary"> <nav class="bar bar-standard bar-header-secondary">
<form> <form>
<input type="search" placeholder="Search theaters"> <input type="search" placeholder="Search theaters">
</form> </form>
</nav> </nav>
<nav class="bar-tab"> <nav class="bar bar-tab">
<a class="tab-item selected" href="index.html" data-transition="fade"> <a class="tab-item selected" href="index.html" data-transition="fade">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Movies</div> <div class="tab-label">Movies</div>

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

@ -17,17 +17,17 @@
</head> </head>
<body> <body>
<header class="bar-nav"> <header class="bar 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 bar-standard bar-header-secondary">
<form> <form>
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
</form> </form>
</nav> </nav>
<nav class="bar-tab"> <nav class="bar bar-tab">
<a class="tab-item selected" href="index.html" data-transition="fade"> <a class="tab-item selected" href="index.html" data-transition="fade">
<span class="icon icon-share"></span> <span class="icon icon-share"></span>
<div class="tab-label">Movies</div> <div class="tab-label">Movies</div>

2
lib/sass/bars.scss
Unescape View File

@ -2,7 +2,7 @@
// Bars // Bars
// -------------------------------------------------- // --------------------------------------------------
[class*="bar-"] { .bar {
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;

2
lib/sass/buttons.scss
Unescape View File

@ -168,7 +168,7 @@ input[type="button"] {
// -------------------------------------------------- // --------------------------------------------------
// Add proper padding // Add proper padding
[class*="bar"] .btn-block { .bar .btn-block {
padding: 7px 0; padding: 7px 0;
margin-top: 4px; margin-top: 4px;
margin-bottom: 5px; margin-bottom: 5px;

4
lib/sass/docs.scss
Unescape View File

@ -364,7 +364,7 @@ body {
line-height: $line-height-default; line-height: $line-height-default;
} }
.component-example, .component-example,
.component-example [class*="bar"], .component-example .bar,
.component-example .content { .component-example .content {
position: relative; position: relative;
} }
@ -605,7 +605,7 @@ hr {
background-color: #fff; background-color: #fff;
} }
.device .content, .device .content,
.device [class*="bar"], .device .bar,
.device .modal { .device .modal {
position: absolute; position: absolute;
} }

2
lib/sass/forms.scss
Unescape View File

@ -133,7 +133,7 @@ select {
// -------------------------------------------------- // --------------------------------------------------
// Position/size search bar within the bar // Position/size search bar within the bar
[class*="bar-"] input[type=search] { .bar input[type=search] {
height: 29px; height: 29px;
margin: 6px 0; margin: 6px 0;
} }

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

@ -134,7 +134,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Remove standard segmented bottom margin // Remove standard segmented bottom margin
[class*="bar-"] .segmented-control { .bar .segmented-control {
top: 8px; top: 8px;
margin: 0 auto; margin: 0 auto;
} }

4
lib/sass/theme-android.scss
Unescape View File

@ -46,7 +46,7 @@ $border-radius: 0;
// Bars // Bars
// -------------------------------------------------- // --------------------------------------------------
[class*="bar-"] { .bar {
height: $bar-base-height; height: $bar-base-height;
background-color: $chrome-color; background-color: $chrome-color;
border-bottom: $border-default; border-bottom: $border-default;
@ -188,7 +188,7 @@ textarea,
background-color: $default-color; background-color: $default-color;
} }
} }
[class*="bar-"] { .bar {
.btn { .btn {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;

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

@ -26,7 +26,7 @@ $negative-color: #e71e1e;
// Bars // Bars
// -------------------------------------------------- // --------------------------------------------------
[class*="bar-"] { .bar {
background-color: $chrome-color; background-color: $chrome-color;
&.bar-standard, &.bar-standard,
@ -38,7 +38,7 @@ $negative-color: #e71e1e;
top: 20px; top: 20px;
@include box-shadow(0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)); @include box-shadow(0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85));
} }
[class*="bar-"].bar-header-secondary { .bar.bar-header-secondary {
top: 64px; top: 64px;
} }
.title { .title {

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

@ -39,7 +39,7 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
// Bars // Bars
// -------------------------------------------------- // --------------------------------------------------
[class*="bar-"] { .bar {
border-bottom: 0; border-bottom: 0;
background-color: $chrome-color; background-color: $chrome-color;
@include box-shadow(0 0 1px rgba(0,0,0,.85)); @include box-shadow(0 0 1px rgba(0,0,0,.85));

Write Preview
Loading…
Cancel
Save