mirror of https://github.com/akveo/blur-admin
fix(theme): move all configurable colors to variables, refactor styles
parent
c540bc9850
commit
23bfdd6d53
|
@ -7,7 +7,14 @@
|
|||
|
||||
var IMAGES_ROOT = 'assets/img/';
|
||||
|
||||
// main color scheme
|
||||
var basic = {
|
||||
default: '#ffffff',
|
||||
defaultText: '#666666',
|
||||
border: '#dddddd',
|
||||
borderDark: '#aaaaaa',
|
||||
};
|
||||
|
||||
// main functional color scheme
|
||||
var colorScheme = {
|
||||
primary: '#209e91',
|
||||
info: '#2dacd1',
|
||||
|
@ -27,6 +34,11 @@
|
|||
|
||||
angular.module('BlurAdmin.theme')
|
||||
.constant('layoutColors', {
|
||||
default: basic.default,
|
||||
defaultText: basic.defaultText,
|
||||
border: basic.border,
|
||||
borderDark: basic.borderDark,
|
||||
|
||||
primary: colorScheme.primary,
|
||||
info: colorScheme.info,
|
||||
success: colorScheme.success,
|
||||
|
@ -51,11 +63,6 @@
|
|||
warningBg: tint(colorScheme.warning, 20),
|
||||
dangerBg: tint(colorScheme.danger, 20),
|
||||
|
||||
default: '#ffffff',
|
||||
defaultText: '#666666',
|
||||
border: '#dddddd',
|
||||
borderDark: '#aaaaaa',
|
||||
|
||||
bgColorPalette: {
|
||||
blueStone: bgColorPalette.blueStone,
|
||||
surfieGreen: bgColorPalette.surfieGreen,
|
||||
|
|
|
@ -40,10 +40,12 @@
|
|||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0;
|
||||
color: $default-text;
|
||||
@include placeholderStyle($default-text, 0.7);
|
||||
border: 1px solid $input-border;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: $primary-bg;
|
||||
|
@ -391,7 +393,7 @@ label.custom-input-danger {
|
|||
background: transparent;
|
||||
color: $disabled;
|
||||
border-color: $disabled-bg;
|
||||
@include placeholderStyle($disabled, 1);
|
||||
@include placeholderStyle($default-text, 0.5);
|
||||
}
|
||||
|
||||
.form-control-rounded {
|
||||
|
@ -486,10 +488,12 @@ label.custom-input-danger {
|
|||
}
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
color: $default-text;
|
||||
@include placeholderStyle($default-text, 0.7);
|
||||
background-color: transparent;
|
||||
border: 1px solid $input-border;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: #555555;
|
||||
max-width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
|
@ -546,4 +550,4 @@ label.custom-input-danger {
|
|||
|
||||
.sub-little-text{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,10 +15,24 @@ html, body {
|
|||
body {
|
||||
font: 14px/16px $font-family;
|
||||
color: $default-text;
|
||||
background-color: #F0F3F4;
|
||||
background-color: $body-bg;
|
||||
//@include main-background();
|
||||
}
|
||||
|
||||
&.mobile{
|
||||
background: none;
|
||||
.body-bg{
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-attachment: inherit;
|
||||
background-color: $body-bg;
|
||||
//@include main-background();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
|
||||
{
|
||||
|
@ -199,4 +213,8 @@ a {
|
|||
* {
|
||||
visibility: hidden!important;
|
||||
}
|
||||
}
|
||||
|
||||
.irs-grid-text {
|
||||
color: $default-text;
|
||||
}
|
|
@ -2,16 +2,14 @@ $panel-title-height: 44px;
|
|||
$panel-heading-font-size: 16px;
|
||||
|
||||
.panel {
|
||||
border: none;
|
||||
background-color: $panel-bg;
|
||||
@include scrollbars(.4em, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.5));
|
||||
color: $default-text;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: $default;
|
||||
position: relative;
|
||||
//transition: all 0.2s ease;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
/*&:hover {
|
||||
background: $panel-bg-hover;
|
||||
}*/
|
||||
&.animated {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
@ -52,6 +50,8 @@ $panel-heading-font-size: 16px;
|
|||
}
|
||||
|
||||
.panel-heading, .panel-footer {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
|
||||
height: $panel-title-height;
|
||||
font-size: $panel-heading-font-size;
|
||||
|
||||
|
@ -67,10 +67,6 @@ $panel-heading-font-size: 16px;
|
|||
//text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel-white {
|
||||
background-color: $panel-bg;
|
||||
}
|
||||
|
||||
.panel-primary {
|
||||
> .panel-heading {
|
||||
color: $primary;
|
||||
|
|
|
@ -1,6 +1,12 @@
|
|||
$default: #ffffff !default;
|
||||
$default: #ffffff;
|
||||
$body-bg: #F0F3F4;
|
||||
$default-text: #666666;
|
||||
$help-text: #949494;
|
||||
$disabled: #dddddd;
|
||||
$disabled-bg: tint($disabled, 15%);
|
||||
$border: #d6d6d6;
|
||||
$border-light: tint($border, 15%);
|
||||
$input-border: shade($border, 5%);
|
||||
$sidebar: #1C2B36;
|
||||
|
||||
$primary: #209e91 !default;
|
||||
|
@ -26,3 +32,12 @@ $info-bg: tint($info, 20%);
|
|||
$success-bg: tint($success, 20%);
|
||||
$warning-bg: tint($warning, 20%);
|
||||
$danger-bg: tint($danger, 20%);
|
||||
|
||||
$facebook-color: #3b5998;
|
||||
$twitter-color: #55acee;
|
||||
$google-color: #dd4b39;
|
||||
$linkedin-color: #0177B5;
|
||||
$github-color: #6b6b6b;
|
||||
$stackoverflow-color: #2F96E8;
|
||||
$dribble-color: #F26798;
|
||||
$behace-color: #0093FA;
|
||||
|
|
|
@ -3,25 +3,6 @@ $font-family: 'Roboto', sans-serif;
|
|||
$activelink: $primary;
|
||||
$hoverlink: $primary-dark;
|
||||
|
||||
$facebook-color: #3b5998;
|
||||
$twitter-color: #55acee;
|
||||
$google-color: #dd4b39;
|
||||
$linkedin-color: #0177B5;
|
||||
$github-color: #6b6b6b;
|
||||
$stackoverflow-color: #2F96E8;
|
||||
$dribble-color: #F26798;
|
||||
$behace-color: #0093FA;
|
||||
|
||||
$panel-bg: #f8f8f8;
|
||||
$panel-bg-hover: #fff;
|
||||
|
||||
$disabled: #dddddd;
|
||||
$disabled-bg: #e6e6e6;
|
||||
|
||||
$border: #d6d6d6;
|
||||
$border-light: #eeeeee;
|
||||
$input-border: #cccccc;
|
||||
|
||||
$resXXL: 1280px;
|
||||
$resXL: 1170px;
|
||||
$resL: 991px;
|
||||
|
|
|
@ -1,38 +1 @@
|
|||
|
||||
&.mobile{
|
||||
background: none;
|
||||
.body-bg{
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@include main-background();
|
||||
background-attachment: inherit;
|
||||
}
|
||||
}
|
||||
.panel.panel-blur {
|
||||
@include scrollbars(.4em, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.5));
|
||||
border-radius: 5px;
|
||||
color: $default-text;
|
||||
.panel-heading {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.panel-body {
|
||||
}
|
||||
}
|
||||
|
||||
.form-control, .bootstrap-tagsinput input {
|
||||
@include placeholderStyle($default-text, 0.7);
|
||||
border: 1px solid $border;
|
||||
border-radius: 5px;
|
||||
color: $default-text;
|
||||
}
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
@include placeholderStyle($default-text, 0.5);
|
||||
}
|
||||
.irs-grid-text {
|
||||
color: $default-text;
|
||||
}
|
Loading…
Reference in New Issue