Attempting to make a change in the bootstrap primary color using linear-gradient, but encountering an issue:
$theme-colors: (
"primary": linear-gradient(to right, #373b44, #4286f4)
);
The error message displayed is:
$link-hover-color: darken($link-color, 15%) !default; ^ Argument `$color` of `darken($color, $amount)` must be a color
The issue arises from the fact that linear-gradient is specifically designed for use as a background-image, not as a foreground color. This causes problems when the SASS compiler tries to utilize the darken(..) function on a background-image within Bootstrap.
One solution is to simply modify the primary color for elements with a background in the following way...
.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary {
background-image: linear-gradient(to right, #373b44, #4286f4);
}
Are you aiming for a specific outcome? Perhaps a gradient background?
$primary-color is typically used to define the color property, not the background. It is also utilized to calculate other colors based on it, such as $link-color.
In this scenario, the Sass parser is attempting to darken the link color on hover by applying the darken function to the linear gradient.
If your goal is to create a linear-gradient background, you should set a variable that manages the background-image. To achieve gradient text, take a look at background-clip
Follow these steps to add gradient backgrounds:
$enable-gradients: true.bg-gradient-primary class with your desired gradient background.bg-gradient-primary class to the element you want to have the gradient backgroundFor example:
<button class="btn bg-gradient-primary border-0">Connect Wallet</button>
I'm currently using Drupal 7.0 along with the Galleria Javascript Image Gallery in fullscreen theme. My theme includes two navigation buttons, and here is the CSS code for them: .galleria-image-nav { height: 159px; opacity: 0.8; position: fixed ...
I'm struggling to implement a mat-datepicker in my Angular page because the label is floating too high. When I select a date, the label ends up getting pushed under the top bar of the page. I can't figure out what's causing this issue; help ...
Seeking help in resizing my video using fitvids to fill the parent area as much as possible. Check out my fiddle below: http://jsfiddle.net/LkqTU/9513/ Code snippet: $(".video-content").fitVids(); HTML structure: <div class='liveExampl ...
I have a question regarding CSS animation, specifically the typewriting effect. I was able to successfully achieve the typewriting effect using animation. However, I noticed that even though I did not set any animation for transforming, once the text is g ...
I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...
I am currently working on implementing a confirmation modal that pops up when a button is clicked. Although the modal appears, it seems to be positioned behind the background that darkens the rest of the page. Relevant CSS: .reveal-modal-bg { background ...
Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...
Can anyone help me troubleshoot an issue with custom styles not displaying correctly on my home page but showing on another page? index.php <?php include 'include/css.php';?> <?php $page = 'home';include 'include/navbar. ...
Check out this website: I am struggling with setting up a fixed menu div at the top and a content div below it on my site. I want the scroll bar to only apply to the content div and not the header div at the top, but I can't seem to figure out how to ...
I am trying to dynamically change the CSS href by using window.open in JavaScript. <a class="cssButton" id="Launch" target="_blank" data-baseref="Example/index.html?" href="Example/index.html?" >Launch Example</a> I want to transform it into: ...
When running "ng serve" in angular-cli, the generated css is not minified as expected. Is there a specific setting to configure in angular-cli-build or an additional plugin to install? This is the content of my angular-cli-build.js file: var Angular2App ...
Can icons be displayed in a circle and after 1,2 rotations, revert back to the list view? https://i.sstatic.net/p4Jxm.png If so, when it forms after 1,2 rotation, it should resemble a line. https://i.sstatic.net/uJW24.png In summary, looking for a CSS3 ...
Currently, I am utilizing react-table and wanting to implement CSS rules for the class rt-td, which is not accessible or adjustable through their API functionalities. In traditional CSS practice, I could easily override the CSS class within my stylesheet. ...
I am facing an issue with the code below. Whenever I hover over a menu, all submenus in the dropdown open. How can I make it so that only the specific submenu toggles its active class when clicked: <script src="http://ajax.googleapis.com/ajax/libs/jq ...
I've set up a div with a sleek black background. Upon page load, I trigger an API request for an image, which is then displayed in a secondary div positioned behind the main one. After this, I aim to smoothly transition the overlaying div's opaci ...
I'm currently developing a C# application that needs to manipulate CSS files. Imagine you have the following CSS code snippet: .ClassOne { color: #FFFFFF; font-weight:normal; font-size: 9pt; font-family: Tahoma; ...
Recently, I came across an issue where I have both an Image and a custom text element placed between them using an input box. My goal is to make both the text and the image draggable on the page. However, I noticed that while the image can be dragged and d ...
My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...
When my page loads, I want to automatically jump to a specific anchor tag and ensure that the anchor object is centered in the window. Initially, I implemented a basic function to achieve this: <body onload="goToAnchor();"> <script type="text/ja ...
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}" style=" ...