Ghost/ghost/admin/app/templates/designsandbox.hbs

134 lines
5.0 KiB
Handlebars
Raw Normal View History

2021-02-05 15:48:38 +03:00
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
Components
</h2>
</GhCanvasHeader>
2021-02-08 23:16:41 +03:00
<section class="view-container gh-ds">
2021-02-05 15:48:38 +03:00
<h2 class="">Buttons</h2>
<ul class="nostyle">
<li><button class="gh-btn gh-btn-primary"><span>Primary button</span></button></li>
<li><button class="gh-btn"><span>Regular button</span></button></li>
<li><button class="gh-btn gh-btn-blue"><span>Blue button</span></button></li>
<li><button class="gh-btn gh-btn-green"><span>Green button</span></button></li>
<li><button class="gh-btn gh-btn-red"><span>Red button</span></button></li>
<li><button class="gh-btn gh-btn-outline"><span>Outline button</span></button></li>
<li><button class="gh-btn gh-btn-primary gh-btn-large"><span>Large button</span></button></li>
</ul>
<h2 class="">Lists</h2>
<div class="gh-list">
<div class="gh-list-row header">
<div class="gh-list-header">Column 1</div>
<div class="gh-list-header">Column 2</div>
<div class="gh-list-header">Column 3</div>
</div>
<div class="gh-list-row">
<div class="gh-list-data">
<h3>Data</h3>
</div>
<div class="gh-list-data">
<span>Data</span>
</div>
<div class="gh-list-data">
<span>Data</span>
</div>
</div>
<div class="gh-list-row">
<div class="gh-list-data">
<h3>Data</h3>
</div>
<div class="gh-list-data">
<span>Data</span>
</div>
<div class="gh-list-data">
<span>Data</span>
</div>
</div>
<div class="gh-list-row">
<div class="gh-list-data">
<h3>Data</h3>
</div>
<div class="gh-list-data">
<span>Data</span>
</div>
<div class="gh-list-data">
<span>Data</span>
</div>
</div>
</div>
2021-02-16 20:12:24 +03:00
<h2 class="mt8">Sections</h2>
<section class="gh-main-section">
<h4 class="gh-main-section-header small bn">Single column</h4>
<div class="gh-main-section-block">
<div class="gh-main-section-content">
<div>Column 1</div>
</div>
</div>
</section>
<section class="gh-main-section">
<h4 class="gh-main-section-header small bn">Section heading</h4>
<div class="gh-main-section-block">
<div class="gh-main-section-content columns-2">
<div>Column 1</div>
<div>Column 2</div>
</div>
</div>
</section>
<section class="gh-main-section columns-2">
<div class="gh-main-section-block">
<h4 class="gh-main-section-header small bn">Block 1</h4>
<div class="gh-main-section-content grey">Contents</div>
</div>
<div class="gh-main-section-block">
<h4 class="gh-main-section-header small bn">Block 2</h4>
<div class="gh-main-section-content grey">Contents</div>
</div>
</section>
2021-02-10 15:00:07 +03:00
<h2 class="mt8">Setting area</h2>
<div class="gh-main-section">
2021-02-16 20:12:24 +03:00
<h4 class="gh-main-section-header small bn">Section heading</h4>
2021-02-10 15:00:07 +03:00
<div class="gh-expandable">
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Title</h4>
<p class="gh-expandable-description">Description</p>
</div>
<div>[ACTION]</div>
</div>
<div>[CONTENT - OPTIONAL / HIDDEN FOR EXPANDABLE]</div>
</div>
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Title</h4>
<p class="gh-expandable-description">Description</p>
</div>
<div>[ACTION]</div>
</div>
</div>
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Title</h4>
<p class="gh-expandable-description">Description</p>
</div>
<div>[ACTION]</div>
</div>
</div>
</div>
</div>
2021-02-05 15:48:38 +03:00
</section>
</section>