LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Packages Projects Releases Wiki Activity

Newsletter signup is responsive

Browse source
This commit is contained in:
ポール ウェッブ 2018-06-06 17:28:52 -05:00
parent 99b357889e
commit 9c5bbf189c
1 changed files with 56 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
content/.vuepress/components/EmailSubscribe.vue
View file

@ -62,9 +62,16 @@ export default {
> div:first-of-type { > div:first-of-type {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
@media (min-width: 551px) {
width: 500px; width: 500px;
} }
@media (max-width: 550px) {
width: 90%;
}
}
&::after { &::after {
@include clearfix; @include clearfix;
} }
@ -82,27 +89,55 @@ export default {
@extend .__button-padding-horizontal; @extend .__button-padding-horizontal;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
@media (max-width: 550px) {
width: 100%;
}
} }
.newsletter-cta__input { .newsletter-cta__input {
width: calc(100% - 112px); height: 38px;
background-color: $white; background-color: $white;
float: left; font-size: 1rem;
height: 38px;
transition: border 0.2s; transition: border 0.2s;
@media (min-width: 551px) {
float: left;
width: calc(100% - 112px);
}
@media (max-width: 550px) {
text-align: center;
}
&:not(:focus) { &:not(:focus) {
border-top-color: $black; border-top-color: $black;
border-right-color: transparent;
border-bottom-color: $black;
border-left-color: $black; border-left-color: $black;
@media (min-width: 551px) {
border-bottom-color: $black;
border-right-color: transparent;
}
@media (max-width: 550px) {
border-bottom-color: transparent;
border-right-color: $black;
}
} }
&:focus { &:focus {
border-top-color: mix($black, $teal, 20%); border-top-color: mix($black, $teal, 20%);
border-right-color: transparent;
border-bottom-color: mix($black, $teal, 20%);
border-left-color: mix($black, $teal, 20%); border-left-color: mix($black, $teal, 20%);
@media (min-width: 551px) {
border-bottom-color: mix($black, $teal, 20%);
border-right-color: transparent;
}
@media (max-width: 550px) {
border-bottom-color: transparent;
border-right-color: mix($black, $teal, 20%);
}
} }
} }
@ -110,9 +145,17 @@ export default {
@extend .__button-basic; @extend .__button-basic;
@extend .__button-padding-vertical; @extend .__button-padding-vertical;
color: $white; color: $white;
@media (min-width: 551px) {
float: right; float: right;
left: -1px; left: -1px;
width: 112px; width: 112px;
}
@media (max-width: 550px) {
display: block;
top: -1px;
}
&:not(:hover) { &:not(:hover) {
background-color: $black; background-color: $black;
@ -126,7 +169,8 @@ export default {
} }
.newsletter-cta__message { .newsletter-cta__message {
@include clearfix;
color: $red;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem;
} }
</style> </style>