seatable-ui/site/views/variables.html

Basic style of dtable related products

<div class="example">
	<div class="container">
		<h1>SeaTable UI</h1>
		<p>html { font-size: 16px; height: 100%; }</p>
		<p>body { -webkit-tap-highlight-color: transparent; -ms-touch-action: manipulation; touch-action: manipulation; height: 100%; overflow-y: scroll; position: relative; }</p>
		<p>body { background: none; } /* only for print */</p>
	</div>
	<div class="row">
		<div class="col">
			<h2>Colors</h2>
			<p>Text color: <span class="text-primary">.text-primary</span></p>
			<p>Text color: <span class="text-secondary">.text-secondary</span></p>
			<p>Text color: <span class="text-success">.text-success</span></p>
			<p>Text color: <span class="text-info">.text-info</span></p>
			<p>Text color: <span class="text-warning">.text-warning</span></p>
			<p>Text color: <span class="text-danger">.text-danger</span></p>
			<p>Text color: <span class="text-light">.text-light</span></p>
			<p>Text color: <span class="text-dark">.text-dark</span></p>
			<p>Background color: <span class="bg-primary">.bg-primary</span></p>
			<p>Background color: <span class="bg-secondary">.bg-secondary</span></p>
			<p>Background color: <span class="bg-success">.bg-success</span></p>
			<p>Background color: <span class="bg-info">.bg-info</span></p>
			<p>Background color: <span class="bg-warning">.bg-warning</span></p>
			<p>Background color: <span class="bg-danger">.bg-danger</span></p>
			<p>Background color: <span class="bg-light">.bg-light</span></p>
			<p>Background color: <span class="bg-dark">.bg-dark</span></p>
		</div>
		<div class="col">
			<h2>Typography</h2>
			<p>Font size: <span class="text-small">.text-small</span></p>
			<p>Font size: <span class="text-normal">.text-normal</span></p>
			<p>Font size: <span class="text-large">.text-large</span></p>
			<p>Font weight: <span class="font-light">.font-light</span></p>
			<p>Font weight: <span class="font-normal">.font-normal</span></p>
			<p>Font weight: <span class="font-bold">.font-bold</span></p>
		</div>
	</div>
	<div class="row">
		<div class="col">
			<h2>Buttons</h2>
			<button class="btn btn-primary">.btn-primary</button>
			<button class="btn btn-secondary">.btn-secondary</button>
			<button class="btn btn-success">.btn-success</button>
			<button class="btn btn-info">.btn-info</button>
			<button class="btn btn-warning">.btn-warning</button>
			<button class="btn btn-danger">.btn-danger</button>
			<button class="btn btn-light">.btn-light</button>
			<button class="btn btn-dark">.btn-dark</button>
		</div>
		<div class="col">
			<h2>Alerts</h2>
			<div class="alert alert-primary">.alert-primary</div>
			<div class="alert alert-secondary">.alert-secondary</div>
			<div class="alert alert-success">.alert-success</div>
			<div class="alert alert-info">.alert-info</div>
			<div class="alert alert-warning">.alert-warning</div>
			<div class="alert alert-danger">.alert-danger</div>
			<div class="alert alert-light">.alert-light</div>
			<div class="alert alert-dark">.alert-dark</div>
		</div>
	</div>
	<div class="row">
		<div class="col">
			<h2>Tables</h2>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Firstname</th>
						<th>Lastname</th>
						<th>Email</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>John</td>
						<td>Doe</td>
						<td>john@example.com</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>