tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-04-08 17:15:08 +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>
<button id="collapsible-control-ghost" title="<?= $this->translate('Collapse') ?>" aria-label="<?= t('Collapse') ?>" class="collapsible-control">
<i class="icon-angle-double-down"></i>
<i class="icon-angle-double-up"></i>
</button>
<div id="collapsible-control-ghost" class="collapsible-control">
<button>
<?= $this->icon('angle-double-down', $this->translate('Expand'), ['class' => 'expand-icon']) ?>
<?= $this->icon('angle-double-up', $this->translate('Collapse'), ['class' => 'collapse-icon']) ?>
</button>
</div>
<!--[if lt IE 10]>
<iframe id="fileupload-frame-target" name="fileupload-frame-target"></iframe>
<![endif]-->

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

@ -228,107 +228,78 @@ a:hover > .icon-cancel {
}
// 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 {
display: none;
}
.collapsible-control > .icon-angle-double-down {
display: none;
.collapsible-control {
position: relative;
button {
.rounded-corners(50%);
background: @gray-lighter;
color: @gray;
width: 2em;
height: 2em;
z-index: 1;
position: absolute;
border: none;
bottom: -1em;
right: .25em;
-webkit-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);
&:hover:before {
content: "";
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
background: fade(@text-color, 10);
.rounded-corners(50%);
}
}
}
.collapsible-control > .icon-angle-double-up {
display: block;
}
.collapsed {
.collapsible-control > .icon-angle-double-up {
.collapsible.can-collapse:not(.collapsed) + .collapsible-control button {
> i.expand-icon {
display: none;
}
.collapsible-control > .icon-angle-double-down {
display: block;
> i.collapse-icon {
display: unset;
}
}
.collapsible-control {
.rounded-corners(50%);
.collapsible.collapsed + .collapsible-control button {
> i.expand-icon {
display: unset;
}
background: @gray-lighter;
color: @gray;
width: 2em;
height: 2em;
z-index: 1;
position: absolute;
border: none;
bottom: -1em;
right: .25em;
-webkit-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);
> i.collapse-icon {
display: none;
}
}
.collapsible {
// Collapsibles
.collapsible.collapsed {
position: relative;
}
overflow: hidden;
.collapsed .collapsible:before,
:not(.has-collapsible).collapsed:before {
content: "";
display: block;
height: 2em;
background: linear-gradient(rgba(255,255,255,0), white);
position: absolute;
bottom: 0;
left: 0;
right: 0;
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%);
&:before {
content: "";
display: block;
height: 2em;
background: linear-gradient(rgba(255,255,255,0), white);
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
}