I have a mat-toggle-button-group in a form:
<form [formGroup]="form" class="mb-4">
<mat-button-toggle-group
name="carrier"
aria-label="Choose Carrier"
#carrierSelection="matButtonToggleGroup"
formControlName="carrierChoice"
[value]="carrierChosen"
>
<mat-button-toggle [value]="carrier" *ngFor="let carrier of carriers">
<img alt="Carrier: {{ carrier | uppercase }}" src="/assets/sending/images/carriers/{{ carrier }}/tab-logo.svg" />
</mat-button-toggle>
</mat-button-toggle-group>
</form>
It insists on showing a heavy black border around the button when it is focused, via tab key or clicked.
I inspect the div <div class="mat-button-toggle-focus-overlay"></div> and find this:
So, first I tried this:
.mat-button-toggle-checked .mat-button-toggle-focus-overlay {
border-bottom: 0 !important;
background-color: transparent !important;
}
No luck still a heavy black line, although inspecting it now shows my overrides:
Which I do not understand.
Next, I try this:
.mat-button-toggle-focus-overlay,
.mat-button-focus-overlay {
box-shadow: var(--focus_shadow) var(--focus);
background-color: transparent !important;
border: 0 !important;
}
When I inspect the <div class="mat-button-toggle-focus-overlay"></div> in the app, it actually shows it has my styles:
But the black line persists.
Apparently, Chrome changed the focus treatment recently and Edge Chromium decided to use a heavy black line for focus.
so I wrapped the toggle group in a DIV and set this:
.carrier-toggle {
.mat-button-toggle-label-content,
.mat-button-toggle-button,
.mat-button-toggle {
outline: none !important;
}
}
and then I set my own focus style, with a background color.
.mat-button-toggle,
.mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
&:focus {
background-color: var(--rich200);
border: 0;
}
}
Related
Hi I have an accordion with Bootstrap 4 and Vuejs like this:
<div class="faq_accordion" role="tablist">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle.accordion-1 variant="secondary">¿Cómo se seleccionó los beneficiarios?</b-button>
</b-card-header>
<b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text>
<b-card-text>{{ text }}</b-card-text>
</b-card-body>
</b-collapse>
</b-card>
</div>
I added this to the css:
.faq_accordion .card-header {
background-color: #f1f1f180 !important;
background: transparent;
}
But it does not work the background does not take that color, how can I fix it? and how can I add the font size to the fonts? Thanks!
Sometimes in Vue you need to do it in the hard way with deep properties, change it in your CSS:
In Vue 2 (Boostrap Vue is based on this):
::v-deep .faq_accordion .card-header {
background-color: #f1f1f180 !important;
background: transparent;
}
In Vue 3:
:deep(.faq_accordion .card-header) {
background-color: #f1f1f180 !important;
background: transparent;
}
I hope it works for you.
When I click on one link in the navbar I want my border bottom to keep displaying
There are two behaviours :
- On hover : display the border-bottom.
- When active on the link keep displaying the border-bottom (the user is active on the page).
I don't find how to do this, can someone help me ? thank you !
File scss -
a {
span {
padding-bottom: 5px;
}
}
a:nth-child(1) :hover {
border-bottom: 3px solid "blue";
}
a:nth-child(2) :hover {
border-bottom: 3px solid #8e1cfb;
}
react component navbar tsx file -
<div>
<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
<span>Link 1</span>
</Link>
{''}
<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
<span>Link 2</span>
</Link>
</div>
Just handle the active class in your css.For example .active {
color: white;
border-bottom: 3px solid #2196f3;
}
Since you're using react router Link, you'll get active class added by default when the route is active.
[Edit]: My solution below works fine but does not use the default 'active' class added by react router itself when you click on a Link. I played with it on This Stackblitz for react-router (You will need to update package and change Link to NavLink if you are using router v5) but couldn't make the active class work properly, the active class wasn't removed from the first Link, don't know why (But you can inspect the code and you'll see it is added to your other links).
Now, if you want, there is also a activeStyle you can use (Not recommanded, bleh).
Your links are all first child of a div so you could do :
const App = () => {
const setActiveLink = e => {
// easier for me, you can change with getElementById or getElementByClassName
const links = document.getElementsByTagName("a");
Array.from(links).forEach(el => el.classList.remove("active"));
e.target.classList.add("active");
};
return (
<div className="navbar">
<a href="#" onClick={setActiveLink}>
link 1
</a>
<a href="#" onClick={setActiveLink}>
link 2
</a>
<a href="#" onClick={setActiveLink}>
link 3
</a>
</div>
);
};
Adn in your css simply add :
div > a {
text-decoration: none;
padding: 5px;
}
div > a:hover{
border-bottom: 1px solid red;
}
.active {
border-bottom: 1px solid red;
}
Of course you have to adapt the the css tags I chose to match your code. Here the stackblitz for exemple : Example on Stackblitz
I'm tring to change the color of the checkmark inside the ion-checkbox. The checkbox has a white background and the the checkmark is white Im tring to get the checkmark to be black not white. This is what I have so far
.checkbox-icon::before {
background-color: white !important;
}
.checkbox-icon::after {
color: black !important;
}
<ion-item ng-repeat="list in modal.item.modifier_lists | orderBy: 'ordinal'"
ng-if="list.modifier_options[0].name">
<div ng-if="list.modifier_options.length === 1"
class="row">
<div class="col">
<ion-checkbox ng-model="list.modifier_options[0].selected"
ng-checked="list.modifier_options[0].selected"
class="button-orange checkbox-stable">
<span class="pull-right">{{list.modifier_options[0].name}}</span>
</ion-checkbox>
</div>
</div>
</ion-item>
Some of the css- properties you can use to change the coloring of the <ion-checkbox> are
--checkmark-color: black;
--background-checked: white;
--border-color: black;
--border-color-checked: black;
You can find more information in the ion-checkbox documentation
I'm pretty sure you actually have to use border-color to adjust the checkmark color
So to clarify here is what you could do:
Inside your <ion-checkbox> add a custom class of your own custom-checkbox and then for that class do whats below:
.custom-checkbox .checkbox-icon:after {
border-color: //whatever you like it to be
}
That will change the color of the check mark when it is checked.
I'm using the range slider from here: http://materializecss.com/forms.html
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
And I managed to change the color of the "thumb" that pops up when you click on the slider by using this:
input[type=range]+.thumb{
background-color: #400090;
}
And normally I can just inspect the element on chrome and get what class I have to change to change its color. For some reasons I can't figure out how to inspect the "dot" in the slider to find what class I have to add to change its color.
This is what I did to change the dot on the slider and the thumb bubble colors.
Screenshot and snippet attached
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<style>
input[type=range]::-webkit-slider-thumb {
background-color: red;
}
input[type=range]::-moz-range-thumb {
background-color: red;
}
input[type=range]::-ms-thumb {
background-color: red;
}
/***** These are to edit the thumb and the text inside the thumb *****/
input[type=range] + .thumb {
background-color: #dedede;
}
input[type=range] + .thumb.active .value {
color: red;
}
</style>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
.noUi-connect {
background: black;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
background: black;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
background-color: black;
}
check out this pen by alexventuraio
you can also do
document.querySelector('.noUi-tooltip').style.background = 'black';
document.querySelector('.noUi-handle').style.background = 'black';
Use querySelector all to change all. CSS [" .noUi-handle{...} and .noUi... "] is not overriding.
I'm new to stack
The easiest way to figure this out is actually by looking through the source code. Hosted here (https://github.com/Dogfalo/materialize/blob/master/forms.html) in line 833 and here (https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss) on Github.
Between this and my Chrome DevTools, I have managed to change the background on the range input to #4286f4(substitute for you color) with this CSS declaration:
.noUI-connect {
background: #4286f4 ;
}
You may need to use the !important flag on the property. This changes the color of the slider between the two .thumb elements.
To change the color of the little "thumbs" on the slider:
.range-label{
background-color: desired-color;
}
If you would like to change the grey-color of the background(area outside selection), use this:
.noUI-background {
background: desired-color;
}
Additional Caveat: This solution was only tested on the noUiSlider implementation: http://materializecss.com/forms.html (scroll to Range section). I have not tested this on a plain HTML range element, and sadly need to get back to work.
EDIT:
Having tried to explore solutions on the plain html range input, it appears that there is tag with the class "value" on the slider, as a child of .thumb. Unfortunately, styling this has not led anywhere, leading me to believe that this is either a :before/:after css property, or that your answer lies between lines 73-83 of the 2nd link in the first paragraph.
I have this button:
<input type="submit" value="#Translator.Translate("PAYOUT")"
class="btn-block secondary-button save-changes padding-8"
ng-disabled="PayoutEnabled==false" ng-click="PayOut()" />
But even when it's disabled it has the same class as it's enabled, just not clickable. I want to change background when it's disabled so that user can see that button, is disabled. How can I do that? Do I need some ng-disabled CSS class or there is some other way?
What Toress answered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).
You can make use of CSS3 since you already have a class on it. Example:
input.save-changes {
/* some style when the element is active */
}
input.save-changes[disabled] {
/* styles when the element is disabled */
background-color: #ddd;
}
Edit: You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabled attribute and see it's CSS.
.save-changes {
background-color: red;
padding: 7px 13px;
color: white;
border: 1px solid red;
font-weight: bold;
}
.save-changes[disabled] {
background-color: #FF85A1
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="PayoutEnabled = true">
<a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
{{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
<br>
<br>
<input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
</div>
use ng-class
<input type="submit" value="#Translator.Translate("PAYOUT")" class="btn-block
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false"
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).
AngularJS adds pseudo-class disabled when ng-disabled is false so i think here is the simplest solution to refer to disabled button :
button:disabled {
color:#717782;
}
In case you are using Bootstrap and a more recent Angular version than AngularJs you can ovverride the default style adding this to the styles.css file
.btn.disabled, .btn:disabled {
opacity: .35 !important;
background-color: gray !important;
}
The higher the opacity the darker or more solid the color will be.