style(core): text + symplify & modulify

src/components/widgets/Crypto.js

@@ -45,12 +45,7 @@ class Crypto extends Component {
         {edit ? (
           <form onSubmit={this.savePair}>
             <h3>{'Edit pair'}</h3>
-            <div className='y'>
-              <TextInput ref='text' defaultValue={pair} placeholder='Pair name' />
-              <button className='btn btn-icon'>
-                <i className='ion-checkmark-circled' />
-              </button>
-            </div>
+            <TextInput ref='text' defaultValue={pair} placeholder='Pair name' />
           </form>
         ) : (
           <div className='z'>

src/components/widgets/Rss.js

@@ -22,12 +22,7 @@ class Rss extends Component {
         {(edit || !feed) && (
           <form onSubmit={::this.saveFeed}>
             <h3>{'RSS'}</h3>
-            <div>
-              <TextInput ref='text' defaultValue={feed} placeholder='Feed url' />
-              <button className='btn btn-icon'>
-                <i className='ion-checkmark-circled' />
-              </button>
-            </div>
+            <TextInput ref='text' defaultValue={feed} placeholder='Feed url' />
           </form>
         )}
 

src/components/widgets/StackOverflow.js

@@ -25,12 +25,7 @@ class StackOverflow extends Component {
         {edit && (
           <form onSubmit={::this.saveTag}>
             <h3>{'Edit your tag'}</h3>
-            <div>
-              <TextInput defaultValue={tag} ref='text' placeholder='Tag' />
-              <button className='btn btn-icon'>
-                <i className='ion-checkmark-circled' />
-              </button>
-            </div>
+            <TextInput defaultValue={tag} ref='text' placeholder='Tag' />
           </form>
         )}
 

src/styles/app.scss

@@ -36,47 +36,6 @@ $blue: #268bd2;
   background: $cb1;
 }
 
-// utility
-
-.f {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.fac {
-  display: flex;
-  align-items: center;
-}
-
-.y {
-  display: flex;
-}
-
-.z {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.za {
-  display: flex;
-  align-items: center;
-}
-
-.s {
-  border: 2px solid transparent;
-  &:active {
-    border-color: $cb15;
-    &:focus { border-color: $cb1; }
-  }
-  &:focus {
-    border-color: $cb2;
-  }
-}
-
 html, body { height: 100%; }
 
 body {
@@ -256,47 +215,14 @@ body {
   }
 }
 
-.DropWrapper {
-  flex-direction: column;
-  align-items: stretch;
-}
-
 .WidgetWrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.DragButton { cursor: grab !important; }
-.DragButton:active { cursor: grabbing !important; }
-
-.DragZone {
-  height: 4px;
-  background: transparent;
-  transition: 80ms ease-out all;
-  position: relative;
-  margin: 10px auto;
-  width: 150px;
-
-  &.top { margin-top: -24px; }
-  &.visible {
-    background-color: rgba(black, 0.1);
-    margin: 20px auto;
-  }
-  &.active {
-    background-color: cyan;
-    z-index: 2;
-  }
-}
-
-@keyframes blink {
-  50% { opacity: 0; }
-}
-
-.blink {
-  animation: blink 1s step-start 0s infinite;
-}
-
+@import 'utils';
 @import 'buttons';
 @import 'widgets';
 @import 'inputs';
+@import 'drag';

src/styles/drag.scss

@@ -0,0 +1,26 @@
+.DropWrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.DragButton { cursor: grab !important; }
+.DragButton:active { cursor: grabbing !important; }
+
+.DragZone {
+  height: 4px;
+  background: transparent;
+  transition: 80ms ease-out all;
+  position: relative;
+  margin: 10px auto;
+  width: 150px;
+
+  &.top { margin-top: -24px; }
+  &.visible {
+    background-color: rgba(black, 0.1);
+    margin: 20px auto;
+  }
+  &.active {
+    background-color: cyan;
+    z-index: 2;
+  }
+}

src/styles/inputs.scss

@@ -1,9 +1,9 @@
 input[type='text'] {
-  border-bottom: 2px solid rgba(black, .1);
+  border: 1px solid rgba(black, .1);
   padding: 5px 3px;
-  transition: border-bottom-color 150ms ease-in;
+  transition: border-color 150ms ease-in;
   line-height: 1.5em;
   &:focus {
-    border-bottom-color: rgba($blue, .8);
+    border-color: rgba($blue, .8);
   }
 }

src/styles/utils.scss

@@ -0,0 +1,42 @@
+.f {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.fac {
+  display: flex;
+  align-items: center;
+}
+
+.z {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.za {
+  display: flex;
+  align-items: center;
+}
+
+.s {
+  border: 2px solid transparent;
+  &:active {
+    border-color: $cb15;
+    &:focus { border-color: $cb1; }
+  }
+  &:focus {
+    border-color: $cb2;
+  }
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.blink {
+  animation: blink 1s step-start 0s infinite;
+}

src/styles/widgets.scss

@@ -30,7 +30,7 @@
   }
 
   input[type=text] {
-    width: 90%;
+    width: 100%;
   }
 
 }