Utility

Hidden.e-hidden 

.e-hidden {
  display: none !important;
}

Clickable.e-clickable 

.e-clickable {
  cursor: pointer !important;
}

Box padding.e-boxpadding 

.e-boxpadding {
  padding: 15px;
}

IFrame container.e-iframecontainer 

.e-iframecontainer {
  font-size: 0;
}

Text align left.text-align-left 

.text-align-left {
  text-align: left;
}

Text align center.text-align-center 

.text-align-center {
  text-align: center;
}

Text align right.text-align-right 

.text-align-right {
  text-align: right;
}

Text underline.text-underline 

.text-underline {
  text-decoration: underline !important;
}

Clearfix.clearfix 

.clearfix {
  &:before,
  &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}

Float left.float-left 

.float-left {
  float: left;
}

Float right.float-right 

.float-right {
  float: right;
}

Font weight thin.font-weight-thin 

.font-weight-thin {
  font-weight: 300;
}

Font weight normal.font-weight-normal 

.font-weight-normal {
  font-weight: 400;
}

Font weight bold.font-weight-bold 

.font-weight-bold {
  font-weight: 500;
}

Button height.button-height 

.button-height {
  line-height: 33px !important;
}

Word wrap.word-wrap 

.word-wrap {
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
}

Zebra stripe
.e-zebrastripe

Odd
Even
Odd
Even
Odd
Even
<div class="e-zebrastripe">
  <div>
    Odd
  </div>
  <div>
    Even
  </div>
  <div>
    Odd
  </div>
  <div>
    Even
  </div>
  <div>
    Odd
  </div>
  <div>
    Even
  </div>
</div>


                        <div class="e-zebrastripe">
                          <div>Odd</div>
                          <div>Even</div>
                          <div>Odd</div>
                          <div>Even</div>
                          <div>Odd</div>
                          <div>Even</div>
                        </div>

Test utility

No transition.e-test-notransition 

.e-test-notransition * {
  transition: none !important;
}

No opacity.e-test-noopacity 

.e-test-noopacity * {
  opacity: 1 !important;
}

Complex utility classes

Grid col
.e-gridcol 

<div class="e-gridcol e-gridcol-first float-left">
  <input class="e-input e-input-large">
</div>
<div class="e-gridcol float-left">
  <input class="e-input e-input-large">
</div>
<div class="e-gridcol e-gridcol-last float-left">
  <input class="e-input e-input-large">
</div>


                        <div class="e-gridcol e-gridcol-first float-left">
                          <input class="e-input e-input-large">
                        </div>
                        <div class="e-gridcol float-left">
                          <input class="e-input e-input-large">
                        </div>
                        <div class="e-gridcol e-gridcol-last float-left">
                          <input class="e-input e-input-large">
                        </div>

Grid col
.e-gridcol.e-gridcol-condensed 

<div class="e-gridcol e-gridcol-first float-left e-gridcol-condensed">
  <input class="e-input e-input-large">
</div>
<div class="e-gridcol float-left e-gridcol-condensed">
  <input class="e-input e-input-large">
</div>
<div class="e-gridcol e-gridcol-last float-left e-gridcol-condensed">
  <input class="e-input e-input-large">
</div>


                        <div class="e-gridcol e-gridcol-first float-left e-gridcol-condensed">
                          <input class="e-input e-input-large">
                        </div>
                        <div class="e-gridcol float-left e-gridcol-condensed">
                          <input class="e-input e-input-large">
                        </div>
                        <div class="e-gridcol e-gridcol-last float-left e-gridcol-condensed">
                          <input class="e-input e-input-large">
                        </div>

Grid col
.e-gridcol.e-gridcol-separated 

<div class="e-gridcol e-gridcol-first float-left e-gridcol-separated">
  <input class="e-input e-input-large">
</div>
<div class="e-gridcol float-left e-gridcol-separated">
  <input class="e-input e-input-large">
</div>
<div class="e-gridcol e-gridcol-last float-left e-gridcol-separated">
  <input class="e-input e-input-large">
</div>


                        <div class="e-gridcol e-gridcol-first float-left e-gridcol-separated">
                          <input class="e-input e-input-large">
                        </div>
                        <div class="e-gridcol float-left e-gridcol-separated">
                          <input class="e-input e-input-large">
                        </div>
                        <div class="e-gridcol e-gridcol-last float-left e-gridcol-separated">
                          <input class="e-input e-input-large">
                        </div>

Scrollable content
.e-scrollable

Qui eiusmod id ut esse ullamco magna laborum cillum, nulla amet veniam consequat exercitation. Esse voluptate, veniam deserunt voluptate, in anim aliqua, ut reprehenderit? Anim velit magna ut voluptate irure exercitation quis, velit est laborum ex elit non. Aliquip sint lorem sunt, id dolore in ex adipiscing?

Ullamco est excepteur, anim consectetur labore, minim? Ullamco, mollit incididunt aute reprehenderit officia irure mollit voluptate. Reprehenderit excepteur amet dolor ut dolor veniam minim eu nostrud deserunt. Amet eu officia nisi, incididunt culpa, proident qui, magna non sint minim? Id sit est excepteur lorem, qui, eiusmod elit adipiscing excepteur. Nisi, velit est, ut, in. Pariatur magna duis, eiusmod dolor laborum sint anim, irure aliquip duis.

Est nostrud, fugiat officia ut nisi sunt aliquip nostrud? Nostrud proident, est labore aliqua velit. Fugiat, duis ipsum quis commodo ad culpa aute dolore non, mollit labore. Occaecat esse est do tempor.

Laborum irure, deserunt laborum, incididunt sit, veniam aliqua. Elit ea laborum reprehenderit pariatur aute ut anim dolor. Ea voluptate enim exercitation, ad eu commodo, duis elit. Labore, ipsum, proident dolor consequat aliqua amet.

Nisi, commodo, sed aute voluptate in ullamco, elit. Fugiat ut in dolore voluptate, labore magna sed. Reprehenderit ut amet veniam ipsum laboris consectetur proident culpa non pariatur duis ut.

Aliquip amet anim nisi voluptate laboris ex adipiscing ad consequat, ad, qui anim deserunt sit. Dolore sit, ea laboris sint. Occaecat exercitation aute et consectetur ad enim laborum velit sint cupidatat voluptate? Duis fugiat exercitation, dolore culpa et.

Ea, ipsum exercitation sed magna officia laborum, nostrud. Sunt sit minim tempor nostrud eiusmod deserunt exercitation irure dolore lorem ut. Do commodo qui in ea nostrud exercitation. Aliquip dolor do tempor dolore ut, tempor non duis sunt cillum mollit labore. Eu sit, sit proident labore, exercitation non ullamco veniam qui, ut.

Est, voluptate pariatur ut sint est cupidatat dolore ullamco sit minim. Dolore duis magna mollit velit officia, ea ad excepteur deserunt deserunt, eu, laborum quis. Veniam mollit do do lorem, qui do amet cupidatat. Dolore, quis sunt laborum lorem exercitation commodo?

Magna deserunt, laboris qui excepteur consectetur voluptate est nisi, veniam. Ipsum excepteur ullamco, nulla dolor ut cillum est sunt incididunt.

Esse, nulla, mollit fugiat tempor, ea. Ex nostrud pariatur do consectetur eiusmod, deserunt, nulla consectetur dolor lorem, magna veniam. Sit labore ad cillum, enim, sunt in consectetur, in cupidatat. Non dolor, fugiat aute eu id proident sunt est ullamco? 

<div style="height:200px;width:500px;border:1px solid grey;">
  <div class="e-scrollable">
    <div class="e-scrollable__content">
      <p>
        Nisi do consectetur, consectetur. Fugiat ut, et enim, est sint nulla magna consequat nulla. Fugiat, voluptate ad qui officia. Pariatur excepteur nulla et nulla, cupidatat laborum ullamco veniam consequat, adipiscing do. 
      </p>
      <p>
        Incididunt ut, nulla ut exercitation ullamco in? Anim in amet amet. 
      </p>
      <p>
        Nisi duis aliqua occaecat sed, amet labore cupidatat magna, mollit aliquip in laborum enim. Consectetur, nulla elit sed, ad et, duis, ex consectetur. Laborum ad consequat proident veniam minim eu in ea. Lorem officia ut consequat reprehenderit ut qui ipsum. 
      </p>
      <p>
        Ut, ipsum reprehenderit dolore sunt, sed labore quis incididunt eu elit laboris. Eu esse, aute minim aliqua id dolore irure eu. Cupidatat minim amet ad non non exercitation anim commodo nulla. Id occaecat, est, ut aute, sunt cillum ullamco id, lorem. Ut fugiat dolor nisi officia, quis eu eiusmod, minim ullamco tempor, non veniam. 
      </p>
      <p>
        Pariatur fugiat, deserunt labore qui ea, eu magna ut laborum. Eu, ullamco eiusmod consectetur proident velit magna commodo, non proident ad. Esse in cupidatat exercitation nisi ut occaecat quis dolor ut, in ut. In velit adipiscing sunt esse nostrud. Tempor incididunt eiusmod dolor ullamco, qui est tempor. Velit anim aliquip irure, id adipiscing dolore officia nostrud, velit, sint in, elit ex. 
      </p>
      <p>
        Incididunt sint ut eiusmod, sed, occaecat culpa ut qui tempor. Cillum aliquip adipiscing voluptate laboris enim labore, officia ea non sit. In, cupidatat, reprehenderit laborum aliquip ea do, quis, fugiat, occaecat. Nulla irure ea mollit, magna, esse pariatur, laborum, ad ipsum. Amet occaecat aute exercitation culpa lorem, lorem in magna? Ullamco tempor est laborum, veniam in ipsum in. 
      </p>
      <p>
        Reprehenderit est non labore ut, mollit amet, fugiat sed aliquip aliquip sint, excepteur. In voluptate qui amet dolore mollit, minim. Ullamco fugiat cupidatat veniam in cillum ea, ut cillum ut dolore exercitation exercitation elit. In sint minim commodo, ad ut culpa duis ullamco. Consequat sint deserunt lorem non dolor velit ex exercitation? Sit non est, labore, ut commodo quis? 
      </p>
      <p>
        Enim nostrud ea, mollit nostrud, magna aliqua sunt et anim ut cupidatat magna adipiscing, lorem sit. Sint duis velit reprehenderit aliqua, quis dolore in adipiscing proident, enim, dolor in. Ea occaecat velit proident adipiscing laboris ea ea sunt ad labore dolore sunt. Fugiat do tempor, reprehenderit magna ex mollit. Irure nulla, elit sit quis esse, laborum enim laborum eiusmod dolor aliquip et est? Ea lorem sit non ut, commodo, officia dolore amet laboris. 
      </p>
      <p>
        Culpa cupidatat, sit dolor consequat pariatur dolor elit, proident, aliqua officia. Dolore reprehenderit tempor est, esse nisi duis tempor commodo incididunt. Nisi ea esse consectetur sit, nisi duis? Ut dolore laboris officia in reprehenderit tempor ullamco. 
      </p>
      <p>
        Cillum, velit reprehenderit nulla nisi, irure deserunt, aute duis elit consequat cupidatat, do. Occaecat eu mollit duis minim commodo pariatur labore do. Minim irure, in, ullamco officia in, adipiscing veniam pariatur consectetur? Dolor ex ullamco in do, laboris. Elit, culpa nulla fugiat reprehenderit sunt dolor eiusmod cupidatat sit laborum esse commodo aliquip minim ut. Consequat ipsum anim aute incididunt et. 
      </p>
    </div>
  </div>
</div>


                        <div style="height:200px;width:500px;border:1px solid grey;">
                          <div class="e-scrollable">
                            <div class="e-scrollable__content">
                              <p>Ex anim consectetur fugiat labore exercitation, dolore. Exercitation in officia laboris amet fugiat culpa aute in, ea. Ut, et mollit mollit non ad aute. Eiusmod, magna est duis ea, officia commodo sit excepteur, nostrud, ex. 
                              </p>
                              <p>Consequat irure minim, nisi aliqua, est occaecat quis est. Ullamco ullamco occaecat laboris irure occaecat aliquip. In, pariatur ea culpa eiusmod ad reprehenderit eiusmod, aliqua ea. Ut excepteur excepteur sint reprehenderit adipiscing incididunt dolore sint est? 
                              </p>
                              <p>Ipsum amet labore laboris aute elit in, fugiat. Cillum dolor nulla dolore sint ad, duis, laborum? Sed tempor nisi velit velit nulla dolor laboris aute nisi incididunt excepteur. Excepteur, elit laborum aliqua qui minim nisi fugiat consectetur. Amet dolor consectetur culpa, laborum eiusmod laborum id eu. In dolor, dolore, in excepteur, eiusmod incididunt quis sint. 
                              </p>
                              <p>Fugiat, dolor amet occaecat aliquip laborum, fugiat dolore, aliquip laboris in? Reprehenderit eiusmod? Culpa, aliquip nostrud consequat id nisi incididunt dolore ullamco dolore sed, ut labore. Sunt incididunt consequat qui elit, ullamco laborum ut commodo occaecat. Eiusmod dolore laboris, incididunt nostrud sunt aute exercitation in magna. 
                              </p>
                              <p>Minim est ex aliquip reprehenderit nulla officia qui, esse consequat do irure, ea. Ut tempor consequat deserunt eiusmod officia commodo voluptate, cupidatat, eu? Dolor pariatur anim laboris anim, laborum, sed fugiat. Excepteur pariatur, tempor labore excepteur commodo amet ex quis ex irure irure in non. Cillum ea, excepteur sed quis, id consequat officia. Ipsum qui ex do nostrud est proident, id enim. 
                              </p>
                              <p>Id non veniam pariatur ex sunt aute adipiscing aute proident mollit? Dolor, elit aliqua reprehenderit, qui enim est, qui, deserunt, consequat proident, esse. Et do esse cillum. Ea sunt, velit nulla labore, ullamco enim et incididunt. Sed et ipsum cupidatat aute magna cupidatat aute duis? Culpa cillum eu eu exercitation elit culpa. Et non, sunt nulla quis velit ex. 
                              </p>
                              <p>Adipiscing excepteur fugiat duis velit, aute, commodo voluptate in officia eu? Esse, deserunt tempor eu, in pariatur laborum reprehenderit qui mollit, laborum, anim, consequat. 
                              </p>
                              <p>Elit adipiscing veniam ut, commodo, irure, officia ut nostrud minim. Sint dolor occaecat, amet aliquip. Mollit dolore et quis ullamco, in mollit voluptate, officia, dolore. Fugiat ad in anim est, eu, quis, reprehenderit, sit. Consectetur dolor in quis proident in. Mollit aute aliqua ipsum, labore. Exercitation, nisi anim magna est, ut est non. 
                              </p>
                              <p>Magna, velit anim officia qui consequat consectetur quis nisi deserunt. Tempor dolore duis consectetur nostrud, esse aliqua deserunt incididunt. Nisi aute cupidatat, pariatur sed dolore. Do pariatur eiusmod, sit dolor nisi, nostrud laborum excepteur aliqua. Laborum labore commodo, proident veniam, et veniam quis, id lorem. Cupidatat, ut, eiusmod, eiusmod do exercitation commodo deserunt. 
                              </p>
                              <p>Culpa, cupidatat culpa, ea incididunt fugiat aute ex, tempor labore? In minim pariatur anim, ex, velit, ut aliquip, exercitation dolore ipsum, deserunt, incididunt. Ex ut id amet adipiscing lorem mollit laboris cupidatat? 
                              </p>
                            </div>
                          </div>
                        </div>

Stretched table
.e-stretch

Consequat ut pariatur Laboris dolore ad Pariatur esse labore
Et officia minim Eiusmod et ad Fugiat velit do 
<div class="e-box">
  <div class="e-stretch">
    <table class="e-table">
      <tr>
        <td>
          Consequat nisi enim 
        </td>
        <td>
          Sit culpa veniam 
        </td>
        <td>
          Elit sed nulla 
        </td>
      </tr>
      <tr>
        <td>
          Tempor ullamco ut 
        </td>
        <td>
          Dolor aliquip officia 
        </td>
        <td>
          Lorem reprehenderit in 
        </td>
      </tr>
    </table>
  </div>
</div>


                        <div class="e-box">
                          <div class="e-stretch">
                            <table class="e-table">
                              <tr>
                                <td>Nisi aliquip sunt 
                                </td>
                                <td>Dolor voluptate eu 
                                </td>
                                <td>Dolore laborum mollit 
                                </td>
                              </tr>
                              <tr>
                                <td>Consectetur nisi ullamco 
                                </td>
                                <td>Est consectetur nostrud 
                                </td>
                                <td>Officia sunt fugiat 
                                </td>
                              </tr>
                            </table>
                          </div>
                        </div>

Stretched table, stretch to top
.e-stretch-top

Laborum nostrud fugiat Aliqua laboris sunt Aliquip pariatur dolore
Consequat dolore amet Fugiat eiusmod officia Adipiscing eiusmod officia 
<div class="e-box">
  <div class="e-stretch e-stretch-top">
    <table class="e-table">
      <tr>
        <td>
          Sed ea nostrud 
        </td>
        <td>
          Ullamco veniam sunt 
        </td>
        <td>
          Sint occaecat consectetur 
        </td>
      </tr>
      <tr>
        <td>
          In et lorem 
        </td>
        <td>
          Ad in sit 
        </td>
        <td>
          Nulla ex veniam 
        </td>
      </tr>
    </table>
  </div>
</div>


                        <div class="e-box">
                          <div class="e-stretch e-stretch-top">
                            <table class="e-table">
                              <tr>
                                <td>Commodo lorem dolore 
                                </td>
                                <td>Labore nisi nisi 
                                </td>
                                <td>Sunt ea aliqua 
                                </td>
                              </tr>
                              <tr>
                                <td>Reprehenderit ex magna 
                                </td>
                                <td>Ut id cupidatat 
                                </td>
                                <td>Ipsum laboris in 
                                </td>
                              </tr>
                            </table>
                          </div>
                        </div>

Stretched table, stretch to bottom
.e-stretch-bottom

Nostrud ut esse Exercitation nostrud in Cupidatat elit tempor
Qui ut ut Aliquip labore elit Nisi dolore ea 
<div class="e-box">
  <div class="e-stretch e-stretch-bottom">
    <table class="e-table">
      <tr>
        <td>
          Qui excepteur labore 
        </td>
        <td>
          Dolor ipsum officia 
        </td>
        <td>
          Esse est et 
        </td>
      </tr>
      <tr>
        <td>
          Sed labore ex 
        </td>
        <td>
          Nulla cillum dolor 
        </td>
        <td>
          Elit eu cillum 
        </td>
      </tr>
    </table>
  </div>
</div>


                        <div class="e-box">
                          <div class="e-stretch e-stretch-bottom">
                            <table class="e-table">
                              <tr>
                                <td>Reprehenderit in elit 
                                </td>
                                <td>Consectetur cillum dolor 
                                </td>
                                <td>Amet eiusmod ipsum 
                                </td>
                              </tr>
                              <tr>
                                <td>Sed sed duis 
                                </td>
                                <td>Velit eu aliqua 
                                </td>
                                <td>Mollit occaecat do 
                                </td>
                              </tr>
                            </table>
                          </div>
                        </div>

Color, text utility classes

Text colors.text-color-*

Aa.text-color-primary
Aa.text-color-secondary
Aa.text-color-success
Aa.text-color-danger
Aa.text-color-dark
Aa.text-color-info
Aa.text-color-warning
Aa.text-color-alert
Aa.text-color-shade
Aa.text-color-disabled
Aa.text-color-title
Aa.text-color-inherit

Reporting text colors.text-color-*

Aa.text-color-opened
Aa.text-color-mobile_opened
Aa.text-color-desktop_opened
Aa.text-color-sent
Aa.text-color-clicked
Aa.text-color-mobile_clicked
Aa.text-color-desktop_clicked
Aa.text-color-mobile_click_through
Aa.text-color-delivered
Aa.text-color-bounced
Aa.text-color-purchased
Aa.text-color-unsubscribed
Aa.text-color-complained
Aa.text-color-optin_users

Social ads text colors.text-color-*

Aa.text-color-impressions
Aa.text-color-socialreach
Aa.text-color-reach
Aa.text-color-likes
Aa.text-color-clicks
Aa.text-color-pageclick
Aa.text-color-cpc
Aa.text-color-frequency
Aa.text-color-comments
Aa.text-color-conversions
Aa.text-color-spent
Aa.text-color-revenue
Aa.text-color-cpm
Aa.text-color-costperconversion

Font weights.font-weight-*

Aa.font-weight-thin
Aa.font-weight-normal
Aa.font-weight-bold

Text sizes.text-size-*

Et in magna aliquip id cupidatat incididunt in aliquip commodo .text-size-headline
Ipsum cillum ut nisi eu ut ut dolore sunt eu .text-size-title
Eu aute exercitation consectetur in pariatur tempor adipiscing enim in .text-size-subheader
Velit in magna consequat qui minim ullamco dolor culpa nulla .text-size-button
Et ullamco magna veniam consequat nisi elit non ut cillum .text-size-body
Aute aliqua nisi anim ea irure labore anim id sed .text-size-small

Text overflow
.text-overflow

Duis sit sint duis adipiscing occaecat ut quis dolor laborum deserunt et commodo velit adipiscing dolor qui exercitation proident labore nisi amet laborum ullamco pariatur tempor quis et proident ullamco dolor proident est qui id velit quis fugiat occaecat qui 
<div class="text-overflow">
  Excepteur anim excepteur ullamco sint pariatur exercitation culpa eu minim velit in minim dolore ipsum eiusmod eu lorem occaecat commodo irure aliquip et eiusmod sunt incididunt enim cupidatat voluptate cupidatat consectetur velit eu nostrud aute laboris proident anim incididunt cupidatat 
</div>


                        <div class="text-overflow">In duis ut in exercitation pariatur commodo dolor non aliqua deserunt labore irure incididunt dolore in veniam reprehenderit excepteur esse ut mollit incididunt occaecat et occaecat velit excepteur veniam id tempor proident in cillum sunt sunt eu nostrud duis ut 
                        </div>

Background colors.background-color-*

Aa.background-color-primary
Aa.background-color-secondary
Aa.background-color-success
Aa.background-color-danger
Aa.background-color-dark
Aa.background-color-info
Aa.background-color-warning
Aa.background-color-alert
Aa.background-color-full
Aa.background-color-text
Aa.background-color-shade
Aa.background-color-separator
Aa.background-color-inactive
Aa.background-color-placeholder
Aa.background-color-zebra
Aa.background-color-body
Aa.background-color-empty

Reporting background colors.background-color-*

Aa.background-color-opened
Aa.background-color-mobile_opened
Aa.background-color-desktop_opened
Aa.background-color-sent
Aa.background-color-clicked
Aa.background-color-mobile_clicked
Aa.background-color-desktop_clicked
Aa.background-color-mobile_click_through
Aa.background-color-delivered
Aa.background-color-bounced
Aa.background-color-purchased
Aa.background-color-unsubscribed
Aa.background-color-complained
Aa.background-color-optin_users

Social ads background colors.background-color-*

Aa.background-color-impressions
Aa.background-color-socialreach
Aa.background-color-reach
Aa.background-color-likes
Aa.background-color-clicks
Aa.background-color-pageclick
Aa.background-color-cpc
Aa.background-color-frequency
Aa.background-color-comments
Aa.background-color-conversions
Aa.background-color-spent
Aa.background-color-revenue
Aa.background-color-cpm
Aa.background-color-costperconversion

Last update

Message feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history