diff --git a/scss/_tabs.scss b/scss/_tabs.scss
index 73b02b6691..da22c030e7 100644
--- a/scss/_tabs.scss
+++ b/scss/_tabs.scss
@@ -94,10 +94,10 @@
background-color: $background;
}
.tab-item {
- color: rgba($color, $tabs-striped-off-opacity);
+ color: rgba($color, $tabs-off-opacity);
opacity: 1;
.badge{
- opacity:$tabs-striped-off-opacity;
+ opacity:$tabs-off-opacity;
}
&.tab-item-active,
&.active,
@@ -123,10 +123,21 @@
}
}
-@mixin tabs-background($style, $color) {
+@mixin tabs-background($style, $color, $border-color) {
+ &.#{$style} {
+ .tabs,
+ &> .tabs{
+ background-color: $color;
+ background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
+ }
+ }
+}
+
+@mixin tabs-striped-background($style, $color) {
&.#{$style} {
.tabs {
background-color: $color;
+ background-image:none;
}
}
}
@@ -134,10 +145,31 @@
@mixin tabs-color($style, $color) {
&.#{$style} {
.tab-item {
- color: rgba($color, $tabs-striped-off-opacity);
+ color: rgba($color, $tabs-off-opacity);
opacity: 1;
.badge{
- opacity:$tabs-striped-off-opacity;
+ opacity:$tabs-off-opacity;
+ }
+ &.tab-item-active,
+ &.active,
+ &.activated {
+ color: $color;
+ border: 0 solid $color;
+ .badge{
+ opacity: 1;
+ }
+ }
+ }
+ }
+}
+
+@mixin tabs-striped-color($style, $color) {
+ &.#{$style} {
+ .tab-item {
+ color: rgba($color, $tabs-off-opacity);
+ opacity: 1;
+ .badge{
+ opacity:$tabs-off-opacity;
}
&.tab-item-active,
&.active,
@@ -188,29 +220,49 @@
@include tabs-striped('tabs-royal', $light, $royal);
@include tabs-striped('tabs-dark', $light, $dark);
+ // doing this twice so striped tabs styles don't override specific bg and color vals
+ @include tabs-striped-background('tabs-background-light', $light);
+ @include tabs-striped-background('tabs-background-stable', $stable);
+ @include tabs-striped-background('tabs-background-positive', $positive);
+ @include tabs-striped-background('tabs-background-calm', $calm);
+ @include tabs-striped-background('tabs-background-assertive', $assertive);
+ @include tabs-striped-background('tabs-background-balanced', $balanced);
+ @include tabs-striped-background('tabs-background-energized',$energized);
+ @include tabs-striped-background('tabs-background-royal', $royal);
+ @include tabs-striped-background('tabs-background-dark', $dark);
- @include tabs-background('tabs-background-light', $light);
- @include tabs-background('tabs-background-stable', $stable);
- @include tabs-background('tabs-background-positive', $positive);
- @include tabs-background('tabs-background-calm', $calm);
- @include tabs-background('tabs-background-assertive', $assertive);
- @include tabs-background('tabs-background-balanced', $balanced);
- @include tabs-background('tabs-background-energized',$energized);
- @include tabs-background('tabs-background-royal', $royal);
- @include tabs-background('tabs-background-dark', $dark);
-
- @include tabs-color('tabs-color-light', $light);
- @include tabs-color('tabs-color-stable', $stable);
- @include tabs-color('tabs-color-positive', $positive);
- @include tabs-color('tabs-color-calm', $calm);
- @include tabs-color('tabs-color-assertive', $assertive);
- @include tabs-color('tabs-color-balanced', $balanced);
- @include tabs-color('tabs-color-energized',$energized);
- @include tabs-color('tabs-color-royal', $royal);
- @include tabs-color('tabs-color-dark', $dark);
+ @include tabs-striped-color('tabs-color-light', $light);
+ @include tabs-striped-color('tabs-color-stable', $stable);
+ @include tabs-striped-color('tabs-color-positive', $positive);
+ @include tabs-striped-color('tabs-color-calm', $calm);
+ @include tabs-striped-color('tabs-color-assertive', $assertive);
+ @include tabs-striped-color('tabs-color-balanced', $balanced);
+ @include tabs-striped-color('tabs-color-energized',$energized);
+ @include tabs-striped-color('tabs-color-royal', $royal);
+ @include tabs-striped-color('tabs-color-dark', $dark);
}
+@include tabs-background('tabs-background-light', $light, $bar-light-border);
+@include tabs-background('tabs-background-stable', $stable, $bar-stable-border);
+@include tabs-background('tabs-background-positive', $positive, $bar-positive-border);
+@include tabs-background('tabs-background-calm', $calm, $bar-calm-border);
+@include tabs-background('tabs-background-assertive', $assertive, $bar-assertive-border);
+@include tabs-background('tabs-background-balanced', $balanced, $bar-balanced-border);
+@include tabs-background('tabs-background-energized',$energized, $bar-energized-border);
+@include tabs-background('tabs-background-royal', $royal, $bar-royal-border);
+@include tabs-background('tabs-background-dark', $dark, $bar-dark-border);
+
+@include tabs-color('tabs-color-light', $light);
+@include tabs-color('tabs-color-stable', $stable);
+@include tabs-color('tabs-color-positive', $positive);
+@include tabs-color('tabs-color-calm', $calm);
+@include tabs-color('tabs-color-assertive', $assertive);
+@include tabs-color('tabs-color-balanced', $balanced);
+@include tabs-color('tabs-color-energized',$energized);
+@include tabs-color('tabs-color-royal', $royal);
+@include tabs-color('tabs-color-dark', $dark);
+
@mixin tabs-standard-color($style, $color, $off-color:$dark) {
&.#{$style} {
.tab-item {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 02670179a8..997d8bb528 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -279,8 +279,8 @@ $tabs-default-text: $tabs-stable-text !default;
$tab-item-max-width: 150px !default;
+$tabs-off-opacity: 0.4;
$tabs-striped-off-color: #000;
-$tabs-striped-off-opacity: 0.4;
$tabs-striped-border-width: 2px;
diff --git a/test/css/tabs-ios.html b/test/css/tabs-ios.html
new file mode 100644
index 0000000000..e825a532cb
--- /dev/null
+++ b/test/css/tabs-ios.html
@@ -0,0 +1,188 @@
+
+
+
+
+
+ Tabs: Android Colors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+