How to write the code below in less. How to optimally shorten the code.
Thanks in advance!
Code:
.border {
border: solid 1px;
}
.border-color-inherit {
border-color: inherit !important;
}
.border-top {
border-top: solid 1px;
}
.border-left {
border-left: solid 1px;
}
.border-bottom {
border-bottom: solid 1px;
}
.border-right {
border-right: solid 1px;
}
.border-none {
border: none !important;
}
I try:
#x: ~"solid 1px";
.res (#border)
{
border-top: #x;
border-left: #x;
border-right: #x;
border-bottom: #x;
}
.border-top{
.res (#x);
.border-left{
.res (#x);
}
}
So, I tried in many ways to make it possible but without any success.
It does not look good.
Try it this way
.border {
border: solid 1px;
border-color: inherit !important;
}
.border-none {
border: none !important;
}
Related
How to write this rule in LESS? I've been looking in documentation at http://lesscss.org/, but I did not find anything :(
input.text:focus { border: 1px solid #f00; }
input.text:focus ~ label.placeholder,
input.text:not(:focus):valid ~ label.placeholder { color: #f00; }
I have figured out this, it works, but I do not know how to correctly add the third line into this:
input.text { padding: 15px; background: #fff;
&:focus { border: 1px solid #f00;
~label.placeholder { color: #f00; }
}
}
Do it like below
input.text { padding: 15px; background: #fff;
&:focus,&:not(:focus):valid {
~label.placeholder { color: #f00; }
}
&:focus {
border: 1px solid #f00;
}
}
That will compile into
input.text {
padding: 15px;
background: #fff;
}
input.text:focus ~ label.placeholder,
input.text:not(:focus):valid ~ label.placeholder {
color: #f00;
}
input.text:focus {
border: 1px solid #f00;
}
I was writing some CSS for a very common user login form, except that when I logged in from another computer with the same browser (Firefox) and operating system (Ubuntu), some strange white borders emerged on the outside.
What's even stranger is that they tend to appear and disappear simply by resizing the window.
Because? how can this be prevented?
Thanks everyone for the help! :)
HTML:
<div class="npt nptFocus">
<span>Aa</span>
<input type="text" name="usr" placeholder="Nickname">
</div>
LESS:
// Palette
#main_color: blue;
#main: darken(saturate(#main_color, -97%), 25%);
#neutral: saturate(darken(#main_color, -25%), -25%);
#verde: #118769;
#rosso: #fe5f55;
#bianco: darken(saturate(#main_color, -40%), -45%);
#v_soft = 10%;
#v_medium = 25%;
#v_hard = 40%;
#neutral_dark: darken(#neutral, #v_soft);
#verde_dark: darken(#verde, #v_soft);
#rosso_dark: darken(#rosso, #v_hard);
#main_light: lighten(#main, #v_hard);
#main_dark: darken(#main, 8%);
#radius: 5px;
.npt {
display: table;
background: #bianco;
border-radius: #radius;
border: solid 1px #main_light;
width: 100%;
overflow: hidden;
input, span{
display: table-cell;
padding: 10px;
transition: 0.25s;
}
input {
border: none;
background: none;
border-radius: 0px;
color: #main;
width: 100%;
}
span {
border-right: solid 1px darken(#main_light, -15%);
color: darken(#main, -40%);
background: darken(#main_light, -25%);
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
&.nptFocus {
border: solid 1px #neutral_dark;
span {
border-right: solid 1px #neutral_dark;
color: #bianco;
background: #neutral_dark;
}
}
}
SCREEN:
UPDATE 1: Added compiled CSS
.npt {
display: table;
background: #ebebfa;
border-radius: 5px;
border: solid 1px #a3a3a8;
width: 100%;
overflow: hidden;
}
.npt input,
.npt span {
display: table-cell;
padding: 10px;
transition: 0.25s;
}
.npt input {
border: none;
background: none;
border-radius: 0px;
color: #3e3e42;
width: 100%;
}
.npt span {
border-right: solid 1px #cacace;
color: #a3a3a8;
background: #e5e5e6;
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
.npt.nptFocus {
border: solid 1px #6363e9;
}
.npt.nptFocus span {
border-right: solid 1px #6363e9;
color: #ebebfa;
background: #6363e9;
}
.npt.nptError {
border: solid 1px #fe5f55;
}
.npt.nptError span {
border-right: solid 1px #fe5f55;
color: #ebebfa;
background: #fe5f55;
}
.npt.nptError.nptFocus {
border: solid 1px #d38580;
}
.npt.nptError.nptFocus span {
border-right: solid 1px #d38580;
background: #d38580;
}
.npt.nptOk {
border: solid 1px #118769;
}
.npt.nptOk span {
border-right: solid 1px #118769;
color: #ebebfa;
background: #118769;
}
.npt.nptOk.nptFocus {
border: solid 1px #6cac9b;
}
.npt.nptOk.nptFocus span {
border-right: solid 1px #6cac9b;
background: #6cac9b;
}
UPDATE 2:
Following the help of #Manas Khandelwal and the tests carried out together, it seems that this is due to a browser rendering error as the logo above the form, having the width declared as a percentage, will never have a height with an integer value .
Ideas?
Really the only solution is really having to round all the heights via JavaScript?
$('.roundHeight').each(function(){
if(!$(this).is("[data-exmargin]")) $(this).attr('data-exmargin',parseFloat($(this).css('marginTop')));
var d = parseFloat($(this).attr('data-exmargin')) - ($(this).height() - Math.floor($(this).height()));
$(this).css('marginTop', d + 'px');
});
Add outline: none; to the input element;
Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQwP
Which is the best way to write a class inside a class in less? I have a table in my view, where the style is different only for the last row of the table. My less class is like below. I am not getting any error. But I just wanted to check is this how to write a class inside another or any other better way?
.div-td
{
display: table-cell;
border-bottom: 1px solid silver;
padding: 0.75rem;
}
.bold-border
{
.div-td;
border-top: solid #808080 !important;
border-bottom: solid #808080 !important;
}
my end result is:
.div-td {
display: table-cell;
border-bottom: 1px solid silver;
padding: 0.75rem;
}
.bold-border {
display: table-cell;
border-bottom: 1px solid silver;
padding: 0.75rem;
border-top: solid #808080 !important;
border-bottom: solid #808080 !important;
}
If you are trying to target an element INSIDE .div-td then nest that style in your less code like:
.div-td {
display: table-cell;
border-bottom: 1px solid silver;
padding: 0.75rem;
.bold-border {
border-top: solid #808080 !important;
border-bottom: solid #808080 !important;
}
}
I have the following LESS statement that tries to put a colored background on the :after sudo class:
.hexagon:after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
&.red-light {
border-top: 50px solid #brand-red-light;
}
&.red {
border-top: 50px solid #brand-red;
}
&.red-dark {
border-top: 50px solid #brand-red-dark;
}
&.freen-light {
border-top: 50px solid #brand-green-light;
}
&.green {
border-top: 50px solid #brand-green;
}
&.green-dark {
border-top: 50px solid #brand-green-dark;
}
}
Only anything in the nested LESS statement eg: border-top: 50px solid #brand-red-light does not make it to the screen when rendered. I have tried taking out the "&" sign and replacing it with an ">" but no luck. I am trying to draw a hexagon with CSS.
Your LESS is creating the following CSS selectors:
.hexagon:after
.hexagon:after.red-light
.hexagon:after.red
.hexagon:after.red-dark
.hexagon:after.green-light
.hexagon:after.green
.hexagon:after.green-dark
I think you meant to generate this:
.hexagon:after
.hexagon.red-light:after
.hexagon.red:after
.hexagon.red-dark:after
.hexagon.green-light:after
.hexagon.green:after
.hexagon.green-dark:after
If so reconfigure your LESS to the following:
.hexagon {
&:after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
&.red-light:after {
border-top: 50px solid #brand-red-light;
}
&.red:after {
border-top: 50px solid #brand-red;
}
&.red-dark:after {
border-top: 50px solid #brand-red-dark;
}
&.green-light:after {
border-top: 50px solid #brand-green-light;
}
&.green:after {
border-top: 50px solid #brand-green;
}
&.green-dark:after {
border-top: 50px solid #brand-green-dark;
}
}
From what I understand this is valid LESS syntax :
.some-mixin(#color)
{
border-top:1px solid #color;
}
.some-element {
.some-mixin (#FFFFFF);
}
And would result to this :
.some-element {
border-top:1px solid #FFFFFF;
}
Now let's say our original CSS syntax is like this :
ul.sidebar li.categoryA { border-left: 15px solid #F3661F; }
ul.sidebar li.categoryA.active,
ul.sidebar li.categoryA.active a {
background: #F3661F;
border-top:1px solid #F3661F;
border-bottom: 1px solid #F3661F;
}
ul.sidebar li.categoryA:hover {
color:#AAA; border-left:229px solid #F3661F;
}
Let's also take into account, that under ul.sidebar li there are lots of different "categories" (and not just A), all different just in the color. So that's what I thought :
/* MIXIN */
.category-item (#color)
{
border-left: 15px solid #color;
&.active, &.active a {
background: #color;
border-top: 1px solid #color;
border-bottom: 1px solid #color;
}
&:hover {
color: #color;
border-left: 229px solid #color;
}
}
/* RULES */
ul.sidebar li {
.categoryA { .category-item(#F3661F); }
.categoryB { .category-item(#FF0000); }
.categoryC { .category-item(#00FF00); }
/* Etc... */
}
However : this last one is not working.
Am I doing something wrong? Did I invent another... LESS?
P.S. Just found this answer. Guess what I'm trying to do is still unsupported? Hmmm...
Try this:
ul.sidebar li {
&.categoryA { .category-item(#F3661F); }
&.categoryB { .category-item(#FF0000); }
&.categoryC { .category-item(#00FF00); }
/*Etc.*/
}
this works fine for me. The output is:
ul.sidebar li.categoryA {
border-left: 15px solid #f3661f;
}
ul.sidebar li.categoryA.active,
ul.sidebar li.categoryA.active a {
background: #f3661f;
border-top: 1px solid #f3661f;
border-bottom: 1px solid #f3661f;
}
ul.sidebar li.categoryA:hover {
color: #f3661f;
border-left: 229px solid #f3661f;
}
...