mirror of https://github.com/Squidex/squidex.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1756 lines
83 KiB
1756 lines
83 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Squidex theme</title>
|
|
|
|
<meta content="width=device-width, initial-scale=1" name="viewport">
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
|
|
|
|
<style>
|
|
.page-title h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.bs-section-title {
|
|
font-size: 30px;
|
|
font-weight: lighter;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.bs-section {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.bs-section-white {
|
|
background: white;
|
|
}
|
|
|
|
.bs-component {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.panel {
|
|
min-height: 500px;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
height: 500px !important;
|
|
}
|
|
|
|
.table-items-row-details::before {
|
|
right: 80px !important;
|
|
}
|
|
|
|
.form-bubble {
|
|
display: block;
|
|
max-height: 100px;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.sidebar {
|
|
position: relative !important;
|
|
height: 700px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="bs-section container">
|
|
<div class="row">
|
|
<div class="col-lg-12 page-title">
|
|
<h1>Squidex Theme</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Navbars</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row bs-component">
|
|
<div class="col-lg-12">
|
|
<nav class="navbar navbar-expand navbar-dark bg-primary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Features</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Pricing</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">About</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<form class="d-flex">
|
|
<input class="form-control me-2" type="text" placeholder="Search">
|
|
|
|
<button type="button" class="btn btn-secondary">Search</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row bs-component">
|
|
<div class="col-lg-12">
|
|
<nav class="navbar navbar-expand navbar-light bg-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Features</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Pricing</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">About</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<form class="d-flex">
|
|
<input class="form-control me-2" type="text" placeholder="Search">
|
|
|
|
<button type="button" class="btn btn-secondary">Search</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Buttons</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-7">
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
|
|
<a class="btn btn-link">Link</a>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-text-primary">Primary</button>
|
|
<button type="button" class="btn btn-text-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-text-success">Success</button>
|
|
<button type="button" class="btn btn-text-info">Info</button>
|
|
<button type="button" class="btn btn-text-warning">Warning</button>
|
|
<button type="button" class="btn btn-text-danger">Danger</button>
|
|
<button type="button" class="btn btn-text-secondary2">Secondary2</button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-text-primary btn-outline-secondary">Primary</button>
|
|
<button type="button" class="btn btn-text-secondary btn-outline-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-text-success btn-outline-secondary">Success</button>
|
|
<button type="button" class="btn btn-text-info btn-outline-secondary">Info</button>
|
|
<button type="button" class="btn btn-text-warning btn-outline-secondary">Warning</button>
|
|
<button type="button" class="btn btn-text-danger btn-outline-secondary">Danger</button>
|
|
<button type="button" class="btn btn-text-secondary2 btn-outline-secondary">Secondary2</button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-primary disabled">Primary</button>
|
|
<button type="button" class="btn btn-secondary disabled">Secondary</button>
|
|
<button type="button" class="btn btn-success disabled">Success</button>
|
|
<button type="button" class="btn btn-info disabled">Info</button>
|
|
<button type="button" class="btn btn-warning disabled">Warning</button>
|
|
<button type="button" class="btn btn-danger disabled">Danger</button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
|
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-outline-success">Success</button>
|
|
<button type="button" class="btn btn-outline-info">Info</button>
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
|
</p>
|
|
|
|
<div class="bs-component">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-success dropdown-toggle"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-info dropdown-toggle"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-danger dropdown-toggle"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<button class="btn btn-google">
|
|
<i class="icon-google icon-decent"></i> Google
|
|
</button>
|
|
|
|
<button class="btn btn-twitter">
|
|
<i class="icon-twitter icon-decent"></i> Twitter
|
|
</button>
|
|
|
|
<button class="btn btn-microsoft">
|
|
<i class="icon-microsoft icon-decent"></i> Microsoft
|
|
</button>
|
|
|
|
<button class="btn btn-github">
|
|
<i class="icon-github icon-decent"></i> Github
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-5">
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
|
</p>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-primary">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-warning">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-danger">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-success">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-info">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="checkbox" checked> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="radio" name="options" checked> Radio 1
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="options"> Radio 2
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="options"> Radio 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<div class="btn-group-vertical" data-toggle="buttons">
|
|
<button type="button" class="btn btn-primary">Top</button>
|
|
<button type="button" class="btn btn-primary">Middle</button>
|
|
<button type="button" class="btn btn-primary">Buttom</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn btn-secondary">Left</button>
|
|
<button type="button" class="btn btn-secondary">Middle</button>
|
|
<button type="button" class="btn btn-secondary">Right</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px;">
|
|
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
|
<div class="btn-group" role="group" aria-label="First group">
|
|
<button type="button" class="btn btn-secondary">1</button>
|
|
<button type="button" class="btn btn-secondary">2</button>
|
|
<button type="button" class="btn btn-secondary">3</button>
|
|
<button type="button" class="btn btn-secondary">4</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" role="group" aria-label="Second group">
|
|
<button type="button" class="btn btn-secondary">5</button>
|
|
<button type="button" class="btn btn-secondary">6</button>
|
|
<button type="button" class="btn btn-secondary">7</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" role="group" aria-label="Third group">
|
|
<button type="button" class="btn btn-secondary">8</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Typography</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
<h3>Heading <small class="text-muted">with muted text</small></h3>
|
|
|
|
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h2>Example body text</h2>
|
|
|
|
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
|
<p>The following is <strong>rendered as bold text</strong>.</p>
|
|
<p>The following is <em>rendered as italicized text</em>.</p>
|
|
<p>The following is an abbreviation <abbr title="attribute">attr</abbr>.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h2>Emphasis classes</h2>
|
|
|
|
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Blockquotes</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<blockquote class="blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<blockquote class="blockquote blockquote-reverse">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">List Tables</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<table class="table table-items">
|
|
<thead class="thead-inverse">
|
|
<tr>
|
|
<th>
|
|
<input class="form-check" type="checkbox" checked />
|
|
</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="active">
|
|
<td>
|
|
<input class="form-check" type="checkbox" checked />
|
|
</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="spacer"></tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<input class="form-check" type="checkbox" />
|
|
</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="spacer"></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">List Tables (on white background)</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<table class="table table-items">
|
|
<thead class="thead-inverse">
|
|
<tr>
|
|
<th>
|
|
<input class="form-check" type="checkbox" checked />
|
|
</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="active">
|
|
<td>
|
|
<input class="form-check" type="checkbox" checked />
|
|
</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="spacer"></tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<input class="form-check" type="checkbox" />
|
|
</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="spacer"></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Forms</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<form>
|
|
<fieldset>
|
|
<legend>Legend</legend>
|
|
|
|
<div class="form-alert form-alert-error">
|
|
<p>Validation error.</p>
|
|
|
|
<ul>
|
|
<li>An user with the same email aready exists.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="form-bubble">
|
|
<div class="form-alert form-alert-error">
|
|
<p>Validation error.</p>
|
|
|
|
<ul>
|
|
<li>An user with the same email aready exists.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<div class="form-group">
|
|
<label>Email address</label>
|
|
|
|
<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
|
|
|
|
<small class="text-muted form-text">We will never share your email with anyone else.</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
|
|
<input type="password" class="form-control" placeholder="Password" autocomplete="false">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Example custom select</label>
|
|
|
|
<select class="form-select">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Example custom multiple select</label>
|
|
|
|
<select multiple class="form-select">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Example textarea</label>
|
|
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h2>Custom Radio buttons</h2>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" id="customRadio1" name="customRadio">
|
|
<label class="form-check-label" for="customRadio1">Option 1</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" id="customRadio2" name="customRadio">
|
|
<label class="form-check-label" for="customRadio2">Option 2</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" id="customRadio3" name="customRadio" disabled>
|
|
<label class="form-check-label" for="customRadio3">Option 3</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h2>Custom Checkboxes</h2>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="customRadio1" name="customRadio">
|
|
<label class="form-check-label" for="customRadio1">Option 1</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="customRadio2" name="customRadio">
|
|
<label class="form-check-label" for="customRadio2">Option 2</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="customRadio3" name="customRadio" disabled>
|
|
<label class="form-check-label" for="customRadio3">Option 3</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-lg-offset-1">
|
|
<form class="bs-component">
|
|
<div class="form-group">
|
|
<label>Disabled input</label>
|
|
|
|
<input class="form-control" type="text" placeholder="Disabled input here..." disabled>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Readonly input</label>
|
|
|
|
<input class="form-control" type="text" placeholder="Disabled input here..." readonly>
|
|
</div>
|
|
|
|
<div class="form-group has-success">
|
|
<label>Input with success</label>
|
|
|
|
<input type="text" class="form-control is-valid">
|
|
|
|
<div class="valid-feedback">Success! You've done it.</div>
|
|
</div>
|
|
|
|
<div class="form-group has-warning">
|
|
<label>Input with warning</label>
|
|
|
|
<input type="text" class="form-control is-invalid">
|
|
|
|
<div class="invalid-feedback">Shucks, try again.</div>
|
|
</div>
|
|
|
|
<div class="form-group has-warning">
|
|
<label>Input with error</label>
|
|
|
|
<div class="errors-container">
|
|
<div class="errors">You have entered an invalid value.</div>
|
|
</div>
|
|
|
|
<input type="text" class="form-control is-invalid">
|
|
</div>
|
|
|
|
<div class="form-group has-warning">
|
|
<label>Input with hint</label>
|
|
|
|
<input type="text" class="form-control">
|
|
|
|
<div class="alert alert-hint mt-2">
|
|
<i class="icon-info-outline"></i> The app name cannot be changed later.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Large input</label>
|
|
|
|
<input class="form-control form-control-lg" type="text">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Default input</label>
|
|
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Small input</label>
|
|
|
|
<input class="form-control form-control-sm" type="text">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Input addons</label>
|
|
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">$</span>
|
|
|
|
<input type="text" class="form-control"
|
|
aria-label="Amount (to the nearest dollar)">
|
|
|
|
<span class="input-group-text">.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Input Buttons</label>
|
|
|
|
<div class="input-group mb-3">
|
|
<button class="btn btn-outline-secondary">Button</button>
|
|
|
|
<input type="text" class="form-control"
|
|
aria-label="Amount (to the nearest dollar)">
|
|
|
|
<button class="btn btn-outline-secondary">Button</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Navigation</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin-bottom: 2rem;">
|
|
<div class="col-lg-6">
|
|
<h2>Tabs</h2>
|
|
|
|
<div class="bs-component">
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#home">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#profile">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<ul class="nav nav-tabs2">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#home">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#profile">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<h2>Pills</h2>
|
|
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="bs-component">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Breadcrumbs</h2>
|
|
|
|
<div class="bs-component">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active">Home</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active">Library</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
<li class="breadcrumb-item done"><a href="#">Others</a></li>
|
|
<li class="breadcrumb-item active">Data</li>
|
|
</ol>
|
|
<ol class="breadcrumb steps">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item done"><a href="#">Library</a></li>
|
|
<li class="breadcrumb-item active">Others</li>
|
|
<li class="breadcrumb-item">Data</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<h2>Pagination</h2>
|
|
|
|
<div class="bs-component">
|
|
<div>
|
|
<ul class="pagination">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<ul class="pagination pagination-lg">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<ul class="pagination pagination-sm">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Dropdown</h2>
|
|
|
|
<div class="bs-component">
|
|
<ul class="dropdown-menu" style="position: static; display: block;">
|
|
<li><h6 class="dropdown-header">Dropdown header</h6></li>
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
|
|
<li><hr class="dropdown-divider" /></li>
|
|
|
|
<li><a class="dropdown-item dropdown-item-delete" href="#">Separated link</a></li>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Side Menu</h2>
|
|
|
|
<ul class="nav nav-light flex-column">
|
|
<li class="nav-item nav-heading">
|
|
Security
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active">
|
|
<i class="icon-clients"></i> Clients
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="icon-contributors"></i> Contributors
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="icon-roles"></i> Roles
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item nav-heading">
|
|
Editing
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="icon-patterns"></i> Patterns
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="icon-languages"></i> Languages
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="icon-workflows"></i> Workflows
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item nav-heading">
|
|
More
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="icon-backups"></i> Backups
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="icon-subscription"></i> Subscriptions
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<h2>Sidedbar</h2>
|
|
|
|
<div class="sidebar">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link active">
|
|
<i class="nav-icon icon-dashboard"></i> <div class="nav-text">Dashboard</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="nav-icon icon-schemas"></i> <div class="nav-text">Schemas</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="nav-icon icon-contents"></i> <div class="nav-text">Content</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="nav-icon icon-assets"></i> <div class="nav-text">Assets</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="nav-icon icon-rules"></i> <div class="nav-text">Rules</div>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">
|
|
<i class="nav-icon icon-api"></i> <div class="nav-text">Api</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="nav flex-column bottom">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://squidex.io/help" target="_blank">
|
|
<i class="nav-icon icon-help2"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item" *ngIf="!isSettingsHidden(app)">
|
|
<a class="nav-link">
|
|
<i class="nav-icon icon-settings"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Indicators</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Alerts</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-warning mt-2">
|
|
<button type="button" class="btn-close" data-dismiss="alert"></button>
|
|
|
|
<h4>Warning!</h4>
|
|
|
|
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-danger mt-2">
|
|
<button type="button" class="btn-close" data-dismiss="alert"></button>
|
|
|
|
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-success mt-2">
|
|
<button type="button" class="btn-close" data-dismiss="alert"></button>
|
|
|
|
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-info mt-2">
|
|
<button type="button" class="btn-close" data-dismiss="alert"></button>
|
|
|
|
<i class="icon-info-outline"></i> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2>Badges</h2>
|
|
|
|
<div class="bs-component" style="margin-bottom: 40px;">
|
|
<span class="badge badge-primary">Primary</span>
|
|
<span class="badge badge-secondary">Secondary</span>
|
|
<span class="badge badge-success">Success</span>
|
|
<span class="badge badge-danger">Danger</span>
|
|
<span class="badge badge-warning">Warning</span>
|
|
<span class="badge badge-info">Info</span>
|
|
<span class="badge badge-light">Light</span>
|
|
<span class="badge badge-dark">Dark</span>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<span class="badge rounded-pill badge-primary">Primary</span>
|
|
<span class="badge rounded-pill badge-secondary">Secondary</span>
|
|
<span class="badge rounded-pill badge-success">Success</span>
|
|
<span class="badge rounded-pill badge-danger">Danger</span>
|
|
<span class="badge rounded-pill badge-warning">Warning</span>
|
|
<span class="badge rounded-pill badge-info">Info</span>
|
|
<span class="badge rounded-pill badge-light">Light</span>
|
|
<span class="badge rounded-pill badge-dark">Dark</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Progress</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Basic</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Contextual alternatives</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 50%;"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%;"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Multiple bars</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar" role="progressbar" style="width: 15%;"></div>
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 30%;"></div>
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 20%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Striped</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%;"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%;"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%;"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Animated</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Containers</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<div class="jumbotron">
|
|
<h1 class="display-3">Jumbotron</h1>
|
|
|
|
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
|
<p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>List groups</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<span class="tag tag-default tag-pill float-xs-right">14</span> Cras justo odio
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="tag tag-default tag-pill float-xs-right">2</span> Dapibus ac facilisis in
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="tag tag-default tag-pill float-xs-right">1</span> Morbi leo risus
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
|
<a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item list-group-item-action active">
|
|
<h4 class="list-group-item-heading">List group item heading</h4>
|
|
|
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|
<h4 class="list-group-item-heading">List group item heading</h4>
|
|
|
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Cards</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card text-white bg-primary text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-success text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-info text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-warning text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-danger text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card border-primary text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-success text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-info text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-warning text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-danger text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card">
|
|
<h3 class="card-header">Card header</h3>
|
|
|
|
<div class="card-body">
|
|
<h5 class="card-title">Special title treatment</h5>
|
|
|
|
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
|
</div>
|
|
|
|
<img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
|
|
|
|
<div class="card-body">
|
|
<p href="#" class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="card-link">Card link</a>
|
|
<a href="#" class="card-link">Another link</a>
|
|
</div>
|
|
|
|
<div class="card-footer text-muted text-xs-center">
|
|
2 days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Modals</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<div class="modal" style="position: relative; width: 100%; height: 500px; display: block;">
|
|
<div class="modal-backdrop show" style="position: absolute;"></div>
|
|
|
|
<div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px; display: block;">
|
|
<div class="modal-content">
|
|
<div class="modal-header with-tabs" *ngIf="showHeader">
|
|
<h4 class="modal-title">
|
|
Title
|
|
</h4>
|
|
|
|
<button type="button" class="btn-close"></button>
|
|
</div>
|
|
|
|
<div class="modal-header modal-tabs">
|
|
<ul class="nav nav-tabs2">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#home">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#profile">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
Modal body text goes here.
|
|
</div>
|
|
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="float-left btn btn-text-secondary2">Close</button>
|
|
|
|
<button type="button" class="float-right btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<div class="modal" style="position: relative; width: 100%; height: 500px; display: block;">
|
|
<div class="modal-backdrop show" style="position: absolute;"></div>
|
|
|
|
<div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px; display: block;">
|
|
<div class="modal-content">
|
|
<div class="modal-header" *ngIf="showHeader">
|
|
<h4 class="modal-title">
|
|
Title
|
|
</h4>
|
|
|
|
<button type="button" class="btn-close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
Modal body text goes here.
|
|
</div>
|
|
|
|
<div class="modal-footer justify-content-between">
|
|
<button type="button" class="float-left btn btn-text-secondary2">Close</button>
|
|
|
|
<button type="button" class="float-right btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Lists</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<div class="table-items-row table-items-row-expandable">
|
|
<div class="table-items-row-summary">
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
My Item 1
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-outline-secondary btn-expand expanded mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger btn-outline-secondary">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-items-row-details">
|
|
<div class="table-items-row-details-tabs">
|
|
<ul class="nav nav-tabs2">
|
|
<li class="nav-item">
|
|
<a class="nav-link active">Tab1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Tab2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Tab3</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="text-end">
|
|
<button type="reset" class="btn btn-text-secondary2">Cancel</button>
|
|
<button type="submit" class="btn btn-primary ms-1">Save</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-items-row-details-tab">
|
|
Text
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row table-items-row-expandable">
|
|
<div class="table-items-row-summary">
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
My Item 2
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-outline-secondary btn-expand mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger btn-outline-secondary">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row table-items-row-expandable">
|
|
<div class="table-items-row-summary">
|
|
<div class="row no-gutters">
|
|
<div class="col col-name">
|
|
My Item 3
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-outline-secondary btn-expand mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger btn-outline-secondary">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row table-items-row-summary">
|
|
<div class="row no-gutters">
|
|
<div class="col col-name">
|
|
My Item 4
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-outline-secondary mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger btn-outline-secondary">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Tables</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<table class="table table-striped table-hover table-bordered">
|
|
<thead class="thead-inverse">
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-info">
|
|
<td>3</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-success">
|
|
<td>4</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-danger">
|
|
<td>5</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-warning">
|
|
<td>6</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-active">
|
|
<td>7</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|