tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-09-23 01:47:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

css: Make collapsible styles work with the new markup

Browse Source
This commit is contained in:
Johannes Meyer 2019-06-06 13:58:06 +02:00
parent 618ca25aec
commit fb83bee924
2 changed files with 63 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
application/layouts/scripts/layout.phtml
View File

@ -76,10 +76,12 @@ $innerLayoutScript = $this->layout()->innerLayout . '.phtml';
} }
}()); }());
</script> </script>
<button id="collapsible-control-ghost" title="<?= $this->translate('Collapse') ?>" aria-label="<?= t('Collapse') ?>" class="collapsible-control"> <div id="collapsible-control-ghost" class="collapsible-control">
<i class="icon-angle-double-down"></i> <button>
<i class="icon-angle-double-up"></i> <?= $this->icon('angle-double-down', $this->translate('Expand'), ['class' => 'expand-icon']) ?>
</button> <?= $this->icon('angle-double-up', $this->translate('Collapse'), ['class' => 'collapse-icon']) ?>
</button>
</div>
<!--[if lt IE 10]> <!--[if lt IE 10]>
<iframe id="fileupload-frame-target" name="fileupload-frame-target"></iframe> <iframe id="fileupload-frame-target" name="fileupload-frame-target"></iframe>
<![endif]--> <![endif]-->

113
public/css/icinga/main.less
View File

@ -228,69 +228,14 @@ a:hover > .icon-cancel {
} }
// Collapsible Control // Collapsible Control
.collapsible-table-container {
&.collapsed.has-collapsible .collapsible {
overflow: hidden;
max-height: 8em;
}
}
.collapsible-container,
.collapsible-table-container {
&.collapsed:not(.has-collapsible),
&.collapsed.has-collapsible .collapsible {
overflow: hidden;
max-height: 96px;
}
&.collapsed:not(.has-collapsible) {
.collapsible-control {
bottom: 4px;
}
}
}
.collapsible-container,
.collapsible-table-container {
position: relative;
.table-wrapper {
overflow: hidden;
}
.collapsed .table-wrapper {
overflow: hidden;
max-height: 12em;
}
}
.collapsible-control > i:before {
margin-right: 0;
}
#collapsible-control-ghost { #collapsible-control-ghost {
display: none; display: none;
} }
.collapsible-control > .icon-angle-double-down {
display: none;
}
.collapsible-control > .icon-angle-double-up {
display: block;
}
.collapsed {
.collapsible-control > .icon-angle-double-up {
display: none;
}
.collapsible-control > .icon-angle-double-down {
display: block;
}
}
.collapsible-control { .collapsible-control {
position: relative;
button {
.rounded-corners(50%); .rounded-corners(50%);
background: @gray-lighter; background: @gray-lighter;
@ -305,14 +250,48 @@ a:hover > .icon-cancel {
-webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
-moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3); -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
box-shadow: 0 0 1/3em rgba(0,0,0,.3); box-shadow: 0 0 1/3em rgba(0,0,0,.3);
&:hover:before {
content: "";
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
background: fade(@text-color, 10);
.rounded-corners(50%);
}
}
} }
.collapsible { .collapsible.can-collapse:not(.collapsed) + .collapsible-control button {
> i.expand-icon {
display: none;
}
> i.collapse-icon {
display: unset;
}
}
.collapsible.collapsed + .collapsible-control button {
> i.expand-icon {
display: unset;
}
> i.collapse-icon {
display: none;
}
}
// Collapsibles
.collapsible.collapsed {
position: relative; position: relative;
} overflow: hidden;
.collapsed .collapsible:before, &:before {
:not(.has-collapsible).collapsed:before {
content: ""; content: "";
display: block; display: block;
height: 2em; height: 2em;
@ -322,13 +301,5 @@ a:hover > .icon-cancel {
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
} }
.collapsible-control:hover:before {
content: "";
display: block;
position: absolute;
top: -2px; right: -2px; bottom: -2px; left: -2px;
background: fade(@text-color, 10);
.rounded-corners(50%);
} }