I'm trying to make use of ScopedCssBaseline, but its behavior is different from CssBaseline.
ScopeCssBaseline add styles to input:
.MuiScopedCssBaseline-root *, .MuiScopedCssBaseline-root *::before, .MuiScopedCssBaseline-root *::after {
box-sizing: inherit;
}
which overrides box-sizing: content-box of .MuiInputBase-input, so inputs look bad.
How I can scope css baseline so that with behaviour similar to CssBaseline?
Sandbox: https://codesandbox.io/s/material-demo-forked-kf8iy?file=/demo.tsx
Related
How to activate scrolling using React Autosuggest (like the fourth example http://react-autosuggest.js.org/) ?
I can't get the option to do that in Documentation.
Actually, it was quite straight-forward :
.react-autosuggest__suggestions-list
{
max-height: 200px;
overflow-y: auto;
}
Defining a static height and adding overflow-y to auto was the solution to my problem.
I am just wondering what would be the best approach to using cssnext custom properties like these, alongside css modules in react.
Is there a way to share these across modules ?
:root{
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: red;
--gutter: 1.618rem;
}
#custom-media --small-viewport (max-width: 30em);
#custom-media --large-viewport (min-width: 75em);
#custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
EDIT: *** ok i tried this, thought it worked but hasn't
:global(:root) {
--primary: pink;
--fontSize: 1rem;
--fullWidth: 100%;
--color: pink;
--gutter: 1.618rem;
}
CSS Modules should only handle selectors that are classnames (that start with a dot). So it should not be an issue and you should be able to use those custom definition as soon as they are in the file. You can use postcss-import to inline your file that contains global definitions.
Another solution is to define this global values using postcss plugin options:
https://github.com/postcss/postcss-custom-properties#variables
https://github.com/postcss/postcss-custom-media#extensions
Because the postcss-loader only transforms a single file at a time you must import your custom properties, e.g.
#import './root.css';
.foo {
color: var(--primary);
}
I want to test Polymer applications with non-Shadow-DOM capable browsers like Firefox, PhantomJS, and maybe others using WebDriver.
WebDriver commands for Firefox and PhantomJS fail when I use something like
driver.findElement(const By.cssSelector('* /deep/ #some-div'));
Are there some rules how to best translated/approximate these selectors when the polyfills can not be applied:
/deep/
::shadow
:host()
:host-context()
:content
I would like to create a function that translates such selectors automatically to non-shadow-DOM selectors for browsers that don't support them before sending the request and for that I need to know how to translate them.
Question is a bit old, but in case you haven't figured it out yourselves yet.
/deep/ (deprecated): As you said in your answer, just removing it should work in most of the cases.
::shadow (deprecated): Can also just be removed. Replacing it with > might not work if node which you are targeting is not an immediate child of host element's shadow root.
:host() pseudo classes is used to select custom element from inside shadow-dom, in non-supported browsers it will be equal to selecting parent from child element. Since we don't have parent selectors in css and you are writing js for conversion, you can identify tagName of host element and use it instead of :host selector. Something like below:
:host {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host(:active) {
position: relative;
top: 3px;
left: 3px;
}
/*Convert it to*/
x-element {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
x-element:hover {
opacity: 1;
}
x-element:active {
position: relative;
top: 3px;
left: 3px;
}
:host-context(<selector>) pseudo class matches the host element if it or any of its ancestors matches <selector>. for example:
Below rule will apply on custom element only when it's a descendant of an element with the class .different.
:host-context(.different) {
color: red;
}
<body class="different">
<x-foo></x-foo>
</body>
It won't be very easy to replace this one with anything simple. Even webcomponents polyfill doesn't attempt it. I can't think of any css only way to achieve this.
::content targets distributed child nodes of host element, i.e. all elements which are picked to display using content selectors. Replacing ::content selectors with tagName of host elements should work here. i.e.
::content > h3 {
color: green;
}
/*replace it with*/
x-element h3 {
color: green;
}
Note that I have removed child selector > also from above, because in non-supported browsers after distribution h3 won't be a direct descendant of x-element anymore. Given the way content selector is used, I'd suggest removing child selector also wherever available.
/deep/ can just be removed
::shadow can be replaced by >
don't know about the others yet
I want to either make a link in Extjs or make a button look like a link and on hover you see the button. They do this in the docs with Code Editor button and the Live Preview button.
If they do this using CSS, what CSS do I use and when/how to I apply it?
I recently wanted a LinkButton component. I tried to find a pre-existing component without any luck, so I ended up writing one from scratch. Its implementation is almost entirely CSS-based.
/******************************************************************************/
/*** LINK BUTTON CSS **********************************************************/
/******************************************************************************/
a.ux-linkbutton {
background-image: none;
border: 0px none;
margin-top: 1px;
}
a.ux-linkbutton.x-btn-default-small-focus {
background-color: inherit;
}
a.ux-linkbutton * {
font-size: inherit !important;
}
a.ux-linkbutton:hover {
text-decoration: underline;
background-color: inherit;
}
/******************************************************************************/
/*** LINK BUTTON JS ***********************************************************/
/******************************************************************************/
Ext.define( "Ext.ux.button.LinkButton", {
extend: "Ext.button.Button",
alias: "widget.linkbutton",
cls: "ux-linkbutton",
initComponent: function() {
this.callParent();
this.on( "click", this.uxClick, this, { priority: 999 } );
},
// This function is going to be used to customize
// the behaviour of the button and click event especially as it relates to
// its behaviour as a link and as a button and how these aspects of its
// functionality can potentially conflict.
uxClick: function() {
//Ext.EventObject.preventDefault();
//Ext.EventObject.stopEvent();
//Ext.EventObject.stopPropagation();
//return false;
}
} );
The click handler is a work-in-progress.
The class does have one minor issue: a pseudo-class style is applied after clicking/focusing that I have not been able to remove. If someone fixes it before I do, please, post the CSS for it.
With Ext 4.0.7 I had managed to do the following:
View:
...
{
xtype: 'button'
,text: 'Discard changes'
,action: 'cancel'
,cls: 'secondary-action-btn'
}
CSS:
....
.secondary-action-btn {
border: none;
background: none;
}
.secondary-action-btn span {
cursor: pointer;
text-decoration: underline;
}
I recall there is an extension called linkButton. You can refer to the extjs forum here
Here is my MainView:
Ext.define("Test.view.Main", {
extend: 'Ext.Panel',
config: {
cls: 'transp'
}
});
Here is (the relevant part of) my app.css:
/* line 3, ../themes/stylesheets/sencha-touch/default/core/_reset.scss */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, pre, code, form, fieldset, legend,
input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.transp
{
background-image: url(http://support.sencha.com/assets/images/logo-sencha.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I know it recognizes the class because when I set the opacity to 0, the gray background of the mainview isnt displayed. Can someone please help me? I am at a total loss.
Try using !important in your CSS property.
FWIW, this didn't work for me.
I have a form panel w/ Sencha Touch and had to do this:
.TxPanel .x-scroll-container {
background: url('img/txbackground.png') repeat center;
}
after adding TxPanel to the cls setting for the form.
Once thing in dealing with CSS that most people don't realize is specificity! http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
So if you have your background class .myBackground{ background-image:.. } vs sencha's .x-container .x-component .x-background{ background-image:..} sencha's class has more selectors, and a higher specificity, and will override your .myBackground class! Even if it is declared after sencha's css!
Anyway learning about specificity in depth helped me a lot with styling in sencha.