diff options
| author | Nikodem Jaworski <nikodemjaworski@gmail.com> | 2014-02-26 02:01:20 +0400 |
|---|---|---|
| committer | Nikodem Jaworski <nikodemjaworski@gmail.com> | 2014-03-27 20:49:56 +0400 |
| commit | 1ac5d960779063c623c86fdc20a076c3154439ed (patch) | |
| tree | 537e2177c8dcf8eb46df488d46b17879023dfa59 | |
| parent | aacdc900305475596d61b9d4b74a8f54f18817f0 (diff) | |
Added badge to tab-items
| -rw-r--r-- | dist/css/ratchet.css | 7 | ||||
| -rw-r--r-- | docs/components.html | 1 | ||||
| -rw-r--r-- | docs/dist/css/ratchet.css | 7 | ||||
| -rw-r--r-- | sass/bars.scss | 9 |
4 files changed, 24 insertions, 0 deletions
diff --git a/dist/css/ratchet.css b/dist/css/ratchet.css index a873e99..d75eeaa 100644 --- a/dist/css/ratchet.css +++ b/dist/css/ratchet.css @@ -552,6 +552,7 @@ input[type="button"] { border-bottom: 0; } .bar-tab .tab-item { + position: relative; display: table-cell; width: 1%; height: 50px; @@ -562,6 +563,12 @@ input[type="button"] { .bar-tab .tab-item.active, .bar-tab .tab-item:active { color: #428bca; } +.bar-tab .tab-item .badge { + vertical-align: top; + position: absolute; + top: 3px; + left: 50%; +} .bar-tab .tab-item .icon { top: 3px; width: 24px; diff --git a/docs/components.html b/docs/components.html index e05da8a..ee31e4f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -211,6 +211,7 @@ title: Components · Ratchet <span class="tab-label">Home</span> </a> <a class="tab-item" href="#"> + <div class="badge badge-negative badge-filled">3</div> <span class="icon icon-person"></span> <span class="tab-label">Profile</span> </a> diff --git a/docs/dist/css/ratchet.css b/docs/dist/css/ratchet.css index a873e99..d75eeaa 100644 --- a/docs/dist/css/ratchet.css +++ b/docs/dist/css/ratchet.css @@ -552,6 +552,7 @@ input[type="button"] { border-bottom: 0; } .bar-tab .tab-item { + position: relative; display: table-cell; width: 1%; height: 50px; @@ -562,6 +563,12 @@ input[type="button"] { .bar-tab .tab-item.active, .bar-tab .tab-item:active { color: #428bca; } +.bar-tab .tab-item .badge { + vertical-align: top; + position: absolute; + top: 3px; + left: 50%; +} .bar-tab .tab-item .icon { top: 3px; width: 24px; diff --git a/sass/bars.scss b/sass/bars.scss index 6fb3904..3d3b108 100644 --- a/sass/bars.scss +++ b/sass/bars.scss @@ -89,6 +89,7 @@ // Navigational tab (Nested to be more specific for the icons in tab-items) .tab-item { + position: relative; display: table-cell; width: 1%; height: $bar-tab-height; @@ -102,6 +103,14 @@ color: $primary-color; } + // Activity badge on an icon + .badge { + vertical-align: top; + position: absolute; + top: 3px; + left: 50%; + } + // Tab icon .icon { top: 3px; |