@iroco/ui 0.21.0 → 0.50.0

package/NavBar.svelte

@@ -0,0 +1,669 @@
+<script>import IconClose from "./IconClose.svelte";
+import { createEventDispatcher } from "svelte";
+import { navigating } from "$app/stores";
+export let navigationItems;
+export let type;
+let active;
+const dispatch = createEventDispatcher();
+const handleClickLink = (menuItem) => {
+  if (typeof menuItem.hrefOrCallback === "function") {
+    menuItem.hrefOrCallback();
+    return false;
+  }
+  dispatch("click_link");
+};
+function isActive(current, item) {
+  if (typeof item.hrefOrCallback === "string") {
+    return item.hrefOrCallback === current;
+  }
+  return false;
+}
+$:
+  if ($navigating)
+    active = $navigating.to.url.pathname;
+</script>
+
+<nav data-testid={type} class="nav__{type}">
+	<button on:click class="nav__{type}__close">
+		<IconClose width="3em" height="3em" />
+	</button>
+
+	<ul class="nav__{type}__item-container">
+		{#each navigationItems as item}
+			<li class="nav__{type}__item" class:active={isActive(active, item)}>
+				<a
+					on:click={() => handleClickLink(item)}
+					href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
+					class:iroco-ui-button={item.button}
+					class:iroco-ui-button--small={item.button}
+					class:iroco-ui-button--success={item.button}
+				>
+					{item.name}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</nav>
+
+<style>.font-color-blue {
+  color: #00b9ff;
+}
+
+.font-color-darkBlue {
+  color: #211d28;
+}
+
+.font-color-nightBlue {
+  color: #18151e;
+}
+
+.font-color-green {
+  color: #00d692;
+}
+
+.font-color-red {
+  color: #ff504d;
+}
+
+.font-color-yellow {
+  color: #ffe032;
+}
+
+.font-color-beige {
+  color: #f2ebe3;
+}
+
+.font-color-darkBeige {
+  color: #a9a29e;
+}
+
+.font-color-mediumGrey {
+  color: #464452;
+}
+
+.font-color-darkGrey {
+  color: #33323a;
+}
+
+.font-color-lightGrey {
+  color: #f5f5f5;
+}
+
+.container-wide {
+  width: calc(100% - 20px);
+  max-width: 2360px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 2560px) {
+  .container-wide {
+    max-width: 1620px;
+  }
+}
+
+@media all and (max-width: 1800px) {
+  .container-wide {
+    max-width: 1280px;
+  }
+}
+
+@media all and (max-width: 1440px) {
+  .container-wide {
+    max-width: 884px;
+  }
+}
+
+@media all and (max-width: 1024px) {
+  .container-wide {
+    max-width: 648px;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .container-wide {
+    max-width: 496px;
+  }
+}
+
+@media all and (max-width: 596px) {
+  .container-wide {
+    max-width: 365px;
+  }
+}
+
+@media all and (max-width: 425px) {
+  .container-wide {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-wide {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-wide {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.container-large {
+  width: calc(100% - 20px);
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 1440px) {
+  .container-large {
+    max-width: 884px;
+  }
+}
+
+@media all and (max-width: 1024px) {
+  .container-large {
+    max-width: 648px;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .container-large {
+    max-width: 496px;
+  }
+}
+
+@media all and (max-width: 596px) {
+  .container-large {
+    max-width: 365px;
+  }
+}
+
+@media all and (max-width: 425px) {
+  .container-large {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-large {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-large {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.container-medium {
+  width: calc(100% - 20px);
+  max-width: 884px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 1024px) {
+  .container-medium {
+    max-width: 648px;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .container-medium {
+    max-width: 496px;
+  }
+}
+
+@media all and (max-width: 596px) {
+  .container-medium {
+    max-width: 365px;
+  }
+}
+
+@media all and (max-width: 425px) {
+  .container-medium {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-medium {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-medium {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.container-small {
+  width: calc(100% - 20px);
+  max-width: 496px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 425px) {
+  .container-small {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-small {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-small {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.font-color-blue {
+  color: #00b9ff;
+}
+
+.font-color-darkBlue {
+  color: #211d28;
+}
+
+.font-color-nightBlue {
+  color: #18151e;
+}
+
+.font-color-green {
+  color: #00d692;
+}
+
+.font-color-red {
+  color: #ff504d;
+}
+
+.font-color-yellow {
+  color: #ffe032;
+}
+
+.font-color-beige {
+  color: #f2ebe3;
+}
+
+.font-color-darkBeige {
+  color: #a9a29e;
+}
+
+.font-color-mediumGrey {
+  color: #464452;
+}
+
+.font-color-darkGrey {
+  color: #33323a;
+}
+
+.font-color-lightGrey {
+  color: #f5f5f5;
+}
+
+.container-wide {
+  width: calc(100% - 20px);
+  max-width: 2360px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 2560px) {
+  .container-wide {
+    max-width: 1620px;
+  }
+}
+
+@media all and (max-width: 1800px) {
+  .container-wide {
+    max-width: 1280px;
+  }
+}
+
+@media all and (max-width: 1440px) {
+  .container-wide {
+    max-width: 884px;
+  }
+}
+
+@media all and (max-width: 1024px) {
+  .container-wide {
+    max-width: 648px;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .container-wide {
+    max-width: 496px;
+  }
+}
+
+@media all and (max-width: 596px) {
+  .container-wide {
+    max-width: 365px;
+  }
+}
+
+@media all and (max-width: 425px) {
+  .container-wide {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-wide {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-wide {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.container-large {
+  width: calc(100% - 20px);
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 1440px) {
+  .container-large {
+    max-width: 884px;
+  }
+}
+
+@media all and (max-width: 1024px) {
+  .container-large {
+    max-width: 648px;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .container-large {
+    max-width: 496px;
+  }
+}
+
+@media all and (max-width: 596px) {
+  .container-large {
+    max-width: 365px;
+  }
+}
+
+@media all and (max-width: 425px) {
+  .container-large {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-large {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-large {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.container-medium {
+  width: calc(100% - 20px);
+  max-width: 884px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 1024px) {
+  .container-medium {
+    max-width: 648px;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .container-medium {
+    max-width: 496px;
+  }
+}
+
+@media all and (max-width: 596px) {
+  .container-medium {
+    max-width: 365px;
+  }
+}
+
+@media all and (max-width: 425px) {
+  .container-medium {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-medium {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-medium {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.container-small {
+  width: calc(100% - 20px);
+  max-width: 496px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms;
+}
+
+@media all and (max-width: 425px) {
+  .container-small {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media all and (max-width: 375px) {
+  .container-small {
+    max-width: calc(100% - 40px);
+  }
+}
+
+@media all and (max-width: 320px) {
+  .container-small {
+    max-width: calc(100% - 20px);
+  }
+}
+
+.iroco-ui-button {
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: none;
+  flex-shrink: 0;
+  margin: 1em 0em;
+  position: relative;
+  text-transform: uppercase;
+  border-radius: 0.3em;
+}
+
+.iroco-ui-button--basic {
+  background: #f2ebe3;
+  border: 1px solid #18151e;
+}
+
+.iroco-ui-button--dark {
+  background: #18151e;
+  color: #f2ebe3;
+}
+
+.iroco-ui-button--success {
+  background: #00d692;
+  color: #18151e;
+}
+
+.iroco-ui-button--danger {
+  background: #ff504d;
+}
+
+.iroco-ui-button--regular {
+  padding: 1em 2em;
+}
+
+.iroco-ui-button--small {
+  padding: 0.5em 1em;
+}
+
+.iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
+  box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
+}
+
+.iroco-ui-button--dark:hover {
+  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
+}
+
+.iroco-ui-button:active {
+  box-shadow: none;
+}
+
+.iroco-ui-button.disabled {
+  background-color: #f5f5f5;
+  cursor: default;
+}
+
+.iroco-ui-button.disabled:hover {
+  box-shadow: none;
+}
+
+.nav__sidebar__item, .nav__topbar__item {
+  text-decoration: none;
+  display: block;
+  font-size: 1em;
+}
+
+.nav__sidebar__close, .nav__topbar__close {
+  display: none;
+}
+
+.nav__sidebar {
+  height: 100%;
+  width: 300px;
+  position: absolute;
+  top: 4.45em;
+  left: 0;
+  overflow-x: hidden;
+}
+
+.nav__sidebar__item-container {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.nav__sidebar__item {
+  padding: 2em;
+  border-top: 1px solid #464452;
+}
+
+.nav__sidebar__item:first-child {
+  border-top: none;
+}
+
+.nav__sidebar .active {
+  border-top: 1px solid #00d692;
+  border-bottom: 1px solid #00d692;
+}
+
+.nav__topbar {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.nav__topbar ul,
+.nav__topbar li {
+  display: inline;
+}
+
+.nav__topbar ul {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-around;
+}
+
+.nav__topbar .active {
+  border-bottom: 1px solid #00d692;
+}
+
+@media all and (max-width: 768px) {
+  .nav__sidebar, .nav__topbar {
+    position: fixed;
+    background-color: #211d28;
+    top: 0;
+    right: 0;
+    width: 100%;
+    padding: 0;
+    padding-top: 2em;
+    margin: 0;
+    border-right: none;
+  }
+  .nav__sidebar__item-container, .nav__topbar__item-container {
+    padding: 0em;
+    margin-top: 2rem;
+  }
+  .nav__sidebar ul,
+  .nav__sidebar li, .nav__topbar ul,
+  .nav__topbar li {
+    display: block;
+  }
+  .nav__sidebar__close, .nav__topbar__close {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: transparent;
+    border: none;
+    color: #a9a29e;
+  }
+  .nav__sidebar {
+    top: 0;
+    left: 0;
+  }
+  .nav__sidebar__item:first-child {
+    border-top: 1px solid #464452;
+  }
+  .nav__topbar {
+    height: 100%;
+  }
+  .nav__topbar__item {
+    padding: 2em;
+    border-top: 1px solid #464452;
+  }
+}</style>

package/NavBar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NavigationItem } from './definition';
+declare const __propDef: {
+    props: {
+        navigationItems: Array<NavigationItem>;
+        type: 'sidebar' | 'topbar';
+    };
+    events: {
+        click: MouseEvent;
+        click_link: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NavBarProps = typeof __propDef.props;
+export type NavBarEvents = typeof __propDef.events;
+export type NavBarSlots = typeof __propDef.slots;
+export default class NavBar extends SvelteComponentTyped<NavBarProps, NavBarEvents, NavBarSlots> {
+}
+export {};