.checkbox-group {
position: relative;
padding-left: 30px;
input[type="checkbox"] {
height: 20px;
width: 20px;
margin: 0;
position: absolute;
opacity: 0;
left: 0;
z-index: 1;
&:checked {
+ .pseudo-checkbox {
background: red;
background: url("../../images/tick.png") no-repeat;
}
}
}
span.pseudo-checkbox {
height: 20px;
width: 20px;
display: inline-block;
border: 1px solid $input-border;
//background-color: #fff;
position: absolute;
left: 0;
}
}
When using sibling selector and background image, sass watch compiler goes into infinite loop (using laravel mix). Her i have included my sass. If I comment the background, the compilation works good.
Make sure to add the image to the original folder before compiling not the after compiling folder, i usually have the same problem but solve it by naming the before compiling img and the compiler will create new one it will name it images,
Related
The problem is very simple to explain.
This is the input:
.a {
position: relative;
overflow: hidden;
width: 960px;
background: #a3c1ef;
height: 100%;
margin: 0 auto;
> &-b {
list-style: none;
> &-c {
display: inline-block;
color: blue;
font-size: 100px;
}
}
}
This is the expected output:
.a {
position: relative;
overflow: hidden;
width: 960px;
background: #a3c1ef;
height: 100%;
margin: 0 auto;
}
.a > a-b {
list-style: none;
}
.a > a-b > a-b-c {
display: inline-block;
color: blue;
font-size: 100px;
}
and this is the actual output I'm getting:
.a {
position: relative;
overflow: hidden;
width: 960px;
background: #a3c1ef;
height: 100%;
margin: 0 auto;
}
> .a-b {
list-style: none;
}
> > .a-b-c {
display: inline-block;
color: blue;
font-size: 100px;
}
When I remove the root selector &, the output is as expected: a > b > c. But when I use the root selector & in combination with the direct descendant selector >, the output is the above. This behavior is so counter-intuitive.
Can someone explain how to fix it (if it's possible)?
SASS compiler version: 1.12.0
You have to start by copying the parent selector ahead of the > and then dive through it. The third child however will be output as .a > .a-b > .a > .a-b-c {} so it is easier to step out a level and start again like in my example.
I have created a sassmeister example for you based off of your example that should do the trick. Hope that helps.
Other Tips on using the & that might help
In SASS's class selecter, I want to select parent's sibling.
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
// textarea:disabled & {
// background: #efefef;
// }
}
Compiled above sass code,
.bw-textarea textarea:disabled {
background: #efefef;
}
But I want to show result like this css code...
How to select like this in sass?
textarea.bw-textarea:disabled {
background: #efefef;
}
You gotta use #root in this case. It's pretty simple
This link will give a clear idea about this selector
.bw-textarea {
#at-root textarea#{&}:disabled{
background: cyan;
}
}
This will compile to
textarea.bw-textarea:disabled {
background: cyan;
}
See this PEN
This is what your looking for:
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
&:disabled {
background: #efefef;
}
}
Check out this SO answer for a lil more idea on the nested pseudo selectors
Sass parent selector and hover?
And of course check the sass docs
https://sass-lang.com/documentation/file.SASS_REFERENCE.html
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);
}
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;