refactor(global): apply new colors, fix little issues

pull/3/head
alex 9 years ago
parent 5959a7e760
commit 32342b808e

@ -17,6 +17,7 @@
"dataDateFormat": "YYYY-MM-DD",
"precision": 2,
"valueAxes": [{
color: layoutColors.default,
"id": "v1",
"title": "Sales",
"position": "left",
@ -33,6 +34,7 @@
}],
"graphs": [{
"id": "g3",
color: layoutColors.default,
"valueAxis": "v1",
"lineColor": layoutColors.primaryBg,
"fillColors": layoutColors.primaryBg,
@ -47,6 +49,7 @@
}, {
"id": "g4",
"valueAxis": "v1",
color: layoutColors.default,
"lineColor": layoutColors.primaryLight,
"fillColors": layoutColors.primaryLight,
"fillAlphas": 1,
@ -63,6 +66,7 @@
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
color: layoutColors.default,
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
@ -75,6 +79,7 @@
}, {
"id": "g2",
"valueAxis": "v2",
color: layoutColors.default,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
@ -114,6 +119,7 @@
},
"categoryField": "date",
"categoryAxis": {
color: "#fff",
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true

@ -7,7 +7,7 @@
<th>Last Name</th>
<th>Username</th>
<th>Email</th>
<th>Age</th>
<th>Status</th>
</tr>
</thead>
<tbody>

@ -130,7 +130,7 @@
<div class="section-block">
<h2 class="typography-widget-header">Text Color</h2>
</div>
<div class="section-block red-text ">
<div class="section-block black-text ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
ornare
@ -139,7 +139,7 @@
parturient montes, nascetur ridiculus mus.
</p>
</div>
<div class="section-block blue-text ">
<div class="section-block accent-text ">
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
urna
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
@ -156,9 +156,9 @@
</p>
</div>
<div class="section-block links">
<p><a href>Active link — #41bee9</a></p>
<p><a href>Active link — #D6FF8A</a></p>
<p class="hovered"><a href>Hover link — #9d498c</a></p>
<p class="hovered"><a href>Hover link — #9EB546</a></p>
</div>
</div>
</div>

@ -31,25 +31,25 @@
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info],
outlineAlpha: 1,
outlineThickness: 2,
labelTickColor: "#000000",
labelTickColor: "#FFFFFF",
labelTickAlpha: 0.3
},
AmRectangularChart: {
zoomOutButtonColor: '#000000',
zoomOutButtonColor: '#FFFFFF',
zoomOutButtonRollOverAlpha: 0.15,
zoomOutButtonImage: "lens.png"
},
AxisBase: {
axisColor: "#000000",
axisColor: "#FFFFFF",
axisAlpha: 0.3,
gridAlpha: 0.1,
gridColor: "#000000"
gridColor: "#FFFFFF"
},
ChartScrollbar: {
backgroundColor: "#000000",
backgroundColor: "#FFFFFF",
backgroundAlpha: 0.12,
graphFillAlpha: 0.5,
graphLineAlpha: 0,
@ -59,20 +59,20 @@
},
ChartCursor: {
cursorColor: "#000000",
cursorColor: "#FFFFFF",
color: "#FFFFFF",
cursorAlpha: 0.5
},
AmLegend: {
color: "#000000"
color: "#FFFFFF"
},
AmGraph: {
lineAlpha: 0.9
},
GaugeArrow: {
color: "#000000",
color: "#FFFFFF",
alpha: 0.8,
nailAlpha: 0,
innerRadius: "40%",
@ -83,12 +83,12 @@
},
GaugeAxis: {
tickColor: "#000000",
tickColor: "#FFFFFF",
tickAlpha: 1,
tickLength: 15,
minorTickLength: 8,
axisThickness: 3,
axisColor: '#000000',
axisColor: '#FFFFFF',
axisAlpha: 1,
bandAlpha: 0.8
},
@ -104,7 +104,7 @@
color: layoutColors.info,
colorSolid: layoutColors.primaryDark,
unlistedAreasAlpha: 0.4,
unlistedAreasColor: "#000000",
unlistedAreasColor: "#FFFFFF",
outlineColor: "#FFFFFF",
outlineAlpha: 0.5,
outlineThickness: 0.5,
@ -117,14 +117,14 @@
},
LinesSettings: {
color: "#000000",
color: "#FFFFFF",
alpha: 0.8
},
ImagesSettings: {
alpha: 0.8,
labelColor: "#000000",
color: "#000000",
labelColor: "#FFFFFF",
color: "#FFFFFF",
labelRollOverColor: layoutColors.primaryDark
},
@ -137,7 +137,7 @@
buttonBorderAlpha: 0,
buttonCornerRadius: 0,
gridColor: "#FFFFFF",
gridBackgroundColor: "#000000",
gridBackgroundColor: "#FFFFFF",
buttonIconAlpha: 0.6,
gridAlpha: 0.6,
buttonSize: 20
@ -155,11 +155,11 @@
// the defaults below are set using CSS syntax, you can use any existing css property
// if you don't use Stock chart, you can delete lines below
PeriodSelector: {
color: "#000000"
color: "#FFFFFF"
},
PeriodButton: {
color: "#000000",
color: "#FFFFFF",
background: "transparent",
opacity: 0.7,
border: "1px solid rgba(0, 0, 0, .3)",
@ -171,7 +171,7 @@
},
PeriodButtonSelected: {
color: "#000000",
color: "#FFFFFF",
backgroundColor: "#b9cdf5",
border: "1px solid rgba(0, 0, 0, .3)",
MozBorderRadius: "5px",
@ -183,20 +183,20 @@
},
PeriodInputField: {
color: "#000000",
color: "#FFFFFF",
background: "transparent",
border: "1px solid rgba(0, 0, 0, .3)",
outline: "none"
},
DataSetSelector: {
color: "#000000",
color: "#FFFFFF",
selectedBackgroundColor: "#b9cdf5",
rollOverBackgroundColor: "#a8b0e4"
},
DataSetCompareList: {
color: "#000000",
color: "#FFFFFF",
lineHeight: "100%",
boxSizing: "initial",
webkitBoxSizing: "initial",

@ -12,8 +12,11 @@
function chartJsConfig(ChartJsProvider, layoutColors) {
// Configure all charts
ChartJsProvider.setOptions({
colours: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info],
responsive: true
colours: [layoutColors.default, layoutColors.danger, layoutColors.primary, layoutColors.warning, layoutColors.success, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info],
responsive: true,
scaleFontColor: "rgba(255,255,255,.7)",
scaleLineColor: "rgba(255,255,255,.7)",
pointLabelFontColor: "rgba(255,255,255,.7)"
});
// Configure all line charts
ChartJsProvider.setOptions('Line', {

@ -29,7 +29,7 @@
infoBg: '#a8e6b3',
warningBg: '#e4fbd3',
defaultText: '#585858'
defaultText: '#ffffff'
})
.constant('layoutSizes', {
resWidthCollapseSidebar: 1200,

@ -14,6 +14,16 @@
}
}
.jstree-default .jstree-clicked, .jstree-default .jstree-hovered {
background-color: rgba(0, 0, 0, 0.25);
}
.jstree-default .jstree-anchor, .jstree-default .jstree-wholerow{
&:hover{
background-color: rgba(0, 0, 0, 0.25);
}
}
.control-side > div {
margin-top: 5px;
margin-bottom: 10px;

@ -9,10 +9,10 @@ h1.color, h2.color, h3.color, h4.color, h5.color, h6.color {
}
a {
color: $primary;
color: $activelink;
text-decoration: none !important;
&:hover {
color: shade($primary, 20);
color: $hoverlink;
}
}
@ -137,12 +137,12 @@ h5 {
margin: 14px 0;
}
.red-text p {
color: $dribble-color;
.accent-text p {
color: $accent;
}
.blue-text p {
color: $primary;
.black-text p {
color: black;
}
.links {
@ -153,7 +153,7 @@ h5 {
margin-bottom: 0;
&.hovered {
a {
color: $danger;
color: $hoverlink;
}
}
}
@ -171,11 +171,11 @@ h5 {
.accent {
margin-top: 30px;
color: $dribble-color;
color: $accent;
line-height: 14px;
font-size: 14px;
padding-left: 11px;
border-left: 4px solid $dribble-color;
border-left: 4px solid $accent;
margin-left: 13px;
}
@ -199,7 +199,7 @@ h5 {
li {
&:before {
content: "";
color: $dribble-color;
color: $accent;
width: 10px;
display: inline-block;
}
@ -209,7 +209,7 @@ h5 {
ol.blur {
counter-reset: section;
li {
color: $dribble-color;
color: $accent;
padding-left: 0;
line-height: 14px;
position: relative;

@ -3,7 +3,7 @@
& > thead {
& > tr {
& > th {
border-bottom: 1px solid $border-light;
border-bottom: 1px solid rgba(255,255,255,0.5);
white-space: nowrap;
&:first-child {
text-align: center;
@ -22,7 +22,7 @@
& > td {
padding: 0px 8px;
line-height: 35px;
border-top: 1px solid $border-light;
border-top: 1px solid rgba(255,255,255,0.5);
&:first-child {
text-align: center;
}
@ -33,7 +33,7 @@
}
}
&.table-bordered th {
border-color: $border !important;
border-color: rgba(255,255,255,0.5) !important;
}
}

@ -132,6 +132,9 @@ a.al-sidebar-list-link {
a {
border: none;
background-color: $success;
&:hover {
color: $default;
}
}
}
}

@ -1,18 +1,17 @@
$font-family: 'Roboto', sans-serif;
$font-family: 'Roboto', sans-serif;
$primary: #005562!default;
$info: #6eba8c!default;
$success: #0e8174!default;
$warning: #b9f2a1!default;
$danger: #ffa76d!default;
$default: #ffffff!default;
$primary: #005562 !default;
$info: #6eba8c !default;
$success: #0e8174 !default;
$warning: #b9f2a1 !default;
$danger: #ffa76d !default;
$default: #ffffff !default;
$primary-dark: shade($primary, 66%);
$success-dark: shade($success, 66%);
$warning-dark: shade($warning, 66%);
$danger-dark: shade($danger, 66%);
$primary-bg: tint($primary, 70%);
$info-bg: tint($info, 70%);
$success-bg: tint($success, 70%);
@ -34,11 +33,15 @@ $primary-light: #5FBCBB;
$success-light: #85BA54;
$primary-btn: #209e91;
$info-btn: #2dacd1;
$info-btn: #2dacd1;
$success-btn: #90b900;
$primary-btn: #209e91;
$warning-btn: #dfb81c;
$danger-btn: #e85656;
$danger-btn: #e85656;
$accent: #E3FF53;
$activelink: #D6FF8A;
$hoverlink: #9EB546;
$facebook-color: #3b5998;
$twitter-color: #55acee;

@ -136,15 +136,15 @@
}
.cd-timeline-content-green {
@include cd-timeline-color($success-bg);
@include cd-timeline-color($success);
}
.cd-timeline-content-red {
@include cd-timeline-color($danger-bg);
@include cd-timeline-color($danger);
}
.cd-timeline-content-blue {
@include cd-timeline-color($primary-bg);
@include cd-timeline-color($primary);
}
.no-touch .cd-timeline-content .cd-read-more:hover {

Loading…
Cancel
Save