diff --git a/components/InviteForm.tsx b/components/InviteForm.tsx index fc46ad9..639a472 100644 --- a/components/InviteForm.tsx +++ b/components/InviteForm.tsx @@ -104,31 +104,35 @@ export default class InviteForm extends React.Component { return (
diff --git a/styles/_button.styl b/styles/_button.styl index 8fb88b4..b4c7837 100644 --- a/styles/_button.styl +++ b/styles/_button.styl @@ -1,6 +1,7 @@ .btn border-radius 3px padding 1em + border 0 font-size 14px cursor pointer &:disabled diff --git a/styles/_input.styl b/styles/_input.styl index 4a559d3..d8882d6 100644 --- a/styles/_input.styl +++ b/styles/_input.styl @@ -1,10 +1,9 @@ .input - width 100% height 45px padding 0.5em 1em box-sizing border-box font-size inherit - border 2px solid rgba(0, 0, 0, 0.3) + border 1px solid rgba(0, 0, 0, 0.3) border-radius 5px background #fff outline 0 diff --git a/styles/style.styl b/styles/style.styl index 0dac38f..0631800 100644 --- a/styles/style.styl +++ b/styles/style.styl @@ -113,62 +113,61 @@ section:first-child margin-top 0 .form + display flex + flex-direction column .btn background linkColor - border-bottom 2px solid #117280 color rgba(255, 255, 255, 0.9) + margin-left 0.5rem &.sending - .btn - display none .invite-form__loader display block -.invite-form + +.controls-wrapper + display flex + @media screen and (max-width: 450px) + flex-direction column + .btn + margin 0 + margin-top 0.5rem + +.input-wrapper position relative - .form__field - display flex - flex-flow column-reverse - margin-bottom 1em + flex-grow 1 + width 400px + @media screen and (max-width: 650px) + width auto + +.invite-form + margin-top 0.5rem + position relative + .input + width 100% .invite-form__input - padding-right 5em - .input, + padding-right 2em + .label - transition all 0.2s - .input:placeholder-shown + .label - max-width 66.66% - white-space nowrap - overflow hidden - text-overflow ellipsis - transform-origin left bottom - transform translate(18px, 36px) scale(1.2) - cursor text - font-weight 400 + margin-bottom 0.5rem + font-size 0.9rem opacity 0.6 - .input:not(:placeholder-shown) + .label, - .input:focus + .label - transform translate(0, 0) scale(1) - cursor pointer - font-weight 600 - opacity 1 - .input::-webkit-input-placeholder - opacity 0 - .input:focus::-webkit-input-placeholder - opacity 1 + display block + .btn - height 32px - padding 0 10px - position absolute - right 8px - bottom 7px + height 45px + font inherit + border-radius 15px + padding 0.5rem 3rem color #fff &:active border-bottom 0 .invite-form__loader display none - width 20px - height 20px + width 10px + height 10px position absolute - right 14px - top 14px + right 1rem + top 50% + margin-top -5px .code-of-conduct margin-bottom 0