discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Footer subscription form style fix

Browse Source
This commit is contained in:
kvakazyambra 2023-09-01 00:53:07 +03:00
parent 8ed92a3347
commit 3a61460af1
2 changed files with 6 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Discours/Subscribe.module.scss
View File

@ -1,22 +1,8 @@
@mixin input-placeholder-overflow($direction: 'down') {
@if $direction == 'down' {
@media (width <= 1410px) {
@content;
}
} @else if $direction == 'up' {
@media (width > 1410px) {
@content;
}
} @else {
@error "Unknown direction #{$direction}.";
}
}
.form { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include input-placeholder-overflow(down) { @include media-breakpoint-down(xxl) {
margin-bottom: 2.4rem; margin-bottom: 2.4rem;
} }
} }
@ -25,13 +11,12 @@
display: flex; display: flex;
width: 100%; width: 100%;
@include input-placeholder-overflow(down) { @include media-breakpoint-down(xxl) {
flex-direction: column; flex-direction: column;
} }
.input { .input {
@include font-size(2rem); @include font-size(2rem);
background: none; background: none;
color: #fff; color: #fff;
font-family: inherit; font-family: inherit;
@ -45,11 +30,11 @@
border-radius: 0; border-radius: 0;
height: 4rem; height: 4rem;
@include input-placeholder-overflow(up) { @include media-breakpoint-up(xxl) {
border-right: none; border-right: none;
} }
@include input-placeholder-overflow(down) { @include media-breakpoint-down(xxl) {
border-bottom: none; border-bottom: none;
} }
@ -62,7 +47,7 @@
border-radius: 0; border-radius: 0;
flex-shrink: 0; flex-shrink: 0;
@include input-placeholder-overflow(down) { @include media-breakpoint-down(xxl) {
width: 100%; width: 100%;
} }
} }

2
src/styles/_globals.scss
View File

@ -10,7 +10,7 @@ $grid-breakpoints: (
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px, xl: 1200px,
// xxl: 1500px, xxl: 1400px
) !default; ) !default;
$default-color: #141414; $default-color: #141414;
$link-color: #2638d9; $link-color: #2638d9;