I'm trying to modify the style of my scrollbar but I can't get it.
I have tried with the parameters: css, __css and sx.
Example:
__css={{
'&::-webkit-scrollbar': {
width: '2px',
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
width: '2px',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.1)',
outline: '1px solid slategrey',
borderRadius: '24px',
},
}}
As see on:
How to add ::-webkit-scrollbar pseudo element in Chakra UI element? (React)
Best way I use for basic customization, put the following code inside a .css or .scss or .sass file:
* {
scrollbar-width: thin;
scrollbar-color: transparent var(--primary);
}
*::-webkit-scrollbar {
width: 5px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--primary);
border-radius: 0;
border: none;
}
You can check for more options at https://css-tricks.com/almanac/properties/s/scrollbar/
Related
I cannot find any code that using styled macro with media query and don't understand why It's so rare to find code using emotion/styled/macro.
I know it allows css style in object literal
const StyledUl = styled("ul")(
{
backgroundColor: "#fff",
height: "200px",
width: "100%",
overflowY: "scroll",
position: "absolute",
margin: 0,
padding: "5px",
boxShadow: "-1px 15px 34px -21px rgba(0,32,86,0.21)",
boxSizing: "border-box",
borderRadius: "8px",
zIndex: 9999,
}
)
But how can I use media query?
And where can I find documentation about emotion/styled/macro?
Nothing special is required. Just add a #media ... query as a property:
import styled from "#emotion/styled/macro";
const StyledUl = styled("ul")({
"#media (max-width: 600px)": {
backgroundColor: "#000",
color: "#fff"
},
backgroundColor: "#fff",
height: "200px",
width: "calc(100% - 40px)",
overflowY: "scroll",
position: "absolute",
margin: 0,
padding: "5px",
boxShadow: "-1px 15px 34px -21px rgba(0,32,86,0.21)",
boxSizing: "border-box",
borderRadius: "8px",
zIndex: 9999
});
export default StyledUl;
Optionally, you can use a template literal to style a styled.HTMLElement:
import styled from "#emotion/styled/macro";
const StyledUlTemplate = styled.ul`
#media (max-width: 600px) {
background-color: #000;
color: #fff;
}
background-color: #fff;
height: 200px;
width: calc(100% - 40px);
overflow-y: scroll;
position: absolute;
top: 60%;
margin: 0;
padding: 5px;
box-shadow: -1px 15px 34px -21px rgba(0, 32, 86, 0.21);
box-sizing: border-box;
border-radius: 8px;
z-index: 9999;
`;
export default StyledUlTemplate;
Demo (drag the middle bar left/right to resize the Browser tab to trigger the style changes):
I recently was trying to use less as my style sheet to customise components of Ant Design. But each time I try to run and compile the project, a less file in the Ant Component library is showing errors. These errors are not supposed to be errors, as one error stated that a comment symbol in the Less file was unrecognised.
Am I missing something? Also how do I get React working with Less files? Thanks!
//App.css
#import '~antd/dist/antd.less';
.site-layout-content {
background: #fff;
padding: 24px;
min-height: 280px;
}
.logo {
width: 160px;
height: 31px;
background: rgba(255, 255, 255, 0.2);
margin: 16px 24px 16px 0;
float: left;
}
.caution-tape-logo {
background: url('drawable/ctrclogo.png');
width: 245px;
height: 63px;
float: left;
margin: 10px 24px 16px 0;
}
.header-space {
width: max-content;
height: 31px;
}
Here is the error: https://imgur.com/a/FX4m3J2
I try to loop through nested sass maps to create button classes. is this possible?
my maps are nested like this:
$buttons: (
primary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
),
secondary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
)
);
When i try to loop through it with an each loop, i just get the first layer of the map.
what i want to to achieve is, that all necessary classes are created with the respective values. here is an example:
.button {
&.primary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
&.secondary {
border: [border];
color: [color];
&:hover {
border: [border-hover];
color: [color-hover];
}
}
}
I'm happy for every useful tip :)
It is actually pretty trivial and straightforward. All you need to do is to use #each loop over your map and extract values using map functions.
.button {
#each $type, $styles in $buttons {
&.#{$type} {
border: map-get($styles, border);
color: map-get($styles, color);
&:hover {
border: map-get($styles, border-hover);
color: map-get($styles, color-hover);
}
}
}
}
How can I translate this (LESS):
.urlBox {
background: #ddd;
border-radius: 5px;
padding: 5px;
+ .urlBox {
margin-top: 5px;
}
}
To Styletron?
So far I've got this:
const UrlBox = styled('div', {
background: '#ddd',
borderRadius: '5px',
padding: '5px',
});
But I can't figure out how to do the sibling selector (+).
In JSS we have nested syntax, which is similar to less/sass.
I am new to extjs . I am trying to add tooltip preferably css based to the column headers .
How can I go about adding custom tooltip to the extjs column header using css? the extjs default way doesnt seem to work.
I tried using the custom css tooltip for the header and it didnt work .. Is it at all possible in extjs to custom tooltip on the header?
Thanks
var listView = Ext.create('Ext.grid.Panel', {
store: mystore,
multiSelect: true,
splitHandleWidth: 10,
columnLines: true,
viewConfig: {
emptyText: 'No images to display'
},
renderTo: containerEl,
columns: [{
text: ''+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span>',
flex: 10,
dataIndex: 'CName',
tooltip: 'C Name Some name test',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}, {
text: getString('notif.instance'),
flex: 30,
dataIndex: 'IDisplayName',
renderer: function (value, metaData, record) {
return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
}
}]
});
CSS
.ttip {
border-bottom: 0px dotted #000000; color: #000000; outline: none;
/* cursor: help; */
text-decoration: none;
position: relative;
}
.ttip span {
margin-left: -999em;
position: absolute;text-decoration: none;
}
.ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;}
.ttip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 9999999;
margin-left: 0; width: 250px;
}
.ttip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.ttip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
So, I noticed you provided code for your store, but you are asking a question about the grid, which is a different component. Make sure you understand the relationship between the grid and the store. You should also use a Model definition instead of configuring fields on the store - which is the old way of doing things.
Having said that, I did come up with an interesting solution to your question: how to add a tooltip to the column header.
The column definition takes in a 'text' property that gets converted to the column header. The docs state that HTML tags are allowed, which means you can set a tooltip this way:
text: '<span data-qtip="hello">First Name</span>'
where data-qtip provides the text for the tooltip.
Note that tooltips must be enabled via:
Ext.QuickTips.init(); in your app.
To try other things use the docs Live Preview feature to quickly test out different configs and see them in action. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column
UPDATE: a tooltip property is now(since 4.1x) available on column config. Use that.
In the definition of your columns you only need set the tooltip parameter, like this:
var cm = new Ext.grid.ColumnModel([
{
xtype: 'column',
header: '<img src="../images/lupa.png">',
align: 'center',
dataIndex: 'consultar',
width: 50,
sortable: true,
menuDisabled: true,
tooltip: 'Permisos para consultar, si lo desactiva el usuario no verá el modulo'
}
]);
I hope this help you