[Summary view] [Print] [Text view]

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