Recently started to work with Prettier in VSC and so far so good; the only issue I found is the "diagram" of the ID. How can I adjust the format?. My Prettier: Print Width's value is 120, so is not that.
Exp. (Prettier on)
#mail_user,
#pass_user,
#name_user,
#cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
I'm looking something like:
#mail_user, #pass_user, #name_user, #cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
Few lines and just simply like it more. Thx in advance.
Related
I've never used compass before. I've been converting LESS files over to SCSS and including compass. I have a grunt set up that compiles this along with some other tasks I'm using. I had an earlier question about SCSS Math not working using Grunt-Contrib-Sass that got resolved. Now that I'm using Compass to compile my SCSS no Math is being done what so ever. Here is an example of what's being output:
-webkit-border-radius: 50% 50%;
-moz-border-radius: 50% / 50%;
border-radius: 50% / 50%;
display: inline-block;
margin-right: 10/10em;
padding-top: 5/10em;
width: 25/10em;
height: 19/10em;
border: 1px solid #ababab;
color: #ababab;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: 10/16em;
This is what it's being compiled from:
#include border-radius( 50%, 50% );
display: inline-block;
margin-right: #{10/10}em;
padding-top: #{5/10}em;
width: #{25/10}em;
height: #{19/10}em;
border: 1px solid $mediumgray;
color: $mediumgray;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: #{10/16}em;
I don't see any options that look like they would take care of this. Has anyone had / resolved this issue?
I'm not sure that you have a full understanding of interpolation in SASS (me neither). Check out the docs here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_
The way I would do this is as follows (irrelevant code omitted):
margin-right: 10/10 * 1em;
padding-top: 5/10 * 1em;
width: 25/10 * 1em;
height: 19/10 * 1em;
font-size: 10/16 * 1em;
This compiles to
margin-right: 1em;
padding-top: 0.5em;
width: 2.5em;
height: 1.9em;
font-size: 0.625em;
I want to accomplish this css (and more not posted for brevity) with LESS so I can have more control and auto creation of classes.
Not sure how much LESS can help me with it.
.m-xs {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
.m-t-xs{
margin-top: 5px;
}
.m-r-xs{
margin-right: 5px;
}
.m-b-xs{
margin-bottom: 5px;
}
.m-l-xs{
margin-left: 5px;
}
.m-h-xs{
margin-right: 5px;
margin-left: 5px;
}
.m-v-xs{
margin-top: 5px;
margin-bottom: 5px;
}
I want this to be repeated for several sizes (xs, s, m, l, xl, etc) and also other properties like padding.
how can I use less to do this kind of 'autocreate' thing ? is even possible without writing all the classes?
I never used LESS but I see heavy use of it on bootstrap and I think this can be achieved.
I tested few things but looks like it's an advanced scenario because none of the tutorials have it covered.
thanks!
To generate the classes that you've mentioned there you could try parameterised mixins:
.classes (#size) {
.m-#{size} {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
.m-t-#{size}{
margin-top: 5px;
}
.m-r-#{size} {
margin-right: 5px;
}
.m-b-#{size} {
margin-bottom: 5px;
}
.m-l-#{size} {
margin-left: 5px;
}
.m-h-#{size} {
margin-right: 5px;
margin-left: 5px;
}
.m-v-#{size} {
margin-top: 5px;
margin-bottom: 5px;
}
}
.classes(xs);
.classes(s);
.classes(m);
.classes(l);
.classes(xl);
Further parameterising as necessary.
I'm working in the main page of www.recaccesorios.com and I'm struggling with a padding. The vertical distance between two elements is too big and I don't know why is doing that. I'll show you the inspection with Google Chrome:
As you can see, Chrome is telling me that the top padding is 0 or null, but in the image you can see that it isn't true. What is happening?
My horrible CSS (not the whole CSS, I can't put here more than 3000 lines...):
#galeria {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
#galeria > h5 {
text-align: center;
}
#noticias > h5 {
text-align: center;
}
#noticias a {
color:#555;
}
#noticias p {
text-align : justify;
padding-left:12px;
padding-right:12px;
}
#noticias {
height:292px;
}
#vistaPrevia {
position: absolute;
z-index: 6;
top: 40px;
display: none;
}
#galeria > img {
display: block;
margin-left: auto;
margin-right: auto;
}
#galeria > span {
margin-left: 5px;
}
#noticias {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
.td-galeria {
padding-right: 6px;
padding-left: 0px;
border-color:transparent;
width:50%;
height:300px;
}
.td-noticias {
padding-left: 6px;
padding-right: 0px;
}
I believe the issue is the reset on line 42 of the CSS file vertical-align: baseline; this seems to be causing your chrome issues.
This solves the issue:
#tablaInicio td {vertical-align:}
But it is strange.
EDIT:
Found out why it is strange; it is a JS script causing the extra height.
The Problem exists in line 42 of Style.css;
remove vertical-align:baseline;
and also correct
#tablaInicio td {vertical-align:}
We need to see your CSS to understand this better. But, I'm guessing you've declared the padding somewhere else in your code.
In your CSS file, change the padding value line to something like this:-
"padding: 0px !important";
the !important message means it will ignore any other values you try to set for padding.
I hope this helps.
I've read about postion:absolute problems and tried almost every possible solution. Including positioning divs relatively, wrapping them in a relatively positioned parent etc etc, but it didn`t help.
I'm drawing a table and after that im putting divs in it in a specified place. Table (grid) prints fine but places where divs should be are printed in slightly different color and divs aren`t there. In chrome it prints ok. Has anyone managed to find a solution yet? Maybe I'm doing something else wrong?
My css:
body
{
margin: 0px;
padding: 0px;
font-family: Verdana;
-moz-user-select: none;
}
.grid
{
height: 100%;
border: 1px solid;
border-collapse: collapse;
}
.grid tr
{
text-align:center;
border-bottom: 1px dashed;
cursor: cursor;
}
.grid td.hourCell
{
width: 100px;
vertical-align:top;
font-size: 10px;
font-weight: 500;
height: 60px;
}
.grid th.hourCell
{
width: 100px;
}
.grid th
{
font-weight: bold;
height: 20px;
width: 200px;
font-size: 12px;
font-weight: 500;
font-family: Verdana;
border-right: 1px solid;
background-repeat: repeat;
cursor: cursor;
}
.grid td
{
height: 30px;
width: 200px;
vertical-align: top;
}
.div_which_doesnt_print
{
padding: 0px;
margin: 0px;
width: 200px;
font-size: 10px;
font-family: Verdana;
height: 0px;
position: absolute;
border-style: solid;
border-width: thin;
overflow: hidden;
opacity:0.7;
z-index: 3;
}
Every help would be greatly appreciated! Even reassuring me that solution is still unavaible.
EDIT: It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
If you are Inserting the Divisions Inside the Table Cells, then just give the Cell TD/TR position to relative and then give absolute positioning to the div inside it.
This was working fine for me in few projects.
I hope this helps.
I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.