diff --git a/css/bootflat-iconbars.css b/css/bootflat-iconbars.css new file mode 100644 index 0000000..77630f6 --- /dev/null +++ b/css/bootflat-iconbars.css @@ -0,0 +1,225 @@ +/* + Icon Bars + + Add vertical et horinzontal icon bars to Bootflat + + Philippe Rodier (philippe.rodier@laposte.net) +*/ + +/*------------------------------------*\ + $iconbar +\*------------------------------------*/ + +.iconbar { + background-color: #d3d7d7; + border-radius: 6px; + float: left; + margin: 0 20px 20px 0; +} +.iconbar > ul { + display: block; + list-style-type: none; + margin: 0; + padding: 0; +} +.iconbar > ul > li { + margin: 0; + padding: 0; +} +.iconbar > ul > li.active > a { + color: #aeb1b1; +} +.iconbar > ul > li:first-child > a { + padding-top: 32px; +} +.iconbar > ul > li > a { + color: #ffffff; + display: block; + font-size: 24px; + padding: 8px 30px 32px; + position: relative; + text-decoration: none; +} +.iconbar > ul > li > a:hover, +.iconbar > ul > li > a:focus { + color: #aeb1b1; + -webkit-transition: 0.25s; + -moz-transition: 0.25s; + transition: 0.25s; +} +@media (max-width: 480px) { + .iconbar > ul > li > a, + .iconbar.iconbar-horizontal > ul > li > a, + .iconbar > ul > li.active > a, + .iconbar.iconbar-horizontal > ul > li.active > a { + display: inline-block; + padding: 25px; + } + .iconbar .iconbar-unread { + right: 15px; + top: 13px; + } + .iconbar.iconbar-horizontal { + height: 70px; + overflow: auto; + width: 100%; + white-space: nowrap; + } + .iconbar.iconbar-horizontal > ul > li { + float: none; + display: inline; + } + .iconbar.iconbar-horizontal .iconbar-unread { + right: 15px; + } +} +[class*="iconbar-stick-"] { + border-radius: 0; + margin: 0; + position: fixed; + z-index: 1001; +} +[class*="iconbar-stick-"] > ul { + margin: 0; +} +.iconbar-stick-left { + bottom: 0; + left: 0; + top: 0; +} +.iconbar-unread { + background-color: #aeb1b1; + border-radius: 50%; + color: #ffffff; + font-size: 11.998px; + font-weight: 500; + line-height: 18.998px; + min-width: 20px; + min-height: 20px; + padding: 0 2px; + position: absolute; + right: 20px; + text-align: center; + top: -2px; + -webkit-font-smoothing: auto; +} +.iconbar.iconbar-square { + border-radius: 0; +} + +.iconbar-default { + background-color: #ffffff; + border: 1px solid #d3d7d7; +} + +.iconbar-default > ul > li > a { + color: #d3d7d7; +} + +.iconbar-default > ul > li.active > a { + color: #aeb1b1; +} +.iconbar-default > ul > li > a:hover, +.iconbar-default > ul > li > a:focus { + color: #aeb1b1; +} +.iconbar-default .iconbar-unread { + background-color: #aeb1b1; +} + +.iconbar-primary { + background-color: #2986b9; +} +.iconbar-primary > ul > li.active > a { + color: #1b71a0; +} +.iconbar-primary > ul > li > a:hover, +.iconbar-primary > ul > li > a:focus { + color: #1b71a0; +} +.iconbar-primary .iconbar-unread { + background-color: #1b71a0; +} + +.iconbar-success { + background-color: #64b92a; +} +.iconbar-success > ul > li.active > a { + color: #50a118; +} +.iconbar-success > ul > li > a:hover, +.iconbar-success > ul > li > a:focus { + color: #50a118; +} +.iconbar-success .iconbar-unread { + background-color: #50a118; +} +.iconbar-danger { + background-color: #c0392b; +} +.iconbar-danger > ul > li.active > a { + color: #a5281b; +} +.iconbar-danger > ul > li > a:hover, +.iconbar-danger > ul > li > a:focus { + color: #a5281b; +} +.iconbar-danger .iconbar-unread { + background-color: #a5281b; +} +.iconbar-warning { + background-color: #d7af0d; +} +.iconbar-warning > ul > li.active > a { + color: #b1900b; +} +.iconbar-warning > ul > li > a:hover, +.iconbar-warning > ul > li > a:focus { + color: #b1900b; +} +.iconbar-warning .iconbar-unread { + background-color: #b1900b; +} +.iconbar-info { + background-color: #4fbeba; +} +.iconbar-info > ul > li.active > a { + color: #1ba5a0; +} +.iconbar-info > ul > li > a:hover, +.iconbar-info > ul > li > a:focus { + color: #1ba5a0; +} +.iconbar-info .iconbar-unread { + background-color: #1ba5a0; +} +.iconbar-inverse { + background-color: #263544; +} +.iconbar-inverse > ul > li.active > a { + color: #1ba5a0; +} +.iconbar-inverse > ul > li > a:hover, +.iconbar-inverse > ul > li > a:focus { + color: #1ba5a0; +} +.iconbar-inverse .iconbar-unread { + background-color: #1ba5a0; +} +.iconbar-horizontal { + clear: both; + float: left; +} +.iconbar-horizontal > ul > li { + float: left; +} +.iconbar-horizontal > ul > li:first-child > a { + padding: 25px 32px 25px; +} +.iconbar-horizontal > ul > li > a { + padding: 25px 32px 25px 8px; +} +.iconbar-horizontal .iconbar-unread { + right: 23px; + top: 13px; +} diff --git a/iconbars.html b/iconbars.html new file mode 100644 index 0000000..d330947 --- /dev/null +++ b/iconbars.html @@ -0,0 +1,430 @@ +
+

Icon bars

+

Vertical and horizontal Icon Bars with Glyphicons.

+

Example : round vertical

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

Example : square vertical

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

Example : round horizontal

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

Example : square horizontal

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+