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

Changing the segmented controller's active state to selected.

pull/216/head
connors 11 years ago
parent
12b9e28411
commit
18bffb1b1f
9 changed files with 44 additions and 42 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. 6
      dist/ratchet.css
  2. 2
      dist/ratchet.js
  3. 4
      dist/theme-classic.css
  4. 24
      examples/components/classic/index.html
  5. 22
      examples/components/default/index.html
  6. 14
      index.html
  7. 2
      lib/js/segmented-controllers.js
  8. 8
      lib/sass/segmented-controllers.scss
  9. 4
      lib/sass/theme-classic.scss

6
dist/ratchet.css vendored
Unescape View File

@ -869,18 +869,18 @@ input[type="button"] {
.segmented-controller li:first-child { .segmented-controller li:first-child {
border-left-width: 0; border-left-width: 0;
} }
.segmented-controller li.active { .segmented-controller li.selected {
background-color: #007aff; background-color: #007aff;
transition: background-color .2s linear; transition: background-color .2s linear;
} }
.segmented-controller li.active > a { .segmented-controller li.selected > a {
color: #fff; color: #fff;
} }
.segmented-controller-item { .segmented-controller-item {
display: none; display: none;
} }
.segmented-controller-item.active { .segmented-controller-item.selected {
display: block; display: block;
} }

2
dist/ratchet.js vendored
Unescape View File

@ -538,7 +538,7 @@
var activeBodies; var activeBodies;
var targetBody; var targetBody;
var targetTab; var targetTab;
var className = 'active'; var className = 'selected';
var classSelector = '.' + className; var classSelector = '.' + className;
var targetAnchor = getTarget(e.target); var targetAnchor = getTarget(e.target);

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

@ -101,7 +101,7 @@
.segmented-controller li > a { .segmented-controller li > a {
color: #1eb0e9; color: #1eb0e9;
} }
.segmented-controller li.active { .segmented-controller li.selected {
background-color: #1eb0e9; background-color: #1eb0e9;
} }
@ -114,7 +114,7 @@
.bar-title .segmented-controller li > a { .bar-title .segmented-controller li > a {
color: #fff; color: #fff;
} }
.bar-title .segmented-controller li.active { .bar-title .segmented-controller li.selected {
background-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.4);
} }

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

@ -64,7 +64,7 @@
<header class="bar-nav"> <header class="bar-nav">
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a href="#item1">Thing one</a> <a href="#item1">Thing one</a>
</li> </li>
<li> <li>
@ -74,7 +74,7 @@
</header> </header>
<div> <div>
<div id="item1" class="segmented-controller-item active"><p>section #1</p></div> <div id="item1" class="segmented-controller-item selected"><p>section #1</p></div>
<div id="item2" class="segmented-controller-item"><p>section #2</p></div> <div id="item2" class="segmented-controller-item"><p>section #2</p></div>
</div> </div>
@ -133,7 +133,7 @@
<!-- Title-bar right button --> <!-- Title-bar right button -->
<header class="bar-nav"> <header class="bar-nav">
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li> <li>
@ -154,7 +154,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -166,7 +166,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -184,7 +184,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -279,7 +279,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -291,7 +291,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
<li> <li>
@ -464,21 +464,21 @@
<!-- Segmented controller with 2 tabs --> <!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li class="active"><a href="#">Thing two</a></li> <li class="selected"><a href="#">Thing two</a></li>
</ul> </ul>
<!-- Segmented controller with 3 tabs --> <!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li> <li><a href="#">Thing two</a></li>
<li class="active"><a href="#">Thing three</a></li> <li class="selected"><a href="#">Thing three</a></li>
</ul> </ul>
<!-- Segmented controller with 4 tabs --> <!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li> <li><a href="#">Thing two</a></li>
<li class="active"><a href="#">Thing three</a></li> <li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li> <li><a href="#">Thing four</a></li>
</ul> </ul>
@ -486,7 +486,7 @@
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li> <li><a href="#">Thing two</a></li>
<li class="active"><a href="#">Thing three</a></li> <li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li> <li><a href="#">Thing four</a></li>
<li><a href="#">Thing five</a></li> <li><a href="#">Thing five</a></li>
</ul> </ul>

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

@ -64,7 +64,7 @@
<header class="bar-nav"> <header class="bar-nav">
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a href="#item1">Thing one</a> <a href="#item1">Thing one</a>
</li> </li>
<li> <li>
@ -133,7 +133,7 @@
<!-- Title-bar right button --> <!-- Title-bar right button -->
<header class="bar-nav"> <header class="bar-nav">
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li> <li>
@ -154,7 +154,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -166,7 +166,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -184,7 +184,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -279,7 +279,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
</ul> </ul>
@ -291,7 +291,7 @@
<li> <li>
<a href="#">Thing one</a> <a href="#">Thing one</a>
</li> </li>
<li class="active"> <li class="selected">
<a href="#">Thing two</a> <a href="#">Thing two</a>
</li> </li>
<li> <li>
@ -464,21 +464,21 @@
<!-- Segmented controller with 2 tabs --> <!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li class="active"><a href="#">Thing two</a></li> <li class="selected"><a href="#">Thing two</a></li>
</ul> </ul>
<!-- Segmented controller with 3 tabs --> <!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li> <li><a href="#">Thing two</a></li>
<li class="active"><a href="#">Thing three</a></li> <li class="selected"><a href="#">Thing three</a></li>
</ul> </ul>
<!-- Segmented controller with 4 tabs --> <!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li> <li><a href="#">Thing two</a></li>
<li class="active"><a href="#">Thing three</a></li> <li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li> <li><a href="#">Thing four</a></li>
</ul> </ul>
@ -486,7 +486,7 @@
<ul class="segmented-controller"> <ul class="segmented-controller">
<li><a href="#">Thing one</a></li> <li><a href="#">Thing one</a></li>
<li><a href="#">Thing two</a></li> <li><a href="#">Thing two</a></li>
<li class="active"><a href="#">Thing three</a></li> <li class="selected"><a href="#">Thing three</a></li>
<li><a href="#">Thing four</a></li> <li><a href="#">Thing four</a></li>
<li><a href="#">Thing five</a></li> <li><a href="#">Thing five</a></li>
</ul> </ul>

14
index.html
Unescape View File

@ -144,7 +144,7 @@ layout: default
Left Left
</a> </a>
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a>One</a> <a>One</a>
</li> </li>
<li> <li>
@ -166,7 +166,7 @@ layout: default
Left Left
</a> </a>
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a>One</a> <a>One</a>
</li> </li>
<li> <li>
@ -273,7 +273,7 @@ layout: default
<!-- Segmented controller in standard bar fixed to top --> <!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard"> <nav class="bar-standard">
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a>Thing one</a> <a>Thing one</a>
</li> </li>
<li> <li>
@ -295,7 +295,7 @@ layout: default
<!-- Segmented controller in standard bar fixed to top --> <!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard"> <nav class="bar-standard">
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a>Thing one</a> <a>Thing one</a>
</li> </li>
<li> <li>
@ -650,7 +650,7 @@ layout: default
<div class="component-example"> <div class="component-example">
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a href="#item1mobile">Thing one</a> <a href="#item1mobile">Thing one</a>
</li> </li>
<li> <li>
@ -661,7 +661,7 @@ layout: default
</li> </li>
</ul> </ul>
<ul class="inset table-view"> <ul class="inset table-view">
<li id="item1mobile" class="segmented-controller-item active"> <li id="item1mobile" class="segmented-controller-item selected">
Item 1 Item 1
</li> </li>
<li id="item2mobile" class="segmented-controller-item"> <li id="item2mobile" class="segmented-controller-item">
@ -675,7 +675,7 @@ layout: default
{% highlight html %} {% highlight html %}
<ul class="segmented-controller"> <ul class="segmented-controller">
<li class="active"> <li class="selected">
<a href="#item1mobile">Thing one</a> <a href="#item1mobile">Thing one</a>
</li> </li>
<li> <li>

2
lib/js/segmented-controllers.js
Unescape View File

@ -17,7 +17,7 @@
var activeBodies; var activeBodies;
var targetBody; var targetBody;
var targetTab; var targetTab;
var className = 'active'; var className = 'selected';
var classSelector = '.' + className; var classSelector = '.' + className;
var targetAnchor = getTarget(e.target); var targetAnchor = getTarget(e.target);

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

@ -41,8 +41,10 @@
border-left-width: 0; border-left-width: 0;
} }
// Active segment of controller
&.active {
// Selected segment of controller
&.selected {
background-color: $primary-color; background-color: $primary-color;
transition: background-color .2s linear; transition: background-color .2s linear;
@ -57,7 +59,7 @@
.segmented-controller-item { .segmented-controller-item {
display: none; display: none;
&.active { &.selected {
display: block; display: block;
} }
} }

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

@ -146,7 +146,7 @@ $negative-color: #e71e1e;
} }
// Active segment of controller // Active segment of controller
&.active { &.selected {
background-color: $primary-color; background-color: $primary-color;
} }
} }
@ -166,7 +166,7 @@ $negative-color: #e71e1e;
} }
// Active segment of controller // Active segment of controller
&.active { &.selected {
background-color: rgba(255,255,255,.4); background-color: rgba(255,255,255,.4);
} }
} }

Write Preview
Loading…
Cancel
Save