tabs.css

Same filename in this branch
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  2. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/tabs.css
  3. 8.9.x core/themes/seven/css/components/tabs.css
  4. 8.9.x core/themes/seven/css/classy/components/tabs.css
  5. 8.9.x core/themes/claro/css/components/tabs.css
  6. 8.9.x core/themes/bartik/css/classy/components/tabs.css
  7. 8.9.x core/themes/classy/css/components/tabs.css
  8. 8.9.x core/assets/vendor/jquery.ui/themes/base/tabs.css
Same filename and directory in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  2. 9 core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  3. 9 core/profiles/demo_umami/themes/umami/css/classy/components/tabs.css
  4. 9 core/themes/olivero/css/components/tabs.css
  5. 9 core/themes/seven/css/components/tabs.css
  6. 9 core/themes/seven/css/classy/components/tabs.css
  7. 9 core/themes/claro/css/components/tabs.css
  8. 9 core/themes/bartik/css/components/tabs.css
  9. 9 core/themes/bartik/css/classy/components/tabs.css
  10. 9 core/themes/starterkit_theme/css/components/tabs.css
  11. 9 core/themes/classy/css/components/tabs.css
  12. 10 core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  13. 10 core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  14. 10 core/themes/olivero/css/components/tabs.css
  15. 10 core/themes/claro/css/components/tabs.css
  16. 10 core/themes/starterkit_theme/css/components/tabs.css
  17. 11.x core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
  18. 11.x core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
  19. 11.x core/themes/olivero/css/components/tabs.css
  20. 11.x core/themes/claro/css/components/tabs.css
  21. 11.x core/themes/starterkit_theme/css/components/tabs.css
/* --------------- System Tabs  --------------- */

div.tabs {
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tabs ul.primary {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tabs ul.primary li a {
  display: block;
  height: 1.8em;
  padding: 0 10px 3px;
  color: #000;
  border-width: 1px;
  border-style: solid solid none solid;
  border-color: #bbb;
  background-color: #ededed;
  text-shadow: 0 1px 0 #fff;
  font-size: 0.929em;
  line-height: 1.9;
}
.tabs ul.primary li.is-active a {
  border: 1px solid #bbb;
  background-color: #fff;
}

@media screen and (max-width: 37.5em) { /* 600px */
  .tabs ul.primary {
    border-bottom: 1px solid #bbb;
  }
  .tabs ul.primary li {
    display: block;
    margin: 0;
  }
  .tabs ul.primary li a {
    padding: 5px 10px;
  }
  .tabs ul.primary li.is-active a {
    border-bottom: none;
  }
}

@media screen and (min-width: 37.5em) { /* 600px */
  .tabs ul.primary {
    overflow: hidden;
    height: auto;
    margin: 0;
    padding: 0 3px;
    white-space: nowrap;
    border: none;
    border-collapse: collapse;
    background: transparent url(../../images/tabs-border.png) repeat-x left bottom;
    line-height: normal;
  }
  .tabs ul.primary li {
    display: block;
    float: left; /* LTR */
    margin: 0 5px 0 0; /* LTR */
    vertical-align: bottom;
  }
  [dir="rtl"] .tabs ul.primary li {
    float: right;
    margin: 0 0 0 5px;
  }
  .tabs ul.primary li a {
    float: left; /* not LTR */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .tabs ul.primary li.is-active a {
    border-bottom: 1px solid #fff;
  }
}
.tabs ul.secondary {
  overflow: hidden;
  margin: 5px;
  padding: 0.5em 0;
  border-bottom: none;
}
.tabs ul.secondary li {
  display: block;
  float: left; /* LTR */
  margin: 0;
  padding: 0 1em;
  border-right: 1px solid #ccc; /* LTR */
}
[dir="rtl"] .tabs ul.secondary li {
  float: right;
  border-right: none;
  border-left: 1px solid #ccc;
}
.tabs ul.secondary li:last-child {
  border-right: none; /* LTR */
}
[dir="rtl"] .tabs ul.secondary li:last-child {
  border-left: none;
}
.tabs ul.secondary li:first-child {
  padding-left: 0; /* LTR */
}
[dir="rtl"] .tabs ul.secondary li:first-child {
  padding-right: 0;
}
.tabs ul.secondary li a {
  display: inline;
  padding: 0.25em 0.5em;
  text-decoration: none;
}
.tabs ul.secondary li a.is-active {
  border-bottom: none;
  border-radius: 5px;
  background: #f2f2f2;
}

File

core/themes/bartik/css/components/tabs.css

View on git.drupalcode.org
View source 
  1. /* --------------- System Tabs  --------------- */

  2. 

  3. div.tabs {

  4.   margin-bottom: 20px;

  5.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  6. }

  7. .tabs ul.primary {

  8.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  9. }

  10. .tabs ul.primary li a {

  11.   display: block;

  12.   height: 1.8em;

  13.   padding: 0 10px 3px;

  14.   color: #000;

  15.   border-width: 1px;

  16.   border-style: solid solid none solid;

  17.   border-color: #bbb;

  18.   background-color: #ededed;

  19.   text-shadow: 0 1px 0 #fff;

  20.   font-size: 0.929em;

  21.   line-height: 1.9;

  22. }

  23. .tabs ul.primary li.is-active a {

  24.   border: 1px solid #bbb;

  25.   background-color: #fff;

  26. }

  27. 

  28. @media screen and (max-width: 37.5em) { /* 600px */

  29.   .tabs ul.primary {

  30.     border-bottom: 1px solid #bbb;

  31.   }

  32.   .tabs ul.primary li {

  33.     display: block;

  34.     margin: 0;

  35.   }

  36.   .tabs ul.primary li a {

  37.     padding: 5px 10px;

  38.   }

  39.   .tabs ul.primary li.is-active a {

  40.     border-bottom: none;

  41.   }

  42. }

  43. 

  44. @media screen and (min-width: 37.5em) { /* 600px */

  45.   .tabs ul.primary {

  46.     overflow: hidden;

  47.     height: auto;

  48.     margin: 0;

  49.     padding: 0 3px;

  50.     white-space: nowrap;

  51.     border: none;

  52.     border-collapse: collapse;

  53.     background: transparent url(../../images/tabs-border.png) repeat-x left bottom;

  54.     line-height: normal;

  55.   }

  56.   .tabs ul.primary li {

  57.     display: block;

  58.     float: left; /* LTR */

  59.     margin: 0 5px 0 0; /* LTR */

  60.     vertical-align: bottom;

  61.   }

  62.   [dir="rtl"] .tabs ul.primary li {

  63.     float: right;

  64.     margin: 0 0 0 5px;

  65.   }

  66.   .tabs ul.primary li a {

  67.     float: left; /* not LTR */

  68.     border-top-left-radius: 6px;

  69.     border-top-right-radius: 6px;

  70.   }

  71.   .tabs ul.primary li.is-active a {

  72.     border-bottom: 1px solid #fff;

  73.   }

  74. }

  75. .tabs ul.secondary {

  76.   overflow: hidden;

  77.   margin: 5px;

  78.   padding: 0.5em 0;

  79.   border-bottom: none;

  80. }

  81. .tabs ul.secondary li {

  82.   display: block;

  83.   float: left; /* LTR */

  84.   margin: 0;

  85.   padding: 0 1em;

  86.   border-right: 1px solid #ccc; /* LTR */

  87. }

  88. [dir="rtl"] .tabs ul.secondary li {

  89.   float: right;

  90.   border-right: none;

  91.   border-left: 1px solid #ccc;

  92. }

  93. .tabs ul.secondary li:last-child {

  94.   border-right: none; /* LTR */

  95. }

  96. [dir="rtl"] .tabs ul.secondary li:last-child {

  97.   border-left: none;

  98. }

  99. .tabs ul.secondary li:first-child {

  100.   padding-left: 0; /* LTR */

  101. }

  102. [dir="rtl"] .tabs ul.secondary li:first-child {

  103.   padding-right: 0;

  104. }

  105. .tabs ul.secondary li a {

  106.   display: inline;

  107.   padding: 0.25em 0.5em;

  108.   text-decoration: none;

  109. }

  110. .tabs ul.secondary li a.is-active {

  111.   border-bottom: none;

  112.   border-radius: 5px;

  113.   background: #f2f2f2;

  114. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.