I'm to add an angular material spinner, but can't even have the basic one works on Stackblitz. I've added everything the way the documentation suggest, but I'm still getting nowhere.
Thanks for helping
You were missing to define a theme in styles.css. https://stackblitz.com/edit/angular-pbet9b?file=src/styles.css
Or you can also define the stroke color in styles.css:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: red;
}
I would suggest to pre-define a theme and then override in styles.css so in case you forget to define maybe a color at least the default color appears.
Related
In the material datepicker there is a small arrow for changing the year, I managed to change every component's color in the calendar but not this arrow.
I inspected it in the browser and found a mat-calendar-arrow class but I can only change the background-color of it and not the arrow's color. Is there a possible way to change it to white? I need it for my dark-theme.
Try this out:
.mat-calendar-arrow {
border-top-color: white;
}
I need to change the color of the highlighting of possible drop targets in a Vaadin 14 Grid. To illustrate, I am using the drop mode "between", which results in a purple line:
How do I change the color of that purple line?
Vaadin Tutorials are not easy to understand and suggest using a CSS selector ending with -drag-center (Vaadin 8) or using .v-drag-over-target.card selector. But this does not seem to work, maybe I need to replace "v" in the second suggestion with something else?
Due to the purple color I'm assuming that you are using the Material theme. I'll also assume that you have a custom theme set up, as is described here. If not, that page explains how to set up a custom theme.
To customize the color of the grid row drag indicator:
In your project folder, create a file frontend/themes/<your-custom-theme-name>/components/vaadin-grid.css
Add the following contents to the CSS file:
[part~='row'][dragover] [part~='cell']::after {
background: green; /* replace with the color you want */
}
I'm trying to override the odd/even colors and give the row a ":hover" background color, but I cannot override:
undefined .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd:not([style-scope]):not(.style-scope) {
background: #fafafa;
}
Here is what I've tried on my Theme html with no results :
:host::content .bwu-datagrid-row.odd,
.bwu-datagrid-row.odd {
/* !important works, but it prevents me from doing a :hover */
background-color: lightskyblue;
background: lightskyblue;
}
Adding ":hover" to this last rule doesn't get trigger when the row is moused over. I'm hoping that this is possible, so when someone hovers on any cell in a row, the entire row changes background color.
in package:bwu_datagrid/datagrid/bwu_datagrid_default_them.* is the default theme style module. It is supposed to be used as a template for your own theme.
Create a style module with the same name (<dom-module id='bwu-datagrid-default-theme'>, copy what you want/need from the shipped default theme to your custom theme.
Then only import your custom theme instead of the one from package:bwu_datagrid/datagrid/ and only the styles from your style module will be applied.
This way you don't have to "fight" the default theme.
I am toggling the header visibility and when I hide it, I need it to be transparent and show the scrolling content.
I tried several ways but the header is not transparent. Please note it's hidden correctly but it left a white background instead. So I wanted to make it transparent:
$('.ui-header').hide().animate({opacity: 0.0});// Hide the header but its opacity doesn't get to 0
$(".ui-header").css("backgroundColor", "transparent");// No effect
How to make the header transparent so it will show the content underneath?
$(".ui-header").hide();
Should be sufficient. Hiding the element means not showing it, which is equivalent to setting the opacity of the element to zero.
When reading the documentation for the jQuery function .hide(), it clearly states that .hide() without any parameters is the equivalent to display: none; in CSS.
If you can't find the error with JS, I suggest giving display: none; to the ui-header class in CSS. If neither works we need more code to track down the error and give you a proper answer.
Edit: A JSFiddle demo available here.
I know about css sprites.. Now i want some examples of css sprites....
How did you manage to get css sprites work?
I usaully use the CSS background property. This property allows you to set a scroll argument of top and left as you can see in the example below. So the idea is to create one image with all states and simply position it based on the event like hover or other custom event in which you alter the elements CSS. I hope this helps.
.mySprite a
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}
.mySprite a:hover
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}
http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/
http://www.w3schools.com/css/css_positioning.asp
http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29
If you are using Firefox here is a simple way to get an idea of what a sprite is. Go to yahoo.com, right-click and View Page Info, click Media. Look for a file name having "sprite" in it.
This is one of the links:
http://d.yimg.com/a/i/ww/met/gsprite_071309.gif
You will see many background gradient images. You can use this file to play with. Now you have to adjust background position in your CSS depending on which background you want to use, like this:
background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;
This should give you an idea of how to manage sprites.
If you are looking to create a CSS sprite - you can check out the site spriteme.org, which is very cool and shows you how to easily create a CSS sprite.
For a nice example you can check out this page:
http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/
Gives a good explanation and shows how the website owner uses a sprite.
I use them for button images. I use the top half of an image for the normal button state and the bottom half for the mouse-over state. That way the mouse over image is loaded when the page loads and there's no delay which just looks bad and slow. CSS code is here.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great interactive example and everything you need to know about CSS Sprite.