_main-sidebar.scss 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931
  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: .7rem;
  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: .8rem;
  212. font-size: 1.2rem;
  213. }
  214. p i {
  215. margin-right: 0;
  216. }
  217. }
  218. // Hover and active states
  219. &.menu-open > .nav-link,
  220. &:hover > .nav-link {
  221. background-color: $sidebar-light-hover-bg;
  222. color: $sidebar-light-hover-color;
  223. }
  224. > .nav-link.active {
  225. color: $sidebar-light-active-color;
  226. @if $enable-shadows {
  227. box-shadow: map-get($elevations, 1);
  228. }
  229. }
  230. // First Level Submenu
  231. > .nav-treeview {
  232. background: $sidebar-light-submenu-bg;
  233. }
  234. }
  235. // Section Heading
  236. .nav-header {
  237. background: inherit;
  238. color: darken($sidebar-light-color, 5%);
  239. }
  240. // All links within the sidebar menu
  241. .sidebar {
  242. a {
  243. color: $sidebar-light-color;
  244. &:hover {
  245. text-decoration: none;
  246. }
  247. }
  248. }
  249. // All submenus
  250. .nav-treeview {
  251. > .nav-item {
  252. > .nav-link {
  253. color: $sidebar-light-submenu-color;
  254. i {
  255. margin-right: 1rem;
  256. font-size: .9rem;
  257. }
  258. }
  259. > .nav-link.active {
  260. &,
  261. &:hover {
  262. background-color: transparent!important;
  263. background-image: $sidebar-light-submenu-active-bg;
  264. //color: $sidebar-light-submenu-active-color;
  265. box-shadow: 0 0 10px 1px rgba($primary,.7);
  266. }
  267. }
  268. > .nav-link:hover {
  269. background-color: $sidebar-light-submenu-hover-bg;
  270. }
  271. }
  272. }
  273. // Flat style
  274. .nav-flat {
  275. .nav-item {
  276. .nav-treeview {
  277. .nav-treeview {
  278. border-color: $sidebar-light-submenu-active-bg;
  279. }
  280. > .nav-item {
  281. > .nav-link {
  282. &,
  283. &.active {
  284. border-color: $sidebar-light-submenu-active-bg;
  285. }
  286. }
  287. }
  288. }
  289. }
  290. }
  291. }
  292. [class*='sidebar-dark-'] {
  293. // Sidebar background color
  294. background-color: $sidebar-dark-bg;
  295. // User Panel (resides in the sidebar)
  296. .user-panel {
  297. a:hover {
  298. color: $sidebar-dark-hover-color;
  299. }
  300. .status {
  301. background: $sidebar-dark-hover-bg;
  302. color: $sidebar-dark-color;
  303. &:hover,
  304. &:focus,
  305. &:active {
  306. background: darken($sidebar-dark-hover-bg, 3%);
  307. color: $sidebar-dark-hover-color;
  308. }
  309. }
  310. .dropdown-menu {
  311. @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
  312. border-color: darken($sidebar-dark-hover-bg, 5%);
  313. }
  314. .dropdown-item {
  315. color: $body-color;
  316. }
  317. }
  318. // Sidebar Menu. First level links
  319. .nav-sidebar > .nav-item {
  320. // links
  321. > .nav-link {
  322. // border-left: 3px solid transparent;
  323. &:active {
  324. color: $sidebar-dark-color;
  325. }
  326. }
  327. // Hover and active states
  328. &.menu-open > .nav-link,
  329. &:hover > .nav-link,
  330. & > .nav-link:focus {
  331. background-color: $sidebar-dark-hover-bg;
  332. color: $sidebar-dark-hover-color;
  333. }
  334. > .nav-link.active {
  335. color: $sidebar-dark-hover-color;
  336. @if $enable-shadows {
  337. box-shadow: map-get($elevations, 1);
  338. }
  339. }
  340. // First Level Submenu
  341. > .nav-treeview {
  342. background: $sidebar-dark-submenu-bg;
  343. }
  344. }
  345. // Section Heading
  346. .nav-header {
  347. background: inherit; //darken($sidebar-dark-bg, 3%);
  348. color: lighten($sidebar-dark-color, 5%);
  349. }
  350. // All links within the sidebar menu
  351. .sidebar {
  352. a {
  353. color: $sidebar-dark-color;
  354. &:hover,
  355. &:focus {
  356. text-decoration: none;
  357. }
  358. }
  359. }
  360. // All submenus
  361. .nav-treeview {
  362. > .nav-item {
  363. > .nav-link {
  364. color: $sidebar-dark-submenu-color;
  365. &:hover,
  366. &:focus {
  367. background-color: $sidebar-dark-submenu-hover-bg;
  368. color: $sidebar-dark-submenu-hover-color;
  369. }
  370. }
  371. > .nav-link.active {
  372. &,
  373. &:hover,
  374. &:focus {
  375. background-color: $sidebar-dark-submenu-active-bg;
  376. color: $sidebar-dark-submenu-active-color;
  377. }
  378. }
  379. }
  380. }
  381. // Flat Style
  382. .nav-flat {
  383. .nav-item {
  384. .nav-treeview {
  385. .nav-treeview {
  386. border-color: $sidebar-dark-submenu-active-bg;
  387. }
  388. > .nav-item {
  389. > .nav-link {
  390. &,
  391. &.active {
  392. border-color: $sidebar-dark-submenu-active-bg;
  393. }
  394. }
  395. }
  396. }
  397. }
  398. }
  399. }
  400. // Sidebar variants
  401. @each $name, $color in $theme-colors {
  402. .sidebar-dark-#{$name},
  403. .sidebar-light-#{$name} {
  404. @include sidebar-color($color)
  405. }
  406. }
  407. @each $name, $color in $colors {
  408. .sidebar-dark-#{$name},
  409. .sidebar-light-#{$name} {
  410. @include sidebar-color($color)
  411. }
  412. }
  413. .sidebar-mini .main-sidebar:not(.sidebar-no-expand),
  414. .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand),
  415. .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover,
  416. .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
  417. .sidebar-mini .main-sidebar.sidebar-focused,
  418. .sidebar-mini-md .main-sidebar.sidebar-focused {
  419. .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
  420. padding-left: 1rem;
  421. margin-left: -.5rem;
  422. }
  423. }
  424. // Nav Flat
  425. .nav-flat {
  426. margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
  427. .nav-item {
  428. > .nav-link {
  429. border-radius: 0;
  430. margin-bottom: 0;
  431. > .nav-icon {
  432. margin-left: .55rem;
  433. }
  434. }
  435. }
  436. &:not(.nav-child-indent) {
  437. .nav-treeview {
  438. .nav-item {
  439. > .nav-link {
  440. > .nav-icon {
  441. margin-left: .4rem;
  442. }
  443. }
  444. }
  445. }
  446. }
  447. &.nav-child-indent {
  448. .nav-treeview {
  449. padding-left: 0;
  450. .nav-icon {
  451. margin-left: .85rem;
  452. }
  453. .nav-treeview {
  454. border-left: .2rem solid;
  455. .nav-icon {
  456. margin-left: 1.15rem;
  457. }
  458. .nav-treeview {
  459. .nav-icon {
  460. margin-left: 1.45rem;
  461. }
  462. .nav-treeview {
  463. .nav-icon {
  464. margin-left: 1.75rem;
  465. }
  466. .nav-treeview {
  467. .nav-icon {
  468. margin-left: 2.05rem;
  469. }
  470. }
  471. }
  472. }
  473. }
  474. }
  475. }
  476. .sidebar-collapse &.nav-child-indent {
  477. .nav-treeview {
  478. .nav-icon {
  479. margin-left: .55rem;
  480. }
  481. .nav-link {
  482. padding-left: calc(#{$nav-link-padding-x} - .2rem);
  483. }
  484. .nav-treeview {
  485. .nav-icon {
  486. margin-left: .35rem;
  487. }
  488. .nav-treeview {
  489. .nav-icon {
  490. margin-left: .15rem;
  491. }
  492. .nav-treeview {
  493. .nav-icon {
  494. margin-left: -.15rem;
  495. }
  496. .nav-treeview {
  497. .nav-icon {
  498. margin-left: -.35rem;
  499. }
  500. }
  501. }
  502. }
  503. }
  504. }
  505. }
  506. .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover &,
  507. .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover &,
  508. .sidebar-mini .main-sidebar.sidebar-focused &,
  509. .sidebar-mini-md .main-sidebar.sidebar-focused & {
  510. &.nav-compact.nav-sidebar .nav-treeview {
  511. .nav-icon {
  512. margin-left: .4rem;
  513. }
  514. }
  515. &.nav-sidebar.nav-child-indent .nav-treeview {
  516. .nav-icon {
  517. margin-left: .85rem;
  518. }
  519. .nav-treeview {
  520. .nav-icon {
  521. margin-left: 1.15rem;
  522. }
  523. .nav-treeview {
  524. .nav-icon {
  525. margin-left: 1.45rem;
  526. }
  527. .nav-treeview {
  528. .nav-icon {
  529. margin-left: 1.75rem;
  530. }
  531. .nav-treeview {
  532. .nav-icon {
  533. margin-left: 2.05rem;
  534. }
  535. }
  536. }
  537. }
  538. }
  539. }
  540. }
  541. .nav-icon {
  542. @include transition(margin-left $transition-fn $transition-speed);
  543. }
  544. .nav-treeview {
  545. .nav-icon {
  546. margin-left: -.2rem;
  547. }
  548. }
  549. &.nav-sidebar > .nav-item {
  550. .nav-treeview,
  551. > .nav-treeview {
  552. background: rgba($white, .05);
  553. .nav-item {
  554. > .nav-link {
  555. border-left: .2rem solid;
  556. }
  557. }
  558. }
  559. }
  560. }
  561. .nav-legacy {
  562. margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
  563. &.nav-sidebar .nav-item {
  564. > .nav-link {
  565. border-radius: 0;
  566. margin-bottom: 0;
  567. > .nav-icon {
  568. margin-left: .55rem;
  569. .text-sm & {
  570. margin-left: .75rem;
  571. }
  572. }
  573. }
  574. }
  575. &.nav-sidebar > .nav-item {
  576. > .nav-link {
  577. &.active {
  578. background: inherit;
  579. border-left: 3px solid transparent;
  580. box-shadow: none;
  581. > .nav-icon {
  582. margin-left: calc(.55rem - 3px);
  583. .text-sm & {
  584. margin-left: calc(.75rem - 3px);
  585. }
  586. }
  587. }
  588. }
  589. }
  590. .text-sm &.nav-sidebar.nav-flat .nav-treeview {
  591. .nav-item {
  592. > .nav-link {
  593. > .nav-icon {
  594. margin-left: calc(.75rem - 3px);
  595. }
  596. }
  597. }
  598. }
  599. .sidebar-mini &,
  600. .sidebar-mini-md & {
  601. > .nav-item .nav-link {
  602. .nav-icon {
  603. @include transition(margin-left $transition-fn $transition-speed);
  604. margin-left: .75rem;
  605. }
  606. }
  607. }
  608. .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
  609. .sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
  610. .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
  611. .sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
  612. .nav-treeview {
  613. padding-left: 1rem;
  614. .nav-treeview {
  615. padding-left: 2rem;
  616. margin-left: -1rem;
  617. }
  618. }
  619. }
  620. .sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
  621. .sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
  622. .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
  623. .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
  624. .nav-treeview {
  625. padding-left: .5rem;
  626. .nav-treeview {
  627. padding-left: 1rem;
  628. margin-left: -.5rem;
  629. }
  630. }
  631. }
  632. .sidebar-mini.sidebar-collapse &,
  633. .sidebar-mini-md.sidebar-collapse & {
  634. > .nav-item > .nav-link {
  635. .nav-icon {
  636. margin-left: .55rem;
  637. }
  638. &.active {
  639. > .nav-icon{
  640. margin-left: .36rem;
  641. }
  642. }
  643. }
  644. &.nav-child-indent {
  645. .nav-treeview {
  646. .nav-treeview {
  647. padding-left: 0;
  648. margin-left: 0;
  649. }
  650. }
  651. }
  652. }
  653. .sidebar-mini.sidebar-collapse.text-sm &,
  654. .sidebar-mini-md.sidebar-collapse.text-sm & {
  655. > .nav-item > .nav-link {
  656. .nav-icon {
  657. margin-left: .75rem;
  658. }
  659. &.active {
  660. > .nav-icon{
  661. margin-left: calc(.75rem - 3px);
  662. }
  663. }
  664. }
  665. }
  666. [class*='sidebar-dark'] & {
  667. &.nav-sidebar > .nav-item {
  668. .nav-treeview,
  669. > .nav-treeview {
  670. background: rgba($white, .05);
  671. }
  672. > .nav-link.active {
  673. color: $sidebar-dark-active-color;
  674. }
  675. }
  676. .nav-treeview > .nav-item > .nav-link {
  677. &.active,
  678. &:focus,
  679. &:hover {
  680. background: none;
  681. color: $sidebar-dark-active-color;
  682. }
  683. }
  684. }
  685. [class*='sidebar-light'] & {
  686. &.nav-sidebar > .nav-item {
  687. .nav-treeview,
  688. > .nav-treeview {
  689. background: rgba($black, .05);
  690. }
  691. > .nav-link.active {
  692. color: $sidebar-light-active-color;
  693. }
  694. }
  695. .nav-treeview > .nav-item > .nav-link {
  696. &.active,
  697. &:focus,
  698. &:hover {
  699. background: none;
  700. color: $sidebar-light-active-color;
  701. }
  702. }
  703. }
  704. }
  705. .nav-collapse-hide-child {
  706. .menu-open > .nav-treeview {
  707. max-height: min-content;
  708. opacity: 1;
  709. }
  710. .sidebar-collapse & {
  711. .menu-open > .nav-treeview {
  712. max-height: 0;
  713. opacity: 0;
  714. }
  715. }
  716. .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
  717. .sidebar-mini.sidebar-collapse .main-sidebar:hover &,
  718. .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
  719. .sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
  720. .menu-open > .nav-treeview {
  721. max-height: min-content;
  722. opacity: 1;
  723. }
  724. }
  725. }
  726. // Nav Compact
  727. .nav-compact {
  728. .nav-link,
  729. .nav-header {
  730. padding-top: ($nav-link-padding-y / 2);
  731. padding-bottom: ($nav-link-padding-y / 2);
  732. }
  733. .nav-header:not(:first-of-type) {
  734. padding-top: ($nav-link-padding-y * 1.5);
  735. padding-bottom: ($nav-link-padding-y / 2);
  736. }
  737. .nav-link > .right,
  738. .nav-link > p > .right {
  739. top: .465rem;
  740. }
  741. .text-sm & {
  742. .nav-link > .right,
  743. .nav-link > p > .right {
  744. top: .7rem;
  745. }
  746. }
  747. }
  748. // Sidebar Form Control
  749. [class*='sidebar-dark'] {
  750. .form-control-sidebar,
  751. .btn-sidebar {
  752. background: lighten($sidebar-dark-bg, 5%);
  753. border: 1px solid lighten($sidebar-dark-bg, 15%);
  754. color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
  755. }
  756. .form-control-sidebar:focus,
  757. .btn-sidebar:focus {
  758. border: 1px solid lighten($sidebar-dark-bg, 30%);
  759. }
  760. .btn-sidebar:hover {
  761. background: lighten($sidebar-dark-bg, 7.5%);
  762. }
  763. .btn-sidebar:focus {
  764. background: lighten($sidebar-dark-bg, 10%);
  765. }
  766. }
  767. [class*='sidebar-light'] {
  768. .form-control-sidebar,
  769. .btn-sidebar {
  770. background: darken($sidebar-light-bg, 5%);
  771. border: 1px solid darken($sidebar-light-bg, 15%);
  772. color: color-yiq(darken($sidebar-light-bg, 5%));
  773. }
  774. .form-control-sidebar:focus,
  775. .btn-sidebar:focus {
  776. border: 1px solid darken($sidebar-light-bg, 30%);
  777. }
  778. .btn-sidebar:hover {
  779. background: darken($sidebar-light-bg, 7.5%);
  780. }
  781. .btn-sidebar:focus {
  782. background: darken($sidebar-light-bg, 10%);
  783. }
  784. }