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
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+$"))
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.
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}}')
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.
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.