styles property

Implementation

@css
static List<StyleRule> get styles => [
  css('.file-tree', [
    css('&').styles(
      display: Display.block,
      padding: Padding.all(1.rem),
      fontSize: 0.8125.rem,
      backgroundColor: Color.variable(FileTreeTheme._backgroundVariable),
      color: Color.variable(FileTreeTheme._textVariable),
      lineHeight: 1.375.rem,
    ),
    css('ul').styles(
      listStyle: ListStyle.none,
      margin: Margin.only(left: .5.rem),
      border: Border.only(
        left: BorderSide.solid(
          width: 1.px,
          color: Color.variable(FileTreeTheme._iconVariable),
        ),
      ),
      padding: Padding.only(left: .125.rem),
    ),
    css('> ul').styles(
      padding: Padding.zero,
      margin: Margin.zero,
      border: Border.none,
    ),
    css('li', [
      css('&').styles(
        margin: Margin.symmetric(vertical: 0.125.rem),
      ),
      css('&.file').styles(
        display: Display.flex,
        margin: Margin.only(left: 1.25.rem),
      ),
      css('svg').styles(
        display: Display.inline,
        margin: Margin.only(left: .25.rem, right: .375.rem),
        width: .875.rem,
        height: .875.rem,
        color: Color.variable(FileTreeTheme._iconVariable),
        raw: {
          'vertical-align': 'middle',
        },
      ),
      css('&.directory', [
        css('> details', [
          css('&').styles(
            padding: Padding.only(left: 1.5.rem),
            border: Border.none,
            backgroundColor: Colors.transparent,
          ),
          css('> summary', [
            css('&').styles(
              maxWidth: 100.percent,
              padding: Padding.symmetric(horizontal: .625.rem),
              margin: Margin.only(left: (-1.5).rem, bottom: Unit.zero),
            ),
            css('&::marker').styles(
              color: Color.variable(FileTreeTheme._iconVariable),
            ),
            css('&:hover', [
              css('&').styles(
                cursor: Cursor.pointer,
                color: Color.variable(FileTreeTheme._highlightVariable),
              ),
              css('svg').styles(
                color: Color.variable(FileTreeTheme._highlightVariable),
              ),
              css('.tree-entry-name[data-highlighted] svg').styles(
                color: Color.variable(FileTreeTheme._backgroundVariable),
              ),
              css('~ul').styles(
                border: Border.only(left: BorderSide(color: Color.variable(FileTreeTheme._highlightVariable))),
              ),
            ]),
          ]),
        ]),
      ]),
    ]),
    css('.tree-entry', [
      css('&').styles(
        display: Display.inlineFlex,
        alignItems: AlignItems.start,
        gap: Gap.all(0.5.rem),
        raw: {'vertical-align': 'middle'},
      ),
      css('.tree-entry-name', [
        css('&').styles(
          display: Display.inlineFlex,
          alignItems: AlignItems.center,
        ),
        css('&[data-highlighted]', [
          css('&').styles(
            padding: Padding.symmetric(horizontal: 0.25.rem),
            radius: BorderRadius.circular(0.25.rem),
            alignItems: AlignItems.center,
            color: Color.variable(FileTreeTheme._backgroundVariable),
            backgroundColor: Color.variable(FileTreeTheme._highlightVariable),
          ),
          css('svg').styles(
            color: Color.variable(FileTreeTheme._backgroundVariable),
          ),
        ]),
        css('&[data-placeholder]').styles(
          color: Color.variable(FileTreeTheme._iconVariable),
        ),
      ]),
      css('.comment').styles(
        padding: Padding.only(left: 1.5.rem),
        color: Color.variable(FileTreeTheme._iconVariable),
        fontStyle: FontStyle.italic,
      ),
    ]),
  ]),
];