I have an Angular Material Paginator that looks like
I want to style it and it should look like
I am having a very difficult time to style it. I was just able to move the elements in the paginator around(start and end positions), apart from this I was not able to modify anything.
Please let me know how to do the required styling ?
Here is the stackblitz link https://stackblitz.com/edit/angular-tjhkpo
Use this css(for more style open F12 and override material declaretion):
See working code
::ng-deep .mat-paginator-page-size-select {
width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
background-color: transparent;
}
::ng-deep .mat-select-value {
color: #005999;
font-weight: bold;
font-size: 15px;
}
::ng-deep .mat-select-arrow {
color: #005999;
}
::ng-deep .mat-option{
padding: 0!important;
}
::ng-deep .mat-option-text {
text-align: right;
}
For captions modifying you should provide MatPaginatorIntl. Example
If you use separate style for components and you want style child component you need to use in your css style ::ng-deep before you style child component selector, for example:
::ng-deep .mat-select-value {
border: 1px solid red!important;
}
When using ::ng-deep try to add more restrictive selectors so that you reduce the risk of side-effects e.g.
::ng-deep {
.mat-select-panel[aria-label="Items per page:"] {
.mat-option-text {
font-size: 1.4rem;
}
}
}
Related
I need to change the default primary Bootstrap 4 color (after the Bootstrap stylesheet has been loaded) to a custom color (choosed by user) for a dynamic Bootstrap component with an internal CSS stylesheet.
I could do, for example, .btn-primary { background-color: red; } but this works just for buttons and, however, it doesn't change the other btn-primary states like ":hover", ":active" and "disabled". It also doesn't change the "primary" color throughout the entire CSS for .alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primary, etc...
What's the possible solution?
You need to download the Bootstrap Sass files. You can do so from this link.
Once you have them you can open the main bootstrap .scss file and search for:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Change "primary" to what you need and then recompile to CSS. If you don't have Sass installed on your machine you can use various online tools to accomplish this. Example.
Source: https://getbootstrap.com/docs/4.3/getting-started/theming/
You can do so by using the variables concept(https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
Bootstrap 4 also works on the variables
You can try changing the variable values at run time as mentioned below:
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
// get variable from inline style
element.style.getPropertyValue("--main-bg-color");
// get variable from wherever
getComputedStyle(element).getPropertyValue("--main-bg-color");
// set variable on inline style
element.style.setProperty("--main-bg-color", "red");
There are different ways do it. I am describing one of them.
Import below lines to your scss file.
#import '~bootstrap/scss/bootstrap.scss';
After that write below code to override it.
$primary = 'red';
$gray = 'gray';
.btn {&.btn-primary {
#include button-variant($primary, $primary, $primary, $primary);
&.disabled,
&:disabled {
border: $gray;
background-color: $gray;
}
&:hover {
opacity: 0.85;
}
}
}
Check the link to use sass mixins to override bootsrap classes.
I got a problem with my css in ionic...
I want to change the css, when a radiobutton is clicked. as shown below.
[type=radio]:checked + ion-icon {
background-color: $primaryColor;
color: white;
font-size: 45px;
}
The above css works on for the html tag but in ionic you have a tag called ion-radio. So is there a way to achieve the same, but with the radio button from ionic?
ion-radio:checked + ion-icon {
background-color: $primaryColor;
color: white;
font-size: 45px;
}
As far as I noticed from the docs, once an ion-radio is checked, it gets the class radio-checked.
Inspect your elements, don't they get this class too once they're checked?
I've fixed it by adding a class if a specific radiobutton is checked.
HTML:
<ion-icon [ngClass]="{'active': (gender == 'Female')}" name="female"></ion-icon>
CSS:
/* CHECKED STYLES */
ion-icon.active {
background-color: $primaryColor;
color: white;
font-size: 45px;
}
I am styling the .button1 class with its own ruleset. Additionally, I have a separate ruleset for the :hover pseudo-class using the CSS selector .button1:hover
But I wish to define the :hover pseudo-class styling within the existing .button1 ruleset.
Currently:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
Desired:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
hover:background-color: #4CAF50;
}
Is it possible to do anything like this?
Here is link https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover
CSS
This is impossible to do with pure CSS. :(
.button1 and .button1:hover are different CSS selectors.
With CSS, if you want to apply unique styling to the hover-state, then it must have a separate ruleset:
.button1 { background: red; }
.button1:hover { background: pink; }
CSS preprocessors
However, there are a handful of CSS preprocessors that allow us to write style-rules using special syntaxes that allow nesting similar to what you wish to accomplish.
For instance, here is "SCSS" syntax that the Sass preprocessor uses:
.button1 {
background: red;
&:hover {
background: pink;
}
}
On their own, these intermediate syntaxes will not run in the browser, so in the end, a special interpreter (preprocessor) must be used to "process" and translate the special syntax into real CSS that the browser can actually load.
Some popular preprocessors:
Sass
Less
Stylus
PostCSS
If you want to add hover to any class the format is
You can not add it inside .button class
.button1:hover{
background-color: #4CAF50;
}
Here is an example to get hovering effect -
<style>
.btn{
/* Style your button */
}
.btn:hover{
/* Add hovering effect to your button */
}
</style>
<button class="btn">Green</button>
I was wondering when I worked on a project if I could achieve this, but assuming it does not seem currently possible to get this behavior without any change of structure (I would really like to keep the hover inside its own class declaration), to you, what would be the cleanest solution ?
LESS
#blue: blue;
#blue-darker: darken(#blue, 20%);
.text-blue {
color: #blue;
/* something like that */
&:hover when (element_reference == hyperlink) {
color: #blue-darker;
}
}
CSS
.text-blue {
color: blue;
}
/* something like that */
a.text-blue:hover {
color: #000099;
}
HTML
<p class="text-blue">Text in blue with no hover effect</p>
<a class="text-blue" href="#">Link in blue with hover effect</a>
This should do what you want:
.text-blue {
color: #blue;
a&:hover {
color: #blue-darker;
}
}
Fiddle
I would use a :link CSS pseudoclass, because <a> without href is not treated as a hyperlink. See at https://jsfiddle.net/jsqdom1s/
.text-blue {
color: #blue;
a&:link:hover {
color: #blue-darker;
}
}
I've been trying awhile to implement this mootools tooltip sample on my site, the problem is I am using mootools 1.4 (mootools-core-1.4.1-full-compat.js) and the example using classname i.e.
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});
won't work for me. I can see the text but no image, firebug net tab doesn't show any asset missing.
I do have the effect I want using the other samples on the page but as far i can tell this locks me into a single style for tooltips.
var Tips1 = new Tips($$('.Tips1'));
which then has the css setup like so
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}
.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}
.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
}
If custom class method won't work in 1.4
Am i correct in assuming using this 2nd method I cant have 2 separate tooltip styles on the page? In effect the .tool-* styles are reserved? I've tried something like
.MyOtherTipStyle .tool-title
{
//etc
}
.MyOtherTipStyle .tool-text
{
//etc
}
but irrespective of class assigned the same
.tool-title
.tool-text
styles are only ever applied.
Thanks,
The demo seems to use a different version of Mootools More, here is the right way to make your css (1.4.2):
.custom { }
.custom .tip-top { }
.custom .tip { }
.custom .tip-title { }
.custom .tip-text { }
.custom .tip-bottom { }
Here is an updated version of your JSFiddle, using the previous format: http://jsfiddle.net/3By77/4/.
Additionally, you forgot to activate Mootools More in JSFiddle, that's why it didn't work.