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

simplify segmented controls and fix js. broke themes

pull/253/head
connors 11 years ago
parent
27437beb91
commit
3536883d61
7 changed files with 122 additions and 180 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. 145
      components.html
  2. 52
      dist/ratchet.css
  3. 16
      dist/ratchet.js
  4. 15
      docs-assets/css/docs.css
  5. 16
      lib/js/segmented-controllers.js
  6. 12
      lib/sass/docs.scss
  7. 34
      lib/sass/segmented-controls.scss

145
components.html
Unescape View File

@ -21,17 +21,17 @@ base_url: "../"
</div> </div>
<div class="platform-toggle"> <div class="platform-toggle">
<ul class="segmented-control"> <div class="segmented-control">
<li class="platform-switch active" data-platform=""> <a class="platform-switch control-item active" data-platform="">
<a>Base</a> Base
</li> </a>
<li class="platform-switch" data-platform="platform-ios"> <a class="platform-switch control-item" data-platform="platform-ios">
<a>iOS</a> iOS
</li> </a>
<li class="platform-switch" data-platform="platform-android"> <a class="platform-switch control-item" data-platform="platform-android">
<a>Android</a> Android
</li> </a>
</ul> </div>
</div> </div>
</div> </div>
@ -168,17 +168,11 @@ base_url: "../"
<a class="btn pull-right"> <a class="btn pull-right">
Right Right
</a> </a>
<ul class="segmented-control"> <div class="segmented-control">
<li class="active"> <a class="control-item active">One</a>
<a>One</a> <a class="control-item">Two</a>
</li> <a class="control-item">Three</a>
<li> </div>
<a>Two</a>
</li>
<li>
<a>Three</a>
</li>
</ul>
</header> </header>
</div> </div>
@ -190,17 +184,11 @@ base_url: "../"
<a class="btn pull-right"> <a class="btn pull-right">
Right Right
</a> </a>
<ul class="segmented-control"> <div class="segmented-control">
<li class="active"> <a class="control-item active">One</a>
<a>One</a> <a class="control-item">Two</a>
</li> <a class="control-item">Three</a>
<li> </div>
<a>Two</a>
</li>
<li>
<a>Three</a>
</li>
</ul>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -270,17 +258,11 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<!-- Segmented control in standard bar fixed to top --> <!-- Segmented control in standard bar fixed to top -->
<nav class="bar bar-standard"> <nav class="bar bar-standard">
<ul class="segmented-control"> <div class="segmented-control">
<li class="active"> <a class="control-item active">Thing one</a>
<a>Thing one</a> <a class="control-item">Thing two</a>
</li> <a class="control-item">Thing three</a>
<li> </div>
<a>Thing two</a>
</li>
<li>
<a>Thing three</a>
</li>
</ul>
</nav> </nav>
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
@ -292,17 +274,11 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<!-- Segmented control in standard bar fixed to top --> <!-- Segmented control in standard bar fixed to top -->
<nav class="bar bar-standard"> <nav class="bar bar-standard">
<ul class="segmented-control"> <div class="segmented-control">
<li class="active"> <a class="control-item active">Thing one</a>
<a>Thing one</a> <a class="control-item">Thing two</a>
</li> <a class="control-item">Thing three</a>
<li> </div>
<a>Thing two</a>
</li>
<li>
<a>Thing three</a>
</li>
</ul>
</nav> </nav>
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
@ -759,44 +735,43 @@ quis nostrud exercitation ullamco.</p>
<!-- Segmented Control --> <!-- Segmented Control -->
<article class="component" id="segmentedControls"> <article class="component" id="segmentedControls">
<h3 class="component-title">Segmented control</h3> <h3 class="component-title">Segmented control</h3>
<p class="component-description">Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-control-item". Then, just give each content section an id and point the link in the segmented control to that id.</p> <p class="component-description">Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "control-content". Then, just give each content section an id and point the link in the segmented control to that id.</p>
<div class="component-example"> <div class="component-example">
<ul class="segmented-control"> <div class="segmented-control">
<li class="active"> <a class="control-item active" href="#item1mobile">
<a href="#item1mobile">Thing one</a> Thing one
</li> </a>
<li> <a class="control-item" href="#item2mobile">
<a href="#item2mobile">Thing two</a> Thing two
</li> </a>
<li> <a class="control-item" href="#item3mobile">
<a href="#item3mobile">Thing three</a> Thing three
</li> </a>
</ul> </div>
<div class="card"> <div class="card">
<span id="item1mobile" class="segmented-control-item active">Item 1</span> <span id="item1mobile" class="control-content active">Item 1</span>
<span id="item2mobile" class="segmented-control-item">Item 2</span> <span id="item2mobile" class="control-content">Item 2</span>
<span id="item3mobile" class="segmented-control-item">Item 3</span> <span id="item3mobile" class="control-content">Item 3</span>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="segmented-control"> <div class="segmented-control">
<li class="active"> <a class="control-item active" href="#item1mobile">
<a href="#item1mobile">Thing one</a> Thing one
</li> </a>
<li> <a class="control-item" href="#item2mobile">
<a href="#item2mobile">Thing two</a> Thing two
</li> </a>
<li> <a class="control-item" href="#item3mobile">
<a href="#item3mobile">Thing three</a> Thing three
</li> </a>
</ul>
<div class="card">
<span id="item1mobile" class="segmented-control-item active">Item 1</span>
<span id="item2mobile" class="segmented-control-item">Item 2</span>
<span id="item3mobile" class="segmented-control-item">Item 3</span>
</div> </div>
<div class="card">
<span id="item1mobile" class="control-content active">Item 1</span>
<span id="item2mobile" class="control-content">Item 2</span>
<span id="item3mobile" class="control-content">Item 3</span>
</div> </div>
{% endhighlight %} {% endhighlight %}

52
dist/ratchet.css vendored
Unescape View File

@ -897,94 +897,84 @@ select {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
} }
.segmented-control li { .segmented-control .control-item {
display: table-cell; display: table-cell;
overflow: hidden; overflow: hidden;
width: 1%; width: 1%;
text-align: center;
white-space: nowrap;
border-left: 1px solid #ccc;
}
.segmented-control li > a {
display: block;
padding-top: 6px; padding-top: 6px;
padding-bottom: 7px; padding-bottom: 7px;
overflow: hidden;
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
border-left: 1px solid #ccc;
} }
.segmented-control li:first-child { .segmented-control .control-item:first-child {
border-left-width: 0; border-left-width: 0;
} }
.segmented-control li:active { .segmented-control .control-item:active {
background-color: #eee; background-color: #eee;
} }
.segmented-control li.active { .segmented-control .control-item.active {
background-color: #ccc; background-color: #ccc;
} }
.segmented-control-primary { .segmented-control-primary {
border: 1px solid #428bca; border: 1px solid #428bca;
} }
.segmented-control-primary li { .segmented-control-primary .control-item {
border-color: inherit; border-color: inherit;
}
.segmented-control-primary li > a {
color: #428bca; color: #428bca;
} }
.segmented-control-primary li:active { .segmented-control-primary .control-item:active {
background-color: #cde1f1; background-color: #cde1f1;
} }
.segmented-control-primary li.active { .segmented-control-primary .control-item.active {
background-color: #428bca; background-color: #428bca;
} }
.segmented-control-primary li.active > a { .segmented-control-primary .control-item.active > a {
color: #fff; color: #fff;
} }
.segmented-control-positive { .segmented-control-positive {
border: 1px solid #5cb85c; border: 1px solid #5cb85c;
} }
.segmented-control-positive li { .segmented-control-positive .control-item {
border-color: inherit; border-color: inherit;
}
.segmented-control-positive li > a {
color: #5cb85c; color: #5cb85c;
} }
.segmented-control-positive li:active { .segmented-control-positive .control-item:active {
background-color: #d8eed8; background-color: #d8eed8;
} }
.segmented-control-positive li.active { .segmented-control-positive .control-item.active {
background-color: #5cb85c; background-color: #5cb85c;
} }
.segmented-control-positive li.active > a { .segmented-control-positive .control-item.active > a {
color: #fff; color: #fff;
} }
.segmented-control-negative { .segmented-control-negative {
border: 1px solid #d9534f; border: 1px solid #d9534f;
} }
.segmented-control-negative li { .segmented-control-negative .control-item {
border-color: inherit; border-color: inherit;
}
.segmented-control-negative li > a {
color: #d9534f; color: #d9534f;
} }
.segmented-control-negative li:active { .segmented-control-negative .control-item:active {
background-color: #f9e2e2; background-color: #f9e2e2;
} }
.segmented-control-negative li.active { .segmented-control-negative .control-item.active {
background-color: #d9534f; background-color: #d9534f;
} }
.segmented-control-negative li.active > a { .segmented-control-negative .control-item.active > a {
color: #fff; color: #fff;
} }
.segmented-control-item { .control-content {
display: none; display: none;
} }
.segmented-control-item.active { .control-content.active {
display: block; display: block;
} }

16
dist/ratchet.js vendored
Unescape View File

@ -528,16 +528,16 @@
}(); }();
/* ---------------------------------- /* ----------------------------------
* TABS v1.0.0 * Segmented controls v1.0.0
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
var getTarget = function (target) { var getTarget = function (target) {
var i, popovers = document.querySelectorAll('.segmented-control li a'); var i, segmentedControls = document.querySelectorAll('.segmented-control .control-item');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = segmentedControls.length; i--;) { if (segmentedControls[i] === target) return target; }
} }
}; };
@ -545,23 +545,21 @@
var activeTab; var activeTab;
var activeBodies; var activeBodies;
var targetBody; var targetBody;
var targetTab; var targetTab = getTarget(e.target);
var className = 'active'; var className = 'active';
var classSelector = '.' + className; var classSelector = '.' + className;
var targetAnchor = getTarget(e.target);
if (!targetAnchor) return; if (!targetTab) return;
targetTab = targetAnchor.parentNode;
activeTab = targetTab.parentNode.querySelector(classSelector); activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) activeTab.classList.remove(className); if (activeTab) activeTab.classList.remove(className);
targetTab.classList.add(className); targetTab.classList.add(className);
if (!targetAnchor.hash) return; if (!targetTab.hash) return;
targetBody = document.querySelector(targetAnchor.hash); targetBody = document.querySelector(targetTab.hash);
if (!targetBody) return; if (!targetBody) return;

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

@ -304,21 +304,17 @@ body {
border-color: #00d1fe; border-color: #00d1fe;
background-color: transparent; background-color: transparent;
} }
.platform-toggle .segmented-control li { .platform-toggle .segmented-control .control-item {
cursor: pointer; cursor: pointer;
border-color: #00d1fe;
}
.platform-toggle .segmented-control li a {
color: #00d1fe; color: #00d1fe;
border-color: #00d1fe;
} }
.platform-toggle .segmented-control li:active { .platform-toggle .segmented-control .control-item:active {
background-color: rgba(0, 209, 254, 0.3); background-color: rgba(0, 209, 254, 0.3);
} }
.platform-toggle .segmented-control li.active { .platform-toggle .segmented-control .control-item.active {
background-color: #00d1fe;
}
.platform-toggle .segmented-control li.active a {
color: #fff; color: #fff;
background-color: #00d1fe;
} }
.component { .component {
@ -395,6 +391,7 @@ body {
} }
#segmentedControlsInDevice .segmented-control { #segmentedControlsInDevice .segmented-control {
margin-top: 10px;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }

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

@ -1,14 +1,14 @@
/* ---------------------------------- /* ----------------------------------
* TABS v1.0.0 * Segmented controls v1.0.0
* Licensed under The MIT License * Licensed under The MIT License
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* ---------------------------------- */ * ---------------------------------- */
!function () { !function () {
var getTarget = function (target) { var getTarget = function (target) {
var i, popovers = document.querySelectorAll('.segmented-control li a'); var i, segmentedControls = document.querySelectorAll('.segmented-control .control-item');
for (; target && target !== document; target = target.parentNode) { for (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = segmentedControls.length; i--;) { if (segmentedControls[i] === target) return target; }
} }
}; };
@ -16,23 +16,21 @@
var activeTab; var activeTab;
var activeBodies; var activeBodies;
var targetBody; var targetBody;
var targetTab; var targetTab = getTarget(e.target);
var className = 'active'; var className = 'active';
var classSelector = '.' + className; var classSelector = '.' + className;
var targetAnchor = getTarget(e.target);
if (!targetAnchor) return; if (!targetTab) return;
targetTab = targetAnchor.parentNode;
activeTab = targetTab.parentNode.querySelector(classSelector); activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) activeTab.classList.remove(className); if (activeTab) activeTab.classList.remove(className);
targetTab.classList.add(className); targetTab.classList.add(className);
if (!targetAnchor.hash) return; if (!targetTab.hash) return;
targetBody = document.querySelector(targetAnchor.hash); targetBody = document.querySelector(targetTab.hash);
if (!targetBody) return; if (!targetBody) return;

12
lib/sass/docs.scss
Unescape View File

@ -318,22 +318,17 @@ body {
border-color: #00d1fe; border-color: #00d1fe;
background-color: transparent; background-color: transparent;
li { .control-item {
cursor: pointer; cursor: pointer;
color: #00d1fe;
border-color: #00d1fe; border-color: #00d1fe;
a {
color: #00d1fe;
}
&:active { &:active {
background-color: rgba(0,209,254,.3); background-color: rgba(0,209,254,.3);
} }
&.active { &.active {
background-color: #00d1fe;
a {
color: #fff; color: #fff;
} background-color: #00d1fe;
} }
} }
} }
@ -411,6 +406,7 @@ body {
//Segmented Control //Segmented Control
#segmentedControlsInDevice { #segmentedControlsInDevice {
.segmented-control { .segmented-control {
margin-top: 10px;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }

34
lib/sass/segmented-controls.scss
Unescape View File

@ -15,24 +15,18 @@
border-radius: 4px; border-radius: 4px;
// Section within controller // Section within controller
li { .control-item {
display: table-cell; display: table-cell;
overflow: hidden; overflow: hidden;
width: 1%; width: 1%;
text-align: center;
white-space: nowrap;
border-left: 1px solid #ccc;
// Link that fills each section
> a {
display: block;
padding-top: 6px; padding-top: 6px;
padding-bottom: 7px; padding-bottom: 7px;
overflow: hidden;
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} border-left: 1px solid #ccc;
// Remove border-left and shadow from first section // Remove border-left and shadow from first section
&:first-child { &:first-child {
@ -56,12 +50,10 @@
.segmented-control-primary { .segmented-control-primary {
border: 1px solid $primary-color; border: 1px solid $primary-color;
li { .control-item {
border-color: inherit; border-color: inherit;
> a {
color: $primary-color; color: $primary-color;
}
&:active { &:active {
background-color: lighten($primary-color, 35%); background-color: lighten($primary-color, 35%);
} }
@ -79,12 +71,10 @@
.segmented-control-positive { .segmented-control-positive {
border: 1px solid $positive-color; border: 1px solid $positive-color;
li { .control-item {
border-color: inherit; border-color: inherit;
> a {
color: $positive-color; color: $positive-color;
}
&:active { &:active {
background-color: lighten($positive-color, 35%); background-color: lighten($positive-color, 35%);
} }
@ -102,12 +92,10 @@
.segmented-control-negative { .segmented-control-negative {
border: 1px solid $negative-color; border: 1px solid $negative-color;
li { .control-item {
border-color: inherit; border-color: inherit;
> a {
color: $negative-color; color: $negative-color;
}
&:active { &:active {
background-color: lighten($negative-color, 35%); background-color: lighten($negative-color, 35%);
} }
@ -121,7 +109,7 @@
} }
} }
.segmented-control-item { .control-content {
display: none; display: none;
&.active { &.active {

Write Preview
Loading…
Cancel
Save