@iroco/ui 0.14.0 → 0.15.0

package/lib/index.mjs.css

@@ -1,3 +1,6 @@
+svg.svelte-1cuxg7m {
+  overflow: visible; }
+
 .rotate.svelte-1dns1yx {
   animation: svelte-1dns1yx-rotation 2s; }
 
@@ -13,24 +16,6 @@
   to {
     transform: rotate(359deg); } }
 
-svg.svelte-1cuxg7m {
-  overflow: visible; }
-
-.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;
@@ -104,7 +89,7 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
   padding-bottom: 10px;
   display: inline-block; }
 
-.container-wide.svelte-a1s5q9 {
+.container-wide.svelte-j4wwy {
   width: calc(100% - 20px);
   max-width: 2360px;
   margin-left: auto;
@@ -112,42 +97,42 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 2560px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: 1620px; } }
 
 @media all and (max-width: 1800px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: 1280px; } }
 
 @media all and (max-width: 1440px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: 884px; } }
 
 @media all and (max-width: 1024px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: 648px; } }
 
 @media all and (max-width: 768px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: 496px; } }
 
 @media all and (max-width: 596px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: 365px; } }
 
 @media all and (max-width: 425px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-wide.svelte-a1s5q9 {
+  .container-wide.svelte-j4wwy {
     max-width: calc(100% - 20px); } }
 
-.container-large.svelte-a1s5q9 {
+.container-large.svelte-j4wwy {
   width: calc(100% - 20px);
   max-width: 1280px;
   margin-left: auto;
@@ -155,34 +140,34 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 1440px) {
-  .container-large.svelte-a1s5q9 {
+  .container-large.svelte-j4wwy {
     max-width: 884px; } }
 
 @media all and (max-width: 1024px) {
-  .container-large.svelte-a1s5q9 {
+  .container-large.svelte-j4wwy {
     max-width: 648px; } }
 
 @media all and (max-width: 768px) {
-  .container-large.svelte-a1s5q9 {
+  .container-large.svelte-j4wwy {
     max-width: 496px; } }
 
 @media all and (max-width: 596px) {
-  .container-large.svelte-a1s5q9 {
+  .container-large.svelte-j4wwy {
     max-width: 365px; } }
 
 @media all and (max-width: 425px) {
-  .container-large.svelte-a1s5q9 {
+  .container-large.svelte-j4wwy {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-large.svelte-a1s5q9 {
+  .container-large.svelte-j4wwy {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-large.svelte-a1s5q9 {
+  .container-large.svelte-j4wwy {
     max-width: calc(100% - 20px); } }
 
-.container-medium.svelte-a1s5q9 {
+.container-medium.svelte-j4wwy {
   width: calc(100% - 20px);
   max-width: 884px;
   margin-left: auto;
@@ -190,30 +175,30 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 1024px) {
-  .container-medium.svelte-a1s5q9 {
+  .container-medium.svelte-j4wwy {
     max-width: 648px; } }
 
 @media all and (max-width: 768px) {
-  .container-medium.svelte-a1s5q9 {
+  .container-medium.svelte-j4wwy {
     max-width: 496px; } }
 
 @media all and (max-width: 596px) {
-  .container-medium.svelte-a1s5q9 {
+  .container-medium.svelte-j4wwy {
     max-width: 365px; } }
 
 @media all and (max-width: 425px) {
-  .container-medium.svelte-a1s5q9 {
+  .container-medium.svelte-j4wwy {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-medium.svelte-a1s5q9 {
+  .container-medium.svelte-j4wwy {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-medium.svelte-a1s5q9 {
+  .container-medium.svelte-j4wwy {
     max-width: calc(100% - 20px); } }
 
-.container-small.svelte-a1s5q9 {
+.container-small.svelte-j4wwy {
   width: calc(100% - 20px);
   max-width: 496px;
   margin-left: auto;
@@ -221,18 +206,18 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
   transition: max-width ease-out 200ms; }
 
 @media all and (max-width: 425px) {
-  .container-small.svelte-a1s5q9 {
+  .container-small.svelte-j4wwy {
     max-width: calc(100% - 60px); } }
 
 @media all and (max-width: 375px) {
-  .container-small.svelte-a1s5q9 {
+  .container-small.svelte-j4wwy {
     max-width: calc(100% - 40px); } }
 
 @media all and (max-width: 320px) {
-  .container-small.svelte-a1s5q9 {
+  .container-small.svelte-j4wwy {
     max-width: calc(100% - 20px); } }
 
-.iroco-ui-button.svelte-a1s5q9 {
+.iroco-ui-button.svelte-j4wwy {
   cursor: pointer;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -241,116 +226,227 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
   -ms-user-select: none;
   user-select: none;
   border: none;
-  border-radius: 0.5em;
   flex-shrink: 0;
   margin: 1em 0em;
-  position: relative; }
+  position: relative;
+  text-transform: uppercase; }
 
-.iroco-ui-button--basic.svelte-a1s5q9 {
+.iroco-ui-button--basic.svelte-j4wwy {
   background: #f2ebe3;
-  color: #a9a29e;
   border: 1px solid #18151E; }
 
-.iroco-ui-button--success.svelte-a1s5q9 {
+.iroco-ui-button--dark.svelte-j4wwy {
+  background: #18151E;
+  color: #f2ebe3; }
+
+.iroco-ui-button--success.svelte-j4wwy {
   background: #00D692; }
 
-.iroco-ui-button--danger.svelte-a1s5q9 {
-  background: #ff504d;
-  color: #f2ebe3; }
+.iroco-ui-button--danger.svelte-j4wwy {
+  background: #ff504d; }
+
+.iroco-ui-button--regular.svelte-j4wwy {
+  padding: 1em 2em; }
 
-.iroco-ui-button--regular.svelte-a1s5q9 {
-  padding: 1em; }
+.iroco-ui-button--small.svelte-j4wwy {
+  padding: 0.5em 1em; }
 
-.iroco-ui-button--small.svelte-a1s5q9 {
-  padding: 0.5em; }
+.iroco-ui-button--basic.svelte-j4wwy:hover, .iroco-ui-button--success.svelte-j4wwy:hover, .iroco-ui-button--danger.svelte-j4wwy:hover {
+  box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2); }
 
-.iroco-ui-button.svelte-a1s5q9:active {
-  background: #f5f5f5; }
+.iroco-ui-button--dark.svelte-j4wwy:hover {
+  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2); }
 
-.iroco-ui-button.disabled.svelte-a1s5q9 {
+.iroco-ui-button.svelte-j4wwy:active {
+  box-shadow: none; }
+
+.iroco-ui-button.disabled.svelte-j4wwy {
   background-color: #f5f5f5;
   cursor: default; }
 
-.iroco-ui-button.rounded.svelte-a1s5q9 {
-  border-radius: 10px; }
+.iroco-ui-button.disabled.svelte-j4wwy:hover {
+  box-shadow: none; }
 
-.account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
-  display: block;
-  width: 100%;
-  border-bottom: 1px solid #464452; }
+.container-wide.svelte-1c8sozl.svelte-1c8sozl {
+  width: calc(100% - 20px);
+  max-width: 2360px;
+  margin-left: auto;
+  margin-right: auto;
+  transition: max-width ease-out 200ms; }
 
-.account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
-  display: none; }
+@media all and (max-width: 2560px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 1620px; } }
 
-.account__navigation__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
-  display: flex;
-  align-items: center;
-  padding-left: 1em; }
+@media all and (max-width: 1800px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 1280px; } }
 
-.account__navigation__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
-  padding-left: 1em; }
+@media all and (max-width: 1440px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 884px; } }
+
+@media all and (max-width: 1024px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 648px; } }
 
 @media all and (max-width: 768px) {
-  .account__navigation.svelte-1uu9ytm.svelte-1uu9ytm {
-    display: none;
-    color: #f2ebe3; }
-  .account__navigation--mobile.svelte-1uu9ytm.svelte-1uu9ytm {
-    display: flex;
-    padding: 0 1em;
-    justify-content: space-between;
-    position: fixed;
-    top: 0;
-    z-index: 1;
-    width: 100%;
-    border-bottom: 1px solid #464452; }
-  .account__navigation--mobile.svelte-1uu9ytm h1.svelte-1uu9ytm {
-    font: bold;
-    font-size: 2em; }
-  .account__navigation--mobile__button.svelte-1uu9ytm.svelte-1uu9ytm {
-    background-color: transparent;
-    border: none;
-    color: #464452; }
-  .account__navigation--mobile__title-container.svelte-1uu9ytm.svelte-1uu9ytm {
-    display: flex;
-    align-items: center; }
-  .account__navigation--mobile__title-container.svelte-1uu9ytm h1.svelte-1uu9ytm {
-    padding-left: 0.5em; } }
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 496px; } }
 
-.account__sidebar.svelte-12quws1.svelte-12quws1 {
+@media all and (max-width: 596px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 365px; } }
+
+@media all and (max-width: 425px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-wide.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 20px); } }
+
+.container-large.svelte-1c8sozl.svelte-1c8sozl {
+  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.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 884px; } }
+
+@media all and (max-width: 1024px) {
+  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 648px; } }
+
+@media all and (max-width: 768px) {
+  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 496px; } }
+
+@media all and (max-width: 596px) {
+  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 365px; } }
+
+@media all and (max-width: 425px) {
+  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-large.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 20px); } }
+
+.container-medium.svelte-1c8sozl.svelte-1c8sozl {
+  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.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 648px; } }
+
+@media all and (max-width: 768px) {
+  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 496px; } }
+
+@media all and (max-width: 596px) {
+  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: 365px; } }
+
+@media all and (max-width: 425px) {
+  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-medium.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 20px); } }
+
+.container-small.svelte-1c8sozl.svelte-1c8sozl {
+  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.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 60px); } }
+
+@media all and (max-width: 375px) {
+  .container-small.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 40px); } }
+
+@media all and (max-width: 320px) {
+  .container-small.svelte-1c8sozl.svelte-1c8sozl {
+    max-width: calc(100% - 20px); } }
+
+.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
+  text-decoration: none;
+  font-size: 0.75em;
+  display: block; }
+
+.nav__sidebar__item.svelte-1c8sozl a.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl a.svelte-1c8sozl {
+  color: #f2ebe3;
+  font-size: 2em; }
+
+.nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
+  display: none; }
+
+.nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
   height: 100%;
   width: 300px;
   position: absolute;
-  overflow-x: hidden;
-  border-right: 1px solid #464452; }
+  top: 4.45em;
+  left: 0;
+  overflow-x: hidden; }
 
-.account__sidebar__item_container.svelte-12quws1.svelte-12quws1 {
+.nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%; }
 
-.account__sidebar__item.svelte-12quws1.svelte-12quws1 {
-  padding: 2em 2em;
-  text-decoration: none;
-  font-size: 0.75em;
-  display: block;
-  border-top: 1px solid #464452;
-  border-bottom: 1px solid #464452 a;
-  border-bottom-padding-left: 1em; }
-
-.account__sidebar__item.svelte-12quws1 a.svelte-12quws1 {
-  color: #f2ebe3;
-  font-size: 2em; }
+.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl {
+  padding: 2em;
+  border-top: 1px solid #464452; }
 
-.account__sidebar__close.svelte-12quws1.svelte-12quws1 {
-  display: none; }
+.nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
+  border-top: none; }
 
-.account__sidebar.svelte-12quws1 .active.svelte-12quws1 {
+.nav__sidebar.svelte-1c8sozl .active.svelte-1c8sozl {
   border-top: 1px solid #00D692;
   border-bottom: 1px solid #00D692; }
 
+.nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end; }
+
+.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
+  display: inline; }
+
+.nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-around; }
+
 @media all and (max-width: 768px) {
-  .account__sidebar.svelte-12quws1.svelte-12quws1 {
+  .nav__sidebar.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
     position: fixed;
     background-color: #211D28;
     top: 0;
@@ -360,23 +456,50 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
     padding-top: 2em;
     margin: 0;
     border-right: none; }
-  .account__sidebar__item_container.svelte-12quws1.svelte-12quws1 {
+  .nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item-container.svelte-1c8sozl.svelte-1c8sozl {
     padding: 0em;
     margin-top: 2rem; }
-  .account__sidebar__close.svelte-12quws1.svelte-12quws1 {
+  .nav__sidebar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__sidebar.svelte-1c8sozl li.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
+    display: block; }
+  .nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
     display: block;
     position: absolute;
     right: 0;
     top: 0;
     background-color: transparent;
     border: none;
-    color: #a9a29e; } }
+    color: #a9a29e; }
+  .nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
+    top: 0;
+    left: 0; }
+  .nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
+    border-top: 1px solid #464452; }
+  .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
+    height: 100%; }
+  .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
+    padding: 2em;
+    border-top: 1px solid #464452; } }
 
 @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-1oun6o6 {
   min-height: 2em;
   display: inline-flex;
@@ -395,3 +518,47 @@ input.svelte-11iawkb.svelte-11iawkb:focus {
 .alert--success.svelte-1oun6o6 {
   background-color: rgba(0, 214, 146, 0.5);
   border: 1px solid #00D692; }
+
+.navigation.svelte-lqwgm1.svelte-lqwgm1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid #464452; }
+
+.navigation--mobile.svelte-lqwgm1.svelte-lqwgm1 {
+  display: none; }
+
+.navigation__title-container.svelte-lqwgm1.svelte-lqwgm1 {
+  display: flex;
+  align-items: center;
+  padding-left: 1em; }
+
+.navigation__title-container.svelte-lqwgm1 h1.svelte-lqwgm1 {
+  padding-left: 1em; }
+
+@media all and (max-width: 768px) {
+  .navigation.svelte-lqwgm1.svelte-lqwgm1 {
+    display: none;
+    color: #f2ebe3; }
+  .navigation--mobile.svelte-lqwgm1.svelte-lqwgm1 {
+    display: flex;
+    padding: 0 1em;
+    justify-content: space-between;
+    position: fixed;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    border-bottom: 1px solid #464452; }
+  .navigation--mobile.svelte-lqwgm1 h1.svelte-lqwgm1 {
+    font-size: 2em; }
+  .navigation--mobile__button.svelte-lqwgm1.svelte-lqwgm1 {
+    background-color: transparent;
+    border: none;
+    color: #464452; }
+  .navigation--mobile__title-container.svelte-lqwgm1.svelte-lqwgm1 {
+    display: flex;
+    align-items: center; }
+  .navigation--mobile__title-container.svelte-lqwgm1 h1.svelte-lqwgm1 {
+    padding-left: 0.5em; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroco/ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Iroco design system based on Svelte",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -60,7 +60,7 @@
     "eslint-plugin-svelte3": "^3.2.1",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.2",
-    "jest": "^27.0.4",
+    "jest": "^26.6.3",
     "lint-staged": "^11.1.2",
     "npm-watch": "^0.10.0",
     "prettier": "^2.3.1",
@@ -74,7 +74,8 @@
     "svelte": "^3.38.2",
     "svelte-jester": "^1.7.0",
     "svelte-preprocess": "^4.7.3",
-    "ts-jest": "^27.0.3",
+    "ts-jest": "^26.5.5",
+    "node-sass": "^7.0.1",
     "typescript": "^4.3.3"
   },
   "peerDependencies": {

package/src/Button.svelte

@@ -3,7 +3,6 @@
 	export let disabled = false;
 	export let kind: 'danger' | 'success' | 'dark' | 'basic' = 'basic';
 	export let size: 'small' | 'regular' = 'regular';
-	export let rounded = false;
 	export let id:string ;
 	export let node: HTMLElement ;
 </script>
@@ -12,7 +11,6 @@
 	{id}
 	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind}`}
 	class:disabled
-	class:rounded
 	{type}
 	{disabled}
 	on:click
@@ -35,44 +33,50 @@
 		-ms-user-select: none;
 		user-select: none;
 		border: none;
-		border-radius: 0.5em;
 		flex-shrink: 0;
 		margin: 1em 0em;
 		position: relative;
+		text-transform: uppercase;
 
 		&--basic {
 			background: colors.$beige;
-			color: colors.$darkBeige;
 			border: 1px solid colors.$nightBlue;
 		}
 		&--dark {
 			background: colors.$nightBlue;
+			color: colors.$beige;
 		}
 		&--success {
 			background: colors.$green;
 		}
 		&--danger {
 			background: colors.$red;
-			color: colors.$beige;
 		}
 		&--regular {
-			padding: 1em;
+			padding: 1em 2em;
 		}
 		&--small {
-			padding: 0.5em;
+			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 {
-			background: colors.$lightGrey;
+			box-shadow: none;
 		}
 
 		&.disabled {
 			background-color: colors.$lightGrey;
 			cursor: default;
-		}
-
-		&.rounded {
-			border-radius: 10px;
+			&:hover {
+				box-shadow: none;
+			}
 		}
 	}
+
 </style>