csslabelcss-frameworksinuit.css

How do I override form styles in inuit.css?


Is there a recommended way to override/alter the form styles in inuit.css?

The inuit.css/base/_forms.scss has a rule setting label tags to display: block;, which is breaking a CMS I'm using. Certainly I could modify this file, or remove the import from _inuit.scss, but neither seems like a good approach.

Adding a rule in _vars.scss, which is a recommended approach for overriding defaults doesn't work. Both rules end up in the compiled css file, and the built-in one takes precedence.


Solution

  • In css/style.scss you add your own files like this:

    /**
     * She’s all yours, cap’n... Begin importing your stuff here.
     */
    //@import "ui/example";
    @import
            "ui/base",
            "ui/forms"
    ;
    

    Now you override display: block; in your own _forms.scss:

    label {
        display: inline;
    }
    

    Notes: