Division du CSS de Rule
mama
parent
f01a96b2f0
commit
6d6bb216ba
|
|
@ -2,6 +2,7 @@ import R from 'ramda'
|
|||
import React, { Component } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import marked from 'Engine/marked'
|
||||
import './Dictionary.css'
|
||||
|
||||
// On ajoute à la section la possibilité d'ouvrir un panneau d'explication des termes.
|
||||
// Il suffit à la section d'appeler une fonction fournie en lui donnant du JSX
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
.dictionaryPanelWrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
z-index: 1;
|
||||
}
|
||||
.dictionaryPanel {
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 33%;
|
||||
border: 2px solid #333350;
|
||||
margin: 1em;
|
||||
padding: 0em 1.5em;
|
||||
min-height: 6em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
.dictionaryPanel h3 {
|
||||
color: #333350
|
||||
}
|
||||
.dictionaryPanel blockquote {
|
||||
font-style: italic;
|
||||
border-left: 4px solid #eee;
|
||||
padding-left: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.dictionaryPanel blockquote p {
|
||||
color: #666;
|
||||
}
|
||||
.dictionaryPanel code {
|
||||
border: 1px solid #aaa;
|
||||
padding: .05em .3em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
|
||||
/*
|
||||
Règles CSS d'affichage des algorithmes
|
||||
*/
|
||||
|
||||
#rule-rules {
|
||||
display: inline-flex;
|
||||
justify-content: start;
|
||||
min-height: 5em;
|
||||
}
|
||||
|
||||
#rule-rules .situationValue {
|
||||
display: none;
|
||||
padding-left: 1em;
|
||||
font-weight: 700;
|
||||
color: #031bd6;
|
||||
}
|
||||
|
||||
#rule-rules.showValues .situationValue {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#algorithm {
|
||||
margin-right: 10em;
|
||||
}
|
||||
|
||||
#rule-rules section {
|
||||
margin: 1em 0 1em 3em;
|
||||
font-weight: 500;
|
||||
color: #444
|
||||
}
|
||||
#rule-rules section > div {
|
||||
font-size: 90%;
|
||||
}
|
||||
.node {
|
||||
padding-left: 1em;
|
||||
color: #4B4B66
|
||||
}
|
||||
|
||||
.mecanism > .nodeHead {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.mecanism > .nodeHead .name {
|
||||
padding: .05em 1em;
|
||||
background: #34495e;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: .4em;
|
||||
}
|
||||
[data-term-definition] {
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-term-definition]:hover {
|
||||
opacity: .8
|
||||
}
|
||||
.ruleProp > .nodeHead .name {
|
||||
background: #9b59b6;
|
||||
}
|
||||
.mecanism li {
|
||||
}
|
||||
.mecanism .properties, .mecanism.list ul {
|
||||
margin-top: 0;
|
||||
padding-left: 1em;
|
||||
list-style-type: none;
|
||||
border-left: 1px dashed #ccc;
|
||||
}
|
||||
.mecanism .properties .key {
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
margin-bottom: .6em;
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
.multiplication > .nodeHead .name {
|
||||
background: #2ecc71;
|
||||
}
|
||||
|
||||
.multiplication li .key {
|
||||
margin-right: .6em;
|
||||
}
|
||||
|
||||
.mecanism.list > ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.mecanism.list > ul > li {
|
||||
margin-left: .8em;
|
||||
padding-left: .3em;
|
||||
}
|
||||
|
||||
.maximum .description {
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
margin-bottom: .4em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.mecanism.conditions > .nodeHead .name {
|
||||
background: #3498db
|
||||
}
|
||||
|
||||
.condition {
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.node.inlineExpression {
|
||||
padding-left: 0;
|
||||
display: inline;
|
||||
}
|
||||
.inlineExpression .nodeContent {
|
||||
/*border-bottom: 1px solid rgba(51, 51, 80, 0.25);*/
|
||||
/*border-right: 1px solid rgba(51, 51, 80, 0.25);*/
|
||||
/*padding: .5em .6em;*/
|
||||
/*border-radius: .3em;*/
|
||||
}
|
||||
.nodeHead {
|
||||
display: inline-block;
|
||||
}
|
||||
.leaf .situationValue {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#rule-rules .situationValue.oui {
|
||||
color: #5ab738;
|
||||
}
|
||||
#rule-rules .situationValue.non {
|
||||
color: #f22c40;
|
||||
}
|
||||
|
||||
.variable .name {
|
||||
color: #5B5B73;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
padding: .05em .6em;
|
||||
line-height: 1.8em;
|
||||
border-radius: .4em;
|
||||
font-weight: 600;
|
||||
font-size: 90%;
|
||||
border: 1px solid rgba(51, 51, 80, 0.25);
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
|
||||
.percentage .name {
|
||||
font-size: 110%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.operator {
|
||||
margin: .1em .6em;
|
||||
font-size: 150%;
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.json {
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.barème > .nodeHead .name {
|
||||
background: #1abc9c;
|
||||
}
|
||||
|
||||
.barème .key {
|
||||
color: #1abc9c
|
||||
}
|
||||
|
||||
.barème table {
|
||||
margin-top: 1em;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
.barème table td {
|
||||
padding: .1em .4em;
|
||||
/*border: 1px solid #aaa;*/
|
||||
}
|
||||
.barème table tr:nth-child(2n) {
|
||||
background: #f1f1f1
|
||||
}
|
||||
|
||||
.composantes > .nodeHead .name {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.composantes > ul > li {
|
||||
display: inline-block;
|
||||
}
|
||||
.composantes .composante {
|
||||
width: 45%;
|
||||
}
|
||||
.composantes .composante .content {
|
||||
border-top: 1px solid #3498db;
|
||||
padding: 1em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
.composantes .composanteAttributes {
|
||||
list-style-type: none;
|
||||
padding: .2em;
|
||||
color: #3498db;
|
||||
}
|
||||
.composantes .composanteAttributes span:last-child {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.composantes .composantesSymbol {
|
||||
font-size: 160%;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#rule-calc {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import {AttachDictionary} from '../AttachDictionary'
|
|||
import knownMecanisms from 'Engine/known-mecanisms.yaml'
|
||||
import marked from 'Engine/marked'
|
||||
import {makeJsx} from 'Engine/evaluation'
|
||||
import './Algorithm.css'
|
||||
|
||||
let RuleWithoutFormula = () =>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -102,261 +102,6 @@
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
Règles CSS d'affichage des algorithmes
|
||||
*/
|
||||
|
||||
#rule-rules {
|
||||
display: inline-flex;
|
||||
justify-content: start;
|
||||
min-height: 5em;
|
||||
}
|
||||
|
||||
#rule-rules .situationValue {
|
||||
display: none;
|
||||
padding-left: 1em;
|
||||
font-weight: 700;
|
||||
color: #031bd6;
|
||||
}
|
||||
|
||||
#rule-rules.showValues .situationValue {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#algorithm {
|
||||
margin-right: 10em;
|
||||
}
|
||||
.dictionaryPanelWrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
z-index: 1;
|
||||
}
|
||||
.dictionaryPanel {
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 33%;
|
||||
border: 2px solid #333350;
|
||||
margin: 1em;
|
||||
padding: 0em 1.5em;
|
||||
min-height: 6em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
.dictionaryPanel h3 {
|
||||
color: #333350
|
||||
}
|
||||
.dictionaryPanel blockquote {
|
||||
font-style: italic;
|
||||
border-left: 4px solid #eee;
|
||||
padding-left: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.dictionaryPanel blockquote p {
|
||||
color: #666;
|
||||
}
|
||||
.dictionaryPanel code {
|
||||
border: 1px solid #aaa;
|
||||
padding: .05em .3em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
#rule-rules section {
|
||||
margin: 1em 0 1em 3em;
|
||||
font-weight: 500;
|
||||
color: #444
|
||||
}
|
||||
#rule-rules section > div {
|
||||
font-size: 90%;
|
||||
}
|
||||
.node {
|
||||
padding-left: 1em;
|
||||
color: #4B4B66
|
||||
}
|
||||
|
||||
.mecanism > .nodeHead {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.mecanism > .nodeHead .name {
|
||||
padding: .05em 1em;
|
||||
background: #34495e;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: .4em;
|
||||
}
|
||||
[data-term-definition] {
|
||||
cursor: pointer;
|
||||
}
|
||||
[data-term-definition]:hover {
|
||||
opacity: .8
|
||||
}
|
||||
.ruleProp > .nodeHead .name {
|
||||
background: #9b59b6;
|
||||
}
|
||||
.mecanism li {
|
||||
}
|
||||
.mecanism .properties, .mecanism.list ul {
|
||||
margin-top: 0;
|
||||
padding-left: 1em;
|
||||
list-style-type: none;
|
||||
border-left: 1px dashed #ccc;
|
||||
}
|
||||
.mecanism .properties .key {
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
margin-bottom: .6em;
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
.multiplication > .nodeHead .name {
|
||||
background: #2ecc71;
|
||||
}
|
||||
|
||||
.multiplication li .key {
|
||||
margin-right: .6em;
|
||||
}
|
||||
|
||||
.mecanism.list > ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.mecanism.list > ul > li {
|
||||
margin-left: .8em;
|
||||
padding-left: .3em;
|
||||
}
|
||||
|
||||
.maximum .description {
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
margin-bottom: .4em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.mecanism.conditions > .nodeHead .name {
|
||||
background: #3498db
|
||||
}
|
||||
|
||||
.condition {
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
.node.inlineExpression {
|
||||
padding-left: 0;
|
||||
display: inline;
|
||||
}
|
||||
.inlineExpression .nodeContent {
|
||||
/*border-bottom: 1px solid rgba(51, 51, 80, 0.25);*/
|
||||
/*border-right: 1px solid rgba(51, 51, 80, 0.25);*/
|
||||
/*padding: .5em .6em;*/
|
||||
/*border-radius: .3em;*/
|
||||
}
|
||||
.nodeHead {
|
||||
display: inline-block;
|
||||
}
|
||||
.leaf .situationValue {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#rule-rules .situationValue.oui {
|
||||
color: #5ab738;
|
||||
}
|
||||
#rule-rules .situationValue.non {
|
||||
color: #f22c40;
|
||||
}
|
||||
|
||||
.variable .name {
|
||||
color: #5B5B73;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
padding: .05em .6em;
|
||||
line-height: 1.8em;
|
||||
border-radius: .4em;
|
||||
font-weight: 600;
|
||||
font-size: 90%;
|
||||
border: 1px solid rgba(51, 51, 80, 0.25);
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
|
||||
.percentage .name {
|
||||
font-size: 110%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.operator {
|
||||
margin: .1em .6em;
|
||||
font-size: 150%;
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.json {
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.barème > .nodeHead .name {
|
||||
background: #1abc9c;
|
||||
}
|
||||
|
||||
.barème .key {
|
||||
color: #1abc9c
|
||||
}
|
||||
|
||||
.barème table {
|
||||
margin-top: 1em;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
.barème table td {
|
||||
padding: .1em .4em;
|
||||
/*border: 1px solid #aaa;*/
|
||||
}
|
||||
.barème table tr:nth-child(2n) {
|
||||
background: #f1f1f1
|
||||
}
|
||||
|
||||
.composantes > .nodeHead .name {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.composantes > ul > li {
|
||||
display: inline-block;
|
||||
}
|
||||
.composantes .composante {
|
||||
width: 45%;
|
||||
}
|
||||
.composantes .composante .content {
|
||||
border-top: 1px solid #3498db;
|
||||
padding: 1em;
|
||||
margin-right: 2em;
|
||||
}
|
||||
.composantes .composanteAttributes {
|
||||
list-style-type: none;
|
||||
padding: .2em;
|
||||
color: #3498db;
|
||||
}
|
||||
.composantes .composanteAttributes span:last-child {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.composantes .composantesSymbol {
|
||||
font-size: 160%;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#rule-calc {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
|
||||
#reportError {
|
||||
|
|
|
|||
Loading…
Reference in New Issue