Stylus selectors doesnt work after - & - stylus

I want to get something like that
.block__overlay--inverted .block__body {}
with such structure
.block
&__body
color blue
&__overlay
&--inverted
& ~/__body
color red
but instead of i have this
.block__overlay--inverted ~/__body {}
Selectors like ~/, ../, ^[0] doesnt work after &

~/ and ../ can be used only at the start of a selector (that's intended behavior). But ^[0] works fine at any position, see http://stylus-lang.com/try.html#?code=.block%0A%20%20%26__body%0A%20%20%20%20color%20blue%0A%0A%20%20%26__overlay%0A%20%20%20%20%26--inverted%0A%20%20%20%20%20%20%26%20%5E%5B0%5D__body%0A%20%20%20%20%20%20%20%20color%20red

Related

Remove the part of image, js and css url

I need to remove the part of image, css and js urls so that I would keep everything that goes after "."
For example,
https://test.com/en/images/footer-inst-icon.svg
I would like to have only "svg" in another column
Here is the link to the file https://docs.google.com/spreadsheets/d/1VJPQzkgZCTaKCgRbstVFDCwycZFfCbSL1ENXPYcioNo/edit#gid=0
Try below formula (see your sheet)-
=ArrayFormula(TRIM(RIGHT(SUBSTITUTE(A2:A,".",REPT(" ",100)),100)))
You can also use REGEXEXTRACT() like
=ArrayFormula(REGEXEXTRACT(A2:A,"\w+$"))

Cannot set nivo pie chart color scheme

I integrated the nivo library. I managed to get this pie chart to work:
For this, I used this slightly modified code from the example:
<ResponsivePie
data={data}
margin={config.margins}
padding={0.3}
colors="nivo"
borderColor="inherit:darker(1.6)"
animate
motionStiffness={90}
motionDamping={15}
legends={config.legends}
sortByValue
innerRadius={0}
padAngle={0}
cornerRadius={0}
borderWidth={0}
radialLabelsSkipAngle={10}
radialLabelsTextXOffset={6}
radialLabelsTextColor="#333333"
radialLabelsLinkOffset={0}
radialLabelsLinkDiagonalLength={16}
radialLabelsLinkHorizontalLength={24}
radialLabelsLinkStrokeWidth={1}
radialLabelsLinkColor="#CCCCCC"
slicesLabelsSkipAngle={10}
slicesLabelsTextColor="#333333"
/>
Now, I wanted the colors to be a grayscale, so I changed the colors prop to "greys", as shown in their docs:
colors={{ scheme: 'greys' }}
This results in:
I also tried:
colors="greys"
Using "greens" also results in the same.
If you want to try it out:
What do I need to do?
I see that this is an old question, but I recently encountered the same issue when integrating with nivo. However I did find a solution so I decided to share it anyway.
After playing around with it I found that the code provided in the interactive view is not valid in React, if you would like to use a theme you should use the following syntax:
colors={"nivo"} // or the name of the theme you picked
instead of:
colors={{ scheme: 'nivo' }}
PS: If you want to use some of the other themes you might need to supply them additionally since just a couple of them come with nivo by default.

IE 11 won't recognize Angular JS variable

The following code works fine in Chrome, but when viewed in Internet Explorer 11, the background color does not show up:
span.fa.fa-icon-only(style='background-color: #{{vehicle.visual_color}};', rr-tt='{{vehicle.color_name}}')
The visual_color variable is a hex color code, and for some reason it's not being recognized on IE. Does anyone know a way around this?
IE has issues with dynamically changing a style tag as shown in this example http://plnkr.co/edit/lLvvDz?p=preview. Try using ng-style instead. e.g.:
span.fa.fa-icon-only(ng-style="{'background-color': '#' + vehicle.visual_color}", rr-tt='{{vehicle.color_name}}')

ExtJS: dynamically changing element styles

I'm trying to dynamically assign styles to my elements (in this case, a ExtJS displayfield).
I can't use CSS classes since I don't know what the colors will be until runtime.
I'm trying:
myDisplayField.getEl().applyStyles({ color: '#ff0000' }); //fail
myDisplayField.getEl().setStyle('color', '#ff0000'); //fail
Just to get the mechanism right, but neither seem to work.
It works using Ext.get(<div id>).setStyle(...), but that doesn't seem as clean to me. Is there a reason the former attempts don't work?
What am I missing?
Thanks.
The reason is simple: you're trying to set the styles on a wrong element. Each field, including displayfield, has quite complex table-based DOM structure that encapsulates the field label, the actual input element (or a div for display fields), and the supporting elements. field.getEl() returns the top, or main, element for a component; in this case that's the top <table> tag. What you need is the input element instead.
Now if you take a look at the DOM structure you'll notice that the <div> that you need to set styles on has an id of displayfield-123-inputEl. The -inputEl suffix is there for a reason; in most cases it indicates that the element has a Ext.dom.Element shortcut in its respective Component. For a field, that would be field.inputEl property that is available after the field has been rendered to the DOM. You can use that as well:
myDisplayField.inputEl.setStyle(...)
Or just use the convenience method available for the fields:
myDisplayField.setFieldStyle(...)
I would also suggest not hardcoding the colors but rather use CSS classes instead. In most cases there is a limited choice of colors depending on a condition, like invalid input, etc. Using CSS will require a bit more work upfront but will save you a lot of headache down the road, when someone will come up with a bright idea of changing the shade of red used for the invalid input, or somesuch.

Twitter Bootstrap2 100% height responsive

I want to make a responsive layout with twitter's bootstrap v2, with a column and a map.
The idea is to build a UI like that from maps.google.com, but using a responsive design with bootstrap2.
I want to have a style for desktop with
navbar on top
1 left column (as sidebar)
height: 100% minus navbarHeight, with a scrollbar
width: .span3
content that fills the rest of the screen
Then for the responsive mobile design I want the parts that have the full height to have a height depending on the content.
I made a sketch to explain better
EDIT: Looking to do something like this but responsive, and only with north (navbar), west (sidebar), and center (content)
EDIT2: I finally made it with jquery, but I want a CSS solution. If someone asks, I will put the solution as an answer.
EDIT3: Ok, here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.
EDIT4: Here I found what it could be a CSS-only solution! If I make progress, I'll post the answer!
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
From my investigations this week (I'm trying to accomplish the same thing), it seems like bootstrap and a 100%-height design are incompatible from a pure CSS perspective (unless you want to make changes to bootstrap). I'd be interested in seeing your jquery solution.
I'm not sure that I totally understand what you are looking for, but take a look at http://reactivewebdesign.net/Chicago/Traffic which has a top menu (adding the bootstrap navbar should be easy).
The left column spans 3 columns and the map occupies 9 columns. There is also a link in the left menu named "Where Am I" that also uses a Google map. The css for the map is at the top of the page. If you are looking to squeeze the map into three columns, merely reverse the 3 & 9 to 9 & 3 - it should still work.
Hope this helps.
here is the solution I found using JQuery (I think it's easy to do with plain js)
$(window).bind('resize', function() {
if ( $(window).width() > 980 ) {
$("#content").height(($(window).height()-40)+"px")
$("#sidebar").height(($(window).height()-58)+"px")
$("body").css("padding-top","40px")
}
else {
$("#content").height(($(window).height()-50)+"px")
$("#sidebar").height(($(window).height()-68)+"px")
$("body").css("padding-top","0px")
}
$("#sidebar").css("overflow", "auto")
$("body").css("padding-bottom","0px")
$(".navbar").css("margin-bottom","0px")
});
The $(selector).css() functions and the conditional if could be replaced with plain css and the media queries from CSS3 http://twitter.github.com/bootstrap/scaffolding.html#responsive
But the problem is that $(window).height() is calculated runtime. That should be replaced maybe by something like a height:100% in CSS, and that could do the trick, but I couldn't find the right place to put that 100% height.

Resources