all. I'm new to Vuetify. Vuetify has its default font-weight for 500 and 700; but I want to use font-weight: 600; So, this means I need to define a custom style in Vuetify. Is there any method I can achieve it? Thanks in advance!
Yeah, you have to create own global class. You also have to be sure you import a font with font-weight 600. See here how to import fonts: Change default font in vuetify
Related
I'm running into a problem where I can't style the default footer in v-data-table. For some reason, the pagination buttons are appearing white when enabled, and light gray when they are disabled (pagination is disabled). I've already double checked to make sure its not a theme issue.
My question is: how can I change the color of the default pagination icons in v-data-table? And more broadly, what is a way to find the class names of the vuetify elements so that I can avoid asking these types of questions in the future.
Thanks.
Here's a couple screen shots in case my description was clear enough.
Per Varun's request, here is one of my declarations for a v-data-table.
<v-data-table
:headers="headers"
:items="tickets"
item-key="ticketId"
class="red--text"
></v-data-table>
Result:
The recommendation of using the text-coloring class didn't work as it just turn all of the text in the table to red, but didn't change the icons. Is there any way to edit the CSS of the icons directly?
can you share the code please ?
Usually the color of the default pagination icons in v-data-table are black when enabled and grey while disabled.
you can use class="<color>--text" to change the text and enabled icon color to your preference
After digging through the CSS file in Vuetify and finding the class name of several of the v-data-table components, I found this solution to work.
Inside the style tag in my component:
#table > .v-data-footer .v-icon {
color: black;
}
Small note: without the !important keyword, this styles only the enabled icons in the footer (i.e. if you can go to the next page or not). If you want to style both, just add the keyword and your good to go.
The default styling of FilePond elements imported from the default css seems a bit small. Is there a recommended way to get to the size as seen in the examples at https://pqina.nl/filepond/?
It seems the default style in the css uses font-size of 10px.
By default the font-size of the FilePond root element is set to 1rem.
You can scale it up or down by setting a different size.
.filepond--root { font-size: 1.25rem; }
Use em instead of rem if you want to scale FilePond relatively to its parent element.
I'm just coming across this.
if you using Filepond in a nextjs project and you're finding it difficult to apply a font-size to your Filepond component. simply add the default Filepond css to your global.css style and customize it.
for example ///global.css
.filepond--root{font-size: 10px;}
It's bootstrap 4-beta in SASS.
The question is how I can use the bootstrap color variable in my SASS application? What I have done to do this is:
color: $theme-colors(primary);
but this doesn't work and throws an error.
any help is appreciated.
Thank you
You should use this: color: theme-color("primary");
Theme colors isn't a variable, it is a function, that's why you shouldn't use $ before it.
Just use...
color: $primary;
Bootstrap assigns values to the color values before adding them to the theme-colors so they're all available in the variables.scss.
Also see: How to change the bootstrap primary color?
Can I enlarge the font of c3js charts, such as in axis labels, data labels or categories? I'm interested in setting the general-case font to a larger one.
I searched the docs and couldn't find anything that related to "font" in any way.
Use the following two classes.
.c3-axis-y text
{
font-size: 15px; //change the size of the fonts
}
.c3-axis-x text
{
font-size: 15px; //change the size of the fonts
}
For a y axis on the right hand side use - .c3-axis-y2 text
C3 give some classes for each element when generating. So, you can change the style of the elements by using those classes with CSS.
Example:
1. Line style
The lines have c3-line-[id] class, so this class can be used to define the style in css.
A Web Inspector would be useful to check classes.
In your case labels are:
c3-legend-item-event
tick
....
From C3js documentation: http://c3js.org/gettingstarted.html
I had to search around a bit as well and read the c3.css file to get a good understanding of how to change the default look.
Off the top of my head here is some classes you may want to change the layout of, just make sure to include your own CSS file after c3.css to override it.
.c3-legend-item
.c3-tooltip th
.c3-tooltip td
The CodePen below includes most of other CSS classes you'll need to customize your C3 chart to your liking. I'ts a bar chart/line chart hybrid but tested on pie and donut charts so the classes are the same.
C3.js Chart: CodePen
Just put
table.c3-tooltip{
font-size:150px;
} here
change your font size accordingly
You mentioned data labels size as well (not only axis labels) so the font size of the text that shows the result on the top of a bar chart for instance.
This is called "c3-chart-text" in c3 library.
https://c3js.org/reference.html#class-c3-chart-text
I added this to the css file and it solved:
.c3-chart-text text
{
font-size: 18px; //change the size of the fonts
}
If you want to automate this behavior then:
clone the git: repo git clone https://github.com/mrjoh3/c3.git
add the formatting ".c3-chart-text text{font-size: 16px}" to the css files:
..c3/inst/htmlwidgets/lib/c3-0.6.1/c3.min.css
..c3/inst/htmlwidgets/lib/c3-0.6.7/c3.min.css
then reinstall the package from this folder: install.packages("../c3", repos = NULL, type = "source")
Initially bring all text tags using jquery selector easily
$('text').each(function(){
$(this).attr("font-size", "14"); //
$(this).attr("font-weight", "bold");
$(this).attr("font-family", "Arial, Helvetica, sans-serif");
});
it is more efficiant than write styles while you are going to do export chart as image.
Thanks
I have used this code for gauge graph and it worked.
#graphId svg text { font: bold 15px Arial !important; }
I'd like to store the current value of a property for later use. It's already been solved for jQuery.
The issue is that I'm using a #mixin to apply a CSS hack in several places (Justified Block List) and I'd like to restore the font-size property in .block-list * (currently all text in sub-elements is just collapsed).
Unsatisfactory workarounds:
Save the global default font size in a separate file and pass it to the #mixin on #import. This is of course in the general case not the same font size as the objects which the mixin is applied to.
Save the font size whenever you change it, and pass that. This tangles up the files involved, since it's not very elegant to #include the typography stylesheet in several otherwise unrelated files.
Use more jQuery.
Possibly satisfactory workarounds:
Override the font size with a stronger rule on the first ancestor which changes it. This could be tricky to determine.
There's no way to tell the computed value of a property until the styles are actually applied to a document (that's what jQuery examines). In the stylesheet languages, there's no "current" value except the initial value or the value you specify.
Save the font size whenever you change it, and pass that seems best, and #BeauSmith has given a good example. This variant lets you pass a size or fallback to a defined global:
=block-list($font-size: $base-font-size)
font-size: 0
> li
font-size: $font-size
If you have a mixin which is doing something "hacky" with the font size, then you will probably need to reset the font size as you have noticed. I suggest the following:
Create a Sass partial to record your projects config variables. I suggest _config.sass.
Define your base font-size in _config.sass:
$base-font-size: 16px
Add #import _config.sass at the top of your main sass file(s).
Update the mixin to reset the font-size to your $base-font-size:
#mixin foo
nav
font-size: 0 // this is the hacky part
> li
font-size: $base-font-size // reset font-size
Note: If you are using the SCSS syntax, you'll need to update the examples here.