I have following HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet/less" href="assets/stylesheets/style.less" />
<script src="assets/stylesheets/vendor/less/less-1.3.0.min.js"></script>
</head>
<body>
<nav>
<ul class="tabs">
<li class="selected">
Foo
</li>
<li>Bar</li>
<li>Baz</li>
</ul>
<nav>
</body>
</html>
How should I write my style.less to style the list as Twitter Bootstrap Basic Tab. The obvious way
to do this, to copy and paste all relevant css:
$cat style.less
#import "vendor/bootstrap/less/bootstrap.less";
.tabs {
// .nav
margin-left: 0;
margin-bottom: #baseLineHeight;
list-style: none;
// common style for tabs and pills
.clearfix();
// Give the tabs something to sit on
border-bottom: 1px solid #ddd;
}
.tabs > li {
float: left;
}
// Make links block level
.tabs > li > a {
display: block;
}
.tabs > li > a:hover {
text-decoration: none;
background-color: #grayLighter;
}
// common style for nav-tabs
.tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
}
// Make the list-items overlay the bottom border
.tabs > li {
margin-bottom: -1px;
}
// Actual tabs (as links)
.tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: #baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
border-color: #grayLighter #grayLighter #ddd;
}
}
// Active state, and it's :hover to override normal :hover
.tabs > .selected > a,
.tabs > .selected > a:hover {
color: #gray;
background-color: #white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
Is there any better way to achieve this, without much copy and paste? Note: I
can not change the HTML file.
I end up by rewriting or overriding bootstrap/less/navs.less (see: HTML and less files ) to make it mixable and Allow appropriate LESS classes to be mixed-in
$cat vendor/bootstrap/less/navs.less
// NAVIGATIONS
// -----------
// BASE CLASS
// ----------
.nav {
margin-left: 0;
margin-bottom: #baseLineHeight;
list-style: none;
> li {
> a {
display: block; // Make links block level
}
> a:hover {
text-decoration: none;
background-color: #grayLighter;
}
}
}
.nav-tabs {
.clearfix();
border-bottom: 1px solid #ddd; // Give the tabs something to sit on
> li {
float: left;
margin-bottom: -1px; // Make the list-items overlay the bottom border
> a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
padding-top: 8px;
padding-bottom: 8px;
line-height: #baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
border-color: #grayLighter #grayLighter #ddd;
}
}
}
}
.nav-tabs {
// Active state, and it's :hover to override normal :hover
> .active {
> a, a:hover {
color: #gray;
background-color: #white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
}
$ cat style.less
#import "vendor/bootstrap/less/bootstrap.less";
.foo {
.nav;
.nav-tabs;
}
.foo > .bar {
.nav-tabs > .active;
}
Your example doesn't work, sorry
But I'm highly interested in this subject. I wanna colaborate
In my opinion there is no point of discussion about giving that path
First we mix content and style in a page
Then they made css in order to separate both
Now we mix again style (to put a tag in the class of an object IS mix'em) and content together
So, lets separate'em again bro!
Related
I am creating a web app (a side project!), I try to make it look good and came across a little CSS challenge 😁, can you help me?
Examples because it's easier with pictures:
Example 1
👎What I get :
👍What I want :
Example 2
👎What I get :
👍What I want :
I hosted a very simple vuejs example here : https://jsfiddle.net/ep8ny04d/3/
li {
margin: 0;
padding: 10px;
border-radius: 10px;
cursor: pointer;
&.active {
background: #39a374;
color: white;
}
}
(My screenshots come from this example.)
So the problem is: Two elements have to be sticked together, but the border-radius of elements have to be changed (or removed for elements in the middle) if two or more elements are selected and next to each other.
Do you think it's possible to do without Javascript?
You can get most of the way there using a combination of sibling combinators, :first-child, :last-child, and :not() (note that you need to remove the border-radius: 10px declaration from the top-level li rule):
li {
margin: 0;
padding: 10px;
cursor: pointer;
&.active {
background: #39a374;
color: white;
}
&.active:first-child, &:not(.active) + .active {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
&.active:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
But that doesn't produce bottom rounded corners for .active items appearing immediately before :not(.active) items. You'd need to add another class to those specific items before you can target them with CSS. This can be done within the class binding so you avoid polluting the data model (or indeed, writing additional application logic, which I assume is what you mean by "without JavaScript"...):
<li v-for="(todo,i) in todos"
v-on:click="toggle(todo)"
v-bind:class="{active: todo.active, beforeInactive: todo.active && todos[i+1] && !todos[i+1].active}">
{{i}} Hey
</li>
Then referenced within the CSS:
li
// ...
&.active:first-child, &:not(.active) + .active {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
// Added reference to new .beforeInactive class
&.active:last-child, &.beforeInactive {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
Updated fiddle
As commented, you may play with padding and margin selecting the position first, or last or next siblings:
body {
background: #ffffff;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #68d9a7;
border-radius: 10px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 0;
padding: 10px;
border-radius: 10px;
cursor: pointer;
}
li.active {
background: #39a374;
color: white;
padding-top: 30px;
margin-bottom: -20px;
}
li.active + :not(.active) {
margin-top: 20px;
}
li:not(.active) + .active {
padding-top: 10px;
}
li:last-of-type {
margin: 0;
}
li:first-of-type.active {
padding:10px;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
ol {list-style-type:none;padding:0}
<div id="app"><h2>Todos:</h2> <ol><li class="active">
0 Hey
</li><li class="">
1 Hey
</li><li class="active">
2 Hey
</li><li class=" ">
3 Hey
</li><li class="active">
4 Hey
</li><li class="">
5 Hey
</li><li class="active">
6 Hey
</li><li class="active">
7 Hey
</li></ol></div>
https://jsfiddle.net/1hm9x6do/2/
SCSS for li
li {
margin: 0;
padding: 10px;
border-radius: 10px;
cursor: pointer;
&.active {
background: #39a374;
color: white;
padding-top:30px;
margin-bottom:-20px;
}
&.active + :not(.active) {
margin-top:20px;
}
&:not(.active) + .active {
padding-top:10px;
}
&:last-of-type{
margin:0;
}
&:first-of-type.active {
padding:10px;
}
}
In my code I got border-right on all of my li elements. I'm trying to get rid of the border-right when a li element is active using an own made class named active. The problem is that my class does not remove the border-right.
This is a JSFiddle of the code as well: http://jsfiddle.net/t0a4j5tq/2/
div#navbar {
width: 250px;
height: 550px;
float: left;
}
div#navbar > ul {
text-align: center;
background-color: #EEE;
}
div#navbar > ul > li.li, div#navbar > ul > li.liLast {
list-style-type: none;
border-bottom: 1px solid black;
border-right: 1px solid black;
font-size: 25px;
font-family: Algerian, "Times New Roman";
}
div#navbar > ul > li > a {
color: black;
text-decoration: none;
display: block;
width: 100%;
padding: 38px 0;
-webkit-transition: margin-left 0.5s;
}
div#navbar > ul > li > a:hover {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 5px black;
margin-left: 5px;
}
li.active {
box-shadow: inset 3px 3px 10px #333;
border-right: none;
}
<div id="navbar">
<ul>
<li class="li active">Start</li>
<li class="li">Om mig</li>
<li class="li">Vision</li>
<li class="li">Tjänster</li>
<li class="liLast">Kontakt</li>
</ul>
</div>
The root of your problem is CSS Specificity. This is important to understand, because simply using !important in your code is a hack and can cause you to have problems later on if you forget that you put it there.
!important overrides everything, and so obviously should not be used except in dire, last-resort situations (and even then, many people [myself included] would argue that you should figure out how to fix the problem anyway instead of using !important).
Earlier in your code, you have a CSS selector for the same element (and similar elements):
div#navbar > ul > li.li {
Now, you are trying to access the same element with just this:
li.active {
But the first selector is way more specific. Instead, you should use the following CSS selector, without the !important hack:
div#navbar > ul > li.active {
Hi solution is simple you just need to inform that this change is "important" :P
li.active {
box-shadow: inset 3px 3px 10px #333;
border-right-style: none !important;}
Hope this helps :)
I'd like to add a divider between my page tabs on my blog so it looks like this:
About Me / My Work / Contact / Blog
I don't want the slashes to turn green when they're moused over.
Here's my blog: http://clairestrick.blogspot.com/
I'm really new to this and I'm using the Simple template. Here's the code for the header and tabs:
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
Please try with
<ul>
<li>About Me
<span>/</span></li>
<li>My Work<span>/</span></li>
<li class="selected">Contact <span>/</span></li>
<li>Blog</li>
</ul>
This helps you to add a divider between tabs
.tabs .widget li:after {
content: "/";
}
Ok so I'm having some issues changing the active state on my bootstrap tabs. I managed to get the hover to work but there is still some issues I am running into.
This is what I am currently using for the hover, I need the active state to be the same but I'm not sure how to do that.
.services-icon-holder {
border: 2px solid #272727;
border-radius: 50%;
width: 65px;
height: 65px;
margin-bottom: 40px;
}
.services-icon-holder:hover {
background-color: #272727;
cursor: pointer;
}
.services-icon {
font-size: 28px;
color: #272727;
line-height: 2.2 !important;
padding-bottom: 15px;
}
.services-icon-holder:hover .services-icon {
color: #f1f1f1;
cursor: pointer;
-webkit-transition: color 0.5s ease;
}
I also have an issue with the active tab being 1 or so pixels above the rest of the tabs, I used inspect element to try and find where this is coming from but to no success.
You can check out the live site here (just go to services section to see the tabs)
Please manage this code , this is the css structure
.services .nav > li > a {
outline:none ! important;
border: none;
}
.services .nav > li.active > a .services-icon-holder {
background-color: #272727;
cursor: pointer;
}
In /css/style.css:517
.services .nav > li > a {
/* Add below */
border: none;
}
And for active state color, you can add this code to your style
.nav-tabs > li.active .services-icon-holder {
background-color: #000;
}
.nav-tabs > li.active .services-icon-holder > .services-icon {
color: #fff;
}
I am developing an ASP.NET web application which in its site master (in the ContentPlaceHolder3) I put some css style which should apply to the whole website. Part from this style is the following:
.Welcome {
width:531px;
margin:5px 15px;
float:left;
padding:5px 10px;
}
.Welcome ul {
width:250px;
float: left;
margin:5px 3px;
padding:0;
list-style:none;
}
.Welcome li {
background:url(images/ul_li.gif) left no-repeat;
padding:5px 20px;
margin:0;
font: normal 12px Georgia, "Times New Roman", Times, serif; /* the original font-size was 11px. */
color:#5c5c5c;
}
Now, in one of the website pages, I want to put some content inside that ContentPlaceHolder with the following specific style:
/*body { font: 0.8em Arial, sans-serif; }*/
.tipsMenu { padding: 0; clear: both; }
.tipsMenu li { display: inline; }
.tipsMenu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.tipsMenu li.active a { background: #eef; }
.tipsContent { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 60px; width: 400px; }
EDIT:
*When I tried to do it, I got some style from the CSS file that is in the site.master page. So how can I override the style in the master page with the inline style?*
Apart from making sure the specific style is loaded after the one embedded in the site.master page, you can try a couple of things:
1. Check the css specificity of your new styles. Basically you need to make sure that the selectors used in your new styles are more specific than the ones used in the other stylesheet. In short, inline styles are more specific than ids, ids are more specific than classes and classes are more specific than html elements. e.g.:
#selector {
// High specificity
}
.selector1 .selector2 .selector3 {
// Less specificity than #selector, #selector styles applied
}
2. Add the !important clause to the styles. This overrides the specificity rules and forces the browser to use the important style. Although easier, this method isn't recommended for the sake of maintainability, among other reasons. like this:
.tipsMenu { padding: 0 !important; clear: both !important; }
.tipsMenu li { display: inline !important; }