Idea: debug mode

It'd be pretty cool to be able to enable a debug mode that adds background colors to the flex containers so you can see what's going on.

@phenomnomnominal

@phenomnomnominal - Love this idea!

I use the following SCSS block:

.debug{
    [fxFlex]:nth-child(10n+1) { border: 1px solid rgba(128, 128, 128, 0.5); }
    [fxFlex]:nth-child(10n+2) { border: 1px solid  rgba(255, 0, 0, 0.5); }
    [fxFlex]:nth-child(10n+3) { border: 1px solid  rgba(255, 165, 0, 0.5); }
    [fxFlex]:nth-child(10n+4) { border: 1px solid  rgba(255, 255, 0, 0.5); }
    [fxFlex]:nth-child(10n+5) { border: 1px solid  rgba(0, 128, 0, 0.5); }
    [fxFlex]:nth-child(10n+6) { border: 1px solid  rgba(0, 0, 255, 0.5); }
    [fxFlex]:nth-child(10n+7) { border: 1px solid  rgba(128, 0, 128, 0.5); }
    [fxFlex]:nth-child(10n+8) { border: 1px solid  rgba(238, 130, 238, 0.5); }
    [fxFlex]:nth-child(10n+4) { border: 1px solid  rgba(169, 169, 169, 0.5); }
    [fxFlex]:nth-child(10n+9) { border: 1px solid  rgba(139, 0, 0, 0.5); }
    [fxFlex]:nth-child(10n+10) {border: 1px solid  rgba(0, 0, 139, 0.5); }
    }

Just drop the .debug in front of each line to use it in CSS. Background colors were a bit too messy for my tastes, but obviously you can modify it however you like :~)

Add the debug class to whatever container you want to debug... and good luck.

Would you prefer a package-wide token, an individual key on each directive, or both?

Navigation Menu

Repository navigation

Idea: debug mode #129

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Idea: debug mode #129

Description

Activity

ThomasBurleson commented on Jan 26, 2017

ggranum commented on Feb 23, 2017

CaerusKaru commented on Jan 3, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions