Can anyone suggest a more efficient way to write the following CSS in SCSS using parent selectors?
.tabs--boxs {
.blue-color-box .box-title:after {
border-bottom-color: #1a4b84;
}
.green-color-box .box-title:after {
border-bottom-color: #1e8334
}
.orange-color-box .box-title:after {
border-bottom-color: #fe5722
}
.purple-color-box .box-title:after {
border-bottom-color: #5926a6
}
}
@each function (See Demo):$colors : (
'blue' : #1a4b84,
'green' : #d9534f,
'orange': #c9302c
);
@each $color_name, $color in $colors {
.tabs--boxs{
.#{$color_name}-color-box{
.box-title{
&::after { border-bottom-color: $color }
}
}
}
}
I think there's no better alternative.
You may consider organizing it in a different manner:
.tabs--boxs {
.blue-color-box .box-title:after {
border-bottom-color: #1a4b84;
}
.green-color-box .box-title:after {
border-bottom-color: #1e8334
}
.orange-color-box .box-title:after {
border-bottom-color: #fe5722
}
.purple-color-box .box-title:after {
border-bottom-color: #5926a6
}
}
While it may seem repetitive, each selector has unique CSS rules. If you wish to apply CSS to all of them collectively, you can include another .box-title:after selector without a colored box class within the tabs--boxs selector.
Hey there, I'm currently trying to add a background image to the bottom left of my webpage. The layout includes both left and right sidebars. Unfortunately, I've encountered some issues with positioning the image using CSS in both the left sideba ...
I am struggling to insert a font-awesome icon into the value of an input field: The code below is just displaying the text as-is: <i class="fas fa-times"></i> <input type="submit" class="sfmdelete" name="delete" value="<i class='fa ...
I'm having an issue with one of the sections on my website not displaying correctly in mobile view. I've checked within WooCommerce and the PHP file, but everything appears to be fine. I attempted to override the section using !important, as well ...
I have encountered a strange issue with one of my Div elements. When I add text inside the div, the background color sticks to the text. However, if there is no text present, the background color disappears. Image with Text: https://i.stack.imgur.com/oYK ...
I am trying to create a gallery section of cards using Bootstrap 4 where I want the user to hover over each card and have an overlay slide or fade in, covering only the image. Currently, the overlay slides in over the entire card instead. I have been stru ...
I'm having trouble finalizing my menu and headings. Whenever I resize the browser window, they shift to the right instead of staying centered as I want them to. I would really appreciate any help with this. Below is the HTML and CSS code. var slide ...
Need help fixing the parallax effect on this page. I attempted to implement a parallax effect but encountered some issues. Here is the JavaScript code: $objWindow = $(window); $('section[data-type="background"]').each(function(){ var $bgOb ...
<div class="selected-file-container align-items-center justify-content-between d-none"> <div class="selected-file d-flex align-items-center"> <img id="selectedImage" class="hidden" src="&qu ...
Creating a Bootstrap container with two columns is my current task. The layout should display the columns side by side horizontally on larger screens, and stacked vertically on smaller screens with a 1px border surrounding each column, featuring rounded co ...
I need help creating a design where an image and h2 title appear on top of the image... Below is a reference screenshot: I am looking to achieve something similar. CSS: h2 { position: relative; letter-spacing: 1px; display: inline-block; positi ...
I am facing a challenge with my WordPress site, which is hosted on Nginx running on Windows Server 2012 R2. I want to enable HTTPS on specific pages like /cart/, /my-account/, and /checkout/, but all the resources are still being loaded over HTTP, resultin ...
Is there a way in HTML to drag and drop elements from one div to another div's textbox? In the image above, we can see Div1 and Div2. I need to drag text/words from Div1 and drop them into the TEXT BOX in Div2. How can I implement this functionality ...
After successfully completing the HTML and CSS part, I hit a roadblock with JavaScript. I'm struggling to figure out how to create a button that can toggle the visibility of text when clicked. An error message keeps popping up in the console stating ...
I am trying to achieve a "flashing" effect by adding the .shown class to my #overlay, causing the opacity to fade in for 2 seconds and then immediately reverse, fading out for another 2 seconds. After experimenting with removing the class, I found that it ...
I'm attempting to achieve the following: (The black box represents a signup/login section, the blue is a navigation bar, and the red is a header area with some text content) I'm trying to reach this outcome with the following CSS: @import url(/ ...
Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...
In my current project, we are dealing with designers who work in Adobe RGB and are accustomed to viewing the vibrant colors from that spectrum in Illustrator. However, we are developing an application that will enable them to work in a web browser using a ...
I am a newcomer to Wordpress and have recently taken on a project to create a website similar to . Upon opening the site, you can see various animations at the top. I am unsure whether these animations are created using a specific plugin or custom code. An ...
Looking at this div structure: DIV3 has a fixed height. The nested DIV5 will be receiving content from Ajax, causing its height to change. Additionally, there are some DHTML elements inside it that also affect the height. DIV5 has a fixed min-height set. ...
I need your help with a problem I'm facing. The navigation bar is not collapsing when I click the link in mobile view. Check out this video for more details: https://www.youtube.com/watch?v=2dBpcFMjqY0 ...