How to auto sorting less property after file save on sublime text 3 editor? I used CSS Format for that. But in that package alphabetic sorting is not available.
Can anyone suggest me any package or custom rule for auto sorting less property in sublime?
.page-main > .page-title-wrapper {
.page-title {
text-transform: uppercase;
font-size: 15px;
font-weight: #font-weight__heavier;
letter-spacing: 4px;
}
}
Expected result:
.page-main > .page-title-wrapper {
.page-title {
font-size: 15px;
font-weight: #font-weight__heavier;
letter-spacing: 4px;
text-transform: uppercase;
}
}
Related
The first pseudo class in the styled.q isn't working. It will not appear on the screen. If I copy and paste it so that ::before is listed first it doesn't work. If I list the first pseudo class a second time it works.
const ResearchingRyan = styled.div`
height: 100vw;
width: 100vw;
background-image:url(${phonePic});
background-repeat: no-repeat;
background-position: left;
background-size: cover;
display:flex;
flex-direction:column;
justify-content: flex-end;
align-items: center;
#media screen and (min-width: 525px) {
background-image:url(${tabletPic});
height: 500px;
width: 500px;
}
#media screen and (min-width: 1100px) {
background-image:url(${desktopPic});
height: 500px;
width: 500px;
}
`
const QuoteP = styled.p `
background-color:${dark};
color:${bgAlt};
padding:1rem
`
const QuoteQ=styled.q`
quotes: "\201C", "\201D";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
`;
In "QuoteQ" component you need to correct "quotes" property. You write is correct, but sometimes in styled components meet especially work with unicode in something properties, example is "quotes".
Because of this, styles were not applied to pseudo-elements. Because style processing stopped at the quotes property. Correct the quotes and everything will work.
Below represent code with correct "quotes" property. And link to codesandbox with demo with this code.
https://codesandbox.io/s/styled-components-forked-1r1qc5
Also link to github issue with like problem.
https://github.com/styled-components/styled-components/issues/3413
const QuoteQ = styled.q`
quotes: "\\201c" "\\201d";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color: blue;
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color: red;
}
`;
I've installed the express-minify middleware but for some reason it seems to cause an error whilst loading the attached css file.
I have tried validating the CSS with an online service and it doesn't give me any error.
I have tried to debug by removing all elements leaving one at the time and when I hit .mainmenu tr td:hover:not(.mainmenu_item_selected) it fails.
So removing everything from .mainmenu tr td:hover:not(.mainmenu_item_selected) to the end of the file will make it work (Obviously without all the other required styles).
I have even tried to recreate the file and also name it differently without any success.
The express logs are showing me: GET /stylesheets/gctl.css 200 4.954 ms - - meaning that the file should be served correctly.
Its a standard installation as per npm website:
var minify = require('express-minify');
app.use(minify());
File (saved as gctl.css)
In main page (Using PUG): link(rel='stylesheet' href='/stylesheets/gctl.css')
CSS file:
html, body, * {
font-family: 'Raleway', sans-serif;
margin: 0;
}
.centered {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loginform {
text-align:center;
vertical-align:middle;
width: 30%;
height: 50%;
}
.closenewitem {
cursor: pointer;
}
/* Tooltip overide settings */
div.tooltip-inner {
max-width: 500px;
}
/* Remove outlines such as in chrome */
input:focus {
outline: 0;
}
/* all input text align center*/
input, textarea, label {
text-align: center;
cursor: pointer;
font-weight: 400;
}
/* Labels for help add help class to them */
label.help:hover {
color: red;
}
/* Logo CSS */
.logo {
position: absolute;
cursor: pointer;
top: 4px;
height: 40px;
}
/* menu css */
.mainmenu {
border-right-width: 1px;
border-right-style: solid;
border-right-color: lightgray;
margin-left: -15px;
height: 100%;
width: 100%;
}
.mainmenu tr td {
padding: 10px;
}
.mainmenu tr td:hover:not(.mainmenu_item_selected) {
border-right-color: red;
border-right-style: solid;
border-right-width: 3px;
color: black;
cursor: pointer;
background-color: #f0f0f0; /*#f9eafc*/
}
/* Selected menu item */
.mainmenu_item_selected {
border-right-color: black;
border-right-style: solid;
border-right-width: 3px;
background-color: lightgray; /*#f7faff*/
font-weight: 700;
color: black;
}
.mainmenu tr td span {
padding-left: 2px;
}
/* Footer div for additions to DB*/
.footer {
overflow: scroll;
position: absolute;
bottom: 0px;
height: auto;
min-height: 50%;
padding-bottom: 20px;
background-color: #f6f6f6;
border-top-color: lightgray;
border-top-style: solid;
border-top-width: 1px;
width: 100%;
}
.fixed-button {
position: absolute;
top: 4px;
right: 4px;
}
/* Error handling CSS */
.customerror {
border-color: red;
border-width: 2px;
background-color: #ffcccf;
font-weight: bold;
}
/* Shadow only for desktop icons panel as otherwise it would appear everywhere and it's annoying! */
.dsk-panel:hover {
-webkit-box-shadow: -1px 5px 15px 0px lightgray;
-moz-box-shadow: -1px 5-webkitpx 15px 0px lightgray;
box-shadow: -1px 5px 15px 0px lightgray;
}
.desktop-icon {
width: 60px;
opacity: 0.6;
}
I'm stuck and have no clue on what is causing the problem!
If you're sure that the default behavior breaks the Bootstrap layout and there is no issue posted about it yet then you should post an issue on GitHub where this project tracks things like that.
But "breaks layout" doesn't say anything really. Does it change margins? Does it remove borders? What exactly does it break and how? So you should prepare a minimal set of CSS that this module breaks in a predictable manner instead of saying vague claims like that if you want your issue to be taken seriously.
It's entirely possible that you found a bug in this module but it's really hard to tell after an overly general claims like this.
I am trying to prepend text to my CSS to make it work in a specific div, but unfortunatly it's over 500 lines, so manually editing to add would be a pain and not worth it.
What I want to achieve (this is my css before using the sublime function (if it has one))
.innerAll {
padding: 10px;
position: relative;
}
.layout-timeline ul.timeline {
list-style: none;
margin: 0;
padding: 10px 10px 10px 35px;
}
.layout-timeline ul.timeline > li {
position: relative;
padding: 0 0 10px;
}
.separator.bottom {
padding: 0 0 10px;
}
.separator {
padding: 10px 0 3px 0;
display: block;
}
.layout-timeline ul.timeline > li .date {
width: 50px;
padding: 5px 0;
text-align: center;
text-transform: uppercase;
font-weight: 700;
position: absolute;
left: -70px;
top: 0;
z-index: 2;
}
What I want to achieve:
#timeline .innerAll {
padding: 10px;
position: relative;
}
#timeline .layout-timeline ul.timeline {
list-style: none;
margin: 0;
padding: 10px 10px 10px 35px;
}
#timeline .layout-timeline ul.timeline > li {
position: relative;
padding: 0 0 10px;
}
#timeline .separator.bottom {
padding: 0 0 10px;
}
#timline .separator {
padding: 10px 0 3px 0;
display: block;
}
#timeline .layout-timeline ul.timeline > li .date {
width: 50px;
padding: 5px 0;
text-align: center;
text-transform: uppercase;
font-weight: 700;
position: absolute;
left: -70px;
top: 0;
z-index: 2;
}
So with sublime is it possible to select all text and then prepend some? I can't ctrl + f to replace.
I can't ctrl + f to replace
No, because ctrl+f is "find". Use ctrl+h for replace, and
with regex enabled
replace ^[^\n]+ \{
with #timeline $0
do you want to prepend literally every single selector? If so, search for
{
Since that is present in and only in the line where you want to prepend, then press alt+enter to select every found instance. Pos1 to go to the beginning of all those lines and type #timeline. Sublime is usually pretty smooth, but it might take some time to process that many selections all at once.
Edit: just remembered, if you don't want to prepend all selectors, but those that you do want prepended are all together, you can first select the entire block that contains those selectors and then search with the option "In selection" turned on (button two to the left of the search text field)
I dont know if there is any in sublime but considering you have installed php
run this script you will get what you need in this css_file_with_addition.css file at the same directory where css_file_without_addition.css is present
$fp = fopen("css_file_without_addition.css", "r");
$fp_modify = fopen("css_file_with_addition.css","w+");
while($fst = fgets($fp)){
if(strpos($fst,"{")){
$fst = "#timeline ".$fst;
}
fwrite($fp_modify,$fst);
fclose($fp);
fclose($fp_modify);
}
?>
I have a very simple and easy to understand method, but it is very effective;
I am using opencart 2.0.1.1. I have removed wishlist and compare button from featured module. Now I am facing a problem that the cart button is at left position but I want it to place it center..
Please tell me how can I place it in center?
Go to your site source > catalog > view > theme > default > stylesheet > stylesheet.css > & then find below css & then Replace to width: 100%; instead of width: 60%; in below css.
.product-thumb .button-group button {
width: 60%;
border: none;
display: inline-block;
float: left;
background-color: #eee;
color: #888;
line-height: 38px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.
So I added a width element into my span in the template. (I know it isn't the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).
<script type="text/template" id="loadedwith-template">
<span style="width:100" class="library"><%= library.name %></span>
<input style="width:100" class='input' type="text" />
<button class="delete_lw" >delete</button>
</script>
However when I look at it in the browser, the element shows up as before without the width setting applied.
"Inspect element" in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.
There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).
a { color: #2929FF; }
a:visited { color: #777; }
a:hover {
color: #8F8FFF;
text-decoration: none;
}
body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background: #FFF;
color: #444;
padding: 25px 50px;
}
button, .delete, .swap {
border: 0;
border-radius: 5px;
color: #FFF;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
button:hover, .delete:hover, .swap:hover { opacity: 1; }
button {
background: #2929FF;
font-size: 0.75em;
padding: 7px 12px;
opacity: .75;
}
h1 {
font-size: 1.25em;
letter-spacing: -0.5px;
}
p {
color: #777;
font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
}
span {
display: inline-block;
margin-right: 10px;
}
ul { padding-left: 0; }
.delete, .swap {
font-size: 0.625em;
opacity: .25;
padding: 3px 10px;
position: relative;
top: -3px;
}
.delete { background: #FF29D0; }
.swap { background: #FF6529; }
You need to specify a unit of measurement
Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.
I.e. there is no "default unit" in CSS, it's just that the browser may try to help you out, although it may as well just ignore your statement that doesn't specify units as an invalid one.
Try style="width:100px"
You should specify a unit, like px:
style="width: 100px"