222 lines
7.2 KiB
HTML
222 lines
7.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||
|
|
<title>Theming - Semantic</title>
|
||
|
|
|
||
|
|
<!--- Site CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
|
||
|
|
|
||
|
|
<!--- Component CSS -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/segment.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/divider.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
|
||
|
|
|
||
|
|
<!--- Example Libs -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
|
||
|
|
<script src="../assets/library/jquery.min.js"></script>
|
||
|
|
<script src="../assets/library/iframe-content.js"></script>
|
||
|
|
<script src="../assets/show-examples.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/popup.js"></script>
|
||
|
|
|
||
|
|
<!--- Component JS -->
|
||
|
|
<script type="text/javascript" src="../../dist/components/transition.js"></script>
|
||
|
|
<script type="text/javascript" src="../../dist/components/dropdown.js"></script>
|
||
|
|
|
||
|
|
<!--- Example CSS -->
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
.spaced > .button {
|
||
|
|
margin-bottom: 1em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!--- Example Javascript -->
|
||
|
|
<script>
|
||
|
|
$(document)
|
||
|
|
.ready(function() {
|
||
|
|
$('.ui.dropdown').dropdown();
|
||
|
|
|
||
|
|
$('.ui.buttons .dropdown.button').dropdown({
|
||
|
|
action: 'combo'
|
||
|
|
});
|
||
|
|
})
|
||
|
|
;
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="ui stackable equal width grid">
|
||
|
|
<div class="column">
|
||
|
|
<button class="ui button">Default</button>
|
||
|
|
<button class="ui primary button">Primary</button>
|
||
|
|
<button class="ui secondary button">Secondary</button>
|
||
|
|
<button class="ui basic button">Basic</button>
|
||
|
|
<button class="ui compact button">
|
||
|
|
Compact
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
<button class="ui icon button">
|
||
|
|
<i class="heart icon"></i>
|
||
|
|
</button>
|
||
|
|
<button class="ui labeled icon button">
|
||
|
|
<i class="heart icon"></i>
|
||
|
|
Labeled
|
||
|
|
</button>
|
||
|
|
<button class="ui right labeled icon button">
|
||
|
|
<i class="heart icon"></i>
|
||
|
|
Labeled
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
|
||
|
|
<div class="ui buttons">
|
||
|
|
<button class="ui button">Combo</button>
|
||
|
|
<div class="ui floating dropdown icon button">
|
||
|
|
<i class="dropdown icon"></i>
|
||
|
|
<div class="menu">
|
||
|
|
<div class="item">Choice 1</div>
|
||
|
|
<div class="item">Choice 2</div>
|
||
|
|
<div class="item">Choice 3</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui floating search dropdown button">
|
||
|
|
<span class="text">Search Dropdown</span>
|
||
|
|
<div class="menu">
|
||
|
|
<div class="item">Arabic</div>
|
||
|
|
<div class="item">Chinese</div>
|
||
|
|
<div class="item">Danish</div>
|
||
|
|
<div class="item">Dutch</div>
|
||
|
|
<div class="item">English</div>
|
||
|
|
<div class="item">French</div>
|
||
|
|
<div class="item">German</div>
|
||
|
|
<div class="item">Greek</div>
|
||
|
|
<div class="item">Hungarian</div>
|
||
|
|
<div class="item">Italian</div>
|
||
|
|
<div class="item">Japanese</div>
|
||
|
|
<div class="item">Korean</div>
|
||
|
|
<div class="item">Lithuanian</div>
|
||
|
|
<div class="item">Persian</div>
|
||
|
|
<div class="item">Polish</div>
|
||
|
|
<div class="item">Portuguese</div>
|
||
|
|
<div class="item">Russian</div>
|
||
|
|
<div class="item">Spanish</div>
|
||
|
|
<div class="item">Swedish</div>
|
||
|
|
<div class="item">Turkish</div>
|
||
|
|
<div class="item">Vietnamese</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
|
||
|
|
<div class="ui animated button" tabindex="0">
|
||
|
|
<div class="visible content">Horizontal</div>
|
||
|
|
<div class="hidden content">
|
||
|
|
Hidden
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui vertical animated button" tabindex="0">
|
||
|
|
<div class="visible content">Vertical</div>
|
||
|
|
<div class="hidden content">
|
||
|
|
Hidden
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui animated fade button" tabindex="0">
|
||
|
|
<div class="visible content">Fade In</div>
|
||
|
|
<div class="hidden content">
|
||
|
|
Hidden
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
<button class="ui disabled button">Disabled</button>
|
||
|
|
<button class="ui loading button">Loading</button>
|
||
|
|
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
|
||
|
|
<div class="ui buttons">
|
||
|
|
<button class="ui button">1</button>
|
||
|
|
<button class="ui button">2</button>
|
||
|
|
<button class="ui button">3</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui icon buttons">
|
||
|
|
<button class="ui button"><i class="align left icon"></i></button>
|
||
|
|
<button class="ui button"><i class="align center icon"></i></button>
|
||
|
|
<button class="ui button"><i class="align right icon"></i></button>
|
||
|
|
<button class="ui button"><i class="align justify icon"></i></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui buttons">
|
||
|
|
<button class="ui button">1</button>
|
||
|
|
<div class="or"></div>
|
||
|
|
<button class="ui button">2</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
|
||
|
|
<div class="ui two top attached buttons">
|
||
|
|
<div class="ui button">One</div>
|
||
|
|
<div class="ui button">Two</div>
|
||
|
|
</div>
|
||
|
|
<div class="ui attached segment">
|
||
|
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
|
||
|
|
</div>
|
||
|
|
<div class="ui two bottom attached buttons">
|
||
|
|
<div class="ui button">One</div>
|
||
|
|
<div class="ui button">Two</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<button class="ui mini button">Mini</button>
|
||
|
|
<button class="ui tiny button">Tiny</button>
|
||
|
|
<button class="ui small button">Small</button>
|
||
|
|
<button class="ui large button">Large</button>
|
||
|
|
<button class="ui big button">Big</button>
|
||
|
|
<button class="ui huge button">Huge</button>
|
||
|
|
<button class="ui massive button">Massive</button>
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
<div class="spaced">
|
||
|
|
<button class="yellow ui button">Yellow</button>
|
||
|
|
<button class="orange ui button">Orange</button>
|
||
|
|
<button class="green ui button">Green</button>
|
||
|
|
<button class="teal ui button">Teal</button>
|
||
|
|
<button class="blue ui button">Blue</button>
|
||
|
|
<button class="purple ui button">Purple</button>
|
||
|
|
<button class="pink ui button">Pink</button>
|
||
|
|
<button class="red ui button">Red</button>
|
||
|
|
<button class="black ui button">Black</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="ui divider"></div>
|
||
|
|
|
||
|
|
<div class="ui inverted segment">
|
||
|
|
<button class="ui inverted button">Inverted</button>
|
||
|
|
<button class="ui inverted basic button">Basic</button>
|
||
|
|
<button class="ui inverted blue button">Colored</button>
|
||
|
|
<button class="ui inverted blue basic button">Basic Colored</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|