I have this code from Angular Material site and when I used this in Chrome I have focused on the button(like a blue border for each button selected).
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
I tried to remove this with outline:none in Css, but it doesn't work.
I think the outlines should already be removed by angular material. If not you're on the right track.
You would need to add the following css:
.mat-button-toggle-button:focus {
outline: none;
}
Make sure to add this in your global styles.css and not in your scoped component styles. If this doesn't work, try to add an !important just in order to see if your styles get overwritten.
Notice: Outlines provide visual feedback for links that have focus when navigating a web document using the TAB key (or equivalent). So they are really important for people with a visual impairment. If you remove them, always make sure to replace them with some other visual feedback on the focus state. Angular material does this by changing the background color.
Related
Whenever I click on any of the components I get a black border, although when I click away the border disappears. How do I prevent the web app from doing so?
Below there is a picture of what I get in my app.
Also, this is a link to a sandbox where I have the same issue:
https://codesandbox.io/s/es6-spread-operator-practice-drbyh?file=/src/components/App.jsx
This is caused by the &focus css selector as shown bij the inspector.
Add outline: none to the <button> to remove it;
<button style={{outline: 'none'}} onClick={onInputSubmit}>
This is because the :focus pseudo-class is adding an outline into the button. You can change that behaviour by using css like this:
button:focus {
outline: none;
}
Or by adding it as an inline style as well, even though I personally don't recommend it because having a lot of inline styles could cause to have a messy and hard to read HTML.
I am often running into the problem of not knowing what css to change for ionic components. For example I have a button that I am outlining using ionic, my initial guess was to overwrite its outline/border color with something like.
border: 1.2px solid #697954;
But that didnt work so I essentially just had to dig through forum posts until I found that its changed with
--border-color
This seems like an incredibly inefficient method to finding how to overwrite ionic component css variables.
Where can I find exactly what css ionic is using for its components so I can easily overwrite them without digging through forum posts? I checked in the ionic core.css on github, but that didnt give me the info I wanted.
Well know I have border color done correctly, but I need change the onclick background color and the onclick text color. I dont want to dig through the forums again.
As of Ionic 4 component views are encapsulated in a shadow dom and therefore not designed to be easily overwritten with css. Each component has it's own documentation for how you can override common css properties, such as:
https://ionicframework.com/docs/api/button#css-custom-properties
There are a number of guides available for more information about styling shadow doms, such as:
https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/
A similar discussion with the example applied to a button can be found here:
Ionic 4 custom styling Shadow DOM
In some situations the Ionic Documentation isn't always up-to-date with the latest CSS variables that are available for a component. A sure-fire way to find out what variables are available is by looking at the master source code on Github for the component's CSS.
For example, if I wanted to see what variables are available for the ion-range component I would look at the range.md.scss file:
:host {
--knob-border-radius: 50%;
--knob-background: var(--bar-background-active);
--knob-box-shadow: none;
--knob-size: 18px;
--bar-height: #{$range-md-bar-height};
--bar-background: #{ion-color(primary, base, 0.26)};
--bar-background-active: #{ion-color(primary, base)};
--bar-border-radius: 0;
--height: #{$range-md-slider-height};
--pin-background: #{ion-color(primary, base)};
--pin-color: #{ion-color(primary, contrast)};
#include padding($range-md-padding-vertical, $range-md-padding-horizontal);
font-size: $range-md-pin-font-size;
}
Here we can see all the variables available for the host component (in this case, ion-range).
I'm trying to style mat-select's differently per component. I have 1 main select in my (always visible) header, and multiple in different components within my SPA. I'm trying to style the header mat-select differently because it has a dark background, the rest should be unstyled, and not affected by the header styling.
I've tried using ngClass & ngStyle, but they don't add the required classes to childs, just to the main class. I've tried using ::ng-deep and /deep/ but they alter the styling of components in other parts of the application. So technically they work, but with the wrong result.
https://stackblitz.com/edit/angular-kzwatd
I'm hoping to just alter the text color to white, since the background of the mat-select is dark.
Anyone have any clue why the stackblitz is not working?
Try using :
<mat-select class="main" placeholder="Main"> ....
/deep/ .main .mat-select-value{
color: red;
}
https://stackblitz.com/edit/angular-rucggb?file=src/app/main-component.css
I've problems related to how-to-separate-apostrophe-syles-from-the-front-end-template.
How can I style <a>-tags without breaking the Admin UI?
Do I have to give each <a> in my own widgets a style-class <a class="mystyle">?
What's the way to style the links of the provided richtext-widget?
Do I have to use .apos-rich-text a to stop changing the admin-control ui of the widget?
Because the following breaks the Admin UI.
.custom-main-container a:hover {
color: #ffffff !important;
}
The menus texts become white on hover and can't be read.
What's the way to handle the styling and to be sure you don't oversee anything?!
The Apostrophe dev team typically stays away from styling at the element level for exactly this reason, however CKEditor doesn't allow you to apply classes on links easily.
An easy and tight way to scope styles to the a element and not interfere with Apostrophe's admin UI is to add a project level class to the rich text widget wrapper.
In your project level /lib/modules/apostrophe-rich-text-widgets/views/widget.html
<div data-rich-text class="apos-rich-text MY-RICH-TEXT">{{ data.widget.content | safe }}</div>
Then in your CSS you can write
.MY-RICH-TEXT a:hover { //whatever }
Be sure to leave data-rich-text in the wrapper, Apostrophe is using that attribute to enhance the widget on the front-end.
My shame... the problem is the !important above.
This makes the specificity too high. Somehow I didn't get this too my mind before.
Although it would be great if the admin UI would get more specificity so that it is not so easy to overwrite its rules by 2 class-selectors.
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.