You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
2.7 KiB
125 lines
2.7 KiB
|
|
.expansion-panels {
|
|
flex: 0 1 auto;
|
|
position: relative;
|
|
max-width: 100%;
|
|
transition: .3s cubic-bezier(.25,.8,.5,1);
|
|
border-radius: var(--default-borderradius);
|
|
|
|
&.expansion-panels-square {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
&.expansion-panels-borders {
|
|
& .expand-panel {
|
|
border-bottom: 1px solid var(--palette-lines-default);
|
|
}
|
|
}
|
|
}
|
|
|
|
.expand-panel {
|
|
flex: 1 0 100%;
|
|
max-width: 100%;
|
|
position: relative;
|
|
transition: margin .3s cubic-bezier(.25,.8,.5,1);
|
|
transition-delay: 100ms;
|
|
color: var(--palette-text-primary);
|
|
background-color: var(--palette-surface);
|
|
|
|
&.expand-panel-border {
|
|
border-bottom: 1px solid var(--palette-lines-default);
|
|
}
|
|
|
|
&:first-child {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
}
|
|
|
|
&.panel-expanded {
|
|
margin: 16px 0;
|
|
border-radius: inherit;
|
|
border-bottom: none;
|
|
transition-delay: 0ms;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + .expand-panel {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
}
|
|
}
|
|
|
|
&.panel-next-expanded {
|
|
border-bottom: none;
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
}
|
|
|
|
& .expand-panel-header {
|
|
width: 100%;
|
|
align-items: center;
|
|
display: flex;
|
|
font-size: .9375rem;
|
|
line-height: 1;
|
|
min-height: 48px;
|
|
outline: none;
|
|
padding: 16px 24px;
|
|
position: relative;
|
|
transition: min-height .3s cubic-bezier(.25,.8,.5,1);
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
& .expand-panel-text {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
& .expand-panel-icon {
|
|
transition: .3s cubic-bezier(.25,.8,.5,1),visibility 0s;
|
|
|
|
&.transform {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
& .expand-panel-content {
|
|
padding: 0 24px 16px;
|
|
flex: 1 1 auto;
|
|
max-width: 100%;
|
|
|
|
&.expand-panel-gutters {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
&.expand-panel-dense {
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.disabled {
|
|
& > .expand-panel-header {
|
|
color: var(--palette-text-disabled);
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
} |