padrino-admin 0.11.2 → 0.11.3

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

@@ -2,7 +2,6 @@
 // Grid system
 // --------------------------------------------------
 
-
 // Set the container width, and override it for fixed navbars in media queries
 .container {
   .container-fixed();
@@ -12,38 +11,194 @@
 .row {
   .make-row();
 }
-[class*="col-span-"] {
+
+// Common styles for small and large grid columns
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12 {
   position: relative;
+  // Prevent columns from collapsing when empty
   min-height: 1px;
+  // Inner gutter via padding
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
 
-// Responsive: Tablets and up
-@media screen and (min-width: 768px) {
-  .container {
-    max-width: 728px;
-  }
-  // Generate the grid columns and offsets
-  [class*="col-span-"] { float: left; }
-  .generate-grid-columns(@grid-columns);
+
+
+//
+// Container and grid column sizing
+//
+
+// Tiny device columns (smartphones)
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12 {
+  float: left;
 }
+.col-1  { width: percentage((1 / @grid-columns)); }
+.col-2  { width: percentage((2 / @grid-columns)); }
+.col-3  { width: percentage((3 / @grid-columns)); }
+.col-4  { width: percentage((4 / @grid-columns)); }
+.col-5  { width: percentage((5 / @grid-columns)); }
+.col-6  { width: percentage((6 / @grid-columns)); }
+.col-7  { width: percentage((7 / @grid-columns)); }
+.col-8  { width: percentage((8 / @grid-columns)); }
+.col-9  { width: percentage((9 / @grid-columns)); }
+.col-10 { width: percentage((10/ @grid-columns)); }
+.col-11 { width: percentage((11/ @grid-columns)); }
+.col-12 { width: 100%; }
 
-// Responsive: Desktops and up
-@media screen and (min-width: 992px) {
+// Small device columns (phones to tablets)
+@media (min-width: @screen-tablet) {
   .container {
-    max-width: 940px;
+    max-width: @container-tablet;
   }
+
+  .col-sm-1,
+  .col-sm-2,
+  .col-sm-3,
+  .col-sm-4,
+  .col-sm-5,
+  .col-sm-6,
+  .col-sm-7,
+  .col-sm-8,
+  .col-sm-9,
+  .col-sm-10,
+  .col-sm-11,
+  .col-sm-12 {
+    float: left;
+  }
+  .col-sm-1  { width: percentage((1 / @grid-columns)); }
+  .col-sm-2  { width: percentage((2 / @grid-columns)); }
+  .col-sm-3  { width: percentage((3 / @grid-columns)); }
+  .col-sm-4  { width: percentage((4 / @grid-columns)); }
+  .col-sm-5  { width: percentage((5 / @grid-columns)); }
+  .col-sm-6  { width: percentage((6 / @grid-columns)); }
+  .col-sm-7  { width: percentage((7 / @grid-columns)); }
+  .col-sm-8  { width: percentage((8 / @grid-columns)); }
+  .col-sm-9  { width: percentage((9 / @grid-columns)); }
+  .col-sm-10 { width: percentage((10/ @grid-columns)); }
+  .col-sm-11 { width: percentage((11/ @grid-columns)); }
+  .col-sm-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-pull-11 { right: percentage((11/ @grid-columns)); }
 }
 
-// Responsive: Large desktops and up
-@media screen and (min-width: 1200px) {
+// Medium and large device columns (desktop and up)
+@media (min-width: @screen-desktop) {
   .container {
-    max-width: 1170px;
+    max-width: @container-desktop;
   }
+  .col-lg-1,
+  .col-lg-2,
+  .col-lg-3,
+  .col-lg-4,
+  .col-lg-5,
+  .col-lg-6,
+  .col-lg-7,
+  .col-lg-8,
+  .col-lg-9,
+  .col-lg-10,
+  .col-lg-11,
+  .col-lg-12 {
+    float: left;
+  }
+  .col-lg-1  { width: percentage((1 / @grid-columns)); }
+  .col-lg-2  { width: percentage((2 / @grid-columns)); }
+  .col-lg-3  { width: percentage((3 / @grid-columns)); }
+  .col-lg-4  { width: percentage((4 / @grid-columns)); }
+  .col-lg-5  { width: percentage((5 / @grid-columns)); }
+  .col-lg-6  { width: percentage((6 / @grid-columns)); }
+  .col-lg-7  { width: percentage((7 / @grid-columns)); }
+  .col-lg-8  { width: percentage((8 / @grid-columns)); }
+  .col-lg-9  { width: percentage((9 / @grid-columns)); }
+  .col-lg-10 { width: percentage((10/ @grid-columns)); }
+  .col-lg-11 { width: percentage((11/ @grid-columns)); }
+  .col-lg-12 { width: 100%; }
+
+  // Offsets
+  .col-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 }
 
-// Reset utility classes due to specificity
-[class*="col-span-"].pull-right {
-  float: right;
+// Large desktops and up
+@media (min-width: @screen-large-desktop) {
+  .container {
+    max-width: @container-large-desktop;
+  }
 }

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

@@ -6,7 +6,7 @@
 .jumbotron {
   padding: 30px;
   margin-bottom: 30px;
-  font-size: 21px;
+  font-size: (@font-size-base * 1.5);
   font-weight: 200;
   line-height: (@line-height-base * 1.5);
   color: @jumbotron-lead-color;
@@ -20,13 +20,13 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: @screen-tablet) {
   .jumbotron {
     padding: 50px 60px;
-    border-radius: 6px; // Only round corners at higher resolutions
+    border-radius: @border-radius-large; // Only round corners at higher resolutions
 
     h1 {
-      font-size: 60px;
+      font-size: (@font-size-base * 4.5);
     }
   }
 }

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

@@ -2,45 +2,69 @@
 // Labels
 // --------------------------------------------------
 
-
-// Base classes
 .label {
+  display: inline;
   padding: .25em .6em;
   font-size: 75%;
   font-weight: 500;
-  color: #fff;
   line-height: 1;
-  vertical-align: middle;
-  white-space: nowrap;
+  color: #fff;
   text-align: center;
-  background-color: @grayLight;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: @gray-light;
   border-radius: .25em;
-}
 
-// Hover state, but only for links
-a.label {
-  &:hover,
-  &:focus {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer;
+  // Add hover effects, but only for links
+  &[href] {
+    &:hover,
+    &:focus {
+      color: #fff;
+      text-decoration: none;
+      cursor: pointer;
+      background-color: darken(@gray-light, 10%);
+    }
   }
 }
 
 // Colors
-// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
-.label {
-  // Danger (red)
-  &-danger            { background-color: @label-danger-bg; }
-  &-danger[href]      { background-color: darken(@label-danger-bg, 10%); }
-  // Warnings (orange)
-  &-warning           { background-color: @label-warning-bg; }
-  &-warning[href]     { background-color: darken(@label-warning-bg, 10%); }
-  // Success (green)
-  &-success           { background-color: @label-success-bg; }
-  &-success[href]     { background-color: darken(@label-success-bg, 10%); }
-  // Info (turquoise)
-  &-info              { background-color: @label-info-bg; }
-  &-info[href]        { background-color: darken(@label-info-bg, 10%); }
+// Contextual variations (linked labels get darker on :hover)
+.label-danger {
+  background-color: @label-danger-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-danger-bg, 10%);
+    }
+  }
 }
 
+.label-success {
+  background-color: @label-success-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-success-bg, 10%);
+    }
+  }
+}
+
+.label-warning {
+  background-color: @label-warning-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-warning-bg, 10%);
+    }
+  }
+}
+
+.label-info {
+  background-color: @label-info-bg;
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@label-info-bg, 10%);
+    }
+  }
+}

data/lib/padrino-admin/bootstrap-less/list-group.less

@@ -7,7 +7,8 @@
 // Easily usable on <ul>, <ol>, or <div>.
 .list-group {
   // No need to set list-style: none; since .list-group-item is block level
-  margin: 0 0 20px; // reset all margins because ul and ol
+  margin-bottom: 20px;
+  padding-left: 0; // reset padding because ul and ol
   background-color: @list-group-bg;
 }
 
@@ -21,16 +22,22 @@
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -1px;
   border: 1px solid @list-group-border;
-}
-// Round the first and last items
-.list-group-item:first-child {
-  .border-top-radius(@border-radius-base);
-}
-.list-group-item:last-child {
-  margin-bottom: 0;
-  .border-bottom-radius(@border-radius-base);
-}
 
+  // Round the first and last items
+  &:first-child {
+    .border-top-radius(@border-radius-base);
+  }
+  &:last-child {
+    margin-bottom: 0;
+    .border-bottom-radius(@border-radius-base);
+  }
+
+  // Align badges within list items
+  > .badge {
+    float: right;
+    margin-right: -15px;
+  }
+}
 
 // Custom content options
 // -------------------------
@@ -49,48 +56,34 @@
 
 // Custom content within linked items
 a.list-group-item {
+  // Colorize content accordingly
   .list-group-item-heading {
     color: #333;
   }
   .list-group-item-text {
     color: #555;
   }
-}
 
-// Hover state
-a.list-group-item:hover,
-a.list-group-item:focus {
-  text-decoration: none;
-  background-color: @list-group-hover-bg;
-}
-
-// Active class on item itself, not parent
-a.list-group-item.active {
-  z-index: 2; // Place active items above their siblings for proper border styling
-  color: @list-group-active-text;
-  background-color: @list-group-active-bg;
-  border-color: @list-group-active-border;
-
-  // Force color to inherit for custom content
-  .list-group-item-heading {
-    color: inherit;
-  }
-  .list-group-item-text {
-    color: lighten(@list-group-active-bg, 40%);
+  // Hover state
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: @list-group-hover-bg;
   }
-}
 
-// Chevrons and badges within list items
-// -------------------------
+  // Active class on item itself, not parent
+  &.active {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: @list-group-active-color;
+    background-color: @list-group-active-bg;
+    border-color: @list-group-active-border;
 
-.list-group-item > .badge,
-.list-group-item > .glyphicon-chevron-right {
-  float: right;
-  margin-right: -15px;
-}
-.list-group-item > .glyphicon-chevron-right {
-  margin-right: -15px;
-}
-.list-group-item > .glyphicon + .badge {
-  margin-right: 5px;
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: lighten(@list-group-active-bg, 40%);
+    }
+  }
 }