rujira.ui 0.1.0

package/src/scss/components/_loader.scss

@@ -0,0 +1,20 @@
+.loader {
+  position: relative;
+  
+  &__blob {
+    position: absolute;
+    left: -15%;
+    top: -15%;
+    width: 130%;
+    height: 130%;
+    opacity: 0.45;
+  }
+
+  &__spinner {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    width: 60%;
+    height: 60%;
+  }
+}

package/src/scss/components/_modal.scss

@@ -0,0 +1,138 @@
+#modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 200;
+
+  .modal {
+    width: 100vw;
+    height: 100vh;
+    -webkit-backdrop-filter: blur(5px) brightness(40%);
+    -moz-backdrop-filter: blur(5px) brightness(40%);
+    backdrop-filter: blur(5px) brightness(40%);
+    display: flex;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 2rem 1rem;
+    justify-content: center;
+    color: $white;
+
+    &__window {
+      background: rgba($darkGrey, 0.85);
+      -webkit-backdrop-filter: blur(20px);
+      -moz-backdrop-filter: blur(20px);
+      backdrop-filter: blur(20px);
+      width: 100%;
+      max-width: 32rem;
+      border-radius: 0.5rem;
+      padding: 1.5rem;
+      margin: auto;
+    }
+
+    &--auto {
+      .modal__window {
+        width: auto;
+      }
+    }
+
+    &--large {
+      .modal__window {
+        max-width: 38rem;
+      }
+    }
+
+    &--nopad {
+      .modal__window {
+        padding: 0;
+      }
+    }
+
+    &__header {
+      display: flex;
+
+      h2 {
+        font-size: 1rem;
+        font-weight: 600;
+        color: $white;
+        margin: 0 auto 1rem 0;
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        margin-left: auto;
+        cursor: pointer;
+      }
+    }
+
+    &__footer {
+      background: $black;
+      margin-top: 1.5rem;
+      margin-left: -1.5rem;
+      margin-right: -1.5rem;
+      margin-bottom: -1.5rem;
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
+
+    &__sidebar {
+      width: 3.25rem;
+      background: $black;
+      margin-top: -1rem;
+      margin-left: -1.5rem;
+      margin-bottom: -1rem;
+      margin-right: 1rem;
+
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: flex-start;
+
+      a {
+        padding: 0.75rem;
+        color: $grey;
+        cursor: pointer;
+
+        &.selected {
+          color: $white;
+          background: rgba($darkGrey, 0.85);
+          border-radius: 0.5rem 0 0 0.5rem;
+        }
+
+        svg {
+          display: block;
+          width: 1.5rem;
+          height: auto;
+        }
+      }
+
+      & + div {
+        flex: 1;
+      }
+    }
+
+    &__close {
+      position: absolute;
+      right: 0px;
+      bottom: 100%;
+      cursor: pointer;
+    }
+
+    &__scroll {
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: 18.25rem;
+    }
+  }
+}
+
+@-moz-document url-prefix() {
+  #modal {
+    .modal {
+      background: rgba($black, 0.9);
+
+      &__window {
+        background: rgba($darkGrey, 0.95);
+      }
+    }
+  }
+}

package/src/scss/components/_numeric-input.scss

@@ -0,0 +1,98 @@
+/// ADD a white color focus option
+
+
+.numeric-input {
+  display: flex;
+  flex-wrap: wrap;
+  background: $darkGrey;
+  border: 1px solid rgba($grey, 0.5);
+  padding: 0 0.75rem;
+  border-radius: 0.375rem;
+  position: relative;
+  width: 100%;
+  min-height: 2.5rem;
+  align-items: center;
+
+  // default font
+  font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+  font-size: 1rem;
+  line-height: 1.25em;
+  color: $white;
+
+  &--sm {
+    font-size: 0.875rem;
+    line-height: 1em;
+    min-height: 2rem;
+  }
+
+  &--full {
+    width: 100%;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &:has(input:focus) {
+    border: 1px solid rgba($primary1, 0.5);
+    box-shadow: 0 0 0 .25rem rgba($primary1,.25);
+  }
+
+  &:hover:not(&--disabled):not(&:has(input:focus)) {
+    border: 1px solid rgba($grey, 0.75);
+    box-shadow: 0 0 0 .25rem rgba($grey,.25);
+  }
+
+  &--white {
+    &:has(input:focus) {
+      border: 1px solid rgba($white, 0.75);
+      box-shadow: 0 0 0 .25rem rgba($grey,.25);
+    }
+  }
+
+  label {
+    color: $grey;
+    display: block;
+  }
+
+  input,
+  .val {
+    flex-grow: 1;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    text-align: right;
+    //font-size: 1.125rem;
+    color: $white;
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* &--sm {
+    input,
+    .val {
+      font-size: 1rem;
+    }
+  } */
+
+  input::placeholder {
+    color: $grey;
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px $black inset !important;
+    box-shadow: 0 0 0px 1000px $black inset !important;
+    -webkit-text-fill-color: $white !important;
+  }  
+}

package/src/scss/components/_popout.scss

@@ -0,0 +1,63 @@
+.popout {
+  display: inline-block;
+
+  & > button {
+    padding: 0;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+
+  nav {
+    position: absolute;
+    display: none;
+    overflow: hidden;
+    border-radius: 0.5rem;
+    background-color: rgba($darkGrey, 0.5);
+    -webkit-backdrop-filter: blur(10px);
+    -moz-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    padding: 0.5rem 0;
+    text-align: left;
+    z-index: 12;
+
+    a {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0.25rem 2rem 0.25rem 1rem;
+      font-size: 1rem;
+      text-decoration: none;
+      color: $white;
+      cursor: pointer;
+      transition: opacity 0.2s;
+
+      svg {
+        color: $grey;
+        width: 1.25rem;
+        height: auto;
+        display: block;
+        margin-right: 0.5rem;
+      }
+    }
+
+    &:has(> a:hover) {
+      a:not(:hover) {
+        opacity: 0.375;
+      }
+    }
+  }
+
+  &--open {
+    nav {
+      display: flex;
+      flex-direction: column;
+      box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.07),
+        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.05),
+        12.5px 12.5px 10px rgba(0, 0, 0, 0.042),
+        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.035),
+        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.028)/* ,
+        100px 100px 80px rgba(0, 0, 0, 0.02) */;
+    }
+  }
+}

package/src/scss/components/_progress.scss

@@ -0,0 +1,62 @@
+.progress {
+  width: 100%;
+  display: block;
+
+  &__height {
+    position: relative;
+  }
+
+  &__track {
+    background: rgba($grey, 0.5);
+    border-radius: 0.5rem;
+    height: 100%;
+  }
+  
+  &__percentage {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-radius: 0.5rem;
+    background: linear-gradient(90deg, $primary2, $primary1 100%);
+    transition: all 0.25s;
+  }
+
+  &__labels {
+    display: flex;
+    width: 100%;
+    font-weight: 400;
+    font-family: "mono", monospace;
+    position: relative;
+
+    div {
+      display: inline-flex;
+      flex-direction: column;
+      font-size: 0.75rem;
+      color: $grey;
+
+      &:before {
+        content: "";
+        display: block;
+        width: 1px;
+        height: 8px;
+        background: rgba($grey, 0.5);
+        margin: 4px 1px 1px;
+      }
+    }
+
+    div:not(:first-child):not(:last-child) {
+      align-items: center;
+      position: absolute;
+      transition: all 0.25s;
+      color: $white;
+      transform: translateX(-50%);
+    }
+
+    div:last-child {
+      align-items: flex-end;
+      margin-left: auto;
+      margin-right: 0;
+    }
+  }
+}

package/src/scss/components/_radio-checkbox.scss

@@ -0,0 +1,79 @@
+.radio-checkbox {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+
+  input {
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid #0000;
+    padding: 1px;
+    background: 
+      conic-gradient($black 0 0) padding-box,
+      linear-gradient(45deg, $grey, $grey) border-box;
+      
+      
+    &:checked {
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+      }
+
+      background: 
+        conic-gradient($black 0 0) padding-box,
+        linear-gradient(45deg, $primary2, $primary1) border-box;
+    }
+
+    &[type="radio"] {
+      border-radius: 0.5rem;
+
+      &:checked:before {
+        left: 0.1875rem;
+        top: 0.1875rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background: linear-gradient(45deg, $primary2, $primary1);
+      }
+    }
+
+    &[type="checkbox"] {
+      border-radius: 0.25rem;
+
+      &:checked:before {
+        left: 0.1875rem;
+        top: 0.25rem;
+        width: 9px;
+        height: 7px;
+        background: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 7"><path d="M2.538 6.037a.854.854 0 0 0 1.21 0l4.568-4.574A.857.857 0 0 0 7.106.252L3.14 4.22 1.462 2.54a.857.857 0 0 0-1.21 1.21l2.285 2.286Z" fill="url(%23a)"/><defs><linearGradient id="a" x1="8.567" y1="0" x2="2.566" y2="8.173" gradientUnits="userSpaceOnUse"><stop stop-color="%23D615EB"/><stop offset="1" stop-color="%238436F5"/></linearGradient></defs></svg>');
+      }
+    }
+  }
+  
+  label {
+    cursor: pointer;
+    font-size: 0.875rem;
+    line-height: 1em;
+    font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+    font-weight: 500;
+    color: $white;
+    margin-left: 0.5rem;
+
+    a {
+      text-decoration: underline;
+      transition: color 0.2s;
+      color: $white;
+
+      &:hover {
+        color: $primary1;
+      }
+    }
+  }
+}

package/src/scss/components/_select.scss

@@ -0,0 +1,106 @@
+.select-container {
+  position: relative;
+
+  // default font
+  font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+  font-size: 1rem;
+  line-height: 1.25em;
+  color: $white;
+
+  & > .select {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: $darkGrey;
+    border-radius: 0.375rem;
+    padding: 0 2.5rem 0 0.75rem;
+    border: 1px solid rgba($grey, 0.5);
+    color: inherit;
+    line-height: 1.125em;
+    min-height: 2.875rem;
+
+    &--nolabel {
+      padding: 0 2.5rem 0 0.75rem;
+    }
+
+    &--md {
+      min-height: 2.5rem;
+    }
+  }
+
+  & > .select--sm {
+    font-size: 0.875rem;
+    min-height: 2rem;
+    //padding: 0 2.5rem 0 0.75rem;
+  }
+
+  &:has(> .label) {
+    .select {
+      padding: 1.1875rem 0.75rem 0.375rem;
+    }
+  }
+
+  & > .select:focus {
+    border: 1px solid rgba($primary1, 0.5);
+    outline: none;
+    box-shadow: 0 0 0 .25rem rgba($primary1,.25);
+  }
+  
+  & > .select--white:focus {
+    border: 1px solid rgba($white, 0.75);
+    box-shadow: 0 0 0 .25rem rgba($grey,.25);
+  }
+
+  & > .select:not(:focus):not(:disabled):hover {
+    border: 1px solid rgba($grey, 0.75);
+    box-shadow: 0 0 0 .25rem rgba($grey,.25);
+  }
+
+  & > .label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    pointer-events: none;
+    transform-origin: 0 0;
+    padding: 0.75rem 0 0 0.75rem;
+    color: $grey;
+    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
+    font-weight: 500;
+  }
+
+  & > .arrow {
+    //width: 1rem;
+    width: 1.5rem;
+    height: auto;
+    display: block;
+    position: absolute;
+    //right: 0.75rem;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $grey;
+    pointer-events: none;
+  }
+  
+  & > .select:not(:disabled):hover ~ .arrow {
+    color: $white;
+  }
+
+  & > .select:not(:disabled):focus ~ .arrow {
+    color: $primary1;
+  }
+  
+  & > .select--white:not(:disabled):focus ~ .arrow {
+    color: $white;
+  }
+
+  & > .select--sm ~ .arrow {
+    width: 1rem;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/src/scss/components/_slider.scss

@@ -0,0 +1,34 @@
+.slider {
+  height: 16px;
+  transition: opacity 0.2s;
+
+  &__track {
+    top: 6px;
+    height: 4px;
+    background: rgba($grey, 0.5);
+    border-radius: 2px;
+
+    &-0 {
+      background: linear-gradient(90deg, $primary2, $primary1 100%);
+    }
+  }
+
+  &__thumb {
+    cursor: pointer;
+    background: $primary1;
+    width: 16px;
+    height: 16px;
+    border-radius: 100%;
+    outline: none;
+    transition: box-shadow 0.15s;
+    box-shadow: 0 0 6px 0 rgba($black, 0.75);
+
+    &:hover {
+      box-shadow: 0 0 0 4px rgba($primary1, 0.25);
+    }
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
+}

package/src/scss/components/_toggle.scss

@@ -0,0 +1,120 @@
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  // default font
+  font-size: 0.875rem;
+  line-height: 1em;
+  font-family: "Barlow Semi Condensed", Verdana, sans-serif;
+  color: $white;
+  font-weight: 500;
+  user-select: none;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 3.5rem;
+    height: 2rem;
+    flex-shrink: 0;
+  }
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    background-color: rgba($grey, 0.35);
+    transition: 0.4s;
+    border-radius: 2rem;
+    width: 3.5rem;
+    height: 2rem;
+
+    &:before {
+      position: absolute;
+      content: "";
+      height: 1.5rem;
+      width: 1.5rem;
+      left: 0.25rem;
+      bottom: 0.25rem;
+      background-color: $white;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+  }
+
+  input:checked + &__slider {
+    background-color: rgba($primary1, 1);
+  }
+
+  input:disabled + &__slider, input:disabled ~ &__label {
+    opacity: 0.5;
+  }
+
+  input:focus + &__slider {
+    box-shadow: 0 0 0 1px $primary1, 0 0 0 .25rem rgba($primary1,.25);
+  }
+
+  &--primary2 {
+    input:checked + .toggle__slider {
+      background-color: rgba($primary2, 1);
+    }
+
+    input:focus + .toggle__slider {
+      box-shadow: 0 0 0 1px $primary2, 0 0 0 .25rem rgba($primary2,.25);
+    }
+  }
+
+  &--grey {
+    input:checked + .toggle__slider {
+      background-color: rgba($grey, 1);
+    }
+
+    input:focus + .toggle__slider {
+      box-shadow: 0 0 0 1px $grey, 0 0 0 .25rem rgba($grey,.25);
+    }
+  }
+
+  input:checked + &__slider:before {
+    transform: translateX(1.5rem);
+  }
+
+  &__label {
+    margin-left: 0.5rem;
+    transition: opacity 0.2s;
+  }
+
+  &--small {
+    &:before {
+      width: 2.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  &--small &__slider {
+    border-radius: 2rem;
+    width: 2.5rem;
+    height: 1.5rem;
+
+    &:before {
+      height: 1rem;
+      width: 1rem;
+      left: 0.25rem;
+      bottom: 0.25rem;
+      background-color: $white;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+  }
+
+  &--small input:checked + &__slider:before {
+    transform: translateX(1rem);
+  }
+}