fix(styling): fix unwanted top range control alignment in module insp…

…ector (#806)

src/components/ActiveModule.vue

@@ -44,7 +44,7 @@
  }"
  >
  <c span="2">Alpha</c>
- <c span="4">
+ <c span="4" class="active-module__alpha-input">
  <Range
  value="1"
  min="0"

src/components/Control.vue

@@ -248,4 +248,10 @@ input[type="number"] {
  color: #fff;
  padding: 2px 3px;
 }
+
+.input {
+ display: flex;
+ align-items: center;
+ height: 100%;
+}
 </style>

src/components/Controls/CollapsibleControl.vue

@@ -1,5 +1,5 @@
 <template>
- <fragment>
+ <div>
  <c span="1.." class="label-row" :class="{ disabled }">
  <grid columns="4">
  <c span="1">
@@ -15,7 +15,7 @@
  </c>
 
  <slot name="body" v-if="!disabled && open" />
- </fragment>
+ </div>
 </template>
 
 <script>

src/components/Controls/RangeControl.vue

@@ -382,5 +382,6 @@ div {
  height: 16px;
  display: inline-block;
  vertical-align: top;
+ line-height: 0;
 }
 </style>

src/components/Controls/Vec2DControl.vue

@@ -9,7 +9,7 @@
  @mousedown.stop="focusInput('0', 'x')"
  >
  <c span="1+1">X</c>
- <c span="3">
+ <c span="3" class="input">
  <RangeControl
  :min="-1"
  :max="1"
@@ -26,7 +26,7 @@
  @mousedown.stop="focusInput('1', 'y')"
  >
  <c span="1+1">Y</c>
- <c span="3">
+ <c span="3" class="input">
  <RangeControl
  :min="-1"
  :max="1"

src/components/inputs/Number.vue

@@ -40,6 +40,5 @@ input {
  padding: 0 4px;
  box-sizing: border-box;
  width: 100%;
- vertical-align: top;
 }
 </style>

src/components/inputs/Range.vue

@@ -1,11 +1,13 @@
 <template>
- <RightClickNumberInput v-bind="$props" @input="handleNumberInput">
- <input
+ <RightClickNumberInput
+ v-bind="$props"
+ @input="handleNumberInput"
+ class="range-control__number"
+ ><input
  type="range"
  @input="$emit('input', parseFloat($event.target.value, 10))"
  v-bind="$props"
- />
- </RightClickNumberInput>
+ /></RightClickNumberInput>
 </template>
 
 <script>
@@ -36,6 +38,12 @@ export default {
 </script>
 
 <style scoped>
+.range-control__number {
+ width: 100%;
+ height: 16px;
+ display: flex;
+}
+
 input {
  -webkit-appearance: none;
  background: transparent;