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
rsvp.js
jio.js
......
Gruntfile.js
View file @ e8e7bcda
......@@ -28,6 +28,7 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-open');
grunt.initConfig({
......@@ -80,6 +81,13 @@ module.exports = function (grunt) {
}
}
},
less: {
production: {
files: {
'gadget_erp5_nojqm.css': 'erp5css.less'
}
}
},
copy: {
dependencies: {
......@@ -153,7 +161,7 @@ module.exports = function (grunt) {
});
grunt.registerTask('default', ['all']);
grunt.registerTask('all', ['lint']);
grunt.registerTask('all', ['less', 'lint']);
grunt.registerTask('lint', ['jslint']);
grunt.registerTask('test', ['copy', 'qunit']);
grunt.registerTask('server', ['connect:client', 'watch']);
......
gadget_erp5_nojqm.css → erp5css.less
View file @ e8e7bcda
/**********************************************
* 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)
**********************************************/
@sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
@monospace: "Courier New", Courier, monospace;
/**********************************************
* 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/
* v2.0 | 20110126
* License: none (public domain)
**********************************************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
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;
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, 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 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
line-height: 1;
}
ol,
ul {
list-style: none;
ol, ul {
list-style: none;
}
blockquote,
q {
quotes: none;
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
}
/**********************************************
* Default
**********************************************/
@font-face {
font-family: 'FontAwesome';
src: url('font-awesome/font-awesome-webfont.eot');
......@@ -146,260 +221,310 @@ table {
font-weight: normal;
font-style: normal;
}
html {
height: 100%;
width: 100%;
display: block;
background-color: #FFFFFF;
background-color: @colorbackground;
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
box-sizing: border-box;
}
*,
*:before,
*:after {
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
width: 100%;
display: block;
color: #1F1F1F;
color: @colorforeground;
word-wrap: break-word;
}
body,
button,
input,
textarea,
select {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
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;
body, button, input, textarea, select {
font-family: @font-family;
font-size: @smartphone-font-size;
@media @tablet {
font-size: @tablet-font-size;
}
}
@media not screen and (max-width: 85em) {
body,
button,
input,
textarea,
select {
font-size: 10pt;
@media @desktop {
font-size: @desktop-font-size;
}
padding: 0;
margin: 0;
font-weight: @font-weight;
line-height: @line-height;
}
/**********************************************
* Inline elements
**********************************************/
strong {
font-weight: bold;
}
i,
cite,
em,
var,
address,
dfn {
i, cite, em, var, address, dfn {
font-style: italic;
}
strong,
b {
strong, b {
font-weight: bold;
}
u,
ins {
u, ins {
text-decoration: underline;
}
s,
strike,
del {
s, strike, del {
text-decoration: line-through;
}
sup {
vertical-align: super;
font-size: smaller;
}
sub {
vertical-align: sub;
font-size: smaller;
}
small {
font-size: smaller;
}
tt,
code,
kbd,
samp {
font-family: "Courier New", Courier, monospace;
tt, code, kbd, samp {
font-family: @monospace;
}
q {
display: inline;
&:before {
content: open-quote;
}
&:after {
content: close-quote;
}
quotes: initial;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
mark {
color: #22CC22;
color: @colortextselection;
}
/**********************************************
* Link
**********************************************/
a {
color: #2FA2E4;
.link(@ccolor) {
// XXX
color: @ccolor;
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:hover {
text-decoration: underline;
}
a:focus {
outline-offset: -2px;
outline: 2px solid #3388cc;
}
@media not screen and (max-width: 85em) {
a[accesskey]:after {
content: " (" attr(accesskey) ") ";
a {
.link(@colorlink);
@media @desktop {
// Do not display access key if not physical keyboard
&[accesskey]:after {
content: " (" attr(accesskey) ") ";
}
}
}
/**********************************************
* 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
**********************************************/
pre,
xmp,
plaintext,
listing {
pre, xmp, plaintext, listing {
display: block;
white-space: pre-wrap;
}
/**********************************************
* hr
**********************************************/
hr {
display: block;
border-style: inset;
border-width: 1px;
border-color: #FF6600;
border-width: @border-size;
border-color: @coloraccent;
}
/**********************************************
* Text fields
**********************************************/
label {
display: block;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
textarea,
select {
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea, select {
width: 100%;
padding: 3pt;
background-color: #FFFFFF;
color: #1F1F1F;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0.325em;
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,
select:focus {
outline: none;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
textarea:focus,
select:focus {
border: 1px solid #3388cc;
box-shadow: 0 0 12pt #3388cc;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):invalid,
textarea:invalid,
select:invalid {
border: 1px solid #FF6600;
}
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;
padding: @half-margin-size;
background-color: @colortextboxbackground;
color: @colortextboxforeground;
border: @border;
border-radius: @border-radius;
// 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: none;
}
&:focus {
border: @focus-border;
box-shadow: @focus-box-shadow;
}
&:invalid {
border: @invalid-border;
&:focus {
box-shadow: @invalid-box-shadow;
}
}
}
// Force safari to render search input as text
// https://stackoverflow.com/questions/34802552/safari-input-type-search-reset-normalize
input[type="search"] {
-webkit-appearance: textfield;
-webkit-appearance: textfield;
}
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 {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
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 6pt top 50%;
background-size: 12pt 12pt;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
background-color: @colortextboxbackground;
padding-right: @quadruple-margin-size;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline fill-opacity='0.5' points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;
background-position: right @margin-size top 50%;
background-size: @double-margin-size @double-margin-size;
&:-moz-focusring {
// Remove outline in Firefox
// http://stackoverflow.com/a/18853002
color: transparent;
text-shadow: 0 0 0 #000;
}
}
textarea {
word-wrap: break-word;
white-space: pre-wrap;
// Fix inconsistent Textarea bottom margin in Firefox and Chrome
// http://stackoverflow.com/a/26904480
vertical-align: top;
transition: height 0.2s ease-out;
}
@media not screen and (min-width: 45em) {
textarea {
transition: height @transition-timing;
// 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;
&:focus {
height: 20em;
}
}
textarea:focus {
height: 20em;
}
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
textarea {
@media @tablet, @desktop {
min-height: 10em;
}
}
::-webkit-input-placeholder {
color: #575757;
color: @colortextboxplaceholder;
}
:-moz-placeholder {
/* Firefox 18- */
color: #575757;
:-moz-placeholder { /* Firefox 18- */
color: @colortextboxplaceholder;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #575757;
::-moz-placeholder { /* Firefox 19+ */
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;
padding: 0;
border: none;
background: transparent;
color: #1F1F1F;
/*
background:transparent;
color: @colorforeground;
&:hover, &:focus {
outline: none;
}
/*
// XXX TODO
// transition: background-color 0.2s ease-out;
&:hover, &:focus {
......@@ -412,49 +537,50 @@ button {
*/
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
**********************************************/
img,
iframe,
video,
svg {
img, iframe, video, svg {
max-width: 100%;
}
svg polyline {
stroke: #1F1F1F;
fill: none;
}
svg text {
stroke: #1F1F1F;
fill: #1F1F1F;
svg {
polyline {
stroke: @colorforeground;
fill: none;
}
text {
stroke: @colorforeground;
fill: @colorforeground;
}
}
iframe {
width: 100%;
height: 20em;
background-color: #FFFFFF;
background-color: @colorbackground;
}
img {
image-orientation: from-image;
}
/**********************************************
* Gadget: panel
**********************************************/
div[data-gadget-scope='panel'] {
background-color: #393939;
color: #FFFFFF;
width: 180pt;
background-color: @panelbackgroundcolor;
@media @smartphone, @tablet {
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
color: @white;
width: @panelwidth;
min-height: 100%;
max-height: 100%;
overflow-y: auto;
......@@ -463,154 +589,162 @@ div[data-gadget-scope='panel'] {
left: 0;
display: block;
z-index: 2000;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='panel'] {
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
@media @smartphone, @tablet {
left: -@panelwidth - @margin-size;
&.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-gadget-scope='panel'] {
left: -186pt;
div[data-role="header"] {
display: flex;
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"] {
display: flex;
justify-content: flex-start;
}
div[data-gadget-scope='panel'] div[data-role="header"] .panel_img {
text-align: center;
flex: 1;
height: 30pt;
}
div[data-gadget-scope='panel'] div[data-role="header"] button,
div[data-gadget-scope='panel'] div[data-role="header"] a {
width: 3em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
background-color: #393939;
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;
img {
text-align: left;
height: 100%;
}
div[data-gadget-scope="erp5_checkbox"] {
padding: @half-margin-size;
padding-left: @double-margin-size;
label, span, input {
cursor: pointer;
}
span {
width: @quadruple-margin-size;
display: inline-block;
}
}
.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
**********************************************/
div[data-gadget-scope='editor_panel'] {
background-color: #FFFFFF;
width: 180pt;
background-color: @colorbackground;
width: @panelwidth;
min-height: 100%;
max-height: 100%;
overflow-y: auto;
......@@ -618,966 +752,1084 @@ div[data-gadget-scope='editor_panel'] {
top: 0;
display: block;
z-index: 3000;
}
@media not screen and (max-width: 85em) {
div[data-gadget-scope='editor_panel'] {
left: -186pt;
@media @desktop {
left: -@panelwidth - @margin-size;
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(186pt, 0, 0);
&.visible {
transform: translate3d(@panelwidth + @margin-size, 0, 0);
}
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='editor_panel'] {
right: -186pt;
@media @smartphone, @tablet {
right: -@panelwidth - @margin-size;
transition: transform 200ms ease-out;
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;
}
div[data-gadget-scope='editor_panel'] div[data-role="header"] h1 {
text-align: left;
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 {
width: 3em;
overflow: hidden;
text-indent: -9999px;
/**********************************************
* Gadget: header
**********************************************/
.renderDesktopSubLink() {
div[data-role='page']:not(.desktop-panel-hidden) & {
padding-left: @sub-line-margin-size-desktop;
padding-right: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop;
}
}
.renderTabletSubLink() {
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
line-height: inherit;
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;
text-indent: -9999px;
white-space: nowrap;
&::before {
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;
float: left;
text-indent: 0;
.renderTabletNotALinkTitle() {
padding-left: @headertitlespanleftmiddlepadding;
&::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 {
position: fixed;
z-index: 1000;
text-align: center;
display: flex;
flex-flow: row wrap;
// Prevent the header to have a width higher than the screen
width: 100%;
color: #FFFFFF;
background-color: #0E81C2;
}
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header {
@media @desktop {
transition: transform 200ms ease-out;
transform: translate3d(180pt, 0, 0);
}
}
div[data-gadget-scope='header'] .ui-header button,
div[data-gadget-scope='header'] .ui-header a {
color: #FFFFFF;
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,
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-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;
transform: translate3d(@panelwidth, 0, 0);
}
color: @white;
background-color: @colorsubheaderbackground;
button, a {
color: @white;
transition: background-color @transition-timing;
&:hover, &:active {
background-color: lighten(@colorheaderbackground, 20%);
}
}
}
div[data-gadget-scope='header'] .ui-header h1 form {
height: 100%;
}
div[data-gadget-scope='header'] .ui-header h1 form button {
text-align: left;
height: 100%;
width: 100%;
}
div[data-gadget-scope='header'] .ui-header h1 a,
div[data-gadget-scope='header'] .ui-header h1 button {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-gadget-scope='header'] .ui-header h1 button::before {
display: inline-block;
width: 42pt;
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-gadget-scope='header'] .ui-header h1 button::before {
text-align: center;
.ui-controlgroup-controls {
// Left, right button next to the page title
button, a {
display: block;
@media @desktop {
background-color: @colorsubheaderbackground;
}
@media @smartphone {
background-color: @colorheaderbackground;
.hide_text();
}
transition: background-color @transition-timing;
&:hover, &:active {
background-color: lighten(@colorheaderbackground, 20%);
}
line-height: @headerheight;
@media @tablet {
.renderTabletHeaderButton();
}
&::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) {
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 button::before {
width: 12pt;
margin-left: 24pt;
margin-right: 6pt;
// 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);
}
}
}
@media not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header h1 a::before,
div[data-gadget-scope='header'] .ui-header h1 button::before {
width: 30pt;
& > .ui-btn-right {
button, a {
// background-color: #F60;
@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) {
div[data-gadget-scope='header'] .ui-header .ui-subheader {
h1 {
text-align: left;
line-height: @headerheight;
flex: 1;
}
}
@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-subheader {
flex: 1 100%;
}
}
div[data-gadget-scope='header'] .ui-header ul {
display: flex;
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header ul li {
flex: 1;
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;
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) & {
flex: 1 100%;
}
}
background-color: @colorheaderbackground;
// Restore border?
// border-left: 1px solid rgba(255, 255, 255, 0.55);
// border-right: 1px solid rgba(255, 255, 255, 0.55);
// Do not put title on multi line in case of small screen
white-space: nowrap;
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;
min-width: 5em;
.ui-subheader {
@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-content {
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);
}
}
*/
}
.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;
.renderPageSubmitButton(@backgroundcolor) {
padding: @margin-size;
margin-top: @headerheight;
margin-right: @double-margin-size;
background-color: @backgroundcolor;
color: @white;
border-radius: @radius;
border-width: 1px;
border-style: solid;
min-width: 8em;
}
.gadget-content input[type='submit']:hover,
.gadget-content input[type='submit']:focus {
background-color: #ff8533;
}
.gadget-content input[type='submit']:active {
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;
&:hover, &:focus {
background-color: lighten(@backgroundcolor, 10%);
}
&:active {
background-color: lighten(@backgroundcolor, 20%);
}
}
@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;
}
}
@media not screen and (min-width: 45em) {
.gadget-content {
padding: 6pt;
@media @smartphone {
padding: @main-margin-size-smartphone;
padding-top: 6em;
}
}
.gadget-content .field_container > div > div > div.ui-field-contain {
padding: 3pt 0;
}
.gadget-content .field_container > div > div > div.ui-field-contain 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 {
padding-top: 9pt;
}
.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div {
display: flex;
}
.gadget-content .field_container > div > div.horizontal_align_form_box .field_container > div > div {
flex: 1;
}
.gadget-content .ui-content-header-plain {
font-size: 150%;
}
.gadget-content .worklist-empty {
max-width: 442px;
/* original size of the embedded image */
width: 100%;
/* smaller screens than 442px will show full-width box */
margin: auto;
/* center with known width */
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%;
// Set the size and padding of each field inside a form
.field_container > div > div > div.ui-field-contain {
padding: @half-margin-size 0;
div {
width: 100%;
}
}
.field_container > div > div.horizontal_align_form_box {
// Class .horizontal_align_form_box is here only for backward-compatibility!
// It is used to force horizontal rendering of fields inside FormBox.
// we need to overwrite the padding above this statement
& > .ui-field-contain {
// makes field to high
padding: 0;
& > label {
padding-top: @margin-size + @half-margin-size;
}
}
.field_container > div {
// matches form-group ("left", "right" ...)
display: flex;
& > div {
flex: 1;
}
}
}
.gadget-content .right {
padding-left: 24pt;
.ui-content-header-plain {
font-size: 150%;
}
}
.gadget-content .ui-field-contain > label {
color: #767676;
}
.gadget-content .required > .ui-field-contain > label {
font-weight: bold;
}
.gadget-content .invisible > .ui-field-contain > label {
display: none;
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
.gadget-content .ui-field-contain {
display: flex;
.worklist-empty {
max-width: 442px; /* original size of the embedded image */
width: 100%; /* smaller screens than 442px will show full-width box */
margin: auto; /* center with known width */
text-align: center;
h2 {
font-size: 300%; /* copy behaviour of previously used .first-loader */
margin-bottom: 0.5em;
}
img {
width: 100%; /* height will be computed automatically and proportionally */
}
}
.gadget-content .ui-field-contain > label {
flex: 1;
ul.document-listview {
&: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) {
.gadget-content .center .ui-field-contain > label + div {
flex: 7;
//Label
.ui-field-contain {
& > label {
color: @grey;
}
}
}
.gadget-content .bottom iframe {
height: 80vh;
}
.gadget-content form .ui-field-contain {
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: '';
//Label styling in required and "invisible" field
.required > .ui-field-contain > label {
// 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
font-weight: bold;
}
}
@media not screen and (min-width: 45em) {
.gadget-content form .ui-field-contain > span {
margin-left: 6pt;
color: #FF6600;
.invisible > .ui-field-contain > label {
// used to hide the label of a formbox
display: none;
}
@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-content .ui-field-contain .ui-input-has-appendinx,
.gadget-content .ui-field-contain .ui-input-has-prependinx {
display: flex;
}
.gadget-content .ui-field-contain .ui-input-has-appendinx i,
.gadget-content .ui-field-contain .ui-input-has-prependinx i {
display: block;
padding: 3pt;
color: #777777;
font-weight: 400;
.gadget-content .ui-field-contain {
.ui-input-has-appendinx,
.ui-input-has-prependinx {
display: flex;
i {
display: block;
padding: 3pt;
color: #777777;
font-weight: 400;
}
}
}
/**********************************************
* Gadget: relation field
**********************************************/
.relation-input {
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
**********************************************/
.datetimefield {
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
**********************************************/
.floatfield p,
.integerfield p,
.floatfield input,
.integerfield input {
text-align: right;
white-space: nowrap;
.floatfield, .integerfield {
p, input {
text-align: right;
// Do not render float/integer on multiline
// as it make them unreadable
white-space: nowrap;
}
}
/**********************************************
* Listbox
**********************************************/
div[data-gadget-scope='erp5_searchfield'] {
padding-top: 6pt;
}
div[data-gadget-scope='erp5_searchfield'] .ui-input-text {
display: flex;
}
div[data-gadget-scope='erp5_searchfield'] .ui-input-text div[data-gadget-scope='input'] {
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;
padding-top: @margin-size;
.ui-input-text {
display: flex;
div[data-gadget-scope='input'] {
width: 100%;
}
}
}
.document_table table {
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;
button {
padding: @half-margin-size;
}
}
.document_table table a {
color: #1F1F1F;
}
.document_table table tbody {
animation: fadein 0.2s ease-out;
}
.document_table table tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
.document_table table tbody tr:hover,
.document_table table tbody tr:active {
background-color: #e0e0e0;
}
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
.document_table table tbody td:not(:last-child) {
border-right: 1px solid rgba(0, 0, 0, 0.14902);
div.search_parsed_value {
display: flex;
flex-direction: row;
button {
// padding: @half-margin-size;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
margin-right: @margin-size;
max-width: 6em;
// Do not put title on multi line in case of small screen
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
}
}
@media not screen and (min-width: 45em) {
.document_table table tbody tr {
display: block;
overflow: hidden;
width: 100%;
position: relative;
height: 4em;
line-height: 2em;
}
.document_table table tbody tr td *,
.document_table table tbody tr th * {
display: inline;
}
.document_table table tbody tr td:first-child,
.document_table table tbody tr th:first-child {
display: inline-block;
width: 100%;
.document_table {
.ui-table-header {
display: flex;
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
@media @smartphone {
border-bottom: 2px solid @colorheaderbackground;
}
h1 {
// XXX TODO Same color than label
color: @grey;
flex: 2;
align-self: flex-end;
// 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 {
position: absolute;
table {
width: 100%;
top: 0;
bottom: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 6pt;
}
.document_table table tbody tr td:first-child a:after,
.document_table table tbody tr th:first-child a:after {
font-family: FontAwesome;
content: "\f0da";
font-size: 1.25em;
position: absolute;
right: 6pt;
top: 50%;
margin-top: -0.75em;
background-color: #FFFFFF;
border-radius: 0.5em;
width: 1em;
text-align: center;
line-height: 1em;
}
.document_table table tbody tr td:first-child ~ th,
.document_table table tbody tr th:first-child ~ th,
.document_table table tbody tr td:first-child ~ td,
.document_table table tbody tr th:first-child ~ td {
font-size: 0.8em;
display: inline;
word-break: break-word;
}
.document_table table tbody tr td:first-child ~ th a,
.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 {
pointer-events: none;
color: #767676;
}
.document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after,
.document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after,
.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 {
content: " ~ ";
}
}
.document_table nav {
display: flex;
padding-top: 6pt;
border-top: 2px solid rgba(0, 0, 0, 0.14902);
}
.document_table nav span {
opacity: .3;
flex: 2;
text-align: right;
float: right;
}
.document_table nav a {
padding: 6pt;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
margin-right: 6pt;
}
.document_table nav a::before {
margin-right: 6pt;
}
.document_table nav a:hover,
.document_table nav a:active {
background-color: #e0e0e0;
}
.document_table nav a:last-of-type {
margin-right: 0;
}
.document_table nav a:hover,
.document_table nav a:active {
background-color: #e0e0e0;
}
@media not screen and (min-width: 45em) {
.document_table nav a {
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
text-align: left;
th, td {
// line-height: 1.5em;
vertical-align: middle;
padding: @half-margin-size;
}
thead, tfoot {
background-color: @colorheaderbackground;
color: @white;
a {
color: @white;
text-decoration: underline;
}
// XXX Same than cells
tr { th {
padding: @margin-size @half-margin-size;
}}
// text-align: center;
@media @smartphone {
display: none;
}
}
a {
color: @colorforeground;
}
tbody {
animation: fadein @transition-timing;
tr {
&:nth-child(even) {
background-color: darken(@colorbackground, 5%);
}
&:hover, &:active {
background-color: @colorblocklinkbackground
}
}
@media @desktop, @tablet {
td:not(:last-child) {
border-right: 1px solid @listboxbordercolor;
}
}
@media @smartphone {
tr {
// each row becomes a table, now block
display: block;
overflow: hidden;
width: 100%;
position: relative;
// Only 2 visible lines are visible
height: 4em;
line-height: 2em;
td, th {
* {
// Disable all block (div, p, ...)
display: inline;
}
&:first-child {
// first cell must be locked
display: inline-block;
width: 100%;
a {
// stretch first link to full width (positioned relative to <tr>)
position: absolute;
width: 100%;
top: 0;
bottom: 0;
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) {
.document_table nav a::before {
float: left;
text-indent: 6pt;
nav {
display: flex;
padding-top: @margin-size;
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
**********************************************/
div[data-gadget-scope='notification'] {
position: fixed;
z-index: 99999;
bottom: 12pt;
right: -192pt;
bottom: @double-margin-size;
right: -@panelwidth - @double-margin-size;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
}
div[data-gadget-scope='notification'].visible {
transform: translate3d(-216pt, 0, 0);
}
div[data-gadget-scope='notification'].visible .error {
animation: pulseerrormobile 1s ease-in infinite;
}
@media not screen and (max-width: 85em) {
div[data-gadget-scope='notification'].visible .error {
animation: pulseerrordesktop 1s ease-in infinite;
&.visible {
transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-desktop, 0, 0);
.error {
animation: pulseerrormobile 1s ease-in infinite;
@media @desktop {
animation: pulseerrordesktop 1s ease-in infinite;
}
}
@media @smartphone {
transform: translate3d(-@panelwidth - @double-margin-size - @main-margin-size-smartphone, 0, 0);
}
}
}
@media not screen and (min-width: 45em) {
div[data-gadget-scope='notification'].visible {
transform: translate3d(-198pt, 0, 0);
button {
text-align: left;
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 {
0% {
box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.6);
}
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 {
......@@ -1588,6 +1840,7 @@ div[data-gadget-scope='notification'] button.error {
box-shadow: 0 0 0 100pt rgba(255, 102, 0, 0);
}
}
/**********************************************
* JQM
**********************************************/
......@@ -1596,9 +1849,11 @@ div[data-gadget-scope='notification'] button.error {
cursor: default;
pointer-events: none;
}
.ui-screen-hidden {
display: none;
}
/**********************************************
* First loader
**********************************************/
......@@ -1609,171 +1864,119 @@ div[data-gadget-scope='notification'] button.error {
transform: translate(-50%, -50%);
font-size: 300%;
}
/**********************************************
* Keyframes
**********************************************/
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
from {opacity:0;}
to {opacity:1;}
}
/**********************************************
* Desktop Panel Hidden
**********************************************/
@media not screen and (max-width: 85em) {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header {
margin-left: 0;
transform: translate3d(0, 0, 0);
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span {
padding-left: 16pt;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span::before {
margin-right: 14pt;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 a::before,
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 button::before {
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);
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls button,
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls a {
background-color: #085078;
width: 8em;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-subheader {
flex: 1 100%;
text-align: center;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li {
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;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a {
display: block;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a {
padding-top: 3pt;
padding-bottom: 3pt;
line-height: inherit;
white-space: nowrap;
overflow: hidden;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a::before {
font-size: 1.2em;
display: block;
}
.desktop-panel-hidden .gadget-content {
padding-top: 7em;
}
.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);
@media @desktop {
.desktop-panel-hidden {
div[data-gadget-scope="header"] .ui-header {
margin-left: 0;
transform: translate3d(0, 0, 0);
h1 {
& > span {
.renderTabletNotALinkTitle();
}
a, button {
&::before {
text-align: center;
}
}
}
& > .ui-btn-right {
button, a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
}
.ui-controlgroup-controls {
button, a {
.renderTabletHeaderButton();
&.ui-icon-warning {
background-color: @coloraccent;
}
}
}
.ui-subheader {
flex: 1 100%;
text-align: center;
}
ul > li {
.renderTabletSubListElement();
a {
.renderTabletSubLink();
}
}
}
.gadget-content {
padding-top: 7em;
}
div[data-gadget-scope='panel'] {
transform: translate3d(-@panelwidth - @margin-size, 0, 0);
&.visible {
transform: translate3d(0, 0, 0);
}
}
}
}
/**********************************************
* Maximize
**********************************************/
div[data-gadget-scope='maximize'] button {
padding: 6pt;
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;
.button();
}
.editor-maximize div[data-gadget-scope='editor'] {
position: fixed;
z-index: 1500;
left: 0;
top: 30pt;
top: @headerheight;
width: 100vw;
height: calc(100vh - 30pt );
}
.editor-maximize div[data-gadget-scope='editor'] iframe {
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;
height: ~"calc(100vh - "@headerheight~")";
iframe {
height: 100%;
}
}
/**********************************************
* Icons
**********************************************/
.ui-btn-icon-top::before,
.ui-btn-icon-left::before,
.ui-btn-icon-right::before,
.ui-icon::before,
.ui-btn-icon-notext::before {
font-family: FontAwesome;
display: inline-block;
content: "";
}
.ui-icon-warning {
background-color: #FF6600 !important;
}
.ui-icon-warning::before {
content: "\f071";
.ui-btn-icon-top, .ui-btn-icon-left, .ui-btn-icon-right, .ui-icon, .ui-btn-icon-notext {
&::before {
font-family: FontAwesome;
display: inline-block;
content: "";
}
}
.ui-icon-spinner {
// Don't fade spinner
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
readers do not read off random characters that represent icons */
.ui-icon-glass::before {
......@@ -2106,6 +2309,9 @@ fieldset > .jsonformfield {
.ui-icon-eye-slash::before {
content: "\f070";
}
.ui-icon-warning::before {
content: "\f071";
}
.ui-icon-low-vision::before {
content: "\f2a8";
}
......@@ -2376,7 +2582,7 @@ fieldset > .jsonformfield {
content: "\f0d7";
}
.ui-icon-caret-up::before,
hmtl .ui-icon-carat-u::before {
hmtl .ui-icon-carat-u::before{
content: "\f0d8";
}
.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