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
Split 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 {
border-left-width: 0;
}
.segmented-controller li.active {
.segmented-controller li.selected {
background-color: #007aff;
transition: background-color .2s linear;
}
.segmented-controller li.active > a {
.segmented-controller li.selected > a {
color: #fff;
}
.segmented-controller-item {
display: none;
}
.segmented-controller-item.active {
.segmented-controller-item.selected {
display: block;
}

2
dist/ratchet.js vendored
Unescape View File

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

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

@ -101,7 +101,7 @@
.segmented-controller li > a {
color: #1eb0e9;
}
.segmented-controller li.active {
.segmented-controller li.selected {
background-color: #1eb0e9;
}
@ -114,7 +114,7 @@
.bar-title .segmented-controller li > a {
color: #fff;
}
.bar-title .segmented-controller li.active {
.bar-title .segmented-controller li.selected {
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">
<ul class="segmented-controller">
<li class="active">
<li class="selected">
<a href="#item1">Thing one</a>
</li>
<li>
@ -74,7 +74,7 @@
</header>
<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>
@ -133,7 +133,7 @@
<!-- Title-bar right button -->
<header class="bar-nav">
<ul class="segmented-controller">
<li class="active">
<li class="selected">
<a href="#">Thing one</a>
</li>
<li>
@ -154,7 +154,7 @@
<li>
<a href="#">Thing one</a>
</li>
<li class="active">
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
@ -166,7 +166,7 @@
<li>
<a href="#">Thing one</a>
</li>
<li class="active">
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
@ -184,7 +184,7 @@
<li>
<a href="#">Thing one</a>
</li>
<li class="active">
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
@ -279,7 +279,7 @@
<li>
<a href="#">Thing one</a>
</li>
<li class="active">
<li class="selected">
<a href="#">Thing two</a>
</li>
</ul>
@ -291,7 +291,7 @@
<li>
<a href="#">Thing one</a>
</li>
<li class="active">
<li class="selected">
<a href="#">Thing two</a>
</li>
<li>
@ -464,21 +464,21 @@
<!-- Segmented controller with 2 tabs -->
<ul class="segmented-controller">
<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>
<!-- Segmented controller with 3 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</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>
<!-- Segmented controller with 4 tabs -->
<ul class="segmented-controller">
<li><a href="#">Thing one</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>
</ul>
@ -486,7 +486,7 @@
<ul class="segmented-controller">
<li><a href="#">Thing one</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 five</a></li>
</ul>

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

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

14
index.html
Unescape View File

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save