_tab.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. color: rgba(0,0,0,.4);
  10. font-weight: bold;
  11. }
  12. .nav-vertical {
  13. .nav.nav-tabs .nav-item .nav-link {
  14. padding: 10px 25px;
  15. }
  16. .nav.nav-tabs .nav-item .nav-link.active:after {
  17. top: 1.3rem;
  18. width: 2.6rem;
  19. left: -17px;
  20. right: auto;
  21. }
  22. .nav.nav-tabs.nav-left {
  23. top: 5px;
  24. }
  25. .nav.nav-tabs.nav-left ~ .tab-content .tab-pane {
  26. background-color: transparent;
  27. }
  28. }
  29. .nav-tabs .nav-item {
  30. margin-bottom: 0;
  31. }
  32. .nav.nav-tabs {
  33. border-bottom: 1px solid #f4f4f4;
  34. }
  35. .nav-vertical {
  36. .nav.nav-tabs {
  37. border-bottom: 0;
  38. }
  39. .nav-tabs.flex-column {
  40. border-right: 0;
  41. > li {
  42. border-bottom: 0;
  43. }
  44. }
  45. }
  46. .nav-theme-primary, .nav-theme-white, .nav-theme-success, .nav-theme-info, .nav-theme-danger {
  47. .nav.nav-tabs {
  48. background: $primary;
  49. padding-left: 10px;
  50. border-radius: .15rem;
  51. box-shadow: $shadow;
  52. border-bottom: 0;
  53. }
  54. .nav.nav-tabs .nav-item .nav-link {
  55. color: $white50;
  56. }
  57. .nav.nav-tabs .nav-item .nav-link.active {
  58. color: $white;
  59. }
  60. .nav.nav-tabs .nav-item .nav-link.active:after {
  61. background: $white!important;
  62. }
  63. .nav-tabs .nav-item {
  64. margin-bottom: 2px;
  65. }
  66. //.tab-content {
  67. // background: $white;
  68. // box-shadow: $shadow;
  69. // margin-bottom: 5px;
  70. // border-radius: $card-border-radius;
  71. //}
  72. }
  73. .nav-theme-success .nav.nav-tabs {
  74. background: $success;
  75. }
  76. .nav-theme-info .nav.nav-tabs {
  77. background: $info;
  78. }
  79. .nav-theme-danger .nav.nav-tabs {
  80. background: $danger;
  81. }
  82. .nav-theme-white {
  83. .nav.nav-tabs {
  84. background: #fff;
  85. }
  86. .nav.nav-tabs .nav-item .nav-link {
  87. color: rgba(0,0,0,.4);;
  88. }
  89. .nav.nav-tabs .nav-item .nav-link.active {
  90. color: $primary;
  91. }
  92. .nav.nav-tabs .nav-item .nav-link.active:after {
  93. background: $primary!important;
  94. }
  95. }