Utility
| Last update: | () |
| Message | feat(utility): screenheight for integration iframes |
| Committer: | Tamás Bíró |
| Version history | |
Grabbable.e-grabbable
.e-grabbable {
cursor: move !important;
cursor: grab !important;
&:active {
cursor: grabbing !important;
}
}
Clearfix.clearfix
.clearfix {
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
Word wrap.word-wrap
.word-wrap {
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
}
Zebra stripe
<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
Complex utility classes
Grid col
<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
<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
<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
<div style="height:200px;width:500px;border:1px solid grey;">
<div class="e-scrollable">
<div class="e-scrollable__content">
<p>
Irure nostrud, in dolor excepteur quis irure. Aute sunt, sit, nulla minim eu ex esse. Incididunt dolor cupidatat pariatur, incididunt et, nulla, exercitation. Adipiscing dolor aliqua non ut laboris cupidatat in ea non dolor? Reprehenderit dolore, sed sint minim ut do mollit anim in.
</p>
<p>
Minim, laboris, eu, mollit amet in voluptate quis ut fugiat? Labore duis esse enim irure ex fugiat excepteur ut in ut eiusmod in ex reprehenderit ea cupidatat. Ut ad aliqua, occaecat, eiusmod id, et officia, ullamco quis consequat. Quis pariatur minim mollit, pariatur cupidatat ad mollit pariatur.
</p>
<p>
Occaecat id elit dolore cillum culpa, cupidatat deserunt non. Ut non ea fugiat mollit ipsum duis velit ut laborum. Proident eiusmod nisi ut aliquip in, fugiat laborum, mollit, duis. Occaecat ut occaecat est, adipiscing id exercitation.
</p>
<p>
Culpa cillum aute velit, consectetur culpa irure, in, in nostrud sit est. Ut anim, do veniam commodo eiusmod. Esse aliqua, quis anim consectetur dolor. Exercitation eiusmod deserunt sed aute, ipsum sed dolor, duis mollit consequat magna.
</p>
<p>
Aliqua laborum, magna, eu dolore dolore aliquip sit qui tempor. Nisi veniam eu, excepteur veniam aliquip ea pariatur labore. Ut culpa in, qui veniam velit ut sed nisi deserunt mollit, do occaecat. Ea in, ea id est deserunt. Lorem, ut, sint nostrud est magna cillum nulla sit laborum adipiscing. Deserunt sit aute qui velit in consequat magna adipiscing.
</p>
<p>
Ipsum in, tempor, aliqua nisi nulla, quis est adipiscing labore. Ipsum irure nulla dolor ex, pariatur, enim non dolor mollit, nostrud. Dolore minim cillum excepteur, magna, do deserunt, ea ex consequat consectetur, deserunt laborum. Sit ut, dolor labore, laboris mollit commodo nulla id duis consequat amet sint?
</p>
<p>
Sunt excepteur qui culpa quis mollit, lorem cupidatat, veniam anim. In voluptate dolore et proident, reprehenderit et eu laborum eu in. Veniam est ex enim mollit ut occaecat, ex nostrud dolor. Irure nisi dolor dolor, excepteur consequat in ipsum dolor incididunt veniam do eiusmod occaecat. Esse mollit, eiusmod non eiusmod elit esse ipsum in velit proident.
</p>
<p>
Proident do in quis duis laboris ut id quis. Consequat, ad, nulla excepteur duis aliquip. Cupidatat dolor esse ut aute dolor, deserunt officia voluptate. Fugiat qui adipiscing eiusmod qui nisi veniam, officia nostrud, ut eu?
</p>
<p>
Nulla adipiscing, ea irure deserunt irure qui cupidatat sit, elit duis excepteur, dolor? Culpa, aliqua nisi in quis ex adipiscing enim, adipiscing elit, sunt fugiat veniam. Voluptate pariatur, adipiscing sunt, commodo id, culpa qui aliqua esse tempor. Velit ut anim incididunt sit dolore, ut tempor, ex? Exercitation, lorem in dolore esse ut id exercitation in occaecat, officia quis, ad et. Aliqua excepteur voluptate sed fugiat lorem, ad, ex commodo. Velit ad minim ex, tempor officia officia pariatur in officia, in do. Enim ut, ipsum enim excepteur dolore, in sint ad laborum aute.
</p>
<p>
Lorem deserunt ad incididunt elit qui elit. In, dolor, anim ex sunt lorem veniam, in ut, amet. Laborum, sint mollit quis, labore, ad id velit, aliqua ex id. Ut eu sint aliquip, id dolor adipiscing enim exercitation amet in in dolor.
</p>
</div>
</div>
</div>
<div style="height:200px;width:500px;border:1px solid grey;">
<div class="e-scrollable">
<div class="e-scrollable__content">
<p>Nisi aliquip est consequat minim commodo amet nisi in eu. In, non duis, ea, nulla id, excepteur, adipiscing. Culpa commodo dolor duis est ad sunt? Culpa elit veniam aliquip aliqua nostrud culpa enim? Ipsum nulla, non, ut, ut, ad, sit occaecat qui. Anim irure, ut, officia adipiscing consectetur non ex sit.
</p>
<p>Consectetur veniam, exercitation, aliquip enim aute nostrud amet, cillum? Dolor id reprehenderit occaecat anim, do ea enim anim, do? Aute in consectetur veniam, reprehenderit duis lorem ea? Incididunt ex duis, voluptate excepteur sed id sed ad, proident nisi veniam. Duis mollit nisi, aliqua, adipiscing, in dolor in deserunt.
</p>
<p>Pariatur officia, nisi laboris in qui id aliqua laboris reprehenderit. Fugiat ut nostrud dolor eu do quis sed anim cillum. Aliquip esse aliquip nisi deserunt ad nulla.
</p>
<p>Esse ad, eiusmod id deserunt laborum incididunt, quis tempor, sunt do. Labore anim, sint minim enim ex ad cupidatat in dolore. Adipiscing ullamco ut, enim cupidatat qui in veniam veniam.
</p>
<p>Sed minim consectetur elit nulla sint velit? Sit anim sed sit, esse sint adipiscing culpa duis, cupidatat. Aute, ipsum consectetur sint voluptate nostrud ea? In sunt, enim est commodo dolor, cillum proident, in? Anim dolore voluptate labore proident, enim, aliquip in, velit. Qui ut commodo enim. Adipiscing ut elit esse occaecat adipiscing consequat sed pariatur dolore, consequat?
</p>
<p>Labore elit cupidatat irure dolore voluptate, voluptate. Anim nostrud officia aute sint occaecat in ea, labore cupidatat? Laboris reprehenderit lorem magna commodo duis proident tempor anim incididunt et consectetur. Ut dolor sit eiusmod, nostrud pariatur aute sint, in eu sint. Officia ut officia dolore laboris commodo in dolor.
</p>
<p>Ut fugiat velit amet id aliquip, in esse, sunt nulla?
</p>
<p>Dolor dolor deserunt culpa culpa lorem laboris voluptate labore eu, amet non? Aliquip quis do velit magna aliquip, exercitation, sint, labore proident in, est laboris. Sint voluptate excepteur ad quis id? Elit ullamco nulla, deserunt consectetur et enim tempor enim fugiat, ea. Eu nostrud occaecat eu et exercitation, aliqua ex, dolor mollit non sed ut minim, dolor dolor?
</p>
<p>Laborum ad dolor proident cupidatat, qui dolor et incididunt, labore ex? Ut, qui dolore aute ullamco lorem et, anim dolore est deserunt. Ut nulla duis velit eu, cupidatat laboris irure.
</p>
<p>Ipsum aute dolore incididunt excepteur cupidatat minim do qui laborum magna, sit. Voluptate nostrud reprehenderit, ut, ut, dolore, nulla. Laboris reprehenderit do nulla, incididunt sit ut anim consequat ut et mollit occaecat. Excepteur esse, consectetur reprehenderit, laborum eiusmod lorem exercitation. Quis exercitation, consequat quis consectetur, nisi qui?
</p>
</div>
</div>
</div>Veniam anim pariatur nisi, sed id nostrud irure. Tempor, culpa, nulla reprehenderit laborum qui laborum est, irure duis. Officia velit, nostrud adipiscing id exercitation reprehenderit in ut sunt. Ipsum, laboris dolore reprehenderit non, est. In veniam sunt, sint, tempor dolor, consequat veniam do anim, occaecat. Minim proident sit anim velit fugiat excepteur, sed? Qui in minim dolore occaecat in nulla tempor sunt.
Pariatur in eu sit ea, minim laborum, cillum ipsum fugiat? In amet qui laborum, voluptate elit reprehenderit culpa, eiusmod sint, mollit deserunt, esse laboris. Eiusmod culpa sint mollit adipiscing esse cillum consequat, laborum do ad.
Ex consequat in sit, sint, cupidatat. Sunt voluptate ullamco laboris ex minim sed in lorem consequat aliquip sed. Occaecat, excepteur, anim proident elit deserunt id, excepteur in aliqua. Excepteur exercitation irure ullamco culpa, cupidatat consequat, quis nulla eu exercitation commodo, eiusmod exercitation.
Quis culpa id excepteur, cupidatat? Est ad, eu laboris adipiscing labore, veniam est do in irure ipsum ullamco. In ullamco enim, enim eiusmod non fugiat culpa ut. Pariatur qui aliquip dolor nulla, fugiat aute. Aliqua, ipsum in, culpa lorem adipiscing sit cupidatat. Id tempor voluptate veniam, eiusmod eiusmod in.
Et, id aute ut ut nulla, occaecat ea. In quis aliquip dolore sed id, officia aute. Dolor ex dolor, ut, tempor ut nisi aute aliquip, esse ut. In duis, voluptate sed, do commodo nostrud aliquip, irure dolore fugiat.
Consequat proident, consectetur, nisi, esse veniam culpa qui, in, adipiscing. Fugiat cupidatat do, aute eu elit anim, mollit. Consequat, dolore, ut lorem ut exercitation aliqua culpa anim ipsum in mollit? Et, in duis laborum officia commodo, exercitation amet.
Dolore, in ad, qui amet commodo sint pariatur in officia, fugiat. Nostrud cupidatat, esse incididunt, aute magna excepteur culpa nostrud est aliquip officia. Do eu pariatur sint excepteur culpa qui, dolore ea, cillum ut? Est consectetur, ut non nisi consequat, adipiscing, cupidatat. Dolore velit adipiscing aliqua ipsum, veniam sed minim elit, non id. Anim aliquip velit sed quis id lorem ad, aliquip, exercitation in sit dolore, culpa.
In culpa, ut lorem ex incididunt. Mollit cillum deserunt consequat et fugiat sit aliqua. Nostrud ut nostrud, mollit enim mollit sit in nisi anim? Id ut minim ex, quis eiusmod mollit excepteur sit. Cillum voluptate exercitation, commodo, lorem est consequat. Eu, pariatur dolore, mollit et eu, voluptate, anim, est excepteur. Consectetur voluptate laboris, ipsum, aute excepteur, sed sunt eu, lorem aliquip occaecat officia?
Sunt consectetur in sit proident dolore nulla elit labore sunt enim reprehenderit? Adipiscing occaecat, elit consectetur pariatur ut, aliquip, irure deserunt occaecat irure. In do sed, velit reprehenderit excepteur, eu, sit et sunt. Ut proident sit commodo pariatur id esse sint? In, minim occaecat incididunt laborum, ut. Adipiscing qui velit, duis eu commodo duis veniam voluptate, excepteur tempor magna?
Mollit mollit, tempor reprehenderit reprehenderit elit ea id. Ut sint nulla, amet ipsum ut et anim? Adipiscing laboris in, irure nostrud do adipiscing, in laborum exercitation. Lorem, dolore, occaecat eiusmod cillum proident officia amet do, in, nostrud ullamco, id proident. Velit ad proident irure exercitation, non in, laboris est in est. Anim, aliquip ea dolore dolor?
Stretched table
<div class="e-box">
<div class="e-stretch">
<table class="e-table">
<tr>
<td>
Est tempor commodo
</td>
<td>
Dolor sit aliqua
</td>
<td>
Ea veniam lorem
</td>
</tr>
<tr>
<td>
Veniam in enim
</td>
<td>
Incididunt in deserunt
</td>
<td>
Fugiat in veniam
</td>
</tr>
</table>
</div>
</div>
<div class="e-box">
<div class="e-stretch">
<table class="e-table">
<tr>
<td>Eu fugiat qui
</td>
<td>Ut eu nostrud
</td>
<td>Anim anim in
</td>
</tr>
<tr>
<td>Culpa minim exercitation
</td>
<td>Ut ipsum nulla
</td>
<td>Labore labore magna
</td>
</tr>
</table>
</div>
</div>| Excepteur ea eu | Ut nulla elit | Velit commodo laborum |
| Est proident velit | Reprehenderit ut do | Sint ullamco sit |
Stretched table, stretch to top
<div class="e-box">
<div class="e-stretch e-stretch-top">
<table class="e-table">
<tr>
<td>
Voluptate nisi veniam
</td>
<td>
Adipiscing minim enim
</td>
<td>
Irure enim labore
</td>
</tr>
<tr>
<td>
Duis commodo exercitation
</td>
<td>
Proident ut adipiscing
</td>
<td>
Incididunt adipiscing commodo
</td>
</tr>
</table>
</div>
</div>
<div class="e-box">
<div class="e-stretch e-stretch-top">
<table class="e-table">
<tr>
<td>Pariatur amet dolore
</td>
<td>Nulla laborum esse
</td>
<td>Ex irure dolor
</td>
</tr>
<tr>
<td>Proident lorem excepteur
</td>
<td>Pariatur officia anim
</td>
<td>Labore dolore culpa
</td>
</tr>
</table>
</div>
</div>| Aliqua ut in | Sed ullamco non | Dolor non id |
| Enim commodo proident | Laborum in cupidatat | Minim veniam occaecat |
Stretched table, stretch to bottom
<div class="e-box">
<div class="e-stretch e-stretch-bottom">
<table class="e-table">
<tr>
<td>
Commodo dolor nisi
</td>
<td>
Ullamco aliqua duis
</td>
<td>
Et sit aute
</td>
</tr>
<tr>
<td>
Duis dolore ad
</td>
<td>
Enim culpa reprehenderit
</td>
<td>
Deserunt ipsum quis
</td>
</tr>
</table>
</div>
</div>
<div class="e-box">
<div class="e-stretch e-stretch-bottom">
<table class="e-table">
<tr>
<td>Ullamco amet ut
</td>
<td>Minim consequat sed
</td>
<td>Aliqua pariatur proident
</td>
</tr>
<tr>
<td>Ex veniam nisi
</td>
<td>Cillum pariatur aliquip
</td>
<td>In excepteur nostrud
</td>
</tr>
</table>
</div>
</div>| Ad est reprehenderit | Veniam mollit occaecat | Ut et nulla |
| Et ut reprehenderit | Incididunt non voluptate | Enim incididunt ullamco |
Color, text utility classes
Text overflow
<div class="text-overflow">
Proident cillum mollit quis mollit veniam consectetur consectetur sunt esse sed irure veniam voluptate consectetur pariatur in aute culpa voluptate mollit ipsum aliquip ut cupidatat duis amet sit pariatur duis in mollit nisi lorem ad voluptate qui esse cupidatat voluptate
</div>
<div class="text-overflow">Dolor velit consequat non sit cupidatat ex tempor ea ex adipiscing laboris aliquip aute ut veniam enim dolor ea sint dolore dolor in sed ad ex eiusmod nisi cupidatat eiusmod nisi culpa ea sit eu ullamco veniam sit eu sed
</div>
.background-color-comments