I'm developing an application using Bootstrap 3. I use Sass/SCSS to customize the Bootstrap variables neatly.
I'm currently styling the "tabs" component and I can't seem to figure out if there is a specific variable that controls its text color, or if it's been inherited from somewhere else.
What's a good way to determine the "source" of a CSS rule that comes from Bootstrap? I use Chrome on OSX.
I just inspected the tab on the bootstrap site and searched for the .nav-tabs class in the bootstrap scss files. So in the _navs.scss file, search for "tabs" and you'll see the variables.
It looks like $nav-tabs-active-link-hover-color might be what you're looking for - it's the active tab's text color. The anchors in the non-active tabs appear to be default anchor tag color.
You can find that variable in the _variables.scss file. The variables are usually named according to the component that uses them (i.e. $nav-tabs-active-<whatever>).
// Active state, and its :hover to override normal :hover
&.active > a {
&,
&:hover,
&:focus {
color: $nav-tabs-active-link-hover-color; // ****** here
background-color: $nav-tabs-active-link-hover-bg;
border: 1px solid $nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;
}
}
Related
I am working on Tables using antD. By default, whenever you hover a Table Row in antD it gets a slight gray color transition as a highlight. I wish to change the color. I did this using less:
.ant-table-row {
&:hover {
background-color: blue;
}
}
(NOTE: the actual color doesn't matter. it's just an example)
Whenever hovering the Row, it becomes Blue, as set, for a slight second and then becomes light gray again...
Checking the element CSS, via chrome tools, there is NO other :hover CSS for that object other than the blue color I added. Yet for some reason, this doesn't work...
In addition, tried using rowClassName to give a custom class and using it with the &:hover with the same results.
Here's a gif that shows the issue in action
Also a working example (online): https://codesandbox.io/s/bold-cache-w22lg?file=/src/App.js
replace with the following:
.ant-table-row:hover td{
background-color: blue!important;
}
Here two think
put your custom style file below all style file
add !important link below
.ant-table-row { &:hover { background-color: blue !important ; } }
I have read this document https://www.tiny.cloud/docs/advanced/creating-custom-notifications/ but i have not found where i can change the text color, icon color, background color. Currently the background and text are so light that users cannot read anything in the notification box, so i need to make some changes. But i have not been successfull.
First I added this code to my site css. (it is what i see in the console)
.tox .tox-notification--info {
background-color: #d2cbcb; /* off white */
border-color: #000000;
color: #000000;
}
.tox .tox-notification--info p {
color: #000000;
}
.tox .tox-notification--info svg {
fill: #000000;
}
And no effect even after hard cache clear. Then i put that same code in a custom css file and used the tinymce content_css: like so
content_css: 'sbc_custom.css',
if found the file but still no change. I can change the values in the console only. How do i get the css to work? (i am using TinyMCE version 5)
The proper way is to build a custom skin either by building it yourself as outlined in the docs, or use the TinyMCE 5 skin tool. The TinyMCE styles are written in LESS and you basically modify variables to customize the look and feel of TinyMCE. To style the notifications, the following variables are available to you.
If you're using the skin tool, switch to the advanced mode and copy & paste the following into #notification-warn-background-color: red; at the end of the existing variables which should turn the yellow notification red in the preview.
I try to build an application that can be themed completely at runtime. Therefore i want to set global settings like font-size, color, background-color etc. on my root app.component. For now i do it with predefined CSS classes:
// CSS
.font-size-16::ng-deep { font-size: 16px; }
// TS
fontSizeClass = 'font-size-16'
// HTML
<div [ngClass]="fontSizeClass"></div>
Changing the fontSizeClass string to another class works for deep styling my application. But this solution is not dynamic at all. What i actually want is to set the font-size via [ngStyle] but keep the ng::deep functionality, too.
Is that possible?
And are there reasons to not implement theming completely with JavaScript and Redux?
Thanks in advance!
Try this
using angular material radio button
if you want to make the border of the radio buttons => transparent
in HTML:
[ngClass]="{'**transparentBorder**': "--Here yours condition---"}"
in css:
a. you add the transparentBorder (that we used in HTML) to:
b. add ::ng-deep at the beginning of the CSS
c. in the Chrome Dev Tools finds all the classes that the Angular material used
in this case, there are 2 option: 1. if the radio button is checked, 2. is unchecked
result:
this is the classes when the radio button is checked
we need to add our class transparent-border to angular material classes.
::ng-deep .mat-radio-button.**transparentBorder**.mat-primary.mat-radio-checked .mat-radio-outer-circle {
border-color: transparent;
}
this is the classes when the radio button is unchecked
::ng-deep .mat-radio-button.**transparentBorder**.mat-primary .mat-radio-outer-circle { border-color: transparent; }
good luck
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
I have added the following lines to bootstrap/less/panels.less
//hover color for panel heading
.panel-heading:hover {
background-color: #dfdfdf;
}
But it wouldn't load to the css in the browser. yet I can manually add it in the css editor (in chrome dev tools) and it works.
Any solutions ?
If it works in chrome dev tools and in css file not, that means it is overwritten from other rule. You can overwrite the rule by increasing the specificity (e.g. concatenate another class name or some other selector), or, to be sure, use "!important":
.panel-heading:hover {
background-color: #dfdfdf !important;
}