less/roojs-bootstrap/sidebar-nav.less
authoredward <edward@roojs.com>
Fri, 24 Nov 2017 13:50:38 +0000 (21:50 +0800)
committeredward <edward@roojs.com>
Fri, 24 Nov 2017 13:50:38 +0000 (21:50 +0800)
less/roojs-bootstrap/sidebar-nav.less [new file with mode: 0644]

diff --git a/less/roojs-bootstrap/sidebar-nav.less b/less/roojs-bootstrap/sidebar-nav.less
new file mode 100644 (file)
index 0000000..2b62a4f
--- /dev/null
@@ -0,0 +1,197 @@
+.sidebar {
+    margin-bottom: 5px;
+}
+
+/* override boostrap a:hover */
+.sidebar a:hover {
+    text-decoration: none;
+}
+
+.sidebar .sidebar-menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* GREY BG */
+.sidebar .sidebar-menu > li,
+.sidebar .sidebar-menu li.active li.treeview-menu
+{
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid #ccc;
+    background-color: #eee;
+}
+/* active child menu - white BG */
+.sidebar .sidebar-menu li.active li.treeview-menu {
+    background-color: #ddd;
+}
+
+.sidebar .sidebar-menu > li > a ,
+.sidebar .sidebar-menu li.open li.treeview-menu > a
+{
+    padding: 12px 5px 12px 15px;
+    display: block;
+    color: #333; 
+}
+
+.sidebar .sidebar-menu > li > a > .fa,
+.sidebar .sidebar-menu > li > a > .glyphicon,
+.sidebar .sidebar-menu > li > a > .ion {
+    width: 20px;
+}
+
+.sidebar .sidebar-menu li:hover,
+.sidebar .sidebar-menu li:focus,
+.sidebar .sidebar-menu li:active,
+.sidebar .sidebar-menu li.active li.treeview-menu:hover,
+.sidebar .sidebar-menu li.active li.treeview-menu:focus,
+.sidebar .sidebar-menu li.active li.treeview-menu:active
+{
+    background-color: #fff;
+}
+
+
+.sidebar .sidebar-menu li:hover a,
+.sidebar .sidebar-menu li:focus a,
+.sidebar .sidebar-menu li:active a,
+.sidebar .sidebar-menu li.oepn li.treeview-menu a:hover,
+.sidebar .sidebar-menu li.open li.treeview-menu a:focus,
+.sidebar .sidebar-menu li.open li.treeview-menu a:active
+{
+    color: #000;
+    text-decoration: none;
+}
+
+
+/* BLUE ACTIVE */
+.sidebar .sidebar-menu li.active {
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+}
+
+.sidebar .sidebar-menu li.active:hover,
+.sidebar .sidebar-menu li.active:focus,
+.sidebar .sidebar-menu li.active.focus
+{
+    color: #fff;
+    background-color: #204d74;
+    border-color: #122b40;
+}
+
+.sidebar .sidebar-menu li.active  a {
+    color: #fff;
+}
+
+.sidebar .sidebar-menu li.disabled {
+  color: #ccc;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.sidebar .sidebar-menu li.disabled a {
+    color: #ccc;
+    cursor: default;
+}
+
+.sidebar .sidebar-menu li.danger,
+.sidebar .sidebar-menu li.danger.active {
+  color: #fff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.sidebar .sidebar-menu li.danger:hover,
+.sidebar .sidebar-menu li.danger:focus,
+.sidebar .sidebar-menu li.danger.active:focus
+{
+    color: #fff;
+    background-color: #c9302c;
+    border-color: #ac2925;
+    border-bottom: 1px solid #ac2925;
+}
+
+.sidebar .sidebar-menu li.danger a,
+.sidebar .sidebar-menu li.danger.active a{
+    color: #fff;
+}
+
+/* --- open  */
+.sidebar .sidebar-menu li.open ul {
+    display:block;
+}
+
+.sidebar .sidebar-menu li.open .treeview-menu {
+    display: block;
+}
+
+/* --- treeview menu  */
+
+.sidebar .sidebar-menu .treeview-menu {
+  display: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.sidebar .sidebar-menu .treeview-menu > li {
+  margin: 0;
+}
+.sidebar .sidebar-menu li.open li.treeview-menu  > a {
+  padding: 5px 5px 5px 20px;
+  display: block;
+  font-size: 14px;
+  margin: 0px 0px;
+}
+.sidebar .sidebar-menu .treeview-menu > li > a > .fa,
+.sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
+.sidebar .sidebar-menu .treeview-menu > li > a > .ion {
+  width: 20px;
+}
+/* background to highlighted treeview node
+.sidebar .sidebar-menu li li.treeview-menu.active  {
+    background: #fff;
+}
+*/
+
+.sidebar .sidebar-menu li li.treeview-menu.active > a {
+    font-weight: bold;
+}
+/* active sidebard... */
+
+
+.badge-default {
+    background-color: #777;
+    color: #fff;
+}
+
+.badge-primary {
+    background-color: #337ab7;
+    color: #fff;
+}
+
+.badge-success {
+    background-color: #5cb85c;
+    color: #fff;
+}
+
+.badge-info {
+    background-color: #5bc0de;
+    color: #fff;
+}
+
+.badge-warning {
+    background-color: #f0ad4e;
+    color: #fff;
+}
+
+.badge-danger {
+    background-color: #d9534f;
+    color: #fff;
+}
+
+.sidebar .sidebar-menu > li.active .badge-info {
+    background-color: #fff;
+    color: #5bc0de;
+}
\ No newline at end of file