how to apply styles conditionally inside multiple id selection in sass?
for eg. if there is following html file
// demo.html
<div id="id1">
<h1></h1>
</div>
<div id="id2">
<h1></h1>
</div>
<div id="id3">
<h1></h1>
</div>
then I should be able to apply styles like following.
// styles.scss
#id1,
#id2,
#id3 {
if(id1): apply red color to <h1>
else: apply blue color to <h1> // ie to <h1>s inside id2 and id3 divs.
}
There is a if/else in scss. Check this out -> https://sass-lang.com/documentation/at-rules/control/if
However, I'm not sure if that's possible with SCSS only... Check the docs. You will see that the conditions are mostly based on the passed parameters
Why don't you use a each loop instead of conditions? First you declare a list of the styles and then you loop over them to apply them:
$colors: ("1": red, "2": green, "3": blue);
#each $id, $color in $colors {
#id#{$id} {
color: $color;
}
}
The first parameter is the key of the item in the list and the second one is the value. Here is a codepen for you to play around with.
Related
I have an html fragment that looks like this:
<style>
.r {
display: flex;
}
.d-flex {
display: flex;
align-items: center;
}
</style>
<div class="r">
<input type="radio" disabled="disabled" value="1">
<div class="d-flex">
<span class="answernumber">1) </span>
<div class="answer"><p>One</p></div>
</div>
</div>
When I render this in a browser the radio button, the "1)" and the "One" are all aligned nicely. But when I render this html in a pdf the radio button is not aligned with the text. I have tried multiple alternative style definitions for the classes r, d-flex, answernumber and answer and also for the input[type="radio"] and every time it looks good in a browser, the result is no good in the pdf.
Interestingly, check boxes work just fine. Is there a way to get the html to render in the pdf aligned? Or is this something that needs to be fixed inside iText?
The html inside the div.answer may be much more complex and I have no control over it as it is delivered to me by an external system, so I am limited as to what I can do with the html. What I am in control over, is the style definitions and any configurations to be done to iText (perhaps some ConverterProperties).
I am trying to dynamically change font-size in v-text-field default slot based on the length of the text. However, it seems that v-text-field ignores any specification I specify in the section.
Here is the code
<v-text-field
v-model="attr.name"
hide-details
:readonly="true"
class="core-select"
label="Core Attribute"
>
<template
v-slot:default
>
<div :class="attrNameStyle[0]">
{{ attr.name }}
</div>
</template>
</v-text-field>
I have verified that attrNameStyle[0] is gets set correctly, however that style never gets applied to the default slot. I can change the way input slot looks via this CSS class .v-text-field__slot input { ... } however, I can't update that CSS dynamically.
Thanks for help!
Edit: Adding more context.
.core-select {
width: 180px;
}
.short-core-select {
font-size: 12px;
}
attrNameStyle[0] is set to either '', or 'short-core-select'.
Since v-text-field__slot is working, you could edit that CSS from a higher level.
<v-text-field
v-model="attr.name"
hide-details
hide-details
class="core-select"
:class="attrNameStyle[0]"
label="Core Attribute"
>
<template>
<div>
{{ attr.name }}
</div>
</template>
</v-text-field>
<style>
.short-core-select .v-text-field__slot {
font-size: 12px;
}
</style>
I wrote a plugin for CKEditor 4 that uses widget and dialog. My widget, simplifying a little bit, consists of a div with a nested ul and a number of li's. For some reason, when I switch from WYSIWYG mode to SOURCE mode, the ul is turned into a double nested ul.
I have defined which elements in the widget should be editables and I have defined which elements should be allowedContent for those editables.
My original structure in WYSIWYG mode (after the dialog closes and the widget is created) is like this:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<li>an example list item</li>
<li>another example list item</li>
</ul>
</div>
</div>
</div>
I have double checked that this is the actual html by inspecting the source of the page in the Chrome Developer Console. But when I switch to SOURCE mode, the structure then becomes:
<div class="mycustombox">
<div class="conditions-box">
<div class="conditions-services">
<span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
<ul class="services-list">
<ul>
<li>an example list item</li>
<li>another example list item</li>
</ul>
</ul>
</div>
</div>
</div>
The original ul with the class I gave it is there, but there is an extra nested ul wrapping the li elements.
I have defined my allowed widget content in the plugin.js:
allowedContent: 'div(!mycustombox); div(!conditions-box); div(!conditions-services); span(!rwd-line); span(!rwd-line-title); ul(!services-list); li; p; div',
requiredContent: 'div(mycustombox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'mycustombox' );
},
And I have defined the ul element as an editable like so:
editables: {
priceincludes: {
selector: 'div.conditions-box div.conditions-services ul',
allowedContent: 'li em strong'
},
}
I have also allowed ul's to be editable by the general CKEditor instance as so:
CKEDITOR.dtd.$editable[ 'ul' ] = 1;
Is there some setting in the CKEditor configuration which could be causing this behaviour?
Well I don't know if this is the best solution, but it works.
Tell CKEDitor to stop trying to automatically wrap li elements with a ul tag. For some reason it's treating them as though they weren't already wrapped in a ul tag.
Using this at the beginning of my plugin.js fixes the problem:
delete CKEDITOR.dtd.$listItem['li'];
delete CKEDITOR.dtd.$intermediate['li'];
I got the idea from here:
http://margotskapacs.com/2014/11/ckeditor-stop-altering-elements/
Seems kind of hackish to me, but until I find a better solution I'll just use this.
I am confused as to what to use for this. Is it possible to use SASS to calculate the padding for an element based on another's height?
for example:
<div class="element-1">
<h2>Some Title</h2>
</div>
<div class="element-2">
<h2>Element Contents</h2>
</div>
Styles for the elements (varying according to screen size):
.element-1{
height:200px;
#extend .pos-fixed;
width:$site-width;
}
.element-2{
width:$site-width;
padding-top:calc(element-height(.element-1)+20px);
}
Compass enables me to do a similar thing with image-height and image-width, but how can apply this with padding-top:element-height(.element-1)+20px;?
Is this possible?
I've seen somewhere the ability use * for ID or class selectors with SASS...what is the right way to do this?
For example I want to select all div id's inside a parent div. I would imagine something like this:
<div id="parent">
<div id="sub1">
<div class="icon"></div>
<div class="content"></div>
</div>
<div id="sub2">
<div class="icon"></div>
<div class="content"></div>
</div>
#parent {
#* {
}}
You can use only a css selector, like it:
#parent {
div[id] {
// styles
}
}
or
#parent {
div[id^='sub'] {
// styles
}
}
If the children are named in an orderly fashion, you could make it easier to update using the #for directive:
$num-of-children: 2
#for $i from 1 through $num-of-children
#sub-#{$i}
#extend %parent-children
#parent
%parent-children
//styles
In addition, if the ids are more arbitrary, you can pass a list into the #each directive to achieve a similar effect:
$children: sam ramond lemons butter
#each $child in $children
##{$child}
#extend %parent-children
#parent
%parent-children
//styles