lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to new palette and some fixes

Browse Source
This commit is contained in:
Joseph Cohen
2014-12-31 17:54:02 -06:00
parent a0ed5ae33d
commit b2bb7949f6
24 changed files with 490 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/sass/_palette.scss
+34 -16
View File
@@ -1,23 +1,41 @@
$green: #2ECC71;
$dark-green: darken($green, 10%);
// Theme colours.
$cachet-base-light: #fff;
$cachet-base-medium: #f0f3f4;
$cachet-base-dark: #333;
$blue: #3498db;
$dark-blue: darken($blue, 10%);
$cachet-primary: #7ED321;
$cachet-secondary: #6DB81C;
$red: #ff6f6f;
$dark-red: darken($red, 10%);
$cachet-link: #7ed321;
$cachet-link-hover: #01579b;
$teal: #0dccc0;
$dark-teal: darken($teal, 10%);
$cachet-gray-light: #e8e8e8;
$cachet-gray: #999;
$cachet-gray-darker: #666;
$yellow: #F7CA18;
$dark-yellow: darken($yellow, 10%);
$cachet-icons: #5e5e5e;
$pink: #b23f73;
$dark-pink: darken($pink, 10%);
// Statuses
$cachet-green: $cachet-primary;
$cachet-dark-green: darken($cachet-green, 10%);
$grey: #ecf0f1;
$dark-grey: darken($grey, 10%);
$cachet-blue: #3498db;
$cachet-dark-blue: darken($cachet-blue, 10%);
$orange: #FF8800;
$dark-orange: darken($orange, 10%);
$cachet-red: #ff6f6f;
$cachet-dark-red: darken($cachet-red, 10%);
$cachet-teal: #0dccc0;
$cachet-dark-teal: darken($cachet-teal, 10%);
$cachet-yellow: #F7CA18;
$cachet-dark-yellow: darken($cachet-yellow, 10%);
$cachet-pink: #b23f73;
$cachet-dark-pink: darken($cachet-pink, 10%);
$cachet-grey: #ecf0f1;
$cachet-dark-grey: darken($cachet-grey, 10%);
$cachet-orange: #FF8800;
$dark-orange: darken($cachet-orange, 10%);
app/assets/sass/_status-page.scss
+18 -20
View File
@@ -1,5 +1,3 @@
@import 'palette';
body.status-page {
font-family: 'Lato', 'Helevetic Neue', Arial, sans-serif;
background-color: #F0F3F4;
@@ -24,19 +22,19 @@ body.status-page {
}
.text-success, .text-component-1 {
color: $green;
color: $cachet_green;
}
.text-info, .text-component-2 {
color: $blue;
color: $cachet_blue;
}
.text-alert, .text-component-3 {
color: $yellow;
color: $cachet_yellow;
}
.text-danger, .text-component-4 {
color: $red;
color: $cachet_red;
}
.container {
@@ -61,20 +59,20 @@ body.status-page {
border-radius: 0;
font-size: 1.2em;
&.alert-success {
background-color: $green;
border-color: $dark-green;
background-color: $cachet_green;
border-color: $cachet_dark-green;
color: white;
}
&.alert-info {
background: $blue;
border-color: $dark-blue;
background: $cachet_blue;
border-color: $cachet_dark-blue;
color: #FFF;
}
&.alert-danger {
background: $red;
border-color: $dark-red;
background: $cachet_red;
border-color: $cachet_dark-red;
color: #FFF;
}
}
@@ -117,7 +115,7 @@ body.status-page {
top: -20px;
width: 7px;
height: 7px;
background: $grey;
background: $cachet_gray_light;
border-radius: 50%;
}
}
@@ -159,16 +157,16 @@ body.status-page {
}
}
&.status-1 {
color: $orange;
color: $cachet_orange;
}
&.status-2 {
color: $yellow;
color: $cachet_yellow;
}
&.status-3 {
color: $blue;
color: $cachet_blue;
}
&.status-4 {
color: $green;
color: $cachet_green;
}
}
&.last:before {
@@ -234,7 +232,7 @@ body.status-page {
.list-group-item {
border-radius: 0;
background-color: #ffffff;
border: 1px solid $grey;
border: 1px solid $cachet_gray_light;
font-size: 1.1em;
padding: 15px 15px;
@@ -266,8 +264,8 @@ body.status-page {
padding-bottom: 40px;
color: #777;
text-align: center;
border-top: 1px solid $grey;
background-color: lighten($grey, 5%);
border-top: 1px solid $cachet_gray_light;
background-color: lighten($cachet_gray_light, 5%);
}
}
app/assets/sass/main.scss
+2 -2
View File
@@ -1,6 +1,6 @@
@import "modules/bootstrap";
@import "palette";
@import "partials/variables";
@import "modules/bootstrap";
html, body {
height: 100%;
app/assets/sass/modules/_variables.scss
+42 -1
View File
@@ -1,5 +1,46 @@
$brand-success: #7ed321 !default;
// Brand colours.
$brand-primary: darken(#428bca, 6.5%) !default;
$brand-success: $cachet-primary !default;
$brand-info: $cachet-blue !default;
$brand-warning: $cachet-orange !default;
$brand-danger: $cachet-red !default;
// Default border radius
$border-radius-base: 2px !default;
$border-radius-large: 4px !default;
$border-radius-small: 1px !default;
//** Tooltip background color
$tooltip-bg: #333 !default;
$tooltip-opacity: .9 !default;
$base-background-color: #f1f1f1;
$base-font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$base-font-weight: 400;
$base-letter-spacing: 0.08em;
$base-font-size: 14px;
$base-line-height: 1.42857143;
$base-link-color: #ffffff;
$base-link-hover-color: #e9e9e9;
$header-background-color: lighten(#00695C, 10%);
$header-border-color: 1px solid darken($header-background-color, 10%);
$sidebar-transition-speed: .2s;
$sidebar-background-color: #F0F3F4;
$sidebar-border-color: 1px solid rgba(255, 255, 255, .1);
$sidebar-border-shadow: inset 0px -2px 3px rgba(0,0,0,0.25);
$sidebar-text-size: 0.9em;
$sidebar-text-color: #333;
$sidebar-text-active-color: #333;
$sidebar-normal-width: 230px;
$sidebar-phone-width: 75%;
$sidebar-active-color: #00695C;
$screen-xs-max: "(max-width: 549px)";
$screen-sm-min: "(min-width: 550px)";
$screen-sm-max: "(max-width: 991px)";
$screen-md-min: "(min-width: 992px)";
$screen-md-max: "(max-width: 1199px)";
$screen-lg-min: "(min-width: 1200px)";
app/assets/sass/partials/_sidebar.scss
+2 -2
View File
@@ -129,11 +129,11 @@ body.dashboard {
text-decoration: none;
&.active {
color: #6787DA;
color: $cachet-secondary;
}
&:hover {
color: #6787DA;
color: $cachet-secondary;
}
}
}
app/assets/sass/partials/_variables.scss
-31
View File
@@ -1,31 +0,0 @@
$base-background-color: #f1f1f1;
$base-font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$base-font-weight: 400;
$base-letter-spacing: 0.08em;
$base-font-size: 14px;
$base-line-height: 1.42857143;
$base-link-color: #ffffff;
$base-link-hover-color: #e9e9e9;
$header-background-color: lighten(#00695C, 10%);
$header-border-color: 1px solid darken($header-background-color, 10%);
$sidebar-transition-speed: .2s;
$sidebar-background-color: #F0F3F4;
$sidebar-border-color: 1px solid rgba(255, 255, 255, .1);
$sidebar-border-shadow: inset 0px -2px 3px rgba(0,0,0,0.25);
$sidebar-text-size: 0.9em;
$sidebar-text-color: #333;
$sidebar-text-active-color: #333;
$sidebar-normal-width: 230px;
$sidebar-phone-width: 75%;
$sidebar-active-color: #00695C;
$screen-xs-max: "(max-width: 549px)";
$screen-sm-min: "(min-width: 550px)";
$screen-sm-max: "(max-width: 991px)";
$screen-md-min: "(min-width: 992px)";
$screen-md-max: "(max-width: 1199px)";
$screen-lg-min: "(min-width: 1200px)";
app/views/layout/master.blade.php
+11
View File
@@ -19,6 +19,17 @@
<!-- Mobile IE allows us to activate ClearType technology for smoothing fonts for easy reading -->
<meta http-equiv="cleartype" content="on">
<link rel="icon" type="image/png" href="{{ URL::to('img/favicon.ico') }}">
<link rel="shortcut icon" href="{{ URL::to('img/favicon.png') }}" type="image/x-icon" />
<link rel="apple-touch-icon" href="{{ URL::to('img/apple-touch-icon.png') }}" />
<link rel="apple-touch-icon" sizes="57x57" href="{{ URL::to('img/apple-touch-icon-57x57.png') }}" />
<link rel="apple-touch-icon" sizes="72x72" href="{{ URL::to('img/apple-touch-icon-72x72.png') }}" />
<link rel="apple-touch-icon" sizes="114x114" href="{{ URL::to('img/apple-touch-icon-114x114.png') }}" />
<link rel="apple-touch-icon" sizes="120x120" href="{{ URL::to('img/apple-touch-icon-120x120.png') }}" />
<link rel="apple-touch-icon" sizes="144x144" href="{{ URL::to('img/apple-touch-icon-144x144.png') }}" />
<link rel="apple-touch-icon" sizes="152x152" href="{{ URL::to('img/apple-touch-icon-152x152.png') }}" />
<title>{{ $pageTitle ?: Setting::get('app_name') }} Status</title>
<link href='//fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
app/views/partials/dashboard/head.blade.php
+12
View File
@@ -4,9 +4,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" type="image/png" href="{{ URL::to('img/favicon.ico') }}">
<link rel="shortcut icon" href="{{ URL::to('img/favicon.png') }}" type="image/x-icon" />
<link rel="apple-touch-icon" href="{{ URL::to('img/apple-touch-icon.png') }}" />
<link rel="apple-touch-icon" sizes="57x57" href="{{ URL::to('img/apple-touch-icon-57x57.png') }}" />
<link rel="apple-touch-icon" sizes="72x72" href="{{ URL::to('img/apple-touch-icon-72x72.png') }}" />
<link rel="apple-touch-icon" sizes="114x114" href="{{ URL::to('img/apple-touch-icon-114x114.png') }}" />
<link rel="apple-touch-icon" sizes="120x120" href="{{ URL::to('img/apple-touch-icon-120x120.png') }}" />
<link rel="apple-touch-icon" sizes="144x144" href="{{ URL::to('img/apple-touch-icon-144x144.png') }}" />
<link rel="apple-touch-icon" sizes="152x152" href="{{ URL::to('img/apple-touch-icon-152x152.png') }}" />
<title>{{ isset($pageTitle) ? $pageTitle : Setting::get('app_name') }} | Cachet</title>
<link href='//fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
<script src="{{ elixir('js/all.js') }}"></script>
</head>