I'm using https://theme-ui.com/ to style my components.
Everything so far as an experience has been splendid but I simply cannot make gradient values work.
I have a button which border on hove should change.
I have the following variant defined:
'&:hover': {
color: 'lightGraphite',
borderBottom: '1px solid',
borderBottomColor: '(linear-gradient(270deg, #FE9A8B 0%, #FD868C 40.85%, #F9748F 73.15%, #F78CA0 100%))'
}
When I open the application the border has gray color and in the dev tools I see property-invalide-value or something like that.
How can I use gradient values within theme-ui configuration file?
If you want to use a gradient as the border color in CSS, see here: Gradient borders
This is what the top answer says:
WebKit now (and Chrome 12 at least) supports gradients as border image:
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
Prooflink: http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image
I don't think it's a theme UI issue here.
Related
I want the margin to be be an irregular shape that is fixed so that as I scroll up and down, the spacing of the words will automatically readjust to fit around the shape.
to start I tried making a square using this styling in CSS to make it wrap and stay fixed:
float: left;
shape-outside: square;
position: absolute;
however it seems it cannot float to wrap the text and have the position stay fixed to stop it scrolling out of view, at the same time.
without "position: absolute;" text wraps but shape and text scroll out of viewing range together. Apply it and the text no longer wraps and is behind square, which stays in its position.
if this had worked I would have just created a stack of different sized boxes that were filled transparent to create an irregular left hand margin.
I'm not sure any of this is even possible but if it is, I'm sure there's a much more effective way to do it... any solutions?
Current Hover Color
I want to change the hover color when we move mouse over the items in the vaadin-select box, by default its coming in light blue color as seen in screenshot 1 but I want to change to some other color. How to do that ?
I have tried by adding
:host(:hover) {
background-color: #9cbdd6;
}
and importing as
#CssImport(value = "./styles/vaadin-select-items.css", themeFor = "vaadin-item")
Inspecting Vaadin Select
The below answer worked perfectly for the above problem,
However There is one problem happening the hover color is coming when the dropdown is closed also means the overlay is not opened. How to stop that ?
I need only to modify the hover color on the overlay as below which is happening correctly via the mentioned code but need to stop the above.
Hover color on the overlay items
Also applying theme like this is applied on all overlay items, how to apply these styles uniquely for some components.
You're on the right track, but you'll need a strong selector. If you're willing to use !important, this will work:
:host(:hover:not([disabled])) {
background: red !important;
}
I'm trying to stack 3 icons from font awesome into next to each other. See image for reference. I know font awesome has a stack class but that seems to have only 2 icon stacks and right on top of each other. Also I would like the individual icons to have a background in the area of the screen so that those areas are clipped and dont overlap.
Should I create a new svg and use that or is going the css route worth the effort.
Thanks
I think a new SVG is your best option.
Referring to your image, noting that FontAwesome icons are transparent, you would not be able to stack the fa-laptop in front of the fa-desktop and fa-mobile icons without them being visible through the laptop's screen.
Here is a demo to stack them with CSS and some absolute positioning to show you what I mean;
https://jsfiddle.net/k3en9L4m/
span.stack{
position: relative;
}
span.stack i{
position: absolute;
}
I'm working on a visualisation involving stacked histogram with really thin bars.
The problem is that white background introduces unpleasant visual vibration and make bars somewhat hard to interpret:
http://i.stack.imgur.com/GN0XD.png
What I'm looking for is a way to set a specific colour for chart background. I've tried to set it for SVG element like so:
svg {
background-color: #ccc;
}
But (obviously) it doesn't work properly:
http://i.stack.imgur.com/ctbYo.png
How do I set a background colour so that it'll be exactly the same shape as a chart?
I managed to come to this quick-and-dirty solution. Just adding a one pixel pseudo-shadow to the right of each bar:
rect {
-webkit-svg-shadow: 1px 0px #ccc;
}
Produces this:
http://i.stack.imgur.com/xSVOD.png
How is the chart being instantiated? by using svg { background-color: #ccc;} you are setting the background color of all svg elements to #ccc (except where over-ridden), so if your chart is a child of another svg element with some margins it would explain why the alignment is no good.
One strategy to go about fixing may be to use your browser's debugging abilities (ctrl+shift+i to bring up 'developer tools' in chrome) to take a look at the DOM elements and try to narrow down which ones cover which areas of the graph vs the areas of the graph plus the margins on the bottom/left. not sure about other browsers but chrome is useful in that if you hover over an element in the html document it will 'highlight' that element in the browser. This might help you narrow down which objects specifically need to be stylized.
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/