SASS - Outputting to the same declaration? - sass
I'm trying to get this CSS file to have both .box-shadow and .card-box-shadow .pagebuilder-column on the same declaration but haven't really found a way, other than manually doing it in CSS which kinda defeats the purpose, I know it's a small thing and it may be the point where I should just do it in CSS but, there must be a way!
SCSS:
.box-shadow {
box-shadow: $box-shadow;
&--light {
box-shadow: $box-shadow--light;
}
&--strong {
box-shadow: $box-shadow--strong;
}
&__spread {
box-shadow: $box-shadow__spread;
&--light {
box-shadow: $box-shadow__spread--light;
}
&--strong {
box-shadow: $box-shadow__spread--strong;
}
}
&__concise {
box-shadow: $box-shadow__concise;
&--light {
box-shadow: $box-shadow__concise--light;
}
&--strong {
box-shadow: $box-shadow__concise--strong;
}
}
}
.card-box-shadow {
& .pagebuilder-column {
box-shadow: $box-shadow;
}
&--light {
& .pagebuilder-column {
box-shadow: $box-shadow--light;
}
}
&--strong {
& .pagebuilder-column {
box-shadow: $box-shadow--strong;
}
}
&__spread {
& .pagebuilder-column {
box-shadow: $box-shadow__spread;
}
&--light {
& .pagebuilder-column {
box-shadow: $box-shadow__spread--light;
}
}
&--strong {
& .pagebuilder-column {
box-shadow: $box-shadow__spread--strong;
}
}
}
&__concise {
& .pagebuilder-column {
box-shadow: $box-shadow__concise;
}
&--light {
& .pagebuilder-column {
box-shadow: $box-shadow__concise--light;
}
}
&--strong {
& .pagebuilder-column {
box-shadow: $box-shadow__concise--strong;
}
}
}
}
Current output:
.box-shadow {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.box-shadow--light {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 4px;
}
.box-shadow--strong {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 4px 8px 4px;
}
.box-shadow__spread {
box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 28px 6px, rgba(0, 0, 0, 0.1) 0px 2px 4px 1px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
}
.box-shadow__spread--light {
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 6px;
}
.box-shadow__spread--strong {
box-shadow: rgba(0, 0, 0, 0.56) 0px 15px 50px 6px;
}
.box-shadow__concise {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.box-shadow__concise--light {
box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.box-shadow__concise--strong {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px 3px, rgba(0, 0, 0, 0.23) 0px 3px 6px 3px;
}
.card-box-shadow .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.card-box-shadow--light .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 4px;
}
.card-box-shadow--strong .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 4px 8px 4px;
}
.card-box-shadow__spread .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 28px 6px, rgba(0, 0, 0, 0.1) 0px 2px 4px 1px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
}
.card-box-shadow__spread--light .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 6px;
}
.card-box-shadow__spread--strong .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.56) 0px 15px 50px 6px;
}
.card-box-shadow__concise .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.card-box-shadow__concise--light .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.card-box-shadow__concise--strong .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px 3px, rgba(0, 0, 0, 0.23) 0px 3px 6px 3px;
}
/*# sourceMappingURL=box-shadow.css.map */
Desired output:
.box-shadow,
.card-box-shadow .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.box-shadow--light,
.card-box-shadow--light .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 4px;
}
.box-shadow__concise,
.card-box-shadow__concise .pagebuilder-column {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.box-shadow__concise--light,
.card-box-shadow__concise--light .pagebuilder-column {
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
So far this is the only way to make it output the same, is there a way of using a mixin to avoid this?
.box-shadow, .card-box-shadow .pagebuilder-column {
box-shadow: $box-shadow;
}
.box-shadow--light, .card-box-shadow--light .pagebuilder-column {
box-shadow: $box-shadow--light;
}
.box-shadow--strong, .card-box-shadow--strong .pagebuilder-column {
box-shadow: $box-shadow--strong;
}
.box-shadow__spread, .card-box-shadow__spread .pagebuilder-column {
box-shadow: $box-shadow__spread;
}
.box-shadow__spread--light, .card-box-shadow__spread--light .pagebuilder-column {
box-shadow: $box-shadow__spread--light;
}
.box-shadow__spread--strong, .card-box-shadow__spread--strong .pagebuilder-column {
box-shadow: $box-shadow__spread--strong;
}
.box-shadow__concise, .card-box-shadow__concise .pagebuilder-column {
box-shadow: $box-shadow__concise;
}
.box-shadow__concise--light, .card-box-shadow__concise--light .pagebuilder-column {
box-shadow: $box-shadow__concise--light;
}
.box-shadow__concise--strong, .card-box-shadow__concise--strong .pagebuilder-column {
box-shadow: $box-shadow__concise--strong;
}
After some trial and error this is what I went for:
//this is in the mixin file
#mixin box-shadow-color($color, $add-class: false, $name) {
$shadow-color: $color;
$box-shadow: set-box-shadow-color($shadow-color, 0.35) 0px 5px 15px;
$box-shadow--strong: set-box-shadow-color($shadow-color, 0.19) 0px 10px 20px,
set-box-shadow-color($shadow-color, 0.23) 0px 4px 8px 4px;
$box-shadow--light: set-box-shadow-color($shadow-color, 0.1) 0px 4px 12px 4px;
$box-shadow__concise--light: set-box-shadow-color($shadow-color, 0.25) 0px 2px 5px -1px,
set-box-shadow-color($shadow-color, 0.3) 0px 1px 3px -1px;
$box-shadow__concise: set-box-shadow-color($shadow-color, 0.16) 0px 3px 6px,
set-box-shadow-color($shadow-color, 0.23) 0px 3px 6px;
$box-shadow__concise--strong: set-box-shadow-color($shadow-color, 0.16) 0px 3px 6px 3px,
set-box-shadow-color($shadow-color, 0.23) 0px 3px 6px 3px;
$box-shadow__spread: set-box-shadow-color($shadow-color, 0.2) 0px 8px 28px 6px,
set-box-shadow-color($shadow-color, 0.1) 0px 2px 4px 1px,
set-box-shadow-color($shadow-color, 0.05) 0px 0px 0px 1px inset;
$box-shadow__spread--light: set-box-shadow-color($shadow-color, 0.15) 0px 5px 15px 6px;
$box-shadow__spread--strong: set-box-shadow-color($shadow-color, 0.56) 0px 15px 50px 6px;
#if $add-class {
.box-shadow--#{$name},
.card-box-shadow .pagebuilder-column {
box-shadow: $box-shadow;
}
.box-shadow--light--#{$name},
.card-box-shadow--light--#{$name} .pagebuilder-column {
box-shadow: $box-shadow--light;
}
.box-shadow--strong--#{$name},
.card-box-shadow--strong--#{$name} .pagebuilder-column {
box-shadow: $box-shadow--strong;
}
.box-shadow__spread--#{$name},
.card-box-shadow__spread--#{$name} .pagebuilder-column {
box-shadow: $box-shadow__spread;
}
.box-shadow__spread--light--#{$name},
.card-box-shadow__spread--light--#{$name} .pagebuilder-column {
box-shadow: $box-shadow__spread--light;
}
.box-shadow__spread--strong--#{$name},
.card-box-shadow__spread--strong--#{$name} .pagebuilder-column {
box-shadow: $box-shadow__spread--strong;
}
.box-shadow__concise--#{$name},
.card-box-shadow__concise--#{$name} .pagebuilder-column {
box-shadow: $box-shadow__concise;
}
.box-shadow__concise--light--#{$name},
.card-box-shadow__concise--light--#{$name} .pagebuilder-column {
box-shadow: $box-shadow__concise--light;
}
.box-shadow__concise--strong--#{$name},
.card-box-shadow__concise--strong--#{$name} .pagebuilder-column {
box-shadow: $box-shadow__concise--strong;
}
}
#else {
.box-shadow,
.card-box-shadow .pagebuilder-column {
box-shadow: $box-shadow;
}
.box-shadow--light,
.card-box-shadow--light .pagebuilder-column {
box-shadow: $box-shadow--light;
}
.box-shadow--strong,
.card-box-shadow--strong .pagebuilder-column {
box-shadow: $box-shadow--strong;
}
.box-shadow__spread,
.card-box-shadow__spread .pagebuilder-column {
box-shadow: $box-shadow__spread;
}
.box-shadow__spread--light,
.card-box-shadow__spread--light .pagebuilder-column {
box-shadow: $box-shadow__spread--light;
}
.box-shadow__spread--strong,
.card-box-shadow__spread--strong .pagebuilder-column {
box-shadow: $box-shadow__spread--strong;
}
.box-shadow__concise,
.card-box-shadow__concise .pagebuilder-column {
box-shadow: $box-shadow__concise;
}
.box-shadow__concise--light,
.card-box-shadow__concise--light .pagebuilder-column {
box-shadow: $box-shadow__concise--light;
}
.box-shadow__concise--strong,
.card-box-shadow__concise--strong .pagebuilder-column {
box-shadow: $box-shadow__concise--strong;
}
}
}
//box-shadow.scss file
#use "utilities" as *;
#include box-shadow-color($black, false, none);
Related
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/
Using scss/sass trailing ampersand to target one level back
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;
}
}
}
Scss Button Mixin
I've been trying to troubleshoot this for hours but I just don't understand what I'm doing wrong. Maybe it's not me and it's a glitch in codekit? I have built a scss button mixin.
#mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false) {
display: inline-block;
width: auto;
border: 0;
border-radius: 4px;
text-align: center;
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 1px 2px rgba(102,190,255,.75);
color: $textcolor;
text-decoration: none;
#include font(normal);
#include transition(box-shadow 150ms ease);
&:hover{
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
}
&:active{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset
}
// Background
#if ($background == 'blue') {
/* #include gradient(#1673b9, #125e97); */
background: blue;
} #else if ($background == 'grey') {
/* #include gradient($grey-light, $grey-dark); */
background: grey;
}
// Sizes
#if $size == small {
}
#if $size == medium {
height: 32px;
line-height: 32px;
padding: 0 18px;
font-size: 14px;
}
#if $size == large {
}
#if $fullWidth == true {
width: 100%;
display: block;
}
}
The sizes and full-size conditionals work just fine. But the Background does not. It just doesn't do anything. For now the Scss that uses it is:
<div id="main-header">
Create New Content
Download CSV
</div>
.btn{
&.create{
#include btn(blue);
}
&.download{
#include btn(grey);
}
}
With that, I should be seeing two different color buttons. The markup and Scss will be improved but this is what it is for testing purposes. It seems to work fine here: http://sassmeister.com/gist/da3707a3e03609f8991c
Any help or suggestions will be greatly appreciated. Thanks!
Oh, as I looked over this question, I noticed I pasted the mixin that has #if ($background == 'blue'){ I have tried that without single quotes and without parentheses.
The condition should be
if($background == blue)
Also you have 2 other mixins inside which you should resolve or remove
#include font(normal);
#include transition(box-shadow 150ms ease);
Here's the whole SCSS file:
$white:white;
#mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false)
{
&:hover
{
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
}
&:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
// Background
#if ($background == blue)
{
background: blue;
}
#else if ($background == 'grey')
{
background: grey;
}
// Sizes
#if $size == small
{
}
#if $size == medium
{
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
}
#if $size == large
{
}
#if $fullWidth == true
{
display: block;
width: 100%;
}
}
.btn
{
&.create
{
}
&.download
{
}
}
and its generated CSS:
.btn.create
{
background: blue;
border: 0;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
color: white;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
text-align: center;
text-decoration: none;
width: auto;
}
.btn.create:hover
{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.create:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
.btn.download
{
border: 0;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
color: white;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
text-align: center;
text-decoration: none;
width: auto;
}
.btn.download:hover
{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.download:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
Auto-number pictures
I have an entertainment blog with a lot of pictures. Can someone please help me with a code that auto-numbers the pictures inside a post? (eg: www.chive.com, www.acidcow.com)
This is my CSS for pictures if it helps for anything...
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 0px solid $(image.border.color);
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}
CSS3 Animation | Simple issue
I have the following CSS code :
#keyframes hvr_shadow
{
from
{
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
to
{
box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
}
#-moz-keyframes hvr_shadow /* Firefox */
{
from
{
-moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
to
{
-moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
}
#-webkit-keyframes hvr_shadow /* Safari and Chrome */
{
from
{
-webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
to
{
-webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
}
#gallery .fancybox
{
border: 1px solid #333;
display: block;
padding: 0;
margin: 0;
height: 138px;
-moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
-webkit-box-shadow: 0px 0px 0px rgba(60, 60, 60, 0.5);
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
#gallery .fancybox:hover
{
animation: hvr_shadow 700ms;
-moz-animation: hvr_shadow 700ms; /* Firefox */
-webkit-animation: hvr_shadow 700ms; /* Safari and Chrome */
-o-animation: hvr_shadow 700ms; /* Opera */
}
While the animation is working, after a while the shadow auto return to primary settings.
How can I keep the settings of the animation while the mouse is still hovering the image ?
Here you can find a Fiddle demo : http://jsfiddle.net/haX8j/
This will solve your problem: -webkit-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards; -moz-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards; -o-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards; animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards; JS Fiddle: http://jsfiddle.net/haX8j/1/
Actually I think you are better off using a transition. It's far simpler, it works with Firefox and it will fade out correctly when moving off the link:
.link
{
-moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
-webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}
.link:hover
{
-moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
-webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
Here is a fiddle example. I've made the shadow much bigger so you can see the effect more clearly: http://jsfiddle.net/DYdZs/