I need to change the background-colour of the cancel-button with rgb. The only half-way up to now is changing the cancel-variant to e.g danger. However, I need to choose the specific, rgb colour. Does anyone know a solution to my problem?
Thank you
<b-modal v-bind:id="'delete-modal-' + id" cancel-variant=info ok-variant=danger ok-title="delete" cancel-title="back" #ok="deleteModal" title="Caution">
<p class="my-4">Are you sure?</p>
</b-modal>
If you're using SASS you can easily add new variants to your project by adding them to the $theme-colors map.
These will automatically become available to use with bootstrap-vue everywhere you can use a variant.
custom.scss
$theme-colors: (
"cancel": rgb(139, 80, 80)
);
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
Then import custom.scss in your apps entry point.
If you want a simple CSS solution, the cancel-variant property just adds the class btn-* where * is the string you provide.
Which means you can add the css below to your global stylesheet, to add a new variant (however, doing it this way you'll have to write all the :hover, :active stuff yourself)
.btn-cancel {
color: #fff;
background-color: rgb(213, 213, 213);
border-color: rgb(213, 213, 213);
}
After adding one of the options above you will now have the option to do <b-modal cancel-variant="cancel"></b-modal> to utilize your new variant.
Related
I want to disable text input in the "basic-select" component, from the "vue-search-select" package
because there are already ready-made styles for it, and I would not want to create a separate customized select
is it possible? Tell me please
I guess there is no explicit API to disable text input because this package is going to make a "searchable" select component. The text input can be hidden using CSS, however.
.search {
display: none;
}
/* or even better */
.ui.search.dropdown > input.search {
display: none;
}
However, you should be careful about the selector you choose. Depending on your project, it might have some side effects. It might be better to add a custom class to the component and use it as follows:
.my-custom-class .ui.search.dropdown > input.search {
display: none;
}
I would like to change the style of the clear input icon, but can not change it.
<a-input placeholder="Basic usage" allowClear />
In my css, I use the classname ant-input-suffix and write
.ant-input-suffix{
background-color: #ffa;
}
Classname ant-input-clear-icon doesn't work either.
What can I do to change it?
What you are running to is probably a specificity (what is specificity in css) problem.
To fix your problem (if it is specificity) you can do:
span.ant-input-suffix {
background-color: #ffa;
}
To better target your elements we would need to see more HTML before giving a concrete answer
The default Vuetify font family is Roboto and I would like to change this. I found other solutions that changes the font family globally. I don't want to change it globally, I only want to change it for a specific element. How to do this?
<template>
<v-container>
<div class="text-h4">Text family I want to change</div>
<div class="text-h6">Text family I dont want to change/give another font family</div>
</v-container>
</template>
Update
Vuetify declares the font on .v-application and unfortunately also declare the font as !important on .v-application .text-hN. I can suggest you some ideas to modify your font:
If you want to change every text-h4: You can override the style of text-h4 by modifying its default ($headings then
'h4') https://vuetifyjs.com/en/features/sass-variables/#example-variable-file
If you want to keep default text-h4: You can remove the text-h4 class and use your own class custom-header with copied rules of text-h4 plus your font-family rule. You won't need higher specificity, nor to use !important.
Something like:
.custom-header {
font-size: 2.125rem !important; /* from .text-h4 */
line-height: 2.5rem; /* from .text-h4 */
letter-spacing: .0073529412em !important; /* from .text-h4 */
font-weight: 400; /* from .text-h4 */
font-family: YOUR_FONT_FAMILY, Roboto, sans-serif;
}
Previous answer
Give your element another class:
<div class="text-h4 anotherClassForExample">Text family I want to change</div>
Override the font-family of this new class in your css.
I was in a similar position before, I had some basic css knowledge and started using frameworks. I strongly recommend you to master CSS before using a UI framework. Starting by using a framework looks faster, shinier and easier but in the long term it is not. You will be blocked a lot and maybe in the future you will change to another one or even want to not use any.
We're introducing a dark theme for our site that can be turned on and off on the fly, so we're using CSS custom properties. The problem is that we still have to support IE 11. IE just isn't getting the dark theme, it'll stay on the light theme, that's fine, but it means we have to duplicate all of our color properties now:
.some-icon {
color: #some-font-color;
color: var(--some-font-color);
fill: #some-font-color;
fill: var(--some-font-color);
}
This is because IE 11 will ignore the CSS custom properties and still use the first one it finds. Is there a way to use a LESS mixin or something else to automatically generate those duplicate values for us? Just a minor thing but it would save us some annoyance.
(Side note: I know there are polyfills to make CSS variables work in IE 11, we chose not to use one. We barely support it as is, no need to add a polyfill for this.)
You can use a mixin to output multiple values as such:
#red: red --red;
.color(#val) {
#val1: extract(#val, 1);
#val2: extract(#val, 2);
color: #val1;
color: var(~'#{val2}');
}
p {
.color(#red);
}
Output will be:
p {
color: red;
color: var(--red);
}
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.