diff --git a/_includes/header.html b/_includes/header.html
index 0ae8145..9c2b79f 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -7,7 +7,7 @@
-
+
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 0c54f6d..0a023c9 100644
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@@ -34,6 +34,12 @@
box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
}
+.tab-item.active .tab-label,
+.tab-item.active .icon, .tab-item:active .tab-label,
+.tab-item:active .icon {
+ color: #007aff;
+}
+
.popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
@@ -239,20 +245,81 @@ textarea,
}
.segmented-controller {
+ color: #929292;
background-color: transparent;
- border: 1px solid #007aff;
+ border: 1px solid #929292;
}
.segmented-controller li {
- border-left: 1px solid #007aff;
+ border-color: #929292;
-webkit-transition: background-color 0.1s linear;
transition: background-color 0.1s linear;
}
-.segmented-controller li > a {
- color: #007aff;
+.segmented-controller li:active {
+ background-color: #ebebeb;
}
.segmented-controller li.selected {
+ background-color: #929292;
+}
+.segmented-controller li.selected > a {
+ color: #fff;
+}
+
+.segmented-controller-primary {
+ border: 1px solid #007aff;
+}
+.segmented-controller-primary li {
+ border-color: inherit;
+}
+.segmented-controller-primary li > a {
+ color: #007aff;
+}
+.segmented-controller-primary li:active {
+ background-color: #b3d7ff;
+}
+.segmented-controller-primary li.selected {
background-color: #007aff;
}
+.segmented-controller-primary li.selected > a {
+ color: #fff;
+}
+
+.segmented-controller-positive {
+ border: 1px solid #4cd964;
+}
+.segmented-controller-positive li {
+ border-color: inherit;
+}
+.segmented-controller-positive li > a {
+ color: #4cd964;
+}
+.segmented-controller-positive li:active {
+ background-color: #dff8e3;
+}
+.segmented-controller-positive li.selected {
+ background-color: #4cd964;
+}
+.segmented-controller-positive li.selected > a {
+ color: #fff;
+}
+
+.segmented-controller-negative {
+ border: 1px solid #dd524d;
+}
+.segmented-controller-negative li {
+ border-color: inherit;
+}
+.segmented-controller-negative li > a {
+ color: #dd524d;
+}
+.segmented-controller-negative li:active {
+ background-color: #fae4e3;
+}
+.segmented-controller-negative li.selected {
+ background-color: #dd524d;
+}
+.segmented-controller-negative li.selected > a {
+ color: #fff;
+}
.popover {
border-radius: 12px;
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
index db9883c..8c9e737 100644
--- a/lib/sass/theme-ios.scss
+++ b/lib/sass/theme-ios.scss
@@ -63,6 +63,16 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
border-top: 0;
@include box-shadow(0 0 -1px rgba(0,0,0,.85));
}
+.tab-item {
+ // Active states for the tab bar
+ &.active,
+ &:active {
+ .tab-label,
+ .icon {
+ color: $primary-color;
+ }
+ }
+}
// Nav bar in popovers
@@ -336,21 +346,95 @@ textarea,
// --------------------------------------------------
.segmented-controller {
+ color: $default-color;
background-color: transparent;
- border: 1px solid $primary-color;
+ border: 1px solid $default-color;
li {
- border-left: 1px solid $primary-color;
+ border-color: $default-color;
@include transition(background-color .1s linear);
- // Link that fills each section
+ &:active {
+ background-color: lighten($default-color, 35%);
+ }
+ &.selected {
+ background-color: $default-color;
+
+ > a {
+ color: #fff;
+ }
+ }
+ }
+}
+
+// Other segmented controller types
+// --------------------------------------------------
+
+// Primary
+.segmented-controller-primary {
+ border: 1px solid $primary-color;
+
+ li {
+ border-color: inherit;
+
> a {
color: $primary-color;
}
-
- // Selected segment of controller
+ &:active {
+ background-color: lighten($primary-color, 35%);
+ }
&.selected {
background-color: $primary-color;
+
+ > a {
+ color: #fff;
+ }
+ }
+ }
+}
+
+// Positive
+.segmented-controller-positive {
+ border: 1px solid $positive-color;
+
+ li {
+ border-color: inherit;
+
+ > a {
+ color: $positive-color;
+ }
+ &:active {
+ background-color: lighten($positive-color, 35%);
+ }
+ &.selected {
+ background-color: $positive-color;
+
+ > a {
+ color: #fff;
+ }
+ }
+ }
+}
+
+// Negative
+.segmented-controller-negative {
+ border: 1px solid $negative-color;
+
+ li {
+ border-color: inherit;
+
+ > a {
+ color: $negative-color;
+ }
+ &:active {
+ background-color: lighten($negative-color, 35%);
+ }
+ &.selected {
+ background-color: $negative-color;
+
+ > a {
+ color: #fff;
+ }
}
}
}