github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

fixed navbar color input styles

pull/3196/head
REJack 2020-12-04 09:10:22 +01:00
parent bfc26debdc
commit d0cf068950
4 changed files with 68 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/scss/_main-header.scss
View File

@ -94,7 +94,7 @@
.form-control-navbar, .form-control-navbar,
.btn-navbar { .btn-navbar {
background-color: $main-header-dark-form-control-bg; background-color: $main-header-dark-form-control-bg;
border: $main-header-dark-form-control-border; border-color: $main-header-dark-form-control-border-color;
} }
.form-control-navbar { .form-control-navbar {
@ -110,7 +110,7 @@
&, &,
+ .input-group-append .btn-navbar { + .input-group-append .btn-navbar {
background-color: $main-header-dark-form-control-focused-bg; background-color: $main-header-dark-form-control-focused-bg;
border: $main-header-dark-form-control-focused-border !important; border-color: $main-header-dark-form-control-focused-border-color !important;
color: $main-header-dark-form-control-focused-color; color: $main-header-dark-form-control-focused-color;
} }
} }
@ -121,7 +121,7 @@
.form-control-navbar, .form-control-navbar,
.btn-navbar { .btn-navbar {
background-color: $main-header-light-form-control-bg; background-color: $main-header-light-form-control-bg;
border: $main-header-light-form-control-border; border-color: $main-header-light-form-control-border-color;
} }
.form-control-navbar { .form-control-navbar {
@ -137,7 +137,7 @@
&, &,
+ .input-group-append .btn-navbar { + .input-group-append .btn-navbar {
background-color: $main-header-light-form-control-focused-bg; background-color: $main-header-light-form-control-focused-bg;
border: $main-header-light-form-control-focused-border !important; border-color: $main-header-light-form-control-focused-border-color !important;
color: $main-header-light-form-control-focused-color; color: $main-header-light-form-control-focused-color;
} }
} }

8
build/scss/_navs.scss
View File

@ -90,16 +90,12 @@
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@if $color != dark and $color != light { @if $color != dark and $color != light {
.navbar-#{$color} { @include navbar-variant($color, $value);
background-color: $value;
}
} }
} }
@each $color, $value in $colors { @each $color, $value in $colors {
.navbar-#{$color} { @include navbar-variant($color, $value);
background-color: $value;
}
} }
.dark-mode { .dark-mode {

22
build/scss/_variables.scss
View File

@ -82,18 +82,18 @@ $main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bo
// Main header skins // Main header skins
$main-header-dark-form-control-bg: rgba(255, 255, 255, .2) !default; $main-header-dark-form-control-bg: $gray-800 !default;
$main-header-dark-form-control-focused-bg: rgba(255, 255, 255, .6) !default; $main-header-dark-form-control-focused-bg: $gray-700 !default;
$main-header-dark-form-control-focused-color: $gray-800 !default; $main-header-dark-form-control-focused-color: $gray-400 !default;
$main-header-dark-form-control-border: 0 !default; $main-header-dark-form-control-border-color: $gray-600 !default;
$main-header-dark-form-control-focused-border: 0 !default; $main-header-dark-form-control-focused-border-color: $gray-600 !default;
$main-header-dark-placeholder-color: rgba(255, 255, 255, .6) !default; $main-header-dark-placeholder-color: rgba($white, .6) !default;
$main-header-light-form-control-bg: darken($gray-100, 2%) !default; $main-header-light-form-control-bg: darken($gray-200, 5%) !default;
$main-header-light-form-control-focused-bg: $gray-200 !default; $main-header-light-form-control-focused-bg: darken($gray-200, 7.5%) !default;
$main-header-light-form-control-focused-color: $gray-800 !default; $main-header-light-form-control-focused-color: $gray-400 !default;
$main-header-light-form-control-border: 0 !default; $main-header-light-form-control-border-color: $gray-400 !default;
$main-header-light-form-control-focused-border: 0 !default; $main-header-light-form-control-focused-border-color: darken($gray-400, 2.5%) !default;
$main-header-light-placeholder-color: rgba(0, 0, 0, .6) !default; $main-header-light-placeholder-color: rgba(0, 0, 0, .6) !default;
// MAIN FOOTER // MAIN FOOTER

74
build/scss/mixins/_navbar.scss
View File

@ -3,32 +3,60 @@
// //
// Navbar Variant // Navbar Variant
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, .8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, .1)) { @mixin navbar-variant($name, $color) {
background-color: $color; .navbar-#{$name} {
background-color: $color;
color: color-yiq($color);
.nav > li > a { &.navbar-light {
color: $font-color; .form-control-navbar {
} &::placeholder {
color: rgba($gray-800, .8);
}
&,
+ .input-group-append > .btn-navbar {
background-color: lighten($color, 4%);
border-color: lighten($color, 9%);
color: rgba($gray-800, .8);
}
.nav > li > a:hover, &:focus {
.nav > li > a:active, &::placeholder {
.nav > li > a:focus, color: $gray-800;
.nav .open > a, }
.nav .open > a:hover, &,
.nav .open > a:focus, + .input-group-append .btn-navbar {
.nav > .active > a { background-color: lighten($color, 5%);
background-color: $hover-bg; border-color: lighten($color, 9%) !important;
color: $hover-color; color: $gray-800;
} }
}
}
}
&.navbar-dark {
.form-control-navbar {
&::placeholder {
color: rgba($white, .8);
}
&,
+ .input-group-append > .btn-navbar {
background-color: darken($color, 4%);
border-color: darken($color, 9%);
color: rgba($white, .8);
}
// Add color to the sidebar toggle button &:focus {
.sidebar-toggle { &::placeholder {
color: $font-color; color: $white;
}
&:hover, &,
&:focus { + .input-group-append .btn-navbar {
background-color: $hover-bg; background-color: darken($color, 5%);
color: $hover-color; border-color: darken($color, 9%) !important;
color: $white;
}
}
}
} }
} }
} }