Styling changes

Merge and review tall-theme.css

There might be some small changes to some classes that aren't documented here. Please publish (--force), merge and review the theme before publishing it to production.

Blade UI Kit icons

  • Blade UI kit icons, tested with version "^1.1"

  • Follow instructions if you made a custom theme.

  • No custom theme? This change might affect you, if you republish the theme.

I have noticed that icon libraries handle the svg css fill="..." attribute differently. Some works best with fill: currentColor and others with fill:none.

Depending on which icon library you use in your project, change the .svg-icon class in tall-theme.css accordingly.

Due to this, I've updated the icon() and sfxIcon() field methods to let you add classes.

The .svg-icon in tall-theme.css has also changed accordingly.

I have added the tailwind css fill-current class to the x-tall-svg and $field->tallIcon in blade view components, to compensate. (Meaning: it won't affect your current projects unless you republish the theme)

.svg-icon {
    @apply inline-flex align-middle overflow-visible;
    /* fill: currentColor; */
    font-size: inherit;
    margin-top: -0.1rem;

Checkboxes and Radio

Checkboxes and Radio have new wrapper classes, that inlines the options instead of stacking them as before. See the image below.

/*.tf-radio-fieldset, .tf-checkboxes-fieldset */
@apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5;

Repeater

The buttons are stacked instead of in a row on larger screens to avoid taking up space.

Last updated