Below are some CSS color variables defined in hex:
--state-success-text: #3c763d;
--state-success-background: #dff0d8;
To create a comma-separated list of these color variables, the output should look like this:
state-success-text, state-success-background, ...
Any ideas on how to write a bash script to achieve this?
Here's a different method to achieve the desired result, without including a comma after the final entry:
cut -d: -f1 file | paste -sd,
You're getting close,
sed 's/--\(.*\):.*;/\1, /'
That should do the trick. Using :*; will repeat the column expansion multiple times, and adding a . will match any character.
UPDATE: Revised to also eliminate the --.
Here is a simple awk(1) solution:
awk 'BEGIN {FS=":"; ORS=", "}; { print $1 }' input
Is there a way to customize the color of a font awesome icon using CSS? I've tried changing the color of everything except font awesome icons with this code: ::selection{ background: #ffb7b7 !important; /* Safari */ } ::-moz-selection { back ...
I'm working on an HTML page that needs to display two different videos in separate modals. My goal is to have each video start playing automatically when the play-video icon is clicked and the modal opens. I attempted this using the code snippet (vid ...
After attempting to create an automated slideshow with clickable buttons, I encountered a problem. The slideshow functions properly, but as soon as I click one of the buttons, the slideshow speeds up significantly. This is what I implemented in my attempt ...
Here is an example that I have: https://jsfiddle.net/2z2ksLy4/ HTML: <div class="one"> test </div> <div class="two"> test2 </div> CSS: .one{ width:400px; border:1px solid red; min-height: 200px; float:left; display: ...
Currently, I am working on a unique project involving a canvas filled with dynamic moving balls. This project is an extension or inspired by the codepen project located at: https://codepen.io/zetyler/pen/LergVR. The basic concept of this project remains t ...
Hello there, I am currently using PrimeNG p-table which features both horizontal and vertical scrolling. My goal is to implement a sticky header for the table, so far I have attempted two methods: [scrollable]="true" scrollHeight="350px" ...
Struggling to recreate a design I was given: https://i.sstatic.net/G4jFA.jpg I currently have this setup: https://i.sstatic.net/8GSRK.png How can I insert vertical lines spanning the full height between the options? <ul id="navigation"> < ...
Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...
I've been struggling with a problem for quite some time now. How can I maintain the default page size of my website while resizing the browser? Let's assume the page size is 1280x720, how do I ensure that size remains intact when I adjust t ...
<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...
I'm struggling to implement a sliding underline effect for my top navigation bar on hover. I've tried using transitions and keyframes, but so far it's not working as expected. My current attempt only triggers the effect on the parent elemen ...
Greetings Everyone! I'm facing an issue with keeping the footer pinned at the bottom of the page. The treeview control I'm using overlaps the footer when expanded. Can anyone assist in ensuring the footer remains at the bottom of the page? < ...
Just dipping my toes into the world of HTML/CSS, so feel free to point out any major errors in my code. The issue I'm facing is illustrated in this image (Apologies for the black boxes covering up some content; focus is on the top image). Check out ...
I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...
Here's a straightforward test scenario: <html> <body> <div style="border:2px solid black; overflow: auto;"> x </div> </body> </html> Upon rendering, a horizontal scrollbar appears! I was using F ...
Hey there! Just playing around on jsfiddle and wanted to share this Destiny-inspired creation: http://jsfiddle.net/3mfnckuv/3/ If you're familiar with Destiny, you'll see the inspiration haha.. But here are a few questions for you: 1) Any ide ...
When checking my website on different screen resolutions, I rely on a tool called Screenfly from quirktools.com. While using this tool, I came across an interesting feature - the display icon in the top left corner with a dropdown menu showing resolution ...
My dropdown icon is not appearing and the menu options are not functioning properly. Despite trying to use a script to display the text when an option is clicked, it doesn't seem to be working. It appears that the toggle functionality is not working ...
I have noticed that lists styled with the following CSS code appear differently in Internet Explorer 8 and Firefox 4. In IE8, the rounded corners are missing, while FF4 does not change color when hovering over it. Which browser should I trust for accurate ...
I am seeking a solution to animate the color and size of a div box, then return it to its original state when a button is clicked. Here is an example of my code: document.getElementById("andAction").addEventListener("click", function() { document.getE ...