Séparation du CSS de Somme
parent
3b4cc7b84d
commit
26fde7b3b9
|
@ -123,66 +123,3 @@
|
|||
margin: 3em auto 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* mécanisme somme */
|
||||
.somme table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.somme td.blank {
|
||||
background: white;
|
||||
border: 1px solid white;
|
||||
border-right: 1px solid rgba(51, 51, 80, 0.15);
|
||||
}
|
||||
.somme tr {
|
||||
border: 1px solid rgba(51, 51, 80, 0.15);
|
||||
}
|
||||
.somme tr:hover {
|
||||
background: rgba(51, 51, 80, 0.02)
|
||||
}
|
||||
.somme tr:nth-child(2n) {
|
||||
|
||||
}
|
||||
.somme tr .element {
|
||||
text-align: left;
|
||||
padding: .1em .6em;
|
||||
}
|
||||
.somme tr .value span {
|
||||
text-align: right;
|
||||
}
|
||||
.somme .leaf .name {
|
||||
border: none;
|
||||
}
|
||||
.somme .operator {
|
||||
text-align: center;
|
||||
width: 1em;
|
||||
padding: 0 .4em;
|
||||
font-weight: 600;
|
||||
font-size: 120%;
|
||||
color: black;
|
||||
}
|
||||
#rule-rules .somme table .leaf .situationValue {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rule-rules .somme table .situationValue {
|
||||
padding: 0 1em;
|
||||
}
|
||||
#rule-rules .somme table .situationValue span {
|
||||
}
|
||||
|
||||
.somme .nested {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.somme .nested tr:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.somme .noNest {
|
||||
border-bottom: none;
|
||||
}
|
||||
.somme > table {
|
||||
border-bottom: 1px solid rgba(51, 51, 80, 0.15);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,61 @@
|
|||
|
||||
/* mécanisme somme */
|
||||
.somme table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.somme td.blank {
|
||||
background: white;
|
||||
border: 1px solid white;
|
||||
border-right: 1px solid rgba(51, 51, 80, 0.15);
|
||||
}
|
||||
.somme tr {
|
||||
border: 1px solid rgba(51, 51, 80, 0.15);
|
||||
}
|
||||
.somme tr:hover {
|
||||
background: rgba(51, 51, 80, 0.02)
|
||||
}
|
||||
.somme tr:nth-child(2n) {
|
||||
|
||||
}
|
||||
.somme tr .element {
|
||||
text-align: left;
|
||||
padding: .1em .6em;
|
||||
}
|
||||
.somme tr .value span {
|
||||
text-align: right;
|
||||
}
|
||||
.somme .leaf .name {
|
||||
border: none;
|
||||
}
|
||||
.somme .operator {
|
||||
text-align: center;
|
||||
width: 1em;
|
||||
padding: 0 .4em;
|
||||
font-weight: 600;
|
||||
font-size: 120%;
|
||||
color: black;
|
||||
}
|
||||
#rule-rules .somme table .leaf .situationValue {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rule-rules .somme table .situationValue {
|
||||
padding: 0 1em;
|
||||
}
|
||||
#rule-rules .somme table .situationValue span {
|
||||
}
|
||||
|
||||
.somme .nested {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.somme .nested tr:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.somme .noNest {
|
||||
border-bottom: none;
|
||||
}
|
||||
.somme > table {
|
||||
border-bottom: 1px solid rgba(51, 51, 80, 0.15);
|
||||
}
|
|
@ -2,6 +2,7 @@ import React, { Component } from "react"
|
|||
import { makeJsx } from "../evaluation"
|
||||
import { path } from "ramda"
|
||||
import { Node, NodeValue } from "./common"
|
||||
import './Somme.css'
|
||||
|
||||
export default ({ explanation, nodeValue }) => (
|
||||
<Node
|
||||
|
@ -15,7 +16,7 @@ export default ({ explanation, nodeValue }) => (
|
|||
let Table = ({ explanation }) => (
|
||||
<table>
|
||||
<caption />
|
||||
<tbody>{explanation.map((v, i) => <Row {...{ v, i }} />)}</tbody>
|
||||
<tbody>{explanation.map((v, i) => <Row key={i} {...{ v, i }} />)}</tbody>
|
||||
</table>
|
||||
)
|
||||
|
||||
|
@ -36,14 +37,16 @@ class Row extends Component {
|
|||
onClick={() => this.setState({ folded: false })}
|
||||
>
|
||||
<td className="operator blank">{i != 0 && "+"}</td>
|
||||
<td className="element">{makeJsx(v)}</td>
|
||||
<td className="element">
|
||||
{makeJsx(v)}
|
||||
</td>
|
||||
<td className="situationValue value">
|
||||
<NodeValue data={v.nodeValue} />
|
||||
</td>
|
||||
</tr>,
|
||||
...(isSomme && !this.state.folded
|
||||
? [
|
||||
<tr className="nested">
|
||||
<tr className="nested" key={v.name + "-nest"}>
|
||||
<td className="blank" />
|
||||
<td className="nested">
|
||||
<Table explanation={rowFormula.explanation} />
|
||||
|
|
Loading…
Reference in New Issue