I am looking for a CSS or SASS solution to apply red text color to paragraphs with white or transparent backgrounds, and yellow text color to paragraphs with non-white backgrounds. Here is an example of what I'm trying to achieve:
p {
@if $selectedP.background == white || transparent {
color: red;
} @else {
color: yellow;
}
}
Any help would be greatly appreciated. Thank you!
You have the ability to utilize a @mixin in order to adjust text color according to the background.
<p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit quaerat, non rem enim commodi harum, explicabo atque reiciendis esse nemo veritatis quisquam, deserunt at et. Aspernatur maxime inventore ut laboriosam necessitatibus dicta eius fuga! Deserunt facere totam voluptatibus. Praesentium, velit! A nobis molestias maiores iste dicta qui ut, hic repudiandae.</p>
<p class="blue">Cupiditate, quam praesentium, delectus consequatur quae eos doloribus officiis aut, dignissimos porro numquam ea expedita odio quis adipisci saepe excepturi quibusdam temporibus et amet dolorem! Nisi accusantium earum quo vero reprehenderit error debitis totam natus incidunt, consequuntur harum aut at magnam! Reiciendis fugiat excepturi magnam dolorum sint quo atque sunt?</p>
@mixin colors($bg-white: true) {
@if $bg-white {
color: red;
} @else {
color: yellow;
}
}
.white {
@include colors($bg-white: true);
background-color: white;
}
.blue {
@include colors($bg-white: false);
background-color: blue;
}
I have a query regarding resizing an image within a div to either 100% width or 100% height of the containing div. Despite setting max-height and max-width to 100% as recommended here, I still encounter overflow issues without wanting to crop the image usi ...
I'm really struggling to figure this out! I want the drop-down tabs in my top navigational menu on my website to slide down gracefully when hovered over, rather than just instantly appearing. The effect I'm aiming for is similar to this example: ...
I am currently working on a practice project that involves loading each page via AJAX and displaying a fadeIn, fadeOut transition using CSS animation opacity. However, I am facing an issue where the addClass and removeClass functions are not being execute ...
UPDATE: I have included a screenshot for reference. My goal is to ensure that the text within the grid container does not scroll horizontally and instead fits within the available space. https://i.stack.imgur.com/CfFuy.png In my React Material-UI table, ...
https://i.sstatic.net/AQiw3.png Here is my HTML and CSS code: <!DOCTYPE html> <html> <head> <title>assignment1</title> <meta charset="utf-8"> <meta name = "description" content="assignment"> <meta name = ...
After importing two types of images (IMG and IMG2), I wanted to display IMG when the viewport width is less than 600px, and IMG2 when it's equal to or greater than 600px. I created a function to determine the viewport width and return the respective i ...
Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...
My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...
It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else e ...
In my current project, I am dealing with a form that has two distinct states: editing and visible. When the user clicks on an icon to edit the form, two buttons appear at the bottom - one for saving changes and one for canceling. Upon clicking either of th ...
I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge. What am I doing incorrectly? .info { overflow: hidden; ...
My website is designed to adjust based on the size of the browser window, with the first div filling up the entire height using height: 100%. However, I've encountered an issue with certain mobile browsers like Chrome hiding the address bar on devices ...
Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items. On clicking the 1st level li, the intention is to toggle SHOW/HID ...
Currently, I have a <select> component from Material UI and I am iterating over the menuItem elements. Here is a sample you can reference: here My issue lies in trying to change the background color of each menu item. Although I attempted to do so, ...
I have a situation where I am dynamically loading HTML content using AJAX with JQuery. After the content is loaded, I am triggering a click event on specific elements within the newly added HTML. However, I am encountering an issue when trying to set the ...
I need some help with bootstrap. I've looked at various discussions on this topic and tried numerous solutions, but I still can't get it right. I want the logo to be on the left and the navigation links aligned to the right. Here's what I&ap ...
I'm currently designing a responsive navigation bar with a dropdown feature that expands on hover. However, I've encountered an issue as this hover effect is not ideal for mobile devices. Therefore, I am looking to modify my navigation bar so tha ...
I've been tasked with updating an older project to incorporate the latest technologies. Within the project's style sheets, some styles are prefixed with: #calendarDiv{ position:absolute; width:220px; *width:215px; *max-width:210px; border:1px s ...
As I work on building a website for practice, I encountered an issue where the image I want to span across the webpage at 400px height is replicating itself. The height seems fine but there are duplicate images appearing. 1) What could be causing this du ...
Is it possible to prevent a background image from centering at a specific width? To demonstrate the issue, try narrowing the width of the website linked below until scroll bars appear. Take note of how the background image stays centered while other eleme ...