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);
}
Related
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 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);
}
}
I'm used to use SASS and I'm trying to do the same thing in LESS, painfully.
LESS:
.btn {
text-align: center;
test: 5px;
&:before {
.fa();
margin-right: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
&:after {
.fa();
margin-left: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
}
.btn_primary {
&:extend(.btn);
&:extend(.btn-primary);
.border-radius(4px);
margin: 0 auto;
color: #white;
font-weight: bold;
text-align: center;
padding: 0px 10px auto;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
&:hover {
color: #white;
text-decoration: none;
border: 1px solid #orange;
}
&.disabled {
border: 1px solid #orange;
}
}
Generated CSS:
.btn,
.btn_primary {
text-align: center;
test: 5px;
}
.btn:before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 5px;
}
.btn:after {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 5px;
}
Why don't I get the :before and :after in my .btn_primary class too? How can I fix this?
To extend the nested classes (:before and :after in this case), you need to use the all directive when extending like below:
&:extend(.btn all);
LESS Code: (Some extra lines commented to enable compilation)
.btn {
text-align: center;
test: 5px;
&:before {
//.fa();
margin-right: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
&:after {
//.fa();
margin-left: 5px;
// Acts like a space,no need of extra html markup or javascript.;
}
}
.btn_primary {
&:extend(.btn all);
&:extend(.btn-primary);
//.border-radius(4px);
margin: 0 auto;
color: #white;
font-weight: bold;
text-align: center;
padding: 0px 10px auto;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
&:hover {
color: #white;
text-decoration: none;
border: 1px solid #orange;
}
&.disabled {
border: 1px solid #orange;
}
}
#white: white;
#orange: orange;
Compiled CSS: (Only the relevant part)
.btn,
.btn_primary {
text-align: center;
test: 5px;
}
.btn:before,
.btn_primary:before {
margin-right: 5px;
}
.btn:after,
.btn_primary:after {
margin-left: 5px;
}
Note: extend feature was introduced only in LESS v1.4.0 and this works in all versions from there on.
You want to get this, isn't it ?
LESS :
.btn_primary {
.btn();
//...
}
CSS :
.btn_primary:before {
//...
}
.btn_primary:after {
//...
}
I am trying to customize a survey we created through Fluidsurvey. The CSS section has the ff code for all pages, which shows the progress bar at the top right portion of the page. However we would like to move it at the bottom of each page:
html, body {
background-color: #fff;
margin:10px 0 0 0;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
}
#survey .survey-progress-outer {
display: block;
border: 1px solid #999;
width: 150px;
height: 15px !important;
background-color: #fff;
font-size: 75%;
margin-top: 6px;
margin-right: 15px;
overflow: hidden;
line-height: 18px;
color: #000;
}
#survey .header-progress-container{
position: relative;
}
#survey .survey-progress-inner {
background-color: #ABDCED;
}
#survey, #890 {
width: 800px;
margin: 0 auto;
}
#footer {
text-align: right;
}
#survey {
border: 1px solid #333333;
}
#survey .header-progress-container {
background-color: #3B5998;
color: #fff;
padding: 5px;
}
#survey-form {
padding: 20px;
}
#survey .question-body {
padding: 5px;
background-color: #EDEFF4;
margin: 5px 0;
}
#survey .buttons input {
background-color: #5B74A8;
border: 1px solid #333;
color: #fff;
padding: 2px 5px;
font-weight: bold;
}
I tried inserting the following in the .survey-progress-outer section:
position: relative;
bottom: 0%;
right: 0%;
but did not produce the desired effect. Kindly help. Thanks.
To achieve re-locating the progress bar to another location in the survey, a custom javascript must be used (possible through a FluidSurveys JavaScript advanced question, or by pasting script html into a question description or something).
You'll want to remove the existing progress bar element and move it to the bottom of the #survey element, but retaining the same structure for CSS purposes means having to create a second .survey-header element to contain your relocated progress bar. This is to ensure existing CSS and JavaScript can still find the progress bar.
var p = $('.survey-progress-outer').detach();
$('<div class="survey-header"/>').append(p).appendTo('#survey');
I have used following css for select tag:
select {
background-color: transparent;
border: 1px solid #A96800;
color: #fff;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
This css affects the text also.
You are unable to see the options because in your css, you are setting text's color to white.
color: #fff;
Just remove the above line so that your css looks like:
select {
background-color: transparent;
border: 1px solid #A96800;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
Now you can view your options as well.
Here's the updated fiddle: http://jsfiddle.net/UJMkN/1/
Hope this helps.