Sircus

overflow

<div class="t-overflowScroll">...</div>
<div class="t-overflow">...</div>
<div class="t-overflowHidden">...</div>
<div class="t-overflowX">...</div>
<div class="t-overflowY">...</div>

Install

npm install sircus-tools-overflow sircus-variables

CSS import

@import "sircus-tools-overflow";
@import "sircus-tools-overflow/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-oveflow
 ================================================== */
.t-overflowScroll  { overflow: scroll !important; }
.t-overflow        { overflow: auto !important; }
.t-overflowHidden  { overflow: hidden !important; }
.t-overflowX {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.t-overflowY {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

Responsive CSS

@media (--viewport-sm) {
  .t-sm-overflowScroll  { overflow: scroll !important; }
  .t-sm-overflow        { overflow: auto !important; }
  .t-sm-overflowHidden  { overflow: hidden !important; }
  .t-sm-overflowX {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .t-sm-overflowY {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (--viewport-md) {
  .t-md-overflowScroll  { overflow: scroll !important; }
  .t-md-overflow        { overflow: auto !important; }
  .t-md-overflowHidden  { overflow: hidden !important; }
  .t-md-overflowX {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .t-md-overflowY {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (--viewport-lg) {
  .t-lg-overflowScroll  { overflow: scroll !important; }
  .t-lg-overflow        { overflow: auto !important; }
  .t-lg-overflowHidden  { overflow: hidden !important; }
  .t-lg-overflowX {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .t-lg-overflowY {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}