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,
.btn-navbar {
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 {
@ -110,7 +110,7 @@
&,
+ .input-group-append .btn-navbar {
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;
}
}
@ -121,7 +121,7 @@
.form-control-navbar,
.btn-navbar {
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 {
@ -137,7 +137,7 @@
&,
+ .input-group-append .btn-navbar {
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;
}
}

8
build/scss/_navs.scss
View File

@ -90,16 +90,12 @@
@each $color, $value in $theme-colors {
@if $color != dark and $color != light {
.navbar-#{$color} {
background-color: $value;
}
@include navbar-variant($color, $value);
}
}
@each $color, $value in $colors {
.navbar-#{$color} {
background-color: $value;
}
@include navbar-variant($color, $value);
}
.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-dark-form-control-bg: rgba(255, 255, 255, .2) !default;
$main-header-dark-form-control-focused-bg: rgba(255, 255, 255, .6) !default;
$main-header-dark-form-control-focused-color: $gray-800 !default;
$main-header-dark-form-control-border: 0 !default;
$main-header-dark-form-control-focused-border: 0 !default;
$main-header-dark-placeholder-color: rgba(255, 255, 255, .6) !default;
$main-header-dark-form-control-bg: $gray-800 !default;
$main-header-dark-form-control-focused-bg: $gray-700 !default;
$main-header-dark-form-control-focused-color: $gray-400 !default;
$main-header-dark-form-control-border-color: $gray-600 !default;
$main-header-dark-form-control-focused-border-color: $gray-600 !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-focused-bg: $gray-200 !default;
$main-header-light-form-control-focused-color: $gray-800 !default;
$main-header-light-form-control-border: 0 !default;
$main-header-light-form-control-focused-border: 0 !default;
$main-header-light-form-control-bg: darken($gray-200, 5%) !default;
$main-header-light-form-control-focused-bg: darken($gray-200, 7.5%) !default;
$main-header-light-form-control-focused-color: $gray-400 !default;
$main-header-light-form-control-border-color: $gray-400 !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 FOOTER

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

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