I'm sure I'm making a simple and idiotic error, so please have mercy.
I am trying to write inline CSS for some clojurescript elements and the following code compiles, but the expected hover color does not render.
Does anyone see what is wrong?
[:div
[bp/icon
{:icon "database"
:style {:color "#555555" :padding "10px" :background-color "rgb(250, 250, 250)" :hover "rgb(255, 63, 0)"
}}]]
EDIT:
I've also tried this approach, also with no success:
[:div {:class "bp3-button-group"}
[:div [bp/icon {:icon "database" :style {:color "#555555" :padding "10px" :background-color "rgb(250, 250, 250)" :&:hover {:background-color "#000"}
}}]
]]
```
Pseudo-classes like :hover cannot be applied via inline styles. They can only be applied to CSS selectors themselves but since you are not using a named class you can't apply pseudo-classes either.
The typical CSS-in-JS libraries generated a "virtual" classname and instead of applying the actual styles to the element just apply the classname and create a matching CSS selector at runtime.
You will either have to create an external CSS with the styles created manually
// some.css
.some-class { ... }
.some-class:hover { ... }
// your.cljs
[:bp/icon {:icon "database" :class "some-class} ...]
use some library that does this for you at runtime (eg. garden) or immitate the same "hover" behavior by attaching custom JS event handlers for onmouseenter onmouseout and manipulating actual styles at runtime.
Inline styles are fairly limited in what they can achieve (eg. no media-queries either) so you want to stick with actual CSS for the most part. Either directly or via JS that generates it at runtime.
Indeed pseudo classes are not supported in inlined CSS: CSS Pseudo-classes with inline styles
You can have a separated CSS file generated by garden with the full power of pseudo classes, media-queries, etc.
Or, you can look for a clojurescript library inspired from the CSS in JS trend that support your needs, like Herb: http://herb.roosta.sh/#pseudo
Related
I have this Chakra UI component:
<Tag
variant={'outline'}
cursor={'pointer'}
outline={'none'}
className={`${styles.editProfileAvatarIconCamera} ri-camera-line`}
></Tag>
Which renders an outlined camera icon like this
Now I'd like to remove the outline. I tried to add outline={'none'} like the above, but it didn't work. In console I can see that Chakra CSS is always in the highest priority and overrides all other CSS.
How can I apply this custom CSS to the Tag component? I tried importing a SCSS file, but it's the same, overridden by Chakra default CSS.
What you can see there is a box-shadow not an outline:
<Tag
variant={'outline'}
cursor={'pointer'}
boxShadow={'none'}
className={`${styles.editProfileAvatarIconCamera} ri-camera-line`}
></Tag>
I have QSting object:
QString someString = "<a href='link'>some text</a>"
and QLabel object:
QLabel someLabel.
with this text:
someLabel.setText(someString);
I set property for QLabel:
someLabel.setProperty("class","someID"),
and in CSS document set style for this label like this :
#someID
{
// some style
}
But style from CSS not appled to Label's text. It set default blue underlined style from css.
Question: How set style from CSS?
You could try to set the style sheet through the setStyleSheet() method.
Examples can be found here.
The important distinction to make is that there are two completely separate styling systems that affect what a QLabel does:
CSS stylesheets set on a widget via setStyleSheet() method.
In these stylesheets, # selects on the id of the object - its name. So, you should be setting the object's name, not the class property:
someLabel.setObjectName("someId");
Then the #someId selector will apply to someLabel.
CSS styling attributes applied to the rich text contents displayed by the label. These can be provided via in-line style attribute, for example <span style="font-size: 20px">FOO</span>. The <style> element in the <html> is also supported, but the external stylesheets are not supported - so the stylesheet must be within the <html>. All CSS 2.1 selectors are supported. For example,
<html><style type="text/css">em {color: red}</style>
<body><em>URGENT!</em></body>
</html>
I have seen it a lot here and there, yet I could find any description or documentation about it!
Example:
<paper-input-decorator label="Your Name">
<input is="core-input">
</paper-input-decorator>
In 2020:
The is attribute is now part of HTML spec in the Custom Elements specification.
It follows the polymer spec and is documented for developers at mdn.
Only Edge still hasn't updated to include this spec but it its new chromium-based implementation, in 2020, its availability may become widespread.
In 2017:
There is no is attribute in HTML.
It is a proposed extension that appears in the Custom Elements specification (which evolved from the Polymer spec mentioned below).
It allows you to say that an existing, standard element is really a custom element.
<button is="fancy-button" disabled>Fancy button!</button>
… which allows for backwards compatibility. If custom elements are not supported by the browser (the spec is still a draft and has very limited browser support) then it will fall back to the default behaviour.
In 2014:
It is not HTML. It is an expando-attribute for Polymer custom elements.
If you used extends to create a Polymer element that derives from an existing DOM element (something other than HTMLElement), use the is syntax
It is part of the W3C Draft spec for Web Components' Custom Elements.
Latest Working Draft: http://www.w3.org/TR/custom-elements/#type-extension-semantics
Latest Editor's Draft: http://w3c.github.io/webcomponents/spec/custom/#type-extension-example
The is keyword is part of the W3C Draft spec for creating custom HTML elements with custom behavior.
In specific, is is used when extending a built-in element like <input>, <button> or <table>. For example, you could have a plastic-button element that extends <button> to provide some fancy animation when clicked.
You'd add the button to the page like this:
<button is="plastic-button">Click Me!</button>
Before you do this, you need to register plastic-button as a custom HTML element like this:
customElements.define("plastic-button", PlasticButton, { extends: "button" });
This references a PlasticButton Javascript class, which would look something like this:
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// Draw some fancy animation effects!
});
}
}
It'd be great if you could say <plastic-button>Click Me!</plastic-button> instead of <button is="plastic-button">Click Me!</button>, but that would create an HTMLElement with no special behavior.
If you are NOT extending a built-in HTML element like <button> and instead creating a new element that extends the generic HTMLElement, you can use the <plastic-button> syntax. But you won't get any of <button>'s behavior.
This is part of the W3C Draft spec for Web Components' Custom Elements:
http://www.w3.org/TR/custom-elements/#type-extension-semantics
You use the is attribute to markup a customized built-in element, a custom element that extends a built-in element.
There are two types of custom elements:
Autonomous custom elements are standalone — they don’t inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <popup-info>, or document.createElement("popup-info").
Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property). For example <p is="word-count">, or document.createElement("p", { is: "word-count" }).
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
It's part of web components spec for Custom Elements. So it's HTML.
Frameworks like Vue.js also supports is atribute in compliance with web components standard.
I have an html document that I generate with clojure hiccup. When I send the file as an attachment to an email, the css gets stripped out. The css is external and being referenced in the head of the file like below:
[:head
[:title "My Title"]
(include-css "css/mycss.css")]
I heard mail servers strip out all external css so it does not interfere with theirs. One solution I was able to fin was to do an inline styling. For example if I have the below html, how do I perform inline styling on it.
[:thead
[:tr [:th "First column"] [:th "Second column"] [:th "Third column"]]]
Additionally, feel free to suggest if there is a better answer to what I want to do. Thanks!
hiccup supports attributes right out of the box with the {} syntax, so you could simply use this for settings style attributes on elements easily, e.g., [:p {:style "color:#E0E0E0"} "My paragraph"] will put the color on the paragraph. But I guess in your case, it might be more convenient to put the general style definitions in the head element, using the style element. hiccup supports :style for this as one would expect, e.g.
[:head [:title "My title"]
[:style "body { padding-top: 60px; }"]].
Hello I am trying to use the Polymer attributes in css.
This is my code:
background: url( {{ image }} );
but it doesn't seem to work and outputs
url('%7B%7B%20image%20%7D%7D');
I don't think Polymer currently supports template binding within a <style> tag. You could instead use an inline style attribute on the element, or you could add an imageChanged handler and use the cssom to edit the stylesheet.