I have the following CSS:
ul.arbo {
margin-top: 0.5em;
}
ul.arbo li {color
padding-bottom: 0.333em;
}
ul.arbo li:last-child {
color: #333;
}
I can implement the simple CSS using Less. But how do I implement the li:last-child?
Try:
ul.arbo {
margin-top: 0.5em;
li {
color: #444;
padding-bottom: 0.333em;
&:last-child {
color: #333;
}
}
}
Related
Let's take a look at this example:
.box {
padding: 1rem;
.item {
paddding: 1rem;
border: 1px solid #ccc;
a {
color: #000;
}
}
}
I want to add here new rules with pseudo-class.
How to make it with SCSS to get this output?
.box .item:first-child a:first-child {display: none;}
.box .item:last-child a:last-child {display: none;}
I know that I can use & parent selector and it works with <a/> to set the pseudo-class:
a {
color: #000;
&:first-child {
display: none;
}
}
But what should I do to set the pseudo-class to the previous parent .item?
UPDATE
Any way to do it with no dublicate the selectors? Smth like this:
a { color: #000; $parent(has:first-child) {display: none;} }
You have to create specific nested rules for it:
.box {
padding: 1rem;
.item {
paddding: 1rem;
border: 1px solid #ccc;
a {
color: #000;
}
&:first-child,
&:last-child {
a {
&:first-child,
&:last-child {
display: none;
}
}
}
}
}
There is no refactored way to this I believe.
Having trouble getting the submenu items under "LEARN" to wrap (Articles / Videos).
influentagency.com/clients/cgc_build_062117
I've pasted some of my SASS code, tried different things, but nothing seems to work. Added the wp_bootstrap_navwalker function, tried adding classes, does not wrap no matter what I try.
Any ideas what I'm missing here? Thanks in advance!
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
outline: 0;
background-color: #777;
}
.dropdown-menu {
flex-wrap: wrap;
}
.navbar{
border-radius: 0;
webkit-border-radius: 0;
min-height: 1px;
margin-bottom: 0;
&.navbar-default {
border: none;
background: #fff;
padding: 0 15px;
#navbar-menu{
float: right;
&.navbar-collapse{
padding: 0;
margin: 0;
.navbar-nav{
float: none;
margin: 0;
padding: 0;
li{
display: inline-block;
float: none;
margin: 23px 0 0 0px;
a {
color: #333;
font-size: 14px;
display: block;
text-decoration: none;
#include OpenSansSemiBold;
padding: 4px 8px;
&:hover{
color: #9dcb94;
}
}
&.item-right{
margin-left: 25px;
a{
background: $green;
color: #fff;
border-radius: 2px;
padding: 10px 14px;
&:hover{
background: $green_hover;
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: #fff;
}
}
}
&.current-menu-item,
&.current_page_item,
&.current-menu-ancestor,
&.current-page-ancestor {
a{
color: $green;
}
}
.sub-menu{
display: none;
}
}
}
}
}
}
The issue is that your css is making all menu items display-inline, even ones in the dropdown menus:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav li{
display: inline-block;
/* other styles here also */
}
You need to include the following in your css to override that:
.navbar.navbar-default #navbar-menu.navbar-collapse .navbar-nav .dropdown-menu li{
display:block;
}
To do this, you need to add the following to your SASS:
.navbar-nav{
[...]
li{
display: inline-block;
[...]
}
.dropdown-menu li { display:block;}
}
I've recently started to use LESS and am trying to convert my CSS to LESS for a project.
I'm trying to get li.active > a, li > a:hover working
#sidenav {
position: fixed;
top: 100px;
right: 0;
padding: 15px 10px 10px;
text-align: right;
li {
& > a {
color: #999;
&:hover {
//&:extend(.active > a);
color: #FFF;
background: none;
}
}
&.active > a:extend(& > a:hover) {}
}
}
But this doesn't work.
I'm looking at the documentation but it's not really making sense to me.
EDIT:
Found out that this works
#sidenav {
position: fixed;
top: 100px;
right: 0;
padding: 15px 10px 10px;
text-align: right;
li {
& > a {
color: #999;
&:hover {
color: #FFF;
background: none;
}
}
&.active > a {
&:extend(#sidenav li > a:hover);
}
}
}
But that's 3 lines where I think it could be 1.
Now I'm using LESS to customize Bootstrap to my own website.
I have a problem with LESS's mixins.
For example, the following LESS code:
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Article;
.Address {
.Small;
}
}
is compiled to the following CSS:
.Article {
margin-left: 5px;
}
.Article .Small {
color: #111;
}
.Small {
font-size: 5px;
}
.MyArticle {
margin-left: 5px;
}
.MyArticle .Small {
color: #111;
}
.MyArticle .Address {
color: #111;
}
However, in addition to the above generated CSS, I want to make ".MyArticle .Address" small:
.MyArticle .Address {
font-size: 5px;
}
What is the best way?
EDITED:
In the above example of LESS code, the .Article and .Small are the library's class, and I don't want to modify them.
The Problem is Scoping
In your original layout, by including .Article at the same level as .Address is defined, then it is using the .Small from the .Article as the only mixin, because it is the "local" .Small in the .Address context. To avoid this, the .Article must be isolated to its own block. But then you lose the color being picked up from it's .Small, so it must be explicitly included back into .Address through a namespaced call. The code ends up like this:
LESS
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Address {
.Small;
.Article > .Small;
}
& {.Article;}
}
CSS Output
.Article {
margin-left: 5px;
}
.Article .Small {
color: #111;
}
.Small {
font-size: 5px;
}
.MyArticle {
margin-left: 5px;
}
.MyArticle .Address {
font-size: 5px;
color: #111;
}
.MyArticle .Small {
color: #111;
}
Not really sure, but possibly this code:
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Article;
.Address {
.Small;
font-size: 5px;
}
}
Try extend:
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Article;
.Address {
&:extend(.Small);
}
}
This compiles to:
.Article {
margin-left: 5px;
}
.Article .Small {
color: #111;
}
.Small,
.MyArticle .Address { //<-- this
font-size: 5px;
}
.MyArticle {
margin-left: 5px;
}
.MyArticle .Small {
color: #111;
}
I just completed an MVC tutorial, but some of my webpages don't look right. This is mine:
But it's supposed to look like this:
The code for this page is:
#model MvcSuper.Models.MusicStore.Genre
#{
ViewBag.Title = "Browse Albums";
}
<div class="genre">
<h3><em>#Model.Name</em> Albums</h3>
<ul id="album-list">
#foreach (var album in Model.Albums)
{
<li>
<a href="#Url.Action("Details",
new { id = album.AlbumId })">
<img alt="#album.Title"
src="#album.AlbumArtUrl" />
<span>#album.Title</span>
</a>
</li>
}
</ul>
</div>
The left menu (partial view):
#model IEnumerable<MvcSuper.Models.MusicStore.Genre>
<ul id="categories">
#foreach (var genre in Model)
{
<li>#Html.ActionLink(genre.Name,
"Browse", "MusicStore",
new { Genre = genre.Name }, null)
</li>
}
</ul>
Entire CSS:
{
margin: 0px;
padding: 0px;
border: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #FBF9EF;
padding: 0px 6%;
}
#container
{
float: left;
}
#header
{
float: left;
width: 100%;
border-bottom: 1px dotted #5D5A53;
margin-bottom: 10px;
}
#header h1
{
font-size: 18px;
float: left;
background: url(/content/Images/logo.png) no-repeat;
padding: 45px 0px 5px 0px;
}
#promotion
{
height: 300px;
width: 700px;
background: url(/content/Images/home-showcase.png) no-repeat;
}
ul li a
{
font-size: 16px;
}
#main
{
overflow: hidden;
padding: 0 0 15px 10px;
float: left;
}
ul
{
list-style-type: square;
margin-left: 25px;
font-size: 14px;
}
ul#album-list
{
list-style: none;
margin-left: 0px;
}
ul#album-list li
{
height: 130px;
width: 100px;
float: left;
margin: 10px;
text-align: center;
}
ul#album-list li a, ul#album-list li .button
{
font-size: 13px;
float: left;
}
ul#album-list li a span
{
color: #9b9993;
text-decoration: underline;
}
#cart
{
float: right;
}
#update-message
{
color: #F6855E;
font-weight: bold;
}
.button, input[type=submit]
{
clear: both;
display: inline-block;
padding: 5px;
margin-top: 10px;
border: 1px;
background: #5e5b54;
color: #fff;
font-weight: bold;
}
.button a
{
color: #fff !important;
}
#footer
{
clear: both;
padding: 10px;
text-align: right;
border-top: 1px dotted #8A8575;
border-bottom: 1px dotted #8A8575;
font-family: Constantia, Georgia, serif;
}
/******************** Top Navigation ************************/
ul#navlist
{
float: right;
}
ul#navlist li
{
display: inline;
}
ul#navlist li a
{
border-left: 1px dotted #8A8575;
padding: 10px;
margin-top: 10px;
color: #8A8575;
text-decoration: none;
float: left;
}
ul#navlist li:first-child a
{
border: none;
}
ul#navlist li a:hover
{
color: #F6855E;
}
/********************* End top navigation ***************************/
p
{
margin-bottom: 15px;
margin-top: 0px;
}
h2
{
color: #5e5b54;
}
h2, h3
{
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
h3
{
color: #9B9993;
}
#header h1 a, h3 em
{
color: #5E5B54;
}
a:link, a:visited
{
color: #F6855E;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #333333;
text-decoration: none;
font-weight: bold;
}
a:active
{
color: #006633;
text-decoration: none;
font-weight: bold;
}
/***************************** sidebar navigation ****************************/
#categories
{
font-family: Constantia, Georgia, serif;
list-style-type: none;
border-right: #5d5a53 1px dotted;
padding-right: 10px;
margin: 0 25px 0 0;
float: left;
}
#categories a:link, #categories a:visited
{
color: #9B9993;
text-decoration: none;
}
#categories a:hover
{
color: #F46739;
}
div#album-details p
{
margin-bottom: 5px;
color: #5e5b54;
font-weight: bold;
}
p em
{
color: #9b9993;
}
/* Form styles */
legend
{
padding: 10px;
font-weight: bold;
}
fieldset
{
border: #9b9993 1px solid;
padding: 0 10px;
margin-bottom: 10px;
clear: left;
}
div.editor-field
{
margin-bottom: 10px;
}
input[type=text], input[type=password], select
{
border: 1px solid #8A8575;
width: 300px;
}
/* Styles for validation helpers */
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
/* Tables */
table
{
border: 1px solid #000;
border-collapse: collapse;
color: #666666;
min-width: 500px;
width: 100%;
}
tr
{
border: 1px solid #000;
line-height: 25px;
}
th
{
background-color: #9b9993;
color: #000;
font-size: 13px;
text-align: left;
}
th, td
{
padding-left: 5px;
}
tr:hover
{
background-color: #fff;
}
I did download the source code (the author's finished version), and it turned out like mine when I ran it. The top most screenshot is from FF4 on XP, but it looks the same in IE8 on XP. Any ideas?
To push that Album listing back up to its rightful place and put your mind at ease...
add a width to your main css class:
#main
{
overflow: hidden;
padding: 0 0 15px 10px;
float: left;
width: 500px;
}
also add a * to first css class
*{
margin: 0px;
padding: 0px;
border: none;
}
Just take it easy. I'm pretty sure that this is the case of specific browser or some extra tricky css code, nothing more. Make sure you understand all the things that tutorial says and let the screen be as it is