vertical-tabs.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. /**
  2. * @file
  3. * Vertical Tabs.
  4. */
  5. .vertical-tabs {
  6. margin: 1em 0 1em 15em; /* LTR */
  7. border: 1px solid #ccc;
  8. }
  9. [dir="rtl"] .vertical-tabs {
  10. margin-left: 0;
  11. margin-right: 15em;
  12. }
  13. .vertical-tabs__menu {
  14. float: left; /* LTR */
  15. width: 15em;
  16. margin: -1px 0 -1px -15em; /* LTR */
  17. padding: 0;
  18. border-top: 1px solid #ccc;
  19. list-style: none;
  20. }
  21. [dir="rtl"] .vertical-tabs__menu {
  22. float: right;
  23. margin-left: 0;
  24. margin-right: -15em;
  25. }
  26. .vertical-tabs__pane {
  27. margin: 0;
  28. border: 0;
  29. }
  30. .vertical-tabs__pane > summary {
  31. display: none;
  32. }
  33. /* Layout of each tab. */
  34. .vertical-tabs__menu-item {
  35. border: 1px solid #ccc;
  36. border-top: 0;
  37. background: #eee;
  38. }
  39. .vertical-tabs__menu-item a {
  40. display: block;
  41. padding: 0.5em 0.6em;
  42. text-decoration: none;
  43. }
  44. .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title,
  45. .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
  46. .vertical-tabs__menu-item a:hover .vertical-tabs__menu-item-title {
  47. text-decoration: underline;
  48. }
  49. .vertical-tabs__menu-item a:hover {
  50. outline: 1px dotted;
  51. }
  52. .vertical-tabs__menu-item.is-selected {
  53. border-right-width: 0; /* LTR */
  54. background-color: #fff;
  55. }
  56. [dir="rtl"] .vertical-tabs__menu-item.is-selected {
  57. border-left-width: 0;
  58. border-right-width: 1px;
  59. }
  60. .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
  61. color: #000;
  62. }
  63. .vertical-tabs__menu-item-summary {
  64. display: block;
  65. margin-bottom: 0;
  66. line-height: normal;
  67. }