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
Split 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. 14
      lib/sass/docs.scss
  7. 44
      lib/sass/segmented-controls.scss

145
components.html
Unescape View File

@ -21,17 +21,17 @@ base_url: "../"
</div>
<div class="platform-toggle">
<ul class="segmented-control">
<li class="platform-switch active" data-platform="">
<a>Base</a>
</li>
<li class="platform-switch" data-platform="platform-ios">
<a>iOS</a>
</li>
<li class="platform-switch" data-platform="platform-android">
<a>Android</a>
</li>
</ul>
<div class="segmented-control">
<a class="platform-switch control-item active" data-platform="">
Base
</a>
<a class="platform-switch control-item" data-platform="platform-ios">
iOS
</a>
<a class="platform-switch control-item" data-platform="platform-android">
Android
</a>
</div>
</div>
</div>
@ -168,17 +168,11 @@ base_url: "../"
<a class="btn pull-right">
Right
</a>
<ul class="segmented-control">
<li class="active">
<a>One</a>
</li>
<li>
<a>Two</a>
</li>
<li>
<a>Three</a>
</li>
</ul>
<div class="segmented-control">
<a class="control-item active">One</a>
<a class="control-item">Two</a>
<a class="control-item">Three</a>
</div>
</header>
</div>
@ -190,17 +184,11 @@ base_url: "../"
<a class="btn pull-right">
Right
</a>
<ul class="segmented-control">
<li class="active">
<a>One</a>
</li>
<li>
<a>Two</a>
</li>
<li>
<a>Three</a>
</li>
</ul>
<div class="segmented-control">
<a class="control-item active">One</a>
<a class="control-item">Two</a>
<a class="control-item">Three</a>
</div>
</header>
{% endhighlight %}
@ -270,17 +258,11 @@ base_url: "../"
<div class="component-example component-example-fullbleed">
<!-- Segmented control in standard bar fixed to top -->
<nav class="bar bar-standard">
<ul class="segmented-control">
<li class="active">
<a>Thing one</a>
</li>
<li>
<a>Thing two</a>
</li>
<li>
<a>Thing three</a>
</li>
</ul>
<div class="segmented-control">
<a class="control-item active">Thing one</a>
<a class="control-item">Thing two</a>
<a class="control-item">Thing three</a>
</div>
</nav>
<!-- Block button in standard bar fixed below top bar -->
@ -292,17 +274,11 @@ base_url: "../"
{% highlight html %}
<!-- Segmented control in standard bar fixed to top -->
<nav class="bar bar-standard">
<ul class="segmented-control">
<li class="active">
<a>Thing one</a>
</li>
<li>
<a>Thing two</a>
</li>
<li>
<a>Thing three</a>
</li>
</ul>
<div class="segmented-control">
<a class="control-item active">Thing one</a>
<a class="control-item">Thing two</a>
<a class="control-item">Thing three</a>
</div>
</nav>
<!-- Block button in standard bar fixed below top bar -->
@ -759,44 +735,43 @@ quis nostrud exercitation ullamco.</p>
<!-- Segmented Control -->
<article class="component" id="segmentedControls">
<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">
<ul class="segmented-control">
<li class="active">
<a href="#item1mobile">Thing one</a>
</li>
<li>
<a href="#item2mobile">Thing two</a>
</li>
<li>
<a href="#item3mobile">Thing three</a>
</li>
</ul>
<div class="segmented-control">
<a class="control-item active" href="#item1mobile">
Thing one
</a>
<a class="control-item" href="#item2mobile">
Thing two
</a>
<a class="control-item" href="#item3mobile">
Thing three
</a>
</div>
<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>
<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>
{% highlight html %}
<ul class="segmented-control">
<li class="active">
<a href="#item1mobile">Thing one</a>
</li>
<li>
<a href="#item2mobile">Thing two</a>
</li>
<li>
<a href="#item3mobile">Thing three</a>
</li>
</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 class="segmented-control">
<a class="control-item active" href="#item1mobile">
Thing one
</a>
<a class="control-item" href="#item2mobile">
Thing two
</a>
<a class="control-item" href="#item3mobile">
Thing three
</a>
</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>
{% endhighlight %}

52
dist/ratchet.css vendored
Unescape View File

@ -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;
}

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
* 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;

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

@ -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;
}

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
* 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;

14
lib/sass/docs.scss
Unescape View File

@ -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;
}

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

@ -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 {

Write Preview
Loading…
Cancel
Save