Skip to content

Commit 284e8f8

Browse files
SebKaySebKay
authored
Sass updates (#18)
* Add responsive helpers * Add dynamic spacing * Update composer.json
1 parent ddb0802 commit 284e8f8

File tree

9 files changed

+79
-26
lines changed

9 files changed

+79
-26
lines changed

‎composer.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@
6060
"./vendor/bin/pint"
6161
],
6262
"test": [
63-
"php artisan test --parallel --stop-on-failure"
63+
"php artisan test --parallel --stop-on-failure --processes=8"
6464
],
6565
"test:coverage": [
66-
"XDEBUG_MODE=coverage php artisan test --parallel --coverage --min=85"
66+
"XDEBUG_MODE=coverage php artisan test --parallel --coverage --min=85 --processes=8 --stop-on-failure"
6767
],
6868
"post-autoload-dump": [
6969
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",

‎resources/js/Pages/Account/Edit.vue‎

Lines changed: 1 addition & 1 deletion
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="mt-regular mb-regular"></h1>
4+
<h1 v-text="title" class="mt-30 mb-40"></h1>
55

66
<form class="form" @submit.prevent="update">
77
<div class="form__section">

‎resources/js/Pages/Home/Index.vue‎

Lines changed: 1 addition & 1 deletion
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="mt-regular mb-regular"></h1>
4+
<h1 v-text="title" class="mt-30 mb-40"></h1>
55

66
<p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
77
</template>

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

Lines changed: 2 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-regular"></h1>
4+
<h1 v-text="title" class="mb-40"></h1>
55

66
<form class="form" @submit.prevent="login">
77
<div class="form__section">
@@ -60,7 +60,7 @@
6060
</div>
6161
</form>
6262

63-
<div class="mt-regular">
63+
<div class="mt-30">
6464
<Link :href="route('register')">Register</Link>
6565
</div>
6666
</template>

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

Lines changed: 2 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-regular"></h1>
4+
<h1 v-text="title" class="mb-40"></h1>
55

66
<form class="form" @submit.prevent="register">
77
<div class="form__section">
@@ -71,7 +71,7 @@
7171
</div>
7272
</form>
7373

74-
<div class="mt-regular">
74+
<div class="mt-30">
7575
<Link :href="route('login')">Login</Link>
7676
</div>
7777
</template>

‎resources/scss/common/_spacing.scss‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
1-
.mt-large {
2-
margin-top: 60px;
3-
}
4-
5-
.mb-large {
6-
margin-bottom: 60px;
7-
}
1+
@use "sass:map";
82

9-
.mt-regular {
10-
margin-top: 30px;
11-
}
12-
13-
.mb-regular {
14-
margin-bottom: 30px;
15-
}
3+
@use "@scss/utilities/functions";
4+
@use "@scss/utilities/mixins";
165

17-
.mt-small {
18-
margin-top: 15px;
6+
//---- Responsive ----//
7+
@media (min-width: (functions.breakpoint(mobile-2) + 1)) {
8+
@include mixins.spacing(desktop);
199
}
2010

21-
.mb-small {
22-
margin-bottom: 15px;
11+
@media (max-width: functions.breakpoint(mobile-2)) {
12+
@include mixins.spacing(mobile);
2313
}

‎resources/scss/utilities/_functions.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,7 @@
1616
@function border($size) {
1717
@return map.get(variables.$borders, $size);
1818
}
19+
20+
@function breakpoint($key) {
21+
@return map.get(variables.$breakpoints, $key);
22+
}

‎resources/scss/utilities/_mixins.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,35 @@
11
@use "sass:map";
22

3+
@use "@scss/utilities/variables";
34
@use "@scss/utilities/functions";
45

56
@mixin rem($pixels) {
67
font-size: $pixels;
78
font-size: functions.px-to-rem($pixels);
89
}
10+
11+
@mixin spacing($size) {
12+
@each $amount, $amountPixels in map.get(variables.$spacing, $size) {
13+
.mt-#{$amount} {
14+
margin-top: $amountPixels;
15+
}
16+
17+
.mr-#{$amount} {
18+
margin-right: $amountPixels;
19+
}
20+
21+
.mb-#{$amount} {
22+
margin-bottom: $amountPixels;
23+
}
24+
25+
.ml-#{$amount} {
26+
margin-left: $amountPixels;
27+
}
28+
}
29+
}
30+
31+
@mixin flex-center {
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
}

‎resources/scss/utilities/_variables.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,35 @@ $border-radiuses: (
1010
$borders: (
1111
form-fields: 1px solid #aaa,
1212
);
13+
14+
$breakpoints: (
15+
tablet-1: 1024px,
16+
tablet-2: 768px,
17+
mobile-1: 670px,
18+
mobile-2: 450px,
19+
);
20+
21+
$spacing: (
22+
desktop: (
23+
15: 15px,
24+
30: 30px,
25+
40: 40px,
26+
50: 50px,
27+
60: 60px,
28+
70: 70px,
29+
80: 80px,
30+
90: 90px,
31+
100: 100px,
32+
),
33+
mobile: (
34+
15: 10px,
35+
30: 20px,
36+
40: 30px,
37+
50: 35px,
38+
60: 40px,
39+
70: 45px,
40+
80: 55px,
41+
90: 60px,
42+
100: 65px,
43+
),
44+
);

0 commit comments

Comments
 (0)