[Summary view] [Print] [Text view]

   1  // Modifiers
   2  
   3  // error page
   4  
   5  .error_site {
   6    .page-header {
   7      margin-top: $cassiopeia-grid-gutter;
   8    }
   9  }
  10  
  11  // com_modules
  12  [class^="container-"],
  13  [class*=" container-"] {
  14    .span-col-2 {
  15      flex: 0 0 50%;
  16      max-width: calc(50% - #{$cassiopeia-grid-gutter});
  17    }
  18  
  19    .span-col-3 {
  20      flex: 0 0 33.333%;
  21      max-width: calc(33.333% - #{$cassiopeia-grid-gutter});
  22    }
  23  
  24    .span-col-4 {
  25      flex: 0 0 25%;
  26      max-width: calc(25% - #{$cassiopeia-grid-gutter});
  27    }
  28  }
  29  
  30  @supports (display: grid) {
  31  
  32    [class^="span-"],
  33    [class*=" span-"] {
  34      grid-column-end: auto;
  35      grid-row-end: auto;
  36    }
  37  
  38    [class^="span-col"],
  39    [class*=" span-col"] {
  40      @include media-breakpoint-up(md) {
  41        grid-column-end: span 2;
  42      }
  43    }
  44  
  45    @include media-breakpoint-up(lg) {
  46      .span-col-2 {
  47        grid-column-end: span 2;
  48      }
  49  
  50      .span-col-3 {
  51        grid-column-end: span 3;
  52      }
  53  
  54      .span-col-4 {
  55        grid-column-end: span 4;
  56      }
  57  
  58      .span-row-2 {
  59        grid-row-end: span 2;
  60      }
  61  
  62      .span-row-3 {
  63        grid-row-end: span 3;
  64      }
  65  
  66      .span-row-4 {
  67        grid-row-end: span 4;
  68      }
  69    }
  70  
  71    [class^="container-"],
  72    [class*=" container-"] {
  73  
  74      [class^="span-"],
  75      [class*=" span-"] {
  76        flex: 0 1 auto;
  77        max-width: none;
  78      }
  79    }
  80  }
  81  
  82  // com_content
  83  .blog-items {
  84    display: flex;
  85    flex-wrap: wrap;
  86    width: 100%;
  87    padding: 0;
  88    margin-right: -($cassiopeia-grid-gutter * .5);
  89    margin-bottom: $cassiopeia-grid-gutter;
  90    margin-left: -($cassiopeia-grid-gutter * .5);
  91  
  92    @include media-breakpoint-up(lg) {
  93      &.columns-2 {
  94        > div {
  95          width: 50%;
  96        }
  97      }
  98  
  99      &.columns-3 {
 100        > div {
 101          width: 33.33333%;
 102        }
 103      }
 104  
 105      &.columns-4 {
 106        > div {
 107          width: 25%;
 108        }
 109      }
 110    }
 111  }
 112  
 113  .blog-item {
 114    display: flex;
 115    flex-direction: column;
 116    padding: 0 ($cassiopeia-grid-gutter * .5) $cassiopeia-grid-gutter;
 117    overflow: hidden;
 118  
 119    .boxed & {
 120      background-color: $white;
 121      box-shadow: 0 0 2px hsla(216, 13%, 23%, .1), 0 2px 5px hsla(216, 13%, 23%, .08), 0 5px 15px hsla(216, 13%, 23%, .08), inset 0 3px 0 var(--cassiopeia-color-primary);
 122  
 123      .item-content {
 124        padding: 25px;
 125      }
 126    }
 127  
 128    .item-image {
 129      margin-top: 3px;
 130      margin-bottom: 15px;
 131      overflow: hidden;
 132  
 133      .boxed & {
 134        margin-bottom: 0;
 135      }
 136  
 137      @include media-breakpoint-up(lg) {
 138        .image-right & {
 139          order: 1;
 140        }
 141      }
 142  
 143      .image-bottom & {
 144        margin-top: -15px;
 145        order: 1;
 146      }
 147    }
 148  
 149    .item-content {
 150      .image-left & {
 151        padding-left: 25px;
 152      }
 153  
 154      .image-right & {
 155        padding-right: 25px;
 156      }
 157    }
 158  
 159    .image-left &,
 160    .image-right & {
 161      flex-direction: column;
 162  
 163      @include media-breakpoint-up(lg) {
 164        flex-direction: row;
 165        .item-image {
 166          flex: 1 0 40%;
 167        }
 168        .item-content {
 169          flex: 1 0 60%;
 170        }
 171      }
 172    }
 173  }
 174  
 175  .article-info {
 176    dd {
 177      padding: 0;
 178    }
 179  }
 180  
 181  @supports (display: grid) {
 182    .blog-items {
 183      display: grid;
 184      margin: 0 0 $cassiopeia-grid-gutter;
 185      grid-auto-flow: row;
 186      grid-template-columns: 1fr;
 187      grid-gap: $cassiopeia-grid-gutter;
 188  
 189      .blog-item {
 190        padding: 0;
 191      }
 192  
 193      &[class^="columns-"],
 194      &[class*=" columns-"] {
 195        > div {
 196          flex: 0 1 auto;
 197          width: auto;
 198          max-width: none;
 199        }
 200      }
 201  
 202      @include media-breakpoint-up(lg) {
 203        &.columns-2 {
 204          grid-template-columns: 1fr 1fr;
 205        }
 206  
 207        &.columns-3 {
 208          grid-template-columns: 1fr 1fr 1fr;
 209        }
 210  
 211        &.columns-4 {
 212          grid-template-columns: 1fr 1fr 1fr 1fr;
 213        }
 214      }
 215    }
 216  }
 217  
 218  .blog-items {
 219  
 220    &[class^="masonry-"],
 221    &[class*=" masonry-"] {
 222      display: block;
 223      column-gap: $cassiopeia-grid-gutter;
 224  
 225      .blog-item {
 226        display: inline-flex;
 227        margin-bottom: $cassiopeia-grid-gutter;
 228        page-break-inside: avoid;
 229        break-inside: avoid;
 230      }
 231    }
 232  
 233    @include media-breakpoint-up(lg) {
 234      &.masonry-2 {
 235        column-count: 2;
 236      }
 237  
 238      &.masonry-3 {
 239        column-count: 3;
 240      }
 241  
 242      &.masonry-4 {
 243        column-count: 4;
 244      }
 245    }
 246  }
 247  
 248  .image-alternate {
 249    .blog-item:nth-of-type(2n+1) {
 250      .item-image {
 251        order: 0;
 252      }
 253    }
 254  
 255    &.image-left {
 256      .blog-item:nth-of-type(2n+1) {
 257        .item-image {
 258          margin-right: 0;
 259          margin-left: 25px;
 260          order: 1;
 261        }
 262      }
 263    }
 264  
 265    &.image-top {
 266      .blog-item:nth-of-type(2n+1) {
 267        .item-image {
 268          order: 1;
 269        }
 270      }
 271    }
 272  }
 273  
 274  // Modules
 275  
 276  .breadcrumb {
 277    margin-bottom: 0;
 278    background-color: hsla(0, 0%, 0%, .03);
 279  }
 280  
 281  .no-card {
 282    .newsflash-horiz {
 283      li {
 284        padding: 0 1rem 1rem;
 285        border: 1px solid $gray-300;
 286        border-top-left-radius: 0;
 287        border-top-right-radius: 0;
 288        @include border-bottom-start-radius($border-radius);
 289        @include border-bottom-end-radius($border-radius);
 290        box-shadow: $cassiopeia-box-shadow;
 291  
 292        figure {
 293          margin: 0 -1rem 1rem;
 294        }
 295      }
 296    }
 297  }
 298  
 299  .mod-list {
 300    padding-inline-start: 0;
 301    list-style: none;
 302  
 303    li {
 304      padding: .25em 0;
 305  
 306      a {
 307        text-decoration: none;
 308  
 309        &:hover {
 310          text-decoration: underline;
 311  
 312          @at-root .container-header & {
 313            text-decoration: none;
 314          }
 315        }
 316      }
 317  
 318      &.active > a {
 319        text-decoration: underline;
 320  
 321        @at-root .container-header & {
 322          text-decoration: none;
 323        }
 324      }
 325  
 326      .mod-menu__sub {
 327        padding-left: $cassiopeia-grid-gutter;
 328      }
 329    }
 330  }