Tukan Theme Update for Sidebar

misc/theme-tukan/Makefile

@@ -1,5 +1,5 @@
 PLUGIN_NAME=		theme-tukan
-PLUGIN_VERSION=		1.0
+PLUGIN_VERSION=		1.1
 PLUGIN_COMMENT=		The tukan theme - blue/white
 PLUGIN_MAINTAINER=	martin@team-rebellion.net
 

misc/theme-tukan/src/opnsense/www/themes/tukan/assets/stylesheets/main.scss

@@ -2460,7 +2460,7 @@ legend
   margin-bottom: 20px
   font-size: 21px
   line-height: inherit
-  color: #2d2d2d333
+  color: #2d2d2d
   border: 0
   border-bottom: 1px solid #e5e5e5
 
@@ -6473,7 +6473,7 @@ a.list-group-item-danger
 
       .badge
         color: #f5f5f5
-        background-color: #2d2d2d333
+        background-color: #2d2d2d
 
     .panel-footer + .panel-collapse > .panel-body
       border-bottom-color: #c2c2c2
@@ -6494,8 +6494,8 @@ a.list-group-item-danger
         color: #FF8B00
         background-color: #fff
 
-   .panel-footer + .panel-collapse > .panel-body
-    border-bottom-color: #FF8B00
+    .panel-footer + .panel-collapse > .panel-body
+      border-bottom-color: #FF8B00
 
 .panel-success
   border-color: #9BD275
@@ -7340,6 +7340,12 @@ button.close
   .hidden-sm
     display: none !important
 
+/* COLLAPSE SIDEBAR @media
+@media (max-width: 768px), (max-height: 669px)
+  .toggle-sidebar
+    display: none !important
+
+/* COLLAPSE SIDEBAR @media END
 @media (min-width: 992px) and (max-width: 1199px)
   .hidden-md
     display: none !important
@@ -7592,6 +7598,219 @@ body
     border-bottom: 4px solid green
     border-top: 0
 
+/* BOOTSTRAP EDIT END
+
+/* COLLAPSE SIDEBAR
+
+main.page-content.col-lg-12
+  padding-left: 90px
+
+#navigation.col-sidebar-left
+  width: 70px
+  background-color: transparent !important
+  overflow: hidden
+
+  > div
+    &.row
+      height: 100% !important
+
+      > nav.page-side-nav
+        width: 70px
+        background-color: #172c38 !important
+        height: 100% !important
+
+    > nav > #mainmenu > div >
+      a.list-group-item
+        font-size: 11px
+        text-align: center
+
+        > span
+          &.fa, &.glyphicon
+            visibility: visible
+            font-size: 28px
+
+          &.__iconspacer
+            padding-left: 7px
+            padding-right: 7px
+
+        width: 70px
+        height: 70px
+        padding-left: 10px
+        padding-right: 10px
+        padding-top: 15px
+        padding-bottom: 15px
+        border-bottom: 2px solid #1b313e
+
+      div
+        &.collapsing > a.list-group-item
+          padding-left: 10px !important
+          font-size: 11px !important
+          display: block !important
+          position: absolute !important
+          left: 70px !important
+          margin-top: -70px !important
+
+        &.collapse.in > div.collapsing > a.list-group-item
+          padding-left: 10px !important
+          font-size: 11px !important
+          display: block !important
+          position: absolute !important
+          left: 148px !important
+          margin-top: -28px !important
+
+      a.list-group-item
+        &.active-menu-title, &[aria-expanded="true"]
+          color: #000 !important
+          background-color: #FFF !important
+
+      div
+        &.collapse
+          &.in
+            > a.list-group-item[aria-expanded="true"]
+              color: #000 !important
+              background-color: #FFF !important
+
+            > div.collapse.in > a.list-group-item
+              padding-left: 10px !important
+              font-size: 11px !important
+              background-color: #294C5FE6 !important
+
+              &.menu-level-3-item.active
+                color: #000 !important
+                background-color: #FFF !important
+
+          > a.list-group-item
+            padding-left: 10px !important
+            font-size: 11px !important
+            background-color: #294C5FE6 !important
+
+          > div.collapse > a.list-group-item
+            padding-left: 10px !important
+            font-size: 11px !important
+
+        &.collapsed > a.list-group-item
+          padding-left: 10px !important
+          font-size: 11px !important
+          background-color: #FFF !important
+
+        &.collapse.in > a.list-group-item:hover
+          color: #000 !important
+          background-color: #FFF !important
+
+a.list-group-item:focus
+  color: #000 !important
+  background-color: #FFF !important
+
+#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapse.in > a.list-group-item:hover, a.list-group-item:focus
+  text-decoration: none !important
+  color: #000 !important
+  background-color: #FFF !important
+
+#navigation.col-sidebar-left > div > nav > #mainmenu > div > div
+  &.collapse.in > a.list-group-item
+    &.active-menu-title, &.collapsed:focus, &:focus
+      color: #000 !important
+      background-color: #FFF !important
+
+  &.active-menu.collapse.in > a.list-group-item.active
+    color: #000 !important
+    background-color: #FFF !important
+
+  &.collapse.in
+    width: 150px
+    font-size: 11px
+    display: block
+    z-index: 10
+    position: absolute
+    left: 70px
+    margin-top: -70px
+    height: auto
+    border: 1px solid #1f3a4a
+    -webkit-transition: width 0.1s
+    -o-transition: width 0.1s
+    transition: width 0.1s
+    -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+    -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+    box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+
+  &.collapsing
+    width: 0px
+    font-size: 11px
+    position: absolute
+    display: block
+    z-index: 10
+    left: 70px
+    margin-top: -70px
+    height: auto
+    -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+    -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+    box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+
+  &.collapse.in > div
+    &.collapse.in
+      width: 150px
+      font-size: 11px
+      display: block
+      z-index: 10
+      position: absolute
+      left: 148px
+      margin-top: -28px
+      height: auto
+      border: 1px solid #1f3a4a
+      -webkit-transition: width 0.1s
+      -o-transition: width 0.1s
+      transition: width 0.1s
+      -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+      -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+      box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.5)
+
+    &.collapsing
+      width: 0px
+      font-size: 11px
+      position: absolute
+      display: block
+      z-index: 10
+      left: 148px
+      margin-top: -28px
+      height: auto
+      -webkit-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.75)
+      -moz-box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.75)
+      box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.75)
+
+/* Sub Level One
+
+/* Sub Level Two
+
+button.toggle-sidebar
+  &.glyphicon
+    &.glyphicon-chevron-left, &.glyphicon-chevron-right
+      position: absolute
+      -webkit-transition: all 0.1s ease
+      -moz-transition: all 0.1s ease
+      -o-transition: all 0.1s ease
+      -ms-transition: all 0.1s ease
+      transition: all 0.1s ease
+
+    &.glyphicon-chevron-left:active, &.glyphicon-chevron-right:active
+      position: absolute
+      -webkit-transform: rotate(180deg)
+      -moz-transform: rotate(180deg)
+      -o-transform: rotate(180deg)
+      -ms-transform: rotate(180deg)
+      transform: rotate(180deg)
+
+    &.glyphicon-chevron-left:focus, &.glyphicon-chevron-right:focus
+      outline: none
+
+  color: #FFF
+  background-color: transparent
+  font-size: 14px
+  border: none
+  margin-top: 18px
+  float: left
+
+/* COLLAPSE SIDEBAR END
+
 #navigation.collapse.in
   display: block !important
 
@@ -7884,7 +8103,7 @@ label > input
 /* fields in firewall schedule
 
 [data-state="lightcoral"]
-  background-color: lightcoral
+  background-color: #ffe83e
 
 [data-state="white"]
   background-color: inherit
@@ -7935,6 +8154,9 @@ textarea#update_status
 .fa-search::before, .fa-refresh::before
   color: #FFFFFF !important
 
+#navigation > .fa-search::before, .fa-refresh::before
+  color: inherit !important
+
 #totals .fa-search::before
   color: #FFF !important
   background-color: #ff7e25