pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #76 from dod-ccpo/ui/icons

Browse Source 
Icons!
This commit is contained in:
andrewdds 2018-07-18 11:26:10 -04:00 committed by GitHub
commit 2bfa33079d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 114 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
README.md
View File

@ -12,43 +12,43 @@ microservices when appropriate.
## Installation
### Requirements
See the [scriptz](https://github.com/dod-ccpo/scriptz) repository for the shared
See the [scriptz](https://github.com/dod-ccpo/scriptz) repository for the shared
requirements and guidelines for all ATAT applications.
Additionally, ATST requires a redis instance for session management. Have redis
installed and running. By default, ATST will try to connect to a redis instance
Additionally, ATST requires a redis instance for session management. Have redis
installed and running. By default, ATST will try to connect to a redis instance
running on localhost on its default port, 6379.
### Cloning
This project contains git submodules. Here is an example clone command that will
This project contains git submodules. Here is an example clone command that will
automatically initialize and update those modules:
git clone --recurse-submodules git@github.com:dod-ccpo/atst.git
If you have an existing clone that does not yet contain the submodules, you can
If you have an existing clone that does not yet contain the submodules, you can
set them up with the following command:
git submodule update --init --recursive
### Setup
This application uses Pipenv to manage Python dependencies and a virtual
environment. Instead of the classic `requirements.txt` file, pipenv uses a
Pipfile and Pipfile.lock, making it more similar to other modern package managers
environment. Instead of the classic `requirements.txt` file, pipenv uses a
Pipfile and Pipfile.lock, making it more similar to other modern package managers
like yarn or mix.
To perform the installation, run the setup script:
script/setup
The setup script creates the virtual environment, and then calls script/bootstrap
The setup script creates the virtual environment, and then calls script/bootstrap
to install all of the Python and Node dependencies.
To enter the virtualenv manually (a la `source .venv/bin/activate`):
pipenv shell
If you want to automatically load the virtual environment whenever you enter the
project directory, take a look at [direnv](https://direnv.net/). An `.envrc`
file is included in this repository. direnv will activate and deactivate
If you want to automatically load the virtual environment whenever you enter the
project directory, take a look at [direnv](https://direnv.net/). An `.envrc`
file is included in this repository. direnv will activate and deactivate
virtualenvs for you when you enter and leave the directory.
@ -79,3 +79,10 @@ following to `~/.vim/filetype.vim` for syntax highlighting:
:au BufRead *.html.to set filetype=mustache
## Icons
To render an icon use `{% module Icon('name') %}` in a template, where `name` is the filename of an svg file in `static/icons`.
All icons used should be from the Noun Project, specifically [this collection](https://thenounproject.com/monstercritic/collection/tinicons-a-set-of-tiny-icons-perfect-for-ui-elemen/) if possible.
SVG markup should be cleaned an minified, [Svgsus](http://www.svgs.us/) works well.

3
atst/app.py
View File

@ -15,10 +15,10 @@ from atst.handlers.dev import Dev
from atst.home import home
from atst.api_client import ApiClient
from atst.sessions import RedisSessions
from atst import ui_modules
ENV = os.getenv("TORNADO_ENV", "dev")
def make_app(config, deps, **kwargs):
routes = [
@ -100,6 +100,7 @@ def make_app(config, deps, **kwargs):
static_path=home.child("static"),
cookie_secret=config["default"]["COOKIE_SECRET"],
debug=config["default"].getboolean("DEBUG"),
ui_modules=ui_modules,
**kwargs,
)
app.config = config

7
atst/ui_modules.py Normal file
View File

@ -0,0 +1,7 @@
from tornado.web import UIModule
class Icon(UIModule):
def render(self, name, classes=''):
with open('static/icons/%s.svg' % name) as svg:
return self.render_string(
"components/icon.html.to", svg=svg.read(), name=name, classes=classes)

2
scss/atat.scss
View File

@ -3,6 +3,7 @@
@import 'core/base';
@import 'core/grid';
@import 'core/util';
@import 'elements/typography';
@import 'elements/inputs';
@ -10,6 +11,7 @@
@import 'elements/panels';
@import 'elements/block_lists';
@import 'elements/tables';
@import 'elements/icons';
@import 'components/site_action';
@import 'components/empty_state';

3
scss/core/_util.scss Normal file
View File

@ -0,0 +1,3 @@
.nowrap {
white-space: nowrap;
}

7
scss/core/_variables.scss
View File

@ -3,10 +3,9 @@
* ===================================================
*/
$gap: .8rem; // 8px at 10px $em-base
$topbar-height: 4.8rem;
$gap: .8rem; // 8px at 10px $em-base
$topbar-height: 4.8rem;
$icon-size-small: 2.4rem;
/*
* USWDS Variables

28
scss/elements/_icons.scss Normal file
View File

@ -0,0 +1,28 @@
@mixin icon {
display: inline-block;
vertical-align: bottom;
> svg {
width: 100%;
height: 100%;
}
}
@mixin icon-size($size) {
$icon-size: $size * .1rem;
width: $icon-size;
height: $icon-size;
margin: $icon-size / 4;
}
@mixin icon-style-default {
> svg * {
fill: $color-black;
}
}
.icon {
@include icon;
@include icon-size(16);
@include icon-style-default;
}

1
static/icons/alert.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 431 B

1
static/icons/avatar.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 16h-2v-3.225l-3.919-.781C9.455 11.869 9 11.314 9 10.675V9.242c0-.477.236-.921.631-1.187C9.919 7.86 11 6.595 11 5c0-1.853-1.558-3-3-3-1.449 0-3 1.206-3 3 0 1.596 1.081 2.859 1.371 3.056.395.268.629.711.629 1.186v1.433c0 .64-.455 1.194-1.083 1.319l-3.916.783L2 16H0v-3.221c0-.951.677-1.776 1.609-1.963L5 10.139v-.623C4.235 8.839 3 7.136 3 5c0-3.088 2.595-5 5-5 2.757 0 5 2.243 5 5 0 2.134-1.234 3.837-2 4.516v.623l3.396.679c.929.187 1.604 1.01 1.604 1.957V16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 540 B

1
static/icons/bell.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 12H2c-.552 0-1-.447-1-1s.448-1 1-1c.469 0 1 0 1-2V7c0-2.757 2.243-5 5-5s5 2.243 5 5v1c0 2 .531 2 1 2 .553 0 1 .447 1 1s-.447 1-1 1zm-9.261-2h6.521c-.173-.553-.26-1.22-.26-2V7c0-1.654-1.346-3-3-3S5 5.346 5 7v1c0 .78-.087 1.447-.261 2zM8 4c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v2c0 .552-.448 1-1 1z"/><circle cx="8" cy="14.5" r="1.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 424 B

1
static/icons/briefcase.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 16H1c-.552 0-1-.447-1-1V5c0-.552.448-1 1-1h14c.553 0 1 .448 1 1v10c0 .553-.447 1-1 1zM2 14h12V6H2v8zm10-8H4V3c0-1.102.896-1.999 1.999-1.999h4.002C11.104 1.001 12 1.898 12 3v3zM6 4h4V3l-4.001.001L6 4zm2 8l-.275-.038-7-2 .55-1.923L8 9.96l6.726-1.921.549 1.923-7 2L8 12z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 350 B

1
static/icons/caret_down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 13c-.256 0-.512-.098-.707-.293l-7-7c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0L8 10.586l6.293-6.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-7 7C8.512 12.902 8.256 13 8 13z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 268 B

1
static/icons/caret_left.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 16c-.256 0-.512-.098-.707-.293l-7-7c-.391-.391-.391-1.023 0-1.414l7-7c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414L5.414 8l6.293 6.293c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

1
static/icons/caret_right.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414L10.586 8 4.293 1.707c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l7 7c.391.391.391 1.023 0 1.414l-7 7C5.512 15.902 5.256 16 5 16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 275 B

1
static/icons/caret_up.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 12c-.256 0-.512-.098-.707-.293L8 5.414l-6.293 6.293c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l7-7c.391-.391 1.023-.391 1.414 0l7 7c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

1
static/icons/chart.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 13H1c-.552 0-1-.447-1-1V2c0-.552.448-1 1-1h14c.553 0 1 .448 1 1v10c0 .553-.447 1-1 1zM2 11h12V3H2v8zm6-8c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1zM3.999 16c-.19 0-.383-.055-.554-.168-.459-.307-.583-.927-.277-1.387l2-3c.306-.46.926-.584 1.387-.277.459.307.583.927.277 1.387l-2 3c-.193.289-.51.445-.833.445zm8.002 0c-.323 0-.641-.156-.833-.445l-2-3c-.306-.46-.182-1.08.277-1.387.46-.307 1.08-.183 1.387.277l2 3c.307.46.183 1.08-.277 1.387-.171.113-.364.168-.554.168zM4 10c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l3-3c.391-.391 1.023-.391 1.414 0L9 6.586l2.293-2.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-3 3c-.391.391-1.023.391-1.414 0L7 7.414 4.707 9.707C4.512 9.902 4.256 10 4 10z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 818 B

1
static/icons/cloud.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.5 15H5c-2.757 0-5-2.243-5-5 0-2.204 1.446-4.126 3.511-4.769C4.395 3.277 6.335 2 8.5 2c2.773 0 5.058 2.034 5.434 4.727C15.205 7.548 16 8.972 16 10.5c0 2.481-2.019 4.5-4.5 4.5zm-3-11c-1.493 0-2.819.962-3.3 2.394-.115.342-.407.596-.762.664C3.025 7.326 2 8.563 2 10c0 1.654 1.346 3 3 3h6.5c1.379 0 2.5-1.121 2.5-2.5 0-.972-.553-1.835-1.441-2.254-.339-.16-.561-.495-.573-.869C11.918 5.483 10.387 4 8.5 4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 482 B

1
static/icons/document.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15 16H2c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1h13c.553 0 1 .448 1 1v14c0 .553-.447 1-1 1zM3 14h11V2H3v12zM5 4h7v2H5zm0 3h7v2H5zm0 3h4v2H5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

1
static/icons/download.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 16H0v-6h2v4h12v-4h2zm-8-4c-.256 0-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0L8 9.586l3.293-3.293c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-4 4C8.512 11.902 8.256 12 8 12zm0 0c-.552 0-1-.447-1-1V1c0-.552.448-1 1-1s1 .448 1 1v10c0 .553-.448 1-1 1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 366 B

1
static/icons/folder.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 16H2c-1.103 0-2-.897-2-2V2C0 .897.897 0 2 0h5.004c1.098 0 1.995.893 2 1.99V2H14c1.103 0 2 .897 2 2v10c0 1.103-.897 2-2 2zM7.005 1.99L2 2v12h12V4H6.995l.01-2.01z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 243 B

1
static/icons/help.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm-.081 10.972c-.274 0-.513-.086-.717-.259-.204-.173-.306-.415-.306-.726 0-.276.099-.508.296-.696.198-.188.44-.283.727-.283.283 0 .521.095.714.283.193.188.289.42.289.696 0 .307-.101.548-.303.723-.202.175-.435.262-.7.262zM4.634 5.773c0-.416.137-.837.411-1.264.274-.427.673-.781 1.198-1.061.525-.28 1.138-.42 1.838-.42.651 0 1.225.117 1.723.351.498.234.883.553 1.155.956.271.403.407.841.407 1.313 0 .373-.078.699-.232.979-.155.28-.339.522-.552.726-.214.204-.596.546-1.148 1.028-.153.136-.275.255-.367.358-.092.103-.16.197-.205.282-.045.086-.08.171-.105.257-.024.085-.061.235-.111.45-.085.455-.352.683-.801.683-.233 0-.43-.075-.589-.224-.159-.149-.239-.37-.239-.663 0-.368.059-.687.175-.956.117-.269.272-.506.465-.709.193-.204.453-.446.781-.726.287-.245.494-.43.622-.555.128-.125.236-.264.323-.417.088-.153.132-.32.132-.499 0-.351-.134-.646-.401-.887s-.611-.361-1.033-.361c-.494 0-.857.121-1.091.364-.233.243-.431.601-.592 1.074-.153.495-.442.742-.869.742-.251 0-.463-.086-.636-.259-.173-.173-.259-.36-.259-.562z" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
static/icons/info.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm0 14c3.309 0 6-2.691 6-6s-2.691-6-6-6-6 2.691-6 6 2.691 6 6 6zm0-8c.552 0 1 .447 1 1v4.436c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.553.448-1 1-1zm0-3c.26 0 .52.11.71.29.18.19.29.45.29.71 0 .271-.11.521-.29.71-.38.37-1.05.37-1.42 0C7.11 4.521 7 4.26 7 4c0-.26.11-.52.29-.71.19-.18.45-.29.71-.29z" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 541 B

1
static/icons/link.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.321 10.68c-.256 0-.512-.098-.707-.293-1.953-1.954-1.953-5.132 0-7.085L7.465 1.45C8.411.504 9.67-.017 11.008-.017s2.596.521 3.542 1.467 1.468 2.205 1.468 3.543-.521 2.596-1.468 3.542c-.391.391-1.023.391-1.414 0s-.391-1.024 0-1.414c.568-.569.882-1.325.882-2.128 0-.804-.313-1.56-.882-2.129-1.137-1.137-3.12-1.137-4.257 0L7.028 4.715c-1.173 1.174-1.173 3.083 0 4.257.391.391.391 1.023 0 1.414-.195.196-.451.294-.707.294zm-1.293 5.302c-1.338 0-2.596-.521-3.542-1.468C.54 13.569.018 12.31.018 10.972S.539 8.376 1.485 7.43c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414c-.569.568-.882 1.325-.882 2.129s.313 1.56.882 2.128c1.138 1.137 3.119 1.137 4.257 0l1.699-1.699c.568-.568.882-1.324.882-2.128s-.313-1.56-.882-2.129c-.391-.39-.391-1.023 0-1.414s1.023-.391 1.414 0c.946.946 1.468 2.204 1.468 3.543 0 1.338-.521 2.597-1.468 3.542L8.57 14.515c-.946.946-2.204 1.467-3.542 1.467z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 953 B

1
static/icons/ok.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 12c-.266 0-.522-.106-.71-.296L3.915 8.297c-.389-.392-.386-1.025.006-1.414.392-.387 1.026-.386 1.414.007l2.574 2.597 6.302-8.101c.339-.435.967-.514 1.403-.176.436.339.515.968.175 1.403l-7 9c-.177.227-.442.367-.729.384L8 12zm0 4c-4.411 0-8-3.589-8-8s3.589-8 8-8c.964 0 1.906.17 2.803.505.517.193.779.77.586 1.287s-.765.783-1.287.586C9.431 2.127 8.724 2 8 2 4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6c0-.552.447-1 1-1s1 .448 1 1c0 4.411-3.589 8-8 8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

1
static/icons/search.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1 15l5.465-5.465M1 16c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l5.465-5.465c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-5.465 5.465C1.512 15.902 1.256 16 1 16zm9-4c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm0-10C7.794 2 6 3.794 6 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 383 B

1
static/icons/shield.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8.062 0c1.63.026 3.239.416 4.83.823 0 0 1.684.547 1.774 2.016.035 1.688.162 3.415-.133 4.952-.684 3.559-3.511 6.351-6.271 8.202 0 0-.454.068-.898-.228-3.182-2.179-5.963-5.341-6.067-9.247C1.274 4.012.695 1.43 3.331.756 4.886.368 6.457-.009 8.062 0zm-.197 2.082c-1.533.052-4.529.829-4.538.843-.031 1.555-.173 3.193.119 4.578.542 2.566 2.436 4.623 4.512 6.118 0 0 .991-.743 1.58-1.323.273-.27.537-.548.79-.838 1.237-1.419 2.256-3.125 2.308-4.983.011-1.181.001-2.363.001-3.544 0-.212-1.634-.446-2.789-.648-.657-.114-1.32-.211-1.983-.203z" fill-rule="nonzero"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B

1
static/icons/trash.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.098 16H4.902c-1.029 0-1.884-.772-1.987-1.798L2.095 6H1c-.552 0-1-.448-1-1s.448-1 1-1h2c.514 0 .944.389.995.9l.91 9.103L11.098 14l.907-9.1c.051-.511.481-.9.995-.9h2c.553 0 1 .448 1 1s-.447 1-1 1h-1.095l-.82 8.202C12.982 15.227 12.129 16 11.098 16zm-.993-12.553L9.382 2H6.618l-.723 1.447-1.79-.894 1-2C5.275.214 5.621 0 6 0h4c.379 0 .725.214.895.553l1 2-1.79.894zM2 4h12v2H2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 456 B

1
static/icons/x.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 413 B

2
templates/components/icon.html.to Normal file
View File

@ -0,0 +1,2 @@
{% autoescape None %}
<span class="icon icon--{{name}} {{classes}}" aria-hidden="true">{{ svg }}</span>

33
templates/styleguide.html.to
View File

@ -24,11 +24,6 @@
{% end %}
{% block content %}
<div class='col'>
<div class='panel'>
<p>This is a panel</p>
</div>
</div>
<div class='col col--grow'>
<div class='panel'>
@ -43,6 +38,7 @@
<p>This is a paragraph. <a href="\">Lorem ipsum dolor sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="row">
<div class='col col--grow'>col 1</div>
<div class='col col--grow'>col 2</div>
@ -71,6 +67,33 @@
Another panel without padding
</div>
<div class='panel'>
<div class='panel__content'>
<h5>Icons</h5>
<span class='nowrap'>{% module Icon('trash') %} 'trash'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('document') %} 'document'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('cloud') %} 'cloud'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('chart') %} 'chart'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_up') %} 'caret_up'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_down') %} 'caret_down'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_right') %} 'caret_right'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_left') %} 'caret_left'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('x') %} 'x'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('search') %} 'search'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('avatar') %} 'avatar'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('download') %} 'download'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('briefcase') %} 'briefcase'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('bell') %} 'bell'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('folder') %} 'folder'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('help') %} 'help'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('shield') %} 'shield'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('info') %} 'info'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('alert') %} 'alert'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('link') %} 'link'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('ok') %} 'ok'&nbsp;&nbsp;&nbsp;</span>
</div>
</div>
<section class='block-list'>
<header class='block-list__header'>
<h3 class='block-list__title'>A Block List</h3>