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

1
src/styles/_layout.scss
View file

@ -9,6 +9,7 @@ $content-gap: 50px;
$block-outer-padding: 20px; $block-outer-padding: 20px;
$block-inner-padding: 20px; $block-inner-padding: 20px;
$input-padding: 10px;
$wide-content-width: 600px; $wide-content-width: 600px;
$wide-sidebar-width: 400px; $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/layout";
@import "../styles/theme"; @import "../styles/theme";
$form-inner-padding: 10px;
.input-group { .input-group {
margin-bottom: $block-outer-padding; margin-bottom: $block-outer-padding;
label { label {
display: block; display: block;
font-weight: bold; font-weight: bold;
margin-bottom: $form-inner-padding; margin-bottom: $input-padding;
} }
.sub-label { .sub-label {
@ -245,7 +243,7 @@ $form-inner-padding: 10px;
.image-upload-group { .image-upload-group {
display: grid; display: grid;
gap: $form-inner-padding; gap: $input-padding;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
margin-bottom: $block-outer-padding; margin-bottom: $block-outer-padding;
@ -256,8 +254,8 @@ $form-inner-padding: 10px;
.extra-field { .extra-field {
display: flex; display: flex;
gap: $form-inner-padding; gap: $input-padding;
margin-bottom: $form-inner-padding; margin-bottom: $input-padding;
position: relative; position: relative;
input { input {
@ -300,7 +298,7 @@ $form-inner-padding: 10px;
img { img {
filter: $link-colorizer; filter: $link-colorizer;
height: 20px; height: $icon-size;
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }