Skip to content

W
work.w
Commit c5c364fd authored by alexandre's avatar alexandre
Browse files
Options

Merge branch 'feature-icons'

parents 0a19f694 ca670187
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 76 deletions
playground/static/playground/css/styles.css
View file @ c5c364fd
......@@ -45,6 +45,12 @@
font-weight: bold;
}
@font-face {
font-family: 'Oswald';
src: url("../fonts/OswaldOrganon-Regular.ttf");
font-weight: normal;
}
......@@ -54,7 +60,7 @@
========================================================================== */
body {
font-family: 'HKGrotesk', sans-serif;
font-family: 'Oswald', sans-serif;
font-size: 19px;
line-height: 21px;
font-weight: 500;
......@@ -602,11 +608,11 @@ li li { margin-left: 4.5em; }
.axis-title .actant,
.axis-title .adresse {
text-transform: lowercase;
font-size: 80%;
}
/* .axis-title .actant, */
/* .axis-title .adresse { */
/* text-transform: lowercase; */
/* font-size: 80%; */
/* } */
......@@ -624,66 +630,76 @@ li li { margin-left: 4.5em; }
white-space: nowrap;
}
.axis-title .handle {
display: inline-block;
padding-left: 10px;
color: black;
}
.handle {
width: 1em;
height: 1em;
cursor: move;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
}
.icon--handle { cursor: move; }
.axis-title-view .handle { visibility: hidden; }
.icon--handle:before { content: "\f80e"; }
.axis-title-view:hover .handle { visibility: visible; }
.axis-title-view .icon--handle { visibility: hidden; }
li + li > .axis-title #alt_symbole { display: none; }
.axis-title-view:hover .icon--handle { visibility: visible; }
.prefix {
position: relative;
text-decoration: none !important;
}
.icon--ol:before { content: "\f801"; }
.icon--ul:before { content: "\f807"; }
.icon--par:before { content: "\f809"; }
.icon--cum:before { content: "\f804"; }
.icon--mys:before { content: "\f807\f807"; }
.icon--condition:before { content: "\f80c"; }
.icon--rarr:before { content: "\f813"; }
.icon--darr:before { content: "\f818"; }
.icon--dashed:before { content: "\f857"; }
.icon--indications:before { content: "\f831"; }
.icon--repeat:before { content: "\f81a"; }
.icon--stop:before { content: "\f812"; }
.tag { font-weight: bold; }
.icon--dur:before { content: "\f850"; }
.icon--iter:before { content:"\f85a"; }
.icon--semel:before { content:"???"; }
.view_tag { color: black; }
li .tag { color: var(--color-01); }
li + li .alt-symbol { display: none; }
li li .tag { color: var(--color-02); }
li li li .tag { color: var(--color-03); }
li li li li .tag { color: var(--color-04); }
li li li li li .tag { color: var(--color-05); }
li li li li li li .tag { color: var(--color-06); }
li li li li li li li .tag { color: var(--color-07); }
/* .tag { font-weight: bold; } */
li li li li li li li li .tag { color: var(--color-08); }
/* .view_tag { color: black; } */
li li li li li li li li li .tag { color: var(--color-09); }
li .icon--tag { color: var(--color-01); }
li li li li li li li li li li .tag { color: var(--color-10); }
li li .icon--tag { color: var(--color-02); }
li li li li li li li li li li li .tag { color: var(--color-11); }
li li li .icon--tag { color: var(--color-03); }
li li li li li li li li li li li li .tag { color: var(--color-12); }
li li li li .icon--tag { color: var(--color-04); }
li li li li li li li li li li li li li .tag { color: var(--color-13); }
li li li li li .icon--tag { color: var(--color-05); }
li li li li li li li li li li li li li li .tag { color: var(--color-14); }
li li li li li li .icon--tag { color: var(--color-06); }
li li li li li li li .icon--tag { color: var(--color-07); }
li li li li li li li li .icon--tag { color: var(--color-08); }
li li li li li li li li li .icon--tag { color: var(--color-09); }
li li li li li li li li li li .icon--tag { color: var(--color-10); }
li li li li li li li li li li li .icon--tag { color: var(--color-11); }
li li li li li li li li li li li li .icon--tag { color: var(--color-12); }
li li li li li li li li li li li li li .icon--tag { color: var(--color-13); }
li li li li li li li li li li li li li li .icon--tag { color: var(--color-14); }
......@@ -709,10 +725,10 @@ li li li li li li li li li li li li li li .tag { color: var(--color-14); }
[data-contingent="true"]>.axis-title>.axis-title-edit:after { content: ")"; }
.axis[data-sublines="true"][data-collapsed="true"] .axis-title-edit:after {
color: rgb(196, 196, 196);
content: "⋯";
/* color: rgb(196, 196, 196); */
content: "…";
display: inline-block;
padding-left: .25em;
/* padding-left: .25em; */
}
......@@ -736,13 +752,15 @@ li li li li li li li li li li li li li li .tag { color: var(--color-14); }
.options { font-size: .85em; }
.option { margin-left: .5em; }
.axis-title .options {
display: inline-block;
padding-left: 10px;
color: black;
}
/* .options { font-size: .85em; } */
/* .axis-title .options { */
/* display: inline-block; */
/* padding-left: 10px; */
/* color: black; */
/* } */
......@@ -755,9 +773,9 @@ li li li li li li li li li li li li li li .tag { color: var(--color-14); }
.indications-label:nth-child(n+2) { margin-top: 1em; }
.terme { font-size: 75%; }
/* .terme { font-size: 75%; } */
.terme .full { font-size: 133%; }
/* .terme .full { font-size: 133%; } */
.condition,
.indications,
......
playground/static/playground/js/views.js
View file @ c5c364fd
......@@ -1245,7 +1245,7 @@ window.W = window.W || {};
placeholder: 'placeholder',
forcePlaceholderSize: true,
helper: 'clone',
handle: '.handle',
handle: '.icon--handle',
isTree: true,
items: 'li',
toleranceElement: '> div',
......
playground/static/playground/vendors/form-reset.css 0 → 100644
View file @ c5c364fd
/* ----------------------------------------------------------------------------------------------------
Super Form Reset
A couple of things to watch out for:
- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs
----------------------------------------------------------------------------------------------------*/
input,
label,
select,
button,
textarea
{
margin:0;
border:0;
padding:0;
display:inline-block;
vertical-align:middle;
white-space:normal;
background:none;
line-height:1;
/* Browsers have different default form fonts */
font-size:13px;
font-family:Arial;
font-size:inherit;
font-family:inherit;
}
/* Remove the stupid outer glow in Webkit */
input:focus
{
outline:0;
}
/* Box Sizing Reset
-----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input,
textarea
{
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select
{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/* Text Inputs
-----------------------------------------------*/
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week]
{
}
/* Button Controls
-----------------------------------------------*/
input[type=checkbox],
input[type=radio]
{
width:13px;
height:13px;
}
/* File Uploads
-----------------------------------------------*/
input[type=file]
{
}
/* Search Input
-----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search]
{
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
}
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration
{
display:none;
}
/* Buttons
-----------------------------------------------*/
button,
input[type="reset"],
input[type="button"],
input[type="submit"]
{
/* Fix IE7 display bug */
overflow:visible;
width:auto;
}
/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button
{
padding:0;
border:0;
background:none;
}
/* Textarea
-----------------------------------------------*/
textarea
{
/* Move the label to the top */
vertical-align:top;
/* Turn off scroll bars in IE unless needed */
overflow:auto;
}
/* Selects
-----------------------------------------------*/
select
{
}
select[multiple]
{
/* Move the label to the top */
vertical-align:top;
}
playground/templates/playground/underscore/node-vue.mtpl
View file @ c5c364fd
<div class="axis-title axis-title-view" tabindex="0">
<div class="header">
<span class="handle"></span>
<span class="icon icon--handle"></span>
<span class="alt-symbol">
<%= altSymbol %>
</span>
<span class="prefix">
<span id="alt_symbole">
<%= altSymbol %>
<% if (condition) { %>
<span class="icon icon--condition condition">
<span class="full"><% if (imperative) { %>! <% } %><%- condition %></span>
</span>
<% } %>
<% if (condition) { %>
<span class="condition">
# <span class="full"><% if (imperative) { %>! <% } %><%- condition %></span>
</span>
<% } %>
<% if (showTag) { %>
<span class="tag view_tag el_tag">
<%- (tag) ? tag : '>' %>
</span>
<% if (showTag) { %>
<% if (tag === "|") { %>
<span class="icon icon--tag icon--ul"></span>
<% } else if (tag === "//") { %>
<span class="icon icon--tag icon--par"></span>
<% } else if (tag === "≥") { %>
<span class="icon icon--tag icon--cum"></span>
<% } else if (tag === "||") { %>
<span class="icon icon--tag icon--mys"></span>
<% } else { %>
<span class="icon icon--tag icon--ol"></span>
<% } %>
</span>
<% } %>
</div>
......@@ -42,15 +47,15 @@
<% if (aspect) { %>
<span id="aspect_vue">
<% if (aspect == 'duratif') { %> &rarr; <% } %>
<% if (aspect == 'sémelfactif') { %> &darr; <% } %>
<% if (aspect == 'itératif') { %> --- <% } %>
<% if (aspect == 'duratif') { %> <span class="icon icon--dur"></span> <% } %>
<% if (aspect == 'sémelfactif') { %> <span class="icon icon--semel"></span> <% } %>
<% if (aspect == 'itératif') { %> <span class="icon icon--iter"></span> <% } %>
</span>
<% } %>
<% if (hasIndications) { %>
<span class="indications">
*
<span class="icon icon--indications"></span>
<span class="full">
<% if (indications) { %>
<span class="indications-label">Indications</span>
......@@ -77,8 +82,9 @@
<span class="options">
<% if (boucle) { %>
<span id="boucle">
&#10560;<sup>
<span id="boucle" class="option">
<span class="icon icon--repeat"></span>
<!-- <sup> -->
<% if (boucle.type === rangeType.exact) { %>
<%- boucle.value %>
<% } else if (boucle.type === rangeType.minimal) { %>
......@@ -86,12 +92,12 @@
<% } else if (boucle.type === rangeType.range) { %>
<%- boucle.value[0] %>-<%- boucle.value[1] %>
<% } %>
</sup>
<!-- </sup> -->
</span>
<% } %>
<span class="terme" >
<span class="terme option">
<% if (terme) { %>
&rarr; <%- terme.substring(0,50) %>
<span class="icon icon--stop"></span> <%- terme.substring(0,50) %>
<% if(terme.length > 50) { %>
...<span class="full"><%- terme %></span>
<% } %>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment