I am using Angular Material and I have used md-checkboxes throughout however when I have a checkbox checked and focused it gives me a strange pink circular shadow around the checkbox (I just want to be able to change the colour)
<md-checkbox class="gray md-default-theme md-checked" checked="checked">
// When this is checked and in focus it adds the class 'md-focused' & gives this a faint pink circle around the checkbox
<md-checkbox class="gray md-default-theme md-checked md-focused" checked="checked">
Can anyone explain how I alter this to change the colour via css?
You have to override .md-focused .md-container:before because the style is added to a pseudo-element... (PLUNKER DEMO)
To override all checkboxes focus:
md-checkbox.md-focused .md-container:before {
background-color: transparent !important;
}
To override just certain checkboxes:
HTML
<md-checkbox class="md-checkbox-no-focused">
Checkbox without focus
</md-checkbox>
CSS
.md-checkbox-no-focused .md-container:before {
background-color: transparent !important;
}
Related
I need it in order to make clickable just a piece of the checkbox label (Privacy Policy). This is the snippet:
<div>
<mat-checkbox required formControlName="privacyCheck" [checked]="false">
<b style="color: crimson">*</b>Accetto la
<i style="color: #770E0E" (click)="printDebug()">privacy policy</i>
e i termini di condizione dell'utilizzo del servizio.
</mat-checkbox>
</div>
At the moment, if i click on the italic text ("privacy policy"), i got the printDebug but of course the checkbox will be setted to "checked".
I tried several solutions using CSS property pointer-events: none !important; on .mat-checkbox-layout .mat-checkbox-label span, .mat-checkbox-layout .mat-checkbox-label, and so on.
How about a good old fashioned stopPropagation()?
I was a bit too quick with my answer
You need to do preventDefault(), because the content of the mat-checkbox will be put inside a <label> and it's default browser behavior to check a checkbox if you click on the attached label.
<i style="color: #770E0E" (click)="printDebug($event)">privacy policy</i>
printDebug(event: MouseEvent) {
event.preventDefault();
// ...
}
If you are using the ripple effect from material, this will still be triggered. If you do not want this, you will have to do a .stopPropagation() on mousedown:
<i style="color: #770E0E" (mousedown)="$event.stopPropagation()"
(click)="printDebug($event)">privacy policy</i>
stackblitz
I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.
As the title says, I have been unable to correctly apply a custom color to a menu in Semantic UI. I have scoured the internet for tutorials, guides, including the Semantic UI page. The only things I have been able to find are people able to successfully apply custom colors to buttons, or people utilizing the default colors defined by Semantic UI for the menu.
<div class="ui fluid container">
<div class="ui segment attached">
<h1 class="ui header item">CONTERACT</h1>
</div>
</div>
<div class="ui fluid container">
<div class="ui primary attached four item inverted menu">
Project Name
Link
Link
Link
</div>
</div>
I have defined the particular color I want as #primaryColor, and this works on a button, just as an experiment, but does not work on the menu. I have also tried to override a default color in site.override with no success. I am under the suspicion that you may not be able to use a custom color with a menu in Semantic UI, but that is also hard to believe considering that defeats the customization aspect.
/**
User Global Variables
**/
#primaryColor: #fabd42
The documentation for coloured menus can be found here and from looking at the source code in the examples we can see that to change out a colour a single-use class is used, e.g red makes the menu red:
<div class="ui red three item menu"></div>
And to set red as the background colour (instead of text colour) the inverted class is added, e.g:
<div class="ui red inverted three item menu"></div>
That indicates that we need to identify where these single-use colour classes are defined and add our own. Searching the source code via GitHub for menu inverted orange we can find that these are defined in menu.less like this:
/* Orange */
.ui.inverted.menu .orange.active.item,
.ui.inverted.orange.menu {
background-color: #orange;
}
.ui.inverted.orange.menu .item:before {
background-color: #invertedColoredDividerBackground;
}
.ui.inverted.orange.menu .active.item {
background-color: #invertedColoredActiveBackground !important;
}
Therefore to add your own background colour for a menu you need to define a background colour class in the same way, e.g:
/* Peach */
.ui.inverted.menu .peach.active.item,
.ui.inverted.peach.menu {
background-color: #peach;
}
.ui.inverted.peach.menu .item:before {
background-color: #invertedColoredDividerBackground;
}
.ui.inverted.peach.menu .active.item {
background-color: #invertedColoredActiveBackground !important;
}
Then you need to add the peach colour, which can be set in site.variables, e.g:
/*--- Colors ---*/
#peach : #FABD42;
You're done! You've added your own colour (peach) and made it available as a background menu colour. The final step is to add the colour class to your menu along with inverted to set it as the background colour, e.g:
<div class="ui peach inverted primary attached four item menu">
</div>
I'm interested in changing the default material blue color to say "green" in dropdown box. I am not able to find the div class responsible for this transition, any help much appreciated.
DEMO from materials Website
Changing the border-bottom-color of the underline upon touch.
Changing the border-bottom-color when the saved option is touched.
Changing the color when dropdown is populated with saved data.
I was able to change the CSS element for form labels but md-select is being a nightmare. below snipped would change all the element color to defined one without default color transition ( black to blue ).
.md-text.ng-binding{
color: orangered;
}
Seems like it is using Primary Palette as it's color. So you can make a custom theme for md-select and use it.
<md-input-container>
<label>Number</label>
<md-select ng-model="number" placerholder="Number">
<md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
{{num}}
</md-option>
</md-select>
</md-input-container>
<md-input-container md-theme="altTheme1">
<label>Number</label>
<md-select ng-model="number" placerholder="Number">
<md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
{{num}}
</md-option>
</md-select>
</md-input-container>
<md-input-container md-theme="altTheme2">
<label>Number</label>
<md-select ng-model="number" placerholder="Number">
<md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
{{num}}
</md-option>
</md-select>
</md-input-container>
Angular Code:
angular.module('myApp',['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('altTheme1')
.primaryPalette('purple')
$mdThemingProvider.theme('altTheme2')
.primaryPalette('pink')
});
Here is the working codepen.
Or we could overwrite the default css as mentioned below.
/* css style to change the bottom line color in dropdown options */
md-select:not([disabled]):focus .md-select-value{
border-bottom-color: #008cba;
}
/* css style to change mini warning message upon touch */
md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value.md-select-placeholder {
color: #008cba;
}
Angular Material Inputs, Selects, Radio buttons and etc work on the primary theme selected. Default is blue so you see that. You can define your custom primary theme color and all inputs should start utilizing it.
Put the following index.js main config function. Make sure to inject $mdThemingProvider in the config function.
$mdThemingProvider.theme('default').primaryPalette('cyan', { 'default': '700' });
$mdThemingProvider.theme('default').accentPalette('blue-grey', { 'default': '500' });