mirror of https://github.com/akveo/blur-admin
refactor(global): apply new colors, fix little issues
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…
Reference in New Issue