Vueless Docs
ComponentsGitHubWebsite
  • Getting Started
  • Installation
    • Quick start (Vue)
    • Quick start (Nuxt)
    • Class autocompletion
    • Minimal requirements
    • Storybook docs
  • Global customization
    • General
    • Colors
    • Design system
    • Rounding
    • Focus Outline
    • Font Size
    • Disabled Opacity
    • Dark mode
    • Custom tailwind classes
  • Component customization
    • General
    • Styling
    • Unstyled mode
    • Conditional styling
    • Extends styling from keys
    • Nested components styling
    • Props defaults
    • Redefining props
    • Defining custom props
    • Internationalization (i18n)
  • Creating own components
    • Vueless file structure
    • Create new component
    • Copy existing component
  • Svg Icons
    • General usage
    • Custom icons
    • Dynamic import
    • Advanced settings
  • Helpers
    • Change settings in runtime
  • Other
    • Vueless Vite Plugins
Powered by GitBook
On this page
  1. Global customization

Disabled Opacity

You can set the components disabled state opacity globally for related Vueless components.

vueless.config.{js,ts}
export default {
  disabledOpacity: 40, /* default -> 50 (percent, %) */
}

Custom CSS variable

To implement global disabled state opacity stylings, Vueless provides custom CSS variable. Feel free to use it in your components whenever you need consistent opacity for disabled state across your project.

The variable: --vl-disabled-opacity

Last updated 5 days ago