updated the bootstrap classes for bento theme

openSUSE · Jun 15, 2017 · 0aa8ba1 · 0aa8ba1
1 parent ddcb8b1
commit 0aa8ba1
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 71 deletions.
diff --git a/app/themes/bento/assets/stylesheets/bento/bootstrap_overrides.less b/app/themes/bento/assets/stylesheets/bento/bootstrap_overrides.less
@@ -1,34 +1,38 @@
 // Headings
 // --------------------------
-h1 { font-size: @baseFontSize * 2; }
-h2 { font-size: @baseFontSize * 1.75; }
-h3 { font-size: @baseFontSize * 1.50; }
-h4 { font-size: @baseFontSize * 1.25; }
+h1 { font-size: @font-size-base * 2; }
+h2 { font-size: @font-size-base * 1.75; }
+h3 { font-size: @font-size-base * 1.50; }
+h4 { font-size: @font-size-base * 1.25; }
 
-h1 small { font-size: @baseFontSize * 1.50; }
-h2 small { font-size: @baseFontSize * 1.20; }
+h1 small { font-size: @font-size-base * 1.50; }
+h2 small { font-size: @font-size-base * 1.20; }
 
 
 // Page header
 // -------------------------
 
 .page-header {
-    padding-bottom: (@baseLineHeight / 2) - 1;
-      margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
-        border-bottom: 1px solid @grayLighter;
+    padding-bottom: (@line-height-base / 2) - 1;
+      margin: @line-height-base 0 (@line-height-base * 1.5);
+        border-bottom: 1px solid @gray-lighter;
 }
 
+.navbar.navbar-fluid-top{
+  min-height: 32px;
+  max-height: 100%;
+}
 
 // openSUSE top bar
 // -------------------------
 .navbar-fixed-top, .navbar-static-top, .navbar-fluid-top {
   margin-bottom: 10px;
 
-  .navbar-inner {
+  .container-fluid {
     min-height: 30px;
-    background-color: @grayDark;
-    #gradient > .vertical(@grayDark, @grayDarkest);
-    .border-radius(0);
+    background-color: @gray-dark;
+    #gradient > .vertical(@gray-dark, @gray-darkest);
+    border-radius:0;
     box-shadow: none;
 
     li {
@@ -45,7 +49,7 @@ h2 small { font-size: @baseFontSize * 1.20; }
       }
     }
 
-    .brand {
+    .navbar-brand {
       padding-top: 1px;
       padding-bottom: 0px;
     }
@@ -55,11 +59,11 @@ h2 small { font-size: @baseFontSize * 1.20; }
 // Boxes
 // --------------------------
 #main, .well {
-  background-color: @wellBackground;
+  background-color: @well-bg;
   padding: @bentoWellPadding;
   padding-top: 0px;
   border: 1px solid @bentoWellBorderColor;
-  .border-radius(@baseBorderRadius);
+  border-radius:@border-radius-base;
   box-shadow: 0px 1px 3px @bentoShadowColor;
 
   a {
@@ -70,7 +74,7 @@ h2 small { font-size: @baseFontSize * 1.20; }
     }
 
     // Avoid overwriting good bootstrap defaults
-    &.btn { color: @grayDark; }
+    &.btn { color: @gray-dark; }
     &.btn-primary, &.btn-warning, &.btn-danger, &.btn-success,
     &.btn-info, &.btn-inverse {
       color: @white
@@ -83,17 +87,23 @@ h2 small { font-size: @baseFontSize * 1.20; }
 
     .nav-header {
       background:@white image-url('bento/gradient-light.png') repeat-x scroll 0 -25px;
-      color: @grayDarker;
+      color: @gray-darker;
       margin-bottom: 5px;
       text-transform: none;
-      font-size: @baseFontSize;
+      font-size: @font-size-base;
       font-weight: bold;
       margin: 1px -14px 5px;
       border-bottom: 1px solid @bentoWellBorderColor;
     }
   }
 }
 
+@media (min-width: @screen-md-min) { 
+  #main {
+    width: 74%;
+  }
+}
+
 // Forms
 // --------------------------------------
 select,
@@ -113,7 +123,7 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-  color: @grayDarker;
+  color: @gray-darker;
 }
 
 // Breadcrumbs
@@ -124,16 +134,16 @@ input[type="color"],
   padding: 0px 0px 0px 20px;
 
   li {
-    color: @grayDarker;
+    color: @gray-darker;
 
     text-shadow: none;
 
     &.active {
-      color: @grayDarker;
+      color: @gray-darker;
     }
 
     a {
-      color: @grayDark;
+      color: @gray-dark;
     }
   }
 }
diff --git a/app/themes/bento/assets/stylesheets/bento/bootstrap_variables.less b/app/themes/bento/assets/stylesheets/bento/bootstrap_variables.less
@@ -11,13 +11,13 @@
 // There were 18 tones of grey (20 including pure black and white) in the original bento theme
 // Let's group them this way:
 @black:                 #000;
-@grayDarkest:           #222; // Also #111 in original bento
-@grayDarker:            #333; // Also #2e2e2e and #444 in original bento
-@grayDark:              #555; // Also #4e4e4e and #666 in original bento
+@gray-darkest:           #222; // Also #111 in original bento
+@gray-darker:            #333; // Also #2e2e2e and #444 in original bento
+@gray-dark:              #555; // Also #4e4e4e and #666 in original bento
 @gray:                  #999; // Also #888 and #aaa in original bento
-@grayLight:             #bbb; // Also #ccc in original bento
-@grayLighter:           #e6e6e6; // Also #ddd and #eee in original bento
-@grayLightest:          #f6f6f6; // Also #fefefe in original bento
+@gray-light:             #bbb; // Also #ccc in original bento
+@gray-lighter:           #e6e6e6; // Also #ddd and #eee in original bento
+@gray-lightest:          #f6f6f6; // Also #fefefe in original bento
 @white:                 #fff;
 
 // Other colors
@@ -30,55 +30,57 @@
 
 // Typography
 // -------------------------
-@sansFontFamily:        "Lucida Grande", Arial, "DejaVu Sans", Verdana, sans-serif;
+@font-family-sans-serif:        "Lucida Grande", Arial, "DejaVu Sans", Verdana, sans-serif;
 // @serifFontFamily:       ;
 // @monoFontFamily:        ;
 
-@baseFontSize:          13px;
-@baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        16px;
-@altFontFamily:         @sansFontFamily;
+@font-size-base:          13px;
+@font-family-base:        @font-family-sans-serif;
 
-@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    bold;    // instead of browser default, bold
-@headingsColor:         @bentoGreen; // empty to use BS default, @textColor
+@headings-font-family:    inherit; // empty to use BS default, @baseFontFamily
+@headings-font-weight:    bold;    // instead of browser default, bold
+@headings-color:         @bentoGreen; // empty to use BS default, @textColor
 
 
 // Scaffolding
 // -------------------------
-@bodyBackground:        @grayLightest;
-@textColor:             @grayDarker;
+@body-bg:        @gray-lightest;
+@text-color:             @gray-darker;
 
 
 // Links
 // -------------------------
-@linkColor:             @bentoGreen;
-@linkColorHover:        @blue;
+@link-color:             @bentoGreen;
+@link-hover-color:        @blue;
 
+//Buttons
+// -------------------------
+@btn-primary-bg:         @green;
 
 // Wells
 // -------------------------
-@wellBackground:        @white;
+@well-bg:        @white;
 @bentoWellPadding:      10px;
-@bentoWellBorderColor:  darken(@grayLighter, 10%);
+@bentoWellBorderColor:  darken(@gray-lighter, 10%);
 
 
 // Component sizing
 // -------------------------
-@baseBorderRadius:      5px;
-@borderRadiusLarge:     7px;
+@border-radius-base:      5px;
+@border-radius-large:     7px;
 
 
 // Navbar
 // -------------------------
 @navbarCollapseWidth:             600px;
+@navbar-height:            32px;
 
 
 // Dropdowns
 // -------------------------
-@dropdownLinkBackgroundActive:  @grayLighter;
+@dropdown-link-active-bg:  @gray-lighter;
 
 // Misc
 // -------------------------
-@bentoShadowColor:  @grayLight;
+@bentoShadowColor:  @gray-light;
 
diff --git a/app/themes/bento/assets/stylesheets/bento/footer.less b/app/themes/bento/assets/stylesheets/bento/footer.less
@@ -7,6 +7,6 @@
     border-top: 1px dotted @gray;
     text-align: center;
     color: @gray;
-    font-size: @fontSizeMini;
+    font-size: @font-size-small;
   }
 }
diff --git a/app/themes/bento/assets/stylesheets/bento/login-form.less b/app/themes/bento/assets/stylesheets/bento/login-form.less
@@ -6,12 +6,12 @@
   top:31px;
   right:0;
   padding-bottom:10px;
-  color:@grayLightest;
-  background:@grayDarker image-url('bento/gradient-darker.png') repeat-x scroll bottom left;
-  .border-radius(@baseBorderRadius);
+  color:@gray-lightest;
+  background:@gray-darker image-url('bento/gradient-darker.png') repeat-x scroll bottom left;
+  border-radius:@border-radius-base;
   border-width:1px;
   border-style:solid;
-  border-color:transparent @grayDarker @grayDarkest;
+  border-color:transparent @gray-darker @gray-darkest;
   opacity:0.95;
   -moz-opacity:0.95;
   -webkit-box-shadow:0 1px 3px @gray;
@@ -21,7 +21,7 @@
   input {
     width:208px;
     font-size:1.5em;
-    border:3px solid @grayDarkest;
+    border:3px solid @gray-darkest;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     -khtml-border-radius:5px;
@@ -30,21 +30,21 @@
     &:focus {
       color: @blue;
       border-color: @blue;
-      -webkit-box-shadow:0 1px 3px @grayDarkest;
-      -moz-box-shadow:0 1px 3px @grayDarkest;
-      box-shadow:0 1px 3px @grayDarkest;
+      -webkit-box-shadow:0 1px 3px @gray-darkest;
+      -moz-box-shadow:0 1px 3px @gray-darkest;
+      box-shadow:0 1px 3px @gray-darkest;
     }
 
     &[type="submit"] {
-      border-color:@grayLightest;
+      border-color:@gray-lightest;
       -webkit-box-shadow:0 0px 2px #000;
-      -moz-box-shadow:0 1px 1px @grayDarkest;
-      box-shadow:0 1px 1px @grayDarkest;
-      color:@grayLighter;
+      -moz-box-shadow:0 1px 1px @gray-darkest;
+      box-shadow:0 1px 1px @gray-darkest;
+      color:@gray-lighter;
       cursor:pointer;
       background: @bentoGreenLight image-url('bento/gradient-dark-nav.png') repeat-x scroll 0 -15px;
       font-weight:bold;
-      text-shadow:0 0px 3px @grayDarker;
+      text-shadow:0 0px 3px @gray-darker;
       width:220px;
 
       &:hover { border-color: @blue; }
@@ -73,7 +73,7 @@
 
     a {
       text-decoration:none;
-      color:@grayLighter;
+      color:@gray-lighter;
       font-weight:bold;
 
       &:hover { text-decoration:underline; }

diff --git a/app/themes/bento/assets/stylesheets/bootstrap.css.less b/app/themes/bento/assets/stylesheets/bootstrap.css.less
@@ -4,11 +4,11 @@
 
 // Footer overrides for bento compatibility
 #full-page-wrap {
-  margin: 0 auto -(@baseFontSize*1.5+15px);
+  margin: 0 auto -(@font-size-base*1.5+15px);
 }
 #push-footer, #footer {
-  height: @baseFontSize*1.5+15px;
+  height: @font-size-base*1.5+15px;
 }
 #footer {
-  background-color: @bodyBackground;
+  background-color: @body-bg;
 }
diff --git a/app/themes/bento/views/layouts/_navbar_top.html.haml b/app/themes/bento/views/layouts/_navbar_top.html.haml
@@ -5,8 +5,8 @@
     %span.icon-bar
     %span.icon-bar
   =link_to image_tag("bento/header-logo.png"), root_path, :class => "brand navbar-brand"
-.container.nav-collapse
-  %ul.nav#global-navigation
+#bs-example-navbar-collapse-1.collapse.navbar-collapse
+  %ul.nav.navbar-nav#global-navigation
     %li#item-downloads= link_to t(:downloads, :scope => :bento), "http://en.opensuse.org/openSUSE:Browse#Downloads"
     %li#item-support= link_to t(:support, :scope => :bento), "http://en.opensuse.org/openSUSE:Browse#Support"
     %li#item-community= link_to t(:community, :scope => :bento), "http://en.opensuse.org/openSUSE:Browse#Community"

diff --git a/app/themes/bento/views/layouts/_subheader.html.haml b/app/themes/bento/views/layouts/_subheader.html.haml
@@ -1,7 +1,7 @@
-.row-fluid#subheader
-  .span6
+.row#subheader
+  .col-md-6
     = breadcrumbs
-  .span6.text-right
+  .col-md-6.text-right
     - if user_signed_in?
       = link_to t(:signed_in_as, :nickname => current_user.nickname), profile_path
       |

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -13,7 +13,7 @@
 
   %body
     #full-page-wrap
-      %nav.navbar.navbar-default.nav-main
+      %nav.navbar.navbar-default.nav-main.navbar-fluid-top
         .container-fluid
           = render "layouts/navbar_top"