You are here

tabs.css in Javascript Tools 5

/*
IMPORTANT:
Essential styles to ensure accessibility
*/
@media projection, screen { /* use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}
@media print { /* maintain accessibility by overriding inline style used by animations... */
    .fragment {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
    }
    .anchors {
        display: none;
    }
}

/*
TAB STYLES:
Some more styles, not important for making tabs work, just for the look of it...
*/
.anchors {
    list-style: none;
    margin: 0;
    padding: 0 0 1px;
}
.anchors:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.anchors li {
    float: left;
    margin: 0 1px 0 0;
}
.anchors a {
    display: block;
    position: relative;
    top: 1px;
    border: 1px solid #eaeaea;
    border-bottom: 0;
    z-index: 2;
    padding: 2px 9px 1px;
    color: #000;
    text-decoration: none;
}
.anchors .tabs-selected a {
    padding-bottom: 2px;
    font-weight: bold;
}
.anchors a:focus, .anchors a:active {
    outline: none; /* @ Firefox 1.5, remove ugly dotted border */
}
.anchors .tabs-selected a, .anchors a:hover, .anchors a:focus, .anchors a:active,
.fragment {
    background: #eaeaea;
}
.anchors .tabs-selected a:link, .anchors .tabs-selected a:visited,
.anchors .tabs-disabled a:link, .anchors .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.anchors a:hover, .anchors a:focus, .anchors a:active {
    cursor: pointer;
}
.anchors .tabs-disabled {
    opacity: .4;
}
.anchors .tabs-disabled a:hover, .anchors .tabs-disabled a:focus, .anchors .tabs-disabled a:active {
    background: transparent;
}
.fragment {
    padding: 0 10px;
}

File

tabs/tabs.css
View source
  1. /*
  2. IMPORTANT:
  3. Essential styles to ensure accessibility
  4. */
  5. @media projection, screen { /* use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
  6. .tabs-hide {
  7. display: none;
  8. }
  9. }
  10. @media print { /* maintain accessibility by overriding inline style used by animations... */
  11. .fragment {
  12. display: block !important;
  13. height: auto !important;
  14. opacity: 1 !important;
  15. }
  16. .anchors {
  17. display: none;
  18. }
  19. }
  20. /*
  21. TAB STYLES:
  22. Some more styles, not important for making tabs work, just for the look of it...
  23. */
  24. .anchors {
  25. list-style: none;
  26. margin: 0;
  27. padding: 0 0 1px;
  28. }
  29. .anchors:after { /* clearing without presentational markup, IE gets extra treatment */
  30. display: block;
  31. clear: both;
  32. content: " ";
  33. }
  34. .anchors li {
  35. float: left;
  36. margin: 0 1px 0 0;
  37. }
  38. .anchors a {
  39. display: block;
  40. position: relative;
  41. top: 1px;
  42. border: 1px solid #eaeaea;
  43. border-bottom: 0;
  44. z-index: 2;
  45. padding: 2px 9px 1px;
  46. color: #000;
  47. text-decoration: none;
  48. }
  49. .anchors .tabs-selected a {
  50. padding-bottom: 2px;
  51. font-weight: bold;
  52. }
  53. .anchors a:focus, .anchors a:active {
  54. outline: none; /* @ Firefox 1.5, remove ugly dotted border */
  55. }
  56. .anchors .tabs-selected a, .anchors a:hover, .anchors a:focus, .anchors a:active,
  57. .fragment {
  58. background: #eaeaea;
  59. }
  60. .anchors .tabs-selected a:link, .anchors .tabs-selected a:visited,
  61. .anchors .tabs-disabled a:link, .anchors .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
  62. cursor: text;
  63. }
  64. .anchors a:hover, .anchors a:focus, .anchors a:active {
  65. cursor: pointer;
  66. }
  67. .anchors .tabs-disabled {
  68. opacity: .4;
  69. }
  70. .anchors .tabs-disabled a:hover, .anchors .tabs-disabled a:focus, .anchors .tabs-disabled a:active {
  71. background: transparent;
  72. }
  73. .fragment {
  74. padding: 0 10px;
  75. }