diff --git a/dist/android-theme.css b/dist/android-theme.css index bd86010..c107725 100644 --- a/dist/android-theme.css +++ b/dist/android-theme.css @@ -373,6 +373,54 @@ textarea, background-color: #999999; } +.segmented-control-primary { + border: 0; +} +.segmented-control-primary li { + border-color: inherit; +} +.segmented-control-primary li > a { + color: #fff; +} +.segmented-control-primary li:active, .segmented-control-primary li.active { + background-color: #33b5e5; +} +.segmented-control-primary li:active > a, .segmented-control-primary li.active > a { + color: #fff; +} + +.segmented-control-positive { + border: 0; +} +.segmented-control-positive li { + border-color: inherit; +} +.segmented-control-positive li > a { + color: #fff; +} +.segmented-control-positive li:active, .segmented-control-positive li.active { + background-color: #99cc00; +} +.segmented-control-positive li:active > a, .segmented-control-positive li.active > a { + color: #fff; +} + +.segmented-control-negative { + border: 0; +} +.segmented-control-negative li { + border-color: inherit; +} +.segmented-control-negative li > a { + color: #fff; +} +.segmented-control-negative li:active, .segmented-control-negative li.active { + background-color: #ff4444; +} +.segmented-control-negative li:active > a, .segmented-control-negative li.active > a { + color: #fff; +} + .bar .segmented-control { top: 7px; } diff --git a/dist/ratchet.css b/dist/ratchet.css index c94127e..9d8112d 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -625,7 +625,7 @@ select { border: 0; } -.bar input[type=search] { +.bar input[type="search"] { height: 29px; margin: 6px 0; } @@ -743,8 +743,8 @@ input[type="button"] { font-size: 16px; color: #428bca; line-height: 44px; - background-color: transparent; border: none; + background-color: transparent; } .bar-nav .btn.btn-link:active, .bar-nav .btn.btn-link.active { color: #3071a9; @@ -986,10 +986,10 @@ input[type="button"] { width: 0; height: 0; margin-left: -15px; - content: ''; border-right: 15px solid transparent; border-bottom: 15px solid white; border-left: 15px solid transparent; + content: ''; } .popover.visible { opacity: 1; diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index 7671f63..6eba370 100644 --- a/docs-assets/css/docs.css +++ b/docs-assets/css/docs.css @@ -1505,6 +1505,51 @@ hr { .platform-android .segmented-control li:active, .platform-android .segmented-control li.active { background-color: #999999; } +.platform-android .segmented-control-primary { + border: 0; +} +.platform-android .segmented-control-primary li { + border-color: inherit; +} +.platform-android .segmented-control-primary li > a { + color: #fff; +} +.platform-android .segmented-control-primary li:active, .platform-android .segmented-control-primary li.active { + background-color: #33b5e5; +} +.platform-android .segmented-control-primary li:active > a, .platform-android .segmented-control-primary li.active > a { + color: #fff; +} +.platform-android .segmented-control-positive { + border: 0; +} +.platform-android .segmented-control-positive li { + border-color: inherit; +} +.platform-android .segmented-control-positive li > a { + color: #fff; +} +.platform-android .segmented-control-positive li:active, .platform-android .segmented-control-positive li.active { + background-color: #99cc00; +} +.platform-android .segmented-control-positive li:active > a, .platform-android .segmented-control-positive li.active > a { + color: #fff; +} +.platform-android .segmented-control-negative { + border: 0; +} +.platform-android .segmented-control-negative li { + border-color: inherit; +} +.platform-android .segmented-control-negative li > a { + color: #fff; +} +.platform-android .segmented-control-negative li:active, .platform-android .segmented-control-negative li.active { + background-color: #ff4444; +} +.platform-android .segmented-control-negative li:active > a, .platform-android .segmented-control-negative li.active > a { + color: #fff; +} .platform-android .bar .segmented-control { top: 7px; } diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss index 4237dc7..ac23dab 100644 --- a/lib/sass/badges.scss +++ b/lib/sass/badges.scss @@ -64,7 +64,7 @@ background-color: rgba(0,0,0,.15); } -// Styles for filled badges within filled buttons +// Styles for filled badges within default buttons .btn .badge-inverted, .btn:active .badge-inverted { background-color: transparent; @@ -77,14 +77,14 @@ // Position badges within block level buttons // Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always -// stays at true center of button +// stays at the center of button .btn-block .badge { position: absolute; right: 0; margin-right: 10px; } -// Ratchicons in table-views +// Badges in table-views .table-view .badge { margin-top: 2px; diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 2de8729..3781302 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -105,6 +105,7 @@ font-weight: 400; } + // Tab icon .icon { width: 24px; height: 24px; diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss index 2a5c91c..5087e7a 100644 --- a/lib/sass/buttons.scss +++ b/lib/sass/buttons.scss @@ -150,8 +150,8 @@ input[type="button"] { font-size: 16px; color: $primary-color; line-height: $bar-base-height; - background-color: transparent; border: none; + background-color: transparent; &:active, &.active { diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index 158db40..dbc821b 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -133,7 +133,7 @@ select { // -------------------------------------------------- // Position/size search bar within the bar -.bar input[type=search] { +.bar input[type="search"] { height: 29px; margin: 6px 0; } diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss index cd40f6b..839bfdb 100644 --- a/lib/sass/popovers.scss +++ b/lib/sass/popovers.scss @@ -24,10 +24,10 @@ width: 0; height: 0; margin-left: -15px; - content: ''; border-right: 15px solid transparent; border-bottom: 15px solid $chrome-color; border-left: 15px solid transparent; + content: ''; } // Popover animation diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss index 9754c43..9344caf 100644 --- a/lib/sass/theme-android.scss +++ b/lib/sass/theme-android.scss @@ -526,6 +526,73 @@ textarea, } +// Other segmented controller types +// -------------------------------------------------- + +// Primary +.segmented-control-primary { + border: 0; + + li { + border-color: inherit; + + > a { + color: #fff; + } + &:active, + &.active { + background-color: $primary-color; + + > a { + color: #fff; + } + } + } +} + +// Positive +.segmented-control-positive { + border: 0; + + li { + border-color: inherit; + + > a { + color: #fff; + } + &:active, + &.active { + background-color: $positive-color; + + > a { + color: #fff; + } + } + } +} + +// Negative +.segmented-control-negative { + border: 0; + + li { + border-color: inherit; + + > a { + color: #fff; + } + &:active, + &.active { + background-color: $negative-color; + + > a { + color: #fff; + } + } + } +} + + // Segmented controller in all bars // --------------------------------------------------