backoffice: import custom style from gadjo (#49779)

This commit is contained in:
Frédéric Péters 2020-12-29 20:30:08 +01:00
parent d2aff90e9a
commit 30559d6de8
2 changed files with 137 additions and 66 deletions

View File

@ -100,24 +100,22 @@ def get_vc_version():
def command_icon(url, type, label=None, popup=False):
labels = {
'add': N_('Add'),
'edit': N_('Edit'),
'remove': N_('Remove'),
'duplicate': N_('Duplicate'),
'view': N_('View'),
'previous': N_('Previous'),
'next': N_('Next'),
'export': N_('Export'),
'email': N_('Email'),
}
if not label:
label = _(labels[str(type)])
}
if label:
klass = 'button'
else:
klass = ''
label = _(labels[type])
root_url = get_publisher().get_application_static_files_root_url()
rel = ''
if popup:
rel = 'popup'
return htmltext('''<span class="%(type)s">
<a href="%(url)s" rel="%(rel)s" title="%(label)s">%(label)s</a>
<a href="%(url)s" class="%(klass)s" rel="%(rel)s" title="%(label)s">%(label)s</a>
</span>''') % locals()

View File

@ -1,9 +1,17 @@
#sidepage span#applabel {
visibility: visible;
$primary-color: #386ede;
$secondary-color: #00d6eb;
$string-color: str-slice($primary-color + '', 2);
$actions: add, duplicate, edit, remove;
%block {
background: white;
padding: 0.5rem;
border-radius: 3px;
box-sizing: border-box;
}
p.commands a {
border: 0;
#sidepage span#applabel {
visibility: visible;
}
ul.biglist {
@ -58,18 +66,6 @@ ul.biglist li .details .varname {
font-size: 90%;
}
ul.biglist li p.commands,
li.biglistitem p.commands {
float: right;
margin: 0;
font-size: 80%;
}
ul.biglist li p.commands img,
li.biglistitem p.commands img {
padding-right: 5px;
}
ul.biglist code {
font-size: 80%;
}
@ -115,16 +111,6 @@ ul.biglist li.disabled strong {
font-weight: normal;
}
ul.biglist li p.commands {
display: block;
float: none;
margin: 0;
position: absolute;
top: 1ex;
right: 0px;
}
ul.biglist.sortable li span.handle + strong a {
width: calc(100% - 2em - 1ex);
}
@ -753,10 +739,6 @@ ul.biglist.sortable a {
box-sizing: border-box;
}
ul.biglist.sortable p.commands a {
width: auto;
}
ul.biglist li > a,
ul.biglist strong a {
display: block;
@ -797,16 +779,12 @@ div.bo-block ul.biglist p.details.badge {
color: white;
}
div.bo-block ul.biglist li.hidden-status:hover,
ul.biglist.sortable li:hover,
ul.biglist a:hover {
ul.biglist a:hover,
div.bo-block ul.biglist li.hidden-status:hover {
background: #ccc;
}
ul.biglist.sortable li:hover a:hover {
background: transparent;
}
div.bo-block span.disabled a {
color: #666;
text-decoration: none;
@ -1024,17 +1002,6 @@ h4.foldable.folded:after {
transform: rotate(-90deg);
}
ul.biglist li p.commands span {
border: 1px solid #b7b7b7;
border-radius: 1px;
color: #424258;
padding: 1ex 2ex;
text-decoration: none;
background: #aaaaaa;
background-image: linear-gradient(to bottom, #f9f9f9, #eeeeee);
box-shadow: 0 2px 2px 0px #ddd;
}
div.ComputedExpressionWidget div.content input[type=text],
div.ConditionWidget div.content input[type=text] {
margin: 0;
@ -1273,16 +1240,6 @@ div#form-diff div#legend td {
width: 100%;
}
ul.biglist li p.commands span {
margin: 0 1em;
height: 100%;
padding: 3px 1em;
float: left;
line-height: 1.4em;
}
ul.biglist li p.commands span a {
color: black;
}
ul#fields-list li {
padding-right: 250px;
@ -1966,3 +1923,119 @@ ul.snapshots-list .new-day, ul.snapshots-list .has-label {
.section > h3.mail-subject span {
padding-left: 0.5rem;
}
div div.bo-block ul.biglist {
margin: -1ex;
}
div div.bo-block h3 ~ ul.biglist {
margin: 0 -1ex;
margin: 0 calc(-1ex + 1px) calc(-1ex + 1px) calc(-1ex + 1px);
}
div div.bo-block ul.biglist p.details.badge {
background: $primary-color;
}
#sidebar div#sticky-sidebar {
width: calc(100% - 2rem);
}
div#side { // w.c.s. steps in backoffice submission
@extend %block;
padding: 0;
margin-bottom: 1rem;
& + form {
background: white;
padding: 0.5rem;
border-radius: 0 0 3px 3px;
}
#steps.steps-1 {
// hide steps when there's a single one
display: none;
}
#steps ol {
background: transparent;
margin: 0.5em;
padding: 0;
span.label {
margin-left: 0.5rem;
}
.current span.marker {
background: $primary-color;
border-color: darken($primary-color, 20%);
}
}
}
#main ul#fields-list li {
padding-top: 6px;
}
#main ul.biglist li p.commands {
display: block;
float: none;
margin: 0;
position: absolute;
top: 5px;
right: 0px;
font-size: 80%;
span {
margin: 0 1em;
height: 100%;
float: left;
line-height: 1.4em;
padding: 0;
box-shadow: none;
border: none;
a.button {
line-height: inherit;
font-weight: normal;
width: auto;
}
&.view {
margin-top: 2px;
}
&.remove, &.add, &.edit, &.duplicate {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
a {
border: none;
padding: 6px;
display: inline-block;
text-indent: -10000px;
overflow: hidden;
width: 30px;
}
}
@each $action in $actions {
&.#{$action} a {
background: url(/static/css/icons/action-#{$action}.small.#{$string-color}.png) center center no-repeat;
background-size: 20px;
background-image: url(/static/css/icons/action-#{$action}.small.#{$string-color}.png),
url(/static/css/icons/action-#{$action}.hover.png);
&:hover {
background-image: url(/static/css/icons/action-#{$action}.hover.png);
}
}
}
}
}
div.form-validation form div.page {
border: none;
}
div.workflow-messages > div,
div.workflow-messages > p,
div#main-content > h2:first-child + form,
div.form-validation form {
@extend %block;
}
div.buttons > div.widget {
margin-right: 1rem;
}