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);
}
}
}
}
Related
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/
I have a StackBlitz here https://stackblitz.com/edit/react-ts-jefhjh?file=App.tsx,styled.ts
It's a simple react app with Typescript
I have a style component that uses flex-box to position two columbns next to each other.
I'm passing the widths of the columns into the wrapping container like <FlexContainer width={['60%', '40%']}>
And then using the values in the component like
export const FlexContainer = styled.div<IProps>`
border: 1px solid red;
height: 500px;
display: flex:
// align-content: stretch;
.divOne{
border: 2px solid pink;
height: 500px;
width: ${(p) => p.width[0]};
}
.divTwo{
border: 2px solid green;
height: 500px;
width: ${(p) => p.width[1]};
}
`;
Only one the second column is being displayed.
I know the first column is getting a value because if I use align-content: stretch the first column displays but the layout is wrong.
I'm sure the mistake the way I'm using flex-box
How can I get the layout to work ?
There was a colon instead of a semicolon. Use display: flex; instead of display:flex:. See https://stackblitz.com/edit/react-ts-quu5ce?file=App.tsx,styled.ts
import styled from 'styled-components';
interface IProps {
width?: string[];
}
export const FlexContainer = styled.div<IProps>`
border: 1px solid red;
height: 500px;
display: flex;
.divOne{
border: 2px solid pink;
height: 500px;
width: ${(p) => p.width[0]};
}
.divTwo{
border: 2px solid green;
height: 500px;
width: ${(p) => p.width[1]};
}
`;
I am new to React and working on improving my skills. My question is the following:
What is the difference bettwen
<button className={classes["button--alt"]}>Close</button>
and
<button className={classes.button}>Order</button>
for accessing the properties from the css file.
.actions button {
font: inherit;
cursor: pointer;
background-color: transparent;
border: 1px solid #8a2b06;
padding: 0.5rem 2rem;
border-radius: 25px;
margin-left: 1rem;
}
.actions button:hover,
.actions button:active {
background-color: #5a1a01;
border-color: #5a1a01;
color: white;
}
.actions .button--alt {
color: #8a2b06;
}
.actions .button {
background-color: #8a2b06;
color: white;
}
I am stuck and don't seem to figure this out if anybody can give me a hint or a page or something I would highly appreciate thank you!
Basically, the dash - doesn't allows the class object to access the property directly using the dot operator such as using classes.button--alt so we access it using the alternate object key syntax which is using classes["class-key"]
I want to design a dynamic nav tabs component. when the card is clicked relevant tab is shown, with the connection arrow and border-color green.
sample code or a suggestion would be much helpful
.
You can use accordion by bootstrap. Use css flexbox to horizontally align the tabs next to each other and bind a javascript method that changes css color properties (arrow, green color) on clicking.
Here is the link - https://getbootstrap.com/docs/4.0/components/collapse/
Here is how you can do :
.js :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => {
const selectBlock = (e) => {
e.target.classList.toggle('selected');
}
return (
<div className="block" onClick={(e) => {selectBlock(e)}}>
<div>Here is the block</div>
<div className="arrow">
<FakeArrow />
</div>
</div>
);
};
const FakeArrow = () => {
return (
<div>
<span className="arrow-down-border" />
<span className="arrow-down" />
</div>
);
};
render(<App />, document.getElementById("root"));
.css :
.block {
position: relative;
width: 150px;
height: 50px;
text-align: center;
border: 2px solid black;
}
.arrow {
display: none;
}
.block.selected {
border: 2px solid #99d32c;
}
.block.selected .arrow {
display: block;
}
/* You need to fake the arrow border with another arrow behind */
.arrow-down-border {
position: absolute;
bottom: -20px;
left: 55px; /* 150px (main block) / 2 -20px (size of the triangle)*/
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #99d32c;
}
.arrow-down{
position: absolute;
bottom: -17px;
left: 58px; /* 150px (main block) / 2 -17px (size of the triangle)*/
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-top: 17px solid #ffffff;
}
Here is the repro on Stackblitz.
Of course this is just an example, you have to set a color for the arrows so my advice would be to do it with constants or props. Same thing for the position and others functionality you can add to the FakeArrow component.
Now, it would be waaaayy easier to manage it with an image if you really need a border (this is the tricky part in your requirement), or a simple arrow without border.
You can take a look at this post, it's the same question actually, i used a slightly different way to do it with css, but the result seems to be the same.
I am using the jss preset default and it comes with jss-nested.
I could get '&:hover' to work but '&:first-child' does not work for me.
sample code:
summaryItem: {
borderLeft: '2px solid red',
'&:first-child': {
borderLeft: '2px solid transparent',
}
}
You need to add a space for calling child selectors else it would be like calling div:first-child instead of div > :first-child
summaryItem: {
borderLeft: '2px solid red',
'& > :first-child': {
borderLeft: '2px solid transparent',
}
}