Referencing Parent Selectors: & concatenation operator fault or I'm do something wrong.
Sass predecessor do not concatenate Class to the Element selector.
Ubuntu 12
ruby 1.9.3p0
Sass 3.4.9
Netbeans 8.2
input:
li{
&.current-item-menu{}
}
output:
li .current-item-menu {}
expect:
li.current-item-menu {}
SCSS INPUT
#mixin main-menu {
ul {
list-style: none;
li{
display: inline-block;
float: right;
margin: 0 59px;
a {
color: $second-color;
font: 300 $big-font OpenSans;
text-decoration: none;
&: hover {
color: $active-color
}
}
&.current-item-menu {
a {
color: $active-color;
text-decoration: underline;
}
}
}
}
}
nav.main-menu{
#include main-menu;
}
CSS OUTPUT
nav.main-menu ul {
list-style: none; }
nav.main-menu ul li {
display: inline-block;
float: right;
margin: 0 59px; }
nav.main-menu ul li a {
color: #274150;
font: 300 20px OpenSans;
text-decoration: none; }
nav.main-menu ul li a:hover {
color: white; }
nav.main-menu ul li .current-item-menu a {
color: white;
text-decoration: underline; }
I EXPECT
nav.main-menu ul {
list-style: none; }
nav.main-menu ul li {
display: inline-block;
float: right;
margin: 0 59px; }
nav.main-menu ul li a {
color: #274150;
font: 300 20px OpenSans;
text-decoration: none; }
nav.main-menu ul li a:hover {
color: white; }
nav.main-menu ul li.current-item-menu a {
color: white;
text-decoration: underline; }
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;
}
}
}
}
Sorry if this question has already been asked, I don't find anything similar.
So I am following a course and I have created the mobile navbar, which works. Then I write the mediaquery for larger screens and the list, instead of being displayed to the right of the navbar, is hidden.
If I inspect the page I can see that the list and the list items are on the right spot, but they are not visible. I have tried with "visibility: visible" but it doesnt' work.
Where is the mistake?
const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach((item) =>
item.addEventListener("click", function () {
this.classList.toggle("collapsible--expanded");
})
);
/* Typography */
html {
font-size: 62.5%;
}
:root {
--color-primary: #2584ff;
--color-secondary: #00d9ff;
--color-accent: #ff3400;
--color-headings: #1b0760;
--color-body: #918ca4;
--color-border: #ccc;
--border-radius: 30px;
--color-body-darker: #5c5577;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 2.4rem;
line-height: 1.5;
color: var(--color-body);
}
h1,
h2,
h3 {
color: var(--color-headings);
margin-bottom: 1rem;
}
h1 {
font-size: 7rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 3rem;
}
p {
margin-top: 0;
}
#media screen and (min-width: 1024px) {
body {
font-size: 1.8rem;
}
h1 {
font-size: 8rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 2.4rem;
}
}
/* Links */
a {
text-decoration: none;
}
.link-arrow {
color: var(--color-accent);
text-transform: uppercase;
font-size: 2rem;
font-weight: bold;
}
.link-arrow::after {
content: "-->";
margin-left: 5px;
transition: margin 0.15s;
}
.link-arrow:hover::after {
margin-left: 10px;
}
#media screen and (min-width: 1024px) {
.link-arrow {
font-size: 1.5rem;
}
}
/* Badges */
.badge {
border-radius: 20px;
font-size: 2rem;
font-weight: 600;
padding: 0.5rem 2rem;
white-space: nowrap;
}
.badge--primary {
background: var(--color-primary);
color: white;
}
.badge--secondary {
background: var(--color-secondary);
color: white;
}
.badge--small {
font-size: 1.6rem;
padding: 0.5rem 1.5rem;
}
#media screen and (min-width: 1024px) {
.badge {
font-size: 1.5rem;
}
.badge--small {
font-size: 1.2rem;
}
}
/* Lists */
.list {
list-style: none;
padding-left: 0;
color: var(--color-headings);
}
.list--inline .list__item {
display: inline-block;
margin-right: 2rem;
}
.list--tick {
list-style-image: url(/images/tick.svg);
padding-left: 3rem;
}
.list--tick .list__item {
padding-left: 0.5rem;
margin-bottom: 1rem;
}
#media screen and (min-width: 1024px) {
.list--tick .list__item {
padding-left: 0;
}
}
/* Icons */
.icon {
width: 40px;
height: 40px;
}
.icon--small {
width: 30px;
height: 30px;
}
.icon--primary {
fill: var(--color-primary);
}
.icon--white {
fill: white;
}
.icon-container {
background: #f3f9fa;
width: 64px;
height: 64px;
border-radius: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.icon-container--accent {
background: var(--color-accent);
}
/* Buttons */
.btn {
border-radius: 40px;
border: none;
cursor: pointer;
font-size: 1.8rem;
font-weight: 600;
margin-left: 5px;
margin-top: 5px;
padding: 2rem 3rem;
text-transform: uppercase;
white-space: nowrap;
}
.btn--primary {
background-color: var(--color-primary);
color: white;
}
.btn--primary:hover {
background: #8a91f3;
}
.btn--secondary {
background-color: var(--color-secondary);
color: white;
}
.btn--accent {
background-color: var(--color-accent);
color: white;
}
.btn--accent:hover {
background: #e66545;
}
.btn--outline {
background-color: white;
color: black;
border: 2px solid var(--color-headings);
}
.btn--block {
display: inline-block;
width: 100%;
}
.btn--stretched {
padding-left: 6rem;
padding-right: 6rem;
}
/* Input */
.input {
border-radius: 30px;
border: 1px solid #ccc;
color: var(--color-headings);
font-size: 2rem;
outline: 0;
padding: 1.5rem 3.5rem;
}
::placeholder {
color: #cdcbd7;
}
.input-group {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
display: flex;
}
.input-group .input {
border: 0;
flex-grow: 1;
padding: 1rem 1rem;
}
.input-group .btn {
margin: 4px;
}
#media screen and (min-width: 1024px) {
.input {
font-size: 1.5rem;
}
}
/* Cards */
.card {
border-radius: 7px;
box-shadow: 0 0 20px 10px #f3f3f3;
overflow: hidden;
min-width: 300px;
}
.card__header,
.card__body {
padding: 2rem 3rem;
}
.card--primary .card__header {
background: var(--color-primary);
color: #fff;
}
.card--secondary .card__header {
background: var(--color-secondary);
color: #fff;
}
.card--secondary .badge--secondary {
background: #02cdf1;
}
/* Plans */
.plan__name {
color: #fff;
margin: 0;
font-weight: 500;
font-size: 2.4rem;
}
.plan__price {
font-size: 6rem;
}
.plan__billing-cycle {
font-size: 2.4rem;
font-weight: 300;
opacity: 0.8;
margin-right: 1rem;
}
.plan__description {
font-size: 2rem;
font-weight: 300;
letter-spacing: 1px;
display: block;
}
.plan .list__item {
margin-bottom: 2rem;
}
.plan--popular .card__header {
position: relative;
}
.plan--popular .card__header::before {
content: url(/images/popular.svg);
width: 40px;
display: inline-block;
position: absolute;
top: -6px;
right: 5%;
}
#media screen and (min-width: 1024px) {
.plan__name {
font-size: 1.4rem;
}
.plan__price {
font-size: 5rem;
}
.plan__billing-cycle {
font-size: 1.6rem;
}
.plan__description {
font-size: 1.7rem;
}
}
/* Media */
.media {
display: flex;
max-width: 500px;
}
.media__title {
margin-top: 0;
}
.media__body {
margin: 0 2rem;
}
.media__image {
margin-top: 1rem;
}
/* Quotes */
.quote {
font-size: 3rem;
font-style: italic;
color: var(--color-body-darker);
line-height: 1.3;
}
.quote__text::before {
content: open-quote;
}
.quote__text::after {
content: close-quote;
}
/* footer p {
font-size: 1.6rem;
}
*/
.quote__company {
font-size: 1.6rem;
opacity: 0.4;
color: var(--color-headings);
font-style: normal;
}
/* Grids */
.grid {
display: grid;
}
#media screen and (min-width: 768px) {
.grid--1x2 {
grid-template-columns: 1fr 1fr;
}
}
#media screen and (min-width: 1024px) {
.grid--1x3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* testimonials */
.testimonial {
padding: 3rem;
}
.testimonial__image {
position: relative;
}
.testimonial__image > img {
width: 100%;
}
.testimonial__image > .icon-container {
position: absolute;
top: 3rem;
right: -32px;
}
/* Callout */
.callout {
padding: 4rem;
border-radius: 5px;
}
.callout--primary {
background: var(--color-primary);
color: white;
}
.callout__heading {
color: white;
margin-top: 0;
font-size: 3rem;
}
.callout .btn {
justify-self: center;
align-self: center;
}
.callout__content {
text-align: center;
}
#media screen and (min-width: 768px) {
.callout .grid--1x2 {
grid-template-columns: 1fr auto;
}
.callout__content {
text-align: left;
}
.callout .btn {
justify-self: start;
margin: 0 2rem;
}
}
/* COLLAPSIBLES */
.collapsible__header {
display: flex;
justify-content: space-between;
}
.collapsible__heading {
margin-top: 0;
font-size: 3rem;
}
.collapsible__chevron {
transform: rotate(-90deg);
transition: transform 0.3s;
}
.collapsible__content {
max-height: 0;
overflow: hidden;
transition: all 0.3s;
opacity: 0;
}
.collapsible--expanded .collapsible__chevron {
transform: rotate(0);
}
.collapsible--expanded .collapsible__content {
display: block;
max-height: 100vh;
opacity: 1;
}
/* Blocks */
.block {
--padding-vertical: 6rem;
padding: var(--padding-vertical) 2rem;
}
.block__heading {
margin-top: 0;
}
.block--dark {
background: black;
color: #7b858b;
}
.block--dark .block__heading {
color: white;
}
.block--skewed-right {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block--skewed-left {
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block__header {
text-align: center;
}
/* nav */
.nav {
background: black;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 1rem;
align-items: center;
}
.nav__list {
width: 100%;
margin: 0;
}
.nav__item {
padding: 0.5rem 2rem;
border-bottom: 1px solid #222;
}
.nav__item > a {
color: #d2d0db;
transition: color 0.3s;
}
.nav__item > a:hover {
color: #fff;
}
.nav__toggler {
opacity: 0.5;
transition: box-shadow 0.15s;
cursor: pointer;
}
.nav.collapsible--expanded .nav__toggler {
opacity: 1;
box-shadow: 0 0 0 3px #666;
border-radius: 5px;
}
#media screen and (min-width: 768px) {
.nav__toggler {
display: none;
}
.nav__list {
width: auto;
display: flex;
visibility: ;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<nav class="nav collapsible">
<img src="/images/logo.svg" alt="" />
<svg class="icon icon--white nav__toggler">
<use xlink:href="images/sprite.svg#menu"></use>
</svg>
<ul class="list nav__list collapsible__content">
<li class="nav__item">Hosting</li>
<li class="nav__item">VPS</li>
<li class="nav__item">Domain</li>
<li class="nav__item">Pricing</li>
</ul>
</nav>
<script src="/js/main.js"></script>
</body>
</html>
Problem was solved by adding max-height: 100%; opacity:1 to the .nav__list rule in CSS.
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;
}
}
}
}
}
I just copies this code from a tutorial, But I try to open sub menu it disappears. I don't know what to do Please help me.
#nav_wrapper1 {
width: 100%;
}
.nav_wrapper {
border-bottom:1px solid white;
left: 0;
top:0;
position:top;
width: 100%;
transition: top .5s ease-out;
background: #170030;
height:60px;
z-index:99999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: normal;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search i {color: #fff;
font-size: 22px;}
#search {
float: right;
font-size: 22px;
padding: 20px 25px;
line-height: 0px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#search:hover {
background: #111;
}
.search_box {
clear: both;
width: 40%;
background: #111;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
float:right;
z-index:99999999999;
}
.search_box.active {
height: auto;
padding: 10px 0;
width:40%;
}
.search_box input {
width: 60%;
font-size: 13px;
margin: 0 0 0 10px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 30%;
height: auto;
padding: 10px;
margin: 0;
margin-right:10px;
border: none;
color: #fff;
cursor: pointer;
background: #6a00de;
opacity: 1;
transition: all 0.1s ease;
float:right;
}
.search_box input.search_icon:hover {
background: #FFF;
color:#111;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #170030;
color:#170030;
transition: all 0.3s ease;
margin-top:5px;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #111;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
height:100%;
}
.menu ul li a:hover {
background: #111;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #FFF;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #000000;
}
.menu ul ul > li a:hover {
background: #111;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
#media all and (max-width: 860px) {
.example-header .container {
width: 100%;
}
#search {
color: #fff;
padding: 0px 20px 0px 5px;
margin-top:25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: “2630”;
font-weight: normal;
}
a.menu-link.active:after {
content: “2715”;
}
.menu {
clear: both;
min-width: inherit;
float: none;
top:0px;
position:relative;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {`
content: ‘+’;
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: “-“;
}
.menu ul ul > li a {
background:#170030;
padding: 10px 18px 10px 30px;
border-bottom: 1px solid #111;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
.search_box.active {
position: absolute;
top: 63px;
z-index: 10;
width:70%;
right:2px;
}
.search_box input {
width: 50%;
float:left;
}
.search_box input.search_icon {
width: 30%;
float:right;
margin-right:14px;
margin-top:-37px;
}
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
delete display: none
.menu ul ul {
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
or change to display:block;
.menu ul ul {
display:block;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
try it..
The following rules only apply to #navmenu.someclass, so just #navmenu should not be affected here.
I have 2 specific navmenus with classes 'events' and 'events-categories'. The common part is 'ul' and 'li' then the 'li a' differs. Is there a way of merging the two blocks of sass code below so I don't have to duplicate rules for 'ul' and 'li'. Again #navmenu should not be affected as the rules do not apply to the main navmenu.
#navmenu.events {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
li a {
background: $p-dark;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
}
}
#navmenu.events-categories {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
}
}
You can always move the common code to a placeholder selector and use the #extend directive.
%common {
ul {
list-style-type: none;
list-style-image: none;
li {
display: inline;
}
}
}
#navmenu.events-categories, #navmenu.events {
#extend %common;
}
#navmenu.events {
ul {
li a {
background: $p-dark;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
}
}
#navmenu.events-categories {
ul {
li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}
}
}
This will result in the following CSS:
#navmenu.events-categories ul, #navmenu.events ul {
list-style-type: none;
list-style-image: none;
}
#navmenu.events-categories ul li, #navmenu.events ul li {
display: inline;
}
#navmenu.events ul li a {
background: red;
margin: 4px;
padding: 5px 20px 5px 20px;
color: white;
}
#navmenu.events-categories ul li a {
margin: 1px;
padding: 2px 5px 2px 5px;
}