kopia lustrzana https://github.com/wagtail/wagtail
first commit of new styleguide
Dave Cranwell
rodzic
14913d0d1a
commit
2ebf9ba931
|
|
@ -0,0 +1,77 @@
|
|||
@import "../variables.scss";
|
||||
@import "../mixins.scss";
|
||||
@import "../grid.scss";
|
||||
|
||||
section{
|
||||
border-top:1px solid $color-grey-3;
|
||||
padding:0 0 2em 0;
|
||||
|
||||
> h2:first-child{
|
||||
margin:0;
|
||||
font-size:1em;
|
||||
background:$color-grey-4;
|
||||
padding:1em;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
}
|
||||
|
||||
#palette{
|
||||
@include clearfix();
|
||||
|
||||
ul{
|
||||
@include clearfix();
|
||||
@include unlist();
|
||||
}
|
||||
|
||||
li{
|
||||
float:left;
|
||||
width:100px;
|
||||
height:100px;
|
||||
padding:10px;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.color-teal{
|
||||
background-color:$color-teal;
|
||||
}
|
||||
.color-teal-darker{
|
||||
background-color:$color-teal-darker;
|
||||
}
|
||||
.color-teal-dark{
|
||||
background-color:$color-teal-dark;
|
||||
}
|
||||
.color-red{
|
||||
background-color:$color-red;
|
||||
}
|
||||
.color-orange{
|
||||
background-color:$color-orange;
|
||||
}
|
||||
.color-green{
|
||||
background-color:$color-green;
|
||||
}
|
||||
.color-grey-1{
|
||||
background-color:$color-grey-1;
|
||||
}
|
||||
.color-grey-1-1{
|
||||
background-color:$color-grey-1-1;
|
||||
}
|
||||
.color-grey-2{
|
||||
background-color:$color-grey-2;
|
||||
}
|
||||
.color-grey-3{
|
||||
background-color:$color-grey-3;
|
||||
}
|
||||
.color-grey-4{
|
||||
background-color:$color-grey-4;
|
||||
}
|
||||
.color-grey-5{
|
||||
background-color:$color-grey-5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#icons{
|
||||
ul{
|
||||
@include unlist();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
{% extends "wagtailadmin/base.html" %}
|
||||
{% load wagtailadmin_tags %}
|
||||
{% load compress i18n %}
|
||||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/styleguide.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
{% block titletag %}{% trans 'Styleguide' %}{% endblock %}
|
||||
{% block bodyclass %}styleguide{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% trans "Styleguide" as title_trans %}
|
||||
{% include "wagtailadmin/shared/header.html" with title=title_trans %}
|
||||
|
||||
<div class="nice-padding">
|
||||
<h1>Styleguide</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#palette">Colour palette</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#listings">Listings</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#dropdowns">Dropdowns</a></li>
|
||||
<li><a href="#header">Header</a></li>
|
||||
<li><a href="#messages">Messages</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#editor">Page editor</a></li>
|
||||
<li><a href="#tabs">Tabs</a></li>
|
||||
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||
<li><a href="#misc">Misc formatters</a></li>
|
||||
<li><a href="#icons">Icons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="palette">
|
||||
<h2>Colour palette</h2>
|
||||
|
||||
<ul>
|
||||
<li class="color-teal">color-teal</li>
|
||||
<li class="color-teal-darker">color-teal-darker</li>
|
||||
<li class="color-teal-dark">color-teal-dark</li>
|
||||
<li class="color-red">color-red</li>
|
||||
<li class="color-orange">color-orange</li>
|
||||
<li class="color-green">color-green</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="color-grey-1">color-grey-1</li>
|
||||
<li class="color-grey-1-1">color-grey-1-1</li>
|
||||
<li class="color-grey-2">color-grey-2</li>
|
||||
<li class="color-grey-3">color-grey-3</li>
|
||||
<li class="color-grey-4">color-grey-4</li>
|
||||
<li class="color-grey-5">color-grey-5</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="typography">
|
||||
<h2>Typography</h2>
|
||||
<h1>This is an h1</h1>
|
||||
<h2>This is an h2</h2>
|
||||
<h3>This is an h3</h3>
|
||||
<h4>This is an h4</h4>
|
||||
<h5>This is an h5</h5>
|
||||
<p>This is a paragraph</p>
|
||||
|
||||
<ul>
|
||||
<li>These are</li>
|
||||
<li>items in an</li>
|
||||
<li>unordered list</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>These are</li>
|
||||
<li>items in an</li>
|
||||
<li>ordered list</li>
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="listings">
|
||||
<h2>Listings</h2>
|
||||
</section>
|
||||
|
||||
<section id="buttons">
|
||||
<h2>Buttons</h2>
|
||||
|
||||
<div href="" class="button">button</div>
|
||||
|
||||
<div href="" class="button button-secondary">button-secondary</div>
|
||||
|
||||
<div href="" class="button yes">yes</div>
|
||||
|
||||
<div href="" class="button no">no / serious</div>
|
||||
|
||||
<div href="" class="button bicolor icon icon-plus">bicolor with icon</div>
|
||||
|
||||
<div href="" class="button button-small">button-small</div>
|
||||
|
||||
<div href="" class="button bicolor button-small icon icon-plus">bicolo button-small</div>
|
||||
|
||||
<div href="" class="button no bicolor icon icon-cog">mixed</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="dropdowns">
|
||||
<h2>Dropdowns</h2>
|
||||
</section>
|
||||
|
||||
<section id="header">
|
||||
<h2>Header</h2>
|
||||
</section>
|
||||
|
||||
<section id="messages">
|
||||
<h2>Messages</h2>
|
||||
</section>
|
||||
|
||||
<section id="forms">
|
||||
<h2>Forms</h2>
|
||||
</section>
|
||||
|
||||
<section id="editor">
|
||||
<h2>Page editor</h2>
|
||||
</section>
|
||||
|
||||
<section id="tabs">
|
||||
<h2>Tabs</h2>
|
||||
</section>
|
||||
|
||||
<section id="breadcrumbs">
|
||||
<h2>Breadcrumbs</h2>
|
||||
</section>
|
||||
|
||||
<section id="misc">
|
||||
<h2>Misc formatters</h2>
|
||||
<h3>Avatar icons</h3>
|
||||
<h3>Status tags</h3>
|
||||
</section>
|
||||
|
||||
<section id="icons">
|
||||
<h2>Icons</h2>
|
||||
|
||||
<ul>
|
||||
<li class="icon icon-wagtail">wagtail</li>
|
||||
<li class="icon icon-wagtail-inverse">wagtail-inverse</li>
|
||||
<li class="icon icon-cogs">cogs</li>
|
||||
<li class="icon icon-doc-empty-inverse">doc-empty-inverse</li>
|
||||
<li class="icon icon-doc-empty">doc-empty</li>
|
||||
<li class="icon icon-edit">edit</li>
|
||||
<li class="icon icon-arrow-up">arrow-up</li>
|
||||
<li class="icon icon-arrow-down">arrow-down</li>
|
||||
<li class="icon icon-search">search</li>
|
||||
<li class="icon icon-cross">cross</li>
|
||||
<li class="icon icon-folder-open-1">folder-open-1</li>
|
||||
<li class="icon icon-folder-inverse">folder-inverse</li>
|
||||
<li class="icon icon-mail">mail</li>
|
||||
<li class="icon icon-arrows-up-down">arrows-up-down</li>
|
||||
<li class="icon icon-locked">locked</li>
|
||||
<li class="icon icon-unlocked">unlocked</li>
|
||||
<li class="icon icon-arrow-right">arrow-right</li>
|
||||
<li class="icon icon-doc-full">doc-full / file-text-alt</li>
|
||||
<li class="icon icon-image">image / picture</li>
|
||||
<li class="icon icon-doc-full-inverse">doc-full-inverse</li>
|
||||
<li class="icon icon-folder">folder</li>
|
||||
<li class="icon icon-plus">plus</li>
|
||||
<li class="icon icon-tag">tag</li>
|
||||
<li class="icon icon-folder-open-inverse">folder-open-inverse</li>
|
||||
<li class="icon icon-cog">cog</li>
|
||||
<li class="icon icon-tick">tick</li>
|
||||
<li class="icon icon-user">user</li>
|
||||
<li class="icon icon-arrow-left">arrow-left</li>
|
||||
<li class="icon icon-tick-inverse">tick-inverse</li>
|
||||
<li class="icon icon-plus-inverse">plus-inverse</li>
|
||||
<li class="icon icon-snippet">snippet</li>
|
||||
<li class="icon icon-bold">bold</li>
|
||||
<li class="icon icon-italic">italic</li>
|
||||
<li class="icon icon-undo">undo</li>
|
||||
<li class="icon icon-repeat">repeat</li>
|
||||
<li class="icon icon-list-ol">list-ol</li>
|
||||
<li class="icon icon-list-ul">list-ul</li>
|
||||
<li class="icon icon-link">link</li>
|
||||
<li class="icon icon-radio-full">radio-full</li>
|
||||
<li class="icon icon-radio-empty">radio-empty</li>
|
||||
<li class="icon icon-arrow-up-big">arrow-up-big</li>
|
||||
<li class="icon icon-arrow-down-big">arrow-down-big</li>
|
||||
<li class="icon icon-group">group</li>
|
||||
<li class="icon icon-media">media</li>
|
||||
<li class="icon icon-horizontalrule">horizontalrule</li>
|
||||
<li class="icon icon-password">password</li>
|
||||
<li class="icon icon-download">download</li>
|
||||
<li class="icon icon-order">order</li>
|
||||
<li class="icon icon-grip">grip</li>
|
||||
<li class="icon icon-home">home</li>
|
||||
<li class="icon icon-order-down">order-down</li>
|
||||
<li class="icon icon-order-up">order-up</li>
|
||||
<li class="icon icon-bin">bin</li>
|
||||
<li class="icon icon-spinner">spinner</li>
|
||||
<li class="icon icon-pick">pick</li>
|
||||
<li class="icon icon-redirect">redirect</li>
|
||||
<li class="icon icon-view">view</li>
|
||||
<li class="icon icon-collapse-up">collapse-up</li>
|
||||
<li class="icon icon-collapse-down">collapse-down</li>
|
||||
<li class="icon icon-help">help</li>
|
||||
<li class="icon icon-warning">warning</li>
|
||||
<li class="icon icon-success">success</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -82,4 +82,6 @@ urlpatterns += patterns(
|
|||
|
||||
url(r'^userbar/(\d+)/$', 'userbar.for_frontend', name='wagtailadmin_userbar_frontend'),
|
||||
url(r'^userbar/moderation/(\d+)/$', 'userbar.for_moderation', name='wagtailadmin_userbar_moderation'),
|
||||
|
||||
url(r'^styleguide/$', 'styleguide.index', name='wagtailadmin_styleguide'),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
from django.shortcuts import render
|
||||
|
||||
from wagtail.wagtailadmin.userbar import EditPageItem, AddPageItem, ApproveModerationEditPageItem, RejectModerationEditPageItem
|
||||
from wagtail.wagtailadmin import hooks
|
||||
from wagtail.wagtailcore.models import Page, PageRevision
|
||||
|
||||
def index(request):
|
||||
# Render the edit bird
|
||||
return render(request, 'wagtailadmin/styleguide/base.html', {})
|
||||
Ładowanie…
Reference in New Issue