tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-23 22:04:25 +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]-->

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

@ -228,107 +228,78 @@ 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 { .collapsible-control {
display: none; 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 { .collapsible.can-collapse:not(.collapsed) + .collapsible-control button {
display: block; > i.expand-icon {
}
.collapsed {
.collapsible-control > .icon-angle-double-up {
display: none; display: none;
} }
.collapsible-control > .icon-angle-double-down { > i.collapse-icon {
display: block; display: unset;
} }
} }
.collapsible-control { .collapsible.collapsed + .collapsible-control button {
.rounded-corners(50%); > i.expand-icon {
display: unset;
}
background: @gray-lighter; > i.collapse-icon {
color: @gray; display: none;
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);
} }
.collapsible { // 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; background: linear-gradient(rgba(255,255,255,0), white);
background: linear-gradient(rgba(255,255,255,0), white); position: absolute;
position: absolute; bottom: 0;
bottom: 0; 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%);
} }