Commit 95ba707f authored by Vincent Bechu's avatar Vincent Bechu Committed by Boxiang Sun

[erp5_web_renderjs_ui] Factorize erp5 css code

parent 14adf03d
...@@ -813,8 +813,45 @@ div[data-gadget-scope='editor_panel'] { ...@@ -813,8 +813,45 @@ div[data-gadget-scope='editor_panel'] {
min-width: @sub-line-min-width-desktop; 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;
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;
}
}
.renderTabletHeaderButton() {
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
// Default size
background-color: @colorheaderbackground;
width: 8em;
}
div[data-gadget-scope='header'] .ui-header {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
text-align: center; text-align: center;
...@@ -848,8 +885,9 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -848,8 +885,9 @@ div[data-gadget-scope='header'] .ui-header {
@media @desktop { @media @desktop {
background-color: @colorsubheaderbackground; background-color: @colorsubheaderbackground;
} }
@media @smartphone, @tablet { @media @smartphone {
background-color: @colorheaderbackground; background-color: @colorheaderbackground;
.hide_text();
} }
transition: background-color @transition-timing; transition: background-color @transition-timing;
...@@ -860,12 +898,7 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -860,12 +898,7 @@ div[data-gadget-scope='header'] .ui-header {
line-height: @headerheight; line-height: @headerheight;
@media @tablet { @media @tablet {
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/ .renderTabletHeaderButton();
// Default size
width: 8em;
}
@media @smartphone {
.hide_text();
} }
&::before { &::before {
...@@ -938,17 +971,14 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -938,17 +971,14 @@ div[data-gadget-scope='header'] .ui-header {
} }
@media @tablet { @media @tablet {
padding-left: @headertitlespanleftmiddlepadding; .renderTabletNotALinkTitle();
&::before {
margin-right:@headertitlespanleftlargemargin;
}
} }
@media @smartphone { @media @smartphone {
padding-left: @headertitlespanleftsmallpadding; padding-left: @headertitlespanleftsmallpadding;
&::before { &::before {
margin-right:@headertitlespanleftsmallmargin; margin-right:@headertitlespanleftsmallmargin;
} }
} }
} }
// Clickable title // Clickable title
...@@ -999,28 +1029,12 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -999,28 +1029,12 @@ div[data-gadget-scope='header'] .ui-header {
li { li {
@media @tablet, @smartphone { @media @tablet, @smartphone {
flex: 1; .renderTabletSubListElement();
// XXX TODO Hardcoded color
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a {
display: block;
}
} }
@media @tablet { @media @tablet {
a { a {
padding-top: @half-margin-size; .renderTabletSubLink();
padding-bottom: @half-margin-size;
white-space: nowrap;
overflow: hidden;
&::before {
font-size: 1.2em;
display: block;
}
} }
} }
...@@ -1053,13 +1067,9 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1053,13 +1067,9 @@ div[data-gadget-scope='header'] .ui-header {
} }
} }
} }
} }
} }
} }
/********************************************** /**********************************************
* Gadget: main * 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