Mercurial > libervia-templates
changeset 172:4a03d0a6839b
css (styles): various styles improvments:
- work on list
- new paired-slides class
- box-medium is a larger than before
- use --text modified when size is 1em
- added several list modifiers classes
- added several box modifiers
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 26 Jan 2019 20:22:18 +0100 (2019-01-26) |
parents | cede18c118c9 |
children | 221cd8f0c9d5 |
files | sat_templates/templates/default/components/block.html sat_templates/templates/default/input/navigation.html sat_templates/templates/default/merge-request/item.html sat_templates/templates/default/photo/album.html sat_templates/templates/default/static/styles.css sat_templates/templates/default/ticket/item.html |
diffstat | 6 files changed, 150 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/default/components/block.html Fri Jan 25 11:28:41 2019 +0100 +++ b/sat_templates/templates/default/components/block.html Sat Jan 26 20:22:18 2019 +0100 @@ -25,7 +25,7 @@ {% for disco_entity in disco_entities %} <li class='grid__item grid__item--medium grid__item--selectable'> <a href="{{disco_entity.url}}" class="items_vert--centered"> - {{ icon(icon_name, cls='icon--medium') }} + {{ icon(icon_name, cls='icon--block icon--medium') }} <span>{{ disco_entity.name }}</span> </a> </li>
--- a/sat_templates/templates/default/input/navigation.html Fri Jan 25 11:28:41 2019 +0100 +++ b/sat_templates/templates/default/input/navigation.html Sat Jan 26 20:22:18 2019 +0100 @@ -1,10 +1,10 @@ {% macro prev_next(prev_label=_("newer"), next_label=_("older")) %} <nav class="prev_next box box--large box--zero"> - <ul> + <ul class="list list--inline"> {% if previous_page_url is defined %} <li class="prev_next__previous"> <a href="{{previous_page_url}}"> - {{ icon('angle-double-left', cls='icon--small') }} + {{ icon('angle-double-left', cls='icon--text') }} {{prev_label}} </a> </li> @@ -13,7 +13,7 @@ <li class="prev_next__next"> <a href="{{next_page_url}}"> {{next_label}} - {{ icon('angle-double-right', cls='icon--small') }} + {{ icon('angle-double-right', cls='icon--text') }} </a> </li> {% endif %}
--- a/sat_templates/templates/default/merge-request/item.html Fri Jan 25 11:28:41 2019 +0100 +++ b/sat_templates/templates/default/merge-request/item.html Sat Jan 26 20:22:18 2019 +0100 @@ -33,7 +33,7 @@ {% if url_ticket_edit is defined %} <p class="box__tools"> <a href="{{url_ticket_edit}}"> - {{ icon('pencil', cls='icon--small') }} + {{ icon('pencil', cls='icon--text') }} edit </a> </p>
--- a/sat_templates/templates/default/photo/album.html Fri Jan 25 11:28:41 2019 +0100 +++ b/sat_templates/templates/default/photo/album.html Sat Jan 26 20:22:18 2019 +0100 @@ -17,7 +17,7 @@ {% if file.comments_count %} <span class='comments__count'>({{file.comments_count}})</span> {% endif %} - {{ icon('comment-empty', cls='icon--small') }} + {{ icon('comment-empty', cls='icon--text') }} </span> <div id='{{'comments_panel'|cur_gidx}}' class="panel-drawer"> {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }}
--- a/sat_templates/templates/default/static/styles.css Fri Jan 25 11:28:41 2019 +0100 +++ b/sat_templates/templates/default/static/styles.css Sat Jan 26 20:22:18 2019 +0100 @@ -7,6 +7,7 @@ --box--expand_limit: 20rem; --box--expand_height-min: 9rem; --select-bg-color: #ddd; + --size-small: 1.5rem; --size-medium: 3rem; --color-prim: #fafafa; --color-prim--light: #ffffff; @@ -33,10 +34,6 @@ box-sizing: border-box; } -ul { - padding: 0; -} - p { margin: 0; } @@ -157,6 +154,8 @@ * Generic * ***********/ +/** Common Sizes **/ + /** Buttons **/ .btn { @@ -217,6 +216,12 @@ box-shadow: 0px 0px 6px 1px #000; } +/** heading **/ +.heading__subtitle { + font-size: 2em; + text-align: center; +} + /** instructions **/ .instructions--head { @@ -233,6 +238,18 @@ font-style: italic; } +/** descriptions **/ + +.description { + padding: 1em; + text-align: center; + font-size: 1.2em; +} + +.description--emphasis { + font-weight: bold; +} + /** images **/ .img--center{ @@ -241,10 +258,38 @@ max-width: 100%; } +.img--float-left { + float: left; +} + +.img--float-right { + float: right; +} + +.img--inline { + vertical-align: middle; +} + +.img--inline-bottom { + vertical-align: bottom; +} + +.img--very-small { + height: 2em; +} + .img--small { height: 100px; } +.img--medium { + height: 10rem; +} + +.img--large { + width: 40rem; +} + /** other language **/ .other_lang.state_init>div.info>p { @@ -293,8 +338,8 @@ } .box__content img { + margin: 0; max-width: 100%; - margin: 0; } .box__content video { @@ -306,9 +351,8 @@ white-space: pre-wrap; } - .box--large { - max-width: 80rem; + max-width: 60rem; } .box--plain { @@ -342,10 +386,16 @@ background: var(--color-prim); } +.box--middle { + margin-left: auto; + margin-right: auto; +} + .box--center { display: flex; align-items: center; justify-content: center; + flex-direction: column; } .box--zero { @@ -361,6 +411,23 @@ transition: max-height 0.5s; } +.box--quarter-screen{ + min-height: 25vh; +} + +.box--third-screen{ + min-height: 33vh; +} + +.box--half-screen{ + min-height: 50vh; +} + +.box--screen{ + /* box taking a whole screen */ + min-height: 100vho +} + .box__expand_zone { /* zone to click to expand/fold the box */ cursor: pointer; @@ -515,9 +582,28 @@ *********/ .list { + padding: 0; list-style: none; display: flex; flex-direction: column; + margin: 0; +} + +.list--features { + font-variant: small-caps; +} + +.list--features svg { + margin-right: 0.5em; +} + +.list--inline { + flex-direction: row; + margin: 0; +} + +.list__item { + margin: 0.5em; } .list__item>a { @@ -525,6 +611,11 @@ color: inherit; } +.list__item--selected { + font-weight: bold; + text-decoration: underline; +} + /********* * Grids * *********/ @@ -630,17 +721,24 @@ * icons * *********/ -.icon--medium { - height: var(--size-medium); +.icon--block { display: block; margin: 0 auto; } -.icon--small { +.icon--text { height: 1em; vertical-align: middle; } +.icon--small { + height: var(--size-small); +} + +.icon--medium { + height: var(--size-medium); +} + .icon--soft { fill: #777; } @@ -934,6 +1032,23 @@ text-align: center; } +/***************** + * paired slides * + ****************/ + + .paired-slides { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + div.paired-slides:nth-child(odd) { + flex-direction: row-reverse; + } + + .paires-slides + + /************** * Navigation * **************/ @@ -1110,7 +1225,7 @@ } .box--medium { - width: 33rem; + width: 43rem; max-width: 100%; } @@ -1120,6 +1235,11 @@ margin: 0.5em; } + .box--extra-margin { + margin-top: 5rem; + margin-bottom: 5rem; + } + .box--zero { box-shadow: none; border: none; @@ -1163,6 +1283,18 @@ flex-direction: row; } + /***************** + * paired slides * + ****************/ + + .paired-slides { + flex-wrap: nowrap; + } + + .paired-slides>*:last-child { + margin-left: 1em; + } + /********* * Menus * *********/
--- a/sat_templates/templates/default/ticket/item.html Fri Jan 25 11:28:41 2019 +0100 +++ b/sat_templates/templates/default/ticket/item.html Sat Jan 26 20:22:18 2019 +0100 @@ -26,7 +26,7 @@ {% if url_ticket_edit is defined %} <p class="box__tools"> <a href="{{url_ticket_edit}}"> - {{ icon('pencil', cls='icon--small') }} + {{ icon('pencil', cls='icon--text') }} edit </a> </p>