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; + } } } }