Segmented control
-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.
+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.
-
{% highlight html %}
--
-
- - Thing one - -
- - Thing two - -
- - Thing three - -
- Item 1
- Item 2
- Item 3
+ Item 1
+ Item 2
+ Item 3
-
-
- - Thing one - -
- - Thing two - -
- - Thing three - -
- Item 1
- Item 2
- Item 3
+
+
+ Item 1
+ Item 2
+ Item 3
{% endhighlight %}
diff --git a/dist/ratchet.css b/dist/ratchet.css
index f0edc34..15a460e 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -897,94 +897,84 @@ select {
border: 1px solid #ccc;
border-radius: 4px;
}
-.segmented-control li {
+.segmented-control .control-item {
display: table-cell;
overflow: hidden;
width: 1%;
- text-align: center;
- white-space: nowrap;
- border-left: 1px solid #ccc;
-}
-.segmented-control li > a {
- display: block;
padding-top: 6px;
padding-bottom: 7px;
- overflow: hidden;
line-height: 1;
color: #333;
+ text-align: center;
+ white-space: nowrap;
text-overflow: ellipsis;
+ border-left: 1px solid #ccc;
}
-.segmented-control li:first-child {
+.segmented-control .control-item:first-child {
border-left-width: 0;
}
-.segmented-control li:active {
+.segmented-control .control-item:active {
background-color: #eee;
}
-.segmented-control li.active {
+.segmented-control .control-item.active {
background-color: #ccc;
}
.segmented-control-primary {
border: 1px solid #428bca;
}
-.segmented-control-primary li {
+.segmented-control-primary .control-item {
border-color: inherit;
-}
-.segmented-control-primary li > a {
color: #428bca;
}
-.segmented-control-primary li:active {
+.segmented-control-primary .control-item:active {
background-color: #cde1f1;
}
-.segmented-control-primary li.active {
+.segmented-control-primary .control-item.active {
background-color: #428bca;
}
-.segmented-control-primary li.active > a {
+.segmented-control-primary .control-item.active > a {
color: #fff;
}
.segmented-control-positive {
border: 1px solid #5cb85c;
}
-.segmented-control-positive li {
+.segmented-control-positive .control-item {
border-color: inherit;
-}
-.segmented-control-positive li > a {
color: #5cb85c;
}
-.segmented-control-positive li:active {
+.segmented-control-positive .control-item:active {
background-color: #d8eed8;
}
-.segmented-control-positive li.active {
+.segmented-control-positive .control-item.active {
background-color: #5cb85c;
}
-.segmented-control-positive li.active > a {
+.segmented-control-positive .control-item.active > a {
color: #fff;
}
.segmented-control-negative {
border: 1px solid #d9534f;
}
-.segmented-control-negative li {
+.segmented-control-negative .control-item {
border-color: inherit;
-}
-.segmented-control-negative li > a {
color: #d9534f;
}
-.segmented-control-negative li:active {
+.segmented-control-negative .control-item:active {
background-color: #f9e2e2;
}
-.segmented-control-negative li.active {
+.segmented-control-negative .control-item.active {
background-color: #d9534f;
}
-.segmented-control-negative li.active > a {
+.segmented-control-negative .control-item.active > a {
color: #fff;
}
-.segmented-control-item {
+.control-content {
display: none;
}
-.segmented-control-item.active {
+.control-content.active {
display: block;
}
diff --git a/dist/ratchet.js b/dist/ratchet.js
index 3be794a..792f597 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -528,16 +528,16 @@
}();
/* ----------------------------------
- * TABS v1.0.0
+ * Segmented controls v1.0.0
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
!function () {
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 (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 activeBodies;
var targetBody;
- var targetTab;
+ var targetTab = getTarget(e.target);
var className = 'active';
var classSelector = '.' + className;
- var targetAnchor = getTarget(e.target);
- if (!targetAnchor) return;
+ if (!targetTab) return;
- targetTab = targetAnchor.parentNode;
activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) activeTab.classList.remove(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;
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 68ee5df..c66513e 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -304,21 +304,17 @@ body {
border-color: #00d1fe;
background-color: transparent;
}
-.platform-toggle .segmented-control li {
+.platform-toggle .segmented-control .control-item {
cursor: pointer;
- border-color: #00d1fe;
-}
-.platform-toggle .segmented-control li a {
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);
}
-.platform-toggle .segmented-control li.active {
- background-color: #00d1fe;
-}
-.platform-toggle .segmented-control li.active a {
+.platform-toggle .segmented-control .control-item.active {
color: #fff;
+ background-color: #00d1fe;
}
.component {
@@ -395,6 +391,7 @@ body {
}
#segmentedControlsInDevice .segmented-control {
+ margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
diff --git a/lib/js/segmented-controllers.js b/lib/js/segmented-controllers.js
index 4da584c..79bd288 100644
--- a/lib/js/segmented-controllers.js
+++ b/lib/js/segmented-controllers.js
@@ -1,14 +1,14 @@
/* ----------------------------------
- * TABS v1.0.0
+ * Segmented controls v1.0.0
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
!function () {
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 (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 activeBodies;
var targetBody;
- var targetTab;
+ var targetTab = getTarget(e.target);
var className = 'active';
var classSelector = '.' + className;
- var targetAnchor = getTarget(e.target);
- if (!targetAnchor) return;
+ if (!targetTab) return;
- targetTab = targetAnchor.parentNode;
activeTab = targetTab.parentNode.querySelector(classSelector);
if (activeTab) activeTab.classList.remove(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;
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index fc65461..c4c4875 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -318,22 +318,17 @@ body {
border-color: #00d1fe;
background-color: transparent;
- li {
+ .control-item {
cursor: pointer;
+ color: #00d1fe;
border-color: #00d1fe;
-
- a {
- color: #00d1fe;
- }
+
&:active {
background-color: rgba(0,209,254,.3);
}
&.active {
+ color: #fff;
background-color: #00d1fe;
-
- a {
- color: #fff;
- }
}
}
}
@@ -411,6 +406,7 @@ body {
//Segmented Control
#segmentedControlsInDevice {
.segmented-control {
+ margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
diff --git a/lib/sass/segmented-controls.scss b/lib/sass/segmented-controls.scss
index 3acf461..a7dbbcc 100644
--- a/lib/sass/segmented-controls.scss
+++ b/lib/sass/segmented-controls.scss
@@ -15,24 +15,18 @@
border-radius: 4px;
// Section within controller
- li {
+ .control-item {
display: table-cell;
overflow: hidden;
width: 1%;
+ padding-top: 6px;
+ padding-bottom: 7px;
+ line-height: 1;
+ color: #333;
text-align: center;
white-space: nowrap;
+ text-overflow: ellipsis;
border-left: 1px solid #ccc;
-
- // Link that fills each section
- > a {
- display: block;
- padding-top: 6px;
- padding-bottom: 7px;
- overflow: hidden;
- line-height: 1;
- color: #333;
- text-overflow: ellipsis;
- }
// Remove border-left and shadow from first section
&:first-child {
@@ -56,12 +50,10 @@
.segmented-control-primary {
border: 1px solid $primary-color;
- li {
+ .control-item {
border-color: inherit;
-
- > a {
- color: $primary-color;
- }
+ color: $primary-color;
+
&:active {
background-color: lighten($primary-color, 35%);
}
@@ -79,12 +71,10 @@
.segmented-control-positive {
border: 1px solid $positive-color;
- li {
+ .control-item {
border-color: inherit;
-
- > a {
- color: $positive-color;
- }
+ color: $positive-color;
+
&:active {
background-color: lighten($positive-color, 35%);
}
@@ -102,12 +92,10 @@
.segmented-control-negative {
border: 1px solid $negative-color;
- li {
+ .control-item {
border-color: inherit;
-
- > a {
- color: $negative-color;
- }
+ color: $negative-color;
+
&:active {
background-color: lighten($negative-color, 35%);
}
@@ -121,7 +109,7 @@
}
}
-.segmented-control-item {
+.control-content {
display: none;
&.active {