Skip to content

Commit 861b1fd

Browse files
Aadv1kAadv1k
committed
Add styles and config for @frontend-projects/uidd-stores-list-card-dark-mode-day-1563
1 parent 8d691af commit 861b1fd

File tree

6 files changed

+328
-2
lines changed

6 files changed

+328
-2
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"name": "frontend-projects",
33
"workspaces": [
44
"packages/frontendmentor/*",
5-
"packages/uidesigndaily/*"
5+
"packages/uidesigndaily/*",
6+
"uidd-stores-list-card-dark-mode-day-1563"
67
],
78
"version": "1.0.0",
89
"description": "A collection of my frontend project",
@@ -27,6 +28,7 @@
2728
},
2829
"homepage": "https://github.com/aadv1k/frontend-projects#readme",
2930
"devDependencies": {
31+
"@parcel/transformer-sass": "^2.6.2",
3032
"eslint": "^8.20.0",
3133
"eslint-config-airbnb": "^19.0.4",
3234
"eslint-config-prettier": "^8.5.0",

‎packages/uidesigndaily/uidd-stores-list-card-dark-mode-day-1563/design/desktop-preview.jpg

93.3 KB
Loading

‎packages/uidesigndaily/uidd-stores-list-card-dark-mode-day-1563/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "uidd-stores-list-card-dark-mode-day-1563",
3+
"version": "1.0.0",
4+
"description": "https://www.uidesigndaily.com/posts/figma-stores-list-card-dark-mode-day-1563",
5+
"main": "index.js",
6+
"source": "./src/index.html",
7+
"scripts": {
8+
"build": "parcel build --public-url ./",
9+
"dev": "parcel --port 8080",
10+
"test": "npm run build && jest ."
11+
},
12+
"author": "Aadvik <[email protected]>",
13+
"license": "GPL-3.0-or-later"
14+
}

‎packages/uidesigndaily/uidd-stores-list-card-dark-mode-day-1563/src/index.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
8+
/>
9+
<title>uidd-stores-list-card-dark-mode-day-1563</title>
10+
<link rel="stylesheet" href="main.scss" />
11+
</head>
12+
<body>
13+
<div class="card">
14+
<h2 class="card__title">Closest stores</h2>
15+
16+
<div class="card__input">
17+
<label for="postal"> Postal code </label>
18+
<input type="number" id="postal" />
19+
<button type="button" class="btn btn--secondary">
20+
<svg
21+
xmlns="http://www.w3.org/2000/svg"
22+
width="16"
23+
height="16"
24+
fill="currentColor"
25+
class="bi bi-geo-alt"
26+
viewBox="0 0 16 16"
27+
>
28+
<path
29+
d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"
30+
/>
31+
<path
32+
d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
33+
/>
34+
</svg>
35+
Use my location
36+
</button>
37+
</div>
38+
39+
<ul class="card__list" id="cardList">
40+
<li class="list__itm" data-status="closed">
41+
<strong>FOO BAR</strong>
42+
<p>5279 Nikolaus Streets, Suite 759, 14405-4491</p>
43+
<p>
44+
<svg
45+
xmlns="http://www.w3.org/2000/svg"
46+
width="16"
47+
height="16"
48+
fill="currentColor"
49+
class="bi bi-clock"
50+
viewBox="0 0 16 16"
51+
>
52+
<path
53+
d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"
54+
/>
55+
<path
56+
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"
57+
/>
58+
</svg>
59+
9:00 - 19:00
60+
</p>
61+
</li>
62+
63+
<li class="list__itm" data-status="closed">
64+
<strong>FOO BAR</strong>
65+
<p>5279 Nikolaus Streets, Suite 759, 14405-4491</p>
66+
<p>
67+
<svg
68+
xmlns="http://www.w3.org/2000/svg"
69+
width="16"
70+
height="16"
71+
fill="currentColor"
72+
class="bi bi-clock"
73+
viewBox="0 0 16 16"
74+
>
75+
<path
76+
d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"
77+
/>
78+
<path
79+
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"
80+
/>
81+
</svg>
82+
9:00 - 19:00
83+
</p>
84+
</li>
85+
</ul>
86+
87+
<button type="button" class="btn btn--primary card__viewall">
88+
View all
89+
</button>
90+
</div>
91+
</body>
92+
</html>

‎packages/uidesigndaily/uidd-stores-list-card-dark-mode-day-1563/src/main.scss

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap");
2+
3+
$clr-purple-100: #1c1a39;
4+
$clr-purple-200: #121129;
5+
6+
$clr-blue-100: #c4c0ff;
7+
$clr-blue-200: #756bff;
8+
$clr-pink: #ff5dab;
9+
10+
$gradient: linear-gradient($clr-pink, $clr-blue-200);
11+
12+
$fnt-sans: "Mulish", sans-serif;
13+
$fnt-w: (
14+
"r": 400,
15+
"b": 700,
16+
);
17+
18+
$radius: (
19+
"sm": 5px,
20+
"md": 15px,
21+
"full": 100px,
22+
);
23+
24+
* {
25+
margin: 0;
26+
padding: 0;
27+
}
28+
29+
body {
30+
background-color: $clr-purple-100;
31+
}
32+
33+
.card {
34+
background-color: $clr-purple-200;
35+
display: flex;
36+
flex-direction: column;
37+
gap: 2.5em;
38+
padding: 2em;
39+
border-radius: map-get($map: $radius, $key: md);
40+
width: 80%;
41+
42+
position: absolute;
43+
top: 50%;
44+
left: 50%;
45+
transform: translate(-50%, -50%);
46+
color: $clr-blue-100;
47+
font-family: $fnt-sans;
48+
49+
&__title {
50+
font-weight: map-get($map: $fnt-w, $key: r);
51+
}
52+
53+
.card__viewall {
54+
padding: 1em;
55+
border-radius: map-get($map: $radius, $key: sm);
56+
}
57+
}
58+
59+
.card__input {
60+
position: relative;
61+
62+
label {
63+
font-size: 0.9em;
64+
position: absolute;
65+
top: -40%;
66+
}
67+
68+
input[type="number"] {
69+
background: inherit;
70+
border: 1px solid lighten($clr-purple-100, 10%);
71+
border-radius: map-get($map: $radius, $key: sm);
72+
outline: none;
73+
margin: 0;
74+
padding: 0.8em;
75+
width: 6em;
76+
color: $clr-blue-100;
77+
font-size: 1.1em;
78+
}
79+
80+
.btn {
81+
font-size: 1em;
82+
margin-inline-start: 0.3em;
83+
}
84+
85+
.btn svg {
86+
width: 20px;
87+
height: 20px;
88+
vertical-align: middle;
89+
transform: translateY(-2px);
90+
}
91+
92+
.btn svg path {
93+
fill: inherit;
94+
}
95+
96+
input[type="number"]::-webkit-inner-spin-button,
97+
input[type="number"]::-webkit-outer-spin-button {
98+
-webkit-appearance: none;
99+
-moz-appearance: none;
100+
appearance: none;
101+
margin: 0;
102+
}
103+
104+
// TODO: Do something about very small screens
105+
@media screen and (min-width: 400px) {
106+
.btn {
107+
margin-inline-start: 1em;
108+
}
109+
110+
.btn svg {
111+
width: 25px;
112+
height: 25px;
113+
}
114+
}
115+
}
116+
117+
.card__list {
118+
list-style: none;
119+
120+
li {
121+
width: 100%;
122+
margin-block: 1.2em;
123+
position: relative;
124+
}
125+
126+
li:is(:first-child, :last-child) {
127+
margin-top: 0;
128+
}
129+
130+
li::before {
131+
content: attr(data-status);
132+
position: absolute;
133+
background: $clr-pink;
134+
color: #f5f5f5;
135+
text-transform: uppercase;
136+
font-size: 0.8em;
137+
padding: 0.2em 0.4em;
138+
border-radius: 30px;
139+
right: 0;
140+
font-weight: map-get($map: $fnt-w, $key: b);
141+
}
142+
143+
li > p {
144+
color: $clr-blue-100;
145+
margin-block: 0.5em;
146+
}
147+
148+
p > svg {
149+
vertical-align: middle;
150+
transform: translateY(-2px);
151+
margin-right: 4px;
152+
}
153+
}
154+
155+
.btn {
156+
background-color: none;
157+
border: none;
158+
cursor: pointer;
159+
font-family: $fnt-sans;
160+
161+
&--primary {
162+
background-color: $clr-blue-200;
163+
color: white;
164+
}
165+
166+
&--secondary {
167+
background-color: transparent;
168+
color: $clr-blue-200;
169+
}
170+
}

0 commit comments

Comments
 (0)