1.1.0 • Published 4 years ago
ecam.css v1.1.0
ECAM.css
Installing
To install ECAM.css, run npm i ecam.css.
Put <link rel="stylesheet" href="node_modules/ecam.css/ecam.css"> to the <head> section of the HTML to import it.
Fonts
No fonts are included with this package but usage of Source Code Pro is recommended.
Components
IMPORTANT
Most of the components found below do not have layout or width/height styles. You need to add them yourself according to your needs.
Question Form
<div class="questiondiv">
<div>
<p class="questionmark">?</p>
<p class="questiontext">A350/A380 Style Question ?</p>
</div>
<form class="a350form" action="#">
<input type="radio" name="form">
<label class="a350formlabel" for="yes">Yes</label>
<input type="radio" name="form">
<label class="a350formlabel" for="no">No</label>
</form>
</div>Text Styles
Use the alert class to add borders to the text
Red Text
<p class="text alert red">ERROR</p>
<p class="text red">ERROR</p>Amber Text
<p class="text alert amber">WARNING</p>
<p class="text amber">WARNING</p>Green Text
<p class="text alert green">INFO</p>
<p class="text green">INFO</p>Azure Text
<p class="text action">ACTION</p>Basic Text
<p class="text">TEXT</p>Buttons
Non Hoverable
<a class="button" href="#">BUTTON</a>Hoverable
<a class="button hoverable" href="#">HOVERABLE</a>Dropdowns
Gray Background
<div class="dropdown">
<button class="button dropdownbutton"><a class="text dropdowntext">DROPDOWN</a><i class="fa fa-sort-desc"></i></button>
<div class="button dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>Black Background
<div class="dropdown">
<button class="button dropdownbutton"><a class="text dropdowntext darkdropdown">DROPDOWN 2</a><i class="dropdownicon fa fa-sort-desc"></i></button>
<div class="button dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>Gray Background (Hoverable)
<div class="dropdown ">
<button class="button dropdownbutton hoverable"><a class="text dropdowntext">HOVERABLE</a><i class="fa fa-sort-desc"></i></button>
<div class="button dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>Black Background (Hoverable)
<div class="dropdown">
<button class="button dropdownbutton hoverable"><a class="text dropdowntext darkdropdown">HOVERABLE</a><i class="dropdownicon fa fa-sort-desc"></i></button>
<div class="button dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>Radio Buttons
Gray
<div class="radiodiv">
<label class="container">ONE
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">TWO
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</div>Green
<div class="radiodiv">
<label class="container green">ONE
<input type="radio" checked="checked" name="radiogreen">
<span class="checkmark checkmarkgreen"></span>
</label>
<label class="container green">TWO
<input type="radio" name="radiogreen">
<span class="checkmark checkmarkgreen"></span>
</label>
</div>Text Inputs
Non-hoverable
<input class="textinput" type="text" name="Input" id="Input" placeholder="INPUT">Hoverable
<input class="textinput hoverable" type="text" name="Input" id="Input" placeholder="HOVERABLE INPUT">Popup
<div class="popup">
<h3 class="text popuptext">THIS IS A POPUP</h3>
<div class="popupbuttondiv">
<a class="button popupbutton left hoverable" href="#">YES</a>
<a class="button popupbutton right hoverable" href="#">NO</a>
</div>
</div>