_tab.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. .nav.nav-tabs .nav-item .nav-link.active:after {
  2. box-shadow: 0 0 2px 0 rgba($primary, 0.5) !important;
  3. }
  4. .nav.nav-tabs .nav-item .nav-link {
  5. font-size: 1rem;
  6. padding: 17px 14px;
  7. text-transform: capitalize;
  8. letter-spacing: 0.045rem;
  9. }
  10. .nav-vertical {
  11. .nav.nav-tabs .nav-item .nav-link {
  12. padding: 10px 25px;
  13. }
  14. .nav.nav-tabs .nav-item .nav-link.active:after {
  15. top: 1.3rem;
  16. width: 2.6rem;
  17. left: -17px;
  18. right: auto;
  19. }
  20. .nav.nav-tabs.nav-left {
  21. top: 5px;
  22. }
  23. .nav.nav-tabs.nav-left ~ .tab-content .tab-pane {
  24. background-color: transparent;
  25. }
  26. }
  27. .nav-tabs .nav-item {
  28. margin-bottom: 0;
  29. }
  30. .nav.nav-tabs {
  31. border-bottom: 1px solid #eee;
  32. }
  33. .nav-vertical {
  34. .nav.nav-tabs {
  35. border-bottom: 0;
  36. }
  37. .nav-tabs.flex-column {
  38. border-right: 0;
  39. > li {
  40. border-bottom: 0;
  41. }
  42. }
  43. }
  44. .nav-theme-primary, .nav-theme-success, .nav-theme-info, .nav-theme-danger {
  45. .nav.nav-tabs {
  46. background: $primary;
  47. padding-left: 10px;
  48. border-radius: .4rem;
  49. box-shadow: $shadow;
  50. }
  51. .nav.nav-tabs .nav-item .nav-link {
  52. color: $white50;
  53. }
  54. .nav.nav-tabs .nav-item .nav-link.active {
  55. color: $white;
  56. }
  57. .nav.nav-tabs .nav-item .nav-link.active:after {
  58. background: $white!important;
  59. }
  60. .nav-tabs .nav-item {
  61. margin-bottom: 2px;
  62. }
  63. //.tab-content {
  64. // background: $white;
  65. // box-shadow: $shadow;
  66. // margin-bottom: 5px;
  67. // border-radius: .4rem;
  68. //}
  69. }
  70. .nav-theme-success .nav.nav-tabs {
  71. background: $success;
  72. }
  73. .nav-theme-info .nav.nav-tabs {
  74. background: $info;
  75. }
  76. .nav-theme-danger .nav.nav-tabs {
  77. background: $danger;
  78. }