Skip to content

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