[Summary view] [Print] [Text view]

   1  joomla-tab {
   2    display: flex;
   3    flex-direction: column;
   4  }
   5  joomla-tab[orientation=horizontal]:not([view=accordion]) {
   6    margin-bottom: 0;
   7  }
   8  joomla-tab[orientation=horizontal]:not([view=accordion]) div[role=tablist] {
   9    width: 100%;
  10    margin-bottom: 0;
  11  }
  12  joomla-tab > div[role=tablist] {
  13    display: flex;
  14    flex-flow: wrap;
  15    padding: 0;
  16    white-space: nowrap;
  17    list-style: outside none none;
  18    border-bottom: 1px solid var(--template-bg-dark-10);
  19  }
  20  joomla-tab > div[role=tablist] button[role=tab] {
  21    position: relative;
  22    box-sizing: border-box;
  23    display: block;
  24    padding: 0.6rem 1rem;
  25    color: var(--primary);
  26    text-decoration: none;
  27    background-color: var(--white);
  28    border: 0;
  29    border-top: 0;
  30    border-right: 0;
  31    border-bottom: 0;
  32    box-shadow: none;
  33  }
  34  joomla-tab > div[role=tablist] button[role=tab]:focus-visible {
  35    z-index: 1;
  36  }
  37  joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true], joomla-tab > div[role=tablist] button[role=tab]:focus, joomla-tab > div[role=tablist] button[role=tab]:hover {
  38    border: 0;
  39    border-radius: 0;
  40    box-shadow: none;
  41  }
  42  joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true]::after, joomla-tab > div[role=tablist] button[role=tab]:focus::after, joomla-tab > div[role=tablist] button[role=tab]:hover::after {
  43    position: absolute;
  44    right: 0;
  45    bottom: 0;
  46    left: 0;
  47    height: 3px;
  48    content: "";
  49    background-color: var(--template-link-color);
  50    opacity: 0.8;
  51  }
  52  joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true] .text-muted, joomla-tab > div[role=tablist] button[role=tab]:focus .text-muted, joomla-tab > div[role=tablist] button[role=tab]:hover .text-muted {
  53    color: var(--template-text-light) !important;
  54  }
  55  joomla-tab > div[role=tablist] button[role=tab][aria-expanded=true] {
  56    font-weight: 700;
  57    background: var(--template-bg-dark-3);
  58  }
  59  joomla-tab > div[role=tablist] button[role=tab] .text-muted {
  60    color: var(--template-text-dark) !important;
  61  }
  62  joomla-tab > button[role=region] {
  63    width: 100%;
  64    padding: 0.7rem;
  65    color: var(--template-text-light);
  66    text-align: start;
  67    background-color: var(--template-link-color);
  68    border: 1px solid var(--template-text-light);
  69    border-top: 0;
  70  }
  71  joomla-tab > button[role=region][aria-expanded=true], joomla-tab > button[role=region]:hover, joomla-tab > button[role=region]:focus {
  72    color: var(--template-text-light);
  73    background-color: var(--template-bg-dark);
  74  }
  75  joomla-tab > button[role=region] .text-muted {
  76    color: var(--template-text-light) !important;
  77  }
  78  joomla-tab > joomla-tab-element {
  79    --gutter-x: 2rem;
  80    display: none;
  81    padding: 30px 2vw;
  82    background-color: #fff;
  83    border: 0;
  84    border-radius: 0.25rem;
  85    box-shadow: none;
  86  }
  87  joomla-tab > joomla-tab-element[active] {
  88    display: block;
  89  }
  90  joomla-tab[orientation=vertical] {
  91    flex-direction: row;
  92    align-items: flex-start;
  93    width: 100%;
  94  }
  95  joomla-tab[orientation=vertical] > div[role=tablist] {
  96    flex: 0 0 25%;
  97    flex-direction: column;
  98    width: 100%;
  99    min-width: 25%;
 100    max-width: 25%;
 101    height: auto;
 102    padding: 0;
 103    overflow: hidden;
 104    border: 1px solid #dee2e6;
 105    border-radius: 0;
 106    box-shadow: none;
 107  }
 108  @media (max-width: 991.98px) {
 109    joomla-tab[orientation=vertical] > div[role=tablist] {
 110      flex: 0 0 100%;
 111      max-width: 100%;
 112    }
 113  }
 114  joomla-tab[orientation=vertical] > div[role=tablist] button[role=tab] {
 115    text-align: start;
 116  }
 117  joomla-tab[orientation=vertical] > div[role=tablist] button[role=tab][aria-expanded=true] {
 118    color: var(--template-text-light);
 119    background-color: var(--template-bg-dark-60);
 120  }
 121  joomla-tab[orientation=vertical] button[role=tab]:last-of-type {
 122    border-bottom: 0;
 123  }
 124  joomla-tab[orientation=vertical] button[role=tab] {
 125    position: relative;
 126    display: block;
 127    padding: 0.75em 1em;
 128    margin: -1px 0;
 129    color: var(--template-special-color);
 130    text-decoration: none;
 131    border-top: 1px solid transparent;
 132    border-bottom: 1px solid #dee2e6;
 133    box-shadow: none;
 134  }
 135  joomla-tab[orientation=vertical] button[role=tab][aria-expanded=true], joomla-tab[orientation=vertical] button[role=tab]:focus, joomla-tab[orientation=vertical] button[role=tab]:hover {
 136    color: var(--template-text-light);
 137    background-color: var(--template-bg-dark-60);
 138    background-image: none;
 139    border-right: 0;
 140    box-shadow: none;
 141  }
 142  joomla-tab[orientation=vertical] button[role=tab][aria-expanded=true]::after, joomla-tab[orientation=vertical] button[role=tab]:focus::after, joomla-tab[orientation=vertical] button[role=tab]:hover::after {
 143    top: 0;
 144    bottom: 0;
 145    left: -1px;
 146    width: 5px;
 147    height: auto;
 148    background-color: var(--template-bg-dark);
 149  }
 150  joomla-tab[orientation=vertical] button[role=tab][aria-expanded=true] .text-muted, joomla-tab[orientation=vertical] button[role=tab]:focus .text-muted, joomla-tab[orientation=vertical] button[role=tab]:hover .text-muted {
 151    color: var(--template-text-light) !important;
 152  }
 153  joomla-tab[orientation=vertical] button[role=tab] .text-muted {
 154    color: var(--template-text-dark) !important;
 155  }
 156  joomla-tab[orientation=vertical] > joomla-tab-element {
 157    width: 100%;
 158    padding: 15px 0 15px 15px;
 159    border: 0 none;
 160    box-shadow: none;
 161  }
 162  joomla-tab[view=accordion] {
 163    flex-direction: column;
 164    white-space: normal;
 165    border-radius: 0;
 166    box-shadow: 0 1px #fff inset, 0 0 3px rgba(0, 0, 0, 0.04);
 167  }
 168  joomla-tab[view=accordion] joomla-tab-element {
 169    display: none;
 170    padding: 15px;
 171  }
 172  joomla-tab[view=accordion] joomla-tab-element[active] {
 173    display: block;
 174    width: 100%;
 175    max-width: 100%;
 176    border-bottom: 1px solid #dee2e6;
 177  }
 178  joomla-tab[view=accordion] [active],
 179  joomla-tab[view=accordion] [aria-expanded=true] {
 180    background-color: #fff;
 181  }
 182  joomla-tab[view=accordion] .col-md-6,
 183  joomla-tab[view=accordion] .col-md-9,
 184  joomla-tab[view=accordion] .col-md-3 {
 185    padding: 0.5rem 0 0 !important;
 186  }
 187  joomla-tab[view=accordion] joomla-tab[view=accordion] > div[role=tablist] {
 188    background-color: #fff;
 189  }
 190  joomla-tab[view=accordion] joomla-tab[view=accordion] button[role=tab] {
 191    position: relative;
 192    display: block;
 193    padding: 0.75em 1em;
 194    color: var(--template-text-light);
 195    text-align: start;
 196    text-decoration: none;
 197    border: 0;
 198    border-bottom: 1px solid #dee2e6;
 199    box-shadow: none;
 200  }
 201  joomla-tab[view=accordion] joomla-tab[view=accordion] button[role=tab][aria-expanded=true]::after, joomla-tab[view=accordion] joomla-tab[view=accordion] button[role=tab]:hover::after {
 202    position: absolute;
 203    top: auto;
 204    right: -1px;
 205    bottom: -1px;
 206    left: -1px;
 207    display: block;
 208    width: calc(100% + 2px);
 209    height: 5px;
 210    content: "";
 211    background-color: var(--template-bg-dark);
 212    opacity: 0.8;
 213  }
 214  joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] {
 215    padding: 0 !important;
 216  }
 217  @media (max-width: 991.98px) {
 218    joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] {
 219      /* stylelint-disable */
 220      /* stylelint-enable */
 221    }
 222    [dir=ltr] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable {
 223      text-align: right;
 224    }
 225    [dir=rtl] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable {
 226      text-align: left;
 227    }
 228    joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable thead, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable tbody, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable tr, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable th, joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td {
 229      display: block;
 230    }
 231    joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable thead {
 232      position: absolute;
 233      top: -1111px;
 234      left: -1111px;
 235    }
 236    joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td::before {
 237      font-weight: 700;
 238      content: attr(data-label) ":";
 239    }
 240    [dir=ltr] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td::before {
 241      float: left;
 242      padding: 0 2em 0 0;
 243    }
 244    [dir=rtl] joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td::before {
 245      float: right;
 246      padding: 0 0 0 2em;
 247    }
 248    joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td:nth-child(1) {
 249      font-weight: 700;
 250    }
 251    joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .respTable td:last-child {
 252      border-bottom: 1em var(--template-bg-dark-80) solid;
 253    }
 254    joomla-tab[view=accordion] #permissions-sliders > joomla-tab-element[active] .oddCol {
 255      background: var(--template-bg-light);
 256    }
 257  }
 258  .main-card-columns > * > joomla-tab {
 259    height: 100%;
 260    border-left: 1px solid var(--template-bg-dark-10);
 261  }