diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 0f1c7a3..55c4624 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -224,18 +224,18 @@ sib-form-date { } sib-form-file { - margin-top: 1.8rem; div { display: flex; - flex-direction: row-reverse; + flex-direction: column-reverse; align-items: center; - justify-content: flex-end; - - input[type='text'] { - margin-bottom: 0.8rem; + margin-top: 1.8rem; + + @include breakpoint(lg) { + flex-direction: row-reverse; + justify-content: flex-end; } - + input[type='file'] { height: 0.1px; opacity: 0; @@ -244,6 +244,15 @@ sib-form-file { width: 0.1px; z-index: -1; } + + input[type='text'] { + margin-bottom: 0.8rem; + width: 100%; + + @include breakpoint(lg) { + width: auto; + } + } label { @extend .button, @@ -251,27 +260,14 @@ sib-form-file { .text-uppercase, .button-primary, .bordered; - margin: auto 2.2rem; + text-align: center; + width: 100%; + + @include breakpoint(lg) { + margin: auto 2.2rem; + width: auto; + } } - - input[type='file']:focus, - label:hover ~ input[type='file'] { - background-color: var(--color-secondary); - } - - label ~ input[type='file']:focus { - outline: 1px dotted #000; - outline: -webkit-focus-ring-color auto 5px; - } - - /*label { - align-items: baseline; - clear: both; - display: flex; - flex-direction: row; - flex-wrap: wrap; - max-width: 100%; - }*/ } }