diff --git a/caravel/assets/stylesheets/caravel.css b/caravel/assets/stylesheets/caravel.css
index 35eb6dabab..1e825b8a1f 100644
--- a/caravel/assets/stylesheets/caravel.css
+++ b/caravel/assets/stylesheets/caravel.css
@@ -186,3 +186,7 @@ div.widget .chart-header a {
div.widget .slice_container {
overflow: auto;
}
+
+.alert a:not(.close) {
+ color: gray !important;
+}
diff --git a/caravel/assets/stylesheets/less/bootswatch.less b/caravel/assets/stylesheets/less/bootswatch.less
index e5edac2eb7..4e9cf7888a 100644
--- a/caravel/assets/stylesheets/less/bootswatch.less
+++ b/caravel/assets/stylesheets/less/bootswatch.less
@@ -479,19 +479,27 @@ input[type="checkbox"],
color: #fff;
&-success {
- background-color: @brand-success;
+ background-color: @alert-success-bg;
+ color: @alert-success-text;
+ border: @alert-success-border;
}
&-info {
- background-color: @brand-info;
+ background-color: @alert-info-bg;
+ color: @alert-info-text;
+ border: @alert-info-border;
}
&-warning {
- background-color: @brand-warning;
+ background-color: @alert-warning-bg;
+ color: @alert-warning-text;
+ border: @alert-warning-border;
}
&-danger {
- background-color: @brand-danger;
+ background-color: @alert-danger-bg;
+ color: @alert-danger-text;
+ border: @alert-danger-border;
}
a:not(.close),
diff --git a/caravel/assets/stylesheets/less/variables.less b/caravel/assets/stylesheets/less/variables.less
index 3d61578d4d..b8d050974d 100644
--- a/caravel/assets/stylesheets/less/variables.less
+++ b/caravel/assets/stylesheets/less/variables.less
@@ -27,11 +27,34 @@
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: @kazan;
-@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;
+@default-border: transparent;
+
+@primary-color: white;
+@primary-bg: @brand-primary;
+@primary-border: transparent;
+
+@success-color: @brand-success;
+@success-bg: lighten(@brand-success, 50%);
+@success-border: transparent;
+
+@info-color: @brand-info;
+@info-bg: lighten(@brand-info, 60%);
+@info-border: transparent;
+
+@warning-color: @brand-warning;
+@warning-bg: lighten(@brand-warning, 50%);
+@warning-border: transparent;
+
+@danger-color: @brand-danger;
+@danger-bg: lighten(@brand-danger, 40%);
+@danger-border: transparent;
//== Scaffolding
//
@@ -156,29 +179,29 @@
@btn-font-weight: normal;
-@btn-default-color: #444;
-@btn-default-bg: #fff;
-@btn-default-border: transparent;
+@btn-default-color: @default-color;
+@btn-default-bg: @default-bg;
+@btn-default-border: @default-border;
-@btn-primary-color: #444;
-@btn-primary-bg: #eee;
-@btn-primary-border: transparent;
+@btn-primary-color: black;
+@btn-primary-bg: #DDD;
+@btn-primary-border: @primary-border;
-@btn-success-color: #fff;
-@btn-success-bg: @brand-success;
-@btn-success-border: transparent;
+@btn-success-color: @success-color;
+@btn-success-bg: @success-bg;
+@btn-success-border: @success-border;
-@btn-info-color: #fff;
-@btn-info-bg: @brand-info;
-@btn-info-border: transparent;
+@btn-info-color: @info-color;
+@btn-info-bg: @info-bg;
+@btn-info-border: @info-border;
-@btn-warning-color: #fff;
-@btn-warning-bg: @brand-warning;
-@btn-warning-border: transparent;
+@btn-warning-color: @warning-color;
+@btn-warning-bg: @warning-bg;
+@btn-warning-border: @warning-border;
-@btn-danger-color: #fff;
-@btn-danger-bg: @brand-danger;
-@btn-danger-border: transparent;
+@btn-danger-color: @danger-color;
+@btn-danger-bg: @danger-bg;
+@btn-danger-border: @danger-border;
@btn-link-disabled-color: @gray-light;
@@ -508,21 +531,21 @@
//
//## Define colors for form feedback states and, by default, alerts.
-@state-success-text: @brand-success;
-@state-success-bg: #dff0d8;
-@state-success-border: darken(spin(@state-success-bg, -10), 5%);
+@state-success-text: @success-color;
+@state-success-bg: @success-bg;
+@state-success-border: @success-border;
-@state-info-text: @brand-info;
-@state-info-bg: #e1bee7;
-@state-info-border: darken(spin(@state-info-bg, -10), 7%);
+@state-info-text: @info-color;
+@state-info-bg: @info-bg;
+@state-info-border: @info-border;
-@state-warning-text: @brand-warning;
-@state-warning-bg: #ffe0b2;
-@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
+@state-warning-text: @warning-color;
+@state-warning-bg: @warning-bg;
+@state-warning-border: @warning-border;
-@state-danger-text: @brand-danger;
-@state-danger-bg: #f9bdbb;
-@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
+@state-danger-text: @danger-color;
+@state-danger-bg: @danger-bg;
+@state-danger-border: @danger-border;
//== Tooltips
@@ -576,18 +599,12 @@
//
//##
-//** Default label background color
@label-default-bg: @gray-light;
-//** Primary label background color
@label-primary-bg: @brand-primary;
-//** Success label background color
-@label-success-bg: @brand-success;
-//** Info label background color
-@label-info-bg: @brand-info;
-//** Warning label background color
-@label-warning-bg: @brand-warning;
-//** Danger label background color
-@label-danger-bg: @brand-danger;
+@label-success-bg: lighten(@brand-success, 30%);
+@label-info-bg: lighten(@brand-info, 25%);
+@label-warning-bg: lighten(@brand-warning, 30%);
+@label-danger-bg: lighten(@brand-danger, 20%);
//** Default label text color
@label-color: #fff;
@@ -595,6 +612,7 @@
@label-link-hover-color: #fff;
+
//== Modals
//
//##
@@ -653,6 +671,7 @@
@alert-danger-border: @state-danger-border;
+
//== Progress bars
//
//##
diff --git a/caravel/templates/caravel/theme.html b/caravel/templates/caravel/theme.html
new file mode 100644
index 0000000000..7d34d97ba4
--- /dev/null
+++ b/caravel/templates/caravel/theme.html
@@ -0,0 +1,571 @@
+{% extends "caravel/basic.html" %}
+
+{% block body %}
+
+
+
+
+
+
+
+
+
+
+
+
Theme example
+
This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.
+
+
+
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+ Link
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+ Link
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+ Link
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+ Link
+
+
+
+
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ Mark
+ Otto
+ @TwBootstrap
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+
+
+ Default
+ Primary
+ Success
+ Info
+ Warning
+ Danger
+
+
+
+
+
+ 42
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Well done! You successfully read this important alert message. With a
link .
+
+
+ Heads up! This alert needs your attention, but it's not super important.
+
+
+ Warning! Best check yo self, you're not looking too good.
+
+
+ Oh snap! Change a few things up and try submitting again.
+
+
+
+
+
+
+
40% Complete (success)
+
+
+
+
60% Complete (warning)
+
+
+
80% Complete (danger)
+
+
+
+
35% Complete (success)
+
20% Complete (warning)
+
10% Complete (danger)
+
+
+
+
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+
+
+
+
+
+
+
+
+
+
Panel title
+
+
+ Panel content
+
+
+
+
+
Panel title
+
+
+ Panel content
+
+
+
+
+
+
+
Panel title
+
+
+ Panel content
+
+
+
+
+
Panel title
+
+
+ Panel content
+
+
+
+
+
+
+
Panel title
+
+
+ Panel content
+
+
+
+
+
Panel title
+
+
+ Panel content
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
+{% endblock %}
diff --git a/caravel/views.py b/caravel/views.py
index 9851ba8fbc..db4b3a02ba 100755
--- a/caravel/views.py
+++ b/caravel/views.py
@@ -1275,6 +1275,10 @@ class Caravel(BaseCaravelView):
session.commit()
return content
+ @expose("/theme/")
+ def theme(self):
+ return self.render_template('caravel/theme.html')
+
@has_access
@expose("/sql_json/", methods=['POST', 'GET'])
@log_this