@metadev/daga 1.0.0

package/assets/styles/styles.scss

@@ -0,0 +1,181 @@
+:root {
+  --font-color: #233154;
+  --panel-background-color: #ffffff;
+  --panel-secondary-color: #f7f8fc;
+  --panel-border-color: #e6e6e6;
+  --property-background-color: #f5f8fa;
+  --property-border-color: #e1e4ff;
+  --modal-border-color: #e5e5e5;
+  --button-color: #d7dee5;
+  --error-color: #ff6363;
+  --accept-color: #63ff63;
+  --button-text-color: #000000;
+  --metadev-blue-1: #0e74b6;
+
+  --font-color-disabled: #808080;
+  --monospace-font-family: 'DM Mono', monospace;
+  --lux-disabled-border-color: var(--property-border-color);
+  --lux-disabled-color: var(--property-background-color);
+  --lux-input-border-color: var(--property-border-color);
+  --lux-radiogroup-color: var(--font-color);
+  --lux-radiogroup-selected-background-color: #0095f9;
+  --lux-border-radius: 0.25rem;
+  --lux-autocomplete-input-padding: 0 0.5rem;
+  --lux-autocomplete-icon-clear: url(../icon/action/filter-clear.png) no-repeat
+    center;
+  --lux-autocomplete-icon-dropdown: url(../icon/action/drop-down-arrow.svg)
+    no-repeat center;
+}
+
+header,
+footer,
+div,
+h1,
+p,
+li,
+button,
+input,
+option {
+  font-family: 'Wonder Unit Sans', sans-serif;
+}
+code {
+  font-family: var(--monospace-font-family);
+}
+
+.prevent-user-select {
+  user-select: none;
+}
+
+.top-left {
+  left: 0;
+  top: 0;
+}
+.top-right {
+  right: 0;
+  top: 0;
+}
+.bottom-left {
+  bottom: 0;
+  left: 0;
+}
+.bottom-right {
+  bottom: 0;
+  right: 0;
+}
+.panel {
+  &.bottom {
+    flex-flow: column;
+  }
+  &.top {
+    flex-flow: column-reverse;
+  }
+  &.right {
+    flex-flow: row;
+  }
+  &.left {
+    flex-flow: row-reverse;
+  }
+  background-color: var(--panel-secondary-color);
+  border: 1px solid var(--panel-border-color);
+  border-radius: 1rem;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  margin: 1rem;
+  max-height: calc(100% - 2rem);
+  max-width: calc(100% - 2rem);
+  position: absolute;
+  width: fit-content;
+  .collapse-button {
+    &.bottom {
+      border-radius: 0.75rem 0.75rem 0 0;
+    }
+    &.top {
+      border-radius: 0 0 0.75rem 0.75rem;
+    }
+    &.right {
+      border-radius: 0.75rem 0 0 0.75rem;
+    }
+    &.left {
+      border-radius: 0 0.75rem 0.75rem 0;
+    }
+  }
+  .panel-content {
+    background-color: var(--panel-background-color);
+    border: 0;
+    border-radius: 1rem;
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+  .panel-tabs {
+    background-color: var(--panel-secondary-color);
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    padding-top: 0.5rem;
+    .panel-tab {
+      &.current-tab {
+        background-color: var(--panel-background-color);
+        border-top-left-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+      }
+      flex-grow: 1;
+      flex-shrink: 0;
+      padding: 0.5rem;
+      text-align: center;
+      user-select: none;
+    }
+  }
+}
+
+daga-property-editor {
+  .property {
+    color: var(--font-color);
+    :disabled,
+    .disabled {
+      color: var(--font-color-disabled);
+    }
+    input,
+    select,
+    textarea,
+    button,
+    .radio-item {
+      background-color: var(--property-background-color);
+      border: 1px solid var(--property-border-color);
+      font-weight: 500;
+      font-size: 0.8rem;
+    }
+    input,
+    select,
+    textarea {
+      border-radius: var(--lux-border-radius);
+      box-sizing: border-box;
+      font-family: var(--monospace-font-family);
+      width: 100%;
+    }
+    input,
+    select {
+      height: 1.5rem;
+    }
+    select {
+      padding: 0 0.5rem;
+    }
+    textarea {
+      height: 5rem;
+      padding: var(--lux-input-padding, 0rem 0.5rem);
+      resize: none;
+    }
+    .radio-item {
+      &.radio-start {
+        border-bottom-left-radius: var(--lux-border-radius);
+        border-top-left-radius: var(--lux-border-radius);
+      }
+      &.radio-end {
+        border-bottom-right-radius: var(--lux-border-radius);
+        border-top-right-radius: var(--lux-border-radius);
+      }
+      width: 50%;
+    }
+  }
+}