I have a #mixin call skewed in SASS.
#mixin skewed {
position: relative;
&::before {
content: '';
display: block;
width: 100%;
height: 50px;
position: absolute;
transform: skewY(-2deg);
#content;
}
&::after {
content: '';
display: block;
width: 100%;
height: 50px;
position: absolute;
transform: skewY(-2deg);
#content;
}
}
From above, you can see that there has #content inside "before" and "after".
The below is the "footer" class, how to pass the content to "before" but not "after".
footer {
padding: 2em 0 0;
height: 100px;
background-color: $color-shade;
margin-top: 3.5em;
#include skewed {
background-color: red;
top: -25px;
}
}
You can add a default variable and a conditional.
DEMO
#mixin skewed($doesAfterHaveContent: false) {
position: relative;
&::before {
content: '';
display: block;
width: 100%;
height: 50px;
position: absolute;
transform: skewY(-2deg);
#content;
}
&::after {
content: '';
display: block;
width: 100%;
height: 50px;
position: absolute;
transform: skewY(-2deg);
#if ($doesAfterHaveContent) { #content; }
}
}
.footer {
#include skewed {
color: red;
}
}
.hey {
#include skewed(true) {
color: red;
}
}
Related
I'm trying to change the after pseudo element when the .active class is added, but this doesn't seem to be working correctly.
I'm currently using scss in my project with Vue. I've already tried the following:
li {
position: relative;
&::after {
opacity: 0;
bottom: -10px;
left: 0;
position: absolute;
content: "";
width: 0%;
height: 3px;
background: $light-blue;
}
}
// When this class is present, adjust the pseudo element to different width
.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
li::after {
opacity: 1;
width: 60%;
}
}
I've also tried the following as well
.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
&::after {
opacity: 1;
width: 60%;
}
}
What would be the correct way to adjust the pseudo element from the li element through another class?
In SCSS:
li {
position: relative;
&::after {
opacity: 0;
bottom: -10px;
left: 0;
position: absolute;
content: "";
width: 0%;
height: 3px;
background: $light-blue;
}
&.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
&::after {
opacity: 1;
width: 60%;
}
}
}
Compiled to the following code in CSS:
li {
position: relative;
}
li::after {
opacity: 0;
bottom: -10px;
left: 0;
position: absolute;
content: "";
width: 0%;
height: 3px;
background: $light-blue;
}
li.active {
color: $light-blue;
display: flex;
flex-direction: column;
position: relative;
}
li.active::after {
opacity: 1;
width: 60%;
}
I'm using a standard webpack build with SCSS variables and mixins. For some reason, I cannot get styles to override in a media query on one section on this site unless I put the same media query in a previous section where the breakpoints were used. Here's my code:
_variables.scss
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
_mixins.scss
#mixin sm-screen {
#media screen and (min-width: #{$sm-screen}) {
#content;
}
}
#mixin md-screen {
#media screen and (min-width: #{$md-screen}) {
#content;
}
}
#mixin lg-screen {
#media screen and (min-width: #{$lg-screen}) {
#content;
}
}
#mixin xl-screen {
#media screen and (min-width: #{$xl-screen}) {
#content;
}
}
#mixin screen-size($screen) {
#media screen and (min-width: $screen) {
#content;
}
}
main.scss (where files are being imported)
#import "/base/variables";
#import "/base/mixins";
#import "home";
_home.scss (here's where the problems are)
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
.hero-heading {
font-size: 2rem;
}
#include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
#include lg-screen {
.hero-heading {
font-size: 6.5rem;
}
}
#include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
...and as you would expect, the font size overrides correctly:
// ————————————————————————————————————————————————————————————
// INTRO SECTION (where things get buggy)
// ————————————————————————————————————————————————————————————
#intro-section {
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
#include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
}
#include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
}
}
}
When I use the same mixins in this section, the medium breakpoint overrides the xl breakpoint:
Here's the kicker:
When I add a medium breakpoint to the HERO SECTION code, then the breakpoints work as expected in the INTRO SECTION:
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
.hero-heading {
font-size: 2rem;
}
#include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
#include md-screen {
.hero-heading {
font-size: 5rem;
}
}
#include lg-screen {
.hero-heading {
font-size: 6.5rem;
}
}
#include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
#intro-section {
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
#include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
}
#include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
}
}
}
Why is this?!
EDIT:
Here's my whole _home.scss and _variables.scss files. When I comment out all of HERO SECTION, everything else works fine. There has to be a bug in the HERO SECTION, but I'm just not catching it.
_variables.scss
// ————————————————————————————————————————————————————————————
// COLORS
// ————————————————————————————————————————————————————————————
$grey-01: #181F2C;
$grey-02: #70849f;
$grey-03: #E0E5EE;
$blue-01: #A0AFC3;
$green-01: #0C7C25;
$green-01-hover: darken($green-01, 8%);
// ————————————————————————————————————————————————————————————
// GENERAL
// ————————————————————————————————————————————————————————————
$dur: 0.25s;
$skew: 32;
// ————————————————————————————————————————————————————————————
// BREAKPOINTS
// ————————————————————————————————————————————————————————————
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
_home.scss
body.home {
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: stretch;
.left-side,
.right-side {
width: 50%;
overflow: hidden;
position: relative;
background: $grey-01;
flex-grow: 1;
will-change: width;
transition: width $dur ease;
&.tap-active {
width: 150%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.hero-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: skew(#{$skew}deg);
transition: all $dur ease;
margin: 0 #{$skew}vh;
width: calc(100vw - 10%);
}
.hero-heading {
font-size: 22vw;
text-align: center;
line-height: 0.9;
.h-underline {
background: none;
}
}
.hero-btn {
margin-top: 30px;
#media screen and (max-width: $lg-screen - 1px) {
&.btn-disabled {
pointer-events: none;
}
}
}
.hero-img {
background: transparent center center/cover no-repeat;
background-blend-mode: luminosity;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skew(#{$skew}deg);
transition: all $dur ease;
}
.left-side {
transform: skew(-#{$skew}deg);
margin-left: -#{$skew}vh;
margin-right: 1px;
.hero-content {
right: -#{$skew}vh;
margin: 0 #{$skew}vh 0 0;
}
.hero-btn {
margin-bottom: 20vh;
}
.hero-img {
right: -#{$skew}vh;
}
}
.right-side {
transform: skew(-#{$skew}deg);
margin-right: -#{$skew}vh;
margin-left: 1px;
.hero-content {
left: -#{$skew}vh;
}
.hero-heading {
margin-top: 20vh;
}
.hero-img {
left: -#{$skew}vh;
}
}
#include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
#include lg-screen {
.left-side,
.right-side {
.hero-content {
margin: 0;
}
&:hover {
width: 70%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
width: 50vw;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.left-side {
.hero-content {
margin-left: -#{$skew}vh;
}
.hero-btn {
margin-bottom: 0;
}
}
.right-side {
.hero-heading {
margin-top: 0;
}
}
}
#include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
// ————————————————————————————————————————————————————————————
// CLIENT LOGOS
// ————————————————————————————————————————————————————————————
#client-logos {
padding: 15px 0;
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 25%;
max-width: 100px;
top: 0;
z-index: 1;
pointer-events: none;
}
&:before {
left: 0;
background: linear-gradient(to right, white, white 15%, rgba(white, 0));
}
&:after {
right: 0;
background: linear-gradient(to left, white, white 15%, rgba(white, 0));
}
.glide__slides {
align-items: center;
}
.glide__slide {
display: flex;
align-items: center;
justify-content: center;
}
.client-logo {
display: block;
max-width: 100%;
max-height: 15vw;
}
#include screen-size(800px) {
padding: 25px 0;
.client-logo {
max-height: 70px;
max-width: 125px;
}
}
}
// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
#intro-section {
background: $grey-01 center center/cover no-repeat;
padding: 60px 0;
color: white;
text-align: center;
.intro-heading {
margin-bottom: 30px;
}
.intro-text {
margin-bottom: 40px;
}
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
.icon-wrapper {
display: block;
padding-top: 75px;
background: center top/65px no-repeat;
margin-bottom: 25px;
position: relative;
&:not(:last-of-type):after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
width: 45px;
height: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
&:last-of-type {
margin-bottom: 0;
.icon-heading {
padding-bottom: 0;
}
}
.icon-heading {
padding-bottom: 25px;
}
}
#include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
&:before,
&:after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&:before {
width: 1px;
height: 80%;
}
&:after {
width: 80%;
height: 1px;
}
}
.icon-wrapper {
margin: 30px;
&:not(:last-of-type):after {
display: none;
}
.icon-heading {
padding: 0;
}
}
}
#include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
&:before,
&:after {
display: none;
}
}
.icon-wrapper {
margin: 0;
padding-right: 60px;
padding-left: 60px;
&:not(:last-of-type):after {
display: block;
height: 45px;
width: 1px;
left: 100%;
bottom: 50%;
transform: translate(0, 50%);
}
}
}
}
// ————————————————————————————————————————————————————————————
// FEATURED VIDEO
// ————————————————————————————————————————————————————————————
#featured-video {
position: relative;
.video-poster {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 4;
#include flex-center;
text-align: center;
// background: url(../assets/images/video-poster.jpg) center bottom/cover no-repeat $orange-01;
}
.fancy-title {
display: none;
}
h2 {
display: none;
}
.play-video-btn {
// #extend .btn-text;
cursor: pointer;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
margin-top: 26px;
&:before {
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 26px solid white;
margin-bottom: 32px;
margin-right: -9px;
}
&:after {
content: "";
position: absolute;
width: 75px;
height: 75px;
border-radius: 50%;
border: 2px solid white;
transition: all 0.2s ease;
top: -27px;
left: 50%;
transform: translateX(-50%);
}
&:hover,
&:focus {
&:after {
transform: translateX(-50%) scale(1.1);
}
}
}
#include sm-screen {
h2 {
display: block;
color: white;
font-size: 10vw;
margin-bottom: 5%;
}
}
#include md-screen {
.fancy-title {
display: inline-block;
}
}
#include xl-screen {
h2 {
font-size: 8rem;
}
}
}
}
I was able to get this working using a single class name with all the #includes contained therein. This renders each #media query block in the linear order in which you are declaring it.
#hero-section {
.hero-heading {
font-size: 2rem;
#include sm-screen {
font-size: 5rem;
}
#include lg-screen {
font-size: 6.5rem;
}
#include xl-screen {
font-size: 6.5rem;
}
}
}
#intro-section {
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
#include md-screen {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
#include xl-screen {
display: flex;
max-width: none;
justify-content: center;
}
}
}
jsFiddle
It's possible to rotate only content?
div:after {
content: "10";
background-color: fuchsia;
display: inline-block;
transform: rotate(30deg);
font-size: 30px;
}
Example image:
Nope, it's not possible. But you can utilize both :before and :after to achieve that:
div {
position: relative;
}
div:after{
content: "10";
display: inline-block;
transform: rotate(30deg);
font-size: 30px;
position: absolute;
left: 10;
}
div:before{
content: "";
background-color: fuchsia;
display: inline-block;
height: 35px;
width: 35px;
position: absolute;
left: 10;
}
<div></div>
I'm trying to keep my code as DRY as possible. Consider this example:
#parent {
position: relative;
#child {
position: absolute;
top: 0;
left: 0;
}
}
Now I want to add a hover effect on the #parent that will alter the #child. I know I can do it like this:
#parent {
position: relative;
#child {
position: absolute;
top: 0;
left: 0;
}
&:hover #child {
transform: scale(1.2, 1.2);
}
}
But I'm not happy with this solution. It isn't completely DRY because #child is declared twice. Another way to do it is like this:
#parent {
position: relative;
}
#child {
position: absolute;
top: 0;
left: 0;
#parent:hover & {
transform: scale(1.2, 1.2);
}
}
This is arguably more semantic, but no more DRY because #parent is declared twice.
Is there a truly DRY way to do this with SASS?
I have minimum of 5 beautiful ways to do it. i will share 1, if you want more i can share more as well.
Using Functions
#mixin onParentHover() {
$rootString: #{&};
$parentIndex: str-index($rootString, " ");
$parent: str_slice($rootString, 0, $parentIndex - 1);
$children: str_slice($rootString, $parentIndex);
#at-root #{$parent}:hover #{$children} {
#content;
}
}
Usage
#parent {
position: relative;
width: 100px;
height: 100px;
#child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
#include onParentHover {
transform: scale(1.2, 1.2);
}
}
}
The Final output
#parent {
position: relative;
width: 100px;
height: 100px;
}
#parent #child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#parent:hover #child {
text-size: 20px;
}
I have a codepen below. Basically, I'm trying to show a popup on hover of the highlighted circles (red), however some highlighted circles are showing up above some of the popups, even when the popups are always given a higher z-index all the time.
http://codepen.io/Wolfmans55/pen/jPwKqZ
This is the animation used for the popup, which I believe maybe the culprit.
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
Take out the z-index setting on .white-popup and set a higher z-index on .white-popup:hover .popup and .white:hover.
see jsfiddle
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
html {
height: 100%;
}
body {
background: #343837;
transition: opacity .25s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
overflow: hidden;
}
.show-body {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.page {
background: #343837;
font-family: 'Roboto', sans-serif;
font-size: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
}
.page-2 {
left: auto;
right: -100%;
background: blue;
}
.prev-page,
.next-page {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: red;
}
.next-page {
right: 20px;
}
.prev-page {
left: 20px;
}
.page-wrapper {
position: absolute;
top: 50%;
margin-top: -303px;
width: 100%;
}
.header_section {
text-shadow: 1px 1px 1px #000;
font-size: 2em;
}
h1 {
margin: 0;
}
.blue_title {
color: #54c8e7;
font-weight: normal;
}
.primary_title {
font-size: 4em;
margin-top: -34px;
margin-bottom: 20px;
}
.sub_title {
position: relative;
font-size: 1em;
background: #343837;
padding: 0 4px;
display: inline-block;
}
.sub_title_divider {
border-top: 1px solid #54c8e7;;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.city-name {
font-size: 2em;
}
.emphasis {
font-weight: bold;
}
.inlineblock {
display: inline-block;
}
.centertxt {
text-align: center;
}
.pos_rel {
position: relative;
}
.overflow_hidden {
overflow: hidden;
}
.vert_mid {
vertical-align: middle;
}
table {
cursor: pointer;
margin: 0 auto;
border-spacing: 1px;
}
td {
width: 10px;
height: 10px;
border-radius: 50%;
}
.white,
.white-popup {
background: #000;
position: relative;
-webkit-animation: in .25s;
}
.white-popup {
background: red;
}
/*.plan-to {
background: #018c9e;
z-index: 2;
}*/
.white-popup .popup {
cursor: auto;
-webkit-animation: popup .25s forwards;
z-index: 10;
}
.popup {
position: absolute;
width: 100px;
height: 100px;
font-size: 5px;
overflow: hidden;
background: #54c8e7;
z-index:10;
top: -45px;
left: -45px;
padding: 8px;
border: 1px solid #343837;
border-radius: 3px;
box-sizing: border-box;
}
.white-popup:hover .popup {
-webkit-animation: out .25s forwards;
z-index: 50;
}
.white:hover {
-webkit-animation: out .25s forwards;
z-index: 50;
}
#-webkit-keyframes in {
from {background:#fff; transform: scale(1);}
to {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes out {
0% {background:#fff; transform: scale(1);}
100% {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
.key {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 2px;
}
.key_1 {
background: #54c8e7;
}
.key_2 {
background: #018c9e;
}
.key_3 {
background: #fff;
}
.legend {
text-transform:uppercase;
font-size: 12px;
color: #fff;
margin-bottom: 30px;
}
.legend_item {
margin-left: 15px;
}
#media screen and (min-width: 768px) {
.page-wrapper {
margin-top: -388px;
}
td {
width: 15px;
height: 15px;
}
}
I added the following CSS:
td:hover {
z-index: 1;
}
And inside .white-popup selector, I removed:
z-index: 2;
line.
Seems to work for me.