padrino-admin 0.11.2 → 0.11.3

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

@@ -12,15 +12,17 @@
 .img-thumbnail {
   padding: 4px;
   line-height: @line-height-base;
-  border: 1px solid #ddd;
-  border-radius: @border-radius-base;
+  background-color: @thumbnail-bg;
+  border: 1px solid @thumbnail-border;
+  border-radius: @thumbnail-border-radius;
   .transition(all .2s ease-in-out);
 }
 .thumbnail {
   display: block;
 }
+.thumbnail > img,
 .img-thumbnail {
-  display: inline-block;
+  .img-responsive();
 }
 
 // Add a hover state for linked versions only
@@ -31,12 +33,10 @@ a.thumbnail:focus {
 
 // Images and captions
 .thumbnail > img {
-  display: block;
-  max-width: 100%;
   margin-left: auto;
   margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;
-  color: @gray;
+  color: @thumbnail-caption-color;
 }

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

@@ -9,7 +9,7 @@
   z-index: @zindex-tooltip;
   display: block;
   visibility: visible;
-  font-size: 11px;
+  font-size: @font-size-mini;
   line-height: 1.4;
   .opacity(0);
 
@@ -47,6 +47,18 @@
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
   }
+  &.top-left .tooltip-arrow {
+    bottom: 0;
+    left: 5px;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &.top-right .tooltip-arrow {
+    bottom: 0;
+    right: 5px;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
   &.right .tooltip-arrow {
     top: 50%;
     left: 0;
@@ -68,4 +80,16 @@
     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-bottom-color: @tooltip-arrow-color;
   }
+  &.bottom-left .tooltip-arrow {
+    top: 0;
+    left: 5px;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    top: 0;
+    right: 5px;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
 }

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

@@ -7,10 +7,10 @@
 // -------------------------
 
 p {
-  margin: 0 0 (@line-height-base / 2);
+  margin: 0 0 (@line-height-computed / 2);
 }
 .lead {
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
   font-weight: 200;
   line-height: 1.4;
@@ -23,14 +23,12 @@ p {
 // Ex: 14px base font * 85% = about 12px
 small   { font-size: 85%; }
 
-strong  { font-weight: bold; }
-em      { font-style: italic; }
 cite    { font-style: normal; }
 
 // Utility classes
-.text-muted          { color: @grayLight; }
+.text-muted          { color: @gray-light; }
 a.text-muted:hover,
-a.text-muted:focus   { color: darken(@grayLight, 10%); }
+a.text-muted:focus   { color: darken(@gray-light, 10%); }
 
 .text-warning        { color: @state-warning-text; }
 a.text-warning:hover,
@@ -56,41 +54,37 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
-  line-height: @line-height-base;
+  line-height: @headings-line-height;
   small {
     font-weight: normal;
     line-height: 1;
-    color: @grayLight;
+    color: @gray-light;
   }
 }
 
 h1,
 h2,
 h3 {
-  margin-top: @line-height-base;
-  margin-bottom: (@line-height-base / 2);
-  line-height: (@line-height-base * 2);
-}
-h3 {
-  line-height: (@line-height-base * 1.5);
+  margin-top: @line-height-computed;
+  margin-bottom: (@line-height-computed / 2);
 }
 h4,
 h5,
 h6 {
-  margin-top: (@line-height-base / 2);
-  margin-bottom: (@line-height-base / 2);
+  margin-top: (@line-height-computed / 2);
+  margin-bottom: (@line-height-computed / 2);
 }
 
-h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
-h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
-h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
-h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
+h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
+h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
+h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
 h5, .h5 { font-size:  @font-size-base; }
-h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
+h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
 
-h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
-h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px
-h3 small, .h3 small { font-size: @font-size-base; }
+h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
+h3 small, .h3 small,
 h4 small, .h4 small { font-size: @font-size-base; }
 
 
@@ -98,9 +92,9 @@ h4 small, .h4 small { font-size: @font-size-base; }
 // -------------------------
 
 .page-header {
-  padding-bottom: ((@line-height-base / 2) - 1);
-  margin: (@line-height-base * 2) 0 @line-height-base;
-  border-bottom: 1px solid @grayLighter;
+  padding-bottom: ((@line-height-computed / 2) - 1);
+  margin: (@line-height-computed * 2) 0 @line-height-computed;
+  border-bottom: 1px solid @gray-lighter;
 }
 
 
@@ -111,8 +105,8 @@ h4 small, .h4 small { font-size: @font-size-base; }
 // Unordered and Ordered lists
 ul,
 ol {
-  padding: 0;
-  margin: 0 0 (@line-height-base / 2) 25px;
+  margin-top: 0;
+  margin-bottom: (@line-height-computed / 2);
 }
 ul ul,
 ul ol,
@@ -120,15 +114,12 @@ ol ol,
 ol ul {
   margin-bottom: 0;
 }
-li {
-  line-height: @line-height-base;
-}
 
 // List options
 
-// Unstyled keeps list items block level, just removes list-style
+// Unstyled keeps list items block level, just removes default browser padding and list-style
 .list-unstyled {
-  margin-left: 0;
+  padding-left: 0;
   list-style: none;
 }
 // Inline turns list items into inline-block
@@ -143,7 +134,7 @@ li {
 
 // Description Lists
 dl {
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
 }
 dt,
 dd {
@@ -153,11 +144,10 @@ dt {
   font-weight: bold;
 }
 dd {
-  margin-left: (@line-height-base / 2);
+  margin-left: (@line-height-computed / 2);
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
-  .clearfix(); // Ensure dl clears floats if empty dd elements present
   dt {
     float: left;
     width: (@component-offset-horizontal - 20);
@@ -166,6 +156,7 @@ dd {
     .text-overflow();
   }
   dd {
+    .clearfix(); // Clear the floated `dt` if an empty `dd` is present
     margin-left: @component-offset-horizontal;
   }
 }
@@ -175,7 +166,7 @@ dd {
 
 // Horizontal rules
 hr {
-  margin: @line-height-base 0;
+  margin: @line-height-computed 0;
   border: 0;
   border-top: 1px solid @hr-border;
   border-bottom: 1px solid #fff;
@@ -187,7 +178,7 @@ abbr[title],
 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted @grayLight;
+  border-bottom: 1px dotted @gray-light;
 }
 abbr.initialism {
   font-size: 90%;
@@ -196,19 +187,21 @@ abbr.initialism {
 
 // Blockquotes
 blockquote {
-  padding: 0 0 0 15px;
-  margin: 0 0 @line-height-base;
-  border-left: 5px solid @grayLighter;
+  padding: (@line-height-computed / 2) @line-height-computed;
+  margin: 0 0 @line-height-computed;
+  border-left: 5px solid @gray-lighter;
   p {
-    margin-bottom: 0;
     font-size: (@font-size-base * 1.25);
     font-weight: 300;
     line-height: 1.25;
   }
+  p:last-child {
+    margin-bottom: 0;
+  }
   small {
     display: block;
     line-height: @line-height-base;
-    color: @grayLight;
+    color: @gray-light;
     &:before {
       content: '\2014 \00A0';
     }
@@ -219,7 +212,7 @@ blockquote {
     float: right;
     padding-right: 15px;
     padding-left: 0;
-    border-right: 5px solid @grayLighter;
+    border-right: 5px solid @gray-lighter;
     border-left: 0;
     p,
     small {
@@ -247,7 +240,7 @@ blockquote:after {
 // Addresses
 address {
   display: block;
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-style: normal;
   line-height: @line-height-base;
 }

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

@@ -10,11 +10,11 @@
 // Grays
 // -------------------------
 
-@grayDarker:            #222;
-@grayDark:              #333;
-@gray:                  #555;
-@grayLight:             #999;
-@grayLighter:           #eee;
+@gray-darker:            lighten(#000, 13.5%); // #222
+@gray-dark:              lighten(#000, 20%);   // #333
+@gray:                   lighten(#000, 33.5%); // #555
+@gray-light:             lighten(#000, 60%);   // #999
+@gray-lighter:           lighten(#000, 93.5%); // #eee
 
 // Brand colors
 // -------------------------
@@ -29,7 +29,7 @@
 // -------------------------
 
 @body-bg:               #fff;
-@text-color:            @grayDark;
+@text-color:            @gray-dark;
 
 // Links
 // -------------------------
@@ -46,27 +46,34 @@
 @font-family-base:        @font-family-sans-serif;
 
 @font-size-base:          14px;
-@font-size-large:         (@font-size-base * 1.25); // ~18px
-@font-size-small:         (@font-size-base * 0.85); // ~12px
-@font-size-mini:          (@font-size-base * 0.75); // ~11px
+@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
+@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
+@font-size-mini:          ceil(@font-size-base * 0.75); // ~11px
 
-@line-height-base:        20px;
+@line-height-base:        1.428571429; // 20/14
+@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
 
-@headings-font-family:    inherit; // empty to use BS default, @font-family-base
+@headings-font-family:    @font-family-base;
 @headings-font-weight:    500;
+@headings-line-height:    1.1;
 
 
 // Components
 // -------------------------
-// Based on 14px font-size and 1.5 line-height
+// Based on 14px font-size and 1.428 line-height (~20px to start)
 
-@padding-large:           11px 14px; // 44px
-@padding-small:           2px 10px;  // 26px
-@padding-mini:            0 6px;   // 22px
+@padding-base-vertical:          8px;
+@padding-base-horizontal:        12px;
 
-@border-radius-base:      4px;
-@border-radius-large:     6px;
-@border-radius-small:     3px;
+@padding-large-vertical:         14px;
+@padding-large-horizontal:       16px;
+
+@padding-small-vertical:         5px;
+@padding-small-horizontal:       10px;
+
+@border-radius-base:             4px;
+@border-radius-large:            6px;
+@border-radius-small:            3px;
 
 @component-active-bg:            @brand-primary;
 
@@ -78,30 +85,35 @@
 @table-bg-accent:                    #f9f9f9; // for striping
 @table-bg-hover:                     #f5f5f5; // for hover
 
-@table-border:                       #ddd; // table and cell border
+@table-border-color:                 #ddd; // table and cell border
 
 
 // Buttons
 // -------------------------
 
-@btn-color:                      #fff;
-@btn-bg:                         #a7a9aa;
-@btn-border:                     @btn-bg;
+@btn-default-color:              #fff;
+@btn-default-bg:                 #474949;
+@btn-default-border:             @btn-default-bg;
 
+@btn-primary-color:              @btn-default-color;
 @btn-primary-bg:                 @brand-primary;
 @btn-primary-border:             @btn-primary-bg;
 
-@btn-bg-success:                 @brand-success;
-@btn-success-border:             @btn-bg-success;
+@btn-success-color:              @btn-default-color;
+@btn-success-bg:                 @brand-success;
+@btn-success-border:             @btn-success-bg;
 
-@btn-bg-warning:                 @brand-warning;
-@btn-warning-border:             @btn-bg-warning;
+@btn-warning-color:              @btn-default-color;
+@btn-warning-bg:                 @brand-warning;
+@btn-warning-border:             @btn-warning-bg;
 
-@btn-bg-danger:                  @brand-danger;
-@btn-danger-border:              @btn-bg-danger;
+@btn-danger-color:               @btn-default-color;
+@btn-danger-bg:                  @brand-danger;
+@btn-danger-border:              @btn-danger-bg;
 
-@btn-bg-info:                    @brand-info;
-@btn-info-border:                @btn-bg-info;
+@btn-info-color:                 @btn-default-color;
+@btn-info-bg:                    @brand-info;
+@btn-info-border:                @btn-info-bg;
 
 
 
@@ -109,18 +121,16 @@
 // -------------------------
 
 @input-bg:                       #fff;
-@input-bg-disabled:              @grayLighter;
+@input-bg-disabled:              @gray-lighter;
 
 @input-border:                   #ccc;
 @input-border-radius:            @border-radius-base;
 
-@input-color-placeholder:        @grayLight;
+@input-color-placeholder:        @gray-light;
 
-@input-height-base:              (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
-@input-height-large:             (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
-@input-height-small:             (@line-height-base + 6px);  // base line-height + 4px vertical padding + 2px top/bottom border
-
-@form-actions-bg:                 #f5f5f5;
+@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
+@input-height-large:             (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
+@input-height-small:             (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
 
 
 // Dropdowns
@@ -131,13 +141,12 @@
 @dropdown-divider-top:           #e5e5e5;
 @dropdown-divider-bottom:        #fff;
 
-@dropdown-link-color:            @grayDark;
-@dropdown-link-hover-color:      #fff;
-@dropdown-link-hover-bg:         @dropdown-link-active-bg;
-
 @dropdown-link-active-color:     #fff;
 @dropdown-link-active-bg:        @component-active-bg;
 
+@dropdown-link-color:            @gray-dark;
+@dropdown-link-hover-color:      #fff;
+@dropdown-link-hover-bg:         @dropdown-link-active-bg;
 
 
 // COMPONENT VARIABLES
@@ -157,23 +166,14 @@
 @zindex-modal:             1050;
 
 
-// Glyphicons font path
-// -------------------------
-@glyphicons-font-path:          "../fonts";
-
-
 // Navbar
 // -------------------------
 
 // Basics of a navbar
 @navbar-height:                    50px;
-@navbar-text:                      #777;
+@navbar-color:                     #777;
 @navbar-bg:                        #eee;
-
-// Navbar brand label
-@navbar-brand-color:               @navbar-link-color;
-@navbar-brand-hover-color:         darken(@navbar-link-color, 10%);
-@navbar-brand-hover-bg:            transparent;
+@navbar-padding:                   floor(@grid-gutter-width / 2);  // ~15px
 
 // Navbar links
 @navbar-link-color:                #777;
@@ -184,17 +184,17 @@
 @navbar-link-disabled-color:       #ccc;
 @navbar-link-disabled-bg:          transparent;
 
+// Navbar brand label
+@navbar-brand-color:               @navbar-link-color;
+@navbar-brand-hover-color:         darken(@navbar-link-color, 10%);
+@navbar-brand-hover-bg:            transparent;
+
 // Inverted navbar
-@navbar-inverse-text:                       @grayLight;
+@navbar-inverse-color:                       @gray-light;
 @navbar-inverse-bg:                         #222;
 
-// Inverted navbar brand label
-@navbar-inverse-brand-color:                @navbar-inverse-link-color;
-@navbar-inverse-brand-color-hover:          #fff;
-@navbar-inverse-brand-bg-hover:             transparent;
-
 // Inverted navbar links
-@navbar-inverse-link-color:                 @grayLight;
+@navbar-inverse-link-color:                 @gray-light;
 @navbar-inverse-link-hover-color:           #fff;
 @navbar-inverse-link-hover-bg:              transparent;
 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@@ -202,6 +202,11 @@
 @navbar-inverse-link-disabled-color:        #444;
 @navbar-inverse-link-disabled-bg:           transparent;
 
+// Inverted navbar brand label
+@navbar-inverse-brand-color:                @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-bg:             transparent;
+
 // Inverted navbar search
 // Normal navbar needs no special styles or vars
 @navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
@@ -221,7 +226,7 @@
 // Jumbotron
 // -------------------------
 
-@jumbotron-bg:                   @grayLighter;
+@jumbotron-bg:                   @gray-lighter;
 @jumbotron-heading-color:        inherit;
 @jumbotron-lead-color:           inherit;
 
@@ -275,6 +280,28 @@
 // -------------------------
 @modal-inner-padding:         20px;
 
+@modal-title-padding:         15px;
+@modal-title-line-height:     @line-height-base;
+
+// Alerts
+// -------------------------
+@alert-bg:                    @state-warning-bg;
+@alert-text:                  @state-warning-text;
+@alert-border:                @state-warning-border;
+@alert-border-radius:         @border-radius-base;
+
+@alert-success-bg:            @state-success-bg;
+@alert-success-text:          @state-success-text;
+@alert-success-border:        @state-success-border;
+
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text;
+@alert-danger-border:         @state-danger-border;
+
+@alert-info-bg:               @state-info-bg;
+@alert-info-text:             @state-info-text;
+@alert-info-border:           @state-info-border;
+
 
 // Progress bars
 // -------------------------
@@ -293,7 +320,7 @@
 @list-group-border-radius:    @border-radius-base;
 
 @list-group-hover-bg:         #f5f5f5;
-@list-group-active-text:      #fff;
+@list-group-active-color:     #fff;
 @list-group-active-bg:        @component-active-bg;
 @list-group-active-border:    @list-group-active-bg;
 
@@ -303,6 +330,7 @@
 @panel-border:                #ddd;
 @panel-border-radius:         @border-radius-base;
 @panel-heading-bg:            #f5f5f5;
+@panel-footer-bg:             #f5f5f5;
 
 @panel-primary-text:          #fff;
 @panel-primary-border:        @brand-primary;
@@ -325,6 +353,14 @@
 @panel-info-heading-bg:       @state-info-bg;
 
 
+// Thumbnails
+// -------------------------
+@thumbnail-caption-color:     @text-color;
+@thumbnail-bg:                @body-bg;
+@thumbnail-border:            #ddd;
+@thumbnail-border-radius:     @border-radius-base;
+
+
 // Wells
 // -------------------------
 @well-bg:                     #f5f5f5;
@@ -334,12 +370,48 @@
 // -------------------------
 
 // Hr border color
-@hr-border:                   @grayLighter;
+@hr-border:                   @gray-lighter;
 
 // Horizontal forms & lists
 @component-offset-horizontal: 180px;
 
 
+// Media queries breakpoints
+// --------------------------------------------------
+
+// Tiny screen / phone
+@screen-tiny:                480px;
+@screen-phone:               @screen-tiny;
+
+// Small screen / tablet
+@screen-small:               768px;
+@screen-tablet:              @screen-small;
+
+// Medium screen / desktop
+@screen-medium:              992px;
+@screen-desktop:             @screen-medium;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          @screen-small-max;
+
+// Large screen / wide desktop
+@screen-large:               1200px;
+@screen-large-desktop:       @screen-large;
+
+
+// Container sizes
+// --------------------------------------------------
+
+// Small screen / tablet
+@container-tablet:          728px;
+
+// Medium screen / desktop
+@container-desktop:         940px;
+
+// Large screen / wide desktop
+@container-large-desktop:   1170px;
+
 
 // Grid system
 // --------------------------------------------------
@@ -349,4 +421,4 @@
 // Padding, to be divided by two and applied to the left and right of all columns
 @grid-gutter-width:         30px;
 // Point at which the navbar stops collapsing
-@grid-float-breakpoint:     768px;
+@grid-float-breakpoint:     @screen-tablet;