I tried to change the background-color in b-modal -> in .modal-header using bootstrap-vue. But the vue doesn't see my styles and I don know why :/
here is the code. I follow by answer in link
HTML:
b-modal(id="card-1" title="CARTÃO DE CRÉDITO" :modal-class="myclass" header-text-variant="light")
VUE
export default {
data: {
myclass: ['myclass']
},
}
CSS
.myclass > .modal-dialog > .modal-content > .modal-header {
background-color: #da2228 !important;
color: white;
}
But I still doesn't see the results. Modal header is white. Any ideas why?
You're probably using a scoped style tag in your .vue file.
If you are, then you need to use a deep-selector to properly target the subcomponent.
The selectors are /deep/, >>> or ::v-deep.
In the below example i use /deep/, but the others should work for you as well.
You can also use the header-class prop on b-modal to directly add the class to the header if you wish.
<template>
<b-modal header-class="my-class">
<template #modal-header>Header</template>
Hello
</b-modal>
<b-modal modal-class="my-second-class">
<template #modal-header>Header</template>
Hello
</b-modal>
</template>
<style scoped>
/deep/ .my-class {
background: black;
color: white;
}
/deep/ .my-second-class > .modal-dialog > .modal-content > .modal-header {
background: black;
color: white;
}
</style>
You can use content-class="your-class" in the vue bootstrap modal.
<b-modal id="myModal" content-class="your-class" title="BootstrapVue">
Body Content
</b-modal>
Or else it is difficult to style the modal cuz the normal class="" does not apply to the code.
Related
I'm using v2 of Nuxt.js.
If css is loaded under the following conditions, no style will be set on the child elements.
Import scss file with style settings with style tag
Add scoped to the style tag above.
Below is a demo.
CodeSandBox
It can be confirmed that the style for the elements under header in /assets/style.scss is not set.
header {
background: #dddddd;
> ul { // not working
list-style: none;
padding: 0;
display: flex;
}
button { // not working
background: black;
color: white;
}
}
Is there a way to style child elements in the form of importing scss?
The main codes are as follows.
<template>
<div id="app">
<Header />
<HelloWorld />
</div>
</template>
<script>
import Header from "./components/Header";
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
Header,
HelloWorld,
},
};
</script>
<style lang="scss" scoped>
#import "./assets/style.scss";
</style>
// Header.vue
<template>
<header>
<ul>
<li>
<h1>{{ appName }}</h1>
</li>
<li>
<button>Sign in</button>
</li>
</ul>
</header>
</template>
// style.scss
header {
background: #dddddd;
> ul {
list-style: none;
padding: 0;
display: flex;
}
button {
background: black;
color: white;
}
}
.hello {
background: #efefef;
padding: 1rem;
}
Its CSS will apply to elements of the current component only. So you need to append below code
<style lang="scss" scoped>
#import "../assets/style.scss";
</style>
at Header.vue to make the css file effected.
I am trying to style content of the Vuetify dialog component. I use content-class prop and scoped styles to do that. What is the difference between the styles below? How can i make scss version work? Codesandbox.
<style lang="css" scoped>
>>> .dialog-content {
outline: 5px solid black;
}
</style>
<style lang="scss" scoped>
::v-deep .dialog-content {
outline: 5px solid black;
}
</style>
<template>
// ....
<v-dialog v-model="dialog" content-class="dialog-content">
// ....
</v-dialog>
// ....
</template>
As mentioned here, styles cannot be scoped because "the dialog is removed from the component's DOM and inserted just under the v-app component at the top-level of the application"
try:
<style lang="scss">
.dialog-content {
outline: 5px solid black;
}
</style>
I defined styles for my website.
I also include specific content, which is written with a WYSIWYG editor by the users.
This content should have a specific style, but not erase the style of the rest of the website.
I tried using but then no style is applied at all. is there any way to apply a specific style to this content?
<template>
<div id="content">
<div class="content" v-html="content"></div>
</div>
</template>
export default {
name:'content',
props: {
content: {
type: String,
default: '<div>Contenu à définir</div>'
}
}
}
<style scoped>
h1, h2, h3 {
color: #94c946;
margin:0;
font-family: 'Montserrat-ExtraBold';
vertical-align:baseline
button{
font-family: 'Montserrat-ExtraBold';
border-radius: 100px;
background-color: #94c946;
color: #1B1B1B;
}
</style>
The scoped styles in view only work for the elements that are present on the component on the template, but not for dynamic content.
I would recommend you to use some id cascade, for example declare an id for your section like this:
<style>
#content button { .... }
#content h1, #myEditor h2 {....}
</style>
This can be accomplish better using some css preprocessor like sass
<style lang="sass">
#content
button
....
h1, h2, h3
....
</style>
I tried out Angular before switching to Vue and found the :host selector in their components to be very handy. The jist of this is that it applies the stylings for :host to the component itself.
Is there an equivalent of this that works with .vue files in they <style scoped></style> section?
Examples:
Using Scoped
Parent:
<template>
<div class="host">
<layout-header :open-nav="openNav" #toggle-open="toggleOpen"></layout-header>
<layout-sidebar :open-nav="openNav"></layout-sidebar>
<layout-content></layout-content>
<layout-footer></layout-footer>
</div>
</template>
<style scoped>
.host {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
}
</style>
Content:
(<layout-content>)
<div class="host">
stuff
</div>
<style scoped>
.host{
flex: 1;
}
</style>
Output:
(removing the header, footer, and sidebar for simplicities sake.)
This results in the header, sidebar, content, and footer inheriting the parents css if they have a .host class.
HTML:
<div data-v-238e7577="" class="host">
<div data-v-7412829c="" data-v-238e7577="" class="host">stuff</div>
</div>
The CSS applied to the child element:
There is no equivalent for Angular's :host in Vue.
The closest you are gonna get is by using CSS module.
Demo: App.vue in https://codesandbox.io/s/o4orw9nz35
<template>
<div id="app" :class="$style.container">
<p class="red">p tag</p>
<div class="blue">div tag</div>
</div>
</template>
<style lang="scss" module>
.container :global {
.red {
color: red;
}
.blue {
color: blue;
}
}
</style>
Note how the .container class is used as $style.container as class in the root div.
CSS module will generate unique class name for .container, making it impossible to have class name collisions.
What does :global do?
CSS module transform the CSS class name into something unique by default.
for e.g. .container will be transformed into something like .container_7ba5bd90 when used as $style.container.
To avoid this transformation on certain classes, use :global to wrap them.
(Explanation for :global can be found here.)
I searched for my problem and found this
However, the accepted solution does not work for me BUT I can't comment, since I have only 6 Reputation yet -.-
So Situation is, I want to use the paper-item from the Polymer framework inside the paper-listbox
That works, but when you select an item by clicking on it, the background changes to grey...
Docs and the answer to the question I linked abvoe suggest to overwrite --paper-item-selected / --paper-item-focus mixin, but this does not work for me
My code:
<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html">
<dom-module id="cit-literal-item">
<template>
<!-- scoped CSS for this element -->
<style is="custom-style">
.spacer {
#apply(--layout-flex);
}
paper-item {
--paper-item-selected: {
background-color: #FFFFFF;
};
--paper-item-focused: {
background-color: #FFFFFF;
};
}
</style>
<paper-item>Test</paper-item>
</template>
</dom-module>
Main Document Code:
...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
<paper-listbox>
<cit-literal-item></cit-literal-item>
<cit-literal-item></cit-literal-item>
</paper-listbox>
</body>
I found the "solution"!
The property I had to overwrite is called --paper-item-focused-before
I looked at the source code of the <paper-item> and found this in the shared-styles.html
shared-styles.html
:host(.iron-selected) {
font-weight: var(--paper-item-selected-weight, bold);
#apply(--paper-item-selected);
}
:host([disabled]) {
color: var(--paper-item-disabled-color, --disabled-text-color);
#apply(--paper-item-disabled);
}
:host(:focus) {
position: relative;
outline: 0;
#apply(--paper-item-focused);
}
:host(:focus):before {
#apply(--layout-fit);
background: currentColor;
content: '';
opacity: var(--dark-divider-opacity);
pointer-events: none;
#apply(--paper-item-focused-before);
}
One can see, that the only mixin applying a color by default is --paper-item-focused-before, which applies a style to the :before pseudoelement of the <paper-item>.
--paper-item-focused-before: { background: transparent; };