marble
Version:
WeDeploy's style guide and UI components
266 lines (230 loc) • 8.24 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo: Input groups</title>
<link rel="stylesheet" href="../build/marble.css">
<style>
body {
margin: 24px auto;
width: 480px;
}
h1 {
margin: 32px 0;
text-align: center;
}
</style>
</head>
<body>
<h1>Addons</h1>
<div class="form-group">
<label>Input with preffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
</div>
</div>
<div class="form-group">
<label>Input with suffix</label>
<div class="input-group">
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<div class="form-group">
<label>Input with preffix and suffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<h1>Addons disabled</h1>
<div class="form-group">
<label>Input with preffix</label>
<div class="input-group">
<div class="input-group-addon disabled">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
</div>
</div>
<div class="form-group">
<label>Input with suffix</label>
<div class="input-group">
<input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
<div class="input-group-addon disabled">.appland.com</div>
</div>
</div>
<div class="form-group">
<label>Input with preffix and suffix</label>
<div class="input-group">
<div class="input-group-addon disabled">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
<div class="input-group-addon disabled">.appland.com</div>
</div>
</div>
<h1>Addons with states</h1>
<div class="form-group has-error">
<label>Input with error</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
</div>
</div>
<div class="form-group has-warning">
<label>Input with warning</label>
<div class="input-group">
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<div class="form-group has-success">
<label>Input with success</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<h1>Inner Addons</h1>
<div class="form-group">
<label>Input with icon 12 preffix</label>
<div class="input-inner-addon input-inner-addon-left">
<span class="input-inner-icon-helper icon-12-person"></span>
<input class="form-control" type="text" placeholder="app-url">
</div>
</div>
<div class="form-group">
<label>Input with icon 16 preffix</label>
<div class="input-inner-addon input-inner-addon-left">
<span class="input-inner-icon-helper icon-16-info"></span>
<input class="form-control" type="text" placeholder="app-url">
</div>
</div>
<label>Input with icon 12 suffix</label>
<div class="form-group">
<div class="input-inner-addon input-inner-addon-right">
<input class="form-control" type="text" placeholder="app-url">
<span class="input-inner-icon-helper icon-12-person"></span>
</div>
</div>
<div class="form-group">
<label>Input with icon 16 suffix</label>
<div class="input-inner-addon input-inner-addon-right">
<input class="form-control" type="text" placeholder="app-url">
<span class="input-inner-icon-helper icon-16-info"></span>
</div>
</div>
<h1>Addons + Inner Addons</h1>
<div class="form-group">
<label>Input with preffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-12-person"></span>
<input type="text" class="input-group-addon-input input-group-addon-input-right form-control" placeholder="app-url">
</div>
</div>
</div>
<div class="form-group">
<label>Input with suffix</label>
<div class="input-group">
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-16-info"></span>
<input type="text" class="input-group-addon-input input-group-addon-input-left form-control" placeholder="app-url">
</div>
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<div class="form-group">
<label>Input with preffix and suffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-16-info"></span>
<input type="text" class="input-group-addon-input input-group-addon-input-center form-control" placeholder="app-url">
</div>
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<h1>Button Addons</h1>
<div class="form-group">
<label>Input with button preffix</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
<input class="form-control" type="text" placeholder="Invite people to this app">
</div>
</div>
<div class="form-group">
<label>Input with button suffix</label>
<div class="input-group">
<input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
</div>
</div>
<h1>Button Addons + Select Addons</h1>
<div class="form-group">
<label>Input with button suffix and select</label>
<div class="input-group">
<span class="input-group-btn">
</span>
<input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
</div>
</div>
<h1>Button Addons + Inner Addon</h1>
<div class="form-group">
<label>Input with button and icon 12 suffix</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-12-person"></span>
<input class="input-btn-left form-control" type="text" placeholder="Invite people to this app">
</div>
</div>
</div>
<div class="form-group">
<label>Input with button and icon 16 suffix</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-16-info"></span>
<input class="input-btn-left form-control" type="text" placeholder="Invite people to this app">
</div>
</div>
</div>
<div class="form-group">
<label>Input with button and icon 12 suffix</label>
<div class="input-group">
<div class="input-inner-addon input-inner-addon-right">
<span class="icon-12-person"></span>
<input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
</div>
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
</div>
</div>
<div class="form-group">
<label>Input with button and icon 16 suffix</label>
<div class="input-group">
<div class="input-inner-addon input-inner-addon-right">
<span class="icon-16-info"></span>
<input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
</div>
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
</div>
</div>
</body>
</html>