How to implement the light effect in tailwind? Need the icon to shine.
Example (watch first icon):
enter image description here
Tried to make it through "box-shadow" changing the color of the shadow to white. The effect is not like i wanted: a shadow is formed on the borders of the icon.
Currently implemented via css:
.box-shadow-hover:hover {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.50));
}
Is this possible in tailwind ?
It is not possible with the default configuration if you want to do it in the tailwind way you'll need to extend the theme adding your shadow.
https://tailwindcss.com/docs/box-shadow/#box-shadows
You can now use https://tailwindcss.com/docs/drop-shadow
Use the drop-shadow-{amount} utilities alongside the filter utility to blur an element.
Related
Code Example
<mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" [refreshButtons]="dataSource.data.length" [length]="dataSource.data.length" [pageSizeOptions]="[15, 30, 45, 60]">
</mat-paginator>
Preview Example
What I want, is to remove the grey background around the buttons?
I assume it may be done via ::ng-deep somehow but not sure.
Thank you, and any help is appreciated.
Try using this style in your css/scss.
::ng-deep .mat-paginator .mat-icon-button{
background-color: unset;
}
you can also set the background-color to your desired color (i.e. the color of the background)
I'd like to change the theme of my bootstrap-vue project. I changed the primary and secondary color. Now the background of my buttons is customized, but I wondered about the text color. It just stays white. I can change it with
.btn-primary,
.btn-primary:hover,
.btn-primary.disabled,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle
{color:$myColorl;}
but I thought there should be a more simple and elegant way.
just tested this on codepen and it works for me :)
$myColorl: #000 !important;
.btn-primary{
color:$myColorl;
}
I am trying to change bootstrap primary color to linear-gredient but I am getting an error:
$theme-colors: (
"primary": linear-gradient(to right, #373b44, #4286f4)
);
error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color
The problem is that linear-gradient is used for background-image, not foreground color. When the SASS compiler attempts to build Bootstrap it can't use the darken(..) function on a background-image.
Instead you can just change the primary color for the elements that have a background like this...
.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary {
background-image: linear-gradient(to right, #373b44, #4286f4);
}
https://www.codeply.com/go/XXUxFr6tEZ
What are you trying to achieve? Gradient background?
$primary-color is primarily used for setting color style rule, not background. Also it's used for computing other colors depending on it, $link-color for example.
In your case sass parser is trying to make link look darker on hover, trying to apply darken function to linear gradient.
If you are trying to make linear-gradient background - you need to set variable that handles background-image. For gradient text you need to read about background-clip
Gradient Text
Steps:
set $enable-gradients: true
override .bg-gradient-primary class with your gradient as background
add .bg-gradient-primary class to your element
example:
<button class="btn bg-gradient-primary border-0">Connect Wallet</button>
I start from this default theme (blucristal)
https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.InputAssisted/preview
Now I want change the background of the editable input from white to (for example) yellow. How Can I do?
I would like use Ui theme designer but I can't find the correct property to change
Any visual customization of standard controls can be done with help of CSS.
Redefine property of standard class
.sapMInputBaseInner{
background-color: yellow !important;
};
It will change background color for every intup. Or you can create your own CSS class
.UserClass .sapMInputBaseInner{
background-color: yellow !important;
};
And using method addStyleClass() add "UserClass" only to specific elements.
You may use CSS pseudo class for this purpose. Like this
form input[type=text]:focus{
background-color:red;
}
It will change the background-color of textbox from white to red whenever you click on it.
Here is the example http://jsfiddle.net/e284q9fv/
I will try my best to explain this -->
I am using Fancybox and everything works great. Here comes the issue.
I want to remove the white background as well as the shadow of the iframe-pop, not the overlay!
I tried playing around with the css files which didn't really work...
If you click on the "#1" square you can see what I mean : http://testingpage.de/
(I destroyed the background image on purpose to see the white bg.)
Thanks for any and all help and advice!
UPDATE:
Because of the helpful tips I could get rid of the white background of images. It's still not working for iframe...
No need to edit the original css file ... just add this in your custom css file and after loading the fancybox css file
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
box-shadow: 0 0 0;
}
then your script
$(".fancybox").fancybox({
padding: 0 // remove white border
});
See JSFIDDLE
EDIT :
For a full transparent background, also add
.fancybox-skin {background: transparent}
in your custom css file
See updated JSFIDDLE
NOTE: this make fancybox transparent BUT the background of your iframe content (body, html) should be transparent too