In the documentation, there is an example that looks like this:
Nav with a separator between header actions.
But I can't for the life of me figure out how the separator gets added and none of the code examples on the page show an example of it.
Any help would be appreciated, thank you.
I'm not sure which demo that is from (would be helpful to provide a link to make sure I can see what it is). However, some elements automatically add it instead of it being explicitly defined as a standalone element, such as the first .header .header-nav .nav-link element will use the ::before CSS selector to place that line. If you need to put something explicitly, then you'll have to add it yourself.
I hade the same problem upon seeing the provided examples. When reading the sources a divider is only defined for .header-nav elements (https://github.com/vmware/clarity/blob/master/src/clr-angular/layout/nav/_header.clarity.scss) and not for .header-actions.
However you could customize .header-actions .nav-link in the following way:
#import "../node_modules/#clr/ui/src/utils/components.clarity";
#import 'node_modules/#clr/ui/src/layout/nav/header.clarity';
.header-actions {
&:last-child {
& > .nav-link:last-child::after {
content: none;
}
}
.nav-link {
&:last-of-type {
position: relative;
}
&::after {
#include header-section-divider();
left:auto;
right:0;
}
&:last-of-type::after {
left: 0;
}
&.active:last-of-type::after {
content: none;
}
}
}
Related
So this is my code below, for the following page (see screenshot):
I am trying to replace 'Replay course' with the words 'Access course'.
What am I doing wrong?
a.course-card__resume {
display: none;
}
a.course-card__resume:after {
content: 'Access Course';
}
You cannot change content solely using CSS, you need access to the HTML at least, or the ability to write JS if not.
See below for a CSS solution, although this will require you to edit your HTML to include another tag.
a span {
display:none;
}
a::after {
content:'Access Course';
}
<span>Replay Course</span>
Alternatively, if you have the ability to add JS code; see below.
document.getElementsByClassName("course-card__resume")[0].innerText = "Access Course";
Replay Course
You haven't provided your full code, so I can't be sure if this solution will work for you, but see below. It takes advantage of the visibility css rule, but also requires you to use absolute positioning.
a {
visibility:hidden;
position:relative;
}
a::after {
content:'Access Course';
visibility:visible;
position:absolute;
left:0;
}
Replay Course
Did you try the following?
a.course-card__resume:after {
content: 'Access Course';
display: block;
}
when you make the element disappear by display:none. The after element will not be displayed too, because it's dependency doesnt exist.
Maybe you want to try this:
a.course-card__resume {
visibility: hidden;
}
a.course-card__resume:after {
content: 'Access Course';
visibility: visible;
}
I'm a beginner using SCSS and I'm not sure how to rewrite my old CSS into something new using SCSS for a TypeScript project, right now I picked a few examples below to ask this question, if somebody could show the right way, I guess I can figure the rest of the code I have to rewrite.
The samples below summarize everything that I need to learn:
.sb-slider li > a {
outline: none;
}
.sb-slider li > a img {
border: none;
}
.sb-perspective > div {
position: absolute;
}
.sb-slider li.sb-current .sb-description {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 1;
}
There are online conversion tools that are effective, but to learn it by hand, there's one simple rule to keep in mind - any time you see repetition, you know that you can create a nested block out of it. Otherwise, you should just write regular CSS.
For instance, you have 3 declarations in there that start with .sb-slider, so that can become a block. From there you're targeting li > a underneath .sb-slider twice, as well as something underneath that. This lends to SCSS's natural nesting structure, which works exactly how you think it would.
For the .sb-perspective > div declaration, you are only using that once and not repeating it, so there is no reason to make a block out of it. Putting all of that together, you get this:
.sb-slider {
li > a {
outline: none;
img {
border: none;
}
}
li.sb-current .sb-description {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 1;
}
}
.sb-perspective > div {
position: absolute;
}
Learning SCSS from old CSS code - how to rewrite this?
SCSS is a superset of CSS. So you can just copy paste that into a SCSS file and it will just work 👍
I have converted the CSS code you mentioned to SCSS code for better understanding on how easily you can convert your code:
.sb-slider {
li {
& > a {
outline: none;
img {
border: none;
}
}
&.sb-current {
.sb-description {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 1;
}
}
}
}
.sb-perspective {
& > div {
position: absolute;
}
}
If you notice, it follows the pattern that you have to create parent child relationship in the tags or classes which you are using. Keyword "&" represents that you are using the parent naming.
I have this simplified Less script
.placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
.placeholder();
}
.placeholder {
margin-top: 20px;
}
The output when I run this through my local compiler or winless online less compiler is
input {
margin-top: 20px;
}
input::-webkit-input-placeholder {
color: #333333;
}
.placeholder {
margin-top: 20px;
}
Insted of the desired output
input::-webkit-input-placeholder {
color: #333333;
}
.placeholder {
margin-top: 20px;
}
Is this a bug or am I missing something here?
By the result it looks to me like I can't have CSS-selectors with the same name as mixins with default values.
I'm running into this problem when compiling Bootstrap with my site specific code. In this particular case I can work around it, but as the project grows and I include other projects I can't imaging I have to keep track of any mixins with default values?
Edit: I see now that I should have read the manual and pretty much seen on the first page of the docs that everything can be treated as a mixin.
In Less, everything is technically a mixin irrespective of whether we write it with parantheses (as in with parameters) or without parantheses (as in like a CSS class selector). The only difference between the two is that when the parantheses are present, the properties present within it are not output unless called from within a selector block.
Quoting the Less Website:
It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply.
In this case, since the other mixin has a default value for its only parameter, both the properties can apply when called without any parameter and hence there is no way to avoid it from happening.
Workaround Solution: One possible solution to work-around this problem is to enclose all such conflicting rules within a parent selector (like body).
.placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
.placeholder();
}
body{
.placeholder{
margin-top: 20px;
}
}
Compiled CSS:
input::-webkit-input-placeholder {
color: #333333;
}
body .placeholder {
margin-top: 20px;
}
Option 2: Extracted from the solution posted by seven-phases-max in the Less GitHub Issue thread.
For the particular use-case one of possible workarounds is to isolate conflicting classes in unnamed scope so they won't interfere with external names:
.placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
.placeholder();
}
& { // unnamed namespace
.placeholder {
background: #ffffff;
}
} // ~ end of unnamed namespace
Note: The above is a straight copy/paste from the GitHub thread without any modifications so as to not tamper with the information.
#mixin placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
#include placeholder();
}
.placeholder {
margin-top: 20px;
}
that should work.
So if i understood right, you just want to add 20px on top of the placeholder ? Add padding-top to input instead.
input {
padding-top: 20px;
}
I've been working on positioning a button for a web app and ran into some difficulty.I've created this jsfiddle, which demonstrates the problem.
The code is taken out of context, so some of the rules and classes and such may not make sense, but the problem I'm having is the same. The button moves away on click and I can't seem to fix it when playing with the position. I want the button to stay in the same place when clicked, so that clicking on the button will actually take you to the link that it is referencing.
Any Ideas?
Thanks.
You are specifying the link move to 1px from the top of the page in the rule .back:active (what happens when you click down on an item.)
http://jsfiddle.net/3dk48/8/
a.back:active {
/* This breaks it.
position: inherit;
top:1px; */
color: black;
}
In addition, if you want to still have :active effects, you need to have the correct specificity (currently a.back:link rule overrides your color for :active, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)
The LoVe-f-HAte mnemonic:
a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
... ensures that the correct states override the correct other states.
Remove the below code from .back style
position: absolute; // not need
margin-left: 2%; // not need
then the problem can solved.
EDIT:
also make change here..
.back:active {
/* position: absolute;
top: 1px; */
color: black;
}
fiddle: http://jsfiddle.net/3dk48/9/
use this:
.back{
top:32px !important;
}
body{
position:relative;
}
In my first line I have the following style:
* {
text-align:left;
}
Which works well through the site as most of it is left aligned. However a handful of areas need to be text-align: center and it will not update, even with !important. for example:
table.footer {
text-align:center !important;
}
Any ideas on how I can fix this?
It should work as you can see in this live example.
You might want to do this instead:
table.footer td
{
text-align:center;
}
!important is not needed anyway.
Live example
I guees I know what is missing.
The table.footer selector does only match for a table with class footer, not for the elements inside it
You could do
table.footer td {
text-align: center;
}
See http://jsfiddle.net/mMM5q/
or perhaps even better
html {
text-align: left;
}
* {
text-align: inherit;
}
See http://jsfiddle.net/B3F9U/