Simple disable mode using only CSS

Bogdan — Sat, 24 Dec 2022 02:14:57 +0000

Photo by AVI on Unsplash

There is a simple way to add a visual disable state to an HTML element.

We just have to add the following CSS class to the parent HTML element we want to disable:

.disabled {
    cursor: initial;
    pointer-events: none;
    opacity: 0.5;
}

Caveats of this method: disabling the elements using CSS only does not disable the keyboard tab focusing. At the time of writing, there is no viable CSS only solution to disable the tab navigation. For this, a tabindex=”-1″ property should be used on the HTML element. To dynamically switch the tabindex we need to use JavaScript to find the element and change the value.

The post Simple disable mode using only CSS first appeared on Bogdan's blog.

How to @extend sass classes or use sass global variables in Vue components

Bogdan — Wed, 20 Mar 2019 04:16:21 +0000

Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage.

Let’s assume that you have a class that you want to extend

src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}

Assuming you generated your project with @vue/cli, you have to add the following statement to vue.config.js in order to have file visibility throughout your application

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/style.scss";`
      }
    }
  }
}

Then, you can use @extend on which component you want

Remember that you have to use sass in both extended and extender sheets for this to work.

The post How to @extend sass classes or use sass global variables in Vue components first appeared on Bogdan's blog.

css | Bogdan's blog

Simple disable mode using only CSS

How to @extend sass classes or use sass global variables in Vue components