Skip to content

erp5
erp5
Commit 0fac5987 authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Integrate action button on the second header line on desktop

parent afe0d1a9
Show whitespace changes
Inline Side-by-side
Showing with 514 additions and 542 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_appcache.xml
View file @ 0fac5987
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
<value> <string encoding="cdata"><![CDATA[ <value> <string encoding="cdata"><![CDATA[
CACHE MANIFEST\n CACHE MANIFEST\n
# generated on Mon, 07 Nov 2016 10:00:00 GMT\n # generated on Mon, 10 Nov 2016 15:00:00 GMT\n
# XXX + fonts\n # XXX + fonts\n
# images/ajax-loader.gif\n # images/ajax-loader.gif\n
CACHE:\n CACHE:\n
...@@ -366,7 +366,7 @@ NETWORK:\n ...@@ -366,7 +366,7 @@ NETWORK:\n
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>955.7684.22445.34560</string> </value> <value> <string>955.7927.49570.52292</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -384,7 +384,7 @@ NETWORK:\n ...@@ -384,7 +384,7 @@ NETWORK:\n
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1478515550.48</float> <float>1478794080.61</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @ 0fac5987
...@@ -171,26 +171,11 @@ input, ...@@ -171,26 +171,11 @@ input,
textarea, textarea,
select { select {
font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.3;
}
@media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) {
body,
button,
input,
textarea,
select {
font-size: 11pt;
}
}
@media only screen and (max-width: 28em) {
body,
button,
input,
textarea,
select {
font-size: 12pt; font-size: 12pt;
} padding: 0;
margin: 0;
font-weight: 400;
line-height: 1.5;
} }
/********************************************** /**********************************************
* Inline elements * Inline elements
...@@ -266,7 +251,7 @@ a:focus { ...@@ -266,7 +251,7 @@ a:focus {
outline-offset: -2px; outline-offset: -2px;
outline: 2px solid #3388cc; outline: 2px solid #3388cc;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
a[accesskey]:after { a[accesskey]:after {
content: " [" attr(accesskey) "] "; content: " [" attr(accesskey) "] ";
} }
...@@ -287,89 +272,58 @@ listing { ...@@ -287,89 +272,58 @@ listing {
hr { hr {
display: block; display: block;
border-style: inset; border-style: inset;
border-width: 1pt; border-width: 1px;
border-color: #FF6600; border-color: #FF6600;
} }
/********************************************** /**********************************************
* Text fields * Text fields
**********************************************/ **********************************************/
label { label {
display: block;
color: #777777; color: #777777;
} }
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
textarea { textarea,
select {
width: 100%; width: 100%;
margin: 0; padding: 3pt;
padding: 0.4em;
line-height: 1.4em;
border: none;
background-color: #FFFFFF; background-color: #FFFFFF;
color: #1F1F1F; color: #1F1F1F;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0.325em; border-radius: 0.325em;
border-width: 1px; transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
outline-offset: 0;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color])[readonly="readonly"],
textarea[readonly="readonly"] {
border: none;
box-shadow: none;
padding: 0;
line-height: 1em;
} }
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):active, input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):active,
textarea:active, textarea:active,
select:active,
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus, input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
textarea:focus { textarea:focus,
outline-offset: 0; select:focus {
outline: none;
} }
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus, input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
textarea:focus { textarea:focus,
box-shadow: 0 0 12px #3388cc; select:focus {
border: 1px solid #3388cc;
box-shadow: 0 0 12pt #3388cc;
} }
select { select {
width: 100%; cursor: pointer;
margin: 0;
padding: 0.4em;
padding-right: 1.8em;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
line-height: 1.4em;
cursor: pointer;
background-image: none; background-image: none;
background-color: #FFFFFF; background-color: #FFFFFF;
padding-right: 24pt;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;
background-position: right .5em top 50%; background-position: right 6pt top 50%;
background-size: 1em 1em; background-size: 12pt 12pt;
color: #1F1F1F;
border-radius: 0.325em;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
outline-offset: 0;
}
select[readonly="readonly"] {
border: none;
background: none;
box-shadow: none;
padding: 0;
line-height: 1em;
}
select:not([readonly="readonly"]):hover,
select:not([readonly="readonly"]):active {
background-color: #e0e0e0;
} }
select:-moz-focusring { select:-moz-focusring {
color: transparent; color: transparent;
text-shadow: 0 0 0 #000;
} }
textarea { textarea {
width: 100%; vertical-align: top;
margin: 0;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: #575757; color: #575757;
...@@ -390,10 +344,19 @@ button { ...@@ -390,10 +344,19 @@ button {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
background-image: none; background: transparent;
background-color: #FFFFFF;
color: #1F1F1F; color: #1F1F1F;
transition: background-color 0.2s ease-out; /*
// XXX TODO
// transition: background-color 0.2s ease-out;
&:hover, &:focus {
outline: none;
}
&:active {
// box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%);
background-color: darken(@colorblocklinkbackground, 20%);
}
*/
cursor: pointer; cursor: pointer;
} }
input[type=submit]::-moz-focus-inner, input[type=submit]::-moz-focus-inner,
...@@ -406,17 +369,11 @@ button:hover, ...@@ -406,17 +369,11 @@ button:hover,
input[type=submit]:focus, input[type=submit]:focus,
button:focus { button:focus {
outline: none; outline: none;
background-color: #e0e0e0;
}
input[type=submit]:active,
button:active {
background-color: #adadad;
} }
/********************************************** /**********************************************
* Media * Media
**********************************************/ **********************************************/
img, img,
canvas,
iframe, iframe,
video, video,
svg { svg {
...@@ -432,8 +389,8 @@ svg text { ...@@ -432,8 +389,8 @@ svg text {
} }
iframe { iframe {
width: 100%; width: 100%;
height: 50em; height: 80vh;
background-color: white; background-color: #FFFFFF;
} }
img { img {
image-orientation: from-image; image-orientation: from-image;
...@@ -444,7 +401,7 @@ img { ...@@ -444,7 +401,7 @@ img {
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
background-color: #444444; background-color: #444444;
color: #FFFFFF; color: #FFFFFF;
width: 17em; width: 180pt;
min-height: 100%; min-height: 100%;
max-height: none; max-height: none;
position: fixed; position: fixed;
...@@ -453,19 +410,19 @@ div[data-gadget-scope='panel'] { ...@@ -453,19 +410,19 @@ div[data-gadget-scope='panel'] {
display: block; display: block;
z-index: 2000; z-index: 2000;
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 70em) {
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15); box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
} }
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 70em) {
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
left: -18em; left: -186pt;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
div[data-gadget-scope='panel'].visible { div[data-gadget-scope='panel'].visible {
transform: translate3d(18em, 0, 0); transform: translate3d(186pt, 0, 0);
} }
} }
div[data-gadget-scope='panel'] div[data-role="header"] { div[data-gadget-scope='panel'] div[data-role="header"] {
...@@ -475,7 +432,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] { ...@@ -475,7 +432,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] {
div[data-gadget-scope='panel'] div[data-role="header"] .panel_img { div[data-gadget-scope='panel'] div[data-role="header"] .panel_img {
text-align: center; text-align: center;
flex: 1; flex: 1;
height: 2.6em; height: 30pt;
} }
div[data-gadget-scope='panel'] div[data-role="header"] button, div[data-gadget-scope='panel'] div[data-role="header"] button,
div[data-gadget-scope='panel'] div[data-role="header"] a { div[data-gadget-scope='panel'] div[data-role="header"] a {
...@@ -485,16 +442,16 @@ div[data-gadget-scope='panel'] div[data-role="header"] a { ...@@ -485,16 +442,16 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
white-space: nowrap; white-space: nowrap;
background-color: #444444; background-color: #444444;
display: block; display: block;
line-height: 2.6em; line-height: 30pt;
color: #FFFFFF; color: #FFFFFF;
} }
div[data-gadget-scope='panel'] div[data-role="header"] button::before, div[data-gadget-scope='panel'] div[data-role="header"] button::before,
div[data-gadget-scope='panel'] div[data-role="header"] a::before { div[data-gadget-scope='panel'] div[data-role="header"] a::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: 12pt;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"], div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"],
div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] { div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
display: none; display: none;
...@@ -505,19 +462,19 @@ div[data-gadget-scope='panel'] img { ...@@ -505,19 +462,19 @@ div[data-gadget-scope='panel'] img {
height: 100%; height: 100%;
} }
div[data-gadget-scope='panel'] ul { div[data-gadget-scope='panel'] ul {
margin-top: 2.6em; margin-top: 30pt;
} }
div[data-gadget-scope='panel'] ul li a { div[data-gadget-scope='panel'] ul li a {
color: #FFFFFF; color: #FFFFFF;
padding: .4em; padding: 3pt;
padding-left: 1em; padding-left: 12pt;
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
div[data-gadget-scope='panel'] ul li a::before { div[data-gadget-scope='panel'] ul li a::before {
width: 2em; width: 24pt;
} }
div[data-gadget-scope='panel'] ul li a:hover, div[data-gadget-scope='panel'] ul li a:hover,
div[data-gadget-scope='panel'] ul li a:active { div[data-gadget-scope='panel'] ul li a:active {
...@@ -528,7 +485,7 @@ div[data-gadget-scope='panel'] ul li a:active { ...@@ -528,7 +485,7 @@ div[data-gadget-scope='panel'] ul li a:active {
**********************************************/ **********************************************/
div[data-gadget-scope='editor_panel'] { div[data-gadget-scope='editor_panel'] {
background-color: #FFFFFF; background-color: #FFFFFF;
width: 17em; width: 180pt;
min-height: 100%; min-height: 100%;
max-height: none; max-height: none;
position: fixed; position: fixed;
...@@ -536,26 +493,26 @@ div[data-gadget-scope='editor_panel'] { ...@@ -536,26 +493,26 @@ div[data-gadget-scope='editor_panel'] {
display: block; display: block;
z-index: 3000; z-index: 3000;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='editor_panel'] { div[data-gadget-scope='editor_panel'] {
left: -18em; left: -186pt;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15); box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
} }
div[data-gadget-scope='editor_panel'].visible { div[data-gadget-scope='editor_panel'].visible {
transform: translate3d(18em, 0, 0); transform: translate3d(186pt, 0, 0);
} }
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 70em) {
div[data-gadget-scope='editor_panel'] { div[data-gadget-scope='editor_panel'] {
right: -18em; right: -186pt;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
box-shadow: -5px 0 5px rgba(0, 0, 0, 0.15); box-shadow: -5px 0 5px rgba(0, 0, 0, 0.15);
} }
div[data-gadget-scope='editor_panel'].visible { div[data-gadget-scope='editor_panel'].visible {
transform: translate3d(-18em, 0, 0); transform: translate3d(-186pt, 0, 0);
} }
} }
div[data-gadget-scope='editor_panel'] div[data-role="header"] { div[data-gadget-scope='editor_panel'] div[data-role="header"] {
...@@ -564,8 +521,8 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] { ...@@ -564,8 +521,8 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] {
} }
div[data-gadget-scope='editor_panel'] div[data-role="header"] h1 { div[data-gadget-scope='editor_panel'] div[data-role="header"] h1 {
text-align: left; text-align: left;
line-height: 2.6em; line-height: 30pt;
max-height: 2.6em; max-height: 30pt;
} }
div[data-gadget-scope='editor_panel'] div[data-role="header"] button, div[data-gadget-scope='editor_panel'] div[data-role="header"] button,
div[data-gadget-scope='editor_panel'] div[data-role="header"] a { div[data-gadget-scope='editor_panel'] div[data-role="header"] a {
...@@ -574,16 +531,16 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] a { ...@@ -574,16 +531,16 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] a {
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
line-height: 2.6em; line-height: 30pt;
} }
div[data-gadget-scope='editor_panel'] div[data-role="header"] button::before, div[data-gadget-scope='editor_panel'] div[data-role="header"] button::before,
div[data-gadget-scope='editor_panel'] div[data-role="header"] a::before { div[data-gadget-scope='editor_panel'] div[data-role="header"] a::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: 12pt;
} }
div[data-gadget-scope='editor_panel'] section { div[data-gadget-scope='editor_panel'] section {
padding: 1em; padding: 12pt;
} }
div[data-gadget-scope='editor_panel'] section fieldset > div { div[data-gadget-scope='editor_panel'] section fieldset > div {
display: inline-block; display: inline-block;
...@@ -591,7 +548,6 @@ div[data-gadget-scope='editor_panel'] section fieldset > div { ...@@ -591,7 +548,6 @@ div[data-gadget-scope='editor_panel'] section fieldset > div {
div[data-gadget-scope='editor_panel'] section fieldset label { div[data-gadget-scope='editor_panel'] section fieldset label {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 0.8em;
} }
div[data-gadget-scope='editor_panel'] section fieldset input[type="radio"] { div[data-gadget-scope='editor_panel'] section fieldset input[type="radio"] {
display: inline-block; display: inline-block;
...@@ -600,7 +556,7 @@ div[data-gadget-scope='editor_panel'] section .filter_item_container > div, ...@@ -600,7 +556,7 @@ div[data-gadget-scope='editor_panel'] section .filter_item_container > div,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div { div[data-gadget-scope='editor_panel'] section .sort_item_container > div {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 0.5em 0; padding: 6pt 0;
} }
div[data-gadget-scope='editor_panel'] section .filter_item_container > div .filter_item, div[data-gadget-scope='editor_panel'] section .filter_item_container > div .filter_item,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div .filter_item, div[data-gadget-scope='editor_panel'] section .sort_item_container > div .filter_item,
...@@ -609,10 +565,10 @@ div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_i ...@@ -609,10 +565,10 @@ div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_i
flex: 1; flex: 1;
} }
div[data-gadget-scope='editor_panel'] section button { div[data-gadget-scope='editor_panel'] section button {
padding: 0.5em; padding: 3pt 6pt;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em; border-radius: 0.325em;
margin-right: 0.5em; margin-right: 6pt;
width: 2em; width: 2em;
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
...@@ -622,7 +578,7 @@ div[data-gadget-scope='editor_panel'] section button:last-of-type { ...@@ -622,7 +578,7 @@ div[data-gadget-scope='editor_panel'] section button:last-of-type {
margin-right: 0; margin-right: 0;
} }
div[data-gadget-scope='editor_panel'] section button::before { div[data-gadget-scope='editor_panel'] section button::before {
margin-right: 0.4em; margin-right: 6pt;
float: left; float: left;
text-indent: 0; text-indent: 0;
} }
...@@ -633,25 +589,21 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -633,25 +589,21 @@ div[data-gadget-scope='header'] .ui-header {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
text-align: center; text-align: center;
width: 100%;
color: #FFFFFF;
}
@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} width: 100%;
color: #FFFFFF;
background-color: #0E81C2;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header { div[data-gadget-scope='header'] .ui-header {
display: table; margin-left: 180pt;
margin-left: 17em;
} }
} }
div[data-gadget-scope='header'] .ui-header button, div[data-gadget-scope='header'] .ui-header button,
div[data-gadget-scope='header'] .ui-header a { div[data-gadget-scope='header'] .ui-header a {
color: #FFFFFF; color: #FFFFFF;
background-color: #085078; transition: background-color 0.2s ease-out;
} }
div[data-gadget-scope='header'] .ui-header button:hover, div[data-gadget-scope='header'] .ui-header button:hover,
div[data-gadget-scope='header'] .ui-header a:hover, div[data-gadget-scope='header'] .ui-header a:hover,
...@@ -659,15 +611,35 @@ div[data-gadget-scope='header'] .ui-header button:active, ...@@ -659,15 +611,35 @@ div[data-gadget-scope='header'] .ui-header button:active,
div[data-gadget-scope='header'] .ui-header a:active { div[data-gadget-scope='header'] .ui-header a:active {
background-color: #0e90d8; background-color: #0e90d8;
} }
div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
display: block; display: block;
line-height: 2.6em; transition: background-color 0.2s ease-out;
line-height: 30pt;
}
@media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color: #0E81C2;
}
}
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 70em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color: #085078;
}
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button:hover,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:hover,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button:active,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
background-color: #0e90d8;
}
@media only screen and (min-width: 28em) and (max-width: 70em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
width: 8em; width: 8em;
}
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
...@@ -678,64 +650,71 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a { ...@@ -678,64 +650,71 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
white-space: nowrap; white-space: nowrap;
} }
} }
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before, @media only screen and (min-width: 28em) and (max-width: 70em), only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before,
margin-right: 0.4em; div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
width: 1em;
margin-right: 6pt;
text-align: center;
}
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: 12pt;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"], div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"],
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] {
display: none; display: none;
} }
} }
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button, div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a { div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
background-color: #F60; border-right: 1px solid rgba(255, 255, 255, 0.55);
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 70em) {
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button, div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a { div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
border-left: 1px solid rgba(255, 255, 255, 0.55); border-left: 1px solid rgba(255, 255, 255, 0.55);
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header > .ui-btn-right {
display: table-footer-group;
}
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button, div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a { div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
margin: 0.5em; padding-left: 24pt;
margin-left: 2em; padding-right: 24pt;
min-width: 5em;
} }
} }
div[data-gadget-scope='header'] .ui-header h1 { div[data-gadget-scope='header'] .ui-header h1 {
text-align: left; text-align: left;
line-height: 2.6em; line-height: 30pt;
flex: 1; flex: 1;
background-color: #085078; background-color: #085078;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header h1 {
flex: 1 100%;
}
}
div[data-gadget-scope='header'] .ui-header h1 > span { div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 4em; padding-left: 42pt;
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header h1 > span { div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 2em; padding-left: 30pt;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header h1 > span { div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 2em; padding-left: 24pt;
} }
} }
div[data-gadget-scope='header'] .ui-header h1 a { div[data-gadget-scope='header'] .ui-header h1 a {
...@@ -746,62 +725,40 @@ div[data-gadget-scope='header'] .ui-header h1 a { ...@@ -746,62 +725,40 @@ div[data-gadget-scope='header'] .ui-header h1 a {
} }
div[data-gadget-scope='header'] .ui-header h1 a::before { div[data-gadget-scope='header'] .ui-header h1 a::before {
display: inline-block; display: inline-block;
width: 4em; width: 42pt;
} }
@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (max-width: 28em) { @media only screen and (min-width: 28em) and (max-width: 70em), only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header h1 a::before { div[data-gadget-scope='header'] .ui-header h1 a::before {
text-align: center; text-align: center;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header h1 a::before { div[data-gadget-scope='header'] .ui-header h1 a::before {
padding-left: 2em; padding-left: 24pt;
} }
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header h1 a::before { div[data-gadget-scope='header'] .ui-header h1 a::before {
width: 2em; width: 30pt;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header .ui-subheader { div[data-gadget-scope='header'] .ui-header .ui-subheader {
text-align: left; text-align: left;
flex: 1;
} }
} }
div[data-gadget-scope='header'] .ui-header ul { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 70em) {
width: 100%; div[data-gadget-scope='header'] .ui-header .ui-subheader {
background-color: #0E81C2; flex: 1 100%;
display: table;
table-layout: fixed;
}
div[data-gadget-scope='header'] .ui-header ul a {
background-color: #0E81C2;
}
@media only screen and (min-width: 62em) {
div[data-gadget-scope='header'] .ui-header ul {
height: 100%;
}
div[data-gadget-scope='header'] .ui-header ul li {
display: inline-block;
height: 100%;
}
div[data-gadget-scope='header'] .ui-header ul li a {
display: block;
padding-left: 2em;
padding-right: 2em;
min-width: 5em;
line-height: 2.6em;
height: 100%;
white-space: nowrap;
overflow: hidden;
}
div[data-gadget-scope='header'] .ui-header ul li a::before {
display: none;
} }
} }
@media only screen and (min-width: 28em) and (max-width: 62em) { div[data-gadget-scope='header'] .ui-header ul {
display: flex;
}
@media only screen and (min-width: 28em) and (max-width: 70em), only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header ul li { div[data-gadget-scope='header'] .ui-header ul li {
display: table-cell; flex: 1;
border-left: 1px solid rgba(0, 0, 0, 0.55); border-left: 1px solid rgba(0, 0, 0, 0.55);
} }
div[data-gadget-scope='header'] .ui-header ul li:first-child { div[data-gadget-scope='header'] .ui-header ul li:first-child {
...@@ -809,33 +766,27 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -809,33 +766,27 @@ div[data-gadget-scope='header'] .ui-header ul a {
} }
div[data-gadget-scope='header'] .ui-header ul li a { div[data-gadget-scope='header'] .ui-header ul li a {
display: block; display: block;
padding-top: 0.4em; }
padding-bottom: 0.4em; }
@media only screen and (min-width: 28em) and (max-width: 70em) {
div[data-gadget-scope='header'] .ui-header ul li a {
padding-top: 3pt;
padding-bottom: 3pt;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
div[data-gadget-scope='header'] .ui-header ul li a::before { div[data-gadget-scope='header'] .ui-header ul li a::before {
font-size: 1.2em; font-size: 1.2em;
padding-bottom: 0.3em;
display: block; display: block;
} }
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header ul li {
line-height: 2.6em;
display: table-cell;
border-left: 1px solid rgba(0, 0, 0, 0.55);
}
div[data-gadget-scope='header'] .ui-header ul li:first-child {
border-left: none;
}
div[data-gadget-scope='header'] .ui-header ul li a { div[data-gadget-scope='header'] .ui-header ul li a {
display: block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: 1.5em; font-size: 1.5em;
padding-top: 0.4em; padding-top: 6pt;
padding-bottom: 0.4em; padding-bottom: 6pt;
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
...@@ -846,17 +797,41 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -846,17 +797,41 @@ div[data-gadget-scope='header'] .ui-header ul a {
width: 100%; width: 100%;
} }
} }
@media only screen and (min-width: 70em) {
div[data-gadget-scope='header'] .ui-header ul li a {
display: block;
padding-left: 24pt;
padding-right: 24pt;
min-width: 5em;
line-height: 30pt;
white-space: nowrap;
overflow: hidden;
}
div[data-gadget-scope='header'] .ui-header ul li a::before {
display: none;
}
}
/********************************************** /**********************************************
* Gadget: main * Gadget: main
**********************************************/ **********************************************/
.gadget-content { .gadget-content {
padding: 2em; padding: 24pt;
padding-top: 9em; padding-top: 66pt;
/*
@media @smartphone {
.ui-field-contain {
// padding: 0.8em 0;
// make sure there is a bottom border
// XXX TODO: border should be visible only if not input
// XXX How to not show it on last field?
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
}
*/
/* form validation (assuming label>span is used) */ /* form validation (assuming label>span is used) */
} }
.gadget-content input[type='submit'] { .gadget-content input[type='submit'] {
padding: 0.4em; padding: 6pt;
line-height: 1.4em;
background-color: #444444; background-color: #444444;
color: #FFFFFF; color: #FFFFFF;
border-radius: 0.325em; border-radius: 0.325em;
...@@ -871,31 +846,36 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -871,31 +846,36 @@ div[data-gadget-scope='header'] .ui-header ul a {
.gadget-content input[type='submit']:active { .gadget-content input[type='submit']:active {
background-color: #777777; background-color: #777777;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
.gadget-content { .gadget-content {
margin-left: 17em; margin-left: 180pt;
}
}
@media only screen and (min-width: 28em) and (max-width: 70em) {
.gadget-content {
padding-top: 7em;
} }
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
.gadget-content { .gadget-content {
padding: 0.5em; padding: 6pt;
padding-top: 8em; padding-top: 6em;
} }
} }
.gadget-content .ui-field-contain { .gadget-content .ui-field-contain {
padding: 0.5em 0; padding: 6pt 0;
} }
.gadget-content .ui-field-contain div { .gadget-content .ui-field-contain div {
width: 100%; width: 100%;
} }
.gadget-content .ui-field-contain label { .gadget-content .ui-content-header-plain {
margin: 0 0 0.4em;
}
.gadget-content .ui-content-title {
font-size: 150%; font-size: 150%;
} }
.gadget-content ul.document-listview { .gadget-content ul.document-listview:not(:last-of-type) {
margin-bottom: 2em; margin-bottom: 12pt;
}
.gadget-content ul.document-listview:first-child {
margin-top: 6pt;
} }
.gadget-content ul.document-listview li { .gadget-content ul.document-listview li {
border-color: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.3);
...@@ -910,13 +890,13 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -910,13 +890,13 @@ div[data-gadget-scope='header'] .ui-header ul a {
text-align: right; text-align: right;
float: right; float: right;
position: absolute; position: absolute;
right: 1.5em; right: 12pt;
} }
.gadget-content ul.document-listview li a { .gadget-content ul.document-listview li a {
display: block; display: block;
position: relative; position: relative;
padding: 0.7em 1em; padding: 6pt 12pt;
padding-right: 2.5em; padding-right: 24pt;
color: #222222; color: #222222;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -937,13 +917,13 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -937,13 +917,13 @@ div[data-gadget-scope='header'] .ui-header ul a {
} }
.gadget-content ul.document-listview li .ui-li-count { .gadget-content ul.document-listview li .ui-li-count {
float: right; float: right;
padding: 0 0.5em; padding: 0 6pt;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em; border-radius: 0.325em;
position: absolute; position: absolute;
right: .5em; right: 6pt;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
.gadget-content .left, .gadget-content .left,
.gadget-content .right { .gadget-content .right {
vertical-align: top; vertical-align: top;
...@@ -951,10 +931,10 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -951,10 +931,10 @@ div[data-gadget-scope='header'] .ui-header ul a {
width: 50%; width: 50%;
} }
.gadget-content .right { .gadget-content .right {
padding-left: 2%; padding-left: 24pt;
} }
} }
@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (min-width: 62em) { @media only screen and (min-width: 28em) and (max-width: 70em), only screen and (min-width: 70em) {
.gadget-content .ui-field-contain { .gadget-content .ui-field-contain {
display: flex; display: flex;
} }
...@@ -965,16 +945,11 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -965,16 +945,11 @@ div[data-gadget-scope='header'] .ui-header ul a {
flex: 3; flex: 3;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 70em) {
.gadget-content .center .ui-field-contain label + div { .gadget-content .center .ui-field-contain label + div {
flex: 7; flex: 7;
} }
} }
@media only screen and (max-width: 28em) {
.gadget-content .ui-field-contain {
padding: 0.8em 0;
}
}
.gadget-content form label span { .gadget-content form label span {
color: red; color: red;
} }
...@@ -985,17 +960,18 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -985,17 +960,18 @@ div[data-gadget-scope='header'] .ui-header ul a {
display: flex; display: flex;
} }
.relation-input a { .relation-input a {
width: 3em; width: 24pt;
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
line-height: 2.6em; padding-top: 3pt;
padding-bottom: 3pt;
} }
.relation-input a::before { .relation-input a::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: 6pt;
} }
.relation-input div { .relation-input div {
position: relative; position: relative;
...@@ -1010,15 +986,15 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -1010,15 +986,15 @@ div[data-gadget-scope='header'] .ui-header ul a {
cursor: pointer; cursor: pointer;
background-color: #444444; background-color: #444444;
color: #FFFFFF; color: #FFFFFF;
padding: .4em; padding: 3pt;
padding-left: 1em; padding-left: 6pt;
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.relation-input ul li::before { .relation-input ul li::before {
width: 2em; padding-right: 6pt;
} }
.relation-input ul li:hover, .relation-input ul li:hover,
.relation-input ul li:active { .relation-input ul li:active {
...@@ -1039,6 +1015,9 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -1039,6 +1015,9 @@ div[data-gadget-scope='header'] .ui-header ul a {
/********************************************** /**********************************************
* Listbox * Listbox
**********************************************/ **********************************************/
div[data-gadget-scope='erp5_searchfield'] {
padding-top: 6pt;
}
div[data-gadget-scope='erp5_searchfield'] .ui-input-text { div[data-gadget-scope='erp5_searchfield'] .ui-input-text {
display: flex; display: flex;
} }
...@@ -1046,13 +1025,11 @@ div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope=' ...@@ -1046,13 +1025,11 @@ div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='
width: 100%; width: 100%;
} }
div[data-gadget-scope='erp5_searchfield'] button { div[data-gadget-scope='erp5_searchfield'] button {
margin-left: 0.5em; padding: 3pt;
padding: 0.5em;
padding-left: 0;
} }
.document_table .ui-table-header { .document_table .ui-table-header {
display: flex; display: flex;
padding-bottom: 0.5em; padding-bottom: 6pt;
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
.document_table .ui-table-header { .document_table .ui-table-header {
...@@ -1065,10 +1042,10 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1065,10 +1042,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
align-self: flex-end; align-self: flex-end;
} }
.document_table .ui-table-header button { .document_table .ui-table-header button {
padding: 0.5em; padding: 3pt;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em; border-radius: 0.325em;
margin-right: 0.5em; margin-right: 6pt;
} }
.document_table .ui-table-header button:last-of-type { .document_table .ui-table-header button:last-of-type {
margin-right: 0; margin-right: 0;
...@@ -1082,7 +1059,7 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1082,7 +1059,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
} }
} }
.document_table .ui-table-header button::before { .document_table .ui-table-header button::before {
margin-right: 0.4em; margin-right: 6pt;
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
.document_table .ui-table-header button::before { .document_table .ui-table-header button::before {
...@@ -1096,7 +1073,6 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1096,7 +1073,6 @@ div[data-gadget-scope='erp5_searchfield'] button {
} }
.document_table table th, .document_table table th,
.document_table table td { .document_table table td {
line-height: 1.5em;
vertical-align: middle; vertical-align: middle;
} }
.document_table table thead { .document_table table thead {
...@@ -1104,7 +1080,7 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1104,7 +1080,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
color: #FFFFFF; color: #FFFFFF;
} }
.document_table table thead tr th { .document_table table thead tr th {
padding: 0.4em 0.25em; padding: 6pt 3pt;
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
.document_table table thead { .document_table table thead {
...@@ -1121,10 +1097,10 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1121,10 +1097,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table table tbody tr:active { .document_table table tbody tr:active {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
@media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (min-width: 70em), only screen and (min-width: 28em) and (max-width: 70em) {
.document_table table tbody a { .document_table table tbody a {
display: block; display: block;
padding: 0.4em 0.25em; padding: 3pt;
} }
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
...@@ -1160,7 +1136,7 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1160,7 +1136,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
content: "\f0da"; content: "\f0da";
font-size: 1.25em; font-size: 1.25em;
position: absolute; position: absolute;
right: 0.5em; right: 6pt;
top: 50%; top: 50%;
margin-top: -0.75em; margin-top: -0.75em;
background-color: #FFFFFF; background-color: #FFFFFF;
...@@ -1190,7 +1166,7 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1190,7 +1166,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
} }
.document_table table tfoot .ui-controlgroup-controls { .document_table table tfoot .ui-controlgroup-controls {
display: flex; display: flex;
padding-top: 0.5em; padding-top: 6pt;
border-top: 2px solid rgba(0, 0, 0, 0.14902); border-top: 2px solid rgba(0, 0, 0, 0.14902);
} }
.document_table table tfoot .ui-controlgroup-controls span { .document_table table tfoot .ui-controlgroup-controls span {
...@@ -1199,10 +1175,10 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1199,10 +1175,10 @@ div[data-gadget-scope='erp5_searchfield'] button {
text-align: right; text-align: right;
} }
.document_table table tfoot .ui-controlgroup-controls a { .document_table table tfoot .ui-controlgroup-controls a {
padding: 0.5em; padding: 6pt;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em; border-radius: 0.325em;
margin-right: 0.5em; margin-right: 6pt;
} }
.document_table table tfoot .ui-controlgroup-controls a:last-of-type { .document_table table tfoot .ui-controlgroup-controls a:last-of-type {
margin-right: 0; margin-right: 0;
...@@ -1213,19 +1189,18 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1213,19 +1189,18 @@ div[data-gadget-scope='erp5_searchfield'] button {
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
.document_table table tfoot .ui-controlgroup-controls a { .document_table table tfoot .ui-controlgroup-controls a {
width: 2em;
overflow: hidden; overflow: hidden;
text-indent: -9999px; text-indent: -9999px;
white-space: nowrap; white-space: nowrap;
} }
} }
.document_table table tfoot .ui-controlgroup-controls a::before { .document_table table tfoot .ui-controlgroup-controls a::before {
margin-right: 0.4em; margin-right: 6pt;
} }
@media only screen and (max-width: 28em) { @media only screen and (max-width: 28em) {
.document_table table tfoot .ui-controlgroup-controls a::before { .document_table table tfoot .ui-controlgroup-controls a::before {
float: left; float: left;
text-indent: 0.3em; text-indent: 6pt;
} }
} }
/********************************************** /**********************************************
...@@ -1263,9 +1238,7 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1263,9 +1238,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
content: ""; content: "";
} }
.ui-icon-warning { .ui-icon-warning {
background: none repeat scroll 0 0 #e4ebf1; background-color: #FF6600 !important;
border-color: rgba(0, 0, 0, 0.3);
color: #777;
} }
.ui-icon-warning::before { .ui-icon-warning::before {
content: "\f071"; content: "\f071";
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @ 0fac5987
...@@ -63,6 +63,16 @@ ...@@ -63,6 +63,16 @@
</tuple> </tuple>
</value> </value>
</item> </item>
<item>
<key> <string>categories</string> </key>
<value>
<tuple>
<string>group/3</string>
<string>contributor/organisation_module/1</string>
<string>contributor/person_module/3</string>
</tuple>
</value>
</item>
<item> <item>
<key> <string>content_md5</string> </key> <key> <string>content_md5</string> </key>
<value> <value>
...@@ -81,9 +91,22 @@ ...@@ -81,9 +91,22 @@
</item> </item>
<item> <item>
<key> <string>description</string> </key> <key> <string>description</string> </key>
<value> <value> <string>fsvdfv\n
<none/> dfv\n
</value> dfv\n
dfv\n
dfv\n
ddfv\n
dfv\n
dfv\n
dfvdfvdfvdfv\n
dfdfv\n
ffffff\n
dfvfdvdfvdfvdfvdfvdfvdfv\n
dfv\n
dfvdf\n
vdf\n
vdf</string> </value>
</item> </item>
<item> <item>
<key> <string>id</string> </key> <key> <string>id</string> </key>
...@@ -236,7 +259,7 @@ ...@@ -236,7 +259,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.58960.41752.27153</string> </value> <value> <string>955.12311.36129.49083</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -254,7 +277,7 @@ ...@@ -254,7 +277,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1477660036.34</float> <float>1478793295.77</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ 0fac5987
...@@ -34,18 +34,22 @@ ...@@ -34,18 +34,22 @@
@radius: .325em; @radius: .325em;
@headerheight: 2.6em; // XXX BUG Generate wrong align on firefox smartphone
@headertitleleftlargemargin: 4em; @headerheight: @font-size * 2 + @margin-size;
@headertitleleftsmallmargin: 2em;
@mainpaddingdesktop: 2em; @main-margin-size-desktop: @quadruple-margin-size;
@main-margin-size-smartphone: @margin-size;
@headertitleleftlargemargin: @main-margin-size-desktop + @margin-size * 3;
@headertitleleftsmallmargin: @main-margin-size-smartphone + @main-margin-size-desktop;
// XXX desktop: 12em // XXX desktop: 12em
@panelwidth: 17em; @panelwidth: @margin-size * 30;
// @panelwidth: 15em;
@smartphone: ~"only screen and (max-width: 28em)"; @smartphone: ~"only screen and (max-width: 28em)";
@tablet: ~"only screen and (min-width: 28em) and (max-width: 62em)"; @tablet: ~"only screen and (min-width: 28em) and (max-width: 70em)";
@desktop: ~"only screen and (min-width: 62em)"; @desktop: ~"only screen and (min-width: 70em)";
/********************************************** /**********************************************
...@@ -58,24 +62,39 @@ ...@@ -58,24 +62,39 @@
* Shared * Shared
**********************************************/ **********************************************/
@font-family: @sans-serif; @font-family: @sans-serif;
@font-size: 11pt;
// Increase font size to prevent IOS auto zooming when focusing input field // Increase font size to prevent IOS auto zooming when focusing input field
@smartphone-font-size: 12pt; @font-size: 12pt;
@font-weight: 400; @font-weight: 400;
@line-height: 1.3; @line-height: 1.5;
@letter-spacing: .05em;
@header-font-weight: 700; @header-font-weight: 700;
// @header-font-weight: bolder;
@header-letter-spacing: .1em;
@border-size: 1pt; @border-size: 1px;
@border-type: solid; @border-type: solid;
// @border-color: @color; @border-transparency: .3;
@border: @border-size @border-type @colorforeground; @border-color: rgba(0, 0, 0, @border-transparency);
@border: @border-size @border-type @border-color;
@border-radius: @radius;
@box-shadow-transparency: .2;
@box-shadow: inset 0 @border-size 3px rgba(0, 0, 0, @box-shadow-transparency);
// #3388cc = rgba(51, 136, 204, 1)
@focus-border-color: #3388cc;
@focus-border: @border-size @border-type @focus-border-color;
@focus-box-shadow: 0 0 @double-margin-size @focus-border-color;
@half-margin-size: 3pt;
@margin-size: 6pt;
@double-margin-size: 12pt;
@triple-margin-size: 18pt;
@quadruple-margin-size: 24pt;
@transition-timing: .2s ease-out;
@sub-line-margin-size-desktop: @main-margin-size-desktop;
@sub-line-min-width-desktop: 5em;
/////////////////////////////////////////////// ///////////////////////////////////////////////
// Extend // Extend
...@@ -205,13 +224,10 @@ body { ...@@ -205,13 +224,10 @@ body {
body, button, input, textarea, select { body, button, input, textarea, select {
font-family: @font-family; font-family: @font-family;
// letter-spacing: @letter-spacing;
@media @desktop, @tablet {
font-size: @font-size; font-size: @font-size;
} padding: 0;
@media @smartphone { margin: 0;
font-size: @smartphone-font-size;
}
font-weight: @font-weight; font-weight: @font-weight;
line-height: @line-height; line-height: @line-height;
} }
...@@ -270,7 +286,6 @@ q { ...@@ -270,7 +286,6 @@ q {
} }
mark { mark {
// background-color: @colortextselection;
color: @colortextselection; color: @colortextselection;
} }
...@@ -278,9 +293,11 @@ mark { ...@@ -278,9 +293,11 @@ mark {
* Link * Link
**********************************************/ **********************************************/
.link(@ccolor) { .link(@ccolor) {
// XXX
color: @ccolor; color: @ccolor;
text-decoration: none; text-decoration: none;
// TODO Animate underline by using outline?
&[href=""] { &[href=""] {
color: @colorforeground; color: @colorforeground;
...@@ -291,6 +308,7 @@ mark { ...@@ -291,6 +308,7 @@ mark {
text-decoration: underline; text-decoration: underline;
} }
&:focus { &:focus {
// XXX TODO
outline-offset: -2px; outline-offset: -2px;
outline: 2px @border-type @colorfocus; outline: 2px @border-type @colorfocus;
} }
...@@ -314,7 +332,6 @@ a { ...@@ -314,7 +332,6 @@ a {
pre, xmp, plaintext, listing { pre, xmp, plaintext, listing {
display: block; display: block;
// font-family: @monospace;
white-space: pre-wrap; white-space: pre-wrap;
} }
...@@ -334,106 +351,64 @@ hr { ...@@ -334,106 +351,64 @@ hr {
**********************************************/ **********************************************/
label { label {
display: block; // XXX
color: @grey; color: @grey;
} }
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea { input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea, select {
width: 100%; width: 100%;
margin: 0;
padding: 0.4em; padding: @half-margin-size;
line-height: 1.4em;
border: none;
background-color: @colortextboxbackground; background-color: @colortextboxbackground;
color: @colortextboxforeground; color: @colortextboxforeground;
border-radius: @radius; border: @border;
border-width: 1px; border-radius: @border-radius;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3); // BUG: transition is not triggered if there is a default box-shadow
box-shadow: inset 0 1px 3px rgba(0,0,0,.2); // probably a chrome bug. Disable for now.
// box-shadow: @box-shadow;
outline-offset: 0; transition : border @transition-timing, box-shadow @transition-timing;
&[readonly="readonly"] {
// XXX Should be dropped when gadget field do not use input
// in read only
border: none;
box-shadow: none;
padding: 0;
line-height: 1em;
}
&:active, &:focus { &:active, &:focus {
outline-offset: 0; outline: none;
} }
&:focus { &:focus {
box-shadow: 0 0 12px @colorfocus; border: @focus-border;
box-shadow: @focus-box-shadow;
} }
} }
// http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes // http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
select { select {
width: 100%; cursor: pointer;
margin: 0;
padding: 0.4em;
padding-right: 1.8em;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
line-height: 1.4em;
cursor: pointer;
background-image: none; background-image: none;
background-color: @colortextboxbackground; background-color: @colortextboxbackground;
padding-right: @quadruple-margin-size;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;
background-position: right .5em top 50%; background-position: right @margin-size top 50%;
background-size: 1em 1em; background-size: @double-margin-size @double-margin-size;
color: @colortextboxforeground;
border-radius: @radius;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
outline-offset: 0;
&[readonly="readonly"] {
// XXX Should be dropped when gadget field do not use input
// in read only
border: none;
background: none;
box-shadow: none;
padding: 0;
line-height: 1em;
}
&:not([readonly="readonly"]) {
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
}
&:-moz-focusring { &:-moz-focusring {
color: transparent // Remove outline in Firefox
// http://stackoverflow.com/a/18853002
color: transparent;
text-shadow: 0 0 0 #000;
} }
} }
textarea { textarea {
width: 100%; // Fix inconsistent Textarea bottom margin in Firefox and Chrome
margin: 0; // http://stackoverflow.com/a/26904480
// font-family: @monospace; vertical-align: top;
// BUG: how to transition on textarea row property
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
...@@ -461,20 +436,24 @@ input[type=submit], button { ...@@ -461,20 +436,24 @@ input[type=submit], button {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
background-image: none; background:transparent;
background-color: @colorbackground;
color: @colorforeground; color: @colorforeground;
transition: background-color 0.2s ease-out;
&:hover, &:focus { &:hover, &:focus {
outline: none; outline: none;
background-color: @colorblocklinkbackground; }
/*
// XXX TODO
// transition: background-color 0.2s ease-out;
&:hover, &:focus {
outline: none;
} }
&:active { &:active {
// box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%); // box-shadow: inset 0 0 0 5px darken(@colorblocklinkbackground, 10%);
background-color: darken(@colorblocklinkbackground, 20%); background-color: darken(@colorblocklinkbackground, 20%);
} }
*/
cursor: pointer; cursor: pointer;
} }
...@@ -482,7 +461,7 @@ input[type=submit], button { ...@@ -482,7 +461,7 @@ input[type=submit], button {
* Media * Media
**********************************************/ **********************************************/
img, canvas, iframe, video, svg { img, iframe, video, svg {
max-width: 100%; max-width: 100%;
} }
...@@ -499,8 +478,8 @@ svg { ...@@ -499,8 +478,8 @@ svg {
iframe { iframe {
width: 100%; width: 100%;
height: 50em; height: 80vh;
background-color: white; background-color: @colorbackground;
} }
img { img {
...@@ -530,15 +509,14 @@ div[data-gadget-scope='panel'] { ...@@ -530,15 +509,14 @@ div[data-gadget-scope='panel'] {
z-index: 2000; z-index: 2000;
@media @smartphone, @tablet { @media @smartphone, @tablet {
left: -@panelwidth - 1em; left: -@panelwidth - @margin-size;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
&.visible { &.visible {
transform: translate3d(@panelwidth + 1em, 0, 0); transform: translate3d(@panelwidth + @margin-size, 0, 0);
} }
} }
div[data-role="header"] { div[data-role="header"] {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -553,11 +531,10 @@ div[data-gadget-scope='panel'] { ...@@ -553,11 +531,10 @@ div[data-gadget-scope='panel'] {
.hide_text(); .hide_text();
background-color: @panelbackgroundcolor; background-color: @panelbackgroundcolor;
&::before { &::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: @double-margin-size;
} }
@media @desktop { @media @desktop {
...@@ -585,15 +562,17 @@ div[data-gadget-scope='panel'] { ...@@ -585,15 +562,17 @@ div[data-gadget-scope='panel'] {
li { li {
a { a {
color: @white; color: @white;
padding: .4em; padding: @half-margin-size;
padding-left: 1em; padding-left: @double-margin-size;
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
&::before { &::before {
width: @mainpaddingdesktop; // Use width instead of padding-right
// To keep text aligned
width: @quadruple-margin-size;
} }
&:hover, &:active { &:hover, &:active {
background-color: darken(@panelbackgroundcolor, 10%); background-color: darken(@panelbackgroundcolor, 10%);
...@@ -621,20 +600,20 @@ div[data-gadget-scope='editor_panel'] { ...@@ -621,20 +600,20 @@ div[data-gadget-scope='editor_panel'] {
z-index: 3000; z-index: 3000;
@media @desktop { @media @desktop {
left: -@panelwidth - 1em; left: -@panelwidth - @margin-size;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
&.visible { &.visible {
transform: translate3d(@panelwidth + 1em, 0, 0); transform: translate3d(@panelwidth + @margin-size, 0, 0);
} }
box-shadow: 5px 0 5px rgba(0,0,0,.15); box-shadow: 5px 0 5px rgba(0,0,0,.15);
} }
@media @smartphone, @tablet { @media @smartphone, @tablet {
right: -@panelwidth - 1em; right: -@panelwidth - @margin-size;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
&.visible { &.visible {
transform: translate3d(-@panelwidth - 1em, 0, 0); transform: translate3d(-@panelwidth - @margin-size, 0, 0);
} }
box-shadow: -5px 0 5px rgba(0,0,0,.15); box-shadow: -5px 0 5px rgba(0,0,0,.15);
} }
...@@ -659,7 +638,7 @@ div[data-gadget-scope='editor_panel'] { ...@@ -659,7 +638,7 @@ div[data-gadget-scope='editor_panel'] {
&::before { &::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: @double-margin-size;
} }
display: block; display: block;
...@@ -669,7 +648,7 @@ div[data-gadget-scope='editor_panel'] { ...@@ -669,7 +648,7 @@ div[data-gadget-scope='editor_panel'] {
} }
section { section {
padding: 1em; padding: @double-margin-size;
fieldset { fieldset {
& > div { & > div {
...@@ -678,7 +657,7 @@ div[data-gadget-scope='editor_panel'] { ...@@ -678,7 +657,7 @@ div[data-gadget-scope='editor_panel'] {
label { label {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 0.8em; // font-size: 0.8em;
} }
input[type="radio"] { input[type="radio"] {
display: inline-block; display: inline-block;
...@@ -689,7 +668,7 @@ div[data-gadget-scope='editor_panel'] { ...@@ -689,7 +668,7 @@ div[data-gadget-scope='editor_panel'] {
& > div { & > div {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 0.5em 0; padding: @margin-size 0;
.filter_item, .sort_item { .filter_item, .sort_item {
flex: 1; flex: 1;
...@@ -700,11 +679,11 @@ div[data-gadget-scope='editor_panel'] { ...@@ -700,11 +679,11 @@ div[data-gadget-scope='editor_panel'] {
button { button {
// Copy pasted from listbox buttons // Copy pasted from listbox buttons
padding: 0.5em; padding: @half-margin-size @margin-size;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius; border-radius: @radius;
margin-right: 0.5em; margin-right: @margin-size;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
} }
...@@ -712,7 +691,7 @@ div[data-gadget-scope='editor_panel'] { ...@@ -712,7 +691,7 @@ div[data-gadget-scope='editor_panel'] {
.hide_text(@width: 2em); .hide_text(@width: 2em);
&::before { &::before {
margin-right: 0.4em; margin-right: @margin-size;
float: left; float: left;
text-indent: 0; text-indent: 0;
...@@ -727,62 +706,78 @@ div[data-gadget-scope='editor_panel'] { ...@@ -727,62 +706,78 @@ div[data-gadget-scope='editor_panel'] {
/********************************************** /**********************************************
* Gadget: header * Gadget: header
**********************************************/ **********************************************/
.renderDesktopSubLink() {
padding-left: @sub-line-margin-size-desktop;
padding-right: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop;
}
div[data-gadget-scope='header'] .ui-header { div[data-gadget-scope='header'] .ui-header {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
text-align: center; text-align: center;
@media @tablet, @smartphone {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} // Prevent the header to have a width higher than the screen
width: 100%;
@media @desktop { @media @desktop {
display: table;
margin-left: @panelwidth; margin-left: @panelwidth;
} }
// Prevent the header to have a width higher than the screen
width: 100%;
color: @white; color: @white;
background-color: @colorsubheaderbackground;
button, a { button, a {
color: @white; color: @white;
background-color: @colorheaderbackground; transition: background-color @transition-timing;
&:hover, &:active { &:hover, &:active {
background-color: lighten(@colorheaderbackground, 20%); background-color: lighten(@colorheaderbackground, 20%);
} }
} }
// XXX TODO: restore border to separate title from button/links
& > .ui-btn-left {
button, a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
}
.ui-controlgroup-controls { .ui-controlgroup-controls {
// Left, right button next to the page title
button, a { button, a {
display: block; display: block;
@media @desktop {
background-color: @colorsubheaderbackground;
}
@media @smartphone, @tablet {
background-color: @colorheaderbackground;
}
transition: background-color @transition-timing;
&:hover, &:active {
background-color: lighten(@colorheaderbackground, 20%);
}
line-height: @headerheight; line-height: @headerheight;
@media @tablet {
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/ // https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
// Default size // Default size
width: 8em; width: 8em;
}
@media @smartphone { @media @smartphone {
.hide_text(); .hide_text();
} }
&::before { &::before {
margin-right: 0.4em; @media @tablet, @desktop {
width: 1em;
margin-right: @margin-size;
text-align: center;
}
@media @smartphone { @media @smartphone {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: @double-margin-size;
} }
} }
...@@ -795,18 +790,21 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -795,18 +790,21 @@ div[data-gadget-scope='header'] .ui-header {
} }
} }
// XXX TODO: restore border to separate title from button/links
& > .ui-btn-left {
button, a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
}
& > .ui-btn-right { & > .ui-btn-right {
button, a { button, a {
background-color: #F60; // background-color: #F60;
@media @smartphone, @tablet { @media @smartphone, @tablet {
border-left: 1px solid rgba(255, 255, 255, 0.55); border-left: 1px solid rgba(255, 255, 255, 0.55);
} }
}
@media @desktop { @media @desktop {
display: table-footer-group; .renderDesktopSubLink();
button, a {
margin: 0.5em;
margin-left: @mainpaddingdesktop;
} }
} }
} }
...@@ -815,10 +813,13 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -815,10 +813,13 @@ div[data-gadget-scope='header'] .ui-header {
text-align: left; text-align: left;
line-height: @headerheight; line-height: @headerheight;
flex: 1; flex: 1;
@media @desktop {
flex: 1 100%;
}
background-color: @colorheaderbackground; background-color: @colorheaderbackground;
// XXX Restore border // Restore border?
// border-left: 1px solid rgba(255, 255, 255, 0.55); // border-left: 1px solid rgba(255, 255, 255, 0.55);
// border-right: 1px solid rgba(255, 255, 255, 0.55); // border-right: 1px solid rgba(255, 255, 255, 0.55);
...@@ -834,7 +835,7 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -834,7 +835,7 @@ div[data-gadget-scope='header'] .ui-header {
padding-left: @headertitleleftsmallmargin; padding-left: @headertitleleftsmallmargin;
} }
@media @desktop { @media @desktop {
padding-left: @mainpaddingdesktop; padding-left: @main-margin-size-desktop;
} }
} }
// Clickable title // Clickable title
...@@ -851,13 +852,13 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -851,13 +852,13 @@ div[data-gadget-scope='header'] .ui-header {
@media @tablet, @smartphone { @media @tablet, @smartphone {
text-align: center; text-align: center;
} }
@media @desktop { @media @desktop {
padding-left: @mainpaddingdesktop; padding-left: @main-margin-size-desktop;
} }
width: @headertitleleftlargemargin; width: @headertitleleftlargemargin;
@media @smartphone { @media @smartphone {
width: @headertitleleftsmallmargin width: @headertitleleftsmallmargin;
} }
} }
...@@ -869,111 +870,79 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -869,111 +870,79 @@ div[data-gadget-scope='header'] .ui-header {
.ui-subheader { .ui-subheader {
@media @desktop { @media @desktop {
text-align: left; text-align: left;
flex: 1;
} }
@media @smartphone, @tablet {
flex: 1 100%;
} }
ul {
width: 100%;
background-color: @colorsubheaderbackground;
display: table;
table-layout: fixed;
a {
background-color: @colorsubheaderbackground;
} }
@media @desktop { ul {
height: 100%; display: flex;
li { li {
display: inline-block; @media @tablet, @smartphone {
height: 100%; flex: 1;
// XXX TODO Hardcoded color
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a { a {
display: block; display: block;
padding-left: @mainpaddingdesktop;
padding-right: @mainpaddingdesktop;
min-width: 5em;
line-height: @headerheight;
height: 100%;
white-space: nowrap;
overflow: hidden;
&::before {
display: none;
}
}
} }
} }
@media @tablet { @media @tablet {
li {
display: table-cell;
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a { a {
display: block; padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
padding-top: 0.4em;
padding-bottom: 0.4em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
&::before { &::before {
font-size: 1.2em; font-size: 1.2em;
padding-bottom: 0.3em;
display: block; display: block;
} }
} }
} }
}
@media @smartphone { @media @smartphone {
li {
line-height: @headerheight;
display: table-cell;
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a { a {
display: block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: 1.5em; font-size: 1.5em;
padding-top: @margin-size;
padding-top: 0.4em; padding-bottom: @margin-size;
padding-bottom: 0.4em;
.hide_text(@width: false); .hide_text(@width: false);
&::before { &::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
width: 100%; width: 100%;
} }
}
}
@media @desktop {
a {
display: block;
.renderDesktopSubLink();
line-height: @headerheight;
white-space: nowrap;
overflow: hidden;
&::before {
display: none;
} }
} }
} }
} }
}
} }
/********************************************** /**********************************************
...@@ -981,10 +950,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -981,10 +950,8 @@ div[data-gadget-scope='header'] .ui-header {
**********************************************/ **********************************************/
.gadget-content { .gadget-content {
input[type='submit'] { input[type='submit'] {
padding: 0.4em; padding: @margin-size;
line-height: 1.4em;
background-color: @panelbackgroundcolor; background-color: @panelbackgroundcolor;
color: @white; color: @white;
...@@ -1010,33 +977,39 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1010,33 +977,39 @@ div[data-gadget-scope='header'] .ui-header {
} }
// Top padding // Top padding
padding: @mainpaddingdesktop; padding: @main-margin-size-desktop;
padding-top: 9em; // XXX TODO: replace em by pt, to have exact position
padding-top: 2 * @headerheight + @margin-size;
@media @tablet {
padding-top: 7em;
}
@media @smartphone { @media @smartphone {
padding: 0.5em; padding: @main-margin-size-smartphone;
padding-top: 8em; padding-top: 6em;
} }
// Label // Label
.ui-field-contain { .ui-field-contain {
padding: 0.5em 0; padding: @margin-size 0;
div { div {
width: 100%; width: 100%;
} }
label {
margin: 0 0 0.4em;
}
} }
.ui-content-title { .ui-content-header-plain {
font-size: 150%; font-size: 150%;
} }
ul.document-listview { ul.document-listview {
margin-bottom: 2em; &:not(:last-of-type) {
margin-bottom: @double-margin-size;
}
&:first-child {
margin-top: @margin-size;
}
li { li {
border-color: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.3);
border-width: 1px; border-width: 1px;
...@@ -1050,9 +1023,9 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1050,9 +1023,9 @@ div[data-gadget-scope='header'] .ui-header {
font-family: FontAwesome; font-family: FontAwesome;
content: "\f0da"; content: "\f0da";
text-align: right; text-align: right;
float:right; float: right;
position: absolute; position: absolute;
right: 1.5em; right: @double-margin-size;
} }
} }
} }
...@@ -1060,8 +1033,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1060,8 +1033,8 @@ div[data-gadget-scope='header'] .ui-header {
a { a {
display: block; display: block;
position: relative; position: relative;
padding: 0.7em 1em; padding: @margin-size @double-margin-size;
padding-right: 2.5em; padding-right: @quadruple-margin-size;
color: #222222; color: #222222;
...@@ -1085,11 +1058,11 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1085,11 +1058,11 @@ div[data-gadget-scope='header'] .ui-header {
.ui-li-count { .ui-li-count {
float: right; float: right;
padding: 0 0.5em; padding: 0 @margin-size;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius; border-radius: @radius;
position: absolute; position: absolute;
right: .5em; right: @margin-size;
} }
} }
...@@ -1102,7 +1075,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1102,7 +1075,8 @@ div[data-gadget-scope='header'] .ui-header {
width: 50%; width: 50%;
} }
.right { .right {
padding-left: 2%; // Put padding only in .right, to keep .center aligned with .left
padding-left: @quadruple-margin-size;
} }
} }
...@@ -1129,14 +1103,17 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1129,14 +1103,17 @@ div[data-gadget-scope='header'] .ui-header {
} }
} }
/*
@media @smartphone { @media @smartphone {
.ui-field-contain { .ui-field-contain {
padding: 0.8em 0; // padding: 0.8em 0;
// make sure there is a bottom border // make sure there is a bottom border
// XXX TODO: border should be visible only if not input // XXX TODO: border should be visible only if not input
// border-bottom: 1px solid rgba(0, 0, 0, 0.15); // XXX How to not show it on last field?
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
} }
} }
*/
/* form validation (assuming label>span is used) */ /* form validation (assuming label>span is used) */
form label span { form label span {
...@@ -1151,18 +1128,18 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1151,18 +1128,18 @@ div[data-gadget-scope='header'] .ui-header {
.relation-input { .relation-input {
display: flex; display: flex;
a { a {
.hide_text(); .hide_text(@width: @quadruple-margin-size);
&::before { &::before {
float: left; float: left;
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: @margin-size;
} }
display: block; display: block;
line-height: @headerheight; padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
} }
div { div {
...@@ -1179,16 +1156,18 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1179,16 +1156,18 @@ div[data-gadget-scope='header'] .ui-header {
background-color: @panelbackgroundcolor; background-color: @panelbackgroundcolor;
color: @white; color: @white;
padding: .4em; padding: @half-margin-size;
padding-left: 1em; padding-left: @margin-size;
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
&::before { &::before {
width: @mainpaddingdesktop; padding-right: @margin-size;
} }
// No transition, as it doesn't feel right
// transition: background-color @transition-timing;
&:hover, &:active { &:hover, &:active {
background-color: darken(@panelbackgroundcolor, 10%); background-color: darken(@panelbackgroundcolor, 10%);
} }
...@@ -1214,6 +1193,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1214,6 +1193,8 @@ div[data-gadget-scope='header'] .ui-header {
* Listbox * Listbox
**********************************************/ **********************************************/
div[data-gadget-scope='erp5_searchfield'] { div[data-gadget-scope='erp5_searchfield'] {
padding-top: @margin-size;
.ui-input-text { .ui-input-text {
display: flex; display: flex;
div[data-gadget-scope='input'] { div[data-gadget-scope='input'] {
...@@ -1221,9 +1202,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1221,9 +1202,7 @@ div[data-gadget-scope='erp5_searchfield'] {
} }
} }
button { button {
margin-left: 0.5em; padding: @half-margin-size;
padding: 0.5em;
padding-left: 0;
} }
} }
...@@ -1231,7 +1210,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1231,7 +1210,7 @@ div[data-gadget-scope='erp5_searchfield'] {
.ui-table-header { .ui-table-header {
display: flex; display: flex;
padding-bottom: 0.5em; padding-bottom: @margin-size;
@media @smartphone { @media @smartphone {
border-bottom: 2px solid rgba(0, 0, 0, 0.14902); border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
} }
...@@ -1243,11 +1222,11 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1243,11 +1222,11 @@ div[data-gadget-scope='erp5_searchfield'] {
align-self: flex-end; align-self: flex-end;
} }
button { button {
padding: 0.5em; padding: @half-margin-size;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius; border-radius: @radius;
margin-right: 0.5em; margin-right: @margin-size;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
} }
...@@ -1257,7 +1236,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1257,7 +1236,7 @@ div[data-gadget-scope='erp5_searchfield'] {
} }
&::before { &::before {
margin-right: 0.4em; margin-right: @margin-size;
@media @smartphone { @media @smartphone {
float: left; float: left;
...@@ -1272,7 +1251,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1272,7 +1251,7 @@ div[data-gadget-scope='erp5_searchfield'] {
text-align: left; text-align: left;
th, td { th, td {
line-height: 1.5em; // line-height: 1.5em;
vertical-align: middle; vertical-align: middle;
} }
...@@ -1283,7 +1262,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1283,7 +1262,7 @@ div[data-gadget-scope='erp5_searchfield'] {
// XXX Same than cells // XXX Same than cells
tr { th { tr { th {
padding: 0.4em 0.25em; padding: @margin-size @half-margin-size;
}} }}
// text-align: center; // text-align: center;
...@@ -1311,7 +1290,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1311,7 +1290,7 @@ div[data-gadget-scope='erp5_searchfield'] {
@media @desktop, @tablet { @media @desktop, @tablet {
a { a {
display: block; display: block;
padding: 0.4em 0.25em; padding: @half-margin-size;
} }
} }
...@@ -1349,7 +1328,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1349,7 +1328,7 @@ div[data-gadget-scope='erp5_searchfield'] {
content: "\f0da"; content: "\f0da";
font-size: 1.25em; font-size: 1.25em;
position: absolute; position: absolute;
right: 0.5em; right: @margin-size;
top: 50%; top: 50%;
margin-top: -0.75em; margin-top: -0.75em;
...@@ -1384,7 +1363,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1384,7 +1363,7 @@ div[data-gadget-scope='erp5_searchfield'] {
tfoot .ui-controlgroup-controls { tfoot .ui-controlgroup-controls {
display: flex; display: flex;
padding-top: 0.5em; padding-top: @margin-size;
border-top: 2px solid rgba(0, 0, 0, 0.14902); border-top: 2px solid rgba(0, 0, 0, 0.14902);
span { span {
...@@ -1393,11 +1372,11 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1393,11 +1372,11 @@ div[data-gadget-scope='erp5_searchfield'] {
text-align: right; text-align: right;
} }
a { a {
padding: 0.5em; padding: @margin-size;
border: 1px solid rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius; border-radius: @radius;
margin-right: 0.5em; margin-right: @margin-size;
&:last-of-type { &:last-of-type {
margin-right: 0; margin-right: 0;
} }
...@@ -1407,15 +1386,15 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1407,15 +1386,15 @@ div[data-gadget-scope='erp5_searchfield'] {
} }
@media @smartphone { @media @smartphone {
.hide_text(@width: 2em); .hide_text(@width: initial);
} }
&::before { &::before {
margin-right: 0.4em; margin-right: @margin-size;
@media @smartphone { @media @smartphone {
float: left; float: left;
text-indent: 0.3em; text-indent: @margin-size;
} }
} }
} }
...@@ -1457,10 +1436,7 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1457,10 +1436,7 @@ div[data-gadget-scope='erp5_searchfield'] {
} }
.ui-icon-warning { .ui-icon-warning {
// XXX does not work... background-color: @coloraccent !important;
background: none repeat scroll 0 0 #e4ebf1;
border-color: rgba(0, 0, 0, 0.3);
color: #777;
&::before { &::before {
content: "\f071"; content: "\f071";
} }
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7