Skip to content

Commit aa35312

Browse files
olivier3lancolivier3lanc
committed
feat: Ajout de colonnes dans la doc + documentation affichée est celle de l'UI de BRiCSS
1 parent f8abcf4 commit aa35312

File tree

5 files changed

+264
-992
lines changed

5 files changed

+264
-992
lines changed

‎assets/css/dsg_core.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1428,6 +1428,9 @@
14281428
.brep-repeat-y {
14291429
background-repeat: repeat-y;
14301430
}
1431+
.bs-1 {
1432+
box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.5);
1433+
}
14311434
.cur-pointer {
14321435
cursor: pointer;
14331436
}
@@ -1461,9 +1464,6 @@
14611464
.opa-9 {
14621465
opacity: 0.9;
14631466
}
1464-
.bs-1 {
1465-
box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.5);
1466-
}
14671467
.ls-none {
14681468
list-style: none;
14691469
}

‎assets/js/dsg.js‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -403,54 +403,58 @@ const dsg = {
403403
},
404404
docPropertyItem: function({property, content, responsiveContent, utilityContent}) {
405405
return `
406-
<li class="dsg__doc__property_item | d-flex fd-column gap-6 | p-6 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2"
406+
<li class="dsg__doc__property_item | w-6t | p-6 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2"
407+
w-6t="lg"
408+
w-12t="xs,sm,md"
407409
data-property="${property}">
408-
<div class="d-flex jc-space-between">
409-
<h4 class="d-flex fd-column gap-3 fg-1 | m-0">
410-
<span class="d-flex fd-column">
411-
<span class="ff-lead-400 fs-1 tt-uppercase | c-secondary-700">Property</span>
412-
<span class="d-flex ai-center gap-3 | ff-mono fs-5 | c-secondary-500">
413-
<span class="d-flex ai-center gap-3">
414-
${property}
415-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/${property}"
416-
target="_blank"
417-
class="d-flex ai-center | fs-1 | c-secondary-600"
418-
title="Learn more about ${property} on Mozilla Developer Network">
419-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
420-
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
421-
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
422-
<polyline points="15 3 21 3 21 9"></polyline>
423-
<line x1="10" y1="14" x2="21" y2="3"></line>
424-
</svg>
425-
</a>
410+
<div class="d-flex fd-column gap-6">
411+
<div class="d-flex jc-space-between">
412+
<h4 class="d-flex fd-column gap-3 fg-1 | m-0">
413+
<span class="d-flex fd-column">
414+
<span class="ff-lead-400 fs-1 tt-uppercase | c-secondary-700">Property</span>
415+
<span class="d-flex ai-center gap-3 | ff-mono fs-5 | c-secondary-500">
416+
<span class="d-flex ai-center gap-3">
417+
${property}
418+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/${property}"
419+
target="_blank"
420+
class="d-flex ai-center | fs-1 | c-secondary-600"
421+
title="Learn more about ${property} on Mozilla Developer Network">
422+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
423+
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
424+
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
425+
<polyline points="15 3 21 3 21 9"></polyline>
426+
<line x1="10" y1="14" x2="21" y2="3"></line>
427+
</svg>
428+
</a>
429+
</span>
426430
</span>
427431
</span>
428-
</span>
429-
<span class="d-flex fd-column">
430-
<span class="ff-lead-400 fs-1 tt-uppercase | c-quaternary-800">Prefix</span>
431-
<span class="ff-mono fs-5 | c-quaternary-500">
432-
${dsg.build.properties[property].prefix}${dsg.build.settings.separator}
432+
<span class="d-flex fd-column">
433+
<span class="ff-lead-400 fs-1 tt-uppercase | c-quaternary-800">Prefix</span>
434+
<span class="ff-mono fs-5 | c-quaternary-500">
435+
${dsg.build.properties[property].prefix}${dsg.build.settings.separator}
436+
</span>
433437
</span>
434-
</span>
435-
</h4>
436-
<div class="d-flex gap-1 fw-wrap jc-end">
437-
<fieldset class="dsg__doc__property_item__responsive_content | d-flex fd-column gap-1 | bwidth-1 bstyle-solid bcolor-primary-500 brad-2">
438-
<legend class="fs-2 | c-primary-300">Responsive</legend>
439-
${responsiveContent}
440-
</fieldset>
441-
<fieldset class="dsg__doc__property_item__utility_content | d-flex fd-column gap-1 | bwidth-1 bstyle-solid bcolor-primary-500 brad-2">
442-
<legend class="fs-2 | c-primary-300">Utitity</legend>
443-
${utilityContent}
444-
</fieldset>
438+
</h4>
439+
<div class="d-flex gap-1 fw-wrap jc-end">
440+
<fieldset class="dsg__doc__property_item__responsive_content | d-flex fd-column gap-1 | bwidth-1 bstyle-solid bcolor-primary-500 brad-2">
441+
<legend class="fs-2 | c-primary-300">Responsive</legend>
442+
${responsiveContent}
443+
</fieldset>
444+
<fieldset class="dsg__doc__property_item__utility_content | d-flex fd-column gap-1 | bwidth-1 bstyle-solid bcolor-primary-500 brad-2">
445+
<legend class="fs-2 | c-primary-300">Utitity</legend>
446+
${utilityContent}
447+
</fieldset>
448+
</div>
445449
</div>
450+
<ul class="dsg__doc__property_item__list | d-flex fd-column gap-2 fg-1 | m-0 p-0">
451+
<li class="d-flex jc-space-between gap-3 | fs-1 tt-uppercase">
452+
<span class="c-quaternary-800">CSS Class</span>
453+
<span class="c-tertiary-700">Value</span>
454+
</li>
455+
${content}
456+
</ul>
446457
</div>
447-
<ul class="dsg__doc__property_item__list | d-flex fd-column gap-2 fg-1 | m-0 p-0">
448-
<li class="d-flex jc-space-between gap-3 | fs-1 tt-uppercase">
449-
<span class="c-quaternary-800">CSS Class</span>
450-
<span class="c-tertiary-700">Value</span>
451-
</li>
452-
${content}
453-
</ul>
454458
</li>
455459
`;
456460
}

0 commit comments

Comments
 (0)