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

just use .segmented-control

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

30
components.html
Unescape View File

@ -21,7 +21,7 @@ base_url: "../"
</div>
<div class="platform-toggle">
<ul class="segmented-controller">
<ul class="segmented-control">
<li class="platform-switch selected" data-platform="">
<a>Base</a>
</li>
@ -141,7 +141,7 @@ base_url: "../"
<a class="btn pull-right">
Right
</a>
<ul class="segmented-controller">
<ul class="segmented-control">
<li class="selected">
<a>One</a>
</li>
@ -163,7 +163,7 @@ base_url: "../"
<a class="btn pull-right">
Right
</a>
<ul class="segmented-controller">
<ul class="segmented-control">
<li class="selected">
<a>One</a>
</li>
@ -243,7 +243,7 @@ base_url: "../"
<div class="component-example component-example-fullbleed">
<!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard">
<ul class="segmented-controller">
<ul class="segmented-control">
<li class="selected">
<a>Thing one</a>
</li>
@ -265,7 +265,7 @@ base_url: "../"
{% highlight html %}
<!-- Segmented controller in standard bar fixed to top -->
<nav class="bar-standard">
<ul class="segmented-controller">
<ul class="segmented-control">
<li class="selected">
<a>Thing one</a>
</li>
@ -622,11 +622,11 @@ base_url: "../"
<!-- Segmented Controller -->
<article class="component" id="segmentedControllers">
<h3 class="component-title">Segmented controller</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-controller-item". Then, just give each content section an id and point the link in the segmented controller to that id.</p>
<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 controller to that id.</p>
<div class="component-example">
<ul class="segmented-controller">
<ul class="segmented-control">
<li class="selected">
<a href="#item1mobile">Thing one</a>
</li>
@ -638,14 +638,14 @@ base_url: "../"
</li>
</ul>
<div class="card">
<p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
<p id="item2mobile" class="segmented-controller-item">Item 2</p>
<p id="item3mobile" class="segmented-controller-item">Item 3</p>
<p id="item1mobile" class="segmented-control-item selected">Item 1</p>
<p id="item2mobile" class="segmented-control-item">Item 2</p>
<p id="item3mobile" class="segmented-control-item">Item 3</p>
</div>
</div>
{% highlight html %}
<ul class="segmented-controller">
<ul class="segmented-control">
<li class="selected">
<a href="#item1mobile">Thing one</a>
</li>
@ -657,9 +657,9 @@ base_url: "../"
</li>
</ul>
<div class="card">
<p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
<p id="item2mobile" class="segmented-controller-item">Item 2</p>
<p id="item3mobile" class="segmented-controller-item">Item 3</p>
<p id="item1mobile" class="segmented-control-item selected">Item 1</p>
<p id="item2mobile" class="segmented-control-item">Item 2</p>
<p id="item3mobile" class="segmented-control-item">Item 3</p>
</div>
</div>
{% endhighlight %}

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

@ -238,20 +238,20 @@ textarea,
color: #f20754;
}
.segmented-controller {
.segmented-control {
background-color: transparent;
border: 1px solid #33b5e5;
border-radius: 3px;
}
.segmented-controller li {
.segmented-control li {
border-left: 1px solid #33b5e5;
}
.segmented-controller li > a {
.segmented-control li > a {
padding-top: 9px;
padding-bottom: 10px;
color: #33b5e5;
}
.segmented-controller li.selected {
.segmented-control li.selected {
background-color: #33b5e5;
}

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

@ -244,80 +244,80 @@ textarea,
color: #dd524d;
}
.segmented-controller {
.segmented-control {
color: #929292;
background-color: transparent;
border: 1px solid #929292;
}
.segmented-controller li {
.segmented-control li {
border-color: #929292;
-webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
.segmented-controller li:active {
.segmented-control li:active {
background-color: #ebebeb;
}
.segmented-controller li.selected {
.segmented-control li.selected {
background-color: #929292;
}
.segmented-controller li.selected > a {
.segmented-control li.selected > a {
color: #fff;
}
.segmented-controller-primary {
.segmented-control-primary {
border: 1px solid #007aff;
}
.segmented-controller-primary li {
.segmented-control-primary li {
border-color: inherit;
}
.segmented-controller-primary li > a {
.segmented-control-primary li > a {
color: #007aff;
}
.segmented-controller-primary li:active {
.segmented-control-primary li:active {
background-color: #b3d7ff;
}
.segmented-controller-primary li.selected {
.segmented-control-primary li.selected {
background-color: #007aff;
}
.segmented-controller-primary li.selected > a {
.segmented-control-primary li.selected > a {
color: #fff;
}
.segmented-controller-positive {
.segmented-control-positive {
border: 1px solid #4cd964;
}
.segmented-controller-positive li {
.segmented-control-positive li {
border-color: inherit;
}
.segmented-controller-positive li > a {
.segmented-control-positive li > a {
color: #4cd964;
}
.segmented-controller-positive li:active {
.segmented-control-positive li:active {
background-color: #dff8e3;
}
.segmented-controller-positive li.selected {
.segmented-control-positive li.selected {
background-color: #4cd964;
}
.segmented-controller-positive li.selected > a {
.segmented-control-positive li.selected > a {
color: #fff;
}
.segmented-controller-negative {
.segmented-control-negative {
border: 1px solid #dd524d;
}
.segmented-controller-negative li {
.segmented-control-negative li {
border-color: inherit;
}
.segmented-controller-negative li > a {
.segmented-control-negative li > a {
color: #dd524d;
}
.segmented-controller-negative li:active {
.segmented-control-negative li:active {
background-color: #fae4e3;
}
.segmented-controller-negative li.selected {
.segmented-control-negative li.selected {
background-color: #dd524d;
}
.segmented-controller-negative li.selected > a {
.segmented-control-negative li.selected > a {
color: #fff;
}

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

@ -87,29 +87,29 @@
color: #fff;
}
.segmented-controller {
.segmented-control {
border-color: #1eb0e9;
}
.segmented-controller li {
.segmented-control li {
border-left-color: #1eb0e9;
}
.segmented-controller li > a {
.segmented-control li > a {
color: #1eb0e9;
}
.segmented-controller li.selected {
.segmented-control li.selected {
background-color: #1eb0e9;
}
.bar-title .segmented-controller {
.bar-title .segmented-control {
border-color: #fff;
}
.bar-title .segmented-controller li {
.bar-title .segmented-control li {
border-left-color: #fff;
}
.bar-title .segmented-controller li > a {
.bar-title .segmented-control li > a {
color: #fff;
}
.bar-title .segmented-controller li.selected {
.bar-title .segmented-control li.selected {
background-color: rgba(255, 255, 255, 0.4);
}

54
dist/ratchet.css vendored
Unescape View File

@ -833,7 +833,7 @@ input[type="button"] {
margin-right: 10px;
}
.segmented-controller {
.segmented-control {
position: relative;
display: table;
padding: 0;
@ -845,7 +845,7 @@ input[type="button"] {
border: 1px solid #ccc;
border-radius: 4px;
}
.segmented-controller li {
.segmented-control li {
display: table-cell;
overflow: hidden;
width: 1%;
@ -853,7 +853,7 @@ input[type="button"] {
white-space: nowrap;
border-left: 1px solid #ccc;
}
.segmented-controller li > a {
.segmented-control li > a {
display: block;
padding-top: 6px;
padding-bottom: 7px;
@ -862,81 +862,81 @@ input[type="button"] {
color: #333;
text-overflow: ellipsis;
}
.segmented-controller li:first-child {
.segmented-control li:first-child {
border-left-width: 0;
}
.segmented-controller li:active {
.segmented-control li:active {
background-color: #eee;
}
.segmented-controller li.selected {
.segmented-control li.selected {
background-color: #ccc;
}
.segmented-controller-primary {
.segmented-control-primary {
border: 1px solid #428bca;
}
.segmented-controller-primary li {
.segmented-control-primary li {
border-color: inherit;
}
.segmented-controller-primary li > a {
.segmented-control-primary li > a {
color: #428bca;
}
.segmented-controller-primary li:active {
.segmented-control-primary li:active {
background-color: #cde1f1;
}
.segmented-controller-primary li.selected {
.segmented-control-primary li.selected {
background-color: #428bca;
}
.segmented-controller-primary li.selected > a {
.segmented-control-primary li.selected > a {
color: #fff;
}
.segmented-controller-positive {
.segmented-control-positive {
border: 1px solid #5cb85c;
}
.segmented-controller-positive li {
.segmented-control-positive li {
border-color: inherit;
}
.segmented-controller-positive li > a {
.segmented-control-positive li > a {
color: #5cb85c;
}
.segmented-controller-positive li:active {
.segmented-control-positive li:active {
background-color: #d8eed8;
}
.segmented-controller-positive li.selected {
.segmented-control-positive li.selected {
background-color: #5cb85c;
}
.segmented-controller-positive li.selected > a {
.segmented-control-positive li.selected > a {
color: #fff;
}
.segmented-controller-negative {
.segmented-control-negative {
border: 1px solid #d9534f;
}
.segmented-controller-negative li {
.segmented-control-negative li {
border-color: inherit;
}
.segmented-controller-negative li > a {
.segmented-control-negative li > a {
color: #d9534f;
}
.segmented-controller-negative li:active {
.segmented-control-negative li:active {
background-color: #f9e2e2;
}
.segmented-controller-negative li.selected {
.segmented-control-negative li.selected {
background-color: #d9534f;
}
.segmented-controller-negative li.selected > a {
.segmented-control-negative li.selected > a {
color: #fff;
}
.segmented-controller-item {
.segmented-control-item {
display: none;
}
.segmented-controller-item.selected {
.segmented-control-item.selected {
display: block;
}
[class*="bar-"] .segmented-controller {
[class*="bar-"] .segmented-control {
top: 8px;
margin: 0 auto;
}

2
dist/ratchet.js vendored
Unescape View File

@ -534,7 +534,7 @@
!function () {
var getTarget = function (target) {
var i, popovers = document.querySelectorAll('.segmented-controller li a');
var i, popovers = document.querySelectorAll('.segmented-control li a');
for (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
}

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

@ -295,26 +295,26 @@ body {
-webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
}
.platform-toggle .segmented-controller {
.platform-toggle .segmented-control {
max-width: 300px;
margin: 0 auto;
border-color: #00d1fe;
background-color: transparent;
}
.platform-toggle .segmented-controller li {
.platform-toggle .segmented-control li {
cursor: pointer;
border-color: #00d1fe;
}
.platform-toggle .segmented-controller li a {
.platform-toggle .segmented-control li a {
color: #00d1fe;
}
.platform-toggle .segmented-controller li:active {
.platform-toggle .segmented-control li:active {
background-color: rgba(0, 209, 254, 0.3);
}
.platform-toggle .segmented-controller li.selected {
.platform-toggle .segmented-control li.selected {
background-color: #00d1fe;
}
.platform-toggle .segmented-controller li.selected a {
.platform-toggle .segmented-control li.selected a {
color: #fff;
}
@ -392,7 +392,7 @@ body {
margin: 10px;
}
#segmentedControllersInDevice .segmented-controller {
#segmentedControllersInDevice .segmented-control {
margin-right: 10px;
margin-left: 10px;
}
@ -1011,77 +1011,77 @@ hr {
.platform-ios .badge-negative.badge-inverted {
color: #dd524d;
}
.platform-ios .segmented-controller {
.platform-ios .segmented-control {
color: #929292;
background-color: transparent;
border: 1px solid #929292;
}
.platform-ios .segmented-controller li {
.platform-ios .segmented-control li {
border-color: #929292;
-webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
.platform-ios .segmented-controller li:active {
.platform-ios .segmented-control li:active {
background-color: #ebebeb;
}
.platform-ios .segmented-controller li.selected {
.platform-ios .segmented-control li.selected {
background-color: #929292;
}
.platform-ios .segmented-controller li.selected > a {
.platform-ios .segmented-control li.selected > a {
color: #fff;
}
.platform-ios .segmented-controller-primary {
.platform-ios .segmented-control-primary {
border: 1px solid #007aff;
}
.platform-ios .segmented-controller-primary li {
.platform-ios .segmented-control-primary li {
border-color: inherit;
}
.platform-ios .segmented-controller-primary li > a {
.platform-ios .segmented-control-primary li > a {
color: #007aff;
}
.platform-ios .segmented-controller-primary li:active {
.platform-ios .segmented-control-primary li:active {
background-color: #b3d7ff;
}
.platform-ios .segmented-controller-primary li.selected {
.platform-ios .segmented-control-primary li.selected {
background-color: #007aff;
}
.platform-ios .segmented-controller-primary li.selected > a {
.platform-ios .segmented-control-primary li.selected > a {
color: #fff;
}
.platform-ios .segmented-controller-positive {
.platform-ios .segmented-control-positive {
border: 1px solid #4cd964;
}
.platform-ios .segmented-controller-positive li {
.platform-ios .segmented-control-positive li {
border-color: inherit;
}
.platform-ios .segmented-controller-positive li > a {
.platform-ios .segmented-control-positive li > a {
color: #4cd964;
}
.platform-ios .segmented-controller-positive li:active {
.platform-ios .segmented-control-positive li:active {
background-color: #dff8e3;
}
.platform-ios .segmented-controller-positive li.selected {
.platform-ios .segmented-control-positive li.selected {
background-color: #4cd964;
}
.platform-ios .segmented-controller-positive li.selected > a {
.platform-ios .segmented-control-positive li.selected > a {
color: #fff;
}
.platform-ios .segmented-controller-negative {
.platform-ios .segmented-control-negative {
border: 1px solid #dd524d;
}
.platform-ios .segmented-controller-negative li {
.platform-ios .segmented-control-negative li {
border-color: inherit;
}
.platform-ios .segmented-controller-negative li > a {
.platform-ios .segmented-control-negative li > a {
color: #dd524d;
}
.platform-ios .segmented-controller-negative li:active {
.platform-ios .segmented-control-negative li:active {
background-color: #fae4e3;
}
.platform-ios .segmented-controller-negative li.selected {
.platform-ios .segmented-control-negative li.selected {
background-color: #dd524d;
}
.platform-ios .segmented-controller-negative li.selected > a {
.platform-ios .segmented-control-negative li.selected > a {
color: #fff;
}
.platform-ios .popover {
@ -1372,20 +1372,20 @@ hr {
.platform-android .badge-negative.badge-inverted {
color: #f20754;
}
.platform-android .segmented-controller {
.platform-android .segmented-control {
background-color: transparent;
border: 1px solid #33b5e5;
border-radius: 3px;
}
.platform-android .segmented-controller li {
.platform-android .segmented-control li {
border-left: 1px solid #33b5e5;
}
.platform-android .segmented-controller li > a {
.platform-android .segmented-control li > a {
padding-top: 9px;
padding-bottom: 10px;
color: #33b5e5;
}
.platform-android .segmented-controller li.selected {
.platform-android .segmented-control li.selected {
background-color: #33b5e5;
}
.platform-android .popover {

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

@ -6,7 +6,7 @@
!function () {
var getTarget = function (target) {
var i, popovers = document.querySelectorAll('.segmented-controller li a');
var i, popovers = document.querySelectorAll('.segmented-control li a');
for (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
}

4
lib/sass/docs.scss
Unescape View File

@ -312,7 +312,7 @@ body {
@include transition(padding-top .2s linear, padding-bottom .2s linear);
}
.segmented-controller {
.segmented-control {
max-width: 300px;
margin: 0 auto;
border-color: #00d1fe;
@ -411,7 +411,7 @@ body {
//Segmented Control
#segmentedControllersInDevice {
.segmented-controller {
.segmented-control {
margin-right: 10px;
margin-left: 10px;
}

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

@ -2,7 +2,7 @@
// Segmented controllers
// --------------------------------------------------
.segmented-controller {
.segmented-control {
position: relative;
display: table;
padding: 0;
@ -55,7 +55,7 @@
// --------------------------------------------------
// Primary
.segmented-controller-primary {
.segmented-control-primary {
border: 1px solid $primary-color;
li {
@ -78,7 +78,7 @@
}
// Positive
.segmented-controller-positive {
.segmented-control-positive {
border: 1px solid $positive-color;
li {
@ -101,7 +101,7 @@
}
// Negative
.segmented-controller-negative {
.segmented-control-negative {
border: 1px solid $negative-color;
li {
@ -123,7 +123,7 @@
}
}
.segmented-controller-item {
.segmented-control-item {
display: none;
&.selected {
@ -136,7 +136,7 @@
// --------------------------------------------------
// Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller {
[class*="bar-"] .segmented-control {
top: 8px;
margin: 0 auto;
}

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

@ -346,7 +346,7 @@ textarea,
// Segmented controllers
// --------------------------------------------------
.segmented-controller {
.segmented-control {
background-color: transparent;
border: 1px solid $primary-color;
border-radius: 3px;

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

@ -125,7 +125,7 @@ $negative-color: #e71e1e;
// Segmented controllers
// --------------------------------------------------
.segmented-controller {
.segmented-control {
border-color: $primary-color;
li {
@ -145,7 +145,7 @@ $negative-color: #e71e1e;
// Segmented controller in all bars
// --------------------------------------------------
.bar-title .segmented-controller {
.bar-title .segmented-control {
border-color: #fff;
li {

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

@ -345,7 +345,7 @@ textarea,
// Segmented controllers
// --------------------------------------------------
.segmented-controller {
.segmented-control {
color: $default-color;
background-color: transparent;
border: 1px solid $default-color;
@ -371,7 +371,7 @@ textarea,
// --------------------------------------------------
// Primary
.segmented-controller-primary {
.segmented-control-primary {
border: 1px solid $primary-color;
li {
@ -394,7 +394,7 @@ textarea,
}
// Positive
.segmented-controller-positive {
.segmented-control-positive {
border: 1px solid $positive-color;
li {
@ -417,7 +417,7 @@ textarea,
}
// Negative
.segmented-controller-negative {
.segmented-control-negative {
border: 1px solid $negative-color;
li {

Write Preview
Loading…
Cancel
Save