CSS Utility Classes
.e-margin-[size], .e-margin-[top|right|bottom|left|vertical|horizontal]-[size]
<e-notification color="blue-500">
<e-notification-content>
Size can be <strong>[none, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl]</strong>
</e-notification-content>
</e-notification>
<div class="text-align-center" style="width: 100px">
<div class="e-margin-s">
This should have 's' size margin
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-margin-top-s">
This should have 's' size margin on top
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-margin-right-s">
This should have 's' size margin on right
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-margin-bottom-s">
This should have 's' size margin on bottom
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-margin-left-s">
This should have 's' size margin on left
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-margin-vertical-s">
This should have 's' size margin on top and bottom
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-margin-horizontal-s">
This should have 's' size margin on right and left
</div>
</div>.e-padding-[size], .e-padding-[top|right|bottom|left|vertical|horizontal]-[size]
<e-notification color="blue-500">
<e-notification-content>
Size can be <strong>[none, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl]</strong>
</e-notification-content>
</e-notification>
<div class="text-align-center" style="width: 100px">
<div class="e-padding-s">
This should have 's' size padding
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-padding-top-s">
This should have 's' size padding on top
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-padding-right-s">
This should have 's' size padding on right
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-padding-bottom-s">
This should have 's' size padding on bottom
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-padding-left-s">
This should have 's' size padding on left
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-padding-vertical-s">
This should have 's' size padding on top and bottom
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-padding-horizontal-s">
This should have 's' size padding on right and left
</div>
</div><div class="text-align-center" style="width: 100px">
<div class="e-border-all">
This should have borders
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-none">
This should not have borders
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-top">
This should have a top border
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-bottom">
This should have a bottom border
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-left">
This should have a left border
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-right">
This should have a right border
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-radius e-border-all">
This should have rounded corners
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-radius-top e-border-all">
This should have rounded corners on top
</div>
</div>
<br>
<div class="text-align-center" style="width: 100px">
<div class="e-border-radius-top-right e-border-all">
This should have rounded corners on top right corner
</div>
</div>.e-vertical-[top|middle|bottom]
<table class="e-border-all" style="width: 500px; height: 100px;">
<tr>
<td class="e-vertical-top">
Vertical align top
</td>
<td class="e-vertical-middle">
Vertical align middle
</td>
<td class="e-vertical-bottom">
Vertical align bottom
</td>
</tr>
</table>.e-clickable
<pre>
.e-clickable {
cursor: pointer !important;
}
<pre>.e-grabbable
<pre>
.e-grabbable {
cursor: move !important;
cursor: grab !important;
&:active {
cursor: grabbing !important;
}
}
<pre>.e-hoverable .e-hoverable__display
<table class="e-table">
<tr class="e-hoverable">
<td>
Voluptate dolore in
</td>
<td class="e-table__col e-table__col e-table__col-actions">
<e-icon class="e-hoverable__display" icon="pencil" type="table"></e-icon>
<e-icon class="e-hoverable__display" icon="trash-o" type="table"></e-icon>
</td>
</tr>
<tr class="e-hoverable">
<td>
In in velit
</td>
<td class="e-table__col e-table__col e-table__col-actions">
<e-icon class="e-hoverable__display" icon="pencil" type="table"></e-icon>
<e-icon class="e-hoverable__display" icon="trash-o" type="table"></e-icon>
</td>
</tr>
</table>.e-boxpadding
<pre>
.e-boxpadding {
padding: 15px;
}
<pre>.e-iframecontainer
<pre>
.e-iframecontainer {
font-size: 0;
}
<pre>.clearfix
<pre>
.clearfix {
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
<pre>.float-[left|right]
<pre>
.float-left {
float: left;
}
<br>
<pre>
.float-right {
float: right;
}
<pre>.button-height
<pre>
.button-height {
line-height: 33px !important;
}
<pre>.word-wrap
<pre>
.word-wrap {
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
<pre>.text-overflow
<pre>
.text-overflow {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: text-bottom;
white-space: nowrap;
width: auto;
}
<pre>.e-zebrastripe
<div class="e-zebrastripe">
<div>
Odd
</div>
<div>
Even
</div>
<div>
Odd
</div>
<div>
Even
</div>
<div>
Odd
</div>
<div>
Even
</div>
</div>.e-test-notransition
```
.e-test-notransition * {
transition: none !important;
}
```.e-test-noopacity
<pre>
.e-test-noopacity * {
opacity: 1 !important;
}
</pre>.e-gridcol, .e-gridcol.e-gridcol-condensed, .e-gridcol.e-gridcol-separated
<p>
<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>
</p>
<br>
<p>
<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>
</p>
<br>
<p>
<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>
</p>.e-stretch, .e-stretch-top, .e-stretch-bottom
<div class="e-box">
<div class="e-stretch">
<table class="e-table">
<tr>
<td>
In nisi laborum
</td>
<td>
Ut et id
</td>
<td>
Aute esse ut
</td>
</tr>
<tr>
<td>
Dolor ullamco minim
</td>
<td>
Laboris aliqua dolore
</td>
<td>
Consequat aliquip dolor
</td>
</tr>
</table>
</div>
</div>
<div class="e-box">
<div class="e-stretch e-stretch-top">
<table class="e-table">
<tr>
<td>
Reprehenderit ex elit
</td>
<td>
Proident lorem aute
</td>
<td>
Aliquip commodo cillum
</td>
</tr>
<tr>
<td>
Laboris anim culpa
</td>
<td>
Anim qui sit
</td>
<td>
Aute occaecat fugiat
</td>
</tr>
</table>
</div>
</div>
<div class="e-box">
<div class="e-stretch e-stretch-bottom">
<table class="e-table">
<tr>
<td>
Commodo non tempor
</td>
<td>
Voluptate cupidatat est
</td>
<td>
Sed ea reprehenderit
</td>
</tr>
<tr>
<td>
Amet fugiat adipiscing
</td>
<td>
Est pariatur quis
</td>
<td>
Cupidatat aliqua deserunt
</td>
</tr>
</table>
</div>
</div>.e-scrollable
<div style="height:200px;width:500px;border:1px solid grey;">
<div class="e-scrollable">
<div class="e-scrollable__content">
<p>
Qui labore irure labore duis est, voluptate, qui, pariatur? Ut, dolore sed aliquip culpa deserunt dolor. Officia, commodo reprehenderit nulla ullamco culpa, in fugiat, exercitation? Dolor id, pariatur minim ea irure, do exercitation aliquip fugiat consequat aliqua quis, duis? Ad quis aliqua exercitation nulla ullamco dolore ut duis reprehenderit, sunt, pariatur aute. Sed veniam ut qui non non excepteur exercitation aliquip, in qui minim ut culpa. Aliqua in, est velit nostrud enim. Qui cupidatat in, tempor, ut dolor, ut fugiat proident.
</p>
<p>
Non qui, nostrud esse, ea labore laboris. Aliqua veniam sunt proident dolor labore, voluptate dolore fugiat fugiat, sint proident, incididunt. Magna, ullamco incididunt nulla adipiscing, ut culpa qui et laboris ut velit. Anim reprehenderit elit enim tempor, eiusmod, ipsum consectetur officia ut dolore enim, anim.
</p>
<p>
Dolore, laborum tempor, consequat occaecat. Veniam, nostrud, laborum sed nulla voluptate esse, nulla, do lorem sunt incididunt excepteur. Lorem, enim lorem cillum ad nisi duis minim esse? Deserunt nulla consectetur tempor commodo. Laboris, voluptate ex lorem incididunt. Esse ullamco ullamco, ipsum sunt in labore do, cillum, sunt, in sunt ut.
</p>
<p>
Occaecat, lorem, ea, enim consectetur duis non ad ullamco elit do, laborum. Laboris ullamco velit dolore. Quis sed veniam, et, est est est commodo veniam, laborum sit?
</p>
<p>
Proident reprehenderit sed tempor elit. Lorem mollit fugiat nostrud. Occaecat enim, sed non occaecat aliquip.
</p>
<p>
Et ullamco, ullamco nisi ex. Mollit eiusmod, tempor commodo aliqua deserunt ut velit ipsum mollit duis non duis? Fugiat quis, ut minim sint eiusmod irure sint aliquip mollit. In culpa sunt dolor eu sit consectetur sit. Commodo occaecat ut incididunt ut tempor lorem, anim, ut reprehenderit sint. Enim irure excepteur, tempor sunt sit commodo in?
</p>
<p>
Pariatur labore enim, in cupidatat nisi labore qui pariatur in reprehenderit culpa. Eiusmod, minim consectetur, occaecat ut fugiat ullamco in aute dolore. Minim mollit in consequat, et cupidatat ut ullamco non ut? Culpa pariatur cillum lorem, veniam nulla enim aliqua laboris?
</p>
<p>
Ut consequat mollit, dolore occaecat, et, quis pariatur dolore esse exercitation do qui, voluptate? Ut, fugiat sunt, proident fugiat, cupidatat sed. Magna ut qui mollit nostrud pariatur sint, pariatur.
</p>
<p>
Excepteur, eu nulla deserunt ut, dolor officia officia irure fugiat officia? In, commodo in ut exercitation, lorem et, anim, nisi sunt. Aliqua incididunt aliquip, eiusmod aliquip officia commodo enim. Sunt adipiscing ea reprehenderit enim ut occaecat consectetur, ex lorem, sint aute ut? Sed deserunt mollit, dolor est qui officia ut magna?
</p>
<p>
Non ipsum pariatur cupidatat sit, non, consequat ex aliqua, irure? Duis culpa dolore mollit irure eu occaecat culpa in excepteur, voluptate. Et culpa, laborum nisi magna veniam tempor, laborum, proident est. Labore, ad enim proident ea sit, consequat, dolor. Velit labore, exercitation, sint non aliqua in cillum? Nostrud, ipsum proident occaecat dolore ullamco, anim elit nulla, culpa.
</p>
</div>
</div>
</div>