Skip to content

Commit 51ca7e6

Browse files
SebKaySebKay
authored
Sass tweaks (#24)
* Adjust form and button styling * Add helpers SCSS file * Add text alignment helpers * Add full width button style * Tweak styling of login page * Tweak styling of register page * Fix button font * Make links brand color * Update Show.vue
1 parent 183c4a5 commit 51ca7e6

File tree

12 files changed

+142
-36
lines changed

12 files changed

+142
-36
lines changed

‎resources/js/Components/AppButton.vue‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<button :class="getCssClasses()" @click="$emit('activated', true)">
2+
<button :class="classes" @click="$emit('activated', true)">
33
<span class="btn__text" v-text="text"></span>
44
</button>
55
</template>
@@ -13,32 +13,62 @@
1313
type: String,
1414
default: "Submit",
1515
},
16+
type: String,
1617
},
1718
1819
data() {
19-
return {
20-
cssClasses: ["btn"],
21-
};
20+
return {};
2221
},
2322
24-
methods: {
25-
getCssClasses() {
26-
return this.cssClasses.join(" ");
23+
computed: {
24+
classes() {
25+
let classes = ["btn"];
26+
27+
if (this.type) {
28+
classes.push(`btn--${this.type}`);
29+
}
30+
31+
return classes.join(" ");
2732
},
2833
},
2934
};
3035
</script>
3136

3237
<style lang="scss">
3338
.btn {
34-
@include rem(16px);
35-
padding: 12px 20px;
3639
display: inline-flex;
40+
justify-content: center;
3741
cursor: pointer;
3842
border-radius: border-radius(buttons);
3943
background-color: $ui-color-1;
4044
// Type
45+
font-family: font(1);
4146
font-weight: bold;
47+
text-align: center;
4248
color: #fff;
4349
}
50+
51+
.btn--full {
52+
width: 100%;
53+
}
54+
55+
.btn[disabled] {
56+
opacity: 0.5;
57+
cursor: not-allowed;
58+
}
59+
60+
//---- Responsive ----//
61+
@media (min-width: (breakpoint(mobile-1) + 1)) {
62+
.btn {
63+
@include rem(16px);
64+
padding: 17px 25px;
65+
}
66+
}
67+
68+
@media (max-width: breakpoint(mobile-1)) {
69+
.btn {
70+
@include rem(14px);
71+
padding: 13px 20px;
72+
}
73+
}
4474
</style>

‎resources/js/Pages/Login/Show.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Head :title="title" />
33

4-
<h1 v-text="title" class="mb-40"></h1>
4+
<h1 v-text="title" class="mb-40 text-center"></h1>
55

66
<form class="form" @submit.prevent="login">
77
<div class="form__section">
@@ -51,16 +51,17 @@
5151
<div class="form__row">
5252
<div class="form__action">
5353
<AppButton
54-
text="Login"
54+
text="Log In"
5555
tabindex="4"
56+
type="full"
5657
:disabled="form.processing"
5758
/>
5859
</div>
5960
</div>
6061
</div>
6162
</form>
6263

63-
<div class="mt-30">
64+
<div class="mt-30 text-center">
6465
<Link :href="route('register')">Register</Link>
6566
</div>
6667
</template>
@@ -82,7 +83,7 @@
8283
8384
data() {
8485
return {
85-
title: "Login",
86+
title: "Log In",
8687
form: useForm({
8788
email: this.email,
8889
password: this.password,

‎resources/js/Pages/Register/Show.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Head :title="title" />
33

4-
<h1 v-text="title" class="mb-40"></h1>
4+
<h1 v-text="title" class="mb-40 text-center"></h1>
55

66
<form class="form" @submit.prevent="register">
77
<div class="form__section">
@@ -64,14 +64,15 @@
6464
<AppButton
6565
text="Register"
6666
tabindex="5"
67+
type="full"
6768
:disabled="form.processing"
6869
/>
6970
</div>
7071
</div>
7172
</div>
7273
</form>
7374

74-
<div class="mt-30">
75+
<div class="mt-30 text-center">
7576
<Link :href="route('login')">Login</Link>
7677
</div>
7778
</template>

‎resources/scss/app.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
@use "@scss/utilities/placeholders";
22

3-
@import "@scss/common/reset", "@scss/common/typography", "@scss/common/forms", "@scss/common/spacing";
3+
@import "@scss/common/reset", "@scss/common/typography", "@scss/common/forms", "@scss/common/spacing",
4+
"@scss/common/helpers";
45

56
@import "@scss/components/form";
6-
7-
body {
8-
background-color: #fff;
9-
}

‎resources/scss/common/_forms.scss‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,53 @@
11
input {
22
width: 100%;
3-
height: 40px;
4-
padding: 10px;
53
border-radius: border-radius(forms);
6-
border: border(form-fields);
4+
border: border(forms);
5+
background-color: #fff;
6+
// Type
7+
font-family: font(1);
78
}
89

910
input[type="checkbox"],
1011
input[type="radio"] {
11-
width: 20px;
12-
height: 20px;
1312
padding: 0;
1413
}
1514

16-
label {
17-
@extend %text-small;
18-
}
19-
2015
button {
2116
cursor: pointer;
2217
appearance: none;
2318
border: none;
2419
background-color: transparent;
2520
}
21+
22+
label {
23+
@extend %text-regular;
24+
// Type
25+
font-weight: 700;
26+
}
27+
28+
//---- Responsive ----//
29+
@media (min-width: (breakpoint(mobile-1) + 1)) {
30+
input {
31+
height: 50px;
32+
padding: 15px;
33+
}
34+
35+
input[type="checkbox"],
36+
input[type="radio"] {
37+
width: 25px;
38+
height: 25px;
39+
}
40+
}
41+
42+
@media (max-width: breakpoint(mobile-1)) {
43+
input {
44+
height: 40px;
45+
padding: 12px;
46+
}
47+
48+
input[type="checkbox"],
49+
input[type="radio"] {
50+
width: 20px;
51+
height: 20px;
52+
}
53+
}

‎resources/scss/common/_helpers.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body {
2+
background-color: #fff;
3+
}
4+
5+
.text-left {
6+
@extend %text-left;
7+
}
8+
9+
.text-center {
10+
@extend %text-center;
11+
}
12+
13+
.text-right {
14+
@extend %text-right;
15+
}

‎resources/scss/common/_typography.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
@use "@scss/utilities/variables";
2-
31
body {
42
// Type
5-
font-family: "Hanken Grotesk", sans-serif;
6-
font-size: variables.$base-text-size;
3+
font-family: font(1);
4+
font-size: $base-text-size;
75
}
86

97
h1,
@@ -43,3 +41,8 @@ p,
4341
li {
4442
@extend %text-regular;
4543
}
44+
45+
a {
46+
// Type
47+
color: $ui-color-1;
48+
}

‎resources/scss/components/_form.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
.form__label--inline {
2121
align-items: center;
22-
column-gap: 10px;
22+
column-gap: 15px;
2323

2424
input {
2525
align-self: flex-start;

‎resources/scss/utilities/_functions.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
@return #{$rem-size}rem;
1010
}
1111

12+
@function font($key) {
13+
@return map.get(variables.$fonts, $key);
14+
}
15+
1216
@function border-radius($size) {
1317
@return map.get(variables.$border-radiuses, $size);
1418
}

‎resources/scss/utilities/_placeholders.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,23 @@
4141
@include mixins.rem(22px);
4242
}
4343

44+
%text-uppercase {
45+
// Type
46+
text-transform: uppercase;
47+
letter-spacing: 0.05em;
48+
}
49+
50+
%text-left {
51+
// Type
52+
text-align: left;
53+
}
54+
55+
%text-center {
56+
// Type
57+
text-align: center;
58+
}
59+
60+
%text-right {
61+
// Type
62+
text-align: right;
63+
}

0 commit comments

Comments
 (0)