Pārlūkot izejas kodu

Fixed custom tabs issue #378

Abdullah Almsaeed 10 gadi atpakaļ
vecāks
revīzija
f2c3bd47aa

+ 1 - 1
build/less/dropdown.less

@@ -5,7 +5,7 @@
 
 
 /*Dropdowns in general*/
 /*Dropdowns in general*/
 .dropdown-menu {
 .dropdown-menu {
-  box-shadow: @box-boxshadow;
+  box-shadow: none;
   border-color: #eee;
   border-color: #eee;
   > li > a {
   > li > a {
     color: #777;
     color: #777;

+ 23 - 8
build/less/navs.less

@@ -7,7 +7,7 @@
 .nav-pills {
 .nav-pills {
   > li > a {
   > li > a {
     .border-radius(0);
     .border-radius(0);
-    border-top: 3px solid transparent;    
+    border-top: 3px solid transparent;
     color: #444;
     color: #444;
     > .fa,
     > .fa,
     > .glyphicon,
     > .glyphicon,
@@ -17,7 +17,7 @@
   }
   }
   > li.active > a,
   > li.active > a,
   > li.active > a:hover,
   > li.active > a:hover,
-  > li.active > a:focus {
+    > li.active > a:focus {
     background-color: #f4f4f4;
     background-color: #f4f4f4;
     border-top-color: @light-blue;
     border-top-color: @light-blue;
     color: #444;
     color: #444;
@@ -34,7 +34,7 @@
   > li > a {
   > li > a {
     .border-radius(0);
     .border-radius(0);
     border-top: 0;
     border-top: 0;
-    border-left: 3px solid transparent;    
+    border-left: 3px solid transparent;
     color: #444;
     color: #444;
   }
   }
   > li.active > a,
   > li.active > a,
@@ -68,12 +68,16 @@
       border-top: 3px solid transparent;
       border-top: 3px solid transparent;
       margin-bottom: -2px;
       margin-bottom: -2px;
       > a {
       > a {
+        color: #444;
         .border-radius(0)!important;
         .border-radius(0)!important;
         &,
         &,
         &:hover {
         &:hover {
           background: transparent;
           background: transparent;
           margin: 0;
           margin: 0;
         }
         }
+        &:hover {
+          color: #999;
+        }
       }
       }
       &:not(.active) {
       &:not(.active) {
         > a:hover,
         > a:hover,
@@ -90,10 +94,10 @@
       & > a,
       & > a,
       &:hover > a {
       &:hover > a {
         background-color: #fff;
         background-color: #fff;
-
+        color: #444;
       }
       }
       > a {
       > a {
-        border-top: 0;
+        border-top-color: transparent;
         border-left-color: #f4f4f4;
         border-left-color: #f4f4f4;
         border-right-color: #f4f4f4;
         border-right-color: #f4f4f4;
       }
       }
@@ -104,7 +108,7 @@
       margin-left: 0;
       margin-left: 0;
       &.active {
       &.active {
         > a {
         > a {
-          border-left-width: 0;
+          border-left-color: transparent;
         }
         }
       }
       }
     }
     }
@@ -117,10 +121,13 @@
       }
       }
       > li:first-of-type {
       > li:first-of-type {
         margin-right: 0;
         margin-right: 0;
+        > a {
+          border-left-width: 1px;
+        }
         &.active {
         &.active {
           > a {
           > a {
-            border-left-width: 1px;
-            border-right-width: 0;
+            border-left-color: #f4f4f4;
+            border-right-color: transparent;
           }
           }
         }
         }
       }
       }
@@ -144,6 +151,14 @@
     padding: 10px;
     padding: 10px;
     .border-bottom-radius(@box-border-radius);
     .border-bottom-radius(@box-border-radius);
   }
   }
+
+  .dropdown.open > a {
+    &:active,
+      &:focus {
+      background: transparent;
+      color: #999;
+    }
+  }
 }
 }
 
 
 /* Nav tabs bottom */
 /* Nav tabs bottom */

+ 18 - 5
dist/css/AdminLTE.css

@@ -889,7 +889,7 @@ a:focus {
  */
  */
 /*Dropdowns in general*/
 /*Dropdowns in general*/
 .dropdown-menu {
 .dropdown-menu {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: none;
   border-color: #eee;
   border-color: #eee;
 }
 }
 .dropdown-menu > li > a {
 .dropdown-menu > li > a {
@@ -2385,6 +2385,7 @@ a:focus {
   margin-right: 5px;
   margin-right: 5px;
 }
 }
 .nav-tabs-custom > .nav-tabs > li > a {
 .nav-tabs-custom > .nav-tabs > li > a {
+  color: #444;
   border-radius: 0 !important;
   border-radius: 0 !important;
 }
 }
 .nav-tabs-custom > .nav-tabs > li > a,
 .nav-tabs-custom > .nav-tabs > li > a,
@@ -2392,6 +2393,9 @@ a:focus {
   background: transparent;
   background: transparent;
   margin: 0;
   margin: 0;
 }
 }
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+  color: #999;
+}
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
@@ -2403,9 +2407,10 @@ a:focus {
 .nav-tabs-custom > .nav-tabs > li.active > a,
 .nav-tabs-custom > .nav-tabs > li.active > a,
 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
   background-color: #fff;
   background-color: #fff;
+  color: #444;
 }
 }
 .nav-tabs-custom > .nav-tabs > li.active > a {
 .nav-tabs-custom > .nav-tabs > li.active > a {
-  border-top: 0;
+  border-top-color: transparent;
   border-left-color: #f4f4f4;
   border-left-color: #f4f4f4;
   border-right-color: #f4f4f4;
   border-right-color: #f4f4f4;
 }
 }
@@ -2413,7 +2418,7 @@ a:focus {
   margin-left: 0;
   margin-left: 0;
 }
 }
 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
-  border-left-width: 0;
+  border-left-color: transparent;
 }
 }
 .nav-tabs-custom > .nav-tabs.pull-right {
 .nav-tabs-custom > .nav-tabs.pull-right {
   float: none!important;
   float: none!important;
@@ -2424,9 +2429,12 @@ a:focus {
 .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
 .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
   margin-right: 0;
   margin-right: 0;
 }
 }
-.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type > a {
   border-left-width: 1px;
   border-left-width: 1px;
-  border-right-width: 0;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
+  border-left-color: #f4f4f4;
+  border-right-color: transparent;
 }
 }
 .nav-tabs-custom > .nav-tabs > li.header {
 .nav-tabs-custom > .nav-tabs > li.header {
   line-height: 35px;
   line-height: 35px;
@@ -2445,6 +2453,11 @@ a:focus {
   border-bottom-right-radius: 3px;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 }
+.nav-tabs-custom .dropdown.open > a:active,
+.nav-tabs-custom .dropdown.open > a:focus {
+  background: transparent;
+  color: #999;
+}
 /* Nav tabs bottom */
 /* Nav tabs bottom */
 .tabs-bottom.nav-3 li a {
 .tabs-bottom.nav-3 li a {
   width: 3333.33333333% !important;
   width: 3333.33333333% !important;

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
dist/css/AdminLTE.min.css


+ 20 - 0
pages/UI/general.html

@@ -667,6 +667,7 @@
                 <ul class="nav nav-tabs">
                 <ul class="nav nav-tabs">
                   <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li>
                   <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li>
                   <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li>
                   <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li>
+                  <li><a href="#tab_3" data-toggle="tab">Tab 3</a></li>
                   <li class="dropdown">
                   <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                       Dropdown <span class="caret"></span>
                       Dropdown <span class="caret"></span>
@@ -703,6 +704,15 @@
                     words. If several languages coalesce, the grammar of the resulting language is more simple
                     words. If several languages coalesce, the grammar of the resulting language is more simple
                     and regular than that of the individual languages.
                     and regular than that of the individual languages.
                   </div><!-- /.tab-pane -->
                   </div><!-- /.tab-pane -->
+                  <div class="tab-pane" id="tab_3">
+                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+                    It has survived not only five centuries, but also the leap into electronic typesetting,
+                    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+                    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+                    like Aldus PageMaker including versions of Lorem Ipsum.
+                  </div><!-- /.tab-pane -->
                 </div><!-- /.tab-content -->
                 </div><!-- /.tab-content -->
               </div><!-- nav-tabs-custom -->
               </div><!-- nav-tabs-custom -->
             </div><!-- /.col -->
             </div><!-- /.col -->
@@ -713,6 +723,7 @@
                 <ul class="nav nav-tabs pull-right">
                 <ul class="nav nav-tabs pull-right">
                   <li class="active"><a href="#tab_1-1" data-toggle="tab">Tab 1</a></li>
                   <li class="active"><a href="#tab_1-1" data-toggle="tab">Tab 1</a></li>
                   <li><a href="#tab_2-2" data-toggle="tab">Tab 2</a></li>
                   <li><a href="#tab_2-2" data-toggle="tab">Tab 2</a></li>
+                  <li><a href="#tab_3-2" data-toggle="tab">Tab 3</a></li>
                   <li class="dropdown">
                   <li class="dropdown">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                       Dropdown <span class="caret"></span>
                       Dropdown <span class="caret"></span>
@@ -749,6 +760,15 @@
                     words. If several languages coalesce, the grammar of the resulting language is more simple
                     words. If several languages coalesce, the grammar of the resulting language is more simple
                     and regular than that of the individual languages.
                     and regular than that of the individual languages.
                   </div><!-- /.tab-pane -->
                   </div><!-- /.tab-pane -->
+                  <div class="tab-pane" id="tab_3-2">
+                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+                    It has survived not only five centuries, but also the leap into electronic typesetting,
+                    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+                    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+                    like Aldus PageMaker including versions of Lorem Ipsum.
+                  </div><!-- /.tab-pane -->
                 </div><!-- /.tab-content -->
                 </div><!-- /.tab-content -->
               </div><!-- nav-tabs-custom -->
               </div><!-- nav-tabs-custom -->
             </div><!-- /.col -->
             </div><!-- /.col -->

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels