nexus-shared 1.1.4 → 1.1.6

package/src/styles/nexus.core.css

@@ -0,0 +1,119 @@
+:root {
+  --BR1: 0.3rem;
+  --BR2: 0.6rem;
+  --MW: 90vw;
+  --SLBW: 0.6rem;
+  /* ~6px; WebKit won't render below ~8px — use px, not rem, for a stable thin size */
+  --BS0: 0px 0px 1.95rem var(--B41);
+  --BS1: 0px 0px 1.45rem var(--B41);
+  --BS2: 0px 0px 1.1rem var(--B41);
+  --BS3: 0px 0px 0.8rem var(--B41);
+  --BS4: 0px 0px 0.55rem var(--B41);
+  --BS5: 0px 0px 0.4rem var(--B41);
+  --BS6: 0px 0px 0.25rem var(--B41);
+  --BS7: 0px 0px 0.15rem var(--B41);
+  /* Input error box */
+  --IEM: 2rem;
+  /* Input Height */
+  --IH: 2.8rem;
+  /* Border Size 1 */
+  --BRD1: 0.0625rem;
+  /* Border Size 2 */
+  --BRD2: calc(var(--BRD1) * 2);
+  /* Border Size 3 */
+  --BRD3: calc(var(--BRD1) * 3);
+  --ACTIVE_BORDER_COLOR: var(--B950);
+  --ACTIVE_BACKGROUND_COLOR: var(--B3);
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-decoration: none;
+  box-sizing: border-box;
+  letter-spacing: 0.02rem;
+}
+
+body {
+  font-weight: 400;
+  font-family: "Inter", sans-serif;
+}
+
+@media (max-width: 4000px) {
+  * {
+    font-size: 20px;
+  }
+}
+
+@media (max-width: 3000px) {
+  * {
+    font-size: 19px;
+  }
+}
+
+@media (max-width: 2600px) {
+  * {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 2300px) {
+  * {
+    font-size: 17px;
+  }
+}
+
+@media (max-width: 1800px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 1500px) {
+  * {
+    font-size: 15px;
+  }
+}
+
+/** Mobile display */
+@media (max-width: 768px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 450px) {
+  * {
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 400px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 350px) {
+  * {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 300px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 250px) {
+  * {
+    font-size: 11px;
+  }
+}
+
+body {
+  background-color: var(--C1);
+  color: var(--C950);
+}

package/src/styles/nexus.dialog.css

@@ -0,0 +1,141 @@
+:root {
+  --BFC: var(--C1);
+  --BG_TITLE: rgb(100, 100, 100);
+  --DB_SIZE: 1.1rem;
+}
+
+.dialog {
+  z-index: 100 !important;
+  cursor: default;
+}
+
+.dialog.left::before,
+.dialog.right::before,
+.dialog.center::before,
+.dialog.left::after,
+.dialog.right::after,
+.dialog.center::after {
+  content: "";
+  position: absolute;
+  width: var(--DB_SIZE);
+  height: var(--DB_SIZE);
+  background: inherit;
+  transform: rotate(45deg) translateX(calc(0rem - var(--DB_SIZE) / 2.5)) translateY(calc(var(--DB_SIZE) / 2));
+  top: calc(0rem - var(--DB_SIZE) / 1.54);
+  border-radius: 0.05rem;
+  border-left: var(--BRD1) solid var(--B30);
+  border-top: var(--BRD1) solid var(--B30);
+}
+
+.dialog.left::before,
+.dialog.right::before,
+.dialog.center::before {
+  box-shadow: -0.3rem -0.3rem 0.4rem var(--B41);
+  z-index: -1 !important;
+  opacity: 0.7;
+}
+
+.dialog.right::after,
+.dialog.right::before {
+  left: var(--arrow-left, 0rem);
+}
+
+.dialog.left::after,
+.dialog.left::before {
+  left: var(--arrow-left, 1.2rem);
+}
+
+.dialog.center::after,
+.dialog.center::before {
+  left: var(--arrow-left, 50%);
+}
+
+.dialog.T::after,
+.dialog.T::before,
+.dialog.T.center::after,
+.dialog.T.center::before {
+  top: unset;
+  bottom: -0.55rem !important;
+  transform: scale(1, -1);
+  transform: translateX(-50%) scale(1, -1);
+}
+.dialog.input-dialog::before,
+.dialog.input-dialog::after {
+  display: none !important;
+}
+
+/************ Dialog Box (POPUP MODEL) ************/
+.dlg-box {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 1000;
+  background-color: var(--C12);
+  overflow: hidden;
+}
+.dlg-box.minimized {
+  z-index: 98;
+}
+.dlg-box.minimized .model {
+  max-height: 2rem !important;
+}
+.dlg-box .model {
+  width: 40rem;
+  max-width: 95%;
+  max-height: 85vh;
+}
+.dlg-box.minimized .model {
+  max-width: none !important;
+  width: 100% !important;
+}
+.model.XS {
+  width: 25rem;
+}
+
+.model.sm {
+  width: 30rem;
+}
+
+.model.nr {
+  width: 37rem;
+}
+
+.model.med {
+  width: 45rem;
+}
+
+.model.lg {
+  width: 70rem;
+}
+
+.model.xl {
+  width: 80rem;
+}
+
+.model.xxl {
+  width: 95%;
+  max-width: 95%;
+  max-height: 95%;
+}
+
+.model.fs {
+  width: 100% !important;
+  height: 100vh !important;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0;
+}
+.dlg-box {
+  container-type: size;
+}
+@media (max-width: 768px) {
+  .model {
+    max-height: 90vh !important;
+  }
+  .dlg-box.ac {
+    align-items: flex-start !important;
+  }
+}
+.dlg-box.minimized:hover {
+  animation: none !important;
+}

package/src/styles/nexus.icon.css

@@ -0,0 +1,50 @@
+:root {
+  /* Icon box width */
+  --IW: var(--IH);
+  /* Icon Font size */
+  --IS: 1.6rem;
+}
+
+.ib {
+  min-width: var(--IW);
+  min-height: var(--IW);
+  max-width: var(--IW);
+  max-height: var(--IW);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.icon {
+  pointer-events: none;
+  transition: var(--ANIM);
+  font-size: var(--IS);
+  pointer-events: none !important;
+}
+
+.ib.h:hover > .icon {
+  opacity: 1;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover !important;
+}
+
+.image-viewer {
+  width: 100%;
+  height: 100%;
+  object-fit: cover !important;
+  transition: transform 0.1s ease;
+  transform-origin: center;
+  transition: var(--ANIM);
+}
+
+.bg-img {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}

package/src/styles/nexus.input.css

@@ -0,0 +1,207 @@
+:root {
+  --IRCH: 1.5rem;
+}
+
+.ipt-bx {
+  z-index: 0;
+}
+
+.ipt-wp .smb {
+  min-height: calc(var(--IEM) / 1.3) !important;
+}
+
+.ipt-bx,
+.ipt-bxh {
+  height: var(--IH);
+}
+.textarea-box {
+  height: unset !important;
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.5rem;
+  box-sizing: border-box;
+}
+.ipt {
+  color: var(--T1);
+}
+
+input.ipt,
+select.ipt {
+  height: 100%;
+}
+
+.ipt,
+.ipth {
+  width: 100%;
+  padding: 0rem 0.5rem;
+  font-weight: 400;
+  font-family: inherit;
+}
+
+.ipth,
+input.ipt,
+select.ipt {
+  min-height: calc(var(--IH) - var(--B1));
+}
+
+.ipt:-webkit-autofill,
+.ipt:autofill {
+  -webkit-box-shadow: 0 0 0px 50px var(--B1) inset !important;
+  -webkit-text-fill-color: var(--T1) !important;
+  border-radius: var(--BR1);
+}
+
+.ipt-bx .ilb {
+  padding: 0rem 0.2rem;
+  margin-left: 0.3rem;
+  font-weight: 400;
+  font-size: 1rem;
+  opacity: 0.7;
+  transition: all var(--ANIM_SPD) ease-in-out;
+}
+
+.ipt.txhv + .ilb,
+.ipt:focus-within + .ilb {
+  opacity: 1;
+  top: -0.05rem !important;
+  font-size: 0.8rem !important;
+  font-weight: 500 !important;
+}
+
+.ipt.txhv + .ilb,
+.ipt:focus-within + .ilb {
+  background: linear-gradient(to bottom, transparent 35%, var(--B2) 0, var(--B2) 55%, transparent 50%);
+  opacity: 1 !important;
+}
+
+.h:focus-within,
+.ipt-bx:focus-within {
+  box-shadow: 0 0 0.3rem var(--B20);
+  border-color: var(--B12) !important;
+  z-index: 1;
+}
+
+.ipt-bx .ib {
+  min-height: calc(var(--IH) - var(--BR1)) !important;
+  min-width: calc(var(--IH) - var(--BR1)) !important;
+}
+
+.ipt-bx.error:focus-within {
+  box-shadow: 0 0 0.3rem var(--B13) !important;
+}
+
+.ipt-bx.error {
+  border-color: var(--B13) !important;
+}
+
+.ipt-bx.error .ilb,
+.ipt-bx.error .ipt,
+.ipt-bx.error .icon {
+  color: var(--B13) !important;
+}
+
+/**********  Checkbox Radiobox Start Here  **********/
+
+.ipt-bxh input[type="checkbox"]:checked + .ilb,
+.ipt-bxh input[type="radio"].checkbox:checked + .ilb {
+  opacity: 1 !important;
+  font-weight: 500;
+}
+
+input[type="radio"],
+input[type="checkbox"],
+.checkbox {
+  border: none;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  display: flex;
+  align-items: center;
+  transition: var(--ANIM);
+  position: relative;
+  cursor: pointer;
+}
+
+input[type="radio"]::before,
+input[type="checkbox"]::before,
+.checkbox::before {
+  content: "";
+  width: var(--IRCH) !important;
+  height: var(--IRCH) !important;
+  border: 0.22rem solid var(--B30);
+  box-sizing: border-box;
+  transition: var(--ANIM);
+}
+
+/* Native radio only — groupId checkboxes use type=radio + .checkbox */
+input[type="radio"]:not(.checkbox)::before {
+  border-radius: 50%;
+  background-color: transparent;
+}
+
+input[type="radio"]:not(.checkbox):checked::before {
+  box-shadow: 0 0 0 0.22rem var(--B1) inset;
+  background-color: var(--B400);
+  border-color: var(--B400);
+}
+
+input[type="checkbox"]::before,
+input[type="radio"].checkbox::before {
+  border-radius: var(--BR1);
+}
+
+input[type="checkbox"]:checked::before,
+input[type="radio"].checkbox:checked::before,
+.checkbox.checked::before {
+  border-color: var(--B400);
+  box-shadow: none;
+  background-color: transparent;
+}
+
+input[type="checkbox"]:checked::after,
+input[type="radio"].checkbox:checked::after,
+.checkbox.checked::after {
+  content: "";
+  position: absolute;
+  top: 47%;
+  left: 49%;
+  width: 0.7rem;
+  height: 0.35rem;
+  border-bottom: 0.2rem solid var(--B400);
+  border-left: 0.2rem solid var(--B400);
+  transform: translate(-50%, -50%) rotate(-50deg);
+}
+
+input[type="radio"]:checked + .ilb,
+input[type="radio"].checkbox:checked + .ilb {
+  opacity: 1 !important;
+}
+
+textarea.ipt {
+  display: block;
+  flex: 1 1 auto;
+  resize: vertical;
+  user-select: text;
+  box-sizing: border-box;
+  padding-bottom: 0.5rem;
+}
+
+/** =========================
+ * Modern Custom Select Box
+ * ========================= */
+
+select.ipt {
+  -webkit-appearance: none;
+}
+
+/** Disabled */
+select.ipt:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/** Dropdown Options */
+select.ipt option {
+  background: var(--B2);
+  color: var(--T2);
+}

package/src/styles/nexus.loader.css

@@ -0,0 +1,11 @@
+.nexus-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1000000;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/styles/nexus.logic.css

@@ -0,0 +1,18 @@
+.ho1:hover {
+  opacity: 1;
+}
+.btn.active {
+  font-weight: 500;
+}
+.btn.active {
+  background-color: var(--ACTIVE_BACKGROUND_COLOR) !important;
+  pointer-events: none;
+}
+.btn.active::after {
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: var(--BRD2);
+  bottom: 0;
+  background-color: var(--ACTIVE_BORDER_COLOR);
+}