Skip to content

R
rjs_json_form
Commit e8e7bcda authored by Boris Kocherov's avatar Boris Kocherov
Browse files
Options

use erp5css.less instead gadget_erp5_nojqm.css

parent 19435529
Hide whitespace changes
Inline Side-by-side
Showing with 3390 additions and 1 deletion
.gitignore
View file @ e8e7bcda
gadget_erp5_nojqm.css
renderjs.js renderjs.js
rsvp.js rsvp.js
jio.js jio.js
......
Gruntfile.js
View file @ e8e7bcda
...@@ -28,6 +28,7 @@ module.exports = function (grunt) { ...@@ -28,6 +28,7 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-open'); grunt.loadNpmTasks('grunt-open');
grunt.initConfig({ grunt.initConfig({
...@@ -80,6 +81,13 @@ module.exports = function (grunt) { ...@@ -80,6 +81,13 @@ module.exports = function (grunt) {
} }
} }
}, },
less: {
production: {
files: {
'gadget_erp5_nojqm.css': 'erp5css.less'
}
}
},
copy: { copy: {
dependencies: { dependencies: {
...@@ -153,7 +161,7 @@ module.exports = function (grunt) { ...@@ -153,7 +161,7 @@ module.exports = function (grunt) {
}); });
grunt.registerTask('default', ['all']); grunt.registerTask('default', ['all']);
grunt.registerTask('all', ['lint']); grunt.registerTask('all', ['less', 'lint']);
grunt.registerTask('lint', ['jslint']); grunt.registerTask('lint', ['jslint']);
grunt.registerTask('test', ['copy', 'qunit']); grunt.registerTask('test', ['copy', 'qunit']);
grunt.registerTask('server', ['connect:client', 'watch']); grunt.registerTask('server', ['connect:client', 'watch']);
......
gadget_erp5_nojqm.css → erp5css.less
View file @ e8e7bcda
/********************************************** /**********************************************
* Colors * Colors
**********************************************/ **********************************************/
@black: #1F1F1F;
@txtorange: #FF6600;
@txtblue: #2FA2E4;
@white: #FFFFFF;
@txtgreen: #22CC22;
@txtsubgrey: #575757;
@grey: #767676;
@backgroundgreen: #37A419;
// Default background for pages and other controls
@colorbackground: @white;
// Default foreground and border color
@colorforeground: @black;
@colortextselection: @txtgreen;
// Foreground color to single-out items of interest
@coloraccent: @txtorange;
@colorlink: @txtblue;
@colortextboxforeground: @colorforeground;
@colortextboxplaceholder: @txtsubgrey;
@colortextboxbackground: @colorbackground;
@colorheaderbackground: #085078;
@colorsubheaderbackground: #0E81C2;
@colorsubheaderlink: #f8fff3;
@colorfocus: #3388cc;
@colorblocklinkbackground: #e0e0e0;
@paneldarkerbackgroundcolor: @black;
@panelbackgroundcolor: lighten(@paneldarkerbackgroundcolor, 10%);
@panelcontextuallinkcolor: @colorforeground;
@panelcontextuallinkcolorbackground: @colorbackground;
@listboxbordercolor: rgba(0, 0, 0, 0.14902);
@radius: .325em;
// XXX BUG Generate wrong align on firefox smartphone
@headerheight: @smartphone-font-size * 2 + @margin-size;
@headerheight-smartphone: 2 * @headerheight + @margin-size + 1;
@headerheight-tablet: 2 * @headerheight + 2 * @margin-size + 1;
@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;
@headertitlemiddlewidth: @double-margin-size;
@headertitleleftmiddlemargin: @main-margin-size-desktop;
@headertitlerightsmallmargin: @margin-size * 3 - @headertitlemiddlewidth;
@headertitlespanleftlargemargin: @double-margin-size + 2;
@headertitlespanleftsmallmargin: @margin-size;
@headertitlespanleftlargepadding: @quadruple-margin-size;
@headertitlespanleftmiddlepadding: @triple-margin-size - 2;
@headertitlespanleftsmallpadding: @double-margin-size;
// XXX desktop: 12em
@panelwidth: @margin-size * 30;
// @panelwidth: 15em;
@smartphone: ~"not screen and (min-width: 45em)";
@tablet: ~"only screen and (min-width: 45em) and (max-width: 85em)";
@desktop: ~"not screen and (max-width: 85em)";
/********************************************** /**********************************************
* Fonts (font-family) * Fonts (font-family)
**********************************************/ **********************************************/
@sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
@monospace: "Courier New", Courier, monospace;
/********************************************** /**********************************************
* Shared * Shared
**********************************************/ **********************************************/
@font-family: @sans-serif;
// Increase font size to prevent IOS auto zooming when focusing input field
@smartphone-font-size: 12pt;
// Reduce font size on tablet/desktop,
// as users want to increase information's density on big screen
@tablet-font-size: 11pt;
@desktop-font-size: 10pt;
@font-weight: 400;
@line-height: 1.5;
@header-font-weight: 700;
@border-size: 1px;
@border-type: solid;
@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;
@invalid-border: @border-size @border-type @coloraccent;
@invalid-box-shadow: 0 0 @double-margin-size @coloraccent;
@quarter-margin-size: 1.5pt;
@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
///////////////////////////////////////////////
.hide_text(@width: 3em) {
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
& when (@width > 0) {
width: @width;
}
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
/********************************************** /**********************************************
* http://meyerweb.com/eric/tools/css/reset/ * http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126 * v2.0 | 20110126
* License: none (public domain) * License: none (public domain)
**********************************************/ **********************************************/
html,
body, html, body, div, span, applet, object, iframe,
div, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
span, a, abbr, acronym, address, big, cite, code,
applet, del, dfn, em, img, ins, kbd, q, s, samp,
object, small, strike, strong, sub, sup, tt, var,
iframe, b, u, i, center,
h1, dl, dt, dd, ol, ul, li,
h2, fieldset, form, label, legend,
h3, table, caption, tbody, tfoot, thead, tr, th, td,
h4, article, aside, canvas, details, embed,
h5, figure, figcaption, footer, header, hgroup,
h6, menu, nav, output, ruby, section, summary,
p, time, mark, audio, video {
blockquote, margin: 0;
pre, padding: 0;
a, border: 0;
abbr, font-size: 100%;
acronym, font: inherit;
address, vertical-align: baseline;
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, article, aside, details, figcaption, figure,
aside, footer, header, hgroup, menu, nav, section {
details, display: block;
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
ol, ol, ul {
ul { list-style: none;
list-style: none;
} }
blockquote, blockquote, q {
q { quotes: none;
quotes: none;
} }
blockquote:before, blockquote:before, blockquote:after,
blockquote:after, q:before, q:after {
q:before, content: '';
q:after { content: none;
content: '';
content: none;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
/********************************************** /**********************************************
* Default * Default
**********************************************/ **********************************************/
@font-face { @font-face {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
src: url('font-awesome/font-awesome-webfont.eot'); src: url('font-awesome/font-awesome-webfont.eot');
...@@ -146,260 +221,310 @@ table { ...@@ -146,260 +221,310 @@ table {
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
html { html {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: block; display: block;
background-color: #FFFFFF;
background-color: @colorbackground;
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
box-sizing: border-box; box-sizing: border-box;
} }
*,
*:before, *, *:before, *:after {
*:after {
box-sizing: inherit; box-sizing: inherit;
} }
body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: block; display: block;
color: #1F1F1F;
color: @colorforeground;
word-wrap: break-word; word-wrap: break-word;
} }
body,
button, body, button, input, textarea, select {
input, font-family: @font-family;
textarea, font-size: @smartphone-font-size;
select { @media @tablet {
font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: @tablet-font-size;
font-size: 12pt;
padding: 0;
margin: 0;
font-weight: 400;
line-height: 1.5;
}
@media only screen and (min-width: 45em) and (max-width: 85em) {
body,
button,
input,
textarea,
select {
font-size: 11pt;
} }
} @media @desktop {
@media not screen and (max-width: 85em) { font-size: @desktop-font-size;
body,
button,
input,
textarea,
select {
font-size: 10pt;
} }
padding: 0;
margin: 0;
font-weight: @font-weight;
line-height: @line-height;
} }
/********************************************** /**********************************************
* Inline elements * Inline elements
**********************************************/ **********************************************/
strong { strong {
font-weight: bold; font-weight: bold;
} }
i,
cite, i, cite, em, var, address, dfn {
em,
var,
address,
dfn {
font-style: italic; font-style: italic;
} }
strong,
b { strong, b {
font-weight: bold; font-weight: bold;
} }
u,
ins { u, ins {
text-decoration: underline; text-decoration: underline;
} }
s,
strike, s, strike, del {
del {
text-decoration: line-through; text-decoration: line-through;
} }
sup { sup {
vertical-align: super; vertical-align: super;
font-size: smaller; font-size: smaller;
} }
sub { sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller; font-size: smaller;
} }
small { small {
font-size: smaller; font-size: smaller;
} }
tt,
code, tt, code, kbd, samp {
kbd, font-family: @monospace;
samp {
font-family: "Courier New", Courier, monospace;
} }
q { q {
display: inline; display: inline;
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
quotes: initial; quotes: initial;
} }
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
mark { mark {
color: #22CC22; color: @colortextselection;
} }
/********************************************** /**********************************************
* Link * Link
**********************************************/ **********************************************/
a { .link(@ccolor) {
color: #2FA2E4; // XXX
color: @ccolor;
text-decoration: none; text-decoration: none;
// TODO Animate underline by using outline?
&[href=""] {
color: @colorforeground;
}
&:hover {
// This make links and button a bit different, and so,
// it is easier to know which element can open a new tab
text-decoration: underline;
}
&:focus {
// XXX TODO
outline-offset: -2px;
outline: 2px @border-type @colorfocus;
}
} }
a[href=""] {
color: #1F1F1F; a {
} .link(@colorlink);
a:hover {
text-decoration: underline; @media @desktop {
} // Do not display access key if not physical keyboard
a:focus { &[accesskey]:after {
outline-offset: -2px; content: " (" attr(accesskey) ") ";
outline: 2px solid #3388cc; }
}
@media not screen and (max-width: 85em) {
a[accesskey]:after {
content: " (" attr(accesskey) ") ";
} }
} }
/********************************************** /**********************************************
* Button * Button
**********************************************/ **********************************************/
.button() {
padding: @margin-size;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @border-radius;
&::before{
margin-right: @margin-size;
}
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
}
.beforeHeaderButton() {
margin-right: @margin-size;
text-align: center;
width: 1em;
}
/********************************************** /**********************************************
* Preformatted * Preformatted
**********************************************/ **********************************************/
pre,
xmp, pre, xmp, plaintext, listing {
plaintext,
listing {
display: block; display: block;
white-space: pre-wrap; white-space: pre-wrap;
} }
/********************************************** /**********************************************
* hr * hr
**********************************************/ **********************************************/
hr { hr {
display: block; display: block;
border-style: inset; border-style: inset;
border-width: 1px; border-width: @border-size;
border-color: #FF6600; border-color: @coloraccent;
} }
/********************************************** /**********************************************
* Text fields * Text fields
**********************************************/ **********************************************/
label { label {
display: block; display: block;
} }
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 {
select {
width: 100%; width: 100%;
padding: 3pt;
background-color: #FFFFFF; padding: @half-margin-size;
color: #1F1F1F;
border: 1px solid rgba(0, 0, 0, 0.3); background-color: @colortextboxbackground;
border-radius: 0.325em; color: @colortextboxforeground;
transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
} border: @border;
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):active, border-radius: @border-radius;
textarea:active,
select:active, // BUG: transition is not triggered if there is a default box-shadow
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus, // probably a chrome bug. Disable for now.
textarea:focus, // box-shadow: @box-shadow;
select:focus { transition : border @transition-timing, box-shadow @transition-timing;
outline: none;
} &:active, &:focus {
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus, outline: none;
textarea:focus, }
select:focus { &:focus {
border: 1px solid #3388cc; border: @focus-border;
box-shadow: 0 0 12pt #3388cc; box-shadow: @focus-box-shadow;
} }
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):invalid, &:invalid {
textarea:invalid, border: @invalid-border;
select:invalid { &:focus {
border: 1px solid #FF6600; box-shadow: @invalid-box-shadow;
} }
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):invalid:focus, }
textarea:invalid:focus,
select:invalid:focus {
box-shadow: 0 0 12pt #FF6600;
} }
// Force safari to render search input as text
// https://stackoverflow.com/questions/34802552/safari-input-type-search-reset-normalize
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
} }
input[type="search"]::-webkit-search-decoration { input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
// http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
select { select {
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background-image: none; background-image: none;
background-color: #FFFFFF; background-color: @colortextboxbackground;
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; padding-right: @quadruple-margin-size;
background-position: right 6pt top 50%; 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-size: 12pt 12pt; background-position: right @margin-size top 50%;
} background-size: @double-margin-size @double-margin-size;
select:-moz-focusring {
color: transparent; &:-moz-focusring {
text-shadow: 0 0 0 #000; // Remove outline in Firefox
} // http://stackoverflow.com/a/18853002
color: transparent;
text-shadow: 0 0 0 #000;
}
}
textarea { textarea {
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
// Fix inconsistent Textarea bottom margin in Firefox and Chrome
// http://stackoverflow.com/a/26904480
vertical-align: top; vertical-align: top;
transition: height 0.2s ease-out;
} transition: height @transition-timing;
@media not screen and (min-width: 45em) {
textarea { // On smartphone, display the textarea small
// and increase its size when focused
// This behaviour should not be activated on bigscreen,
// as it make it unusable (difficult to search text for example)
@media @smartphone {
height: 4em; height: 4em;
&:focus {
height: 20em;
}
} }
textarea:focus { @media @tablet, @desktop {
height: 20em;
}
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
textarea {
min-height: 10em; min-height: 10em;
} }
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: #575757; color: @colortextboxplaceholder;
} }
:-moz-placeholder {
/* Firefox 18- */ :-moz-placeholder { /* Firefox 18- */
color: #575757; color: @colortextboxplaceholder;
} }
::-moz-placeholder {
/* Firefox 19+ */ ::-moz-placeholder { /* Firefox 19+ */
color: #575757; color: @colortextboxplaceholder;
} }
:-ms-input-placeholder {
color: #575757; :-ms-input-placeholder {
color: @colortextboxplaceholder;
} }
input[type=submit],
button { input[type=submit], button {
&::-moz-focus-inner {
border : 0px;
padding: 0px;
}
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background:transparent;
color: #1F1F1F; color: @colorforeground;
/*
&:hover, &:focus {
outline: none;
}
/*
// XXX TODO // XXX TODO
// transition: background-color 0.2s ease-out; // transition: background-color 0.2s ease-out;
&:hover, &:focus { &:hover, &:focus {
...@@ -412,49 +537,50 @@ button { ...@@ -412,49 +537,50 @@ button {
*/ */
cursor: pointer; cursor: pointer;
} }
input[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border: 0px;
padding: 0px;
}
input[type=submit]:hover,
button:hover,
input[type=submit]:focus,
button:focus {
outline: none;
}
/********************************************** /**********************************************
* Media * Media
**********************************************/ **********************************************/
img,
iframe, img, iframe, video, svg {
video,
svg {
max-width: 100%; max-width: 100%;
} }
svg polyline {
stroke: #1F1F1F; svg {
fill: none; polyline {
} stroke: @colorforeground;
svg text { fill: none;
stroke: #1F1F1F; }
fill: #1F1F1F; text {
stroke: @colorforeground;
fill: @colorforeground;
}
} }
iframe { iframe {
width: 100%; width: 100%;
height: 20em; height: 20em;
background-color: #FFFFFF; background-color: @colorbackground;
} }
img { img {
image-orientation: from-image; image-orientation: from-image;
} }
/********************************************** /**********************************************
* Gadget: panel * Gadget: panel
**********************************************/ **********************************************/
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
background-color: #393939;
color: #FFFFFF; background-color: @panelbackgroundcolor;
width: 180pt;
@media @smartphone, @tablet {
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
color: @white;
width: @panelwidth;
min-height: 100%; min-height: 100%;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
...@@ -463,154 +589,162 @@ div[data-gadget-scope='panel'] { ...@@ -463,154 +589,162 @@ div[data-gadget-scope='panel'] {
left: 0; left: 0;
display: block; display: block;
z-index: 2000; z-index: 2000;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { @media @smartphone, @tablet {
div[data-gadget-scope='panel'] { left: -@panelwidth - @margin-size;
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15); &.visible {
transform: translate3d(@panelwidth + @margin-size, 0, 0);
}
} }
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { div[data-role="header"] {
div[data-gadget-scope='panel'] { display: flex;
left: -186pt; justify-content: flex-start;
.panel_img {
text-align: center;
flex: 1;
height: @headerheight;
}
button, a {
.hide_text();
background-color: @panelbackgroundcolor;
&::before {
float: left;
text-indent: 0;
margin-left: @double-margin-size;
}
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) &[data-i18n="Close"] {
display: none;
}
}
display: block;
line-height: @headerheight;
color: @white;
}
} }
div[data-gadget-scope='panel'].visible {
transform: translate3d(186pt, 0, 0); div[data-gadget-scope='erp5_searchfield'] {
padding: @half-margin-size @double-margin-size;
button {
color: @white;
}
input[type="search"] {
color: @white !important;
background-color: @grey !important;
}
} }
}
div[data-gadget-scope='panel'] div[data-role="header"] { img {
display: flex; text-align: left;
justify-content: flex-start; height: 100%;
} }
div[data-gadget-scope='panel'] div[data-role="header"] .panel_img {
text-align: center; div[data-gadget-scope="erp5_checkbox"] {
flex: 1; padding: @half-margin-size;
height: 30pt; padding-left: @double-margin-size;
}
div[data-gadget-scope='panel'] div[data-role="header"] button, label, span, input {
div[data-gadget-scope='panel'] div[data-role="header"] a { cursor: pointer;
width: 3em; }
overflow: hidden;
text-indent: -9999px; span {
white-space: nowrap; width: @quadruple-margin-size;
background-color: #393939; display: inline-block;
display: block; }
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: 12pt;
}
@media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"],
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
display: none;
} }
.alignwithicon() {
padding: @quarter-margin-size;
padding-left: @double-margin-size;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&::before {
// Use width instead of padding-right
// To keep text aligned
width: @quadruple-margin-size;
}
}
.alignwithouticon() {
.alignwithicon();
padding-left: @double-margin-size + @quadruple-margin-size;
}
.linkpanel(@linkpanelhovercolor: @white, @linkpanelhoverbackgroundcolor: @paneldarkerbackgroundcolor) {
color: @white;
display: block;
// Define .active before :hover to ensure it hover is displayed
// for the .active entry
&.active {
color: @panelcontextuallinkcolor;
background-color: @panelcontextuallinkcolorbackground;
}
&:hover, &:active {
color: @linkpanelhovercolor;
background-color: @linkpanelhoverbackgroundcolor;
}
}
ul {
&:first-child {
margin-top: @headerheight;
}
li {
a {
.linkpanel();
.alignwithicon();
}
}
}
dl {
background-color: @grey;
color: @black;
// Animate when content is added
transform-origin: 50% 0;
transform: scaleY(0);
&:not(:empty) {
transform: scaleY(1);
}
transition: transform @transition-timing;
dt {
.alignwithicon();
text-transform: uppercase;
}
dd {
a {
.linkpanel(@panelcontextuallinkcolor, @panelcontextuallinkcolorbackground);
.alignwithouticon();
}
}
}
} }
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] {
padding: 3pt 12pt;
}
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] button {
color: #FFFFFF;
}
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] input[type="search"] {
color: #FFFFFF !important;
background-color: #767676 !important;
}
div[data-gadget-scope='panel'] img {
text-align: left;
height: 100%;
}
div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] {
padding: 3pt;
padding-left: 12pt;
}
div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] label,
div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] span,
div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] input {
cursor: pointer;
}
div[data-gadget-scope='panel'] div[data-gadget-scope="erp5_checkbox"] span {
width: 24pt;
display: inline-block;
}
div[data-gadget-scope='panel'] ul:first-child {
margin-top: 30pt;
}
div[data-gadget-scope='panel'] ul li a {
color: #FFFFFF;
display: block;
padding: 1.5pt;
padding-left: 12pt;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
div[data-gadget-scope='panel'] ul li a.active {
color: #1F1F1F;
background-color: #FFFFFF;
}
div[data-gadget-scope='panel'] ul li a:hover,
div[data-gadget-scope='panel'] ul li a:active {
color: #FFFFFF;
background-color: #1F1F1F;
}
div[data-gadget-scope='panel'] ul li a::before {
width: 24pt;
}
div[data-gadget-scope='panel'] dl {
background-color: #767676;
color: #1F1F1F;
transform-origin: 50% 0;
transform: scaleY(0);
transition: transform 0.2s ease-out;
}
div[data-gadget-scope='panel'] dl:not(:empty) {
transform: scaleY(1);
}
div[data-gadget-scope='panel'] dl dt {
padding: 1.5pt;
padding-left: 12pt;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
div[data-gadget-scope='panel'] dl dt::before {
width: 24pt;
}
div[data-gadget-scope='panel'] dl dd a {
color: #FFFFFF;
display: block;
padding: 1.5pt;
padding-left: 12pt;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-left: 36pt;
}
div[data-gadget-scope='panel'] dl dd a.active {
color: #1F1F1F;
background-color: #FFFFFF;
}
div[data-gadget-scope='panel'] dl dd a:hover,
div[data-gadget-scope='panel'] dl dd a:active {
color: #1F1F1F;
background-color: #FFFFFF;
}
div[data-gadget-scope='panel'] dl dd a::before {
width: 24pt;
}
/********************************************** /**********************************************
* Gadget: editor panel * Gadget: editor panel
**********************************************/ **********************************************/
div[data-gadget-scope='editor_panel'] { div[data-gadget-scope='editor_panel'] {
background-color: #FFFFFF;
width: 180pt; background-color: @colorbackground;
width: @panelwidth;
min-height: 100%; min-height: 100%;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
...@@ -618,966 +752,1084 @@ div[data-gadget-scope='editor_panel'] { ...@@ -618,966 +752,1084 @@ div[data-gadget-scope='editor_panel'] {
top: 0; top: 0;
display: block; display: block;
z-index: 3000; z-index: 3000;
}
@media not screen and (max-width: 85em) { @media @desktop {
div[data-gadget-scope='editor_panel'] { left: -@panelwidth - @margin-size;
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); &.visible {
} transform: translate3d(@panelwidth + @margin-size, 0, 0);
div[data-gadget-scope='editor_panel'].visible { }
transform: translate3d(186pt, 0, 0); box-shadow: 5px 0 5px rgba(0,0,0,.15);
} }
} @media @smartphone, @tablet {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { right: -@panelwidth - @margin-size;
div[data-gadget-scope='editor_panel'] {
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); &.visible {
transform: translate3d(-@panelwidth - @margin-size, 0, 0);
}
box-shadow: -5px 0 5px rgba(0,0,0,.15);
}
div[data-role="header"] {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
h1 {
text-align: left;
line-height: @headerheight;
max-height: @headerheight;
}
button, a {
.hide_text();
&::before {
float: left;
text-indent: 0;
margin-left: @double-margin-size;
}
display: block;
line-height: @headerheight;
}
} }
div[data-gadget-scope='editor_panel'].visible {
transform: translate3d(-186pt, 0, 0); section {
padding: @double-margin-size;
fieldset {
& > div {
display: inline-block;
}
label {
display: inline-block;
text-align: center;
// font-size: 0.8em;
}
input[type="radio"] {
display: inline-block;
}
}
.filter_item_container, .sort_item_container, .column_item_container {
& > div {
display: flex;
align-items: flex-start;
padding: @margin-size 0;
.filter_item, .sort_item, .column_item {
flex: 1;
}
}
}
button {
// Copy pasted from listbox buttons
padding: @half-margin-size @margin-size;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
margin-right: @margin-size;
&:last-of-type {
margin-right: 0;
}
.hide_text(@width: 2em);
&::before {
margin-right: @margin-size;
float: left;
text-indent: 0;
}
&.trash {
float: right;
}
}
} }
} }
div[data-gadget-scope='editor_panel'] div[data-role="header"] {
display: flex;
justify-content: space-between; /**********************************************
flex-direction: row-reverse; * Gadget: header
} **********************************************/
div[data-gadget-scope='editor_panel'] div[data-role="header"] h1 { .renderDesktopSubLink() {
text-align: left; div[data-role='page']:not(.desktop-panel-hidden) & {
line-height: 30pt; padding-left: @sub-line-margin-size-desktop;
max-height: 30pt; padding-right: @sub-line-margin-size-desktop;
} min-width: @sub-line-min-width-desktop;
div[data-gadget-scope='editor_panel'] div[data-role="header"] button, }
div[data-gadget-scope='editor_panel'] div[data-role="header"] a { }
width: 3em;
overflow: hidden; .renderTabletSubLink() {
text-indent: -9999px; padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
line-height: inherit;
white-space: nowrap; white-space: nowrap;
display: block;
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: 12pt;
}
div[data-gadget-scope='editor_panel'] section {
padding: 12pt;
}
div[data-gadget-scope='editor_panel'] section fieldset > div {
display: inline-block;
}
div[data-gadget-scope='editor_panel'] section fieldset label {
display: inline-block;
text-align: center;
}
div[data-gadget-scope='editor_panel'] section fieldset input[type="radio"] {
display: inline-block;
}
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 .column_item_container > div {
display: flex;
align-items: flex-start;
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,
div[data-gadget-scope='editor_panel'] section .column_item_container > div .filter_item,
div[data-gadget-scope='editor_panel'] section .filter_item_container > div .sort_item,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_item,
div[data-gadget-scope='editor_panel'] section .column_item_container > div .sort_item,
div[data-gadget-scope='editor_panel'] section .filter_item_container > div .column_item,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div .column_item,
div[data-gadget-scope='editor_panel'] section .column_item_container > div .column_item {
flex: 1;
}
div[data-gadget-scope='editor_panel'] section button {
padding: 3pt 6pt;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
margin-right: 6pt;
width: 2em;
overflow: hidden; overflow: hidden;
text-indent: -9999px; &::before {
white-space: nowrap; font-size: 1.2em;
display: block;
}
} }
div[data-gadget-scope='editor_panel'] section button:last-of-type {
margin-right: 0; .renderTabletSubListElement() {
flex: 1;
// XXX TODO Hardcoded color
border-left: 1px solid rgba(0, 0, 0, 0.55);
&:first-child {
border-left: none;
}
a {
display: block;
}
} }
div[data-gadget-scope='editor_panel'] section button::before {
margin-right: 6pt; .renderTabletNotALinkTitle() {
float: left; padding-left: @headertitlespanleftmiddlepadding;
text-indent: 0; &::before {
margin-right:@headertitlespanleftlargemargin;
}
} }
div[data-gadget-scope='editor_panel'] section button.trash {
float: right; .renderTabletHeaderButton() {
// https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
// Default size
background-color: @colorheaderbackground;
width: 8em;
} }
/**********************************************
* Gadget: header
**********************************************/
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;
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%; width: 100%;
color: #FFFFFF;
background-color: #0E81C2; @media @desktop {
}
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header {
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(180pt, 0, 0); transform: translate3d(@panelwidth, 0, 0);
} }
}
div[data-gadget-scope='header'] .ui-header button, color: @white;
div[data-gadget-scope='header'] .ui-header a { background-color: @colorsubheaderbackground;
color: #FFFFFF;
transition: background-color 0.2s ease-out; button, a {
} color: @white;
div[data-gadget-scope='header'] .ui-header button:hover, transition: background-color @transition-timing;
div[data-gadget-scope='header'] .ui-header a:hover, &:hover, &:active {
div[data-gadget-scope='header'] .ui-header button:active, background-color: lighten(@colorheaderbackground, 20%);
div[data-gadget-scope='header'] .ui-header a:active { }
background-color: #0e90d8;
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
display: block;
transition: background-color 0.2s ease-out;
line-height: 30pt;
}
@media not screen and (max-width: 85em) {
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 not screen and (min-width: 45em) {
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;
width: 3em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
}
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: 45em) and (max-width: 85em) {
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;
width: 8em;
}
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
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 not screen and (min-width: 45em) {
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: 12pt;
}
}
@media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"],
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] {
display: none;
}
}
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 not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
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 not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
padding-left: 24pt;
padding-right: 24pt;
min-width: 5em;
}
}
div[data-gadget-scope='header'] .ui-header h1 {
text-align: left;
line-height: 30pt;
flex: 1;
background-color: #085078;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 {
flex: 1 100%;
}
}
div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 24pt;
}
div[data-gadget-scope='header'] .ui-header h1 > span::before {
width: 1em;
margin-right: 6pt;
}
@media only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 16pt;
}
div[data-gadget-scope='header'] .ui-header h1 > span::before {
margin-right: 14pt;
}
}
@media not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 12pt;
}
div[data-gadget-scope='header'] .ui-header h1 > span::before {
margin-right: 6pt;
} }
}
div[data-gadget-scope='header'] .ui-header h1 form { .ui-controlgroup-controls {
height: 100%; // Left, right button next to the page title
}
div[data-gadget-scope='header'] .ui-header h1 form button { button, a {
text-align: left; display: block;
height: 100%;
width: 100%; @media @desktop {
} background-color: @colorsubheaderbackground;
div[data-gadget-scope='header'] .ui-header h1 a, }
div[data-gadget-scope='header'] .ui-header h1 button { @media @smartphone {
display: block; background-color: @colorheaderbackground;
white-space: nowrap; .hide_text();
overflow: hidden; }
text-overflow: ellipsis;
} transition: background-color @transition-timing;
div[data-gadget-scope='header'] .ui-header h1 a::before, &:hover, &:active {
div[data-gadget-scope='header'] .ui-header h1 button::before { background-color: lighten(@colorheaderbackground, 20%);
display: inline-block; }
width: 42pt;
} line-height: @headerheight;
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header h1 a::before, @media @tablet {
div[data-gadget-scope='header'] .ui-header h1 button::before { .renderTabletHeaderButton();
text-align: center; }
&::before {
@media @tablet, @desktop {
.beforeHeaderButton()
}
@media @smartphone {
float: left;
text-indent: 0;
margin-left: @double-margin-size;
}
}
div[data-role='page']:not(.desktop-panel-hidden) &[name="panel"] {
@media @desktop {
display: none;
}
}
}
} }
}
@media not screen and (max-width: 85em) { // XXX TODO: restore border to separate title from button/links
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 a::before, & > .ui-btn-left {
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 button::before { button, a {
width: 12pt; border-right: 1px solid rgba(255, 255, 255, 0.55);
margin-left: 24pt; }
margin-right: 6pt;
} }
}
@media not screen and (min-width: 45em) { & > .ui-btn-right {
div[data-gadget-scope='header'] .ui-header h1 a::before, button, a {
div[data-gadget-scope='header'] .ui-header h1 button::before { // background-color: #F60;
width: 30pt; @media @smartphone, @tablet {
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
@media @desktop {
.renderDesktopSubLink();
}
&.ui-icon-warning {
background-color: @coloraccent;
}
}
} }
}
@media not screen and (max-width: 85em) { h1 {
div[data-gadget-scope='header'] .ui-header .ui-subheader {
text-align: left; text-align: left;
line-height: @headerheight;
flex: 1; flex: 1;
} @media @desktop {
} div[data-role='page']:not(.desktop-panel-hidden) & {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { flex: 1 100%;
div[data-gadget-scope='header'] .ui-header .ui-subheader { }
flex: 1 100%; }
}
} background-color: @colorheaderbackground;
div[data-gadget-scope='header'] .ui-header ul {
display: flex; // Restore border?
} // border-left: 1px solid rgba(255, 255, 255, 0.55);
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) { // border-right: 1px solid rgba(255, 255, 255, 0.55);
div[data-gadget-scope='header'] .ui-header ul li {
flex: 1; // Do not put title on multi line in case of small screen
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;
}
}
@media only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header ul li a {
padding-top: 3pt;
padding-bottom: 3pt;
line-height: inherit;
white-space: nowrap;
overflow: hidden;
}
div[data-gadget-scope='header'] .ui-header ul li a::before {
font-size: 1.2em;
display: block;
}
}
@media not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header ul li a {
text-align: center;
vertical-align: middle;
font-size: 1.5em;
padding-top: 6pt;
padding-bottom: 6pt;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
div[data-gadget-scope='header'] .ui-header ul li a::before {
float: left;
text-indent: 0;
width: 100%;
}
}
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header ul li a {
display: block;
line-height: 30pt;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
// Title which is not a link
& > span {
padding-left: @headertitlespanleftlargepadding;
&::before {
width:1em;
margin-right:@headertitlespanleftsmallmargin;
}
@media @tablet {
.renderTabletNotALinkTitle();
}
@media @smartphone {
padding-left: @headertitlespanleftsmallpadding;
&::before {
margin-right:@headertitlespanleftsmallmargin;
}
}
}
// Clickable title and button
form {
height: 100%;
button {
text-align: left;
height: 100%;
width: 100%;
}
}
a, button {
display: block;
// Do not put link on multi line in case of small screen
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&::before {
display: inline-block;
@media @tablet, @smartphone {
text-align: center;
}
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) & {
width: @headertitlemiddlewidth;
margin-left: @headertitleleftmiddlemargin;
margin-right: @headertitlerightsmallmargin;
}
}
width: @headertitleleftlargemargin;
@media @smartphone {
width: @headertitleleftsmallmargin;
}
}
}
} }
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header ul li a {
padding-left: 24pt;
padding-right: 24pt; .ui-subheader {
min-width: 5em; @media @desktop {
text-align: left;
flex: 1;
}
@media @smartphone, @tablet {
flex: 1 100%;
}
} }
div[data-gadget-scope='header'] .ui-header ul li a::before {
display: none; ul {
display: flex;
li {
@media @tablet, @smartphone {
.renderTabletSubListElement();
}
@media @tablet {
a {
.renderTabletSubLink();
}
}
@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%;
}
}
}
@media @desktop {
a {
display: block;
.renderDesktopSubLink();
line-height: @headerheight;
white-space: nowrap;
overflow: hidden;
&::before {
.beforeHeaderButton()
}
}
}
}
} }
} }
/********************************************** /**********************************************
* Gadget: main * Gadget: main
**********************************************/ **********************************************/
.gadget-content { .renderPageSubmitButton(@backgroundcolor) {
padding: 24pt; padding: @margin-size;
padding-top: 66pt; margin-top: @headerheight;
/* margin-right: @double-margin-size;
@media @smartphone {
.ui-field-contain { background-color: @backgroundcolor;
// padding: 0.8em 0; color: @white;
// make sure there is a bottom border
// XXX TODO: border should be visible only if not input border-radius: @radius;
// XXX How to not show it on last field?
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
}
*/
}
.gadget-content div[data-gadget-scope='m'] {
animation: fadein 0.2s ease-out;
}
.gadget-content input[type='submit'] {
padding: 6pt;
margin-top: 30pt;
margin-right: 12pt;
background-color: #FF6600;
color: #FFFFFF;
border-radius: 0.325em;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
min-width: 8em; min-width: 8em;
}
.gadget-content input[type='submit']:hover, &:hover, &:focus {
.gadget-content input[type='submit']:focus { background-color: lighten(@backgroundcolor, 10%);
background-color: #ff8533; }
} &:active {
.gadget-content input[type='submit']:active { background-color: lighten(@backgroundcolor, 20%);
background-color: #ffa366;
}
.gadget-content button[name='action_update'] {
padding: 6pt;
margin-top: 30pt;
margin-right: 12pt;
background-color: #767676;
color: #FFFFFF;
border-radius: 0.325em;
border-width: 1px;
border-style: solid;
min-width: 8em;
}
.gadget-content button[name='action_update']:hover,
.gadget-content button[name='action_update']:focus {
background-color: #909090;
}
.gadget-content button[name='action_update']:active {
background-color: #a9a9a9;
}
@media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
margin-left: 180pt;
} }
} }
@media only screen and (min-width: 45em) and (max-width: 85em) {
.gadget-content { .gadget-content {
div[data-gadget-scope='m'] {
animation: fadein @transition-timing;
}
// Dialog page template main submit button
input[type='submit'] {
.renderPageSubmitButton(@coloraccent);
}
// Dialog page template update button
button[name='action_update'] {
.renderPageSubmitButton(@grey);
}
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) & {
// Keep the panel always visible
margin-left: @panelwidth;
}
}
// Top padding
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; padding-top: 7em;
} }
} @media @smartphone {
@media not screen and (min-width: 45em) { padding: @main-margin-size-smartphone;
.gadget-content {
padding: 6pt;
padding-top: 6em; padding-top: 6em;
} }
}
.gadget-content .field_container > div > div > div.ui-field-contain { // Set the size and padding of each field inside a form
padding: 3pt 0; .field_container > div > div > div.ui-field-contain {
} padding: @half-margin-size 0;
.gadget-content .field_container > div > div > div.ui-field-contain div {
width: 100%; div {
} width: 100%;
.gadget-content .field_container > div > div.horizontal_align_form_box > .ui-field-contain { }
padding: 0; }
}
.gadget-content .field_container > div > div.horizontal_align_form_box > .ui-field-contain > label { .field_container > div > div.horizontal_align_form_box {
padding-top: 9pt; // Class .horizontal_align_form_box is here only for backward-compatibility!
} // It is used to force horizontal rendering of fields inside FormBox.
.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div { // we need to overwrite the padding above this statement
display: flex; & > .ui-field-contain {
} // makes field to high
.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div > div { padding: 0;
flex: 1;
} & > label {
.gadget-content .ui-content-header-plain { padding-top: @margin-size + @half-margin-size;
font-size: 150%; }
} }
.gadget-content .worklist-empty {
max-width: 442px; .field_container > div {
/* original size of the embedded image */ // matches form-group ("left", "right" ...)
width: 100%; display: flex;
/* smaller screens than 442px will show full-width box */
margin: auto; & > div {
/* center with known width */ flex: 1;
text-align: center; }
} }
.gadget-content .worklist-empty h2 {
font-size: 300%;
/* copy behaviour of previously used .first-loader */
margin-bottom: 0.5em;
}
.gadget-content .worklist-empty img {
width: 100%;
/* height will be computed automatically and proportionally */
}
.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);
border-width: 1px;
border-style: solid;
border-bottom-style: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.gadget-content ul.document-listview li:not(.ui-li-has-count) a:after {
font-family: FontAwesome;
content: "\f0da";
text-align: right;
float: right;
position: absolute;
right: 12pt;
}
.gadget-content ul.document-listview li a {
display: block;
position: relative;
padding: 6pt 12pt;
padding-right: 24pt;
color: #222222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gadget-content ul.document-listview li a:hover,
.gadget-content ul.document-listview li a:active {
background-color: #e0e0e0;
}
.gadget-content ul.document-listview li:first-child {
border-top-left-radius: 0.325em;
border-top-right-radius: 0.325em;
}
.gadget-content ul.document-listview li:last-child {
border-bottom-left-radius: 0.325em;
border-bottom-right-radius: 0.325em;
border-bottom-style: solid;
}
.gadget-content ul.document-listview li .ui-li-count {
float: right;
padding: 0 6pt;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
position: absolute;
right: 6pt;
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
.gadget-content .left,
.gadget-content .right {
vertical-align: top;
display: inline-block;
width: 50%;
} }
.gadget-content .right {
padding-left: 24pt; .ui-content-header-plain {
font-size: 150%;
} }
} .worklist-empty {
.gadget-content .ui-field-contain > label { max-width: 442px; /* original size of the embedded image */
color: #767676; width: 100%; /* smaller screens than 442px will show full-width box */
} margin: auto; /* center with known width */
.gadget-content .required > .ui-field-contain > label { text-align: center;
font-weight: bold; h2 {
} font-size: 300%; /* copy behaviour of previously used .first-loader */
.gadget-content .invisible > .ui-field-contain > label { margin-bottom: 0.5em;
display: none; }
} img {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) { width: 100%; /* height will be computed automatically and proportionally */
.gadget-content .ui-field-contain { }
display: flex;
} }
.gadget-content .ui-field-contain > label { ul.document-listview {
flex: 1; &: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;
border-style: solid;
border-bottom-style: none;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
&:not(.ui-li-has-count) {
a {
&:after {
font-family: FontAwesome;
content: "\f0da";
text-align: right;
float: right;
position: absolute;
right: @double-margin-size;
}
}
}
a {
display: block;
position: relative;
padding: @margin-size @double-margin-size;
padding-right: @quadruple-margin-size;
color: #222222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
}
&:first-child {
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}
&:last-child {
border-bottom-left-radius: @radius;
border-bottom-right-radius: @radius;
border-bottom-style: solid;
}
.ui-li-count {
float: right;
padding: 0 @margin-size;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
position: absolute;
right: @margin-size;
}
}
} }
.gadget-content .ui-field-contain > label + div {
flex: 3; @media @tablet, @desktop {
.left, .right {
vertical-align: top;
display: inline-block;
width: 50%;
}
.right {
// Put padding only in .right, to keep .center aligned with .left
padding-left: @quadruple-margin-size;
}
} }
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) { //Label
.gadget-content .center .ui-field-contain > label + div { .ui-field-contain {
flex: 7; & > label {
color: @grey;
}
} }
} //Label styling in required and "invisible" field
.gadget-content .bottom iframe { .required > .ui-field-contain > label {
height: 80vh; // backward-compatibility: support for ERP5 field class defined in formulator configuration
} // inform user that the field is needed by contraint, but do not prevent him to save the value
.gadget-content form .ui-field-contain { font-weight: bold;
position: relative;
}
.gadget-content form .ui-field-contain > span {
animation: fadein 0.2s ease-out;
}
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
.gadget-content form .ui-field-contain > span {
background-color: #FF6600;
color: #f8fff3;
left: 25%;
position: absolute;
bottom: 110%;
white-space: pre;
padding: 6pt;
border-radius: 0.325em;
width: auto;
z-index: 1001;
}
.gadget-content form .ui-field-contain > span:before {
position: absolute;
top: 100%;
left: 2em;
display: inline-block;
border-right: 6pt solid transparent;
border-top: 6pt solid #FF6600;
border-left: 6pt solid transparent;
content: '';
} }
} .invisible > .ui-field-contain > label {
@media not screen and (min-width: 45em) { // used to hide the label of a formbox
.gadget-content form .ui-field-contain > span { display: none;
margin-left: 6pt; }
color: #FF6600;
@media @tablet, @desktop {
.ui-field-contain {
display: flex;
& > label {
flex: 1;
}
& > label + div {
flex: 3;
}
}
}
@media @tablet, @desktop {
// Align field on the left group's field
.center {
.ui-field-contain {
& > label + div {
flex: 7;
}
}
}
}
// Increase the size of the editors when placed
// in the bottom group
.bottom {
iframe {
height: 80vh;
}
}
/*
@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 .ui-field-contain {
// relative for displaying popups with errors
position: relative;
& > span {
animation: fadein @transition-timing;
@media @desktop, @tablet {
background-color: @coloraccent;
color: @colorsubheaderlink;
left: 25%;
position: absolute;
bottom: 110%;
white-space: pre;
padding: @margin-size;
border-radius: @border-radius;
width: auto;
z-index: 1001;
&:before {
position: absolute;
top: 100%;
left: 2em;
display: inline-block;
border-right: @margin-size solid transparent;
border-top: @margin-size solid @coloraccent;
border-left: @margin-size solid transparent;
content: '';
}
}
@media @smartphone {
margin-left: @margin-size;
color: @coloraccent;
}
}
} }
} }
/********************************************** /**********************************************
* Gadget: HTML5 input field * Gadget: HTML5 input field
**********************************************/ **********************************************/
.gadget-content .ui-field-contain .ui-input-has-appendinx, .gadget-content .ui-field-contain {
.gadget-content .ui-field-contain .ui-input-has-prependinx { .ui-input-has-appendinx,
display: flex; .ui-input-has-prependinx {
} display: flex;
.gadget-content .ui-field-contain .ui-input-has-appendinx i, i {
.gadget-content .ui-field-contain .ui-input-has-prependinx i { display: block;
display: block; padding: 3pt;
padding: 3pt; color: #777777;
color: #777777; font-weight: 400;
font-weight: 400; }
}
} }
/********************************************** /**********************************************
* Gadget: relation field * Gadget: relation field
**********************************************/ **********************************************/
.relation-input { .relation-input {
display: flex; display: flex;
a, button {
.hide_text(@width: @quadruple-margin-size);
&::before {
float: left;
text-indent: 0;
margin-left: @margin-size;
}
display: block;
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
}
div {
position: relative;
}
ul {
position: absolute;
display: block;
width: 100%;
z-index: 501;
li {
cursor: pointer;
background-color: @panelbackgroundcolor;
color: @white;
padding: @half-margin-size;
padding-left: @margin-size;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&::before {
padding-right: @margin-size;
}
// No transition, as it doesn't feel right
// transition: background-color @transition-timing;
&:hover, &:active {
background-color: @paneldarkerbackgroundcolor;
}
}
}
.ui-icon-warning {
color: @coloraccent;
// Link is disabled in this case
opacity: 1;
}
} }
.relation-input a,
.relation-input button {
width: 24pt;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
display: block;
padding-top: 3pt;
padding-bottom: 3pt;
}
.relation-input a::before,
.relation-input button::before {
float: left;
text-indent: 0;
margin-left: 6pt;
}
.relation-input div {
position: relative;
}
.relation-input ul {
position: absolute;
display: block;
width: 100%;
z-index: 501;
}
.relation-input ul li {
cursor: pointer;
background-color: #393939;
color: #FFFFFF;
padding: 3pt;
padding-left: 6pt;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.relation-input ul li::before {
padding-right: 6pt;
}
.relation-input ul li:hover,
.relation-input ul li:active {
background-color: #1F1F1F;
}
/********************************************** /**********************************************
* Gadget: datetime field * Gadget: datetime field
**********************************************/ **********************************************/
.datetimefield { .datetimefield {
display: flex; display: flex;
div[data-gadget-scope=INPUT] {
flex: 2;
}
div[data-gadget-scope=SELECT] {
flex: 1;
}
} }
.datetimefield div[data-gadget-scope=INPUT] {
flex: 2;
}
.datetimefield div[data-gadget-scope=SELECT] {
flex: 1;
}
/********************************************** /**********************************************
* Gadget: float/integer field * Gadget: float/integer field
**********************************************/ **********************************************/
.floatfield p, .floatfield, .integerfield {
.integerfield p, p, input {
.floatfield input, text-align: right;
.integerfield input { // Do not render float/integer on multiline
text-align: right; // as it make them unreadable
white-space: nowrap; white-space: nowrap;
}
} }
/********************************************** /**********************************************
* Listbox * Listbox
**********************************************/ **********************************************/
div[data-gadget-scope='erp5_searchfield'] { div[data-gadget-scope='erp5_searchfield'] {
padding-top: 6pt; padding-top: @margin-size;
}
div[data-gadget-scope='erp5_searchfield'] .ui-input-text { .ui-input-text {
display: flex; display: flex;
} div[data-gadget-scope='input'] {
div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='input'] { width: 100%;
width: 100%; }
}
div[data-gadget-scope='erp5_searchfield'] button {
padding: 3pt;
}
div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value {
display: flex;
flex-direction: row;
}
div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
margin-right: 6pt;
max-width: 6em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
.document_table .ui-table-header {
display: flex;
padding-top: 3pt;
padding-bottom: 3pt;
}
@media not screen and (min-width: 45em) {
.document_table .ui-table-header {
border-bottom: 2px solid #085078;
}
}
.document_table .ui-table-header h1 {
color: #767676;
flex: 2;
align-self: flex-end;
}
@media not screen and (min-width: 45em) {
.document_table .ui-table-header h1 span.listboxloader {
display: none;
}
.document_table .ui-table-header h1 span.listboxloader.ui-icon-spinner {
display: initial;
}
}
.document_table .ui-table-header button {
padding: 3pt;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
margin-right: 6pt;
}
.document_table .ui-table-header button:last-of-type {
margin-right: 0;
}
@media not screen and (min-width: 45em) {
.document_table .ui-table-header button {
width: 2em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
}
.document_table .ui-table-header button::before {
margin-right: 6pt;
}
@media not screen and (min-width: 45em) {
.document_table .ui-table-header button::before {
float: left;
text-indent: 0;
} }
} button {
.document_table table { padding: @half-margin-size;
width: 100%;
text-align: left;
}
.document_table table th,
.document_table table td {
vertical-align: middle;
padding: 3pt;
}
.document_table table thead,
.document_table table tfoot {
background-color: #085078;
color: #FFFFFF;
}
.document_table table thead a,
.document_table table tfoot a {
color: #FFFFFF;
text-decoration: underline;
}
.document_table table thead tr th,
.document_table table tfoot tr th {
padding: 6pt 3pt;
}
@media not screen and (min-width: 45em) {
.document_table table thead,
.document_table table tfoot {
display: none;
} }
} div.search_parsed_value {
.document_table table a { display: flex;
color: #1F1F1F; flex-direction: row;
} button {
.document_table table tbody { // padding: @half-margin-size;
animation: fadein 0.2s ease-out; border: 1px solid rgba(0, 0, 0, 0.14);
} border-radius: @radius;
.document_table table tbody tr:nth-child(even) {
background-color: #f2f2f2; margin-right: @margin-size;
} max-width: 6em;
.document_table table tbody tr:hover, // Do not put title on multi line in case of small screen
.document_table table tbody tr:active { white-space: nowrap;
background-color: #e0e0e0; overflow: hidden;
} text-overflow: ellipsis;
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) { -o-text-overflow: ellipsis;
.document_table table tbody td:not(:last-child) { -ms-text-overflow: ellipsis;
border-right: 1px solid rgba(0, 0, 0, 0.14902); }
} }
} }
@media not screen and (min-width: 45em) {
.document_table table tbody tr { .document_table {
display: block;
overflow: hidden; .ui-table-header {
width: 100%; display: flex;
position: relative; padding-top: @half-margin-size;
height: 4em; padding-bottom: @half-margin-size;
line-height: 2em; @media @smartphone {
} border-bottom: 2px solid @colorheaderbackground;
.document_table table tbody tr td *, }
.document_table table tbody tr th * {
display: inline; h1 {
} // XXX TODO Same color than label
.document_table table tbody tr td:first-child, color: @grey;
.document_table table tbody tr th:first-child { flex: 2;
display: inline-block; align-self: flex-end;
width: 100%;
// Hide the pagination info next to the listbox title
@media @smartphone {
span.listboxloader {
display: none;
&.ui-icon-spinner {
// Show the loader
display: initial;
}
}
}
}
button {
padding: @half-margin-size;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
margin-right: @margin-size;
&:last-of-type {
margin-right: 0;
}
@media @smartphone {
.hide_text(@width: 2em);
}
&::before {
margin-right: @margin-size;
@media @smartphone {
float: left;
text-indent: 0;
}
}
}
} }
.document_table table tbody tr td:first-child a,
.document_table table tbody tr th:first-child a { table {
position: absolute;
width: 100%; width: 100%;
top: 0; text-align: left;
bottom: 0;
overflow: hidden; th, td {
white-space: nowrap; // line-height: 1.5em;
text-overflow: ellipsis; vertical-align: middle;
padding-top: 6pt; padding: @half-margin-size;
} }
.document_table table tbody tr td:first-child a:after,
.document_table table tbody tr th:first-child a:after { thead, tfoot {
font-family: FontAwesome; background-color: @colorheaderbackground;
content: "\f0da"; color: @white;
font-size: 1.25em;
position: absolute; a {
right: 6pt; color: @white;
top: 50%; text-decoration: underline;
margin-top: -0.75em; }
background-color: #FFFFFF;
border-radius: 0.5em; // XXX Same than cells
width: 1em; tr { th {
text-align: center; padding: @margin-size @half-margin-size;
line-height: 1em; }}
}
.document_table table tbody tr td:first-child ~ th, // text-align: center;
.document_table table tbody tr th:first-child ~ th,
.document_table table tbody tr td:first-child ~ td, @media @smartphone {
.document_table table tbody tr th:first-child ~ td { display: none;
font-size: 0.8em; }
display: inline; }
word-break: break-word;
} a {
.document_table table tbody tr td:first-child ~ th a, color: @colorforeground;
.document_table table tbody tr th:first-child ~ th a, }
.document_table table tbody tr td:first-child ~ td a,
.document_table table tbody tr th:first-child ~ td a { tbody {
pointer-events: none; animation: fadein @transition-timing;
color: #767676;
} tr {
.document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after, &:nth-child(even) {
.document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after, background-color: darken(@colorbackground, 5%);
.document_table table tbody tr td:first-child ~ td:not(:last-child) a:not(:empty):after, }
.document_table table tbody tr th:first-child ~ td:not(:last-child) a:not(:empty):after { &:hover, &:active {
content: " ~ "; background-color: @colorblocklinkbackground
} }
} }
.document_table nav {
display: flex; @media @desktop, @tablet {
padding-top: 6pt; td:not(:last-child) {
border-top: 2px solid rgba(0, 0, 0, 0.14902); border-right: 1px solid @listboxbordercolor;
} }
.document_table nav span { }
opacity: .3;
flex: 2; @media @smartphone {
text-align: right; tr {
float: right; // each row becomes a table, now block
} display: block;
.document_table nav a { overflow: hidden;
padding: 6pt; width: 100%;
border: 1px solid rgba(0, 0, 0, 0.14); position: relative;
border-radius: 0.325em; // Only 2 visible lines are visible
margin-right: 6pt; height: 4em;
} line-height: 2em;
.document_table nav a::before {
margin-right: 6pt; td, th {
} * {
.document_table nav a:hover, // Disable all block (div, p, ...)
.document_table nav a:active { display: inline;
background-color: #e0e0e0; }
}
.document_table nav a:last-of-type { &:first-child {
margin-right: 0; // first cell must be locked
} display: inline-block;
.document_table nav a:hover, width: 100%;
.document_table nav a:active {
background-color: #e0e0e0; a {
} // stretch first link to full width (positioned relative to <tr>)
@media not screen and (min-width: 45em) { position: absolute;
.document_table nav a { width: 100%;
overflow: hidden; top: 0;
text-indent: -9999px; bottom: 0;
white-space: nowrap; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Reduce the gap between the first and second visible lines
padding-top: @margin-size;
&:after {
// XXX copy/pasted
font-family: FontAwesome;
content: "\f0da";
font-size: 1.25em;
position: absolute;
right: @margin-size;
top: 50%;
margin-top: -0.75em;
background-color: @colorbackground;
border-radius: 0.5em;
width: 1em;
text-align: center;
line-height: 1em;
}
}
~ th, ~ td {
// set line height on cells after first row
// First column must be more visible
font-size: 0.8em;
// Cells must be next to the other and correctly aligned
display: inline;
word-break: break-word;
a {
pointer-events: none;
// Add contrast with the first column content
color: @grey;
}
&:not(:last-child) a:not(:empty):after {
// add tide
content: " ~ ";
}
}
}
}
}
}
}
} }
}
@media not screen and (min-width: 45em) { nav {
.document_table nav a::before { display: flex;
float: left; padding-top: @margin-size;
text-indent: 6pt; border-top: 2px solid @listboxbordercolor;
span {
opacity: .3;
flex: 2;
text-align: right;
float: right;
}
a {
.button();
margin-right: @margin-size;
&:last-of-type {
margin-right: 0;
}
&:hover, &:active {
background-color: @colorblocklinkbackground;
}
@media @smartphone {
.hide_text(@width: initial);
}
&::before {
@media @smartphone {
float: left;
text-indent: @margin-size;
}
}
}
} }
} }
/********************************************** /**********************************************
* Notification * Notification
**********************************************/ **********************************************/
div[data-gadget-scope='notification'] { div[data-gadget-scope='notification'] {
position: fixed; position: fixed;
z-index: 99999; z-index: 99999;
bottom: 12pt; bottom: @double-margin-size;
right: -192pt;
right: -@panelwidth - @double-margin-size;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} &.visible {
div[data-gadget-scope='notification'].visible { transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-desktop, 0, 0);
transform: translate3d(-216pt, 0, 0); .error {
} animation: pulseerrormobile 1s ease-in infinite;
div[data-gadget-scope='notification'].visible .error { @media @desktop {
animation: pulseerrormobile 1s ease-in infinite; animation: pulseerrordesktop 1s ease-in infinite;
} }
@media not screen and (max-width: 85em) { }
div[data-gadget-scope='notification'].visible .error { @media @smartphone {
animation: pulseerrordesktop 1s ease-in infinite; transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-smartphone, 0, 0);
}
} }
}
@media not screen and (min-width: 45em) { button {
div[data-gadget-scope='notification'].visible { text-align: left;
transform: translate3d(-198pt, 0, 0); width: @panelwidth;
padding: @double-margin-size;
color: @colorsubheaderlink;
border-radius: @border-radius;
&.success {
background-color: @backgroundgreen;
}
&.error {
background-color: @coloraccent;
}
} }
} }
div[data-gadget-scope='notification'] button {
text-align: left;
width: 180pt;
padding: 12pt;
color: #f8fff3;
border-radius: 0.325em;
}
div[data-gadget-scope='notification'] button.success {
background-color: #37A419;
}
div[data-gadget-scope='notification'] button.error {
background-color: #FF6600;
}
@keyframes pulseerrormobile { @keyframes pulseerrormobile {
0% { 0% {
box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6); box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6);
} }
100% { 100% {
box-shadow: 0 0 0 12pt rgba(255, 102, 0, 0); box-shadow: 0 0 0 @double-margin-size rgba(255, 102, 0, 0);
} }
} }
@keyframes pulseerrordesktop { @keyframes pulseerrordesktop {
...@@ -1588,6 +1840,7 @@ div[data-gadget-scope='notification'] button.error { ...@@ -1588,6 +1840,7 @@ div[data-gadget-scope='notification'] button.error {
box-shadow: 0 0 0 100pt rgba(255, 102, 0, 0); box-shadow: 0 0 0 100pt rgba(255, 102, 0, 0);
} }
} }
/********************************************** /**********************************************
* JQM * JQM
**********************************************/ **********************************************/
...@@ -1596,9 +1849,11 @@ div[data-gadget-scope='notification'] button.error { ...@@ -1596,9 +1849,11 @@ div[data-gadget-scope='notification'] button.error {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
.ui-screen-hidden { .ui-screen-hidden {
display: none; display: none;
} }
/********************************************** /**********************************************
* First loader * First loader
**********************************************/ **********************************************/
...@@ -1609,171 +1864,119 @@ div[data-gadget-scope='notification'] button.error { ...@@ -1609,171 +1864,119 @@ div[data-gadget-scope='notification'] button.error {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 300%; font-size: 300%;
} }
/********************************************** /**********************************************
* Keyframes * Keyframes
**********************************************/ **********************************************/
@keyframes spin { @keyframes spin {
from { from {transform:rotate(0deg);}
transform: rotate(0deg); to {transform:rotate(360deg);}
}
to {
transform: rotate(360deg);
}
} }
@keyframes fadein { @keyframes fadein {
from { from {opacity:0;}
opacity: 0; to {opacity:1;}
}
to {
opacity: 1;
}
} }
/********************************************** /**********************************************
* Desktop Panel Hidden * Desktop Panel Hidden
**********************************************/ **********************************************/
@media not screen and (max-width: 85em) { @media @desktop {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header { .desktop-panel-hidden {
margin-left: 0; div[data-gadget-scope="header"] .ui-header {
transform: translate3d(0, 0, 0);
} margin-left: 0;
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span { transform: translate3d(0, 0, 0);
padding-left: 16pt;
} h1 {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span::before { & > span {
margin-right: 14pt; .renderTabletNotALinkTitle();
} }
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 a::before, a, button {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 button::before { &::before {
text-align: center; text-align: center;
} }
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header > .ui-btn-right button, }
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header > .ui-btn-right a { }
border-left: 1px solid rgba(255, 255, 255, 0.55);
} & > .ui-btn-right {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls button, button, a {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls a { border-left: 1px solid rgba(255, 255, 255, 0.55);
background-color: #085078; }
width: 8em; }
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-subheader { .ui-controlgroup-controls {
flex: 1 100%; button, a {
text-align: center; .renderTabletHeaderButton();
} &.ui-icon-warning {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li { background-color: @coloraccent;
flex: 1; }
border-left: 1px solid rgba(0, 0, 0, 0.55); }
} }
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li:first-child {
border-left: none; .ui-subheader {
} flex: 1 100%;
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a { text-align: center;
display: block; }
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a { ul > li {
padding-top: 3pt; .renderTabletSubListElement();
padding-bottom: 3pt; a {
line-height: inherit; .renderTabletSubLink();
white-space: nowrap; }
overflow: hidden; }
} }
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a::before { .gadget-content {
font-size: 1.2em; padding-top: 7em;
display: block; }
} div[data-gadget-scope='panel'] {
.desktop-panel-hidden .gadget-content { transform: translate3d(-@panelwidth - @margin-size, 0, 0);
padding-top: 7em; &.visible {
} transform: translate3d(0, 0, 0);
.desktop-panel-hidden div[data-gadget-scope='panel'] { }
transform: translate3d(-186pt, 0, 0); }
}
.desktop-panel-hidden div[data-gadget-scope='panel'].visible {
transform: translate3d(0, 0, 0);
} }
} }
/********************************************** /**********************************************
* Maximize * Maximize
**********************************************/ **********************************************/
div[data-gadget-scope='maximize'] button { div[data-gadget-scope='maximize'] button {
padding: 6pt; .button();
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
}
div[data-gadget-scope='maximize'] button::before {
margin-right: 6pt;
}
div[data-gadget-scope='maximize'] button:hover,
div[data-gadget-scope='maximize'] button:active {
background-color: #e0e0e0;
} }
.editor-maximize div[data-gadget-scope='editor'] { .editor-maximize div[data-gadget-scope='editor'] {
position: fixed; position: fixed;
z-index: 1500; z-index: 1500;
left: 0; left: 0;
top: 30pt; top: @headerheight;
width: 100vw; width: 100vw;
height: calc(100vh - 30pt ); height: ~"calc(100vh - "@headerheight~")";
} iframe {
.editor-maximize div[data-gadget-scope='editor'] iframe { height: 100%;
height: 100%; }
}
/**********************************************
* JSONForm
**********************************************/
fieldset > .jsonformfield {
padding-left: 0
}
.jsonformfield {
display: flex;
/*padding-left: 20px;*/
padding-top: 3px;
/*margin-left: 15px;*/
}
.jsonformfield button {
display: block;
vertical-align: top;
}
.jsonformfield .ui-btn-icon-top::before {
vertical-align: top;
}
.jsonformfield label {
word-break: keep-all;
hyphens: none;
}
.jsonformfield span {
color: rgb(94, 127, 141)
}
.jsonformfield .error {
color: #E82525;
font-weight: 600;
}
.jsonformfield input[type=number] {
text-align:right;
} }
/********************************************** /**********************************************
* Icons * Icons
**********************************************/ **********************************************/
.ui-btn-icon-top::before, .ui-btn-icon-top, .ui-btn-icon-left, .ui-btn-icon-right, .ui-icon, .ui-btn-icon-notext {
.ui-btn-icon-left::before, &::before {
.ui-btn-icon-right::before, font-family: FontAwesome;
.ui-icon::before, display: inline-block;
.ui-btn-icon-notext::before { content: "";
font-family: FontAwesome; }
display: inline-block;
content: "";
}
.ui-icon-warning {
background-color: #FF6600 !important;
}
.ui-icon-warning::before {
content: "\f071";
} }
.ui-icon-spinner { .ui-icon-spinner {
// Don't fade spinner
opacity: 1; opacity: 1;
&::before {
content: "\f110";
animation: spin .5s infinite linear;
}
} }
.ui-icon-spinner::before {
content: "\f110";
animation: spin .5s infinite linear;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */ readers do not read off random characters that represent icons */
.ui-icon-glass::before { .ui-icon-glass::before {
...@@ -2106,6 +2309,9 @@ fieldset > .jsonformfield { ...@@ -2106,6 +2309,9 @@ fieldset > .jsonformfield {
.ui-icon-eye-slash::before { .ui-icon-eye-slash::before {
content: "\f070"; content: "\f070";
} }
.ui-icon-warning::before {
content: "\f071";
}
.ui-icon-low-vision::before { .ui-icon-low-vision::before {
content: "\f2a8"; content: "\f2a8";
} }
...@@ -2376,7 +2582,7 @@ fieldset > .jsonformfield { ...@@ -2376,7 +2582,7 @@ fieldset > .jsonformfield {
content: "\f0d7"; content: "\f0d7";
} }
.ui-icon-caret-up::before, .ui-icon-caret-up::before,
hmtl .ui-icon-carat-u::before { hmtl .ui-icon-carat-u::before{
content: "\f0d8"; content: "\f0d8";
} }
.ui-icon-caret-left::before, .ui-icon-caret-left::before,
......
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