Is it possible to show the next step directly after clicking continue within the Vuetify Stepper? (or in other words: how to remove the transition slide out effect)
It doesn't look like there is any provided option to change the transition effect in the Vue component itself.
But, you can disable it by setting the transition css property to none for the .stepper-content elements.
For example, you could create a no-transition class:
.no-transition .stepper__content { transition: none; }
And then add it to the <v-stepper> component tag:
<v-stepper v-model="e1" class="no-transition">
...
</v-stepper>
Here's a codepen with a working example.
Mine worked with
.no-transition .v-stepper__content { transition: none; }
In case somebody didn’t succeed with #thanksd's answer.
This worked for me:
.v-stepper__wrapper {
transition:none !important;
}
Vuetify version 2.2.8
Remove the Vuetify stepper transition:
.v-stepper__content, .v-overlay {
transition: none !important;
}
Remove the Vuetify stepper transition only from stepper-header (which I was looking for). I added a class "stepper-body" to :
.stepper-body {
position: relative;
}
Related
<mat-slide-toggle>Slide Me!</mat-slide-toggle>
How to increase length of the toggle-thumb-icon,is it possible to customise the toggle-thumb-icon to the end of the bar?
You can do with the simple style
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
transform: translate3d(32px,0,0) !important;
}
STACKBLITZ DEMO
I am trying to convert my bootstrap theme to a RTL layout. I load two stylesheets due to the orders you see below:
#import "mycss.css";
#import "RTL.css";
How I can disable any CSS property in mycss.css by overriding them with a second CSS property in the second stylesheet?
I tried the initial value for this property, but not working.
Look at my example here:
First property in mycss.css stylesheet:
.myclass { right: 64px; }
Second property should be disabled and override by the code below:
.myclass { left: 64px }
The problem is that, after writing the second CSS property, both properties remain. I expected the disabling or deleting of the first property with only the second property remaining.
I have a similar problem with background-color, too.
For disabling you can use 'unset'.
For example background-color: unset;
All css properties have a default value. You can reset the value to this default to make it ignored.
In the case 'right', the default is 'auto' - MDN
.myclass {right: auto; left: 64px; }
I'm trying to modify the "Quick View Feature". I want it to "always" display, without any hover effects.
I've tried using the opacity CSS but didn't work for me.
.quick-view {
opacity: 1;
}
I want to achieve it with only CSS, Is it possible with only CSS?
It is show using transform css, So just remove transform form it's css.
.grid-tools.hover-slide-in {
transform: none;
opacity: 1;
}
You have 3 options
1: Eliminate the the other css or javascript code that is modifying the element.
(you can search it with the class name, id name or whatever in css or html).
2.= use display:
.quick-view {
display: block; /* can also use flex, or inline-block whatever*/
}
3.- use visibility:
.quick-view {
visibility: visible;
}
regards!
I am learning Polymer. The app I'm building to learn Polymer uses the paper-item element. I've chosen the paper-item for its look. However, when I click the paper-item, the background changes to a dark gray. How do I remove this behavior? I want the background of the paper-item to always be white. Yet, cannot figure out how to set the background color when the paper-item is clicked or selected.
Thank you for your help and have a great holiday season!
I think it's the focused behavior that needs to be changed by redefining the mixin:
<template>
<style>
:root /* or paper-item */ {
--paper-item-focused: {
background-color: white;
}
}
</style>
<paper-item></paper-item>
</template>
If this doesn't work try --paper-item-selected instead of --paper-item-focused.
I think you looking for this :
paper-item:focus::before,
paper-item:focus::after {
color: white;
opacity: 0;
}
This rule override rules from "bower_components/paper-item/paper-item-shared-styles.html" :
:host(:focus):before, .paper-item:focus:before {
#apply(--layout-fit);
background: currentColor;
content: '';
opacity: var(--dark-divider-opacity);
pointer-events: none;
#apply(--paper-item-focused-before);
}
I don't know where is import the rule on "paper-item:focus::after" but in my Chrome Developper Console I see this and I need to override it to get the behavior you want.
Regards
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!