I have been writing some LESS CSS code recently, and was wondering what the best way for format this would be.
Ideally i don't want to reproduce the button classes, and separate them from the input tags, unless that's the best way to go.
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
&:hover,
&:focus {
color: #333;
border-color: #888;
outline: 0;
}
&.button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0;
&:hover,
&:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB;
}
}
}
I did initially think about doing them like this
.button,
button,
input {
&:[type="submit"],
&:[type="reset"],
&:[type="button"] {}
However doing them like this would mean the button class would also have a type.
Any help would be much appreciated, thanks.
You can solve this by using the extend function in LESS.
button, .button {
// styles
}
input {
&[type="submit"], &[type="reset"], &[type="button"] {
// All styles from .button will also be available here.
&:extend(.button);
}
}
Related
I am currently creating variables for color codes in css but I keep getting an error saying "Expected RBRACE" but one is not needed where it says to put it. I am working in dreamweaver so I'm not sure if this is just an issue with it or not. The error is showing for lines 4,5,9,10 specifically where it says "--primarycolor" and "--secondarycolor". It wants me to put a right bracket right before it.
#charset "utf-8";
:root {
--primarycolor: #edf2fc;
--secondarycolor: #212121;
}
.dark-theme {
--primarycolor: #212121;
--secondarycolor: #edf2fc;
}
#toggler {
width: 70px;
height: 70px;
background-color: dodgerblue;
border-color: transparent;
border-radius: 20px;
color: var(--secondary-color);
font-family: Helvetica;
font-weight: 600;
font-size: 15px;
cursor: pointer;
}
#toggler:active {
width: 70px;
height: 70px;
background-color: blue;
border-color: transparent;
border-radius: 20px;
color: var(--secondary-color);
font-family: Helvetica;
font-weight: 600;
font-size: 15px;
}
body {
background-color: var(--primary-color);
}
h1 {
color: var(--secondary-color);
}
So I'm trying to follow this tutorial here.
I had a bit of an issues with the .scss file so I'm just sticking to .css because its a lot easier for me to follow. Video number 32 (section 4), minute 3:21, is where I start to get lost.
I try and convert the syntax so it can all work on .css and without using anything complicated. Here is the udemy teachers code so far:
#import 'variables';
.navbar {
padding: 20px;
margin-bottom: 40px;
.bwm-search {
height: 50px;
width: 300px;
}
.navbar-brand {
margin-right: 30px;
font-size: 30px;
letter-spacing: 1px;
color: $main-color;
font-weight: 500;
}
.nav-item {
font-size: 14px;
}
.btn-bwm-search {
border-color: $main-color;
color: $main-color;
&:hover, &:focus, &:active {
background-color: transparent;
border-color: $main-color !important;
color: $main-color !important;
box-shadow: none;
}
}
.dropdown-item {
font-size: 14px;
&:active, &:focus {
background-color: $main-color;
}
}
}
Here is what I'm trying out:
#import '../variables';
.navbar
{
padding: 20px;
margin-bottom: 40px;
bwm-search
{
height: 50px;
width: 300px;
}
.navbar-brand
{
margin-right: 30px;
font-size: 30px;
letter-spacing: 1px;
color: red;
font-weight: 500;
}
.nav-item
{
font-size: 14px;
}
.btn-bwm-search
{
border-color: red;
color: red;
:hover red:focus, red:active
{
background-color: transparent;
border-color: main-color !important;
color: main-color !important;
box-shadow: none;
}
}
}
Like I said, I'm getting a lot of syntax issues.
I knew how to fix most of them and did but some are still present.
Main-color isn't as clear when it comes to fixing, and it appears as though I'm having some errors with the identifiers.
Pic of problems
Your CSS is invalid; if you are not working with any pre-processor it should be like this:
.navbar {
padding: 20px;
margin-bottom: 40px;
}
.navbar bwm-search {
height: 50px;
width: 300px;
}
.navbar .navbar-brand {
margin-right: 30px;
font-size: 30px;
letter-spacing: 1px;
color: red;
font-weight: 500;
}
.navbar .nav-item {
font-size: 14px;
}
.navbar .btn-bwm-search {
border-color: red;
color: red;
}
.navbar .btn-bwm-search:hover red:focus,
red:active {
background-color: transparent;
border-color: main-color !important;
color: main-color !important;
box-shadow: none;
}
}
}
I'm experiencing a strange hover behavior on a link inside a list in Chrome.
I've managed to replicate the issue in this jsFiddle copying the whole html and css from the website.
The problem is on the first element of the side menu, which is the link with "Maria Montessori" in it. What happens is that the hover area is like interrupted in the middle, where the text is. It's like there is something covering the middle part of the button. Try it yourself to understand what I mean.
The relative code is this:
<ul class="page-menu">
<li class="page_item page-item-30">Maria Montessori</li>
<li class="page_item page-item-32">La pedagogia scientifica</li>
...
And the css:
.page-menu {
display: inline-block;
margin-right: 25px;
text-align: center;
width: 210px;
li {
margin-bottom: 10px;
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
li.current_page_parent {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
a {
background-color: $grey-light;
border-bottom: 2px solid $grey-light;
color: $grey-dark;
display: block;
font-family: Lato;
font-weight: 300;
line-height: 1.2;
padding: 15px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
ul.children {
margin-top: 10px;
li {
margin-bottom: 10px;
margin-left: 10px;
}
li a {
background-color: #f9f9f9;
border-bottom: 2px solid #f9f9f9;
color: $grey-dark;
display: block;
font-family: Lato;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
}
.page_item_has_children > .children {display: none;} /*hides the submenu*/
.page_item_has_children.current_page_item > .children,
.page_item_has_children.current_page_ancestor > .children {display: block;} /*shows the submenu for the current page or when on its subpages */
}
Inspecting it with developer tools didn't really help and what's strange is that the issue appears to be only on the first element. And in Firefox works fine, anyway.
Your div menu-menu-1-container is overlapping to your first menu because of line height property of your div .nav-menu use padding instead
.nav-menu {
padding: 17px; /* remove line-height property */
}
Updated working Code
Twitter Bootstrap is ment to easily build on top of it. Now I'm experience a problem which I can not solve. I work with TB v. 2.3.2.
In my own style.less file, I included TB:
#import "../bootstrap/less/bootstrap.less";
In the original TB files, forms.less, this LESS can be found:
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: #baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.add-on {
display: inline-block;
width: auto;
height: #baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: #baseFontSize;
font-weight: normal;
line-height: #baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 #white;
background-color: #grayLighter;
border: 1px solid #ccc;
}
}
So in my own stylesheet after after the #import of the bootstrap files, I trie to change the background-color for .add-on like this (should become pink instead of #grayLighter you find in the above code):
.input-append,
.input-prepend {
.add-on {
color: blue;
background-color: pink;
}
}
Now, the color I have added (blue) is working! This is not overwriting a value, because the .add-on in forms.less did not had any color specified. But as you can see it does have a background-color (#grayLighter), which I want to change! You see that I have specified this to be pink, but it doesn't work. I don't understand this. Can somebody help me out?
I use these Less further down in my stylesheet like this:
div {
.input-prepend;
.form-search .input-prepend;
label {
.input-prepend > .add-on;
}
}
As you can see in below image, the pink background color is not working.
I checked how the output from the LESS in CSS looks, and have written my questions in there as well. The further I'm digging in to this the more I don't understand it, a codepen example DOES SHOW PINK as background, how it should be in my opinion, see working example here: http://codepen.io/willemsiebe/pen/kvmic.
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // FIRST MENTION BG COLOR IN FORMS.LESS
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink; // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}
// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?
#woocommerce_product_search-3 #searchform div label {
color: blue;
background-color: pink; // WHY IS THIS SHOWING UP FIRST?
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // WHY IS THIS SHOWING UP LAST?
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
margin-bottom: 0;
}
20-7-2014: Ok, now I'm really confused! Instead of overwriting it in my own style.less directly, I put the same code in a different less file and imported it with #import, and now its working... but the output in CSS is exactly the same, except from the fact that the background color PINK is now mentioned last!
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink;
}
#woocommerce_product_search-3 #searchform div label {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
color: blue;
background-color: pink; // NOW IT'S MENTIONED LAST!
margin-bottom: 0;
}
Twitter Bootstrap is ment to easily build on top of it.
That's only true for mixins, see also: Bootstrap 3 with LESS: how to handle bootstrap's nested rules?
In stead on mixins (which only work for simple classes) you could try to use the :extend() psuedo class, see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin
To style your HTML:
<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>
Try the following Less code:
#import "bootstrap.less";
#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}
}
I have lot of, a really really lot of CSS3 files as well as HTML5 ones, that is the reason why I use form of CSS3 in this way:
#wrap #head #strLogo {
height: 50px;
padding: 0 5px;
line-height: 50px;
}
Instead of just selecting it this way:
#strLogo {
height: 50px;
padding: 0 5px;
line-height: 50px;
}
As it is easier later to find that practicular element in HTML5 document.
Now, I have rule, applied to all anchor tags, like:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
But only one, only the anchor tag representing actual logo (textual) should be different.
I know I can write:
#wrap #head #strLogo a {
font-size: 18px;
text-shadow: 2px 2px 2px #666666;
text-decoration: none;
}
#wrap #head #strLogo a:hover {
text-decoration: none;
}
As this link should have same rules on normal and hover state, I managed to write it this way:
#wrap #head #strLogo a, #wrap #head #strLogo a:hover {
font-size: 18px;
text-shadow: 2px 2px 2px #666666;
text-decoration: none;
}
Could it be written even shorter? For example:
#wrap #head #strLogo (a, a:hover) {
font-size: 18px;
text-shadow: 2px 2px 2px #666666;
text-decoration: none;
}
If you are looking for a more sophisticated version of CSS, you should consider
Less (The Dynamic Stylesheet Language)
SASS (Syntactically Awesome Style Sheets)