Using scss/sass trailing ampersand to target one level back - sass

I have two types of circles, one inside of .poi.licensed and one inside of .poi.unlicensed. I am trying to make it so that the .circle inside of .poi.unlicensed has a $tangerine border instead of $turqoise. How can I used the trailing amerpsand to do so in this situation. Keep in mind that there is a lot of other scss that I am excluding that is unrelated, so it has to stay in this general structure.
I was trying something along the lines of the following, but it compiles to .unlicensed #licensed-v-unlicensed .poi .circle {}
$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
.poi {
.circle {
border: 5px solid transparentize($turqoise, 0.1);
.unlicensed & {
border: 5px solid transparentize($tangerine, 0.1);
}
#include breakpoint(medium up) {
border-width: 10px;
}
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
}
}

I ended up using a trick I found on this blog, which was to use #at-root in order to start at the root and target the .unlicensed class. It's a lot more work than I had hoped to do, but the only solution discovered thus far.
$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
.poi {
.circle {
border: 5px solid transparentize($turqoise, 0.1);
#at-root #licensed-v-unlicensed .poi.unlicensed .circle {
border: 5px solid transparentize($tangerine, 0.1);
}
#include breakpoint(medium up) {
border-width: 10px;
}
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
}
}

Related

How to override scss variables correctly?

I have the following scss which sets tooltip arrow direction. The size of the tooltip is a variable that I would like to override when the .tooltip-large class is present. For whatever reason the 12px value is being used regardless of the class. What might I be doing wrong here?
<div class="tooltip-arrow tooltip-arrow-up">This tooltip arrow should be 6px</div>
<div class="tooltip-arrow tooltip-arrow-up tooltip-large">This tooltip arrow should be 12px</div>
.tooltip-arrow {
$triangleSize: 6px;
&.tooltip-large {
$triangleSize: 12px;
}
&::after {
content: '';
display: block;
height: 0;
width: 0;
position: absolute;
}
&-down::after {
border-left: $triangleSize solid transparent;
border-right: $triangleSize solid transparent;
border-top: $triangleSize solid mat-color($background, tooltip);
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
}
&-up::after {
border-left: $triangleSize solid transparent;
border-right: $triangleSize solid transparent;
border-bottom: $triangleSize solid mat-color($background, tooltip);
top: 0;
left: 50%;
transform: translate(-50%, -100%);
}
&-left::after {
border-top: $triangleSize solid transparent;
border-bottom: $triangleSize solid transparent;
border-right: $triangleSize solid mat-color($background, tooltip);
left: 0;
top: 50%;
transform: translate(-100%, -50%);
}
&-right::after {
border-top: $triangleSize solid transparent;
border-bottom: $triangleSize solid transparent;
border-left: $triangleSize solid mat-color($background, tooltip);
right: 0;
top: 50%;
transform: translate(100%, -50%);
}
}
There is a fundamental difference between SCSS and CSS variables.
SCSS variables ($xxx) are imperative, meaning that values overwritten in a different scope remain saved in the reference.
CSS variables (var(--xxx, <potential-fallback-value>)) are declarative, which means their value stays the same for all calls, but a selector may hold a changed value, which will only stay as long as that selector matches.
Here's a comparison I made. SCSS variables:
Refs:
$x: 1
$y: 2
$z: 3
...
CSS vars:
Refs:
--x:
':root': 1
.some-class: 2
--y:
':root': 2
.some-class: 3
...
So, here you should be using CSS var()s, not SCSS $variables. The former one also has good browser support, so you shouldn't worry.
Not sure how to override the variable correctly... but here's the solution I went with:
&.tooltip-large::after {
border-width: 12px;
}

Getting the checked value of a checkbox - Material Design

I have a page that uses a basic bootstrap based Admin BSB Material Design layout
I am having difficulty getting a value from the checkboxes in this design.
Example checkbox that is 'checked':
I am seeing cypress having no luck finding the checkbox control even if i add a data-cypress="mycheckbx" attribute.
So my questions is: how do I obtain the 'checked' property in this scenario?
Styles Used:
[type="checkbox"].filled-in:not(:checked)+label:before {
width: 0;
height: 0;
border: 3px solid transparent;
left: 6px;
top: 10px;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 20% 40%;
transform-origin: 100% 100%
}
[type="checkbox"].filled-in:not(:checked)+label:after {
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid #5a5a5a;
top: 0;
z-index: 0
}
[type="checkbox"].filled-in:checked+label:before {
top: 0;
left: 1px;
width: 8px;
height: 13px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%
}
[type="checkbox"].filled-in:checked+label:after {
top: 0;
width: 20px;
height: 20px;
border: 2px solid #26a69a;
background-color: #26a69a;
z-index: 0
}
Since none of the solutions above worked for me, I did this :
cy.get('#element').should('be.checked')
source : cypress documentation
The opposite (unchecked) assertion would be (see the official docs):
cy.get('#element').should('not.be.checked')
It seems all I needed to do was:
cy.get('#pract-haspen').should('have.attr', 'checked')
and that Assertion worked!
Thanks
This answers ask the question with an assert test in mind.
If you want to get the value and use it somewhere, you can simply:
cy.get('#elementQuery').then(elem => {
var value = elem.val()
...do anything you want, like if(value == 'on')...
})
If attr doesn't work for you, try prop:
cy.get('#pract-haspen').should('have.prop', 'checked')

can i attach arrow with the tooltip in d3?

I have my chart fiddle here. I want to make tooltip with an arrow. Can i do that in d3?attached fiddle of graph
css for the tooltip for now-
.hor_tooltip {
position: absolute;
width: 50px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
display:none
You can add
.hor_tooltip:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 10px;
margin-top: -10px;
}
See https://jsfiddle.net/c74eoo2b/12/

compass (scss) variables & media queries [duplicate]

This question already has answers here:
Using Sass Variables with CSS3 Media Queries
(8 answers)
Closed 7 years ago.
I'm trying to do something like this:
$arrow-size: 30px;
#media only screen and (max-width: 449px) {
$arrow-size: 15px;
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: $arrow-size solid white;
border-left: $arrow-size solid transparent;
border-right: $arrow-size solid transparent;
}
Unfortunately, $arrow-size does not change according to the media query (my arrow is always 15px, even if my window is wider than 449px).
Any idea ? Or am I taking the problem the wrong way ?
As an alternative, try using the power of em's:
$arrow-size: 1.875em; // 30px, use pxtoem.com for conversion
div.selector {
height: 0px; width: 0px;
position: absolute;
bottom: 0px; left: 50%;
border-bottom: $arrow-size solid white;
border-left: $arrow-size solid transparent;
border-right: $arrow-size solid transparent;
}
#media only screen and (max-width: 449px) {
div.selector { font-size: 50%; }
}
Since the em is relative to the font-size, all you gotta do is play with that value to change the size of the arrow across different responsive states.
I would use a mixin:
#mixin arrow($size) {
border: $size;
}
Then you can use it in your media query like this (combined with a variable):
$arrowSize: 30px;
#media only screen and (max-width: 449px) {
div.selector {
#include arrow($arrowSize / 2);
}
}
div.selector {
#include arrow($arrowSize);
}
I think you did not understand how works SASS / Compass and media queries.
Variables are transformed by the compiler before being sent to the client as opposed to media queries that are interpreted by the browser's CSS engine as well as conventional selectors (id, class, tag)
The compiler does not interpret the media query as a condition, simply because at the time of compilation, the screen size is not defined, and especially because it is not his job.
Here is a simplified version of what happens:
1 $arrow-size: 30px; "ok, I set a new variable arrow-size to 30px"
3 #media only screen and (max-width: 449px) { "ok, a new selector...
syntax is correct, I'll look later if the brace is closed."
4 $arrow-size: 15px; "ok, I set the arrow-size variable to 15px"
5 } "ok, brace is closed"
...
13 border-bottom: $arrow-size solid white; "A new css rule, syntax ok... oh, I have to replace a variable ! How much for $arrow-size ? Oh yes, 15px, I change it."
In result, the compiled CSS file will be :
screen.css
#media only screen and (max-width: 449px) {
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: 15px solid white;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
you can also put your media queries into selectors :
$arrow-normal-size: 30px;
$arrow-small-size: 15px;
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: solid white;
border-left: solid transparent;
border-right: solid transparent;
border-width: $arrow-normal-size;
#media only screen and (max-width: 449px) {
border-width: $arrow-small-size;
}
}
or use a mixin :
a little bit useless in this specific case
#mixin responsive-border($max-screen-width, $border-width){
#media only screen and (max-width: #{$max-screen-width}) {
border-width: $border-width;
}
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: solid white;
border-left: solid transparent;
border-right: solid transparent;
border-width: 30px;
#include responsive-border(449px,15px);
}

CSS: How to automatically resize a circular image as a window resizes?

I'm using this CSS to create a circular image 220px wide, centered within its container (a 3-column span of an 1180px grid):
.circular-image {
display: block;
margin: 0 auto;
width: 220px;
height: 220px;
border-radius: 110px;
-webkit-border-radius: 110px;
background: url(images/some-image.png);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
And I know that you can cause images to automatically rescale using:
img {
height: auto;
}
How do I do this for circular images?
What is the exact problem with circular images? If you have problems with the "roundness" of the image you should change the border-radius property to a relative value:
.circular-image {
display: block;
margin: 0 auto;
width: 75%;
height: auto;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
Here is a working jsFiddle.
border-radius: 50%; will make an element round for what ever size it is (so long as the width and height are the same).

Resources