_main-sidebar.scss 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948
  1. //
  2. // Component: Main Sidebar
  3. //
  4. .main-sidebar {
  5. height: 100vh;
  6. overflow-y: hidden;
  7. z-index: $zindex-main-sidebar;
  8. // Remove Firefox Focusring
  9. a {
  10. &:-moz-focusring {
  11. border: 0;
  12. outline: none;
  13. }
  14. }
  15. .nav .nav-item .nav-link {
  16. padding: 10px 15px!important;
  17. }
  18. }
  19. .sidebar {
  20. height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
  21. overflow-y: auto;
  22. padding-bottom: $sidebar-padding-y;
  23. padding-left: $sidebar-padding-x;
  24. padding-right: $sidebar-padding-x;
  25. padding-top: $sidebar-padding-y;
  26. }
  27. // Sidebar user panel
  28. .user-panel {
  29. position: relative;
  30. [class*='sidebar-dark'] & {
  31. border-bottom: 1px solid lighten($dark, 12%);
  32. }
  33. [class*='sidebar-light'] & {
  34. border-bottom: 1px solid $gray-300;
  35. }
  36. &,
  37. .info {
  38. overflow: hidden;
  39. white-space: nowrap;
  40. }
  41. .image {
  42. display: inline-block;
  43. padding-left: $nav-link-padding-x - .2;
  44. }
  45. img {
  46. height: auto;
  47. width: $sidebar-user-image-width;
  48. }
  49. .info {
  50. display: inline-block;
  51. padding: 5px 5px 5px 10px;
  52. }
  53. .status,
  54. .dropdown-menu {
  55. font-size: $font-size-sm;
  56. }
  57. }
  58. // Sidebar navigation menu
  59. .nav-sidebar {
  60. // All levels
  61. .nav-item {
  62. > .nav-link {
  63. margin-bottom: .2rem;
  64. .right {
  65. @include transition(transform $transition-fn $transition-speed);
  66. }
  67. }
  68. }
  69. .nav-link > .right,
  70. .nav-link > p > .right {
  71. position: absolute;
  72. right: 1rem;
  73. top: .9rem;
  74. i,
  75. span {
  76. margin-left: .5rem;
  77. }
  78. &:nth-child(2) {
  79. right: 2.2rem;
  80. }
  81. }
  82. .menu-open {
  83. > .nav-treeview {
  84. display: block;
  85. }
  86. > .nav-link {
  87. i.right {
  88. @include rotate(-90deg);
  89. }
  90. }
  91. }
  92. // First Level
  93. > .nav-item {
  94. margin-bottom: 0;
  95. .nav-icon {
  96. margin-left: .05rem;
  97. font-size: 1.2rem;
  98. margin-right: .2rem;
  99. text-align: center;
  100. width: $sidebar-nav-icon-width;
  101. &.fa,
  102. &.fas,
  103. &.far,
  104. &.fab,
  105. &.glyphicon,
  106. &.ion {
  107. font-size: 1.1rem;
  108. }
  109. }
  110. .float-right {
  111. margin-top: 3px;
  112. }
  113. }
  114. // Tree view menu
  115. .nav-treeview {
  116. display: none;
  117. list-style: none;
  118. padding: 0;
  119. > .nav-item {
  120. > .nav-link {
  121. > .nav-icon {
  122. width: $sidebar-nav-icon-width;
  123. }
  124. }
  125. }
  126. }
  127. &.nav-child-indent {
  128. .nav-treeview {
  129. transition: padding $transition-speed $transition-fn;
  130. padding-left: 1rem;
  131. .text-sm & {
  132. padding-left: .5rem;
  133. }
  134. }
  135. &.nav-legacy {
  136. .nav-treeview {
  137. .nav-treeview {
  138. padding-left: 2rem;
  139. margin-left: -1rem;
  140. .text-sm & {
  141. padding-left: 1rem;
  142. margin-left: -.5rem;
  143. }
  144. }
  145. }
  146. }
  147. }
  148. .nav-header {
  149. font-size: .9rem;
  150. padding: $nav-link-padding-y;
  151. &:not(:first-of-type) {
  152. padding: 1.7rem 1rem .5rem;
  153. }
  154. }
  155. .nav-link p {
  156. display: inline-block;
  157. margin: 0;
  158. }
  159. }
  160. #sidebar-overlay {
  161. @include media-breakpoint-down(md) {
  162. .sidebar-open & {
  163. display: block;
  164. }
  165. }
  166. background-color: rgba($black, 0.1);
  167. bottom: 0;
  168. display: none;
  169. left: 0;
  170. position: fixed;
  171. right: 0;
  172. top: 0;
  173. z-index: $zindex-main-sidebar - 1;
  174. }
  175. [class*='sidebar-light-'] {
  176. // Sidebar background color
  177. background-color: $sidebar-light-bg;
  178. // User Panel (resides in the sidebar)
  179. .user-panel {
  180. a:hover {
  181. color: $sidebar-light-hover-color;
  182. }
  183. .status {
  184. background: $sidebar-light-hover-bg;
  185. color: $sidebar-light-color;
  186. &:hover,
  187. &:focus,
  188. &:active {
  189. background: darken($sidebar-light-hover-bg, 3%);
  190. color: $sidebar-light-hover-color;
  191. }
  192. }
  193. .dropdown-menu {
  194. @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
  195. border-color: darken($sidebar-light-hover-bg, 5%);
  196. }
  197. .dropdown-item {
  198. color: $body-color;
  199. }
  200. }
  201. // Sidebar Menu. First level links
  202. .nav-sidebar > .nav-item {
  203. // links
  204. > .nav-link {
  205. // border-left: 3px solid transparent;
  206. &:active,
  207. &:focus {
  208. color: $sidebar-light-color;
  209. }
  210. i {
  211. margin-right: .75rem;
  212. font-size: 1.2rem;
  213. }
  214. p i {
  215. margin-right: 0;
  216. margin-top: 1px;
  217. }
  218. }
  219. // Hover and active states
  220. &.menu-open > .nav-link,
  221. &:hover > .nav-link {
  222. background-color: $sidebar-light-hover-bg;
  223. color: $sidebar-light-hover-color;
  224. }
  225. > .nav-link.active {
  226. color: $sidebar-light-active-color;
  227. @if $enable-shadows {
  228. box-shadow: map-get($elevations, 1);
  229. }
  230. }
  231. // First Level Submenu
  232. > .nav-treeview {
  233. background: $sidebar-light-submenu-bg;
  234. }
  235. }
  236. // Section Heading
  237. .nav-header {
  238. background: inherit;
  239. color: darken($sidebar-light-color, 5%);
  240. }
  241. // All links within the sidebar menu
  242. .sidebar {
  243. a {
  244. color: $sidebar-light-color;
  245. &:hover {
  246. text-decoration: none;
  247. }
  248. }
  249. }
  250. // All submenus
  251. .nav-treeview {
  252. > .nav-item {
  253. > .nav-link {
  254. color: $sidebar-light-submenu-color;
  255. i {
  256. margin-right: .75rem;
  257. margin-left: 3px;
  258. }
  259. p i {
  260. margin-right: 0;
  261. }
  262. }
  263. > .nav-link.active {
  264. &,
  265. &:hover {
  266. @include sidebar-color($primary)
  267. }
  268. }
  269. > .nav-link:hover {
  270. background-color: $sidebar-light-submenu-hover-bg;
  271. }
  272. }
  273. }
  274. // Flat style
  275. .nav-flat {
  276. .nav-item {
  277. .nav-treeview {
  278. .nav-treeview {
  279. border-color: $sidebar-light-submenu-active-bg;
  280. }
  281. > .nav-item {
  282. > .nav-link {
  283. &,
  284. &.active {
  285. border-color: $sidebar-light-submenu-active-bg;
  286. }
  287. }
  288. }
  289. }
  290. }
  291. }
  292. }
  293. [class*='sidebar-dark-'] {
  294. // Sidebar background color
  295. background-color: $sidebar-dark-bg;
  296. // User Panel (resides in the sidebar)
  297. .user-panel {
  298. a:hover {
  299. color: $sidebar-dark-hover-color;
  300. }
  301. .status {
  302. background: $sidebar-dark-hover-bg;
  303. color: $sidebar-dark-color;
  304. &:hover,
  305. &:focus,
  306. &:active {
  307. background: darken($sidebar-dark-hover-bg, 3%);
  308. color: $sidebar-dark-hover-color;
  309. }
  310. }
  311. .dropdown-menu {
  312. @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
  313. border-color: darken($sidebar-dark-hover-bg, 5%);
  314. }
  315. .dropdown-item {
  316. color: $body-color;
  317. }
  318. }
  319. // Sidebar Menu. First level links
  320. .nav-sidebar > .nav-item {
  321. // links
  322. > .nav-link {
  323. // border-left: 3px solid transparent;
  324. &:active {
  325. color: $sidebar-dark-active-color;
  326. background: $sidebar-dark-active-bg;
  327. }
  328. &:hover {
  329. color: $sidebar-dark-hover-color;
  330. }
  331. }
  332. // Hover and active states
  333. &.menu-open > .nav-link,
  334. &:hover > .nav-link,
  335. & > .nav-link:focus {
  336. background-color: $sidebar-dark-hover-bg;
  337. //color: $sidebar-dark-hover-color;
  338. }
  339. > .nav-link.active {
  340. color: $sidebar-dark-active-color;
  341. background: $sidebar-dark-active-bg;
  342. @if $enable-shadows {
  343. box-shadow: map-get($elevations, 1);
  344. }
  345. }
  346. // First Level Submenu
  347. > .nav-treeview {
  348. background: $sidebar-dark-submenu-bg;
  349. }
  350. }
  351. // Section Heading
  352. .nav-header {
  353. background: inherit; //darken($sidebar-dark-bg, 3%);
  354. color: lighten($sidebar-dark-color, 5%);
  355. }
  356. // All links within the sidebar menu
  357. .sidebar {
  358. a {
  359. color: $sidebar-dark-color;
  360. &:hover,
  361. &:focus {
  362. text-decoration: none;
  363. }
  364. }
  365. }
  366. // All submenus
  367. .nav-treeview {
  368. > .nav-item {
  369. > .nav-link {
  370. color: $sidebar-dark-submenu-color;
  371. &:hover,
  372. &:focus {
  373. background-color: $sidebar-dark-submenu-hover-bg;
  374. color: $sidebar-dark-submenu-hover-color;
  375. }
  376. }
  377. > .nav-link.active {
  378. &,
  379. &:hover,
  380. &:focus {
  381. background-color: $sidebar-dark-submenu-active-bg;
  382. color: $sidebar-dark-submenu-active-color;
  383. }
  384. }
  385. }
  386. }
  387. // Flat Style
  388. .nav-flat {
  389. .nav-item {
  390. .nav-treeview {
  391. .nav-treeview {
  392. border-color: $sidebar-dark-submenu-active-bg;
  393. }
  394. > .nav-item {
  395. > .nav-link {
  396. &,
  397. &.active {
  398. border-color: $sidebar-dark-submenu-active-bg;
  399. }
  400. }
  401. }
  402. }
  403. }
  404. }
  405. }
  406. // colors
  407. //.sidebar-dark-white {
  408. // .nav-item {
  409. // & > .nav-link.active {
  410. // background: rgba($white, .8)!important;
  411. // box-shadow: none;
  412. // }
  413. // }
  414. //}
  415. .sidebar-light-primary {
  416. .nav-item {
  417. & > .nav-link.active {
  418. @include sidebar-color($primary)
  419. }
  420. }
  421. .active-bg-light {
  422. .nav-item {
  423. & > .nav-link.active {
  424. @include sidebar-color-snd($primary)
  425. }
  426. }
  427. }
  428. }
  429. .sidebar-mini .main-sidebar:not(.sidebar-no-expand),
  430. .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand),
  431. .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover,
  432. .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
  433. .sidebar-mini .main-sidebar.sidebar-focused,
  434. .sidebar-mini-md .main-sidebar.sidebar-focused {
  435. .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
  436. padding-left: 1rem;
  437. margin-left: -.5rem;
  438. }
  439. }
  440. // Nav Flat
  441. .nav-flat {
  442. margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
  443. .nav-item {
  444. > .nav-link {
  445. border-radius: 0;
  446. margin-bottom: 0;
  447. > .nav-icon {
  448. margin-left: .55rem;
  449. }
  450. }
  451. }
  452. &:not(.nav-child-indent) {
  453. .nav-treeview {
  454. .nav-item {
  455. > .nav-link {
  456. > .nav-icon {
  457. margin-left: .4rem;
  458. }
  459. }
  460. }
  461. }
  462. }
  463. &.nav-child-indent {
  464. .nav-treeview {
  465. padding-left: 0;
  466. .nav-icon {
  467. margin-left: .85rem;
  468. }
  469. .nav-treeview {
  470. border-left: .2rem solid;
  471. .nav-icon {
  472. margin-left: 1.15rem;
  473. }
  474. .nav-treeview {
  475. .nav-icon {
  476. margin-left: 1.45rem;
  477. }
  478. .nav-treeview {
  479. .nav-icon {
  480. margin-left: 1.75rem;
  481. }
  482. .nav-treeview {
  483. .nav-icon {
  484. margin-left: 2.05rem;
  485. }
  486. }
  487. }
  488. }
  489. }
  490. }
  491. }
  492. .sidebar-collapse &.nav-child-indent {
  493. .nav-treeview {
  494. .nav-icon {
  495. margin-left: .55rem;
  496. }
  497. .nav-link {
  498. padding-left: calc(#{$nav-link-padding-x} - .2rem);
  499. }
  500. .nav-treeview {
  501. .nav-icon {
  502. margin-left: .35rem;
  503. }
  504. .nav-treeview {
  505. .nav-icon {
  506. margin-left: .15rem;
  507. }
  508. .nav-treeview {
  509. .nav-icon {
  510. margin-left: -.15rem;
  511. }
  512. .nav-treeview {
  513. .nav-icon {
  514. margin-left: -.35rem;
  515. }
  516. }
  517. }
  518. }
  519. }
  520. }
  521. }
  522. .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover &,
  523. .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover &,
  524. .sidebar-mini .main-sidebar.sidebar-focused &,
  525. .sidebar-mini-md .main-sidebar.sidebar-focused & {
  526. &.nav-compact.nav-sidebar .nav-treeview {
  527. .nav-icon {
  528. margin-left: .4rem;
  529. }
  530. }
  531. &.nav-sidebar.nav-child-indent .nav-treeview {
  532. .nav-icon {
  533. margin-left: .85rem;
  534. }
  535. .nav-treeview {
  536. .nav-icon {
  537. margin-left: 1.15rem;
  538. }
  539. .nav-treeview {
  540. .nav-icon {
  541. margin-left: 1.45rem;
  542. }
  543. .nav-treeview {
  544. .nav-icon {
  545. margin-left: 1.75rem;
  546. }
  547. .nav-treeview {
  548. .nav-icon {
  549. margin-left: 2.05rem;
  550. }
  551. }
  552. }
  553. }
  554. }
  555. }
  556. }
  557. .nav-icon {
  558. @include transition(margin-left $transition-fn $transition-speed);
  559. }
  560. .nav-treeview {
  561. .nav-icon {
  562. margin-left: -.2rem;
  563. }
  564. }
  565. &.nav-sidebar > .nav-item {
  566. .nav-treeview,
  567. > .nav-treeview {
  568. background: rgba($white, .05);
  569. .nav-item {
  570. > .nav-link {
  571. border-left: .2rem solid;
  572. }
  573. }
  574. }
  575. }
  576. }
  577. .nav-legacy {
  578. margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
  579. &.nav-sidebar .nav-item {
  580. > .nav-link {
  581. border-radius: 0;
  582. margin-bottom: 0;
  583. > .nav-icon {
  584. margin-left: .55rem;
  585. .text-sm & {
  586. margin-left: .75rem;
  587. }
  588. }
  589. }
  590. }
  591. &.nav-sidebar > .nav-item {
  592. > .nav-link {
  593. &.active {
  594. background: inherit;
  595. border-left: 3px solid transparent;
  596. box-shadow: none;
  597. > .nav-icon {
  598. margin-left: calc(.55rem - 3px);
  599. .text-sm & {
  600. margin-left: calc(.75rem - 3px);
  601. }
  602. }
  603. }
  604. }
  605. }
  606. .text-sm &.nav-sidebar.nav-flat .nav-treeview {
  607. .nav-item {
  608. > .nav-link {
  609. > .nav-icon {
  610. margin-left: calc(.75rem - 3px);
  611. }
  612. }
  613. }
  614. }
  615. .sidebar-mini &,
  616. .sidebar-mini-md & {
  617. > .nav-item .nav-link {
  618. .nav-icon {
  619. @include transition(margin-left $transition-fn $transition-speed);
  620. margin-left: .75rem;
  621. }
  622. }
  623. }
  624. .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
  625. .sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
  626. .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
  627. .sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
  628. .nav-treeview {
  629. padding-left: 1rem;
  630. .nav-treeview {
  631. padding-left: 2rem;
  632. margin-left: -1rem;
  633. }
  634. }
  635. }
  636. .sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
  637. .sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
  638. .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
  639. .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
  640. .nav-treeview {
  641. padding-left: .5rem;
  642. .nav-treeview {
  643. padding-left: 1rem;
  644. margin-left: -.5rem;
  645. }
  646. }
  647. }
  648. .sidebar-mini.sidebar-collapse &,
  649. .sidebar-mini-md.sidebar-collapse & {
  650. > .nav-item > .nav-link {
  651. .nav-icon {
  652. margin-left: .55rem;
  653. }
  654. &.active {
  655. > .nav-icon{
  656. margin-left: .36rem;
  657. }
  658. }
  659. }
  660. &.nav-child-indent {
  661. .nav-treeview {
  662. .nav-treeview {
  663. padding-left: 0;
  664. margin-left: 0;
  665. }
  666. }
  667. }
  668. }
  669. .sidebar-mini.sidebar-collapse.text-sm &,
  670. .sidebar-mini-md.sidebar-collapse.text-sm & {
  671. > .nav-item > .nav-link {
  672. .nav-icon {
  673. margin-left: .75rem;
  674. }
  675. &.active {
  676. > .nav-icon{
  677. margin-left: calc(.75rem - 3px);
  678. }
  679. }
  680. }
  681. }
  682. [class*='sidebar-dark'] & {
  683. &.nav-sidebar > .nav-item {
  684. .nav-treeview,
  685. > .nav-treeview {
  686. background: rgba($white, .05);
  687. }
  688. > .nav-link.active {
  689. color: $sidebar-dark-active-color;
  690. }
  691. }
  692. .nav-treeview > .nav-item > .nav-link {
  693. &.active,
  694. &:focus,
  695. &:hover {
  696. background: none;
  697. color: $sidebar-dark-active-color;
  698. }
  699. }
  700. }
  701. [class*='sidebar-light'] & {
  702. &.nav-sidebar > .nav-item {
  703. .nav-treeview,
  704. > .nav-treeview {
  705. background: rgba($black, .05);
  706. }
  707. > .nav-link.active {
  708. color: $sidebar-light-active-color;
  709. }
  710. }
  711. .nav-treeview > .nav-item > .nav-link {
  712. &.active,
  713. &:focus,
  714. &:hover {
  715. background: none;
  716. color: $sidebar-light-active-color;
  717. }
  718. }
  719. }
  720. }
  721. .nav-collapse-hide-child {
  722. .menu-open > .nav-treeview {
  723. max-height: min-content;
  724. opacity: 1;
  725. }
  726. .sidebar-collapse & {
  727. .menu-open > .nav-treeview {
  728. max-height: 0;
  729. opacity: 0;
  730. }
  731. }
  732. .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
  733. .sidebar-mini.sidebar-collapse .main-sidebar:hover &,
  734. .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
  735. .sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
  736. .menu-open > .nav-treeview {
  737. max-height: min-content;
  738. opacity: 1;
  739. }
  740. }
  741. }
  742. // Nav Compact
  743. .nav-compact {
  744. .nav-link,
  745. .nav-header {
  746. padding-top: ($nav-link-padding-y / 2);
  747. padding-bottom: ($nav-link-padding-y / 2);
  748. }
  749. .nav-header:not(:first-of-type) {
  750. padding-top: ($nav-link-padding-y * 1.5);
  751. padding-bottom: ($nav-link-padding-y / 2);
  752. }
  753. .nav-link > .right,
  754. .nav-link > p > .right {
  755. top: .465rem;
  756. }
  757. .text-sm & {
  758. .nav-link > .right,
  759. .nav-link > p > .right {
  760. top: .7rem;
  761. }
  762. }
  763. }
  764. // Sidebar Form Control
  765. [class*='sidebar-dark'] {
  766. .form-control-sidebar,
  767. .btn-sidebar {
  768. background: lighten($sidebar-dark-bg, 5%);
  769. border: 1px solid lighten($sidebar-dark-bg, 15%);
  770. color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
  771. }
  772. .form-control-sidebar:focus,
  773. .btn-sidebar:focus {
  774. border: 1px solid lighten($sidebar-dark-bg, 30%);
  775. }
  776. .btn-sidebar:hover {
  777. background: lighten($sidebar-dark-bg, 7.5%);
  778. }
  779. .btn-sidebar:focus {
  780. background: lighten($sidebar-dark-bg, 10%);
  781. }
  782. }
  783. [class*='sidebar-light'] {
  784. .form-control-sidebar,
  785. .btn-sidebar {
  786. background: darken($sidebar-light-bg, 5%);
  787. border: 1px solid darken($sidebar-light-bg, 15%);
  788. color: color-yiq(darken($sidebar-light-bg, 5%));
  789. }
  790. .form-control-sidebar:focus,
  791. .btn-sidebar:focus {
  792. border: 1px solid darken($sidebar-light-bg, 30%);
  793. }
  794. .btn-sidebar:hover {
  795. background: darken($sidebar-light-bg, 7.5%);
  796. }
  797. .btn-sidebar:focus {
  798. background: darken($sidebar-light-bg, 10%);
  799. }
  800. }