#onBrand: Creating a Design System for Shiny and RMarkdown

---

---

---

---

---

---

---

---

---

---

---

.absolute-shiny-button[
<button type="button" class="btn btn-outline-dark" style="height:80px;width: 135px;">TEXT</button>
]

---

.absolute-shiny-button[
<button type="button" class="btn btn-outline-dark" style="height:80px;width: 135px;">TEXT</button>
]

.absolute-button[
<button class="btn btn-default action-button maya-btn maya-primary-btn ripple" id="primary" type="button">TEXT</button>
]

---

---

---

---

---

---

.absolute-text-input[
<div class="form-group shiny-input-container maya-input">
<input id="test" type="text" class="form-control" value=""/>
<label class="control-label" id="test-label" for="test">test</label>
</div>
]

.absolute-tab-input[
<div class="Panel">
	<nav>
		<ul class="Tabs">
			<li class="Tabs__tab active Tab"><a>TAB</a></li>
			<li class="Tabs__tab Tab"><a>TAB</a></li>
			<li class="Tabs__tab Tab"><a>TAB</a></li>
			<li class="Tabs__presentation-slider" role="presentation"></li>
		</ul>
	</nav>
</div>
]

Array.prototype.forEach.call(tabs, function(tab) {
	tab.addEventListener('click', setActiveClass);
});

function setActiveClass(evt) {
	Array.prototype.forEach.call(tabs, function(tab) {
		tab.classList.remove('active');
	});
	
	evt.currentTarget.classList.add('active');
}
</script>

.Tab > a {
	 display: block;
	 padding: 10px 12px;
	 text-decoration: none;
	 color: darkgray;
	 transition: color 0.15s;
}
 .Tab.active > a {
	 color: var(--primary);
	 text-decoration: none;
}
 .Tab:hover > a {
	 color: var(--primary);
	 background-color: var(--secondary);
	 text-decoration: none;
}
</style>

---

---

---

:root {
  --font: Poppins !important;
  --primary: #E91E63 !important;
  --secondary: #FCE4EC !important;
}

.absolute-button {
  position: absolute;
  left: 120px;
  font: var(--primary);
  bottom: 90px;
}

.absolute-button button {
  font-size: 2rem !important;
  font: var(--primary);
}

.absolute-text-input {
    width: 300px;
    position: absolute;
    right: 45px;
    top: 100px;
    font: var(--primary);
}

.absolute-tab-input {
    width: 300px;
    position: absolute;
    right: 45px;
    bottom: 150px;
}

.link-to-github {
  position: absolute;
  top: 150px;
  left: 165px;
  height: 500px;
  width: 950px;
}

.absolute-default-button {
  position: absolute;
  top: 115px;
  left: 120px;
}

.btn-outline-dark {
    color: black;
    background-color: white;
    background-image: none;
    border-color: darkgrey;
}

.btn-outline-dark:hover {
  background: darkgrey;
}

.absolute-shiny-button {
    top: 315px;
    left: 120px;
    position: absolute;
}

</style>