tabbed-pane.scss 956 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. // Only constrain max-width for top-level tabbed panes not, e.g., those in lists.
  2. .td-content > .tab-content .tab-pane {
  3. @extend .td-max-width-on-larger-screens;
  4. }
  5. .tab-content {
  6. .tab-pane {
  7. .highlight {
  8. margin: 0;
  9. border: none;
  10. max-width: 100%;
  11. }
  12. margin-top: 0;
  13. margin-bottom: 1.5rem;
  14. border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
  15. border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
  16. border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  17. }
  18. }
  19. .tab-body {
  20. font-weight: $font-weight-medium;
  21. background: var(--td-pre-bg);
  22. color: var(--bs-body-color);
  23. border-radius: 0;
  24. padding: 1.5rem;
  25. > :last-child {
  26. margin-bottom: 0;
  27. }
  28. > .highlight:only-child {
  29. margin: -1.5rem;
  30. max-width: calc(100% + 3rem);
  31. }
  32. @each $color, $value in $theme-colors {
  33. &-#{$color} {
  34. border-style: solid;
  35. border-color: $value;
  36. }
  37. }
  38. }