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 ? (

{'Edit pair'}

-
- - -
+ ) : (
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) && (

{'RSS'}

-
- - -
+ )} 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 && (

{'Edit your tag'}

-
- - -
+ )} 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%; } }