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

use .active instead of .selected

pull/249/head
connors 11 years ago
parent
bac44bff21
commit
e34b9d74c2
14 changed files with 60 additions and 64 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. 22
      components.html
  2. 2
      dist/android-theme.css
  3. 16
      dist/ios-theme.css
  4. 4
      dist/ratchet-theme.css
  5. 16
      dist/ratchet.css
  6. 2
      dist/ratchet.js
  7. 22
      docs-assets/css/docs.css
  8. 6
      docs-assets/js/docs.js
  9. 2
      lib/js/segmented-controllers.js
  10. 2
      lib/sass/docs.scss
  11. 14
      lib/sass/segmented-controllers.scss
  12. 4
      lib/sass/theme-android.scss
  13. 4
      lib/sass/theme-classic.scss
  14. 8
      lib/sass/theme-ios.scss

22
components.html
Unescape View File

@ -22,7 +22,7 @@ base_url: "../"
<div class="platform-toggle"> <div class="platform-toggle">
<ul class="segmented-control"> <ul class="segmented-control">
<li class="platform-switch selected" data-platform=""> <li class="platform-switch active" data-platform="">
<a>Base</a> <a>Base</a>
</li> </li>
<li class="platform-switch" data-platform="platform-ios"> <li class="platform-switch" data-platform="platform-ios">
@ -142,7 +142,7 @@ base_url: "../"
Right Right
</a> </a>
<ul class="segmented-control"> <ul class="segmented-control">
<li class="selected"> <li class="active">
<a>One</a> <a>One</a>
</li> </li>
<li> <li>
@ -164,7 +164,7 @@ base_url: "../"
Right Right
</a> </a>
<ul class="segmented-control"> <ul class="segmented-control">
<li class="selected"> <li class="active">
<a>One</a> <a>One</a>
</li> </li>
<li> <li>
@ -185,7 +185,7 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<nav class="bar-tab"> <nav class="bar-tab">
<a class="tab-item selected" 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>
</a> </a>
@ -210,7 +210,7 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<nav class="bar-tab"> <nav class="bar-tab">
<a class="tab-item selected" 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>
</a> </a>
@ -244,7 +244,7 @@ base_url: "../"
<!-- 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-control"> <ul class="segmented-control">
<li class="selected"> <li class="active">
<a>Thing one</a> <a>Thing one</a>
</li> </li>
<li> <li>
@ -266,7 +266,7 @@ base_url: "../"
<!-- 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-control"> <ul class="segmented-control">
<li class="selected"> <li class="active">
<a>Thing one</a> <a>Thing one</a>
</li> </li>
<li> <li>
@ -627,7 +627,7 @@ base_url: "../"
<div class="component-example"> <div class="component-example">
<ul class="segmented-control"> <ul class="segmented-control">
<li class="selected"> <li class="active">
<a href="#item1mobile">Thing one</a> <a href="#item1mobile">Thing one</a>
</li> </li>
<li> <li>
@ -638,7 +638,7 @@ base_url: "../"
</li> </li>
</ul> </ul>
<div class="card"> <div class="card">
<p id="item1mobile" class="segmented-control-item selected">Item 1</p> <p id="item1mobile" class="segmented-control-item active">Item 1</p>
<p id="item2mobile" class="segmented-control-item">Item 2</p> <p id="item2mobile" class="segmented-control-item">Item 2</p>
<p id="item3mobile" class="segmented-control-item">Item 3</p> <p id="item3mobile" class="segmented-control-item">Item 3</p>
</div> </div>
@ -646,7 +646,7 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<ul class="segmented-control"> <ul class="segmented-control">
<li class="selected"> <li class="active">
<a href="#item1mobile">Thing one</a> <a href="#item1mobile">Thing one</a>
</li> </li>
<li> <li>
@ -657,7 +657,7 @@ base_url: "../"
</li> </li>
</ul> </ul>
<div class="card"> <div class="card">
<p id="item1mobile" class="segmented-control-item selected">Item 1</p> <p id="item1mobile" class="segmented-control-item active">Item 1</p>
<p id="item2mobile" class="segmented-control-item">Item 2</p> <p id="item2mobile" class="segmented-control-item">Item 2</p>
<p id="item3mobile" class="segmented-control-item">Item 3</p> <p id="item3mobile" class="segmented-control-item">Item 3</p>
</div> </div>

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

@ -251,7 +251,7 @@ textarea,
padding-bottom: 10px; padding-bottom: 10px;
color: #33b5e5; color: #33b5e5;
} }
.segmented-control li.selected { .segmented-control li.active {
background-color: #33b5e5; background-color: #33b5e5;
} }

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

@ -257,10 +257,10 @@ textarea,
.segmented-control li:active { .segmented-control li:active {
background-color: #ebebeb; background-color: #ebebeb;
} }
.segmented-control li.selected { .segmented-control li.active {
background-color: #929292; background-color: #929292;
} }
.segmented-control li.selected > a { .segmented-control li.active > a {
color: #fff; color: #fff;
} }
@ -276,10 +276,10 @@ textarea,
.segmented-control-primary li:active { .segmented-control-primary li:active {
background-color: #b3d7ff; background-color: #b3d7ff;
} }
.segmented-control-primary li.selected { .segmented-control-primary li.active {
background-color: #007aff; background-color: #007aff;
} }
.segmented-control-primary li.selected > a { .segmented-control-primary li.active > a {
color: #fff; color: #fff;
} }
@ -295,10 +295,10 @@ textarea,
.segmented-control-positive li:active { .segmented-control-positive li:active {
background-color: #dff8e3; background-color: #dff8e3;
} }
.segmented-control-positive li.selected { .segmented-control-positive li.active {
background-color: #4cd964; background-color: #4cd964;
} }
.segmented-control-positive li.selected > a { .segmented-control-positive li.active > a {
color: #fff; color: #fff;
} }
@ -314,10 +314,10 @@ textarea,
.segmented-control-negative li:active { .segmented-control-negative li:active {
background-color: #fae4e3; background-color: #fae4e3;
} }
.segmented-control-negative li.selected { .segmented-control-negative li.active {
background-color: #dd524d; background-color: #dd524d;
} }
.segmented-control-negative li.selected > a { .segmented-control-negative li.active > a {
color: #fff; color: #fff;
} }

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

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

16
dist/ratchet.css vendored
Unescape View File

@ -868,7 +868,7 @@ input[type="button"] {
.segmented-control li:active { .segmented-control li:active {
background-color: #eee; background-color: #eee;
} }
.segmented-control li.selected { .segmented-control li.active {
background-color: #ccc; background-color: #ccc;
} }
@ -884,10 +884,10 @@ input[type="button"] {
.segmented-control-primary li:active { .segmented-control-primary li:active {
background-color: #cde1f1; background-color: #cde1f1;
} }
.segmented-control-primary li.selected { .segmented-control-primary li.active {
background-color: #428bca; background-color: #428bca;
} }
.segmented-control-primary li.selected > a { .segmented-control-primary li.active > a {
color: #fff; color: #fff;
} }
@ -903,10 +903,10 @@ input[type="button"] {
.segmented-control-positive li:active { .segmented-control-positive li:active {
background-color: #d8eed8; background-color: #d8eed8;
} }
.segmented-control-positive li.selected { .segmented-control-positive li.active {
background-color: #5cb85c; background-color: #5cb85c;
} }
.segmented-control-positive li.selected > a { .segmented-control-positive li.active > a {
color: #fff; color: #fff;
} }
@ -922,17 +922,17 @@ input[type="button"] {
.segmented-control-negative li:active { .segmented-control-negative li:active {
background-color: #f9e2e2; background-color: #f9e2e2;
} }
.segmented-control-negative li.selected { .segmented-control-negative li.active {
background-color: #d9534f; background-color: #d9534f;
} }
.segmented-control-negative li.selected > a { .segmented-control-negative li.active > a {
color: #fff; color: #fff;
} }
.segmented-control-item { .segmented-control-item {
display: none; display: none;
} }
.segmented-control-item.selected { .segmented-control-item.active {
display: block; display: block;
} }

2
dist/ratchet.js vendored
Unescape View File

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

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

@ -311,10 +311,10 @@ body {
.platform-toggle .segmented-control li:active { .platform-toggle .segmented-control li:active {
background-color: rgba(0, 209, 254, 0.3); background-color: rgba(0, 209, 254, 0.3);
} }
.platform-toggle .segmented-control li.selected { .platform-toggle .segmented-control li.active {
background-color: #00d1fe; background-color: #00d1fe;
} }
.platform-toggle .segmented-control li.selected a { .platform-toggle .segmented-control li.active a {
color: #fff; color: #fff;
} }
@ -1024,10 +1024,10 @@ hr {
.platform-ios .segmented-control li:active { .platform-ios .segmented-control li:active {
background-color: #ebebeb; background-color: #ebebeb;
} }
.platform-ios .segmented-control li.selected { .platform-ios .segmented-control li.active {
background-color: #929292; background-color: #929292;
} }
.platform-ios .segmented-control li.selected > a { .platform-ios .segmented-control li.active > a {
color: #fff; color: #fff;
} }
.platform-ios .segmented-control-primary { .platform-ios .segmented-control-primary {
@ -1042,10 +1042,10 @@ hr {
.platform-ios .segmented-control-primary li:active { .platform-ios .segmented-control-primary li:active {
background-color: #b3d7ff; background-color: #b3d7ff;
} }
.platform-ios .segmented-control-primary li.selected { .platform-ios .segmented-control-primary li.active {
background-color: #007aff; background-color: #007aff;
} }
.platform-ios .segmented-control-primary li.selected > a { .platform-ios .segmented-control-primary li.active > a {
color: #fff; color: #fff;
} }
.platform-ios .segmented-control-positive { .platform-ios .segmented-control-positive {
@ -1060,10 +1060,10 @@ hr {
.platform-ios .segmented-control-positive li:active { .platform-ios .segmented-control-positive li:active {
background-color: #dff8e3; background-color: #dff8e3;
} }
.platform-ios .segmented-control-positive li.selected { .platform-ios .segmented-control-positive li.active {
background-color: #4cd964; background-color: #4cd964;
} }
.platform-ios .segmented-control-positive li.selected > a { .platform-ios .segmented-control-positive li.active > a {
color: #fff; color: #fff;
} }
.platform-ios .segmented-control-negative { .platform-ios .segmented-control-negative {
@ -1078,10 +1078,10 @@ hr {
.platform-ios .segmented-control-negative li:active { .platform-ios .segmented-control-negative li:active {
background-color: #fae4e3; background-color: #fae4e3;
} }
.platform-ios .segmented-control-negative li.selected { .platform-ios .segmented-control-negative li.active {
background-color: #dd524d; background-color: #dd524d;
} }
.platform-ios .segmented-control-negative li.selected > a { .platform-ios .segmented-control-negative li.active > a {
color: #fff; color: #fff;
} }
.platform-ios .popover { .platform-ios .popover {
@ -1385,7 +1385,7 @@ hr {
padding-bottom: 10px; padding-bottom: 10px;
color: #33b5e5; color: #33b5e5;
} }
.platform-android .segmented-control li.selected { .platform-android .segmented-control li.active {
background-color: #33b5e5; background-color: #33b5e5;
} }
.platform-android .popover { .platform-android .popover {

6
docs-assets/js/docs.js
Unescape View File

@ -76,9 +76,9 @@ $(function() {
components.addClass(platform); components.addClass(platform);
} }
// Deal with selected states // Deal with active states
$(this).siblings('.selected').removeClass('selected'); $(this).siblings('.active').removeClass('active');
$(this).addClass('selected'); $(this).addClass('active');
}); });
win.on('scroll', calculateScroll); win.on('scroll', calculateScroll);

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 = 'selected'; var className = 'active';
var classSelector = '.' + className; var classSelector = '.' + className;
var targetAnchor = getTarget(e.target); var targetAnchor = getTarget(e.target);

2
lib/sass/docs.scss
Unescape View File

@ -328,7 +328,7 @@ body {
&:active { &:active {
background-color: rgba(0,209,254,.3); background-color: rgba(0,209,254,.3);
} }
&.selected { &.active {
background-color: #00d1fe; background-color: #00d1fe;
a { a {

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

@ -39,13 +39,11 @@
border-left-width: 0; border-left-width: 0;
} }
// Active state of segmented controller // Active states of segmented controller
&:active { &:active {
background-color: #eee; background-color: #eee;
} }
&.active {
// Selected segment of controller
&.selected {
background-color: #ccc; background-color: #ccc;
} }
} }
@ -67,7 +65,7 @@
&:active { &:active {
background-color: lighten($primary-color, 35%); background-color: lighten($primary-color, 35%);
} }
&.selected { &.active {
background-color: $primary-color; background-color: $primary-color;
> a { > a {
@ -90,7 +88,7 @@
&:active { &:active {
background-color: lighten($positive-color, 35%); background-color: lighten($positive-color, 35%);
} }
&.selected { &.active {
background-color: $positive-color; background-color: $positive-color;
> a { > a {
@ -113,7 +111,7 @@
&:active { &:active {
background-color: lighten($negative-color, 35%); background-color: lighten($negative-color, 35%);
} }
&.selected { &.active {
background-color: $negative-color; background-color: $negative-color;
> a { > a {
@ -126,7 +124,7 @@
.segmented-control-item { .segmented-control-item {
display: none; display: none;
&.selected { &.active {
display: block; display: block;
} }
} }

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

@ -360,9 +360,7 @@ textarea,
padding-bottom: 10px; padding-bottom: 10px;
color: $primary-color; color: $primary-color;
} }
&.active {
// Selected segment of controller
&.selected {
background-color: $primary-color; background-color: $primary-color;
} }
} }

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

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

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

@ -357,7 +357,7 @@ textarea,
&:active { &:active {
background-color: lighten($default-color, 35%); background-color: lighten($default-color, 35%);
} }
&.selected { &.active {
background-color: $default-color; background-color: $default-color;
> a { > a {
@ -383,7 +383,7 @@ textarea,
&:active { &:active {
background-color: lighten($primary-color, 35%); background-color: lighten($primary-color, 35%);
} }
&.selected { &.active {
background-color: $primary-color; background-color: $primary-color;
> a { > a {
@ -406,7 +406,7 @@ textarea,
&:active { &:active {
background-color: lighten($positive-color, 35%); background-color: lighten($positive-color, 35%);
} }
&.selected { &.active {
background-color: $positive-color; background-color: $positive-color;
> a { > a {
@ -429,7 +429,7 @@ textarea,
&:active { &:active {
background-color: lighten($negative-color, 35%); background-color: lighten($negative-color, 35%);
} }
&.selected { &.active {
background-color: $negative-color; background-color: $negative-color;
> a { > a {

Write Preview
Loading…
Cancel
Save