Fixing some aspects of the theme (#907)

apache · Aug 11, 2016 · bcbe08b · bcbe08b
1 parent 4247cab
commit bcbe08b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 21 deletions.
diff --git a/caravel/assets/stylesheets/caravel.css b/caravel/assets/stylesheets/caravel.css
@@ -135,9 +135,6 @@ span.title-block {
 div.navbar {
   z-index: 999;
 }
-.panel.panel-primary {
-  margin: 10px;
-}
 .datasource form div.form-control {
   margin-bottom: 5px !important;
 }

diff --git a/caravel/assets/stylesheets/less/bootswatch.less b/caravel/assets/stylesheets/less/bootswatch.less
@@ -70,11 +70,10 @@
 #btn(link,#fff);
 .btn-group {
   padding: 5px;
-  background-color: #fff;
 }
 .btn {
   text-transform: uppercase;
-  border: none;
+  .box-shadow(0px 0px 2px rgba(0,0,0,.4));
   .transition(all 0.4s);
 
   &-link {
@@ -91,7 +90,7 @@
   &-default {
 
     &.disabled {
-      background-color: rgba(0, 0, 0, 0.1);
+      background-color: rgba(0, 0, 0, 0.3);
       color: rgba(0, 0, 0, 0.4);
       opacity: 1;
     }
@@ -415,26 +414,29 @@ input[type="checkbox"],
 
 .nav-tabs {
   > li > a,
+  > li > a:hover
   > li > a:focus {
     margin-right: 0;
     background-color: transparent;
-    border: none;
+    border: 1px solid #ccc;
+    margin-right: 1px;
+    border-radius: 10px 10px 0px 0px;
     color: @navbar-default-link-color;
     .transition(all 0.2s);
 
     &:hover {
-      background-color: transparent;
       color: @brand-primary;
     }
   }
 
   & > li.active > a,
+  & > li.active > a:hover
   & > li.active > a:focus {
-    border: none;
-    color: @brand-primary;
 
+    border: 1px solid #aaa;
+    border-bottom: 3px solid black;
+    margin-right: 1px;
     &:hover {
-      border: none;
       color: @brand-primary;
     }
   }
@@ -600,14 +602,37 @@ input[type="checkbox"],
   }
 }
 
-.panel-default > .panel-heading {
-  color: #333!important;
+.panel > .panel-heading {
   border-bottom: 1px solid #aaa;
-  background-color: #fff!important;
-  margin: 10px;
+  background-color: #fff;
+  margin: 10px 5px;
   font-weight: bold;
 }
 
+.panel-default > .panel-heading {
+  border-bottom: 1px solid #aaa;
+}
+
+.panel-info > .panel-heading {
+  border-bottom: 1px solid @info-color;
+  color: @info-color;
+}
+
+.panel-danger > .panel-heading {
+  border-bottom: 1px solid @danger-color;
+  color: @danger-color;
+}
+
+.panel-warning > .panel-heading {
+  border-bottom: 1px solid @warning-color;
+  color: @warning-color;
+}
+
+.panel-success > .panel-heading {
+  border-bottom: 1px solid @success-color;
+  color: @success-color;
+}
+
 .popover {
   border: none;
 }

diff --git a/caravel/assets/stylesheets/less/variables.less b/caravel/assets/stylesheets/less/variables.less
@@ -27,10 +27,10 @@
 @gray-lighter:           lighten(@gray-base, 93.5%); // #eee
 
 @brand-primary:         #000;
-@brand-success:         darken(@lima, 15%);
-@brand-info:            @beach;
-@brand-warning:         @hackberry;
-@brand-danger:          darken(@rausch, 5%);
+@brand-success:         darken(@lima, 25%);
+@brand-warning:         darken(@beach, 10%);
+@brand-info:            darken(@babu, 10%);
+@brand-danger:          darken(@rausch, 15%);
 
 @default-color:         #444;
 @default-bg:            #fff;

diff --git a/caravel/templates/caravel/explore.html b/caravel/templates/caravel/explore.html
@@ -47,8 +47,8 @@
                   {% endfor %}
                 </select>
               </span>
-              <a href="{{ datasource.url }}" class="btn btn-default-outline" data-toggle="tooltip" title="Edit/configure datasource">
-                <i class="fa fa-edit"></i>&nbsp;
+              <a href="{{ datasource.url }}" data-toggle="tooltip" title="Edit/configure datasource">
+                <i class="fa fa-edit m-l-3" />
               </a>
             </div>
             <br/>

diff --git a/caravel/templates/caravel/theme.html b/caravel/templates/caravel/theme.html
@@ -564,6 +564,12 @@ <h1>Wells</h1>
       <div class="well">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
       </div>
+      <ul class="nav nav-tabs">
+        <li role="presentation" class="active"><a href="#">Home</a></li>
+        <li role="presentation"><a href="#">Profile</a></li>
+        <li role="presentation"><a href="#">Messages</a></li>
+      </ul>
+      This is tabs above here
 
     </div> <!-- /container -->