I want to ovverride the vuetify default breakpoint for certain file. i have created a styles folder on my source directory and inside styles folder i created variables.scss file. inside variables scss file my code is like this.
$grid-breakpoints: (
xs: 0,
sm: 650px,
md: 1190px,
lg: 1100px,
xl: 1200px
);
it's overriding breakpoint for my entire project. but i just want to override the breakpoint for only some component.
is there any way i can achieve that?
The idea of breakpoint is resizing all parts of a page together.
If you won't custom breakpoint for only one component just write default media queries in CSS like there https://developer.mozilla.org/en-US/docs/Web/CSS/#media
Related
I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:
.ion-page {
--ion-background-color: red;
}
...but this doesn't:
.ion-page {
background-color: red;
}
Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.
Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)
The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:
.ion-page {
--background: red;
}
I didn't previously realise there were different sets of CSS variables for different scopes.
I am tring to set my buttons with vuetify but, I don't want each time to set the background color and the style of the button, or with any other vuetify component.
what is the best practice to set global style for the component like buttons chips avatar ect...
i now i can create my own component for that but then there is no reason using vuetify.
I have a nuxt project but the same apply to vue
Might be not the best practice, but this is how I'm doing it:
Create file for your global style (e.g. main.scss) In your assets folder.
Plug it in nuxt.config.js as so: css: ["~assets/styles/main.scss"]
Add class to your app root element (e.g. in default layout)
Create _vuetify.scss for overwriting Vutify styles and import it in main.scss
Write your Vuetify styles in scope of app root class for gaining selector weight.
.app .v-toolbar {
background-color: red; }
If this is too much, or as a quick solution you can just write your global styles in default layout, scoping with app root class.
I want to make a progress bar with background linear-gradient and use pre-defined theme colors in scss in vue. Such as:
.progress{
background-image: linear-gradient(to right, $start-color 0%, $start-color 50%, $end-color 50%, $end-color 100%);
}
50% is dynamic changed by code in vue. If I write the style in :style="{}" then I can't use the pre-defined scss color $start-color and $end-color
You should use the :export block from Interoperable CSS under CSS modules.
As an example consider the below given extracts, first in your sass file that has colors defined (say colors.scss):
$primaryColor: #fcf5ed;
$secondaryColor: #402f2b;
:export {
primaryColor: $primaryColor;
darkColor: $secondaryColor;
}
With that setup along with your style loaders (which you currently must have setup) you can just import the file like usual js modules like below in your Vue application:
import colorVariables from 'colors.scss'
colorVariables.primaryColor // => Will now have the value of the color as a string.
Now you can just use the :style binding of the Vue to define the linear-gradient. You can read more on export in the following link : Interoperable CSS - :export under CSS modules.
How to setup a slider at the bottom-right corner in Prestashop like the picture? This slider consists of different picture. When I click an image, relative information will be shown on the right corner.
Simple you need to build a custom module. Please ref to prestashop.com document how you build custom module.
On that module hook the theme file yourmodulefile.tpl at FOOTER
Then make a wrap Div, set a class "footer_slide_wrap"
On your module CSS mark that class as bellow
.footer_slide_wrap{
display :fixed;
bottom : 0;
right :0;
width : 30px;
height:auto;
}
Now your DIV with class footer_slide_wrap will be place on that place.
now insert an UL and put your all button under li in this UL.
You can make the div .footer_slide_wrap mouse over slidable. For that you need to make a default div with class .opener and make the wrap hide.
need to create a javascript function to hide / show the DIV on mouse over.
you need to register a custom hook inside your slider module's php file, eg: "footerslider" then add the hook to your fooeter.tpl file which is located at "themes/yourthemes/footer.tpl" by placing this code {hook h="fooerslider"}
Basically, you should create small module that have hook.
Prestashop has many hooks related with your layout but if they are not suitable for you, you can create your own hook.
If you want to call your custom hook, simply put this code where you want to show.
{hook h="displayYourHookName"}
You need to install your custom hook in your install() function of your custom module.
// use this code in your install() function
$this->registerHook('displayYourHookName');
// your custom hook
public function hookDisplayYourHookName()
{
// code ...
// your html template that you want to show
return $this->display(__FILE__, 'yourTemplate.tpl');
}
if you are using default hook, prestashop will call automatically.
I hope this will help, cheers :)
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.