TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page
  • Merge and review tall-theme.css
  • Blade UI Kit icons
  • Checkboxes and Radio
  • Repeater

Was this helpful?

  1. Upgrade v7 to v8

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.

PreviousNotification changesNextConfiguration

Last updated 3 years ago

Was this helpful?