@iroco/ui 0.16.0 → 0.18.0

package/lib/index.mjs.css

@@ -16,6 +16,21 @@ svg.svelte-1cuxg7m {
   to {
     transform: rotate(359deg); } }
 
+.data-table.svelte-1ju5y8t {
+  border: 1px solid #464452;
+  width: 100%; }
+
+.data-table__header.svelte-1ju5y8t {
+  font-size: 1.5em;
+  height: 4rem; }
+
+.data-table__header__cell.svelte-1ju5y8t {
+  border-bottom: 1px solid #464452; }
+
+.data-table__body__cell.svelte-1ju5y8t {
+  text-align: center;
+  vertical-align: middle; }
+
 .iroco-ui-radio.svelte-156c82q.svelte-156c82q.svelte-156c82q {
   color: #f2ebe3;
   position: relative;
@@ -133,45 +148,6 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   .navigation--mobile__title-container.svelte-lqwgm1 h1.svelte-lqwgm1 {
     padding-left: 0.5em; } }
 
-@use "colors";
-@use "containers";
-@use "fonts";
-@use "forms";
-@use "layouts";
-.data-table.svelte-1ju5y8t {
-  border: 1px solid #464452;
-  width: 100%; }
-
-.data-table__header.svelte-1ju5y8t {
-  font-size: 1.5em;
-  height: 4rem; }
-
-.data-table__header__cell.svelte-1ju5y8t {
-  border-bottom: 1px solid #464452; }
-
-.data-table__body__cell.svelte-1ju5y8t {
-  text-align: center;
-  vertical-align: middle; }
-
-.alert.svelte-itln7g {
-  min-height: 2em;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 0.3em;
-  padding: 0 1em 0 1em;
-  font-size: 1.2em;
-  justify-content: center;
-  margin-bottom: 1em;
-  cursor: pointer; }
-
-.alert--danger.svelte-itln7g {
-  background-color: rgba(255, 80, 77, 0.5);
-  border: 1px solid #ff504d; }
-
-.alert--success.svelte-itln7g {
-  background-color: rgba(0, 214, 146, 0.5);
-  border: 1px solid #00D692; }
-
 .container-wide.svelte-5qkkwb {
   width: calc(100% - 20px);
   max-width: 2360px;
@@ -563,3 +539,27 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
   .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
     padding: 2em;
     border-top: 1px solid #464452; } }
+
+@use "colors";
+@use "containers";
+@use "fonts";
+@use "forms";
+@use "layouts";
+.alert.svelte-itln7g {
+  min-height: 2em;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.3em;
+  padding: 0 1em 0 1em;
+  font-size: 1.2em;
+  justify-content: center;
+  margin-bottom: 1em;
+  cursor: pointer; }
+
+.alert--danger.svelte-itln7g {
+  background-color: rgba(255, 80, 77, 0.5);
+  border: 1px solid #ff504d; }
+
+.alert--success.svelte-itln7g {
+  background-color: rgba(0, 214, 146, 0.5);
+  border: 1px solid #00D692; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroco/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Iroco design system based on Svelte",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

package/scss/button.scss

@@ -28,6 +28,7 @@
   }
   &--success {
     background: colors.$green;
+    color: colors.$nightBlue;
   }
   &--danger {
     background: colors.$red;

package/scss/iroco.scss

@@ -16,6 +16,7 @@ button {
   outline: none;
   text-decoration: none;
   font-size: 14px;
+  color: colors.$beige;
 }
 
 html {

package/src/NavBar.svelte

@@ -30,9 +30,12 @@
 				<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
-				>
+					{item.name}
+				</a>
 			</li>
 		{/each}
 	</ul>
@@ -42,6 +45,8 @@
 	@use '../scss/colors';
 	@use '../scss/constants';
 	@import '../scss/containers';
+	@import '../scss/button';
+	@import '../scss/iroco';
 
 	.nav {
 		&__sidebar,
@@ -52,9 +57,8 @@
 				display: block;
 			}
 			&__item a {
-				color: colors.$beige;
 				font-size: 2em;
-
+				text-transform: uppercase;
 			}
 			&__close {
 				display: none;
@@ -91,6 +95,7 @@
 			flex-grow: 1;
 			display: flex;
 			justify-content: flex-end;
+			transform: translateY(0.3em);
 			ul,
 			li {
 				display: inline;

package/src/definition.ts

@@ -1,17 +1,14 @@
 export class NavigationItem  {
     hrefOrCallback: string|(() => void);
     name: string;
+    button: boolean;
     
-    constructor (name: string, hrefOrCallback: string|(() => void)) {
+    constructor (name: string, hrefOrCallback: string|(() => void), button=  false) {
       this.hrefOrCallback = hrefOrCallback;
       this.name = name;
+      this.button = button
     }
-
-    isButton(): boolean {
-      return typeof this.hrefOrCallback === 'function'
-    }
-};
-
+}
 
 export enum ButtonKind {
     REGULAR = "regular",

package/src/index.ts

@@ -16,5 +16,6 @@ export { default as IconTrashCan } from './IconTrashCan.svelte'
 export { default as Alert } from './Alert.svelte'
 export { default as IconIrocoLogo } from './IconIrocoLogo.svelte'
 export { default as IrocoLogo } from './IrocoLogo.svelte'
+export * from './definition'
 
 

package/lib/button.scss

@@ -1,60 +0,0 @@
-@use '../scss/colors';
-@use '../scss/fonts';
-@use '../scss/containers';
-@use '../scss/constants';
-
-.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: constants.$border-radius;
-
-  &--basic {
-    background: colors.$beige;
-    border: 1px solid colors.$nightBlue;
-  }
-  &--dark {
-    background: colors.$nightBlue;
-    color: colors.$beige;
-  }
-  &--success {
-    background: colors.$green;
-  }
-  &--danger {
-    background: colors.$red;
-  }
-  &--regular {
-    padding: 1em 2em;
-  }
-  &--small {
-    padding: 0.5em 1em;
-  }
-
-  &--basic:hover, &--success:hover, &--danger:hover {
-    box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
-  }
-  &--dark:hover {
-    box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
-  }
-
-  &:active {
-    box-shadow: none;
-  }
-
-  &.disabled {
-    background-color: colors.$lightGrey;
-    cursor: default;
-    &:hover {
-      box-shadow: none;
-    }
-  }
-}