diff options
author | XhmikosR <xhmikosr@gmail.com> | 2015-02-09 06:43:49 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2015-02-09 06:43:49 +0300 |
commit | 12a156146e5d19e08be76fe297390254f21daa35 (patch) | |
tree | d546117d19f335201121c123fd7a9c3acca1fad5 | |
parent | c24c4cc50dd107a2f813aea6642b615ebf26b27a (diff) | |
parent | 1ac5d960779063c623c86fdc20a076c3154439ed (diff) |
Merge pull request #265 from medokin/master
Added badge to tab-item
-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 47b20b7..ac3891e 100644 --- a/dist/css/ratchet.css +++ b/dist/css/ratchet.css @@ -563,6 +563,7 @@ input[type="button"] { border-bottom: 0; } .bar-tab .tab-item { + position: relative; display: table-cell; width: 1%; height: 50px; @@ -573,6 +574,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 458810e..8ae2b77 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 47b20b7..ac3891e 100644 --- a/docs/dist/css/ratchet.css +++ b/docs/dist/css/ratchet.css @@ -563,6 +563,7 @@ input[type="button"] { border-bottom: 0; } .bar-tab .tab-item { + position: relative; display: table-cell; width: 1%; height: 50px; @@ -573,6 +574,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 d3e59dc..15f208f 100644 --- a/sass/bars.scss +++ b/sass/bars.scss @@ -91,6 +91,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; @@ -104,6 +105,14 @@ color: $primary-color; } + // Activity badge on an icon + .badge { + vertical-align: top; + position: absolute; + top: 3px; + left: 50%; + } + // Tab icon .icon { top: 3px; |