blob: 5c3e49abbe0ef4168021a8f349a961cac665c265 [file] [log] [blame]
/*
* Copyright (c) 2014-2018 BSI Business Systems Integration AG.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
* BSI Business Systems Integration AG - initial API and implementation
*/
.group {
position: relative;
}
.group-header {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: 10px 0;
cursor: pointer;
&:focus {
outline: none;
}
&.disabled {
cursor: default;
}
&.loading {
& > .loading-indicator {
#scout.loading-indicator(16px);
left: inherit;
right: 0;
}
}
}
.group-title {
font-size: @font-size-plus;
font-weight: @font-weight-bold;
#scout.overflow-ellipsis-nowrap();
.group-header:focus > & {
color: @active-color;
text-decoration: underline;
}
}
.group-title-suffix {
margin-left: 8px;
font-size: @font-size-plus;
}
.group-icon.with-title {
margin-right: 8px;
}
.group-collapse-icon {
/* Set to same height as before element to prevent header from getting larger */
height: @font-size-large;
transition: transform 0.3s;
margin-right: 8px;
margin-top: @group-collapse-icon-margin-top; /* since icon height is reduced it needs to be moved up a little to center it again */
&::before {
#scout.font-icon();
content: @icon-angle-down;
font-size: @font-size-large;
}
&.collapsed {
#scout.transform(rotate(-90deg));
}
}
.group-header.collapse-right {
& > .group-title {
flex-grow: 1;
}
& > .group-title-suffix {
text-align: right;
}
& > .group-collapse-icon {
transition: transform 0s;
margin-right: 0;
margin-left: 8px;
margin-top: 0;
&::before {
content: @icon-angle-down;
}
&.collapsed {
#scout.transform(rotatex(180deg));
}
}
}
.group.collapse-bottom {
& > .group-header.custom-header-widget {
cursor: default;
}
& > .group-body {
margin-bottom: 0;
}
& > .group-footer {
display: flex;
.collapsible& {
cursor: pointer;
}
& > .group-collapse-border {
flex-grow: 1;
margin-top: 8px;
margin-bottom: 8px;
border-style: solid;
border-width: 0 0 1px 0;
border-color: @border-color;
}
& > .group-collapse-icon {
transition: transform 0s;
margin: 0;
&::before {
content: @icon-angle-up;
padding: 0 4px;
}
&.collapsed {
#scout.transform(rotatex(180deg));
}
}
&:hover > .group-collapse-icon::before {
color: @highlight-color;
}
}
}