Refactor styling for form elements
MODIFY
resources/assets/sass/components/helpers.scss
resources/assets/sass/components/helpers.scss
.text-center {
text-align: center;
}
+
+.ml-2 {
+ margin-left: 20px;
+}

MODIFY
resources/assets/sass/components/input.scss
resources/assets/sass/components/input.scss
@import '../variables/colors';
-progress {
- width: 100%;
- height: 6px;
- -webkit-appearance: none;
- display: block;
-
- &::-webkit-progress-value, &::-webkit-progress-bar {
- border-radius: 4px;
- }
-
- &::-webkit-progress-value {
- background: $colors-primary;
- }
-
- &::-webkit-progress-bar {
- background: $colors-border;
- }
-}
-
-label, input, button, select {
- display: block;
-}
-
-label {
- padding-bottom: 16px;
-}
-
-input, select, button {
+input, button {
font: inherit;
- border-radius: 4px;
-
- &:focus {
- outline: 0;
- }
+ border-radius: 5px;
}
-input, select {
- margin-bottom: 32px;
- padding: 12px;
+input {
+ padding: 10px;
width: 100%;
border: 1px solid $colors-border;
-
- &.tight {
- margin: 0;
- }
+ -webkit-appearance: none;
&:focus {
+ outline: 0;
border-color: $colors-primary;
+ box-shadow: 0 0 0 3px rgba($colors-primary, .25);
}
}
-/* button {
- padding: 12px 24px;
- background: $colors-primary;
+button {
+ padding: 10px 20px;
+ font-size: 14px;
color: #FFF;
+ background: $colors-primary;
border: none;
&:hover {
cursor: pointer;
}
-} */
-
-form.action {
- display: inline-block;
-
- button {
- padding: 0;
- display: inline-block;
- background: none;
- color: $colors-primary;
- }
}

MODIFY
resources/assets/sass/components/row.scss
resources/assets/sass/components/row.scss
&.row__column--compact {
flex: none;
}
+
+ &.row__column--middle {
+ align-self: center;
+ }
}
.column {

MODIFY
resources/views/settings.blade.php
resources/views/settings.blade.php
<div class="box__section">
<form method="POST" action="/tags">
{{ csrf_field() }}
+ <div class="row">
+ <div class="row__column" style="max-width: 400px;">
<input type="text" name="name" />
@include('partials.validation_error', ['payload' => 'name'])
+ </div>
+ <div class="row__column row__column--compact row__column--middle ml-2">
<button>Submit</button>
+ </div>
+ </div>
</form>
</div>
</div>

Refactor styling for form elements