vertical-tabs.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /**
  2. * @file
  3. * Override of misc/vertical-tabs.css.
  4. */
  5. .vertical-tabs {
  6. position: relative;
  7. overflow: hidden;
  8. margin: 10px 0;
  9. border: 1px solid #bdbdbd;
  10. border-radius: 4px;
  11. background: #e6e5e1;
  12. }
  13. .vertical-tabs__menu {
  14. float: left; /* LTR */
  15. width: 240px;
  16. margin: 0 -100% -1px 0; /* LTR */
  17. padding: 0;
  18. border-bottom: 1px solid #ccc;
  19. line-height: 1;
  20. }
  21. [dir="rtl"] .vertical-tabs__menu {
  22. float: right;
  23. margin: 0 0 -1px -100%;
  24. }
  25. .vertical-tabs__menu-item {
  26. position: relative;
  27. }
  28. .vertical-tabs__menu-item.is-selected {
  29. z-index: 1;
  30. overflow-x: hidden;
  31. width: 100%;
  32. border-right: 1px solid #fcfcfa; /* LTR */
  33. box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
  34. border-bottom: 1px solid #b3b2ad;
  35. }
  36. .vertical-tabs__menu-item.last {
  37. border-bottom: none;
  38. }
  39. [dir="rtl"] .vertical-tabs__menu-item.is-selected {
  40. border-left: 1px solid #fcfcfa;
  41. border-right: none;
  42. }
  43. .vertical-tabs__menu-item:focus,
  44. .vertical-tabs__menu-item:active {
  45. z-index: 2;
  46. }
  47. .vertical-tabs__menu-item a {
  48. display: block;
  49. padding: 10px 15px 15px;
  50. border-bottom: 1px solid #b3b2ad;
  51. background-color: #f2f2f0;
  52. text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
  53. text-decoration: none;
  54. }
  55. .vertical-tabs__menu-item:last-child a {
  56. border-bottom: 0;
  57. }
  58. .vertical-tabs__menu-item.is-selected a,
  59. .vertical-tabs__menu-item a:hover,
  60. .vertical-tabs__menu-item a:focus {
  61. background: #fcfcfa;
  62. text-shadow: none;
  63. }
  64. .vertical-tabs__menu-item a:focus {
  65. outline: none;
  66. }
  67. .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title {
  68. text-decoration: underline;
  69. }
  70. .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
  71. .vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {
  72. text-decoration: none;
  73. }
  74. .vertical-tabs__menu-item.is-selected a {
  75. color: #004f80;
  76. padding-left: 11px; /* LTR */
  77. border-bottom: none;
  78. text-decoration: none;
  79. }
  80. [dir=rtl] .vertical-tabs__menu-item.is-selected a {
  81. padding-left: 15px;
  82. padding-right: 11px;
  83. }
  84. .vertical-tabs__menu-item.is-selected a:hover,
  85. .vertical-tabs__menu-item.is-selected a:focus {
  86. color: #007ecc;
  87. }
  88. [data-vertical-tabs-panes] {
  89. background-color: #fcfcfa;
  90. }
  91. .vertical-tabs__panes {
  92. margin: 0 0 0 240px; /* LTR */
  93. padding: 10px 15px 10px 15px;
  94. border-left: 1px solid #a6a5a1; /* LTR */
  95. }
  96. [dir="rtl"] .vertical-tabs__panes {
  97. margin: 0 240px 0 0;
  98. border-left: none;
  99. border-right: 1px solid #a6a5a1;
  100. }
  101. .vertical-tabs__panes:after {
  102. content: "";
  103. display: table;
  104. clear: both;
  105. }
  106. .vertical-tabs__pane {
  107. margin: 0;
  108. padding: 0;
  109. border: 0;
  110. color: #595959;
  111. }
  112. .vertical-tabs__menu-item-summary {
  113. display: block;
  114. padding-top: 0.4em;
  115. color: #666;
  116. }
  117. .vertical-tabs__pane > summary {
  118. display: none;
  119. }