Say I have my SCSS file written like this, where all the brackets end on the same line:
.test{ color: #fff; text-decoration: none;
.test2{ position: relative;
.test3{ display: block }}}
Is there anyway to format just the closing brackets to something like this?
.test{ color: #fff; text-decoration: none;
.test2{ position: relative;
.test3{ display: block }
}
}
You can install CSSFormat by Package Control, and go to:
Edit -> CSS Format -> Compact(Break Selectors, No Spaces)
Related
I could able to remove .ui-state-default in the inspector panel, but I need to know how could I able to do it in the html or css
Simply set those styles to default at the end of your CSS file.
.ui-state-default {
border: none;
background-color: initial;
color: initial;
}
You can do something like this:
.ui-state-default
{
border:unset;
background:unset;
color:unset;
}
As above, I want to make custom line through that response to the wrapped text
not via line through. Is it possible to make it happens?
Update your css and html like this
css
.text1 {
font-size: 30px;
width: 600px;
background: yellow;
position: relative;
z-index: 0;
color:#f10;
text-decoration:line-through;
}
.text1 p{ color:#000; }
HTML
<div class="text1"><p>Hellow World!Hellow World!Hellow World!Hellow World!</p></div>
If target file is .php none of the formatting for the tag will be applied. Only if the tag is for a .html or .htm will the formatting apply. The link works either way and the .php file is loaded.
Email2
tag formatted properly from css file
Email2
no format applied
tags applied:
a {
color: #cccccc;
}
a:hover {
color: hotpink;
}
Hope I am doing this right:
Here is the fiddle page of all the html and css
you will see that the formatting is done on the .html but not on the .php
Thank you
https://jsfiddle.net/96fcapmw/
In your fiddle, your CSS ends like this:
.footer a:hover {
color: hotpink;
text-decoration: underline;
}
.footer a:visited {
color: #fff;
}
But that way, the a:visited style will always overwrite the a:hover style as soon as you have clicked that link once, just because of the order of those to rules. (the second always overwrites the first one, if it has been visited once)
To avoid that, just turn the order around:
.footer a:visited {
color: #fff;
}
.footer a:hover {
color: hotpink;
text-decoration: underline;
}
Here it's done that way in the fiddle: https://jsfiddle.net/ntfx5xws/1/
== FIXED BY CHROME IN VERSION 60.0.3112.90 ==
-CHROME BUG-
bug reported: https://bugs.chromium.org/p/chromium/issues/detail?id=703807&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=
Okay, so I've been working on a project that has CSS line numbers. When users highlight/select text the numbers get highlighted/selected as well. Luckily the :before content doesn't get copied with it, but it still annoys me. Is there any way to fix this.
Notes: Pre is contenteditable='true'
What I have tried:
user-select: none;
AS WELL AS
pre code:before::selection {
background: transparent;
}
This is some example code:
<pre contenteditable='true'><code>bla</code><code>bla</code><code>bla</code></pre>
<style>
pre {
margin: 0px;
outline: none;
}
pre code {
display: block;
color: #a9b7c6;
counter-increment: line;
}
pre code:before {
content: '\00a0'counter(line)'\00a0';
margin-right: 2px;
border-right: solid #4b4b4b 1px;
}
</style>
What it looks like now:
What it should look like:
You should have included an MCVE in your question. It is now not clear what goes wrong. I cannot reproduce your problem, please see the below snippet.
Note that having the pre be contentEditable does not combine very well with having every line be a separate code element. I am assuming that you are handling this via JavaScript? Or am I misunderstanding what you do?
In any case, the below (that does not even use user-select: none) seems to work for me (in Firefox and Chrome, screenshot is taken in Firefox).
pre, code {
margin: 0;
padding: 0;
}
pre {
font-size: 0;
}
pre code {
counter-increment: line;
font-size: 1rem;
}
pre code:before {
content: counter(line)".";
margin-right: .5rem;
padding-right: .2rem;
border-right: 1px solid #ccc;
}
<pre contenteditable="true">
<code>a line 1</code>
<code>a line 2</code>
<code>a line 3</code>
<code>a line 4</code>
<code>a line 5</code>
<code>a line 6</code>
</pre>
Edit. I can actually reproduce the issue in Chrome. It looks like only the counter is highlighted by the selection, any other content is not. That is, in the below snippet, the dot is not highlighted. If I replace the content: counter(line)"." with, say, content: "1.", then the selection ignores the pseudo-elements as expected. The counter is always selected. It is not impacted by styling of ::selection either. This smells like a bug in Chrome to me - although nothing is guaranteed about text selection in the CSS spec of course (user-select and ::selection are both only in the draft for CSS4-UI)... But text in pseudo-elements should really not be selectable.
You could open a bug report. See what they say.
The only thing I can offer you is a workaround. Hope it still helps. It puts the line numbers in a completely separate element. The line numbers now need to be maintained using JavaScript. Since you state that you already have scripts in place to handle editing, I figured why not script this too?
* {
margin: 0;
padding: 0;
background: #fff;
color: #000;
}
.editor {
position: relative;
}
html {
font-size: 18px; /* define font size for rem */
}
pre {
padding-left: 2rem;
font-size: 0;
}
pre code {
font-size: 1rem;
line-height: 1.3rem;
}
lines {
position: absolute;
top: 0;
left: 0;
}
line {
display: block;
padding-right: .2rem;
border-right: 1px solid #ccc;
font-family: monospace;
font-size: 1rem;
line-height: 1.3rem;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
<div class="editor">
<pre contenteditable="true">
<code>a line 1</code>
<code>a line 2</code>
<code>a line 3</code>
<code>a line 4</code>
<code>a line 5</code>
<code>a line 6</code>
</pre>
<lines>
<line>1.</line>
<line>2.</line>
<line>3.</line>
<line>4.</line>
<line>5.</line>
<line>6.</line>
</lines>
</div>
It might not work because you forgot the prefixes:
pre code::before {
content: counter(line);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
If that doesn't work:
pre code::before {
content: counter(line);
pointer-events: none;
}
I have some html anchor link code, and unlike the rest of document I want it to look like it is not a link.
Is there a simple way to disable the style change caused by wrapping text in a anchor tag without having to brute force it to be the same (ie, if I change the body font style I don't have to also change some other :link stuff).
Setting color to black and text-decoration to explicitly none is a little more aggressive than worked for me.
I was looking for the CSS of the anchors to be "benign" and just blend into the existing CSS. Here's what I went with:
a.nostyle:link {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
a.nostyle:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
Then I just added the CSS nostyle class to the anchors that I wanted to be unformatted.
I achieved this by creating a class .reset-a and targeting all of its' pseudo classes.
Targeting of all pseudo classes is important to make it flawless.
outline: 0 property removes the dotted border that surrounds a link when it is focused or active.
.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active {
text-decoration: none;
color: inherit;
outline: 0;
cursor: auto;
}
If you don't care about IE, you can attach :not(#exclude) (where exclude is the ID of the link in question) to your link styles:
a:link:not(#exclude), a:visited:not(#exclude) {
text-decoration: none;
color: blue;
cursor: pointer;
}
Otherwise I don't think you can brute-force it the way you describe. You can either use an inline style instead (not recommended) or you can use a special class/ID assigned to that link, whose selector you'd group with body. For example, if you had these styles:
body {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
You can simply toss in a more specific selector, that'd match that link, onto the body rule:
body, #exclude {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
Here is a handy snippet if you want to copy-paste the accepted solution into React
const UnstyledLink = ({ href, children }) => (
<a
href={href}
style={{
textDecoration: "inherit",
color: "inherit",
cursor: "auto",
}}
>
{children}
</a>
);