Initial

resources/app/public/less2/elements/custom.less

@@ -0,0 +1,156 @@
+/* ----------------------------------------- */
+/*  Common Sub-Elements                      */
+/* ----------------------------------------- */
+
+.tags.input-element-tags {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.25rem;
+  .tag {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 1px 0.25rem;
+    font-size: var(--font-size-12);
+    border: 1px solid var(--color-border-dark-3);
+    border-radius: 4px;
+  }
+}
+
+/* ----------------------------------------- */
+/*  ColorPicker Element                      */
+/* ----------------------------------------- */
+
+color-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  > input[type=text] {
+    flex: 1;
+  }
+  > input[type=color] {
+    flex: 0 0 40px;
+    height: 40px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+}
+
+/* ----------------------------------------- */
+/*  MultiSelect Element                      */
+/* ----------------------------------------- */
+
+multi-select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  select {
+    width: 100%;
+  }
+}
+
+multi-checkbox {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+/* ----------------------------------------- */
+/*  ProseMirror Editor Element               */
+/* ----------------------------------------- */
+
+prose-mirror {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 150px;
+  .editor-content {
+    flex: 1;
+    padding: 0.25rem;
+  }
+  button.toggle {
+    display: none;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: var(--form-field-height);
+    height: var(--form-field-height);
+    line-height: var(--form-field-height);
+    padding: 0;
+  }
+  &.inactive:hover button.toggle {
+    display: block;
+  }
+}
+
+/* ----------------------------------------- */
+/*  RangePicker Element                      */
+/* ----------------------------------------- */
+
+range-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  > input[type=range] {
+    flex: 1;
+  }
+  > input[type=number] {
+    flex: 0 0 40px;
+    text-align: center;
+    padding: 0;
+    font-size: 0.8em;
+  }
+}
+
+/* ----------------------------------------- */
+/*  Tags Elements                            */
+/* ----------------------------------------- */
+
+document-tags,
+string-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  > input {
+    flex: 1;
+  }
+  > button {
+    margin: -2px 0;
+    padding: 0;
+    flex: 0 0 36px;
+    line-height: var(--form-field-height);
+  }
+}
+
+/* ----------------------------------------- */
+/*  FilePicker Element                       */
+/* ----------------------------------------- */
+
+file-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  > button {
+    margin: -2px 0;
+    padding: 0;
+    flex: 0 0 36px;
+    line-height: var(--form-field-height);
+  }
+}
+
+/* ----------------------------------------- */
+/*  Content Links                            */
+/* ----------------------------------------- */
+
+.content-link, .inline-roll {
+  --content-link-background: rgb(0 0 0 / 10%);
+  background: var(--content-link-background);
+}