padrino-admin 0.11.3 → 0.11.4

data/lib/padrino-admin/bootstrap-less/navs.less

@@ -7,7 +7,6 @@
 // --------------------------------------------------
 
 .nav {
-  margin-left: 0;
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;
@@ -20,68 +19,57 @@
     > a {
       position: relative;
       display: block;
-      padding: 10px 15px;
+      padding: @nav-link-padding;
       &:hover,
       &:focus {
         text-decoration: none;
-        background-color: @gray-lighter;
+        background-color: @nav-link-hover-bg;
       }
     }
 
     // Disabled state sets text to gray and nukes hover/tab effects
     &.disabled > a {
-      color: @gray-light;
-    }
-    &.disabled > a:hover,
-    &.disabled > a:focus {
-      color: @gray-light;
-      text-decoration: none;
-      background-color: transparent;
-      cursor: default;
-    }
+      color: @nav-disabled-link-color;
 
-    // Space the headers out when they follow another list item (link)
-    + .nav-header {
-      margin-top: 9px;
+      &:hover,
+      &:focus {
+        color: @nav-disabled-link-hover-color;
+        text-decoration: none;
+        background-color: transparent;
+        cursor: not-allowed;
+      }
     }
   }
 
   // Open dropdowns
-  &.open > a,
-  &.open > a:hover,
-  &.open > a:focus {
-    color: #fff;
-    background-color: @link-color;
-    border-color: @link-color;
-    .caret {
-      border-top-color: #fff;
-      border-bottom-color: #fff;
+  .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: @nav-link-hover-bg;
+      border-color: @link-color;
     }
   }
 
-  // Redeclare pull classes because of specificity
-  // Todo: consider making these utilities !important to avoid this bullshit
-  > .pull-right {
-    float: right;
-  }
-
   // Dividers (basically an hr) within the dropdown
   .nav-divider {
     .nav-divider();
   }
-}
-
 
+  // Prevent IE8 from misplacing imgs
+  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+  > li > a > img {
+    max-width: none;
+  }
+}
 
-// Nav variations
-// --------------------------------------------------
 
 // Tabs
 // -------------------------
 
 // Give the tabs something to sit on
 .nav-tabs {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid @nav-tabs-border-color;
   > li {
     float: left;
     // Make the list-items overlay the bottom border
@@ -94,25 +82,27 @@
       border: 1px solid transparent;
       border-radius: @border-radius-base @border-radius-base 0 0;
       &:hover {
-        border-color: @gray-lighter @gray-lighter #ddd;
+        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
       }
     }
 
     // Active state, and it's :hover to override normal :hover
-    &.active > a,
-    &.active > a:hover,
-    &.active > a:focus {
-      color: @gray;
-      background-color: @body-bg;
-      border: 1px solid #ddd;
-      border-bottom-color: transparent;
-      cursor: default;
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @nav-tabs-active-link-hover-color;
+        background-color: @nav-tabs-active-link-hover-bg;
+        border: 1px solid @nav-tabs-active-link-hover-border-color;
+        border-bottom-color: transparent;
+        cursor: default;
+      }
     }
   }
   // pulling this in mainly for less shorthand
   &.nav-justified {
-    .nav-justified;
-    .nav-tabs-justified;
+    .nav-justified();
+    .nav-tabs-justified();
   }
 }
 
@@ -128,17 +118,17 @@
       border-radius: 5px;
     }
     + li {
-      > a {
-        margin-left: 2px;
-      }
+      margin-left: 2px;
     }
 
     // Active state
-    &.active > a,
-    &.active > a:hover,
-    &.active > a:focus {
-      color: #fff;
-      background-color: @component-active-bg;
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @nav-pills-active-link-hover-color;
+        background-color: @nav-pills-active-link-hover-bg;
+      }
     }
   }
 }
@@ -149,62 +139,52 @@
   > li {
     float: none;
     + li {
-      > a {
-        margin-top: 2px;
-        margin-left: 0; // no need for this gap between nav items
-      }
+      margin-top: 2px;
+      margin-left: 0; // no need for this gap between nav items
     }
   }
 }
 
+
+// Nav variations
+// --------------------------------------------------
+
 // Justified nav links
 // -------------------------
 
 .nav-justified {
   width: 100%;
+
   > li {
     float: none;
-    display: table-cell;
-    width: 1%;
-    > a {
+     > a {
       text-align: center;
     }
   }
+
+  @media (min-width: @screen-sm) {
+    > li {
+      display: table-cell;
+      width: 1%;
+    }
+  }
 }
 
 // Move borders to anchors instead of bottom of list
-.nav-tabs-justified () {
+.nav-tabs-justified {
   border-bottom: 0;
   > li > a {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid @nav-tabs-justified-link-border-color;
 
     // Override margin from .nav-tabs
     margin-right: 0;
   }
   > .active > a {
-    border-bottom-color: @body-bg;
+    border-bottom-color: @nav-tabs-justified-active-link-border-color;
   }
-
-}
-
-
-
-// Nav headers (for dropdowns and lists)
-// -------------------------
-
-.nav-header {
-  display: block;
-  padding: 3px 15px;
-  font-size: @font-size-mini;
-  font-weight: bold;
-  line-height: @line-height-base;
-  color: @gray-light;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  text-transform: uppercase;
 }
 
 
-
 // Tabbable tabs
 // -------------------------
 
@@ -218,9 +198,11 @@
 .pill-content > .pill-pane {
   display: none;
 }
-.tab-content > .active,
-.pill-content > .active {
-  display: block;
+.tab-content,
+.pill-content {
+  > .active {
+    display: block;
+  }
 }
 
 

data/lib/padrino-admin/bootstrap-less/pager.less

@@ -17,13 +17,13 @@
       padding: 5px 14px;
       background-color: @pagination-bg;
       border: 1px solid @pagination-border;
-      border-radius: 15px;
+      border-radius: @pager-border-radius;
     }
 
     > a:hover,
     > a:focus {
       text-decoration: none;
-      background-color: @pagination-active-bg;
+      background-color: @pagination-hover-bg;
     }
   }
 
@@ -46,9 +46,9 @@
     > a:hover,
     > a:focus,
     > span {
-      color: @gray-light;
+      color: @pager-disabled-color;
       background-color: @pagination-bg;
-      cursor: default;
+      cursor: not-allowed;
     }
   }
 

data/lib/padrino-admin/bootstrap-less/pagination.less

@@ -6,83 +6,78 @@
   padding-left: 0;
   margin: @line-height-computed 0;
   border-radius: @border-radius-base;
-}
-.pagination > li {
-  display: inline; // Remove list-style and block-level defaults
-}
-.pagination > li > a,
-.pagination > li > span {
-  float: left; // Collapse white-space
-  padding: 4px 12px;
-  line-height: @line-height-base;
-  text-decoration: none;
-  background-color: @pagination-bg;
-  border: 1px solid @pagination-border;
-  border-left-width: 0;
-}
-.pagination > li > a:hover,
-.pagination > li > a:focus,
-.pagination > .active > a,
-.pagination > .active > span {
-  background-color: @pagination-active-bg;
-}
-.pagination > .active > a,
-.pagination > .active > span {
-  color: @gray-light;
-  cursor: default;
-}
-.pagination > .disabled > span,
-.pagination > .disabled > a,
-.pagination > .disabled > a:hover,
-.pagination > .disabled > a:focus {
-  color: @gray-light;
-  background-color: @pagination-bg;
-  cursor: default;
-}
-.pagination > li:first-child > a,
-.pagination > li:first-child > span {
-  border-left-width: 1px;
-  .border-left-radius(@border-radius-base);
-}
-.pagination > li:last-child > a,
-.pagination > li:last-child > span {
-  .border-right-radius(@border-radius-base);
-}
-
 
-// Sizing
-// --------------------------------------------------
+  > li {
+    display: inline; // Remove list-style and block-level defaults
+    > a,
+    > span {
+      position: relative;
+      float: left; // Collapse white-space
+      padding: @padding-base-vertical @padding-base-horizontal;
+      line-height: @line-height-base;
+      text-decoration: none;
+      background-color: @pagination-bg;
+      border: 1px solid @pagination-border;
+      margin-left: -1px;
+    }
+    &:first-child {
+      > a,
+      > span {
+        margin-left: 0;
+        .border-left-radius(@border-radius-base);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        .border-right-radius(@border-radius-base);
+      }
+    }
+  }
 
-// Large
-.pagination-large {
   > li > a,
   > li > span {
-    padding: @padding-large-vertical @padding-large-horizontal;
-    font-size: @font-size-large;
+    &:hover,
+    &:focus {
+      background-color: @pagination-hover-bg;
+    }
   }
-  > li:first-child > a,
-  > li:first-child > span {
-    .border-left-radius(@border-radius-large);
+
+  > .active > a,
+  > .active > span {
+    &,
+    &:hover,
+    &:focus {
+      z-index: 2;
+      color: @pagination-active-color;
+      background-color: @pagination-active-bg;
+      border-color: @pagination-active-bg;
+      cursor: default;
+    }
   }
-  > li:last-child > a,
-  > li:last-child > span {
-    .border-right-radius(@border-radius-large);
+
+  > .disabled {
+    > span,
+    > a,
+    > a:hover,
+    > a:focus {
+      color: @pagination-disabled-color;
+      background-color: @pagination-bg;
+      border-color: @pagination-border;
+      cursor: not-allowed;
+    }
   }
 }
 
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-lg {
+  .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
+}
+
 // Small
-.pagination-small {
-  > li > a,
-  > li > span {
-    padding: @padding-small-vertical @padding-small-horizontal;
-    font-size: @font-size-small;
-  }
-  > li:first-child > a,
-  > li:first-child > span {
-    .border-left-radius(@border-radius-small);
-  }
-  > li:last-child > a,
-  > li:last-child > span {
-    .border-right-radius(@border-radius-small);
-  }
+.pagination-sm {
+  .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
 }

data/lib/padrino-admin/bootstrap-less/panels.less

@@ -5,92 +5,144 @@
 
 // Base class
 .panel {
-  padding: 15px;
-  margin-bottom: 20px;
+  margin-bottom: @line-height-computed;
   background-color: @panel-bg;
-  border: 1px solid @panel-border;
+  border: 1px solid transparent;
   border-radius: @panel-border-radius;
   .box-shadow(0 1px 1px rgba(0,0,0,.05));
 }
 
+// Panel contents
+.panel-body {
+  padding: 15px;
+  .clearfix();
+}
+
+
+// List groups in panels
+//
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+
+.panel {
+  > .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      border-width: 1px 0;
+
+      // Remove border radius for top one
+      &:first-child {
+        .border-top-radius(0);
+      }
+      // But keep it for the last one
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+  .list-group-item:first-child {
+    border-top-width: 0;
+  }
+}
+
+
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel {
+  > .table {
+    margin-bottom: 0;
+  }
+  > .panel-body + .table {
+    border-top: 1px solid @table-border-color;
+  }
+}
+
+
 // Optional heading
 .panel-heading {
-  margin: -15px -15px 15px;
   padding: 10px 15px;
-  font-size: (@font-size-base * 1.25);
-  font-weight: 500;
-  background-color: @panel-heading-bg;
-  border-bottom: 1px solid @panel-border;
-  border-top-left-radius:  (@panel-border-radius - 1);
-  border-top-right-radius: (@panel-border-radius - 1);
+  border-bottom: 1px solid transparent;
+  .border-top-radius(@panel-border-radius - 1);
+}
+
+// Within heading, strip any `h*` tag of it's default margins for spacing.
+.panel-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: ceil((@font-size-base * 1.125));
+  > a {
+    color: inherit;
+  }
 }
 
 // Optional footer (stays gray in every modifier class)
 .panel-footer {
-  margin: 15px -15px -15px;
   padding: 10px 15px;
   background-color: @panel-footer-bg;
-  border-top: 1px solid @panel-border;
-  border-bottom-left-radius:  (@panel-border-radius - 1);
-  border-bottom-right-radius: (@panel-border-radius - 1);
+  border-top: 1px solid @panel-inner-border;
+  .border-bottom-radius(@panel-border-radius - 1);
 }
 
-// Contextual variations
-.panel-primary {
-  border-color: @panel-primary-border;
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: @panel-border-radius;
+    overflow: hidden; // crop contents when collapsed
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
   .panel-heading {
-    color: @panel-primary-text;
-    background-color: @panel-primary-heading-bg;
-    border-color: @panel-primary-border;
+    border-bottom: 0;
+    + .panel-collapse .panel-body {
+      border-top: 1px solid @panel-inner-border;
+    }
+  }
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid @panel-inner-border;
+    }
+  }
+
+  // New subcomponent for wrapping collapsable content for proper animations
+  .panel-collapse {
+
   }
 }
+
+
+// Contextual variations
+.panel-default {
+  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
+}
+.panel-primary {
+  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
+}
 .panel-success {
-  border-color: @panel-success-border;
-  .panel-heading {
-    color: @panel-success-text;
-    background-color: @panel-success-heading-bg;
-    border-color: @panel-success-border;
-  }
+  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 }
 .panel-warning {
-  border-color: @panel-warning-border;
-  .panel-heading {
-    color: @panel-warning-text;
-    background-color: @panel-warning-heading-bg;
-    border-color: @panel-warning-border;
-  }
+  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 }
 .panel-danger {
-  border-color: @panel-danger-border;
-  .panel-heading {
-    color: @panel-danger-text;
-    background-color: @panel-danger-heading-bg;
-    border-color: @panel-danger-border;
-  }
+  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 }
 .panel-info {
-  border-color: @panel-info-border;
-  .panel-heading {
-    color: @panel-info-text;
-    background-color: @panel-info-heading-bg;
-    border-color: @panel-info-border;
-  }
-}
-
-// List groups in panels
-.list-group-flush {
-  margin: 15px -15px -15px;
-
-  .list-group-item {
-    border-width: 1px 0;
-
-    // Remove border radius for top one
-    &:first-child {
-      .border-top-radius(0);
-    }
-    // But keep it for the last one
-    &:last-child {
-      border-bottom: 0;
-    }
-  }
+  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 }