I wanna know how can I use #extend in SASS when I have nested CSS.
Here's my code , I wanna extend all property in a button which is in section to my .last-btn
section {
button {
background - color: rgb(111, 190, 190);
border: none;
padding: 2e m;
border - radius: 10e m; &
: hover {
background: rebeccapurple;
} &
::after {
content: "Hello";
}
}
}
.last - btn {
}
you can try with:
.last - btn {
#extend section>button;
}
but I haven't tested it.
Or you can make a mixin.
Can you please check the below code? Hope it will work for you.
section {
button{
background-color:rgb(111, 190, 190);
border: none;
padding: 2em;
border-radius: 10em;
&:hover{
background: rebeccapurple;
}
&::after{
content: "Hello";
}
}
.last-btn{
#extend button;
}
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/sqv391w8/3/
Related
In a nested group of SCSS, is it possible to move up a level and apply a modifier class to the parent to overwrite styling?
For example, I have the following SCSS where an image is added to the before/after classes. I need to change the images on a different .btn-- styling. So essentially compiled the CSS would look a bit like .btn--ghost .label:before, .btn--ghost .after {}.
There is more styling to this but I've just stripped it out for this example so it's not a wall of code.
.btn--arrow {
.label {
&:before,
&:after {
background: url(../img/icon-arrow--white.svg) no-repeat 0 0;
}
&.btn--ghost & {
&:before,
&:after {
background: url(../img/icon-arrow.svg) no-repeat 0 0;
}
}
}
}
I have successfully achieved this with the SCSS outside of the .label, so directly under .btn--arrow (below) but out of curiosity and better understanding I'd be interested to know if it's achievable in the first example I gave.
.btn--arrow {
.label {
&:before,
&:after {
background: url(../img/icon-arrow--white.svg) no-repeat 0 0;
}
}
&.btn--ghost {
.label {
&:before,
&:after {
background: url(../img/icon-arrow.svg) no-repeat 0 0;
}
}
}
}
I have tried moving the & around and using stuff like #at-root but without any success.
Thanks in advance!
You can qualify a selector by putting & to the right of the intended parent of the selector. Wrapping it in #{} allows you to place it directly beside that parent.
The #at-root rule causes everything proceeding to be emitted at the root instead of using regular nesting.
If you use both and the #{}, I think you can achieve what you are looking for.
.flashlight {
.light {
background: yellow;
#at-root .dead-battery#{&} {
background: transparent;
}
.daytime &{
background: transparent;
}
}
}
This would compile to:
.flashlight .light {
background: yellow;
}
.dead-battery.flashlight .light {
background: transparent;
}
.daytime .flashlight .light {
background: transparent;
}
So I looked at how CSS "shares" its properties here : https://stackoverflow.com/a/199719/13707884
This was written in 2008 so I figured maybe CSS does allow for inheritance now & sure enough there is an article on it here :
https://coderwall.com/p/lqjd1w/css-class-inheritance-in-css
So I am trying out the code as mentioned in the link on "coderwall":
[class*=“row-“] {
border: 5px solid lightskyblue;
}
.row-1 {
color: blue;
}
.row-2 {
color: darkred;
}
<div class="row-1">AAA</div>
<div class="row-2">AAA</div>
However, this does not seem to be working. What could I be doing wrong here?
Your quotation marks in your first selector are invalid.
[class*="row-"] {
border: 5px solid lightskyblue;
}
.row-1 {
color: blue;
}
.row-2 {
color: darkred;
}
<div class="row-1">AAA</div>
<div class="row-2">AAA</div>
I need to change the default primary Bootstrap 4 color (after the Bootstrap stylesheet has been loaded) to a custom color (choosed by user) for a dynamic Bootstrap component with an internal CSS stylesheet.
I could do, for example, .btn-primary { background-color: red; } but this works just for buttons and, however, it doesn't change the other btn-primary states like ":hover", ":active" and "disabled". It also doesn't change the "primary" color throughout the entire CSS for .alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primary, etc...
What's the possible solution?
You need to download the Bootstrap Sass files. You can do so from this link.
Once you have them you can open the main bootstrap .scss file and search for:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Change "primary" to what you need and then recompile to CSS. If you don't have Sass installed on your machine you can use various online tools to accomplish this. Example.
Source: https://getbootstrap.com/docs/4.3/getting-started/theming/
You can do so by using the variables concept(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
Bootstrap 4 also works on the variables
You can try changing the variable values at run time as mentioned below:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
// get variable from inline style
element.style.getPropertyValue("--main-bg-color");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--main-bg-color");
// set variable on inline style
element.style.setProperty("--main-bg-color", "red");
There are different ways do it. I am describing one of them.
Import below lines to your scss file.
#import '~bootstrap/scss/bootstrap.scss';
After that write below code to override it.
$primary = 'red';
$gray = 'gray';
.btn {&.btn-primary {
#include button-variant($primary, $primary, $primary, $primary);
&.disabled,
&:disabled {
border: $gray;
background-color: $gray;
}
&:hover {
opacity: 0.85;
}
}
}
Check the link to use sass mixins to override bootsrap classes.
I have following CSS selectors that highlight the selected entry in a lookup list either using up and down keys or mouse pointer. Issue is when using both keyboard and mouse, multiple entries are getting highlighted. Following here is the CSS entries.
&:hover, &.selected {
background: #205081;
label {
.title {
color: #fff;
}
.subTitle {
color: #ccc
}
}
}
.selected CSS class is dynamically set based on up and down key events.Any suggestions on fixing this issue would be much appreciated. Thanks
Well, sibling selector is always tricky.
Given that your styles are applying to ul, li, you can take :hover prior to .selected using trick with parent's :hover like this:
#mixin high-light()
{
background: #205081;
label {
.title {
color: #fff;
}
.subTitle {
color: #ccc
}
}
}
#mixin unhigh-light(){
background: #fff;
label {
.title {
color: #000;
}
.subTitle {
color: #000
}
}
}
ul{
&:hover{
li{
&.selected{
#include unhigh-light();
}
}
}
li{
&:hover, &.selected, &.selected:hover {
#include high-light();
}
}
}
This is a sample of html markups:
<ul>
<li><label><span class="title">Item</span></label></li>
<li class="selected">
<label><span class="title">Item</span></label>
</li>
<li><label><span class="title">Item</span></label></li>
</ul>
I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.
How can I apply specific CSS to the title and the content respectively?
$("#poplink").popover({
html: true,
placement: "right",
trigger: "hover",
title: function () {
return $(".pop-title").html();
},
content: function () {
return $(".pop-content").html();
}
});
html, body {
width: 100%;
height: 100%;
}
.pop-div {
font-size: 13px;
margin-top: 100px;
}
.pop-title {
display: none;
color: blue;
font-size: 15px;
}
.pop-content {
display: none;
color: red;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
<a id="poplink" href="javascript:void(0);">Pop</a>
<div class="pop-title">Title here</div>
<div class="pop-content">Content here</div>
</div>
For example: http://jsfiddle.net/Mx4Ez/
The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.
Try adding this to your css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
Update
Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.
If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's template option to add another class:
$("#myElement").popover({
template: '<div class="popover my-specific-popover" role="tooltip">...'
});
I started by just using the default value for template from the docs, and added my-specific-popover to the class attribute.
The newly created elements have the following hierarchy:
.popover
|_ .popover-title
|_ .popover-content
Which is injected after the element that triggers the popover (you can specify a specific container for the injected popover by setting the container option, in which case you will set the styles using the element that you passed as container). So to style a popover you can use css like the following example:
<div id="my-container">
Popover This!
</div>
<style>
.popover-title { color: green; } /* default title color for all popovers */
#my-container .popover-title { color: red; } /* specific popover title color */
</style>
As Matt said before, it may depend on the bootstraps version, for v4.6 you should do:
.popover{
background-color: red;
}
.popover-header {
color: red;
}
.popover-body {
color: blue;
}
Bootstrap >= 5.0
You can override Bootstrap popover styles.
.popover {
background-color: var(--main-bg-color);
border: 1px solid var(--border-color);
}
.popover-body {
color: var(--font-color);
}
.bs-popover-top {
> .popover-arrow {
&::before {
border-top-color: var(--border-color);
}
&::after {
border-top-color: var(--main-bg-color);
}
}
}
.bs-popover-end {
> .popover-arrow {
&::before {
border-right-color: var(--border-color);
}
&::after {
border-right-color: var(--main-bg-color);
}
}
}
.bs-popover-bottom {
> .popover-arrow {
&::before {
border-bottom-color: var(--border-color);
}
&::after {
border-bottom-color: var(--main-bg-color);
}
}
}
.bs-popover-start {
> .popover-arrow {
&::before {
border-left-color: var(--border-color);
}
&::after {
border-left-color: var(--main-bg-color);
}
}
}
And replace --main-bg-color, --border-color, and --font-color with yours.