@plutonhq/core-frontend 0.1.2 → 0.1.3

package/dist-lib/components/common/form/Select/Select.module.scss

@@ -1,193 +0,0 @@
-.selectField {
-   .search {
-      border: 1px solid;
-      border-color: var(--field-line-color);
-      border-radius: 4px 4px 0 0;
-      border-bottom: 0;
-      position: relative;
-      top: -1px;
-      color: var(--icon-color);
-      span {
-         position: absolute;
-         margin: 5px;
-      }
-      button {
-         position: absolute;
-         right: 0;
-         margin: 5px;
-         color: var(--icon-color);
-         span {
-            position: relative;
-            margin: 0;
-         }
-      }
-      input {
-         padding: 8px 12px;
-         padding-left: 24px;
-         width: 100%;
-         border: none;
-         box-sizing: border-box;
-         background-color: var(--content-background-color);
-         &:focus {
-            outline: none;
-            background-color: var(--field-line-color);
-         }
-      }
-   }
-
-   .dropdown {
-      min-width: 150px;
-      width: 50%;
-      position: relative;
-      margin-top: 0px;
-
-      .selected {
-         padding: 8px 10px;
-         border: 1px solid;
-         background: var(--field-bg);
-         border-color: var(--field-line-color);
-         border-radius: 6px;
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         cursor: pointer;
-         span {
-            user-select: none;
-            font-size: 0.75rem;
-         }
-         img {
-            margin-right: 5px;
-            max-height: 16px;
-            width: auto;
-            vertical-align: top;
-         }
-
-         .dropBtn {
-            background: transparent;
-            color: var(--icon-color);
-         }
-      }
-
-      .lists {
-         border: 1px solid var(--line-color);
-         margin-top: -1px;
-         position: absolute;
-         z-index: 9999;
-         background: var(--field-bg);
-         width: calc(100% - 2px);
-         border-radius: 0 0 4px 4px;
-         max-height: 210px;
-         overflow: auto;
-         font-size: 0.75rem;
-         ul {
-            margin: 0;
-            padding: 0;
-            list-style-type: none;
-
-            li {
-               padding: 8px 10px;
-               cursor: pointer;
-
-               img {
-                  margin-right: 5px;
-                  max-height: 16px;
-                  width: auto;
-                  vertical-align: top;
-               }
-               :global(.icon) {
-                  margin-right: 5px;
-                  opacity: 0.7;
-               }
-
-               &.disabledItem {
-                  opacity: 0.6;
-                  user-select: none;
-                  cursor: not-allowed;
-               }
-
-               &.selectedItem {
-                  color: var(--field-bg);
-                  background: var(--primary-color);
-               }
-
-               &:hover {
-                  background: var(--background-color);
-                  color: inherit;
-               }
-            }
-         }
-      }
-      &.dropdownDisabled .selected {
-         background-color: var(--line-color);
-         cursor: default;
-      }
-   }
-
-   &.selectFieldFull {
-      .dropdown {
-         width: 100%;
-      }
-   }
-
-   &.selectFieldLarge {
-      .selected {
-         padding: 12px;
-      }
-   }
-   &.selectFieldDisabled {
-      .selected {
-         background-color: var(--line-color);
-      }
-   }
-
-   &.fieldHasError {
-      .selected {
-         border-color: var(--error-bg-color-active);
-      }
-   }
-   &.selectFieldOpen {
-      .selected {
-         border-radius: 6px 6px 0 0;
-      }
-   }
-
-   &.selectFieldInline {
-      .fieldInner {
-         justify-content: space-between;
-      }
-   }
-   &.selectFieldMini {
-      margin-top: -3px;
-      .dropdown {
-         width: auto;
-         min-width: unset;
-         .selected {
-            padding: 2px 4px 2px 8px;
-            border-radius: 4px;
-            span {
-               font-size: 0.7rem;
-            }
-         }
-         .lists {
-            left: 0;
-            right: 0;
-            margin: 0 auto;
-            border-radius: 6px;
-            font-size: 0.9em;
-            margin-top: 4px;
-            width: max-content;
-            li {
-               padding: 6px 10px;
-            }
-         }
-      }
-   }
-}
-
-@media only screen and (max-width: 768px) {
-   .selectField {
-      .dropdown {
-         width: 100%;
-      }
-   }
-}

package/dist-lib/components/common/form/SizePicker/SizePicker.module.scss

@@ -1,82 +0,0 @@
-@use '../../../../styles/fields.scss';
-
-.sizePicker {
-   .inputGroup {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-   }
-
-   .numberInput {
-      width: 70px;
-      padding: 8px 12px;
-      border: 1px solid var(--field-line-color);
-      border-radius: 6px;
-      background: transparent;
-      color: var(--content-text-color);
-      font-size: 0.75rem;
-      text-align: center;
-
-      &:focus {
-         outline: none;
-         border-color: var(--line-active-color);
-      }
-   }
-
-   .unitSelector {
-      display: flex;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      border: 1px solid var(--field-line-color);
-      border-radius: 6px;
-      overflow: hidden;
-   }
-
-   .unit {
-      display: flex;
-      align-items: center;
-      text-align: center;
-      justify-content: center;
-      gap: 4px;
-      padding: 6px 12px;
-      font-size: 0.75rem;
-      width: 34px;
-      cursor: pointer;
-      color: var(--content-text-color);
-      background: transparent;
-      border-right: 1px solid var(--line-color);
-      transition: all 0.2s ease;
-
-      &:last-child {
-         border-right: none;
-      }
-
-      &:hover {
-         background: var(--background-color);
-      }
-
-      &.selected {
-         color: var(--primary-color);
-         background-color: var(--primary-color-light);
-      }
-   }
-
-   &.sizePickerInline {
-      .fieldInner {
-         display: flex;
-         flex-direction: row;
-         justify-content: space-between;
-         gap: 8px;
-      }
-      .input {
-         width: 50%;
-      }
-   }
-}
-
-@media only screen and (max-width: 768px) {
-   .sizePicker .unit {
-      padding: 6px;
-   }
-}

package/dist-lib/components/common/form/StoragePicker/StoragePicker.module.scss

@@ -1,114 +0,0 @@
-.storagePicker {
-   width: 100%;
-
-   .storagePickerInput {
-      width: 100%;
-      padding: 8px;
-      border: 1px solid var(--field-line-color);
-      border-radius: 6px;
-      box-sizing: border-box;
-      .storage {
-         width: 35%;
-         cursor: pointer;
-         img {
-            height: 18px;
-            width: auto;
-            margin-right: 5px;
-            vertical-align: top;
-         }
-         :global([class*='_dropdown_']) {
-            width: 100%;
-         }
-      }
-      .path {
-         width: calc(65% - 10px);
-         margin-left: 10px;
-         position: relative;
-         .fileManagerBtn {
-            position: absolute;
-            right: 1px;
-            top: 1px;
-            padding: 8px;
-            cursor: pointer;
-            color: var(--icon-color);
-            &:hover {
-               color: var(--primary-color);
-            }
-         }
-         div[class*='_inputField_'] input {
-            padding: 10px 12px;
-         }
-      }
-      & > div {
-         border-radius: 4px;
-         box-sizing: border-box;
-         font-size: 0.75rem;
-         display: flex;
-
-         button {
-            padding: 3px 8px;
-            background-color: var(--background-color);
-            color: var(--content-text-color);
-            font-size: 0.75rem;
-            border-radius: 4px;
-            margin-left: 5px;
-         }
-      }
-   }
-}
-
-.pickerContent {
-   .field {
-      margin-bottom: 20px;
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-   }
-
-   label {
-      font-weight: 600;
-      margin-bottom: 8px;
-      font-size: 0.75rem;
-      width: 55%;
-   }
-   .pickerFooter {
-      margin-top: 20px;
-      justify-content: right;
-      display: flex;
-      flex-direction: row;
-      gap: 10px;
-      button {
-         background-color: var(--line-color);
-         color: var(--content-text-color);
-         padding: 8px 16px;
-         border-radius: 4px;
-         font-size: 0.75rem;
-         transition: all 0.12s linear;
-         &:nth-child(2) {
-            background-color: var(--primary-color);
-            color: var(--primary-text-color);
-            &:hover {
-               background-color: var(--primary-hover-color);
-            }
-         }
-      }
-   }
-}
-
-@media only screen and (max-width: 768px) {
-   .storagePicker {
-      .storagePickerInput > div {
-         display: flex;
-         flex-direction: column;
-         .storage {
-            width: 100%;
-            margin-bottom: 10px;
-         }
-         .path {
-            width: 100%;
-            margin-left: 0px;
-         }
-      }
-   }
-}

package/dist-lib/components/common/form/TagsInput/TagsInput.module.scss

@@ -1,54 +0,0 @@
-.tagField {
-   width: 100%;
-
-   .tagBox {
-      width: 100%;
-      border: 1px solid var(--field-line-color);
-      border-radius: 6px;
-      padding: 7px;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      box-sizing: border-box;
-   }
-
-   .tag {
-      background: var(--background-color);
-      border: 1px solid var(--line-color);
-      font-size: 0.75rem;
-      padding: 0px 10px;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      span {
-         position: relative;
-         top: 2px;
-         opacity: 0.5;
-      }
-      i {
-         font-style: normal;
-         padding: 2px;
-         cursor: pointer;
-         opacity: 0.5;
-         &:hover {
-            opacity: 0.8;
-         }
-      }
-   }
-
-   .textInput {
-      input {
-         border: none;
-         font-size: 0.75rem;
-         font-family: inherit;
-         padding: 5px;
-         background-color: var(--content-background-color);
-         &:focus {
-            outline: none;
-            border: none;
-         }
-      }
-   }
-}

package/dist-lib/components/common/form/TimePicker/TimePicker.module.scss

@@ -1,73 +0,0 @@
-@use '../../../../styles/fields.scss';
-
-.timePickerField {
-   width: 130px;
-}
-
-.fieldInner {
-   width: auto;
-   position: relative;
-}
-
-.fieldLabel {
-   @extend %fieldLabel;
-}
-
-.currentTime {
-   border: 1px solid var(--field-line-color);
-   padding: 8px 10px;
-   border-radius: 6px;
-   display: flex;
-   justify-content: space-between;
-   cursor: pointer;
-   .dropBtn {
-      background: transparent;
-      color: var(--icon-color);
-   }
-}
-
-.timeSelect {
-   position: absolute;
-   background-color: var(--field-bg);
-   border: 1px solid var(--field-line-color);
-   padding: 10px;
-   border-radius: 0 0 6px 6px;
-   margin-top: -3px;
-}
-
-.times {
-   display: flex;
-
-   & > span {
-      padding: 5px;
-   }
-}
-
-.timeInput {
-   border: 1px solid var(--field-line-color);
-   padding: 5px;
-   border-radius: 6px;
-   width: 35px;
-   text-align: left;
-   color: inherit;
-}
-
-.ampm {
-   background-color: transparent;
-   border: none;
-   margin-top: 8px;
-   text-align: center;
-   button {
-      padding: 8px 15px;
-   }
-}
-
-.ampmActive {
-   background-color: var(--primary-color);
-   color: var(--primary-text-color);
-   border-radius: 4px;
-}
-
-.description {
-   @extend %fieldDescription;
-}

package/dist-lib/components/common/form/Toggle/Toggle.module.scss

@@ -1,68 +0,0 @@
-.toggleField {
-   &.toggleFieldInline {
-      .fieldInner {
-         width: 100%;
-         display: flex;
-         flex-direction: row;
-         justify-content: space-between;
-         gap: 12px;
-      }
-   }
-}
-
-.toggleCheckbox {
-   display: flex;
-   span {
-      // width: 250px;
-      display: inline-block;
-      font-size: 0.75rem;
-   }
-
-   input[type='checkbox'] {
-      height: 0;
-      width: 0;
-      margin: 0;
-      min-width: 0;
-      visibility: hidden;
-   }
-
-   label {
-      cursor: pointer;
-      text-indent: -9999px;
-      width: 32px;
-      height: 18px;
-      background: var(--line-active-color);
-      display: inline-block;
-      border-radius: 30px;
-      position: relative;
-   }
-
-   label:after {
-      content: '';
-      position: absolute;
-      top: 3px;
-      left: 3px;
-      width: 12px;
-      height: 12px;
-      background: var(--content-background-color);
-      border-radius: 30px;
-      transition: 0.3s;
-   }
-
-   input:checked + label {
-      background: linear-gradient(135deg, #8778ff 0%, #526ec7 100%);
-   }
-
-   input:checked + label:after {
-      left: calc(100% - 3px);
-      transform: translateX(-100%);
-   }
-
-   label:active:after {
-      width: 30px;
-   }
-}
-
-.description {
-   padding-left: 10px;
-}

package/dist-lib/components/common/form/Tristate/Tristate.module.scss

@@ -1,67 +0,0 @@
-@use '../../../../styles/fields.scss';
-
-.tristateField {
-   .fieldInner {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      width: 100%;
-   }
-
-   .inputGroup {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-   }
-
-   .optionSelector {
-      display: flex;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      border: 1px solid var(--field-line-color);
-      border-radius: 6px;
-      overflow: hidden;
-   }
-
-   .option {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 5px 12px;
-      font-size: 0.75rem;
-      cursor: pointer;
-      color: var(--content-text-color);
-      background: transparent;
-      border-right: 1px solid var(--field-line-color);
-      transition: all 0.2s ease;
-
-      &:last-child {
-         border-right: none;
-      }
-
-      &:hover {
-         background: var(--background-color);
-      }
-
-      &.selected {
-         background: var(--primary-color);
-         color: var(--primary-text-color);
-      }
-
-      &.optionDisabled {
-         opacity: 0.6;
-         user-select: none;
-         cursor: not-allowed;
-      }
-   }
-
-   &.tristateInline {
-      .fieldInner {
-         display: flex;
-         flex-direction: row;
-         gap: 1.25rem;
-         align-items: center;
-      }
-   }
-}