I have a less file with this:
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background: #dark-bg;
margin-top: 2px;
-webkit-box-shadow: 0px -3px 23px 4px #333;
-moz-box-shadow: 0px -3px 23px 4px #333;
box-shadow: 0px -3px 23px 4px #333;
}
I would like to do something like so:
.navbar-default .navbar-nav > .open > a {
background: #dark-bg;
margin-top: 2px;
-webkit-box-shadow: 0px -3px 23px 4px #333;
-moz-box-shadow: 0px -3px 23px 4px #333;
box-shadow: 0px -3px 23px 4px #333;
&:hover, &:focus {
// some command to inherit all the attributes without repeating myself
}
}
I can't seem to find a way to directly inherit everything instead of repeating myself like this. Is this possible with LESS?
You're close, just reuse the & selector once more:
.navbar-default .navbar-nav > .open > a {
&,
&:hover,
&:focus {
background: #dark-bg;
margin-top: 2px;
-webkit-box-shadow: 0px -3px 23px 4px #333;
-moz-box-shadow: 0px -3px 23px 4px #333;
box-shadow: 0px -3px 23px 4px #333;
}
}
The & characters gets replaced with the literal value of the wrapping selector.
Related
Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles
background: #F00;
border: 1px solid #CCC;
from the class main.
http://jsfiddle.net/3Nzp3/3/
see this fiddle
Remove both line
background: #F00;
border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class
background: #F00;
border: 1px solid #CCC;
i think this will help you .
We are using Keyoti Spell Cheker in our web application and its working fine with Zk but I have to add NoSpell checking for Datebox so I have to add the following line in my code:
<zk xmlns:x="xhtml" xmlns:zk="zk" xmlns:d="http://www.zkoss.org/2005/zk/client/attribute">
And in component I have to add an attribute like this: d:nospell='true'
It's working fine for textbox and intbox but not for datebox. I have added it like this:
<datebox d:nospell='true'></datebox>
But the spell checker is still doing spell checking in the datebox component so I just inspected the element and the HTML code looks like this:
<i id="t_3475" class="z-datebox" nospell="true"><iframe id="t_3475-real_IF" scrolling="yes" frameborder="0" src="http://localhost:7080/module-web/core/a.rapidspellweb?t=r&n=blank.html" style="display: none; overflow-x: hidden; overflow-y: scroll; border-width: 1px; border-color: rgb(171, 173, 179) rgb(227, 233, 239) rgb(227, 233, 239); border-style: solid; height: 19px; width: 86px; background: none repeat scroll 0% 0% rgb(255, 255, 255); animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; box-shadow: none; caption-side: top; clear: none; color: rgb(0, 0, 0); content: none; counter-increment: none; cursor: text; direction: ltr; empty-cells: show; align-self: stretch; flex: 0 1 auto; flex-direction: row; order: 0; justify-content: flex-start; font-family: arial,sans-serif; font-size: 12px; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: 400; ime-mode: auto; letter-spacing: normal; list-style: disc outside none; opacity: 1; padding: 2px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; pointer-events: auto; quotes: "“" "”" "‘" "’"; transform: none; transform-origin: 50% 50% 0px; perspective-origin: 50% 50%; perspective: none; backface-visibility: visible; transition-delay: 0s; transition-duration: 0s; transition-property: all; unicode-bidi: normal; vertical-align: baseline; color-interpolation: srgb; color-interpolation-filters: linearrgb; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; vector-effect: none;" tabindex="null"></iframe><input id="t_3475-real" class="z-datebox-inp" type="text" size="11" value="" autocomplete="off" style="display: none;" oldvalue="2013-08-13"></input>
How can we fix this issue so that we can disable spell checking on datebox components?
When using an alpha transparency border with rounded corners in Safari, the background clips into the border. This happens even when using background-clip: padding-box. I know that I can simply wrap the h1's in a span/div/etc and give that the border, but I'm wondering if anyone knows if it is possible to do this without any more mark up.
Here is the css I'm using:
h1.inner {
background: #ffa51f;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
border-right: 10px solid rgba(33,33,33,.05);
color: #FFF;
display: inline-block;
font-size: 47px;
font-weight: 800;
line-height: 1.2;
padding: 0 .6em 0 0;
position: relative;
text-transform: uppercase;
text-align: left;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
background: #ffa51f;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
content: "";
position: absolute;
top: -10px;
bottom: -10px;
width: 9999px;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
right: 100%;
}
Below is a jsfiddle and screenshot with an example of what I'm talking about.
http://jsfiddle.net/39Xen/
http://imgur.com/Hp2bzBm
Is it posible that what you are asking has been addressed here:
CSS rounded corners bug in Safari?
?
It seems that Safari has some limitation with respect to what you are trying to do.
Hope that helps.
I have a problem with displaying a block with top/bottom border and border-radius. Don't know why an inside radius appears within a border.. Please, take look at the screenshot & code below..
http://img703.imageshack.us/img703/3074/scrren1.jpg
<section id="block">
<div class="block-header"><h1>Block</h1></div>
</section>
#block {width:1000px; height:329px; position:relative; border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px;}
#block .block-header { position:absolute; right:0px; top: 0; border-top:10px solid #81a32b; width:500px; border-radius:0px 4px 0px 0px; -webkit-border-radius:0px 4px 0px 0px; }
Do u know any solution to this problem?
jsfiddle
In Opera the height is directly related to the rounding you are trying to achieve
Css
border-top:10px solid #81a32b;
border-radius:0px 10px 0px 0px;
Fiddle -> http://jsfiddle.net/325nH/2/
you have declared:
border-top:10px solid #81a32b;
border-radius:0px 4px 0px 0px;
so you are 6px short that are filled by Opera with white space
I have applied rounded corners styles to my ASP.Net button & text box controls and also to fieldset and legend.
Here is my CSS-
fieldset
{
width:605px;
margin-bottom:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
fieldset legend
{
background: #606060 url(images/bluelines.gif) repeat-x center left;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 7px;
padding: 10px 10px 0px 5px;
}
fieldset legend:hover{
background: #606060 url(images/blue-lines.gif) repeat-x center left;
}
fieldset legend img
{
padding: 0px 6px 0px 0px;
position: relative;
bottom: 5px;
}
.txtBox
{
border: 1px solid #DDDDDD;
height:15px;
width: 200px;
padding: 5px;
background: #ffffff;
-moz-border-radius: 5px;
border-radius:5px;
-webkit-border-radius: 5px;
}
.txtBox:focus{
border: 2px solid #50cff1;
box-shadow: 5px 1px 1px 5px #000;
}
.buton{
background: #50cff1 url(images/nav-act.gif) repeat-x center left;
border: none;
color: #ffffff;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.buton:hover
{color: #000000;}
Here is skin code-
<asp:TextBox runat="server" CssClass="txtBox" SkinID="textBox" />
<asp:Button runat="server" CssClass="buton" SkinID="button" />
But these styles aren't working in Internet Explorer(8,7,6). Please let me know any solution so that all of these styles will apply on these elements(asp.net button & textbox, fieldset & legend) in IE too!
Regards,
nzahra
IE8 and below don't support CSS3, only IE9 does. To mimic CSS3, you'll need to use filters, .htc files (behaviors), images, or some combination thereof for any CSS3.
You can use conditional comments to hide the IE stuff from other browsers. Here's some info on filters, and one way of rounding corners in IE..