_tab.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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;
  7. text-transform: uppercase;
  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: 12px;
  22. }
  23. .nav.nav-tabs.nav-left ~ .tab-content .tab-pane {
  24. background-color: transparent;
  25. }
  26. }
  27. .nav-theme-primary, .nav-theme-success, .nav-theme-info, .nav-theme-danger {
  28. .nav.nav-tabs {
  29. background: $primary;
  30. padding-left: 10px;
  31. border-radius: .4rem;
  32. box-shadow: $shadow;
  33. }
  34. .nav.nav-tabs .nav-item .nav-link {
  35. color: $white50;
  36. }
  37. .nav.nav-tabs .nav-item .nav-link.active {
  38. color: $white;
  39. }
  40. .nav.nav-tabs .nav-item .nav-link.active:after {
  41. background: $white!important;
  42. }
  43. .nav-tabs .nav-item {
  44. margin-bottom: 2px;
  45. }
  46. //.tab-content {
  47. // background: $white;
  48. // box-shadow: $shadow;
  49. // margin-bottom: 5px;
  50. // border-radius: .4rem;
  51. //}
  52. }
  53. .nav-theme-success .nav.nav-tabs {
  54. background: $success;
  55. }
  56. .nav-theme-info .nav.nav-tabs {
  57. background: $info;
  58. }
  59. .nav-theme-danger .nav.nav-tabs {
  60. background: $danger;
  61. }