Title bar with segmented controller
-Title bars can also house segmented controllers. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.
+Title bar with segmented control
+Title bars can also house segmented controls. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.
Standard bars
-Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controllers (see following examples).
+Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controls (see following examples).
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 controller 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 "segmented-control-item". Then, just give each content section an id and point the link in the segmented control to that id.
-
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 6b9d800..4dc3810 100644
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@@ -261,7 +261,6 @@ textarea,
}
.segmented-control {
- color: #929292;
background-color: transparent;
border: 1px solid #929292;
}
@@ -271,6 +270,9 @@ textarea,
-moz-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
+.segmented-control li > a {
+ color: #929292;
+}
.segmented-control li:active {
background-color: #ebebeb;
}
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 2098766..ab560bd 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -1022,7 +1022,6 @@ hr {
background-image: none;
}
.platform-ios .segmented-control {
- color: #929292;
background-color: transparent;
border: 1px solid #929292;
}
@@ -1032,6 +1031,9 @@ hr {
-moz-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
+.platform-ios .segmented-control li > a {
+ color: #929292;
+}
.platform-ios .segmented-control li:active {
background-color: #ebebeb;
}
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
index 2f2018d..fc23215 100644
--- a/lib/sass/theme-ios.scss
+++ b/lib/sass/theme-ios.scss
@@ -364,19 +364,20 @@ textarea,
}
-//
-// Segmented controllers
+// Segmented controls
// --------------------------------------------------
.segmented-control {
- color: $default-color;
background-color: transparent;
border: 1px solid $default-color;
li {
border-color: $default-color;
@include transition(background-color .1s linear);
-
+
+ > a {
+ color: $default-color;
+ }
&:active {
background-color: lighten($default-color, 35%);
}