If i click the 'Default' button on react-bootstrap page it remains "clicked".
What is the common way to remove the active state, so that the button looks like before it was clicked?
Overriding with the following css does not work:
.btn-default:active {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn:focus {
outline: none !important;
outline-offset: none !important;
}
Use this, In my case, it was solved.
The problem is not "active", but "focus" and it is fixed by the following css overrides:
.btn-default:active, .btn-default:focus {
color: #333;
background-color: #fff;
border-color: #ccc;
outline: 0;
}
For me, this solution worked:
.btn-default:focus {
outline: none;
box-shadow: none;
}
You don't even need !important.
add class to your button and
.youtclass{
box-shadow: none;
}
Related
I would like to change the background colour of "After" to blue upon clicking, but no matter what it just doesn't show. I'm not sure what is wrong here in SCSS. Would really appreciate any advice!
Here's the JS Fiddle: https://jsfiddle.net/u1h9fe6v/
.grid-list {
--color: #f6f8ff;
--background: #2b3044;
--background-hover: green;
--background-active: blue;
padding: 6px 12px 6px 8px;
margin: 0;
display: flex;
outline: none;
position: relative;
border: none;
border-radius: 9px;
background: var(--b, var(--background));
cursor: pointer;
-webkit-appearence: none;
-webkit-tap-highlight-color: transparent;
transform: scale(var(--scale, 1)) translateZ(0);
}
.grid-list:active {
--scale: 0.95;
--background-active: blue;
}
.grid-list:hover {
--b: var(--background-hover);
}
It looks like you can set the background color in the
".grid-list.animation.active {" style. Like this ...
.grid-list.animation.active {
--span-name: text-active;
--dots-name: move;
--lines-name: scale;
--lines-duration: 0.15s;
--lines-delay: 0.3s;
background: blue;
}
angular material2 mat-checkbox
How do I modify the left icon size, and the left icon state color?
<mat-checkbox>Like Me.</mat-checkbox>
You can use this ( .mat-checkbox-inner-container ) CSS class to modify the mat-checkbox
.mat-checkbox-inner-container {
height: 50px!important;
width: 50px!important;
}
Note that you need to put the style modification in styles.css root folder (
/src/styles.css ) and not in the components css.
Also put !important ( width: 50px!important; ) to override the
default style.
Below is the default style for the mat-checkbox
.mat-checkbox-inner-container {
display: inline-block;
height: 20px;
line-height: 0;
margin: auto;
margin-right: 8px;
order: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 20px;
flex-shrink: 0;
}
Hope this helps.
If you want to change color then use these in your CSS file
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: black;
}
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background-color: black !important;
}
::ng-deep .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
Hope this css will resolve your issue
to change styles use classes and define them in your scss component file.
When you see that this not work's, use the selectors :host /deep/ before the class name in each of the scss defined classes.
The size of the icons is defined by the font-size not width / height
Hope I helped you
In my project, we overrode sizes of checkboxes and radio buttons to 16px in this way:
body .mat-checkbox-inner-container, body .mat-radio-container, body .mat-radio-outer-circle, body .mat-radio-inner-circle {
height: 16px;
width: 16px;
}
body .mat-checkbox-ripple, body .mat-radio-ripple {
left: calc(50% - 20px);
top: calc(50% - 20px);
height: 40px;
width: 40px;
border-radius: 50%;
}
In SASS's class selecter, I want to select parent's sibling.
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
// textarea:disabled & {
// background: #efefef;
// }
}
Compiled above sass code,
.bw-textarea textarea:disabled {
background: #efefef;
}
But I want to show result like this css code...
How to select like this in sass?
textarea.bw-textarea:disabled {
background: #efefef;
}
You gotta use #root in this case. It's pretty simple
This link will give a clear idea about this selector
.bw-textarea {
#at-root textarea#{&}:disabled{
background: cyan;
}
}
This will compile to
textarea.bw-textarea:disabled {
background: cyan;
}
See this PEN
This is what your looking for:
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
&:disabled {
background: #efefef;
}
}
Check out this SO answer for a lil more idea on the nested pseudo selectors
Sass parent selector and hover?
And of course check the sass docs
https://sass-lang.com/documentation/file.SASS_REFERENCE.html
I have the following code: But how can I hide the underlined glyphicon?
<p:commandLink ajax="false" action="#{languageGeneralListController.doEditLanguageGeneral(languageGeneral)}">
<span class="glyphicon glyphicon-pencil" title="Editieren"></span>
</p:commandLink>
Here my CSS:
a:link {
color: #1BA1E2;
text-decoration: none;
}
a:visited {
color: #1BA1E2;
text-decoration: none;
}
a:hover {
color: #1BA1E2;
border: 0px;
text-decoration: underline;
}
a:active {
color: #1BA1E2;
border: 0px;
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
I tried with the last a:hover img but it doesn't work.
Could anybody help me, please.
Try this
a:hover .glyphicon {
text-decoration: none;
}
As aDroidman pointed out your css is targeting an image.
Edit
Have a look at this example and see if it helps: http://jsfiddle.net/xae8n/
For a link with a glyphicon in it you will need to these two things:
Assign a class to the link, then use that class to disable the normal link underline.
Assign a class to the text inside the link that use that to underline the text when the class from (1) is hovered over.
Hopefully that makes sense?
I have implemented the css as shown here: How to make twitter bootstrap menu dropdown on hover rather than click
However want to disable the dropdown on hover when the navbar collapses as it acts a bit buggy.
How can I do it?
You could try wrapping the CSS to disable the dropdown in a media query so that it is only disabling it at a certain page width... Reading up on media queries and trying to understand how bootstrap implements them is going to be one the keys to debugging this. Here's what I tried with the previous answer's fiddle.
http://jsfiddle.net/2Smgv/5544/
#media (min-width: 767px) {
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
}
}