tabs.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /* --------------- System Tabs --------------- */
  2. div.tabs {
  3. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  4. margin-bottom: 20px;
  5. }
  6. .tabs ul.primary {
  7. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  8. }
  9. .tabs ul.primary li a {
  10. color: #000;
  11. background-color: #ededed;
  12. border-color: #bbb;
  13. border-style: solid solid none solid;
  14. border-width: 1px;
  15. height: 1.8em;
  16. line-height: 1.9;
  17. display: block;
  18. font-size: 0.929em;
  19. padding: 0 10px 3px;
  20. text-shadow: 0 1px 0 #fff;
  21. }
  22. .tabs ul.primary li.is-active a {
  23. background-color: #fff;
  24. border: 1px solid #bbb;
  25. }
  26. @media screen and (max-width: 37.5em) { /* 600px */
  27. .tabs ul.primary {
  28. border-bottom: 1px solid #bbb;
  29. }
  30. .tabs ul.primary li {
  31. display: block;
  32. margin: 0;
  33. }
  34. .tabs ul.primary li a {
  35. padding: 5px 10px;
  36. }
  37. .tabs ul.primary li.is-active a {
  38. border-bottom: none;
  39. }
  40. }
  41. @media screen and (min-width: 37.5em) { /* 600px */
  42. .tabs ul.primary {
  43. border-collapse: collapse;
  44. height: auto;
  45. line-height: normal;
  46. padding: 0 3px;
  47. margin: 0;
  48. overflow: hidden;
  49. border: none;
  50. background: transparent url(../../images/tabs-border.png) repeat-x left bottom;
  51. white-space: nowrap;
  52. }
  53. .tabs ul.primary li {
  54. display: block;
  55. float: left; /* LTR */
  56. vertical-align: bottom;
  57. margin: 0 5px 0 0; /* LTR */
  58. }
  59. [dir="rtl"] .tabs ul.primary li {
  60. margin: 0 0 0 5px;
  61. float: right;
  62. }
  63. .tabs ul.primary li a {
  64. float: left; /* not LTR */
  65. border-top-left-radius: 6px;
  66. border-top-right-radius: 6px;
  67. }
  68. .tabs ul.primary li.is-active a {
  69. border-bottom: 1px solid #fff;
  70. }
  71. }
  72. .tabs ul.secondary {
  73. border-bottom: none;
  74. margin: 5px;
  75. padding: 0.5em 0;
  76. overflow: hidden;
  77. }
  78. .tabs ul.secondary li {
  79. border-right: 1px solid #ccc; /* LTR */
  80. display: block;
  81. float: left; /* LTR */
  82. margin: 0;
  83. padding: 0 1em;
  84. }
  85. [dir="rtl"] .tabs ul.secondary li {
  86. border-left: 1px solid #ccc;
  87. border-right: none;
  88. float: right;
  89. }
  90. .tabs ul.secondary li:last-child {
  91. border-right: none; /* LTR */
  92. }
  93. [dir="rtl"] .tabs ul.secondary li:last-child {
  94. border-left: none;
  95. }
  96. .tabs ul.secondary li:first-child {
  97. padding-left: 0; /* LTR */
  98. }
  99. [dir="rtl"] .tabs ul.secondary li:first-child {
  100. padding-right: 0;
  101. }
  102. .tabs ul.secondary li a {
  103. display: inline;
  104. padding: 0.25em 0.5em;
  105. text-decoration: none;
  106. }
  107. .tabs ul.secondary li a.is-active {
  108. background: #f2f2f2;
  109. border-bottom: none;
  110. border-radius: 5px;
  111. }