Skip to content

Commit

Permalink
Altering theme for more subtle alerts / labels / buttons (#798)
Browse files Browse the repository at this point in the history 
* Altering theme for more subtle alerts / labels / buttons

* Taking comments into account

* changed button-primary to more sober grey instead of brand-primary
* remove carousel from theme demo page and other useless items

* Forcing links to be gray
  • Loading branch information
@mistercrunch
mistercrunch authored Aug 2, 2016
1 parent e7ce38b commit aaef338
Show file tree
Hide file tree
Showing 5 changed files with 654 additions and 48 deletions.
4 changes: 4 additions & 0 deletions caravel/assets/stylesheets/caravel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,3 +186,7 @@ div.widget .chart-header a {
div.widget .slice_container {
overflow: auto;
}

.alert a:not(.close) {
color: gray !important;
}
16 changes: 12 additions & 4 deletions caravel/assets/stylesheets/less/bootswatch.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
107 changes: 63 additions & 44 deletions caravel/assets/stylesheets/less/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
//
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -576,25 +599,20 @@
//
//##

//** 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;
//** Default text color of a linked label
@label-link-hover-color: #fff;



//== Modals
//
//##
Expand Down Expand Up @@ -653,6 +671,7 @@
@alert-danger-border: @state-danger-border;



//== Progress bars
//
//##
Expand Down
Loading

0 comments on commit aaef338

Please sign in to comment.