@guillaumemmm/marquedefabrique 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.prettierrc +0 -0
- package/.vscode/settings.json +5 -0
- package/README.md +5 -0
- package/assets/icons/github.svg +1 -0
- package/assets/icons/new-tab.svg +1 -0
- package/index.css +3 -0
- package/index.html +210 -0
- package/kit.css +306 -0
- package/package.json +19 -0
- package/reset.css +130 -0
- package/styles.css +37 -0
- package/variables.css +30 -0
package/.prettierrc
ADDED
|
File without changes
|
package/README.md
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
# Marque de fabrique
|
|
2
|
+
|
|
3
|
+
Marque de Fabrique is a minimalistic UI kit. It includes a set of core styles and CSS variables centralizing design elements to maintain consistency across my projects.
|
|
4
|
+
|
|
5
|
+
A demo for the use of the styles is [available here](https://guillaume-marquedefabrique.web.val.run/).
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f" /></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="0.8rem" height="0.8rem" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" aria-label="Nouvelle fenêtre"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.343 15.657L15.657 4.343m0 0v9.9m0-9.9h-9.9"/></svg>
|
package/index.css
ADDED
package/index.html
ADDED
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="fr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<meta
|
|
7
|
+
name="description"
|
|
8
|
+
content="Minimalistic UI kit that includes a set of core styles and CSS
|
|
9
|
+
variables centralizing design elements to maintain consistency across
|
|
10
|
+
personal projects"
|
|
11
|
+
/>
|
|
12
|
+
<title>Marque de fabrique</title>
|
|
13
|
+
<link href="./styles.css" rel="stylesheet" />
|
|
14
|
+
<link
|
|
15
|
+
rel="icon"
|
|
16
|
+
type="image/svg+xml"
|
|
17
|
+
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🥞%3C/text%3E%3C/svg%3E"
|
|
18
|
+
/>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<main>
|
|
22
|
+
<div class="content">
|
|
23
|
+
<h1 class="mdf-title1">Marque de fabrique</h1>
|
|
24
|
+
<p class="mdf-block" lang="en">
|
|
25
|
+
<span class="mdf-emphasis" lang="fr">Marque de Fabrique</span> is a
|
|
26
|
+
minimalistic UI kit. It includes a set of core styles and CSS
|
|
27
|
+
variables centralizing design elements to maintain consistency across
|
|
28
|
+
personal projects. The code for the kit is
|
|
29
|
+
<a
|
|
30
|
+
class="mdf-link"
|
|
31
|
+
href="https://github.com/GuillaumeMMM/marquedefabrique"
|
|
32
|
+
>available here</a
|
|
33
|
+
>.
|
|
34
|
+
</p>
|
|
35
|
+
<h2 class="mdf-title2">Marque de fabrique</h2>
|
|
36
|
+
<h3 class="mdf-title3">Marque de fabrique</h3>
|
|
37
|
+
<h3 class="mdf-title4">Marque de fabrique</h3>
|
|
38
|
+
<p>Marque de fabrique</p>
|
|
39
|
+
<p>Marque de <span class="mdf-highlighted">fabrique</span></p>
|
|
40
|
+
<p>
|
|
41
|
+
Une <span class="mdf-highlighted">manufacture</span> (du latin
|
|
42
|
+
<span class="mdf-italic">manufactura</span>, « fait à la main ») est
|
|
43
|
+
un lieu de fabrication dans lequel des produits sont à l'origine
|
|
44
|
+
fabriqués à la main par des ouvriers et qui sert à désigner
|
|
45
|
+
aujourd'hui une entreprise dans laquelle les biens sont produits
|
|
46
|
+
directement ou indirectement (robotisation) par l'homme. Le terme est
|
|
47
|
+
aujourd'hui particulièrement utilisé dans l'industrie horlogère pour
|
|
48
|
+
désigner les entreprises, à l'image des marques des groupes Rolex,
|
|
49
|
+
Seiko, Swatch et Citizen ou encore de la division horlogerie de
|
|
50
|
+
Cartier, qui fabriquent elles-mêmes leurs propres mouvements, afin de
|
|
51
|
+
les différencier de celles qui sous-traitent partiellement ou
|
|
52
|
+
intégralement cette fabrication.
|
|
53
|
+
</p>
|
|
54
|
+
<div><em class="mdf-emphasis">Marque de fabrique</em></div>
|
|
55
|
+
<div><i class="mdf-italic">Marque de fabrique</i></div>
|
|
56
|
+
<div><em class="mdf-muted">Marque de fabrique</em></div>
|
|
57
|
+
<div><a class="mdf-link" href="#">Marque de fabrique</a></div>
|
|
58
|
+
<div>
|
|
59
|
+
<a class="mdf-link" href="#" target="_blank"
|
|
60
|
+
>Marque de fabrique
|
|
61
|
+
<svg
|
|
62
|
+
width="0.8rem"
|
|
63
|
+
height="0.8rem"
|
|
64
|
+
viewBox="0 0 20 20"
|
|
65
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
66
|
+
fill="none"
|
|
67
|
+
aria-label="New tab"
|
|
68
|
+
>
|
|
69
|
+
<path
|
|
70
|
+
stroke="currentColor"
|
|
71
|
+
stroke-linecap="round"
|
|
72
|
+
stroke-linejoin="round"
|
|
73
|
+
stroke-width="2"
|
|
74
|
+
d="M4.343 15.657L15.657 4.343m0 0v9.9m0-9.9h-9.9"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
</a>
|
|
78
|
+
</div>
|
|
79
|
+
<div>
|
|
80
|
+
<a
|
|
81
|
+
class="mdf-link"
|
|
82
|
+
href="https://github.com/GuillaumeMMM/marquedefabrique"
|
|
83
|
+
>Marque de fabrique <span lang="en">on github</span>
|
|
84
|
+
<svg
|
|
85
|
+
width="1rem"
|
|
86
|
+
height="1rem"
|
|
87
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
88
|
+
viewbox="0 0 100 100"
|
|
89
|
+
aria-hidden="true"
|
|
90
|
+
>
|
|
91
|
+
<path
|
|
92
|
+
fill-rule="evenodd"
|
|
93
|
+
clip-rule="evenodd"
|
|
94
|
+
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
|
|
95
|
+
fill="#24292f"
|
|
96
|
+
/>
|
|
97
|
+
</svg>
|
|
98
|
+
</a>
|
|
99
|
+
</div>
|
|
100
|
+
<div>
|
|
101
|
+
<button class="mdf-button" type="button">Marque de fabrique</button>
|
|
102
|
+
</div>
|
|
103
|
+
<div>
|
|
104
|
+
<button class="mdf-button mdf-button-secondary" type="button">
|
|
105
|
+
Marque de fabrique
|
|
106
|
+
</button>
|
|
107
|
+
</div>
|
|
108
|
+
<div>
|
|
109
|
+
<button class="mdf-button mdf-button-tertiary" type="button">
|
|
110
|
+
Marque de fabrique
|
|
111
|
+
</button>
|
|
112
|
+
</div>
|
|
113
|
+
<div>
|
|
114
|
+
<label class="mdf-input-control" for="text-input">
|
|
115
|
+
Marque de fabrique
|
|
116
|
+
<input type="text" class="mdf-input" id="text-input" />
|
|
117
|
+
</label>
|
|
118
|
+
</div>
|
|
119
|
+
<div>
|
|
120
|
+
<label class="mdf-select-control" for="select">
|
|
121
|
+
Marque de fabrique
|
|
122
|
+
<select class="mdf-select" id="select">
|
|
123
|
+
<option>Marque de fabrique 1</option>
|
|
124
|
+
<option>Marque de fabrique 2</option>
|
|
125
|
+
<option>Marque de fabrique 3</option>
|
|
126
|
+
</select>
|
|
127
|
+
</label>
|
|
128
|
+
</div>
|
|
129
|
+
<div>
|
|
130
|
+
<label for="checkbox" class="mdf-checkbox-control">
|
|
131
|
+
<input type="checkbox" id="checkbox" class="mdf-checkbox" />
|
|
132
|
+
Marque de fabrique</label
|
|
133
|
+
>
|
|
134
|
+
</div>
|
|
135
|
+
<div>
|
|
136
|
+
<label for="color" class="mdf-color-control">
|
|
137
|
+
<input type="color" id="color" class="mdf-color" value="#048275" />
|
|
138
|
+
<span class="mdf-color-label">Marque de fabrique</span>
|
|
139
|
+
</label>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="colors">
|
|
142
|
+
<div
|
|
143
|
+
class="color"
|
|
144
|
+
style="background-color: var(--mdf-color-primary)"
|
|
145
|
+
></div>
|
|
146
|
+
<div
|
|
147
|
+
class="color"
|
|
148
|
+
style="background-color: var(--mdf-color-primary-light)"
|
|
149
|
+
></div>
|
|
150
|
+
<div
|
|
151
|
+
class="color"
|
|
152
|
+
style="background-color: var(--mdf-color-primary-transparent)"
|
|
153
|
+
></div>
|
|
154
|
+
<div
|
|
155
|
+
class="color"
|
|
156
|
+
style="background-color: var(--mdf-color-primary-transparent-2)"
|
|
157
|
+
></div>
|
|
158
|
+
<div
|
|
159
|
+
class="color"
|
|
160
|
+
style="background-color: var(--mdf-color-secondary)"
|
|
161
|
+
></div>
|
|
162
|
+
<div
|
|
163
|
+
class="color"
|
|
164
|
+
style="background-color: var(--mdf-color-secondary-light)"
|
|
165
|
+
></div>
|
|
166
|
+
<div
|
|
167
|
+
class="color"
|
|
168
|
+
style="background-color: var(--mdf-color-secondary-transparent)"
|
|
169
|
+
></div>
|
|
170
|
+
<div
|
|
171
|
+
class="color"
|
|
172
|
+
style="background-color: var(--mdf-color-secondary-transparent-2)"
|
|
173
|
+
></div>
|
|
174
|
+
<div
|
|
175
|
+
class="color"
|
|
176
|
+
style="background-color: var(--mdf-color-tertiary)"
|
|
177
|
+
></div>
|
|
178
|
+
<div
|
|
179
|
+
class="color"
|
|
180
|
+
style="background-color: var(--mdf-color-tertiary-light)"
|
|
181
|
+
></div>
|
|
182
|
+
<div
|
|
183
|
+
class="color"
|
|
184
|
+
style="background-color: var(--mdf-color-tertiary-transparent)"
|
|
185
|
+
></div>
|
|
186
|
+
<div
|
|
187
|
+
class="color"
|
|
188
|
+
style="background-color: var(--mdf-color-tertiary-transparent-2)"
|
|
189
|
+
></div>
|
|
190
|
+
<div
|
|
191
|
+
class="color"
|
|
192
|
+
style="background-color: var(--mdf-color-error)"
|
|
193
|
+
></div>
|
|
194
|
+
<div
|
|
195
|
+
class="color"
|
|
196
|
+
style="background-color: var(--mdf-color-info)"
|
|
197
|
+
></div>
|
|
198
|
+
<div
|
|
199
|
+
class="color"
|
|
200
|
+
style="background-color: var(--mdf-color-success)"
|
|
201
|
+
></div>
|
|
202
|
+
</div>
|
|
203
|
+
<p class="mdf-block">Marque de fabrique</p>
|
|
204
|
+
<p class="mdf-block mdf-block-info">Marque de fabrique</p>
|
|
205
|
+
<p class="mdf-block mdf-block-success">Marque de fabrique</p>
|
|
206
|
+
<p class="mdf-block mdf-block-error">Marque de fabrique</p>
|
|
207
|
+
</div>
|
|
208
|
+
</main>
|
|
209
|
+
</body>
|
|
210
|
+
</html>
|
package/kit.css
ADDED
|
@@ -0,0 +1,306 @@
|
|
|
1
|
+
/* TITLES */
|
|
2
|
+
.mdf-title1,
|
|
3
|
+
.mdf-title2,
|
|
4
|
+
.mdf-title3,
|
|
5
|
+
.mdf-title4 {
|
|
6
|
+
font-weight: 700;
|
|
7
|
+
}
|
|
8
|
+
.mdf-title1 {
|
|
9
|
+
font-size: 3rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.mdf-title2 {
|
|
13
|
+
font-size: 2.4rem;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.mdf-title3 {
|
|
17
|
+
font-size: 1.7rem;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.mdf-title4 {
|
|
21
|
+
font-size: 1.2rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* TEXT */
|
|
25
|
+
.mdf-emphasis {
|
|
26
|
+
font-weight: 700;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.mdf-italic {
|
|
30
|
+
font-style: italic;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.mdf-highlighted {
|
|
34
|
+
font-weight: 700;
|
|
35
|
+
color: var(--mdf-color-primary);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.mdf-muted {
|
|
39
|
+
color: var(--mdf-color-text-muted);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.mdf-block {
|
|
43
|
+
padding: 1rem;
|
|
44
|
+
background-color: var(--mdf-color-secondary-transparent);
|
|
45
|
+
border-radius: 3px;
|
|
46
|
+
border: 2px solid var(--mdf-color-secondary-transparent-2);
|
|
47
|
+
|
|
48
|
+
&.mdf-block-info {
|
|
49
|
+
background-color: var(--mdf-color-info-transparent);
|
|
50
|
+
border-color: var(--mdf-color-info);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&.mdf-block-error {
|
|
54
|
+
background-color: var(--mdf-color-error-transparent);
|
|
55
|
+
border-color: var(--mdf-color-error);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&.mdf-block-success {
|
|
59
|
+
background-color: var(--mdf-color-success-transparent);
|
|
60
|
+
border-color: var(--mdf-color-success);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* CTA */
|
|
65
|
+
.mdf-link {
|
|
66
|
+
color: var(--mdf-color-primary);
|
|
67
|
+
background-color: var(--mdf-color-primary-transparent);
|
|
68
|
+
padding: 1px 2px;
|
|
69
|
+
border-radius: 3px;
|
|
70
|
+
|
|
71
|
+
&:hover {
|
|
72
|
+
background-color: var(--mdf-color-primary-transparent-2);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:visited {
|
|
76
|
+
color: var(--mdf-color-secondary);
|
|
77
|
+
background-color: var(--mdf-color-primary-transparent);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.mdf-link:focus-visible,
|
|
82
|
+
.mdf-button:focus-visible {
|
|
83
|
+
outline: 2px solid var(--mdf-color-primary);
|
|
84
|
+
outline-offset: 3px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.mdf-button {
|
|
88
|
+
border: none;
|
|
89
|
+
background: none;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
padding: 0.5rem 1.5rem;
|
|
94
|
+
line-height: 1.5rem;
|
|
95
|
+
background-color: var(--mdf-color-primary-light);
|
|
96
|
+
color: white;
|
|
97
|
+
text-decoration: none;
|
|
98
|
+
border-radius: 3px;
|
|
99
|
+
border: 2px solid var(--mdf-color-primary-light);
|
|
100
|
+
font-size: 1rem;
|
|
101
|
+
|
|
102
|
+
&:hover {
|
|
103
|
+
background-color: var(--mdf-color-primary);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&.mdf-button-secondary {
|
|
107
|
+
background-color: var(--mdf-color-secondary-light);
|
|
108
|
+
border-color: var(--mdf-color-secondary-light);
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
background-color: var(--mdf-color-secondary);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&.mdf-button-tertiary {
|
|
116
|
+
background-color: var(--mdf-color-tertiary-light);
|
|
117
|
+
border-color: var(--mdf-color-tertiary-light);
|
|
118
|
+
|
|
119
|
+
&:hover {
|
|
120
|
+
background-color: var(--mdf-color-tertiary);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* FORM */
|
|
126
|
+
.mdf-input:focus-visible,
|
|
127
|
+
.mdf-color:focus-visible,
|
|
128
|
+
.mdf-select:focus-visible {
|
|
129
|
+
outline: 2px solid var(--mdf-color-primary);
|
|
130
|
+
outline-offset: 3px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.mdf-select-control {
|
|
134
|
+
display: inline-flex;
|
|
135
|
+
flex-direction: column;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.mdf-select {
|
|
139
|
+
display: block;
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
|
|
142
|
+
line-height: 1.5rem;
|
|
143
|
+
background-color: var(--mdf-color-primary-transparent);
|
|
144
|
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
|
|
145
|
+
background-repeat: no-repeat;
|
|
146
|
+
background-position: right 0.75rem center;
|
|
147
|
+
background-size: 16px 12px;
|
|
148
|
+
border: 2px solid var(--mdf-color-primary);
|
|
149
|
+
border-radius: 0.25rem;
|
|
150
|
+
-webkit-appearance: none;
|
|
151
|
+
-moz-appearance: none;
|
|
152
|
+
appearance: none;
|
|
153
|
+
font-size: 1rem;
|
|
154
|
+
color: black;
|
|
155
|
+
width: 250px;
|
|
156
|
+
|
|
157
|
+
&:hover,
|
|
158
|
+
&:focus {
|
|
159
|
+
background-color: var(--mdf-color-primary-transparent-2);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.mdf-select:hover {
|
|
164
|
+
background-color: var(--mdf-color-primary-transparent-2);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.mdf-input-control {
|
|
168
|
+
display: inline-flex;
|
|
169
|
+
flex-direction: column;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.mdf-input[type="text"],
|
|
173
|
+
.mdf-input[type="search"],
|
|
174
|
+
.mdf-input[type="password"] {
|
|
175
|
+
border: 2px solid var(--mdf-color-primary);
|
|
176
|
+
border-radius: 0.25rem;
|
|
177
|
+
font-size: 16px;
|
|
178
|
+
padding: 0.375rem 0.75rem;
|
|
179
|
+
line-height: 1.5rem;
|
|
180
|
+
background-color: var(--mdf-color-primary-transparent);
|
|
181
|
+
width: 250px;
|
|
182
|
+
|
|
183
|
+
&:hover,
|
|
184
|
+
&:focus {
|
|
185
|
+
background-color: var(--mdf-color-primary-transparent-2);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.mdf-checkbox-control {
|
|
190
|
+
font-size: 1rem;
|
|
191
|
+
display: flex;
|
|
192
|
+
align-items: center;
|
|
193
|
+
gap: 0.5em;
|
|
194
|
+
cursor: pointer;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.mdf-checkbox {
|
|
198
|
+
-webkit-appearance: none;
|
|
199
|
+
appearance: none;
|
|
200
|
+
margin: 0;
|
|
201
|
+
width: 1.4em;
|
|
202
|
+
height: 1.4em;
|
|
203
|
+
border: 0.15em solid var(--mdf-color-primary);
|
|
204
|
+
border-radius: 0.25rem;
|
|
205
|
+
padding: 0;
|
|
206
|
+
cursor: pointer;
|
|
207
|
+
|
|
208
|
+
display: grid;
|
|
209
|
+
place-content: center;
|
|
210
|
+
|
|
211
|
+
&:hover,
|
|
212
|
+
&:focus {
|
|
213
|
+
background-color: var(--mdf-color-primary-transparent-2);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.mdf-checkbox::before {
|
|
218
|
+
content: "";
|
|
219
|
+
width: 0.8em;
|
|
220
|
+
height: 0.8em;
|
|
221
|
+
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
|
222
|
+
transform: scale(0);
|
|
223
|
+
transform-origin: bottom left;
|
|
224
|
+
box-shadow: inset 1em 1em var(--mdf-color-primary);
|
|
225
|
+
background-color: CanvasText;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.mdf-checkbox:checked::before {
|
|
229
|
+
transform: scale(1);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.mdf-checkbox:focus-visible {
|
|
233
|
+
border: 2px solid var(--mdf-color-primary);
|
|
234
|
+
outline: 2px solid var(--mdf-color-primary);
|
|
235
|
+
outline-offset: 3px;
|
|
236
|
+
|
|
237
|
+
&::before {
|
|
238
|
+
box-shadow: inset 1em 1em var(--mdf-color-primary);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.mdf-color-control {
|
|
243
|
+
display: flex;
|
|
244
|
+
flex-direction: column;
|
|
245
|
+
width: 8rem;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.mdf-color-label {
|
|
249
|
+
padding: 0.5rem;
|
|
250
|
+
background-color: white;
|
|
251
|
+
border-bottom-left-radius: 0.25rem;
|
|
252
|
+
border-bottom-right-radius: 0.25rem;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.mdf-color {
|
|
256
|
+
appearance: none;
|
|
257
|
+
-moz-appearance: none;
|
|
258
|
+
-webkit-appearance: none;
|
|
259
|
+
background: none;
|
|
260
|
+
border: 0;
|
|
261
|
+
cursor: pointer;
|
|
262
|
+
padding: 0;
|
|
263
|
+
width: 100%;
|
|
264
|
+
height: 4rem;
|
|
265
|
+
position: relative;
|
|
266
|
+
z-index: 0;
|
|
267
|
+
|
|
268
|
+
&:focus {
|
|
269
|
+
border-radius: 0.25rem;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
&::-webkit-color-swatch {
|
|
273
|
+
border-top-left-radius: 0.25rem;
|
|
274
|
+
border-top-right-radius: 0.25rem;
|
|
275
|
+
border: 2px solid black;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
&::-webkit-color-swatch-wrapper {
|
|
279
|
+
padding: 0;
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* TABLES */
|
|
284
|
+
.mdf-td,
|
|
285
|
+
.mdf-th {
|
|
286
|
+
padding: 0.5rem;
|
|
287
|
+
border: 1px solid var(--mdf-color-secondary);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.mdf-th,
|
|
291
|
+
:nth-child(even) > .mdf-td {
|
|
292
|
+
background-color: var(--mdf-color-secondary-transparent);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* UTILITIES */
|
|
296
|
+
.visually-hidden {
|
|
297
|
+
position: absolute !important;
|
|
298
|
+
width: 1px !important;
|
|
299
|
+
height: 1px !important;
|
|
300
|
+
padding: 0 !important;
|
|
301
|
+
margin: -1px !important;
|
|
302
|
+
overflow: hidden !important;
|
|
303
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
304
|
+
white-space: nowrap !important;
|
|
305
|
+
border: 0 !important;
|
|
306
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@guillaumemmm/marquedefabrique",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Marque de Fabrique is a minimalistic UI kit. It includes a set of core styles and CSS variables centralizing design elements to maintain consistency across personal projects.",
|
|
5
|
+
"main": "index.css",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/GuillaumeMMM/marquedefabrique.git"
|
|
12
|
+
},
|
|
13
|
+
"author": "guillaumemmm",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"bugs": {
|
|
16
|
+
"url": "https://github.com/GuillaumeMMM/marquedefabrique/issues"
|
|
17
|
+
},
|
|
18
|
+
"homepage": "https://github.com/GuillaumeMMM/marquedefabrique#readme"
|
|
19
|
+
}
|
package/reset.css
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
@layer reset {
|
|
2
|
+
* {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
html,
|
|
7
|
+
body,
|
|
8
|
+
div,
|
|
9
|
+
span,
|
|
10
|
+
applet,
|
|
11
|
+
object,
|
|
12
|
+
iframe,
|
|
13
|
+
h1,
|
|
14
|
+
h2,
|
|
15
|
+
h3,
|
|
16
|
+
h4,
|
|
17
|
+
h5,
|
|
18
|
+
h6,
|
|
19
|
+
p,
|
|
20
|
+
blockquote,
|
|
21
|
+
pre,
|
|
22
|
+
a,
|
|
23
|
+
abbr,
|
|
24
|
+
acronym,
|
|
25
|
+
address,
|
|
26
|
+
big,
|
|
27
|
+
cite,
|
|
28
|
+
code,
|
|
29
|
+
del,
|
|
30
|
+
dfn,
|
|
31
|
+
em,
|
|
32
|
+
img,
|
|
33
|
+
ins,
|
|
34
|
+
kbd,
|
|
35
|
+
q,
|
|
36
|
+
s,
|
|
37
|
+
samp,
|
|
38
|
+
small,
|
|
39
|
+
strike,
|
|
40
|
+
strong,
|
|
41
|
+
sub,
|
|
42
|
+
sup,
|
|
43
|
+
tt,
|
|
44
|
+
var,
|
|
45
|
+
b,
|
|
46
|
+
u,
|
|
47
|
+
i,
|
|
48
|
+
center,
|
|
49
|
+
dl,
|
|
50
|
+
dt,
|
|
51
|
+
dd,
|
|
52
|
+
ol,
|
|
53
|
+
ul,
|
|
54
|
+
li,
|
|
55
|
+
fieldset,
|
|
56
|
+
form,
|
|
57
|
+
label,
|
|
58
|
+
legend,
|
|
59
|
+
table,
|
|
60
|
+
caption,
|
|
61
|
+
tbody,
|
|
62
|
+
tfoot,
|
|
63
|
+
thead,
|
|
64
|
+
tr,
|
|
65
|
+
th,
|
|
66
|
+
td,
|
|
67
|
+
article,
|
|
68
|
+
aside,
|
|
69
|
+
canvas,
|
|
70
|
+
details,
|
|
71
|
+
embed,
|
|
72
|
+
figure,
|
|
73
|
+
figcaption,
|
|
74
|
+
footer,
|
|
75
|
+
header,
|
|
76
|
+
hgroup,
|
|
77
|
+
menu,
|
|
78
|
+
nav,
|
|
79
|
+
output,
|
|
80
|
+
ruby,
|
|
81
|
+
section,
|
|
82
|
+
summary,
|
|
83
|
+
time,
|
|
84
|
+
mark,
|
|
85
|
+
audio,
|
|
86
|
+
video {
|
|
87
|
+
margin: 0;
|
|
88
|
+
padding: 0;
|
|
89
|
+
border: 0;
|
|
90
|
+
font-size: 100%;
|
|
91
|
+
font: inherit;
|
|
92
|
+
vertical-align: baseline;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
article,
|
|
96
|
+
aside,
|
|
97
|
+
details,
|
|
98
|
+
figcaption,
|
|
99
|
+
figure,
|
|
100
|
+
footer,
|
|
101
|
+
header,
|
|
102
|
+
hgroup,
|
|
103
|
+
menu,
|
|
104
|
+
nav,
|
|
105
|
+
section {
|
|
106
|
+
display: block;
|
|
107
|
+
}
|
|
108
|
+
body {
|
|
109
|
+
line-height: 1;
|
|
110
|
+
}
|
|
111
|
+
ol,
|
|
112
|
+
ul {
|
|
113
|
+
list-style: none;
|
|
114
|
+
}
|
|
115
|
+
blockquote,
|
|
116
|
+
q {
|
|
117
|
+
quotes: none;
|
|
118
|
+
}
|
|
119
|
+
blockquote:before,
|
|
120
|
+
blockquote:after,
|
|
121
|
+
q:before,
|
|
122
|
+
q:after {
|
|
123
|
+
content: "";
|
|
124
|
+
content: none;
|
|
125
|
+
}
|
|
126
|
+
table {
|
|
127
|
+
border-collapse: collapse;
|
|
128
|
+
border-spacing: 0;
|
|
129
|
+
}
|
|
130
|
+
}
|
package/styles.css
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@import "./reset.css" layer(reset);
|
|
2
|
+
@import "./kit.css";
|
|
3
|
+
@import "./variables.css";
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
font-family: "Open Sans", "system-ui", sans-serif;
|
|
7
|
+
font-weight: 500;
|
|
8
|
+
font-style: normal;
|
|
9
|
+
line-height: 1.5;
|
|
10
|
+
padding: 1rem;
|
|
11
|
+
min-height: 100vh;
|
|
12
|
+
background: white;
|
|
13
|
+
background: var(--mdf-background-gradient);
|
|
14
|
+
|
|
15
|
+
main {
|
|
16
|
+
max-width: 900px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
|
|
19
|
+
.content {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
gap: 1rem;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.colors {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-wrap: wrap;
|
|
28
|
+
gap: 1rem;
|
|
29
|
+
|
|
30
|
+
.color {
|
|
31
|
+
width: 10rem;
|
|
32
|
+
height: 10rem;
|
|
33
|
+
border-radius: 0.25rem;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
package/variables.css
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--mdf-color-primary: #04675d;
|
|
3
|
+
--mdf-color-primary-light: #048275;
|
|
4
|
+
--mdf-color-primary-transparent: #bcecce3b;
|
|
5
|
+
--mdf-color-primary-transparent-2: #bcecce7a;
|
|
6
|
+
|
|
7
|
+
--mdf-color-secondary: #534534;
|
|
8
|
+
--mdf-color-secondary-light: #806b53;
|
|
9
|
+
--mdf-color-secondary-transparent: #b1a49527;
|
|
10
|
+
--mdf-color-secondary-transparent-2: #b1a4957a;
|
|
11
|
+
|
|
12
|
+
--mdf-color-tertiary: #482c68;
|
|
13
|
+
--mdf-color-tertiary-light: #805bab;
|
|
14
|
+
--mdf-color-tertiary-transparent: #482c6827;
|
|
15
|
+
--mdf-color-tertiary-transparent-2: #482c687a;
|
|
16
|
+
|
|
17
|
+
--mdf-color-error: #a43030;
|
|
18
|
+
--mdf-color-error-transparent: #a4303027;
|
|
19
|
+
--mdf-color-info: #167792;
|
|
20
|
+
--mdf-color-info-transparent: #16779227;
|
|
21
|
+
--mdf-color-success: #3c843f;
|
|
22
|
+
--mdf-color-success-transparent: #3c843f27;
|
|
23
|
+
--mdf-color-text-muted: #595959;
|
|
24
|
+
|
|
25
|
+
--mdf-background-gradient: linear-gradient(
|
|
26
|
+
121deg,
|
|
27
|
+
var(--mdf-color-secondary-transparent),
|
|
28
|
+
var(--mdf-color-tertiary-transparent) 100%
|
|
29
|
+
);
|
|
30
|
+
}
|