diff --git a/components.html b/components.html index 6be50f6..98ba18d 100644 --- a/components.html +++ b/components.html @@ -157,8 +157,8 @@ base_url: "../"
-

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.

@@ -265,10 +265,10 @@ base_url: "../"

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).

- +
{% highlight html %} - +
- +

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%); }