ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-06-26 18:17:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

collapsible panel redesign (#487)

Browse Source
This commit is contained in:
pollfly
2023-02-22 12:29:36 +02:00
committed by GitHub
parent db692908ff
commit ca60eaf36b
15 changed files with 253 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/css/custom.css
View File

@@ -666,88 +666,6 @@ html[data-theme="light"] .icon {
left: calc(50% - 10px);
}
/* expansion panel */
.cml-expansion-panel {
position: relative;
padding: 0 0 0 40px !important;
background-color: var(--ifm-toc-background-color);
/*border-left: 4px solid transparent;*/
border-radius: 4px;
transition: border-left 0.4s ease;
border: none !important;
}
div[class^="collapsibleContent"] {
margin: 0 !important;
padding: 0 !important;
border-top: none !important;
}
.cml-expansion-panel-summary {
outline: none;
color: #8f9dc9;
padding: 8px 24px 8px 32px;
line-height: 1.6rem;
cursor: pointer;
position: relative;
transition: color 0.4s ease;
}
.cml-expansion-panel-summary:before {
content:"";
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 24px;
line-height: 16px;
position: absolute;
left: -40px !important;
top: 4px !important;
background-color: var(--ifm-toc-background-color);
background-repeat: no-repeat;
background-position: center;
transform: rotate(0deg) !important;
}
.cml-expansion-panel-summary:after {
content:"";
position: absolute;
right: 12px;
top: 8px;
width: 24px;
height: 24px;
transform: rotate(0);
transition: 0.25s;
background: url('/icons/ico-chevron-down.svg') no-repeat center;
}
/* expansion content */
.cml-expansion-panel-content {
padding:16px;
}
/* icon types */
/* -> info */
.cml-expansion-panel.info .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-info-circle.svg') !important;
}
/* -> tips */
.cml-expansion-panel.tips .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-tips.svg') !important;
}
/* -> alert */
.cml-expansion-panel.alert .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-alert.svg');
}
/* -> screenshot */
.cml-expansion-panel.screenshot .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-image.svg');
}
/* -> configuration */
.cml-expansion-panel.configuration .cml-expansion-panel-summary:before {
background-image: url('/icons/ico-config.svg');
}
/* light mode */
html[data-theme="light"] .cml-expansion-panel[open] {
@@ -858,4 +776,128 @@ html[data-theme="dark"] .alert.alert--secondary {
.markdown .img-swt {
margin-bottom: 2.4rem;
}
/* PANEL COLLAPSIBLE */
.panel {
margin-bottom: 12px;
padding: 0;
border: 1px solid;
border-radius: var(--ifm-global-radius);
box-shadow: none;
overflow: hidden;
}
/* PANEL COLORS */
.panel.info {
background-color: var(--ifm-color-info-contrast-background);
border-color: var(--ifm-color-info-lightest);
}
html[data-theme="dark"] .panel.info {
border-color: var(--ifm-color-info-darkest);
}
.panel.tips {
background-color: var(--ifm-color-success-contrast-background);
border-color: var(--ifm-color-success-dark);
}
.panel.alert {
background-color: var(--ifm-color-warning-contrast-background);
border-color: var(--ifm-color-warning-dark);
}
.panel.screenshot {
background-color: var(--ifm-color-gray-100);
border-color: var(--ifm-color-gray-600);
}
html[data-theme="dark"] .panel.screenshot {
background-color: var(--ifm-toc-background-color);
border-color: rgba(255,255,255,0.1);
}
.panel.configuration {
background-color: var(--ifm-color-gray-100);
border-color: var(--ifm-color-gray-600);
}
html[data-theme="dark"] .panel.configuration {
background-color: var(--ifm-toc-background-color);
border-color: rgba(255,255,255,0.1);
}
/* PANEL TITLE */
.panel-title {
display: flex;
align-items: center;
width: 100%;
margin: 0;
padding: 12px;
position: relative;
cursor: pointer;
font-size: 16px;
text-align: left;
background-color: inherit;
border: none;
color: var(--ifm-font-color-base);
}
.panel-title:after {
content:"";
position: absolute;
right: 12px;
top: calc(50% - 12px);
width: 24px;
height: 24px;
transform: rotate(0);
transition: transform 0.35s;
background: url('/icons/ico-chevron-down.svg') no-repeat center;
}
.panel-open .panel-title:after {
transform: rotate(-180deg);
}
/* PANEL CONTENT */
.panel-content {
padding: 12px 40px;
max-height: unset;
overflow: hidden;
transition: padding 0.35s;
}
.panel-close .panel-content {
padding: 0 40px;
max-height: 0;
}
/* PANEL ICONS */
/* info */
.panel.info .panel-title:before {
background-image: url('/icons/ico-info-circle.svg');
}
/* tips */
.panel.tips .panel-title:before {
background-image: url('/icons/ico-tips.svg');
}
/* alert */
.panel.alert .panel-title:before {
background-image: url('/icons/ico-alert.svg');
}
/* screenshot */
.panel.screenshot .panel-title:before {
background-image: url('/icons/ico-image.svg');
}
/* configuration */
.panel.configuration .panel-title:before {
background-image: url('/icons/ico-config.svg');
}
/* panel icon generic style */
.panel-title:before {
content:"";
display: flex;
align-items: center;
justify-content: center;
margin-right: 6px;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}