merge

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -1,4 +1,5 @@
 
 $c-purple: #3A0839;
+$c-pastel-purple: #B3A0B2;
 $c-orange: #FF512F;
 $c-white : #FFFFFF;

app/build/mojs-curve-editor.min.js

@@ -3,30 +3,32 @@
 .code-panel {
   position:       absolute;
   left:           calc( 10 * $PX );
-  top:            calc( -32 * $PX );
-  width:          calc( 391 * $PX );
-  height:         calc( 32 * $PX );
-  margin:         0 auto;
+  right:          calc( 10 * $PX );
+  margin-top:     calc( -32 * $PX );
   border-radius:  calc( 6 * $PX ) calc( 6 * $PX ) 0 0;
   background:     rgba( 61, 27, 60, 1 );
   z-index:        1;
 
-  &__input-wrapp {
-    width:          381px;
-    height:         23px;
-    margin:         5px 5px;
+  &__input-wrap {
+    margin:         calc( 5 * $PX );
     border-radius:  calc( 2 * $PX );
     background:     rgba( 58, 8, 58, 1 );
-    border:         1px solid #B3A0B2;
-    box-shadow:     inset 3px 3px 0 rgba(0,0,0,0.5);
+    border:         1px solid $c-pastel-purple;
+    box-shadow:     inset calc( 3 * $PX ) calc( 3 * $PX ) 0 rgba(0,0,0,0.5);
   }
 
   &__input-field {
     display:    block;
     background: transparent;
     color:      $c-white;
-    padding:    0.4em;
+    font-size:  9px;
+    letter-spacing: 0.45px;
+    font-weight: 100;
+    padding:    0.4em 0.3em 0.6em 0.8em;
     border:     none;
     width:      100%;
   }
+   & ::selection {
+     background: $c-orange;
+   }
 }

app/css/assets/colors.postcss.css

@@ -1 +1 @@
-{"code-panel":"_code-panel_1pe78_3","code-panel__input-wrapp":"_code-panel__input-wrapp_1pe78_1","code-panel__input-field":"_code-panel__input-field_1pe78_1"}
+{"code-panel":"_code-panel_t4jil_3","code-panel__input-wrap":"_code-panel__input-wrap_t4jil_1","code-panel__input-field":"_code-panel__input-field_t4jil_1"}

app/css/blocks/code-panel.postcss.css

@@ -1 +1 @@
-{"curve":"_curve_1jj2s_5","curve__svg-wrapper":"_curve__svg-wrapper_1jj2s_1","curve__svg":"_curve__svg_1jj2s_1","curve__svg-segment":"_curve__svg-segment_1jj2s_1"}
+{"curve":"_curve_1gafb_5","curve__svg-wrapper":"_curve__svg-wrapper_1gafb_1","curve__svg":"_curve__svg_1gafb_1","curve__svg-segment":"_curve__svg-segment_1gafb_1"}

app/css/blocks/code-panel.postcss.css.json

@@ -1,8 +1,8 @@
 
 
 <code-panel class={ this.CLASSES['code-panel'] }>
-  <div class={ this.CLASSES['code-panel__input-wrapp'] }>
-    <input class={ this.CLASSES['code-panel__input-field'] } type="text" readonly="readonly" value="M0,100 C0,100 12.0486221,-124.260309 24,99.7583642 C28.9933624,142.723104 " />
+  <div class={ this.CLASSES['code-panel__input-wrap'] }>
+    <input class={ this.CLASSES['code-panel__input-field'] } type="text" readonly="readonly" value="M0,100 C0,100 12.0486221,-124.260309 24,99.7583642 C28.9933624,142.723104" />
   </div>
 
   <script>

app/css/blocks/curve.postcss.css

@@ -13,8 +13,8 @@ require('./point-controls');
   -->
 
 <curve-editor class={this.CLASSES['curve-editor']} style={this.getStyle()}>
-  <icons />
   <code-panel />
+  <icons />
   <div class={this.CLASSES['curve-editor__left']}>
     <icon-button shape="code"></icon-button>
     <icon-divider />