&:hover .info-content-body {
z-index: 11;
color: #fff;
}
&:hover .info-header {
z-index: 11;
color: #fff;
}
&:hover .info-footer {
z-index: 11;
color: #fff;
}
I need to do this in one line, when I put all classes in one line then not work
Related
I am creating a side navigation panel and I can't seem to figure out how to change colour of the text in link when I hover over it. The background colour changes. It actually worked before I added the animation but I wouldn't want to pass out on the animation.
.sidenav-navigation {
list-style: none;
padding: 1rem;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
.sidenav-navigation-items {
width: 100%;
margin-bottom: 0.5rem;
border-radius: 2rem;
cursor: pointer;
.sidenav-navigation-link {
display: flex;
align-items: center;
height: 3rem;
color: white;
text-decoration: none;
.sidenav-navigation-link-icon {
font-size: 22px;
width: 2rem;
min-width: 2rem;
text-align: center;
}
.sidenav-navigation-link-text {
text-align: center;
margin-right: 0.5rem;
animation:fadeIn 0.7s;
}
}
}
}
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black;
}
}
#keyframes fadeIn{
0%{opacity:0;}
50%{opacity:50%;}
100%{opacity:100%;}
}
Probably white color style has higher priority due to more specific rules. Try to use !important rule with lower prio style.
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black !important;
}
}
Other option may be changing the way of rules nesting to below:
.sidenav-navigation {
.sidenav-navigation-items {
.sidenav-navigation-link {
color: white;
}
&:hover {
.sidenav-navigation-link {
color: black;
}
}
}
}
This is the html:
<StripeCheckout className='payBtn' />
And this is how it looks right now:
And this is the .scss for it:
.payBtn {
display: block;
background-color: rgba(160, 255, 223, 0.596);
color: black;
font-size: 1.3rem;
line-height: 1;
font-weight: 200;
width: 100%;
margin: 0 auto;
padding: 1rem 0;
border: 0;
outline: none;
text-transform: uppercase;
cursor: pointer;
&:hover {
background-color: rgba(114, 250, 205, 0.699);
}
}
What I'm trying to make it look like:
what it needs to look like
Everything else on the page is styled according to the stylesheet. Even the size of the button of pay with card is. But the colors and stuff are not changing. Any help would be appreciated, thanks :D
I have two div that have a lot of inputs inside them.
One of them uses only the PrelimsSpecificsSegButtons and the other one uses SliderAcuityAnyButtons as apperance-class
The only difference between this classes is that
SliderAcuityAnyButtons uses &:nth-child(6n+18)
PrelimsSpecificsSegButtons uses &:nth-child(6n+0)
Everything else is exactly the same.
Is there a way to factor what is common into one class and just have what is different in another to avoid all this duplicate CSS instructions
#include field-radio-appearance($appearance-class: "PrelimsSpecificsSegButtons") {
#{$field-state-disabled-selector} {
opacity: .6;
&:hover {
background-color: transparent;
}
#{$field-textbox-selector} {
border: 1px transparent;
background: none;
cursor: default;
color: #7E7E7E;
}
}
&:not(#{$field-state-disabled-selector}) {
&:not(.VerticalOptions) {
#{$field-option-selector} {
&.radio-inline {
&:hover {
#include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #e6e6e8);
}
#{$field-state-active-selector} {
#include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
border: 1px solid #818181;
z-index: 2;
}
}
}
}
}
&:not(.VerticalOptions):not(.OrderActivity) {
#{$field-option-selector} {
&.radio-inline {
#include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #cdced1);
color: #333333;
margin-right: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #b5b6ba;
padding: 1px 10px;
text-align: center;
margin-left: -1px;
height:23px;
&:first-child {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
margin-left: 0;
}
&:last-child {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
&:nth-child(6n+0) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(1) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(2) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(3) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
&:nth-last-child(4) {
background: white !important;
opacity: 0;
pointer-events: none;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
&:nth-last-child(5) {
background: white !important;
opacity: 0;
pointer-events: none;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
#{$field-state-active-selector} {
#include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
border: 1px solid #818181;
z-index: 2;
}
#{$field-option-label-selector} {
padding: 0;
&:before, &:after {
display: none;
}
}
}
}
}
}
#include field-radio-appearance($appearance-class: "SliderAcuityAnyButtons") {
#{$field-state-disabled-selector} {
opacity: .6;
&:hover {
background-color: transparent;
}
#{$field-textbox-selector} {
border: 1px transparent;
background: none;
cursor: default;
color: #7E7E7E;
}
}
&:not(#{$field-state-disabled-selector}) {
&:not(.VerticalOptions) {
#{$field-option-selector} {
&.radio-inline {
&:hover {
#include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #e6e6e8);
}
#{$field-state-active-selector} {
#include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
border: 1px solid #818181;
z-index: 2;
}
}
}
}
}
&:not(.VerticalOptions):not(.OrderActivity) {
#{$field-option-selector} {
&.radio-inline {
#include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #cdced1);
color: #333333;
margin-right: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #b5b6ba;
padding: 1px 10px;
text-align: center;
margin-left: -1px;
height:23px;
&:first-child {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
margin-left: 0;
}
&:last-child {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
&:nth-child(6n+18) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(1) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(2) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(3) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
&:nth-last-child(4) {
background: white !important;
opacity: 0;
pointer-events: none;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
&:nth-last-child(5) {
background: white !important;
opacity: 0;
pointer-events: none;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
#{$field-state-active-selector} {
#include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
border: 1px solid #818181;
z-index: 2;
}
#{$field-option-label-selector} {
padding: 0;
&:before, &:after {
display: none;
}
}
}
}
}
}
While I asked the question, I also found the answer:
Keep the common parts in one rule now name SliderButtons
Create a new rule called PrelimExam_HideButtons that uses the nth-child(6n+0)
Create a new rule called SliderAcuityAny_HideButtons that uses the nth-child(6n+18)
Then modify the DIVs so that they have now two classes, the common and the specific:
DivA has apperance-classes: SliderButtons PrelimExam_HideButtons
DivB has apperance-classes: SliderButtons SliderAcuityAny_HideButtons
Here is the SCSS code:
#include field-radio-appearance($appearance-class: "SliderButtons") {
#{$field-state-disabled-selector} {
opacity: .6;
&:hover {
background-color: transparent;
}
#{$field-textbox-selector} {
border: 1px transparent;
background: none;
cursor: default;
color: #7E7E7E;
}
}
&:not(#{$field-state-disabled-selector}) {
&:not(.VerticalOptions) {
#{$field-option-selector} {
&.radio-inline {
&:hover {
#include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #e6e6e8);
}
#{$field-state-active-selector} {
#include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
border: 1px solid #818181;
z-index: 2;
}
}
}
}
}
&:not(.VerticalOptions):not(.OrderActivity) {
#{$field-option-selector} {
&.radio-inline {
#include linear-gradient($pos: top, $G1: #f8f8f8, $G2: #cdced1);
color: #333333;
margin-right: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #b5b6ba;
padding: 1px 10px;
text-align: center;
margin-left: -1px;
height:23px;
&:first-child {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
margin-left: 0;
}
&:last-child {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
&:nth-last-child(1) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(2) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
&:nth-last-child(3) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
&:nth-last-child(4) {
background: white !important;
opacity: 0;
pointer-events: none;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
&:nth-last-child(5) {
background: white !important;
opacity: 0;
pointer-events: none;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
}
#{$field-state-active-selector} {
#include linear-gradient($pos: top, $G1: #cdced1, $G2: #b5b6ba);
border: 1px solid #818181;
z-index: 2;
}
#{$field-option-label-selector} {
padding: 0;
&:before, &:after {
display: none;
}
}
}
}
}
}
#include field-radio-appearance($appearance-class: "PrelimExam_HideButtons") {
&:not(.VerticalOptions):not(.OrderActivity) {
#{$field-option-selector} {
&.radio-inline {
&:nth-child(6n+0) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
}
}
}
}
#include field-radio-appearance($appearance-class: "SliderAcuityAny_HideButtons") {
&:not(.VerticalOptions):not(.OrderActivity) {
#{$field-option-selector} {
&.radio-inline {
&:nth-child(6n+18) {
background: white !important;
opacity: 0;
.p-option-label
{
cursor: context-menu !important;
pointer-events: none;
}
pointer-events: none;
}
}
}
}
}
.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,
Is it be possible to use some sort of #directive creation syntax, similar to creating #mixins? Secondly, is it possible to create a SASS-only pseudo class?
I'd like to declare my own SASS directive,although I'd prefer not to have to force my teammates to install an extra ruby gem to use it so I'd want to store it in a scss partial. I do understand that they are orders of levels in complexity, so perhaps it just isn't possible.
In addition to perhaps creating a new scss-only pseudo class (such as :parent, :clicked, :unchecked, etc) I'd be interested in a custom-made directive that assists with using checkboxes to direct css animations ("css checkbox hack"). Here is my scss pseudocode to generalize what I'm trying to do:
// this code monitors when a checkbox (#someinput) is checked,
// then applies style to div #target div. Basically an 'onClick' event in scss.
body {
#wrapper {
#targetdiv {
#spotcheck(#someinput) { #
color: red; border: 2px solid blue; # <-- move this ...
} #
color: blue; border: 0;
#someinput {
width: 20px; height: 20px;
}
}
}
}
// ... the above scss should be converted to this pre-compiled state, also scss
body {
#someinput:checked ~ #targetdiv { #
color: red; border: 2px solid blue; # <-- ..to here. it needs to be
} # above the #targetdiv
#wrapper {
#targetdiv {
color: blue; border: 0;
#someinput {
width: 20px; height: 20px;
}
}
}
}
Make your selectors only as specific as they absolutely need to be and no more. A mixin would only be more verbose with no real benefit.
#targetdiv {
color: blue; border: 0;
#someinput:checked ~ & {
color: red; border: 2px solid blue;
}
}
#someinput {
width: 20px; height: 20px;
}
Output:
#targetdiv {
color: blue;
border: 0;
}
#someinput:checked ~ #targetdiv {
color: red;
border: 2px solid blue;
}
#someinput {
width: 20px;
height: 20px;
}
Alternately, this would give the same result with the ability to overqualify as much as you want:
#targetdiv {
color: blue; border: 0;
}
#someinput {
width: 20px; height: 20px;
~ #targetdiv {
color: red; border: 2px solid blue;
}
}