Skip to content
This repository was archived by the owner on Mar 16, 2024. It is now read-only.

Commit 2647edc

Browse files
luangjokajluangjokaj
committed
fix: mixings usage
1 parent e68b4ed commit 2647edc

File tree

7 files changed

+153
-107
lines changed

7 files changed

+153
-107
lines changed

‎dist/cherry.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 51 additions & 51 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
"lint": "stylelint \"./src/**/*.css\""
2121
},
2222
"dependencies": {
23-
"autoprefixer": "^10.2.0",
23+
"autoprefixer": "^10.2.1",
2424
"cssnano": "^4.1.10",
2525
"gulp": "^4.0.2",
2626
"gulp-plumber": "^1.2.1",
2727
"gulp-postcss": "^9.0.0",
2828
"gulp-sourcemaps": "^3.0.0",
2929
"gulp-util": "^3.0.8",
30-
"postcss": "^8.2.3",
30+
"postcss": "^8.2.4",
3131
"postcss-import": "^14.0.0",
3232
"postcss-mixins": "^7.0.2",
3333
"postcss-preset-env": "^6.7.0",

‎src/buttons.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,20 @@ button,
22
input[type="submit"],
33
.button {
44
@mixin reset-button;
5-
@mixin font-button;
5+
@mixin font-button-mobile;
66
display: inline-block;
77
vertical-align: middle;
88

99
&.big {
10-
@mixin font-button-big;
10+
@mixin font-button-big-mobile;
11+
}
12+
13+
@media (--screen-lg) {
14+
@mixin font-button-desktop;
15+
16+
&.big {
17+
@mixin font-button-big-desktop;
18+
}
1119
}
1220

1321
padding: 15px 25px;

‎src/helpers.css‎

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -19,79 +19,72 @@
1919
}
2020
}
2121

22-
@define-mixin font-eyebrow {
22+
@define-mixin font-eyebrow-mobile {
2323
font-size: var(--size-eyebrow-mobile);
2424
line-height: var(--lineheight-eyebrow-mobile);
25-
font-weight: 600;
25+
}
2626

27-
@media (min-width: var(--screen-lg) ){
28-
font-size: var(--size-eyebrow-desktop);
29-
line-height: var(--lineheight-eyebrow-desktop);
30-
}
27+
@define-mixin font-eyebrow-desktop {
28+
font-size: var(--size-eyebrow-desktop);
29+
line-height: var(--lineheight-eyebrow-desktop);
3130
}
3231

33-
@define-mixin font-subtitle {
32+
@define-mixin font-subtitle-mobile {
3433
font-size: var(--size-subtitle-mobile);
3534
line-height: var(--lineheight-subtitle-mobile);
36-
font-weight: 600;
35+
}
3736

38-
@media (min-width: var(--screen-lg) ){
39-
font-size: var(--size-subtitle-desktop);
40-
line-height: var(--lineheight-subtitle-desktop);
41-
}
37+
@define-mixin font-subtitle-desktop {
38+
font-size: var(--size-subtitle-desktop);
39+
line-height: var(--lineheight-subtitle-desktop);
4240
}
4341

44-
@define-mixin font-button {
42+
@define-mixin font-button-mobile {
4543
font-size: var(--size-button-mobile);
4644
line-height: var(--lineheight-button-mobile);
47-
font-weight: 600;
45+
}
4846

49-
@media (--screen-lg) {
50-
font-size: var(--size-button-desktop);
51-
line-height: var(--lineheight-button-desktop);
52-
}
47+
@define-mixin font-button-desktop {
48+
font-size: var(--size-button-desktop);
49+
line-height: var(--lineheight-button-desktop);
5350
}
5451

55-
@define-mixin font-button-big {
52+
@define-mixin font-button-big-mobile {
5653
font-size: var(--size-button-big-mobile);
5754
line-height: var(--lineheight-button-big-mobile);
58-
font-weight: 600;
55+
}
5956

60-
@media (--screen-lg) {
61-
font-size: var(--size-button-big-desktop);
62-
line-height: var(--lineheight-button-big-desktop);
63-
}
57+
@define-mixin font-button-big-desktop {
58+
font-size: var(--size-button-big-desktop);
59+
line-height: var(--lineheight-button-big-desktop);
6460
}
6561

66-
@define-mixin font-lead {
62+
@define-mixin font-lead-mobile {
6763
font-size: var(--size-lead-mobile);
6864
line-height: var(--lineheight-lead-mobile);
69-
font-weight: 400;
65+
}
7066

71-
@media (--screen-lg) {
72-
font-size: var(--size-lead-desktop);
73-
line-height: var(--lineheight-lead-desktop);
74-
}
67+
@define-mixin font-lead-desktop {
68+
font-size: var(--size-lead-desktop);
69+
line-height: var(--lineheight-lead-desktop);
7570
}
7671

77-
@define-mixin font-input {
72+
@define-mixin font-input-mobile {
7873
font-size: var(--size-input-mobile);
7974
line-height: var(--lineheight-input-mobile);
80-
font-weight: 400;
75+
}
8176

82-
@media (--screen-lg) {
83-
font-size: var(--size-input-desktop);
84-
line-height: var(--lineheight-input-desktop);
85-
}
77+
@define-mixin font-input-desktop {
78+
font-size: var(--size-input-desktop);
79+
line-height: var(--lineheight-input-desktop);
8680
}
8781

88-
@define-mixin font-input-big {
82+
@define-mixin font-input-big-mobile {
8983
font-size: var(--size-input-big-mobile);
9084
line-height: var(--lineheight-input-big-mobile);
91-
font-weight: 400;
85+
}
9286

93-
@media (--screen-lg) {
94-
font-size: var(--size-input-big-desktop);
95-
line-height: var(--lineheight-input-big-desktop);
96-
}
87+
@define-mixin font-input-big-desktop {
88+
font-size: var(--size-input-big-desktop);
89+
line-height: var(--lineheight-input-big-desktop);
9790
}

‎src/inputs.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ select {
1111
border: solid 2px var(--color-gray-light);
1212
padding: 15px 15px;
1313
background: var(--color-light);
14-
@mixin font-input;
14+
@mixin font-input-mobile;
1515

1616
@media (hover: hover) {
1717
&:hover:not([disabled]) {
@@ -38,7 +38,17 @@ select {
3838
}
3939

4040
&.big {
41-
@mixin font-input-big;
41+
@mixin font-input-big-mobile;
42+
}
43+
44+
@media (--screen-lg) {
45+
@mixin font-input-desktop;
46+
47+
&.big {
48+
&.big {
49+
@mixin font-input-big-desktop;
50+
}
51+
}
4252
}
4353
}
4454

0 commit comments

Comments
 (0)