.class-action:hover, .class-action.activeOne {
color: black;
font-weight: bold;
}
.class-action.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
is there a way to stack these css code? I dont want to repeat same class again. I want all four style for ".class-action.activeOne" and only above 2 style when ".class-action:hover"
other option is below, but it repeats the css
.class-action:hover {
color: black;
font-weight: bold;
}
.class-action.activeOne {
color: black;
font-weight: bold;
margin: 3px 0px;
border-bottom: 2px solid black;
}
Simply nest your selectors:
.class-action {
&:hover,
&.activeOne {
color: black;
font-weight: bold;
}
&.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
}
Related
My asp.net website uses one CSS file with two groups of selectors ".Tab" and ".TabLower". On my development machine the CSS loads with all selectors and is applied correctly, when I deploy the website to production server (IIS 7) only the first selector ".Tab" is loaded if I inspect the page.
What is the cause of this issue?
CSS file
/* ############################################
Tab - default tab
############################################### */
/*Body*/
.Tab .ajax__tab_body
{
border: 5px solid #B6C9D4;
padding: 15px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
color: #000000;
padding: 7px;
background-color: #B6C9D4;
font-weight: bold;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
background-color: #B6C9D4;
padding: 7px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #B6C9D4;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background-color: #F2F2F2;
padding: 7px;
font-weight: bold;
}
.Tab .ajax__tab_inner
{
color: #666666;
background-color: #F2F2F2;
padding: 7px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
/* ############################################
TabLower
############################################### */
/*Body*/
.TabLower .ajax__tab_body
{
border: 5px solid #B6C9D4;
padding: 15px;
}
/*Tab Active*/
.TabLower .ajax__tab_active .ajax__tab_tab
{
color: #000000;
padding: 4px;
background-color: #B6C9D4;
font-weight: bold;
}
.TabLower .ajax__tab_active .ajax__tab_inner
{
background-color: #B6C9D4;
padding: 4px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #B6C9D4;
}
/*Tab Inactive*/
.TabLower .ajax__tab_tab
{
color: #666666;
background-color: #F2F2F2;
padding: 4px;
font-weight: bold;
}
.TabLower .ajax__tab_inner
{
color: #666666;
background-color: #F2F2F2;
padding: 4px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
The button I want:
I have tried this, but it doesn't work:
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 3px double #f26700;
background: #f26700;
}
How can i display this white line with CSS?
Write:
button{
border: 3px double white;
}
DEMO here.
OR:
button{
border: 1px double white;
outline: 1px solid #f26700;
}
DEMO here.
OR:
button{
border: 2px solid white;
box-shadow:0 0 0 0px white, 0 0 0 2px #F26700;
}
DEMO here.
as commented, 2 easy options :
box-shadow and outline:
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 1px solid white;
background: #f26700;
outline:solid #f26700 1px;
padding:0.25em 1em;
}
button + button {
box-shadow: 0 0 0 1px #f26700;
outline:none;
}
demo : http://codepen.io/anon/pen/InDqa
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 1px solid white;
background: #f26700;
outline: solid #f26700 1px;
padding: 0.25em 1em;
}
button+button {
box-shadow: 0 0 0 1px #f26700;
outline: none;
}
<button>outlined</button> <button>shadowed</button>
Use the outline property:
CSS
.button {
font-family:'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
line-height: 1.8em;
border: 1px solid white;
background: #f26700;
width: 100px;
height: 30px;
text-align: center;
outline: 1px solid #f26700;
}
Here's the JSFiddle: http://jsfiddle.net/2kgGF/
You can do this just with an outline.
button {
width: 8rem;
font-size: 1rem;
line-height: 2.4rem;
color: white;
background: darkorange;
border: none;
outline: .1rem solid white;
outline-offset: -.3rem;
}
http://jsfiddle.net/lrsbck/7Zp6X/
I have a menu where each link is a div box. This div box have a gray border-bottom, however, when the link is visited it turns black. I just can't figure why.
On the following image I've clicked the Rediger profil and Log af links.
JSFiddle: http://jsfiddle.net/LpGbT/
HTML
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
<div class="design_sidebar_menu_item">Besøgende</div>
<div class="design_sidebar_menu_item">Mine favoritter</div>
<div class="design_sidebar_menu_item">Rediger profil</div>
<div class="design_sidebar_menu_item">Log af</div>
</div>
CSS
a {
text-decoration: none;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
}
.design_sidebar_menu_item:hover {
color: white;
background-color: #a6242f;
}
You may define a copied version of your div selector with a :visited suffix in order to set new colours for visited objects.
Aldo div classes are prefixed with a dot (.) instead of a sharp (#) character. Just a reminder. :)
.design_sidebar_menu_item:visited {
border-color: <your_color>;
}
If it doesn't harm your design etc. I would suggest this:
HTML:
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
Patrick Reck
Besøgende
Mine favoritter
Rediger profil
Log af
</div>
CSS:
div#design_sidebar a {
text-decoration: none;
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
display: block;
}
div#design_sidebar a:hover {
color: white;
background-color: #a6242f;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
EDIT:
How about adding:
a {
text-decoration: none;
display: block;
border-bottom: 1px solid #d6d6d6;
}
And removing border-bottom: 1px solid #d6d6d6; from .design_sidebar_menu_item {...}
The others will need links around them for this to work.
It doesn't..
I changed border-bottom color to 'green'. Now you have a clear view.
Check jsFiddle : check it out
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #00FF00;
}
I am developing an asp page and the GridView GridLines are not showing up in IE but it is showing up on Firefox and Chrome. Is there something specific that needs to be done for the IE side.
This is my css file for GridView:
/* grid table */
table.gridview {
border-collapse: collapse;
margin: 0px !important;
border: #6593cf 1px solid;
}
.gridview td {
font-size: 11px;
font-family: Arial;
color: #000000;
cursor: default;
text-align: left;
}
.gridview th {
font-size: 11px;
font-family: Arial;
color: #484848;
cursor: default;
text-align: left;
}
table.gridview a {
color: #000000;
text-decoration: none;
}
table.gridview a:hover {
text-decoration: underline;
}
/* header row */
tr.gridview_hdr {
background-color: #deecff;
}
.gridview_hdr th {
color: black;
font-weight: normal;
text-align: left;
border-top: solid 1px #6593cf;
border-bottom: solid 1px #6593cf;
border-left: solid 1px #6593cf;
border-right: solid 1px #6593cf;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
.gridview_hdr th a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
.gridview_hdr th a:hover {
color: #000000;
text-decoration: underline;
}
/* item row */
tr.gridview_itm {
background-color: #ffffff;
}
.gridview_itm td {
padding: 2px 5px;
border-right: #ffffff 0px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 0px solid;
border-bottom: #add1ff 1px solid;
}
.gridview_itm td a {
text-decoration: underline;
}
/* alternating item row */
tr.gridview_aitm {
background-color: #ffffff;
}
.gridview_aitm td {
padding: 2px 5px;
border-right: #ffffff 0px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 0px solid;
border-bottom: #add1ff 1px solid;
}
.gridview_aitm td a {
text-decoration: underline;
}
/* pager row */
tr.gridview_pgr {
width: 100%;
font-family: verdana;
font-weight: bold;
font-size: 11pt;
color: #ff9900;
}
.gridview_pgr td {
background-image: url(/Monitor/App_Themes/Sugar2006/images/bg.gif);
background-repeat: repeat-x;
height: 23px;
padding: 0px;
font-size: 10px;
font-family: Arial;
}
.gridview_pgr_ddl {
font-size: 10px;
font-family: Arial;
}
.gridview_pgr A {
font-family: verdana;
font-size: 9pt;
text-decoration: none;
color: #0000ff;
}
and this is my aspx page:
<asp:GridView
ID="GridView1"
runat="server"
CssClass="gridview"
RowStyle-CssClass="gridview_itm"
AlternatingRowStyle-CssClass="gridview_aitm"
HeaderStyle-CssClass="gridview_hdr"
PagerStyle-CssClass="gridview_pgr"
AutoGenerateColumns="False"
AllowPaging="True" PageSize="50" Width="100%" AllowSorting="True"
onsorting="GridView1_Sorting" onrowdatabound="gridView1_RowDataBound"
onpageindexchanging="GridView1_PageIndexChanging">
Also I do have GridLines = "Both" on the GridView properties.
What am I doing wrong?
Thanks for your help.
With the GridView, the declarative bordercolor attribute adds an inline style declaration which only applies to the table itself, not individual cells.
Adding the bordercolor attribute programmatically does not use an inline style, but uses the HTML bordercolor property, which browsers apply to ALL borders inside the table.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (TableCell tc in e.Row.Cells)
{
tc.Attributes["style"] = "border-color: #c3cecc";
};
}
For some reason when it knows the button is supposed to be disabled it shows the css for the .paginate_button and then crosses out the css for the .paginate_button_disabled. Does anyone know why?
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
Assuming you are adding .paginate_button_disabled to the element without removing .paginate_button, you will need to reorder your css.
The .paginate_button rule should come first:
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
The way CSS works, is it cascades down the document. So if they both have the same specificity the CSS rule lower down will win.
If you are just adding the .paginate_button_disabled class to the element, without removing the .paginate_button class, then the latter would overwrite the disabled rules as it is defined later in the CSS document - they are literally cascading styles.
The best solution is to hide any unnecessary button.
use the following :
.paginate_button_disabled {
display: none;
}
in this case previous, next, first and last buttons will be shown only when they are needed.