diff --git a/src/components/widgets/Crypto.js b/src/components/widgets/Crypto.js
index 10dde70..b4be071 100644
--- a/src/components/widgets/Crypto.js
+++ b/src/components/widgets/Crypto.js
@@ -45,12 +45,7 @@ class Crypto extends Component {
{edit ? (
diff --git a/src/components/widgets/Rss.js b/src/components/widgets/Rss.js
index 8ead539..f162af5 100644
--- a/src/components/widgets/Rss.js
+++ b/src/components/widgets/Rss.js
@@ -22,12 +22,7 @@ class Rss extends Component {
{(edit || !feed) && (
)}
diff --git a/src/components/widgets/StackOverflow.js b/src/components/widgets/StackOverflow.js
index 675055b..4edd374 100644
--- a/src/components/widgets/StackOverflow.js
+++ b/src/components/widgets/StackOverflow.js
@@ -25,12 +25,7 @@ class StackOverflow extends Component {
{edit && (
)}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index c1917bc..db80168 100644
--- a/src/styles/app.scss
+++ b/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';
diff --git a/src/styles/drag.scss b/src/styles/drag.scss
new file mode 100644
index 0000000..cc96bb9
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss
index 9ed01e9..61e37c7 100644
--- a/src/styles/inputs.scss
+++ b/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);
}
}
diff --git a/src/styles/utils.scss b/src/styles/utils.scss
new file mode 100644
index 0000000..5c6e939
--- /dev/null
+++ b/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;
+}
diff --git a/src/styles/widgets.scss b/src/styles/widgets.scss
index 9d81f31..33a37a4 100644
--- a/src/styles/widgets.scss
+++ b/src/styles/widgets.scss
@@ -30,7 +30,7 @@
}
input[type=text] {
- width: 90%;
+ width: 100%;
}
}