Gentle men (and likewise women),
I'm stuck with a nasty Less problem I can't figure out.
Here's the code:
.navbar-collapse {
background-color: #ff6600;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 5px;
}
.nav > li > a:link {
color: #fff;
font-weight: bold;
}
.nav > li > a:visited {
color: #ccc;
background: blue;
}
.nav > li > a:hover {
color: #000;
background: pink;
}
.nav > li > a:focus, .nav > li > a:active {
color: #000;
background: yellow;
}
.nav > li .current {
color: black!important;
background: skyblue!important;
}
I'm new to Less, my first (minor) problem is how to nest this code properly.
But the real problem is that a:active and a:focus do not work. Nothing whatsoever. a:link does, but not what it's supposed to do. I want the font-colour to be white, it shows up blue. Checking the generated code shows in line 1089, but weirdly enough Firebug shows that colour crossed out - it shouldn't work.
I want a:active and/or a:focus with font-colour #000, but that does not work.
a:active does show up but goes away in a split second.
I tried the .current class, as it shows up in Firebug, but that one doesn't work at all.
You can check the code out on http://www.test.dgdesk.com.
It's a Joomla site based on Joostrap, with Bootstrap 3
This is a css conflict.
The color from .sidebar-right's nav styles overrides the color from the general nav styles.
You can fix the issue by defining a more specific class for the nav you are updating, or by updating the sidebar styles directly.
Related
I am trying to build a Toggle button which has two states, Edit and Preview.
My demo is here:
https://codepen.io/yu-zhang/pen/rNmPyxG?editors=1111
<button aria-pressed="true"
id="speakerPower" class="switch">
<span aria-label="edit">edit</span>
</button>
button.switch {
margin: 0;
padding: 0;
width: 70px;
height: 26px;
border: 2px solid black;
display: inline-block;
margin-right: 0.25em;
line-height: 20px;
vertical-align: middle;
text-align: center;
font: 12px "Open Sans", "Arial", serif;
}
button.switch span {
padding: 0 4px;
pointer-events: none;
}
button[aria-pressed="true"] {
background: #262;
color: #eef;
}
button[aria-pressed="false"] {
color: #a;
}
label.switch {
font: 16px "Open Sans", "Arial", sans-serif;
line-height: 20px;
user-select: none;
vertical-align: middle;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
document.querySelectorAll("button").forEach(function(theSwitch) {
theSwitch.addEventListener("click", handleClickEvent, false);
});
function handleClickEvent(evt) {
let el = evt.target;
if (el.getAttribute("aria-pressed") == "true") {
el.setAttribute("aria-pressed", "false");
el.textContent= 'preview';
el.setAttribute("aria-label", "preview");
} else {
el.setAttribute("aria-pressed", "true");
el.textContent = 'edit';
el.setAttribute("aria-label", "edit");
}
}
But the strange thing is: VoiceOver + Chrome(92.0.4515) reads out the aria-labels while toggling but VoiceOver + Safari(14.1.2) does not read out the aria-labels.
Any ideas?
You are changing both the aria-pressed state and the aria-label property. It's important to know the difference between a state and a property, even though both begin with "aria".
When changing a state, you typically get an automatic announcement by the screen reader ("pressed/unpressed", "checked/unchecked", "expanded/collapsed") of the state change.
When you change a property, no such "free" announcement is made.
You'll see/hear differences depending which screen reader and which browser you're using. Sounds like you're getting the desired behavior in chrome but not safari. It's undefined which one is correct since changes in properties don't have to be announced.
To work around it, you can have a hidden aria-live="polite" region. In your click handler, just update the innerHTML of the live region with the new label and it'll be announced. I don't know if that will cause double announcements on chrome.
You'll also want to visually hide the live region so you can't see it but you can't make it display:none because then the aria-live won't be announced.
<div class="sr-only" aria-live="polite" id="foo"></div>
(See What is sr-only in Bootstrap 3? for info on the "sr-only" class.)
In your click handler, get the "foo" element and change its innerHTML to "preview" or "edit".
I am using the npm package https://www.npmjs.com/package/vuejs-paginate
to handle pagination in a vuejs application.
I would like to style this pagination component.
My styling successfully sets the background of page number buttons yellow when the user hovers over them, but fails to set the background of the current page to green. Why?
Here is my component tag with the props.
<paginate
:pageCount="totalPages"
:click-handler="paginateCallback"
:prevText="'Prev'"
:nextText="'Next'"
:containerClass="'pagination'"
class="pagination"
v-model="pageNumber"
></paginate>
And here is the css...
.pagination a {
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
background-color: white;
}
.pagination a.active {
background-color: green;
}
.pagination a:hover:not(.active) {background-color: yellow;}
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
By the way, in case it is relevant information, the application uses bootstrap-vue elsewhere.
Thanks to the first answer below, I was able to resolve this.
Here is the working css after adding the active-class prop to the component...
.pagination li {
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
color: white;
background-color: white;
font-size: 1em;
}
.pagination li.pagination-active {
background-color: green;
}
.pagination li:hover:not(.active) {background-color: yellow;}
Now, however, there is a border around the number of the active page button until the user clicks again anywhere on the page. How can we eliminate this border?
As the documentations says: there is an active class prop that you can set and style that class. see the props in the link above.
<paginate
:pageCount="totalPages"
:click-handler="paginateCallback"
:prevText="'Prev'"
:nextText="'Next'"
:active-class="myActiveBtn"
:containerClass="'pagination'"
class="pagination"
v-model="pageNumber"
></paginate>
style:
.myActiveBtn{
background-color: green;
}
When using LESS, i found usefull to mix classes, in order to create a new class based on other class properties, but sometimes i need to override them.
like:
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
.btn;
background-color: yellow;
font-size: 12px;
}
The output has duplicated properties:
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
border-radius: 10px;
background-color: blue;
font-size:10px;
background-color: yellow;
font-size: 12px;
}
I know there are multiple aproaches for this, like multiple classes on dom, or even #extend to build multiple selectors, but navigator still overriding at runtime the properties.
Is there any reason to duplicate same properties when mixin? Seems a simple way for making "independent" groups of properties, but not nice if has duplicated values.
LESS does not account for removal of duplicate properties within a block, at least in part because of this reason stated here (quote slightly modified for grammar fix):
The trouble is that people frequently use multiple properties in order
to provide a fallback for older browsers. Removing the properties is
not something that it would be good to do generically.
It is left up to the programmer to not program it for duplication. You can set up a basic mixin like what Danny Kijkov noted in his answer, or...
Solution #1 (Complex, but Powerful to Fully Define)
You can get elaborate in building a master button maker mixin. Something like this:
LESS (Mixin)
.makeBtn(#ext: null; #rad: 10px; #color: blue; #size: 10px;) {
.set-extension() when (#ext = null) {
#class-extension: ~'';
}
.set-extension() when not (#ext = null) {
#class-extension: ~'_#{ext}';
}
.set-extension();
.btn#{class-extension} {
border-radius: #rad;
background-color: #color;
font-size: #size;
//define various addtions based on extensions here
.specialExtensionProps() when (#ext = danger) {
border: 3px solid red;
}
.specialExtensionProps() when (#ext = someExtName) {
my-special-prop: yep;
}
.specialExtensionProps();
}
}
LESS (Use the Mixin Various Ways)
.makeBtn(); //makes base button
.makeBtn(warning; #color: yellow; #size: 12px); //makes modified button
.makeBtn(danger; #color: red;); //makes modified button
.makeBtn(someExtName, 15px); //makes modified button
CSS Output
.btn {
border-radius: 10px;
background-color: #0000ff;
font-size: 10px;
}
.btn_warning {
border-radius: 10px;
background-color: #ffff00;
font-size: 12px;
}
.btn_danger {
border-radius: 10px;
background-color: #ff0000;
font-size: 10px;
border: 3px solid red;
}
.btn_someExtName {
border-radius: 15px;
background-color: #0000ff;
font-size: 10px;
my-special-prop: yep;
}
In case you did not know, note the above demonstrated LESS functionality of setting only some variables from the set of mixin variables. So for the first two specialized .makeBtn() calls, I only set a few variables, out of order from the mixin, by explicitly calling the variable name to set (e.g. #color: yellow). This allows me to "skip" over setting the #size. In the last example, I was only setting the first two values, so I did not need to put any variable names.
I don't know if the above helps you get what you want, but it does offer a different way of being able to reduce code size.
Solution #2
You mentioned :extend(), which could be well used here to avoid duplication:
LESS
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
&:extend(.btn);
background-color: yellow;
font-size: 12px;
}
CSS Output
.btn,
.btn_warning {
border-radius: 10px;
background-color: blue;
font-size: 10px;
}
.btn_warning {
background-color: yellow;
font-size: 12px;
}
Solution #3
In your case, if all the buttons will be of either class .btn or a .btn_SOMETHING form, and you are not using .btn_ for anything else but buttons, then you might be able to just use the CSS cascade to apply styles and prevent duplication of CSS code like so (no special LESS required):
LESS and CSS Output
.btn, [class *= btn_] {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
background-color: yellow;
font-size: 12px;
}
Any html with the class btn_warning will first get the base button styles from the attribute selector [class *= btn_] while the actual btn_warning class will override the things set to be overridden.
Solution #4
If you split the class names in the html (so class="btn warning" rather than class="btn_warning"), then this works to avoid duplication:
LESS and CSS Output
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn.warning {
background-color: yellow;
font-size: 12px;
}
What about this solution?
.btn(#size: 10px, #color:blue) {
border-radius: 10px;
background-color: #color;
font-size:#size;
}
.btn_warning {
.btn(12px, yellow);
}
I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:
html{
height: 100%
}
body {
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
#content{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5%;
margin-top: 2%;
margin-bottom: 2%;
width: 50%;
}
h1, h2, h3 {
color: #066dab;
}
Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated
Do it like this instead:
Live Demo
I neatened the way you were setting height: 100%.
I took the margin off #content.
To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.
I think I'm overlooking something, call it a long day, but why isn't this working? The styles found in the "li a:active, li a:focus" persist in Firefox and IE but not webkit. Does webkit only support the :focus pseudo class on form elements?
#footer ul li a {
color: #fff;
display: block;
font-size: 95%;
padding: 15px 15px 10px;
text-decoration: none;
}
#footer ul li a:hover {
color: #f00;
}
#footer ul li a:active, #footer ul li a:focus {
border-top: 1px #f00 solid;
color: #f00;
padding-top: 14px;
}
#footer ul li a:focus:hover {
cursor: default;
}
The :focus pseudo class is meant for form elements, so the Webkit implementation does not apply it to other elements unless a tabindex attribute is added to the tag.
http://nemisj.com/focusable/
Actually, the anchor element not being mouse-focusable is a long-standing bug, see https://bugs.webkit.org/show_bug.cgi?id=26856 for the reference.