InfoJobs Rubik Styleguides

Javascript Components

Modal

Use the following classes structure to create a modal window:

Use class .modal-layer to create the structure and class .modal-fade-in to apply the animation that shows it.
Then nest <div class="modal-inner"> to build the layout.
Include the container <div class="modal-header"> with the header structure.
Include the container <div class="modal-content"> with the content structure.


<div class="modal-layer modal-fade-in hide">
	<div class="modal-inner">
		<div class="modal-header">
			...
		</div>
		<div class="modal-content">
			...
		</div>
	</div>
</div>

Modal size

Apply width and height styles in the container .modal-inner for rewrite the default modal size.


<div class="modal-inner hide" style="width: 370px; height: 579px;">
	...
</div>

Modal content

Use the structure it's needed inside the .modal-content to create the layout.


<div class="modal-content">
	<p>Text content.</p>
</div>