Browse Source

just use .segmented-control

pull/249/head
connors 11 years ago
parent
commit
bac44bff21
  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

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

8
dist/android-theme.css vendored

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

46
dist/ios-theme.css vendored

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

16
dist/ratchet-theme.css vendored

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

54
dist/ratchet.css vendored

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

2
dist/ratchet.js vendored

@ -534,7 +534,7 @@
!function () { !function () {
var getTarget = function (target) { 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 (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
} }

68
docs-assets/css/docs.css

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

2
lib/js/segmented-controllers.js

@ -6,7 +6,7 @@
!function () { !function () {
var getTarget = function (target) { 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 (; target && target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) { if (popovers[i] === target) return target; } for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
} }

4
lib/sass/docs.scss

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

12
lib/sass/segmented-controllers.scss

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

2
lib/sass/theme-android.scss

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

4
lib/sass/theme-classic.scss

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

8
lib/sass/theme-ios.scss

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

Loading…
Cancel
Save