@infonomic/uikit 2.0.0 → 2.1.0

package/src/styles/components/checkbox.css

@@ -0,0 +1,55 @@
+/* Define keyframes for the "checked" state */
+@keyframes checkBoxIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+    /* Overshoot */
+  }
+
+  80% {
+    transform: scale(0.9);
+    /* Slight bounce back */
+  }
+
+  100% {
+    transform: scale(1);
+    /* Settle */
+  }
+}
+
+/* Define keyframes for the "unchecked" state */
+@keyframes checkBoxOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+.component--checkbox,
+.component--checkbox-icon {
+  transition: all ease-in-out 200ms;
+}
+
+/* Style for the "checked" state */
+.component--checkbox-indicator[data-state="checked"] .component--checkbox-icon {
+  animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Style for the "unchecked" state */
+.component--checkbox-indicator[data-state="unchecked"] .component--checkbox-icon {
+  animation: checkBoxOut 0.2s ease-in;
+  opacity: 0;
+  transform: scale(0.8);
+}

package/src/styles/components/components.css

@@ -0,0 +1,11 @@
+@import "./icon-element.css";
+@import "./scroll-to-top.css";
+@import "./hamburger.css";
+@import "./list-checkbox.css";
+@import "./loaders.css";
+@import "./fade-in-lift.css";
+@import "./checkbox.css";
+@import "./card.css";
+@import "./toast.css";
+@import "./popover.css";
+@import "./dropdown.css";

package/src/styles/components/directional-button.css

@@ -0,0 +1,92 @@
+.component--directional-button {
+  display: flex;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  text-decoration: none;
+  border-style: none;
+  border-radius: 20px;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  z-index: 20;
+  justify-content: center;
+  color: white;
+  background-color: var(--primary-500);
+  transition-property: all, color;
+  transition-duration: 0.3s, 1ms;
+  transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
+  transition-delay: 0s, 0s;
+  cursor: pointer;
+}
+
+.component--directional-button span {
+  width: 18px;
+  padding-bottom: 3px;
+}
+
+.component--directional-button span .icon path {
+  stroke: none;
+  fill: white;
+}
+
+@media screen and (min-width: 587px) {
+  .component--directional-button {
+    width: 42px;
+    height: 42px;
+    border-radius: 21px;
+  }
+}
+
+.component--directional-button:hover,
+.component--directional-button:focus {
+  color: white;
+  background-color: var(--primary-500);
+  transform: translateY(-5px);
+}
+
+/* Up is default so no need to rotate */
+.component--directional-button.up:hover,
+.component--directional-button.up:focus {
+  transform: translateY(-5px);
+}
+
+.component--directional-button.down span,
+.directional-button.down span {
+  transform: rotate(180deg);
+}
+
+.component--directional-button.down:hover,
+.component--directional-button.down:focus {
+  transform: translateY(5px);
+}
+
+.component--directional-button.left span,
+.component--directional-button.left span {
+  transform: rotate(-90deg);
+}
+
+.component--directional-button.left:hover,
+.component--directional-button.left:focus {
+  transform: translateX(-5px);
+}
+
+.component--directional-button.right span,
+.component--directional-button.right span {
+  transform: rotate(90deg);
+}
+
+.component--directional-button.right:hover,
+.component--directional-button.right:focus {
+  transform: translateX(5px);
+}
+
+.dark .component--directional-button {
+  background-color: var(--secondary-700);
+}
+
+.dark .component--directional-button:hover,
+.dark .component--directional-button:focus {
+  color: white;
+  background-color: var(--secondary-700);
+}

package/src/styles/components/dropdown.css

@@ -0,0 +1,19 @@
+.dropdown-menu-content[data-side="top"],
+.dropdown-menu-subcontent[data-side="top"] {
+  animation: slideDownAndFade 100ms ease-in;
+}
+
+.dropdown-menu-content[data-side="right"],
+.dropdown-menu-subcontent[data-side="right"] {
+  animation: slideLeftAndFade 100ms ease-in;
+}
+
+.dropdown-menu-content[data-side="bottom"],
+.dropdown-menu-subcontent[data-side="bottom"] {
+  animation: slideUpAndFade 100ms ease-in;
+}
+
+.dropdown-menu-content[data-side="left"],
+.dropdown-menu-subcontent[data-side="left"] {
+  animation: slideRightAndFade 100ms ease-in;
+}

package/src/styles/components/fade-in-lift.css

@@ -0,0 +1,13 @@
+.component--fade-in-lift {
+  opacity: 0;
+  visibility: hidden;
+  transform: matrix(1, 0, 0, 1, 0, 18);
+  transition: opacity 0.5s ease-out, transform 0.7s ease-out;
+  will-change: opacity, visibility;
+}
+
+.component--fade-in-lift.is-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: matrix(1, 0, 0, 1, 0, 0);
+}

package/src/styles/components/hamburger.css

@@ -0,0 +1,107 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .component--hamburger {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    width: 42px;
+    height: 34px;
+    overflow: hidden;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    border-radius: 4px;
+  }
+
+  /* .component--hamburger:hover {
+  @apply bg-primary-200;
+} */
+
+  .component--hamburger:active,
+  .component--hamburger:focus {
+    outline: none !important;
+    border-color: white;
+    border-width: 0.5px;
+    border-style: dashed;
+    /* border: dashed 0.5px #ffffff; */
+    border-radius: 4px;
+  }
+
+  .component--hamburger .box {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+  }
+
+  .component--hamburger .inner {
+    display: block;
+    top: 50%;
+    margin-top: -1px;
+    transition-duration: 0.075s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .component--hamburger .inner,
+  .component--hamburger .inner::before,
+  .component--hamburger .inner::after {
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    border-radius: 0;
+    /* background-color: white; */
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  /* .dark .component--hamburger .inner,
+.dark .component--hamburger .inner::before,
+.dark .component--hamburger .inner::after {
+  background-color: white;
+} */
+
+  .component--hamburger .inner::before,
+  .component--hamburger .inner::after {
+    content: "";
+    display: block;
+  }
+
+  .component--hamburger .inner::before {
+    top: -8px;
+    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
+  }
+
+  .component--hamburger .inner::after {
+    bottom: -8px;
+    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .component--hamburger.is_active .inner {
+    transform: rotate(45deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .component--hamburger.is_active .inner::before {
+    top: 0;
+    opacity: 0;
+    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
+  }
+
+  .component--hamburger.is_active .inner::after {
+    bottom: 0;
+    transform: rotate(-90deg);
+    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+}

package/src/styles/components/icon-element.css

@@ -0,0 +1,4 @@
+.component--icon-element-root svg {
+  display: block;
+  margin: auto;
+}

package/src/styles/components/list-checkbox.css

@@ -0,0 +1,60 @@
+ul.check {
+  padding-left: 0;
+}
+
+.component--list-item-checkbox {
+  position: relative;
+  margin-left: 0;
+  margin-right: 8px;
+  padding-left: 28px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+
+@media screen and (min-width: 768px) {
+  ul.check {
+    padding-left: 1rem;
+  }
+}
+
+.component--list-item-checkbox::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  top: 8px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+  border: 1px solid rgb(125, 125, 125);
+  border-radius: 2px;
+  background-repeat: no-repeat;
+}
+
+.component--list-item-checkbox-checked {
+  text-decoration: line-through;
+}
+
+.component--list-item-checkbox-checked::before {
+  border: 1px solid var(--secondary-300);
+  background-color: var(--secondary-400);
+  background-repeat: no-repeat;
+}
+
+.component--list-item-checkbox-checked::after {
+  content: "";
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 11px;
+  width: 4px;
+  left: 6px;
+  right: 7px;
+  height: 8px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}

package/src/styles/components/loaders.css

@@ -0,0 +1,196 @@
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+}
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 41.25%;
+  width: 16.25%;
+  height: 32.25%;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+  left: 10%;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+  left: 10%;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+  left: 40%;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+  left: 70%;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(184.61%, 0);
+  }
+}
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.lds-spinner {
+  color: official;
+  display: inline-block;
+  position: relative;
+  width: 56px;
+  height: 56px;
+}
+
+.lds-spinner div {
+  transform-origin: 28px 32px;
+  animation: lds-spinner 1.2s linear infinite;
+}
+
+.lds-spinner div .div-after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 25px;
+  width: 5px;
+  height: 14px;
+  border-radius: 20%;
+  background: #fff;
+}
+
+.lds-spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+
+.lds-spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+
+.lds-spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+
+.lds-spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+
+.lds-spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+
+.lds-spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+
+.lds-spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+
+.lds-spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+
+.lds-spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+
+.lds-spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+
+.lds-spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+
+.lds-spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/src/styles/components/popover.css

@@ -0,0 +1,15 @@
+.popover-content[data-state="open"][data-side="top"] {
+  animation: slideDownAndFade 100ms ease-in;
+}
+
+.popover-content[data-state="open"][data-side="right"] {
+  animation: slideLeftAndFade 100ms ease-in;
+}
+
+.popover-content[data-state="open"][data-side="bottom"] {
+  animation: slideUpAndFade 100ms ease-in;
+}
+
+.popover-content[data-state="open"][data-side="left"] {
+  animation: slideRightAndFade 100ms ease-in;
+}

package/src/styles/components/scroll-to-top.css

@@ -0,0 +1,89 @@
+.btn-to-top {
+  display: flex;
+  position: fixed;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  align-items: center;
+  text-decoration: none;
+  border-style: none;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  z-index: 20;
+  justify-content: center;
+  bottom: 45px;
+  right: 30px;
+  color: white;
+  background-color: var(--primary-500);
+  transition-property: all, color;
+  transition-duration: 0.3s, 1ms;
+  transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
+  transition-delay: 0s, 0s;
+  cursor: pointer;
+}
+
+.dark .btn-to-top {
+  background-color: var(--secondary-700);
+}
+
+.btn-to-top span {
+  width: 18px;
+  padding-bottom: 3px;
+}
+
+.btn-to-top span .icon path {
+  stroke: none;
+  fill: white;
+}
+
+@media screen and (min-width: 587px) {
+  .btn-to-top {
+    bottom: 45px;
+    right: 45px;
+  }
+
+  .btn-to-top span {
+    width: 18px;
+  }
+}
+
+.btn-to-top:hover,
+.btn-to-top:focus {
+  color: white;
+  background-color: var(--primary-500);
+  transform: translateY(-5px);
+}
+
+.dark .btn-to-top {
+  background-color: var(--primary-600);
+}
+
+.dark .btn-to-top:hover,
+.dark .btn-to-top:focus {
+  color: white;
+  background-color: var(--primary-600);
+}
+
+.btn-floating {
+  min-width: 0;
+  opacity: 1;
+  visibility: visible;
+  padding: 0;
+  width: 40px;
+  height: 40px;
+  bottom: 20px;
+  right: 10px;
+  border-radius: 20px;
+}
+
+@media screen and (min-width: 587px) {
+  .btn-floating {
+    width: 42px;
+    height: 42px;
+    border-radius: 21px;
+    bottom: 22px;
+    right: 22px;
+  }
+}

package/src/styles/components/toast.css

@@ -0,0 +1,18 @@
+/* styles.css */
+
+.toast-viewport {
+  --viewport-padding: 25px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--viewport-padding);
+  gap: 10px;
+  width: 100vw;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 2147483647;
+  outline: none;
+}

package/src/styles/styles.css

@@ -0,0 +1,6 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@import "./base/base.css";
+@import "./utils/utils.css";
+@import "./theme/theme.css";
+@import "./components/components.css";