Currently immersed in the world of Pug, node.js, and express as I build a web application.
Facing hurdles when trying to style elements within Pug conditionals using CSS.
For instance, consider this Pug snippet:
div(id='outside')
if authorised
h3(id='unauthorised') Sorry, you are unauthorised
else
h3(id='authorised') Welcome!
Accompanied by the following CSS:
#outside {
width: 100px;
height: 10px;
background-color: red;
}
#unauthorised {
color: red;
}
#authorised {
color: green;
}
The div with ID outside adheres to the CSS styles, but h3#auhtorised and h3#unauthorized don't. Similar issues persist with other selected elements.
My attempts to address this problem via the Pug Github page or research have proven futile. Any insights into what could be going wrong?
UPDATE:
To clarify, here's the actual code structure I am dealing with:
header.pug
doctype html
html
head
title= title
script(src='js/action-button.js')
script(src='js/form.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js')
style
include ../../public/css/main.css
body
div#test
if isAdmin
div(id='action-items' onmouseover='expandHoverAsAdmin()' onmouseout='closeHoverAsAdmin()')
button(type='button' class='admin-button action' onclick='openForm();') Add role
button(type='button' class='admin-button action' onclick='openForm();') Add user
button(type='button' id='action-button' class='action' onclick='openForm();') +
else
button(type='button' id='action-button' class='' onclick='openForm();' onmouseover='expandHover()' onmouseout='closeHover()') +
main.css
div#test {
width: 100px;
height: 20px;
background-color: red;
}
div#action-items {
display: flex;
flex-direction: column;
justify-content: space-between;
bottom: 20px;
right: 20px;
z-index: 1;
position: fixed;
}
.action {
border-width: 0;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
bottom: 20px;
right: 20px;
z-index: 1;
width: 115px;
height: 55px;
border-radius: 30px; /* make circular maybe? */
background-color: rgba(255,0,0,0.5);
color: white;
box-shadow: rgba(2,2,2,0.5) 2px 2px 2px 0px;
}
button:focus {
outline: none;
}
button:hover {
cursor: pointer;
}
UPDATE #2:
Realized that the issue wasn't due to CSS failing to apply to conditional elements but rather some changes not reflecting in my CSS file.
Revisited the above test where it previously worked fine. However, upon inspecting my local main.css file, discrepancies were noted:
#one-element {
/* some styling */
}
#outside {
width: 100px;
height: 10px;
background-color: red;
}
#unauthorised {
color: red;
}
#authorised {
color: green;
}
#some-other-element {
/* some styling */
}
Whereas in Chrome Dev Tools view:
#one-element {
/* some styling */
}
#some-other-element {
/* some styling */
}
Edit my files with Atom and ensure regular saving, yet the missing CSS data persists. Any ideas why?