I have a sass/css class with an ampersand, this is used in conjunction with VueJS. What I was wondering is that the CSS attribute assigned on the ampersand is working but the root element itself isn't detected by the browser.
<style lang="scss" scoped>
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
&__lg {
width: 300px;
}
&__sm {
width: 150px;
}
}
</style>
Here's the explanation, the browser seem to detect the width: 300px or width: 150px but not the border-radius, height, margin-right.
<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>
The textbox width changed but other attributes are not read by the browser when you look at them on the browser tools. Am I missing something here?
My goal is not to code it as class="curved-input curved-input__lg but rather only use curved-input__lg or curved-input__sm while inheriting the parent attributes (curved-input).
You could use #extend to avoid adding additional classes to your markup or (some) duplicate code, if that is your goal.
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input {
&__lg {
#extend .curved-input;
width: 300px;
}
&__sm {
#extend .curved-input;
width: 150px;
}
}
Which would generate the following CSS
.curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
This is because you have to declare the curved-input class as well. So your class attribute will look like class="curved-input curved-input__lg".
If you'd write out your CSS in full you'll get something like this:
.curved-input {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
With this in mind you'll see that you have to add the class curved-input as well.
Well if you want to write it like that, try to change the first line to:
[class*="curved-input"]
Related
I need to set vars according to a class which are .withtable and .notable and the positioning of elements is different. See the image or check the code example:
body.withtable {
$logo_width: 130px;
$logo_height: 80px;
}
body.notable {
$logo_width: 200px;
$logo_height: 100px;
}
How to solve this thing? Any ideas?
You can't pass the variables that way. You might want to approach this the following way however:
.logo {
body.withtable & {
$logo_width: 130px;
$logo_height: 80px;
width: $logo_width;
height: $logo_height;
}
body.notable & {
$logo_width: 200px;
$logo_height: 100px;
width: $logo_width;
height: $logo_height;
}
}
This keeps the code readable and manageable as you keep your logo properties in one place. Placing the & character at the end checks if this is a parent instead of a child of .logo.
This compiles into:
body.withtable .logo {
width: 130px;
height: 80px; }
body.notable .logo {
width: 200px;
height: 100px; }
}
as I understand from here, I can't place my CSS selectors which contains "pseudo browsers selectors" (-moz-range-track, -webkit-slider-thumb, and so on) separated by comma, because if browser did not recognize one of the selectors then will ignore all the rules in curly brackets {}.
So when I try to compile my LESS rules:
input {
&[type=range]{
&::-moz-range-track,
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
In the result I will see:
input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
Which will not work because of reason I mentioned earlier.
So in LESS I have to do it like (it isn't of course LESS style):
input {
&[type=range]{
&::-moz-range-track
{
width:100%;
height: 32px;
}
&::-webkit-slider-runnable-track
{
width:100%;
height: 32px;
}
}
}
Which compiles to:
input[type=range]::-moz-range-track {
width: 100%;
height: 32px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 32px;
}
And works as expected.
And my question, is there any possible to do it looks nicely in LESS?
Does anybody knows how to set the width of a paper-textarea? Using CSS selectors in Polymer 1.0 style tags seems not to work at all. The paper-textarea element is composed with paper-input-container. So I tried to do the following:
<style>
paper-textarea + paper-input-container {
min-width: 324px;
width: 324px;
margin-right: 24px;
}
paper-textarea > paper-input-container {
min-width: 324px;
width: 324px;
margin-right: 24px;
}
paper-textarea paper-input-container {
min-width: 324px;
width: 324px;
margin-right: 24px;
}
</style>
Neither of the CSS selectors above worked in my custom element.
<style>
:root {
--paper-input-container: {
min-width: 324px;
width: 324px;
margin-right: 24px;
};
}
</style>
Will do the trick. It will style every polymer element that makes use of a paper-input-container (like paper-textarea) to the above width and margin.
I'm using the Gridster plugin, where columns width are defined like this:
[data-sizex="12"] { width: ... }
[data-sizex="11"] { width: ... }
[data-sizex="10"] { width: ... }
....
I have 2 questions about this;
What kind of CSS classes are these? I have never done/seen anything like this, especially in CSS.
If I want to select all the columns from 1-12, how do I use the code? Typically I'm using something like [class*=".."] this. I don't think so I can get a format like this for the above scenario.
1) These are CSS attribute selectors, to be specific these are Attribute presence and value selectors
2) If you want to select all the columns you don't have to use attribute selectors, just apply the CSS to the element. Well, for gridster plugin can replace .grid with .gs_w { }, .gs_w[data-sizex="12"]{ } and so on in the demo jsfiddle.
.grid{
/* Applies to all */
background: #808080;
color: #fff;
border: 1px solid #eee;
padding: 5px 10px;
}
.grid[data-sizex="12"]{
width: 720px;
}
.grid[data-sizex="11"]{
width: 710px;
}
.grid[data-sizex="10"]{
width: 700px;
}
.grid[data-sizex="9"]{
width: 690px;
}
.grid[data-sizex="8"]{
width: 680px;
}
.grid[data-sizex="7"]{
width: 670px;
}
.grid[data-sizex="6"]{
width: 660px;
}
.grid[data-sizex="5"]{
width: 650px;
}
.grid[data-sizex="4"]{
width: 640px;
}
.grid[data-sizex="3"]{
width: 630px;
}
.grid[data-sizex="2"]{
width: 620px;
}
.grid[data-sizex="1"]{
width: 610px;
}
Demo Here
I have .aClass
.aClass {
width: 20px;
height: 20px;
}
In .anotherClass I would like to calculate a width value based on the value of the width attribute in .aClass.
.anotherClass {
width: .aClass.width
}
The above example does not work.
I couldn´t find anything in the less docs. Is there any way to do this?
Declare variable at the top of code
#width: 10px
Then,
.aClass {
width: #width;
height: 20px;
}
.anotherClass {
width: #width;
}