### rc-dock CSS Layout and Navigation Styles

Source: https://github.com/ticlo/rc-dock/blob/master/example/index.html

Provides foundational CSS for the rc-dock project, defining layout, navigation bar appearance, and responsive behavior. Includes styles for general page elements, links, and a GitHub corner animation.

```css
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
nav { box-sizing: border-box; background: #373a3c; color: #fff; padding: 10px; min-height: 80px; box-shadow: 0 0 5px #373a3c; }
.nav { display: flex; align-items: center; flex-wrap: wrap; }
#app, #app > div { width: 100%; height: 100%; }
h2 { color: #eee; }
h2, .link-bar { margin: 10px; }
a { margin-right: 20px; color: #ddd; text-decoration: none; }
a:first-child { color: #fff; }
.link-bar a:hover { text-decoration: underline; }
.link-bar a.current { color: #fff; text-decoration: underline; }
.github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out }
@keyframes octocat-wave {
  0%, 100% { transform: rotate(0) }
  20%, 60% { transform: rotate(-25deg) }
  40%, 80% { transform: rotate(10deg) }
}
@media (max-width: 500px) {
  .github-corner:hover .octo-arm { animation: none }
  .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out }
}
```

--------------------------------

### React Dock Layout Usage

Source: https://github.com/ticlo/rc-dock/blob/master/README.md

Demonstrates how to import and use the DockLayout component from the 'rc-dock' library in a React application. Includes basic layout configuration and CSS import.

```jsx
import DockLayout from 'rc-dock'
import "rc-dock/dist/rc-dock.css";

...

defaultLayout = {
  dockbox: {
    mode: 'horizontal',
    children: [
      {
        tabs: [
          {id: 'tab1', title: 'tab1', content: <div>Hello World</div>}
        ]
      }
    ]
  }
};

render() {
  return (
    <DockLayout
      defaultLayout={defaultLayout}
      style={{
        position: "absolute",
        left: 10,
        top: 10,
        right: 10,
        bottom: 10,
      }}
    />
  )
}
```

--------------------------------

### rc-dock CSS Styles

Source: https://github.com/ticlo/rc-dock/blob/master/example/gesture.html

Provides styling for the rc-dock project. Defines layout, appearance, and interactive elements using CSS. Includes styles for the main application container, drag initiators, sideboxes, and iframes.

```css
rc-dock   div { box-sizing: border-box; }
body { margin: 0; }
#app { margin: 30px; }
.drag-initiator { width: 300px; height: 300px; background: #f8f8f8; }
.sidebox { position: absolute; top: 30px; left: 350px; }
iframe { position: absolute; top: 350px; left: 0; right: 0; height: calc(100% - 350px); min-height: 300px; border-top: solid 1px #ccc; }
```

--------------------------------

### DockLayout API Methods

Source: https://github.com/ticlo/rc-dock/blob/master/README.md

Provides essential methods for interacting with the DockLayout component, including saving and loading layouts, moving dock elements, finding specific tabs or panels, and updating tab content. These methods allow for dynamic control over the dock interface.

```APIDOC
DockLayout API:

saveLayout(): SavedLayout
  - Saves the current state of the dock layout.
  - Returns: The saved layout object.

loadLayout(savedLayout: SavedLayout): void
  - Loads a previously saved layout state into the component.
  - Parameters:
    - savedLayout: The layout object to load.

dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData, direction: DropDirection): void
  - Moves a tab or panel to a new position within the layout.
  - Parameters:
    - source: The tab or panel to move.
    - target: The target location (ID, tab, panel, or box).
    - direction: The direction of the move (e.g., 'left', 'right', 'top', 'bottom', 'center').

find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined
  - Searches for a tab, panel, or box by its ID or a custom filter function.
  - Parameters:
    - id: The ID or a filter function to find the item.
    - filter: An optional filter to apply.
  - Returns: The found item or undefined.

updateTab(id: string, newTab: TabData): boolean
  - Updates an existing tab with new data.
  - Parameters:
    - id: The ID of the tab to update.
    - newTab: The new TabData object.
  - Returns: true if the tab was found and updated, false otherwise.
```

--------------------------------

### rc-dock Panel and Button Styles

Source: https://github.com/ticlo/rc-dock/blob/master/example/panel-extra.html

Defines CSS rules for the `.my-panel-extra-btn` class, which styles custom buttons within the panel, including cursor, font, color, size, opacity, and transition effects. It also includes styles for general `.btn` elements.

```css
.my-panel-extra-btn {
  cursor: pointer;
  font-family: Fredoka One;
  color: red;
  display: inline-block;
  width: 18px;
  height: 24px;
  text-align: center;
  opacity: 0.3;
  transition: all 0.25s ease-in-out;
  line-height: 30px;
}
.my-panel-extra-btn:hover {
  opacity: 1;
}
.btn {
  margin: 1px 5px;
  padding: 1px 5px;
}
```

--------------------------------

### rc-dock Layout and Styling

Source: https://github.com/ticlo/rc-dock/blob/master/example/standalone-divider.html

This CSS defines the layout, sizing, and visual appearance for the rc-dock project. It includes styles for box-sizing, body margins, main app layout, flexible boxes, dock dividers, and iframe positioning.

```css
rc-dock   div { box-sizing: border-box; }
body { margin: 0; }
#app { margin: 40px; }
.box { width: 400px; height: 200px; margin: 20px; display: flex; }
.box > div { border: 1px solid #ddd; flex: 1 1 auto; }
.dock-divider { height: 100%; width: 4px; flex: 0 0 4px; background: rgba(0, 0, 0, 0.01); cursor: ew-resize; }
iframe { position: absolute; top: 350px; left: 0; right: 0; height: calc(100% - 350px); min-height: 300px; border-top: solid 1px #ccc; }
```

--------------------------------

### rc-dock Type Definitions

Source: https://github.com/ticlo/rc-dock/blob/master/README.md

Defines the structure for layout data, box configurations, panel properties, and tab details within the rc-dock library. These types are crucial for configuring and manipulating dock layouts programmatically.

```APIDOC
LayoutData:
  dockbox: BoxData | empty BoxData
  floatbox: BoxData | empty BoxData

BoxData:
  mode: 'horizontal' | 'vertical' | 'float'
  children: (BoxData | PanelData)[]

PanelData:
  tabs: TabData[]
  panelLock: PanelLock | undefined

TabData:
  id: string
  title: string | ReactElement
  content: ReactElement | (tab: TabData) => ReactElement
  closable: bool | false
  group: string | undefined
```

--------------------------------

### rc-dock Custom Styling

Source: https://github.com/ticlo/rc-dock/blob/master/example/panel-style.html

Provides custom CSS rules for the rc-dock component, defining unique styles for dock panels, tabs, and their interactive states. This includes specific border, background, and color properties for a custom theme.

```css
.github-icon {
  padding-left: 16px;
}

.github-icon:before {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 4px;
  top: 4px;
  content: url("https://avatars2.githubusercontent.com/u/20446550?s=20");
}

.dock-panel.dock-style-custom {
  border: 1px solid #d88;
  border-radius: 8px 8px 0 0;
}

.dock-panel.dock-style-custom .dock-tab {
  margin-right: 0;
  border: 1px solid #d88;
  background: #d88;
  color: #fff;
  border-radius: 16px 16px 0 0;
}

.dock-panel.dock-style-custom .dock-tab.dock-tab-active {
  background: #fff;
  color: #c33;
}

.dock-panel.dock-style-custom .dock-bar {
  background: #facccc;
  border-radius: 7px 7px 0 0;
  border-bottom: 1px solid #d88;
}

.dock-panel.dock-style-custom .dock-tab-hit-area {
  /* cover the border area */
  left: -1px;
  right: -1px;
}

.dock-panel.dock-style-custom .dock-panel-max-btn,
.dock-panel.dock-style-custom .dock-panel-min-btn {
  opacity: 1;
}

.dock-panel.dock-style-custom .dock-panel-max-btn:before,
.dock-panel.dock-style-custom .dock-panel-min-btn:before {
  border-color: #fff;
  color: #fff;
}

/* different color for the focused panel */
.dock-panel.dock-style-custom:focus-within {
  border: 1px dashed #f00;
}

/* tab buttons take all the space , and only apply it when it's not in float panel */
.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-custom .dock-nav-list {
  flex-grow: 1;
}

.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-custom .dock-tab {
  flex: 1 0 auto;
}

/* global dock layout styles */
.dock-layout > .dock-drop-indicator {
  border: solid 1px red;
  box-shadow: inset 0 0 10px red;
  background: none;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.