Commit 3033a256 authored by Vincent Bechu's avatar Vincent Bechu

[erp5_web_renderjs_ui] Factorise erp5 css code

parent 3c7716b4
......@@ -816,30 +816,43 @@ div[data-gadget-scope='header'] .ui-header h1 > span::before {
margin-right: 6pt;
}
}
div[data-gadget-scope='header'] .ui-header h1 a {
div[data-gadget-scope='header'] .ui-header h1 form {
height: 100%;
}
div[data-gadget-scope='header'] .ui-header h1 form button {
text-align: left;
height: 100%;
width: 100%;
}
div[data-gadget-scope='header'] .ui-header h1 a,
div[data-gadget-scope='header'] .ui-header h1 form button {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div[data-gadget-scope='header'] .ui-header h1 a::before {
div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-gadget-scope='header'] .ui-header h1 form button::before {
display: inline-block;
width: 42pt;
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header h1 a::before {
div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-gadget-scope='header'] .ui-header h1 form button::before {
text-align: center;
}
}
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header h1 a::before {
div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-gadget-scope='header'] .ui-header h1 form button::before {
width: 12pt;
margin-left: 24pt;
margin-right: 6pt;
}
}
@media not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header h1 a::before {
div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-gadget-scope='header'] .ui-header h1 form button::before {
width: 30pt;
}
}
......@@ -873,6 +886,7 @@ div[data-gadget-scope='header'] .ui-header ul {
div[data-gadget-scope='header'] .ui-header ul li a {
padding-top: 3pt;
padding-bottom: 3pt;
line-height: inherit;
white-space: nowrap;
overflow: hidden;
}
......
......@@ -228,7 +228,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <string>vincent</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>962.1204.63259.57958</string> </value>
<value> <string>963.50757.27093.23739</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1505133981.01</float>
<float>1511952591.56</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -813,8 +813,39 @@ div[data-gadget-scope='editor_panel'] {
min-width: @sub-line-min-width-desktop;
}
div[data-gadget-scope='header'] .ui-header {
.renderTabletSubLink() {
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
line-height: inherit;
white-space: nowrap;
overflow: hidden;
&::before {
font-size: 1.2em;
display: block;
}
}
.renderTabletSubListElement() {
flex: 1;
// XXX TODO Hardcoded color
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a {
display: block;
}
}
.renderTabletNotALinkTitle() {
padding-left: @headertitlespanleftmiddlepadding;
&::before {
margin-right:@headertitlespanleftlargemargin;
}
}
div[data-gadget-scope='header'] .ui-header {
position: fixed;
z-index: 1000;
text-align: center;
......@@ -938,21 +969,26 @@ div[data-gadget-scope='header'] .ui-header {
}
@media @tablet {
padding-left: @headertitlespanleftmiddlepadding;
&::before {
margin-right:@headertitlespanleftlargemargin;
}
.renderTabletNotALinkTitle();
}
@media @smartphone {
padding-left: @headertitlespanleftsmallpadding;
&::before {
margin-right:@headertitlespanleftsmallmargin;
}
padding-left: @headertitlespanleftsmallpadding;
&::before {
margin-right:@headertitlespanleftsmallmargin;
}
}
}
// Clickable title
a {
// Clickable title and button
form {
height: 100%;
button {
text-align: left;
height: 100%;
width: 100%;
}
}
a, form button {
display: block;
// Do not put link on multi line in case of small screen
......@@ -999,28 +1035,12 @@ div[data-gadget-scope='header'] .ui-header {
li {
@media @tablet, @smartphone {
flex: 1;
// XXX TODO Hardcoded color
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a {
display: block;
}
.renderTabletSubListElement();
}
@media @tablet {
a {
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
white-space: nowrap;
overflow: hidden;
&::before {
font-size: 1.2em;
display: block;
}
.renderTabletSubLink();
}
}
......@@ -1053,13 +1073,9 @@ div[data-gadget-scope='header'] .ui-header {
}
}
}
}
}
}
/**********************************************
* Gadget: main
**********************************************/
......
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