react Architecture Docs
Home / File/ Element.css — react Source File

Element.css — react Source File

Architecture documentation for Element.css, a css file in the react codebase. 0 imports, 2 dependents.

File css BabelCompiler 2 dependents

Entity Profile

Dependency Diagram

graph LR
  5a81d86f_6a8c_9985_ddb8_5ba82a404c8b["Element.css"]
  9930e8cf_03b4_86c0_be04_47b410246b71["Element.js"]
  9930e8cf_03b4_86c0_be04_47b410246b71 --> 5a81d86f_6a8c_9985_ddb8_5ba82a404c8b
  9e753c35_ccc6_2061_a942_6e9b10c9177c["IndexableDisplayName.js"]
  9e753c35_ccc6_2061_a942_6e9b10c9177c --> 5a81d86f_6a8c_9985_ddb8_5ba82a404c8b
  style 5a81d86f_6a8c_9985_ddb8_5ba82a404c8b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

.Element,
.HoveredElement,
.InactiveSelectedElement,
.HighlightedElement,
.InactiveHighlightedElement,
.SelectedElement {
  color: var(--color-component-name);
}
.HoveredElement {
  background-color: var(--color-background-hover);
}
.InactiveSelectedElement {
  background-color: var(--color-background-inactive);
}
.HighlightedElement {
  background-color: var(--color-selected-tree-highlight-active);
}
.InactiveHighlightedElement {
  background-color: var(--color-selected-tree-highlight-inactive);
}

.Wrapper {
  position: relative;
  padding: 0 0.25rem;
  white-space: pre;
  height: var(--line-height-data);
  line-height: var(--line-height-data);
  display: inline-flex;
  align-items: center;
  cursor: default;
  user-select: none;
}

.SelectedElement {
  background-color: var(--color-background-selected);
  color: var(--color-text-selected);

  /* Invert colors */
  --color-component-name: var(--color-component-name-inverted);
  --color-text: var(--color-text-selected);
  --color-component-badge-background: var(
    --color-component-badge-background-inverted
  );
  --color-forget-badge-background: var(--color-forget-badge-background-inverted);
  --color-component-badge-count: var(--color-component-badge-count-inverted);
  --color-attribute-name: var(--color-attribute-name-inverted);
  --color-attribute-value: var(--color-attribute-value-inverted);
  --color-expand-collapse-toggle: var(--color-component-name-inverted);
}

.KeyName {
  color: var(--color-attribute-name);
}

.KeyValue {
  color: var(--color-attribute-value);
  user-select: text;
  max-width: 100px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.Highlight {
  background-color: var(--color-search-match);
}
.CurrentHighlight {
  background-color: var(--color-search-match-current);
}

.ExpandCollapseToggle {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: var(--color-expand-collapse-toggle);
}

.BadgesBlock {
  margin-left: 0.25rem;
}

.ErrorIcon,
.ErrorIconContrast,
.StrictMode,
.StrictModeContrast,
.WarningIcon,
.WarningIconContrast {
  height: 0.75rem !important;
  width: 0.75rem !important;
  margin-left: 0.25rem;
}
.ErrorIcon {
  color: var(--color-console-error-icon);
}
.StrictMode {
  color: var(--color-dimmer);
}
.WarningIcon {
  color: var(--color-console-warning-icon);
}
.ErrorIconContrast, .WarningIconContrast {
  color: var(--color-component-name);
}
.StrictModeContrast {
  color: var(--color-text);
}

Domain

Imported By

Source

Frequently Asked Questions

What does Element.css do?
Element.css is a source file in the react codebase, written in css. It belongs to the BabelCompiler domain.
What files import Element.css?
Element.css is imported by 2 file(s): Element.js, IndexableDisplayName.js.
Where is Element.css in the architecture?
Element.css is located at packages/react-devtools-shared/src/devtools/views/Components/Element.css (domain: BabelCompiler, directory: packages/react-devtools-shared/src/devtools/views/Components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free