FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Define SCSS variable for form field padding

Browse source
This commit is contained in:
silverpill 2022-06-08 12:35:53 +00:00
parent 8af6af1f8f
commit 4d6ff7b386
3 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.vue
View file

@ -107,7 +107,7 @@ textarea {
font-family: $text-font;
font-size: $text-font-size;
margin: 0;
padding: 10px;
padding: $input-padding;
width: 100%;
&:focus {
@ -153,7 +153,7 @@ button {
display: inline-block;
font-size: $text-font-size;
font-weight: bold;
padding: 10px 30px;
padding: $input-padding 30px;
white-space: nowrap;
&:hover {

1
src/styles/_layout.scss
View file

@ -9,6 +9,7 @@ $content-gap: 50px;
$block-outer-padding: 20px;
$block-inner-padding: 20px;
$input-padding: 10px;
$wide-content-width: 600px;
$wide-sidebar-width: 400px;

12
src/views/ProfileForm.vue
View file

@ -218,15 +218,13 @@ export default class ProfileForm extends Vue {
@import "../styles/layout";
@import "../styles/theme";
$form-inner-padding: 10px;
.input-group {
margin-bottom: $block-outer-padding;
label {
display: block;
font-weight: bold;
margin-bottom: $form-inner-padding;
margin-bottom: $input-padding;
}
.sub-label {
@ -245,7 +243,7 @@ $form-inner-padding: 10px;
.image-upload-group {
display: grid;
gap: $form-inner-padding;
gap: $input-padding;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
margin-bottom: $block-outer-padding;
@ -256,8 +254,8 @@ $form-inner-padding: 10px;
.extra-field {
display: flex;
gap: $form-inner-padding;
margin-bottom: $form-inner-padding;
gap: $input-padding;
margin-bottom: $input-padding;
position: relative;
input {
@ -300,7 +298,7 @@ $form-inner-padding: 10px;
img {
filter: $link-colorizer;
height: 20px;
height: $icon-size;
margin-right: 5px;
vertical-align: middle;
}