mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-01 07:16:52 +03:00
Added design components page
This commit is contained in:
Peter Zimon
parent
cb40158666
commit
8f8a1a53db
7
ghost/admin/app/controllers/designsystem.js
Normal file
7
ghost/admin/app/controllers/designsystem.js
Normal file
@ -0,0 +1,7 @@
|
||||
import Controller from '@ember/controller';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class DashboardController extends Controller {
|
||||
@service feature;
|
||||
@service session;
|
||||
}
|
||||
@ -77,6 +77,8 @@ Router.map(function () {
|
||||
this.route('member', {path: '/members/:member_id'});
|
||||
|
||||
this.route('error404', {path: '/*path'});
|
||||
|
||||
this.route('designsystem');
|
||||
});
|
||||
|
||||
export default Router;
|
||||
|
||||
13
ghost/admin/app/routes/designsystem.js
Normal file
13
ghost/admin/app/routes/designsystem.js
Normal file
@ -0,0 +1,13 @@
|
||||
import Route from '@ember/routing/route';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default Route.extend({
|
||||
config: service(),
|
||||
|
||||
beforeModel() {
|
||||
this._super(...arguments);
|
||||
if (!this.get('config.enableDeveloperExperiments')) {
|
||||
return this.transitionTo('home');
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,3 +1,14 @@
|
||||
ul.nostyle {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.nostyle li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -45,7 +56,7 @@
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
border-bottom: var(--main-color-area-divider) 1px solid;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1px;
|
||||
color: var(--black);
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
--mainmenu-color-hover-bg: var(--whitegrey);
|
||||
--mainmenu-color-active: var(--black);
|
||||
--mainmenu-color-active-bg: var(--whitegrey);
|
||||
--mainmenu-width: 340px;
|
||||
--mainmenu-width: 310px;
|
||||
--mainmenu-padding: var(--main-layout-area-padding);
|
||||
}
|
||||
|
||||
@ -1193,3 +1193,17 @@
|
||||
padding: 0 4vw 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
section.gh-ds ul {
|
||||
margin-bottom: 5vw;
|
||||
}
|
||||
|
||||
section.gh-ds ul li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
section.gh-ds h2 {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
}
|
||||
@ -172,10 +172,6 @@ p.gh-members-list-email {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.gh-members-chart {
|
||||
padding-bottom: var(--main-layout-area-padding);
|
||||
}
|
||||
|
||||
.gh-members-chart-box {
|
||||
margin-right: var(--main-layout-area-padding);
|
||||
}
|
||||
@ -218,7 +214,7 @@ p.gh-members-list-email {
|
||||
.gh-members-chart-summary-heading {
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -3,15 +3,16 @@
|
||||
|
||||
/* Base button style */
|
||||
/* Should only be applied to <a> tags */
|
||||
.gh-btn {
|
||||
.gh-btn,
|
||||
.gh-btn-grey {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
background: var(--white);
|
||||
box-shadow: 0 2px 5px -3px rgba(0,0,0,.12);
|
||||
background: var(--whitegrey);
|
||||
color: var(--darkgrey);
|
||||
text-decoration: none !important;
|
||||
user-select: none;
|
||||
fill: var(--white);
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s ease;
|
||||
transition-property: color, border-color, background, width, height, box-shadow;
|
||||
@ -20,14 +21,14 @@
|
||||
}
|
||||
|
||||
/* ALL buttons must have a span for content */
|
||||
.gh-btn span {
|
||||
.gh-btn span,
|
||||
.gh-btn-grey span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0 11px;
|
||||
height: 33px;
|
||||
font-size: 1.35rem;
|
||||
line-height: 33px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2px;
|
||||
border-radius: 3px;
|
||||
@ -44,17 +45,16 @@
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
.gh-btn:hover {
|
||||
.gh-btn:hover,
|
||||
.gh-btn-grey:hover {
|
||||
color: var(--darkgrey);
|
||||
box-shadow: 0 3px 4px -3px rgba(0,0,0,.13);
|
||||
border-color: color-mod(var(--midgrey) l(+25%) s(+10%));
|
||||
background: var(--whitegrey-d1);
|
||||
}
|
||||
|
||||
/* When disabled */
|
||||
.gh-btn.disabled,
|
||||
.gh-btn[disabled],
|
||||
fieldset[disabled] .gh-btn {
|
||||
box-shadow: none;
|
||||
opacity: 0.8;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
@ -69,19 +69,123 @@ fieldset[disabled] .gh-btn {
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-btn-primary,
|
||||
.gh-btn-black {
|
||||
background: var(--black);
|
||||
border: none;
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
box-shadow: none;
|
||||
background: var(--black);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-primary:hover,
|
||||
.gh-btn-black:hover {
|
||||
color: var(--white);
|
||||
background: color-mod(var(--black) l(-20%)) !important;
|
||||
}
|
||||
|
||||
|
||||
/* Blue button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-blue {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
background: var(--blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-blue:hover {
|
||||
color: #fff;
|
||||
background: color-mod(var(--blue) l(-4%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-blue:active,
|
||||
.gh-btn-blue:focus {
|
||||
background: color-mod(var(--blue) l(-7%));
|
||||
}
|
||||
|
||||
/* Green button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-green {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
background: var(--green);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-green:hover {
|
||||
color: #fff;
|
||||
background: color-mod(var(--green) l(-4%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-green:active,
|
||||
.gh-btn-green:focus {
|
||||
background: color-mod(var(--green) l(-7%));
|
||||
}
|
||||
|
||||
|
||||
/* Red button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-red {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
box-shadow: none;
|
||||
background: var(--red);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-red:hover {
|
||||
color: #fff;
|
||||
background: color-mod(var(--red) l(-4%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-red:active,
|
||||
.gh-btn-red:focus {
|
||||
background: color-mod(var(--red) l(-7%));
|
||||
}
|
||||
|
||||
/* Outline button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-outline {
|
||||
color: var(--darkgrey);
|
||||
fill: var(--darkgrey);
|
||||
border: 1px solid var(--lightgrey-l1);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.gh-btn-outline:hover {
|
||||
color: var(--black);
|
||||
background: none;
|
||||
border-color: color-mod(var(--lightgrey-l1) l(-8%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-outline:active,
|
||||
.gh-btn-outline:focus {
|
||||
border-color: color-mod(var(--lightgrey-l1) l(-15%));
|
||||
}
|
||||
|
||||
.gh-btn-outline.blue {
|
||||
border-color: var(--blue);
|
||||
color: var(--blue);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-btn-outline.blue:hover {
|
||||
border-color: color-mod(var(--blue) l(-10%));
|
||||
color: color-mod(var(--blue) l(-10%));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Button highlights
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@ -101,147 +205,6 @@ fieldset[disabled] .gh-btn {
|
||||
}
|
||||
|
||||
|
||||
/* Grey button - First so that other colors will override
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-grey {
|
||||
padding: 1px;
|
||||
border: 0;
|
||||
fill: var(--darkgrey);
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* The background of the span is the main visual element */
|
||||
.gh-btn-grey span {
|
||||
background: color-mod(var(--lightgrey) l(-5%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-grey:active,
|
||||
.gh-btn-grey:focus {
|
||||
background: color-mod(var(--midgrey) l(+25%));
|
||||
}
|
||||
.gh-btn-grey:active span,
|
||||
.gh-btn-grey:focus span {
|
||||
background: color-mod(var(--lightgrey) l(+15%));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Blue button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-blue,
|
||||
.gh-btn-blue:hover {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
box-shadow: none;
|
||||
transition-property: box-shadow;
|
||||
}
|
||||
|
||||
.gh-btn-blue:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* The background of the span is the main visual element */
|
||||
.gh-btn-blue span {
|
||||
background: var(--blue);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-blue:hover span {
|
||||
background: color-mod(var(--blue) l(+5%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-blue:active,
|
||||
.gh-btn-blue:focus {
|
||||
background: var(--blue);
|
||||
}
|
||||
.gh-btn-blue:active span,
|
||||
.gh-btn-blue:focus span {
|
||||
background: var(--blue);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Green button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-green,
|
||||
.gh-btn-green:hover {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
box-shadow: none;
|
||||
transition-property: box-shadow;
|
||||
}
|
||||
|
||||
.gh-btn-green:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* The background of the span is the main visual element */
|
||||
.gh-btn-green span {
|
||||
background: var(--green);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-green:hover span {
|
||||
background: color-mod(var(--green) l(+5%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-green:active,
|
||||
.gh-btn-green:focus {
|
||||
background: var(--green);
|
||||
}
|
||||
.gh-btn-green:active span,
|
||||
.gh-btn-green:focus span {
|
||||
background: var(--green);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Red button
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
/* The background of the button creates 1px gradient border */
|
||||
.gh-btn-red,
|
||||
.gh-btn-red:hover {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
box-shadow: none;
|
||||
transition-property: box-shadow;
|
||||
}
|
||||
|
||||
.gh-btn-red:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* The background of the span is the main visual element */
|
||||
.gh-btn-red span {
|
||||
background: var(--red);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-btn-red:hover span {
|
||||
background: color-mod(var(--red) l(+5%));
|
||||
}
|
||||
|
||||
/* When clicked or focused with keyboard */
|
||||
.gh-btn-red:active,
|
||||
.gh-btn-red:focus {
|
||||
background: var(--red);
|
||||
}
|
||||
.gh-btn-red:active span,
|
||||
.gh-btn-red:focus span {
|
||||
background: var(--red);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Special Buttons
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@ -366,22 +329,6 @@ svg.gh-btn-icon-right {
|
||||
color: color-mod(var(--yellow) l(-10%));
|
||||
}
|
||||
|
||||
.gh-btn-outline,
|
||||
.gh-btn-outline:hover {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gh-btn-outline.blue {
|
||||
border-color: var(--blue);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.gh-btn-outline.blue:hover {
|
||||
border-color: color-mod(var(--blue) l(-10%));
|
||||
color: color-mod(var(--blue) l(-10%));
|
||||
}
|
||||
|
||||
.gh-btn-textfield-group span {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
|
||||
64
ghost/admin/app/templates/designsystem.hbs
Normal file
64
ghost/admin/app/templates/designsystem.hbs
Normal file
@ -0,0 +1,64 @@
|
||||
<section class="gh-canvas">
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
Components
|
||||
</h2>
|
||||
</GhCanvasHeader>
|
||||
|
||||
<section class="view-container gh-main-width gh-ds">
|
||||
<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>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user