ddm-dropdown
Version:
Dropdown component used in Deseret Digital projects.
72 lines (59 loc) • 1.45 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Example</title>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="dropdown.js"></script>
<style>
* {
box-sizing: border-box;
}
.dropdown-row {
background-color: #0b162f;
color: #fff;
}
.dropdown-row .ddm-dropdown__toggle {
padding: 10px;
height: 100%;
}
.dropdown-row .ddm-dropdown__body {
background-color: #5b92f4;
}
.dropdown-row .ddm-dropdown__toggle--with-arrow:before {
border-bottom-color: #5b92f4;
}
.dropdown-row .ddm-dropdown__menu,
.menu {
list-style-type: none;
padding: 10px;
margin: 0;
}
.dropdown-row .ddm-dropdown__menu > li,
.menu > li {
padding: 4px 0;
}
.dropdown--cart .ddm-dropdown__body {
width: auto;
}
.dropdown--cart .ddm-dropdown__body li {
white-space: nowrap;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>React Dropdown Test</h1>
<div id="dropdownTest"></div>
<p>Hello, I'm a fancy paragraph.</p>
<script src="demo.js"></script>
</body>
</html>