mirror of
https://github.com/clearml/clearml-docs
synced 2025-06-26 18:17:44 +00:00
collapsible panel redesign (#487)
This commit is contained in:
pollfly
GitHub
41
src/components/Collapsible.js
Normal file
41
src/components/Collapsible.js
Normal file
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
|
||||
import React from 'react';
|
||||
|
||||
class Collapsible extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { open: false };
|
||||
}
|
||||
|
||||
toggle=() => {
|
||||
const { open } = this.state;
|
||||
this.setState({ open: !open });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { open } = this.state;
|
||||
const { title, children, type } = this.props;
|
||||
|
||||
return (
|
||||
<div className={`panel ${open ? "panel-open" : "panel-close"} ${type}`} >
|
||||
<button type="button" className="panel-title" onClick={this.toggle}>
|
||||
{title}
|
||||
</button>
|
||||
<div className="panel-content">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Collapsible;
|
||||
@@ -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;
|
||||
}
|
||||
20
src/theme/MDXComponents.js
Normal file
20
src/theme/MDXComponents.js
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
// Import the original mapper
|
||||
import MDXComponents from '@theme-original/MDXComponents';
|
||||
import Collapsible from '../components/Collapsible';
|
||||
|
||||
export default {
|
||||
// Re-use the default mapping
|
||||
...MDXComponents,
|
||||
// Map the "collapsible" tag to our <Collapsible /> component!
|
||||
// `Collapsible` will receive all props that were passed to `collapsible` in MDX
|
||||
Collapsible,
|
||||
};
|
||||
Reference in New Issue
Block a user