I am working in the _variables.scss file and following your comments for set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
i have done this $em-base: $base-font-size;
and i am getting a compile error in codekit because of this
Error is: error style.scss (Line 192 of _global.scss: 7.68em*px/% isn't a valid CSS value.)
overwrite style.css
I'm doing all this because i want to have the correct grid size because I set my grid to 1320px & on the browser the row inspected says 990px
could you please help me.
You'll need to make sure that the value for $base-font-size is set to the value you want for you $em-base. Whatever you set for you em-base will be what calculates the width of things like the grid. So if you have a 16px $em-base, the em value for 82.5em for your row width.
Related
I'm trying to set the sm breakpoint so that it is >=500 as opposed to the default of 576
I don't use Sass or anything along those lines, so have just been trying to make the change directly into the CSS (I really miss the customiser that Boostrap 3 had)
I of course don't want to tamper with the Boostrap CSS file, but did see the breakpoint values in there. And so I added the following in the <head> section of my HTML
<style>
:root{
--breakpoint-xs:0;
--breakpoint-sm:500px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px
</style>
But it doesn't appear to be working, as I'm viewing it at 568px and not seeing any changes I've made
recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:
https://github.com/vuetifyjs/vuetify/issues/299
Which as its says, I added the following code:
<style lang="stylus">
#require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
primary: #009688
accent: #FFC107
secondary: #00796B
info: #B2DFDB
warning: $red.base
error: $red.base
success: $green.base
}
#require '../node_modules/vuetify/src/stylus/main.styl'
</style>
In App.vue
So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:
Before
After
So, my question is:
Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?
You can give icon size in px using size property in Vuetify icons.
<v-icon size="25">home</v-icon>
Or
you can use x-small, small, medium, large and x-large in v-icon tag
e.g.
<v-icon small>home</v-icon>
Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.
If you wanted to set a custom default size of your icons across your app you will need to target it will css.
To target icons size you can use the following:
.icon {
font-size: 20px;
}
If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon>
component has a size attribute which you can use to set an exact
size.
here is the sample inline css from v-icon
<v-icon style="font-size: 5px;">home</v-icon>
here is my sample pen
https://codepen.io/anon/pen/LdpgmY
I recommend just using an <i> tag and setting the icon classes yourself if you can. <v-icon> doesn't provide much advantage anyways and the v-icon class is the one that's setting a specific font-size when all you really want is font-size: inherit.
I'm not sure that the change of colors is giving you the issue with the change of icons size, but if you don't want to set the icon size each time, you can optionally pass in custom variables to overwrite the global defaults like this:
$icon-size: 20px;
You can find more information about this in the Vuetify Documentation
I've inherited an AngularJS project which uses the 3rd party grid, Ag-grid. There is an ag-grid-style.css file that has the following:
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 7) !important;
}
This works great for the grid already in use, the grid is nicely divided into 7 columns.
My problem is I have created new code, also using ag-grid, but I need the new grid divided into 6 columns, not 7. I end up with one extra empty column. Using Chrome for debugging and going into the developer tools, I can see the above CSS and if I change the 7 to a 6, my grid displays perfectly. My question is what is the easiest way to accomplish what I want? I've been trying to adjust the styling in code but haven't succeeded yet. Suggestions?
I would simply add the modified CSS to a CSS file that renders after all other third-party library CSS files. When you have an !important that happens after another !important, the second one overrides the first. So by adding the CSS to your website it should be fine.
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-
viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 6) !important;
}
#Adosi's answer is the preferred solution -- CSS after all refers to cascading style sheets. If, however, you cannot modify the load order of your styles, the following is an alternative solution.
You can override a rule defined in an external stylesheet that has a !important attribute by adding your own definition inline to the element itself. I have demonstrated here using the background-color property as it is more obvious.
#foo {
background-color: pink !important;
}
<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>
The inline style will always take precedence -- eg be loaded last -- so the color defined there is the one that is displayed.
Note that this is not considered a good practice, but I indicate it as an alternative if you are unable to load a CSS rule after your third party asset. (You may wish to log a bug with the 3rd party library because the !important annotation should be used sparingly and in this case probably not at all.)
I am using the zurb foundation v6. in my project, and I would like to set the width of the row to different value than it is set up by default, I have tried with setting up variable $grid-row-width in my _settings.scss:
$grid-row-width: 1400px;
But, that is not working, the row still has the width set to:
max-width: 75rem;
Change the $global-width: rem-calc(1200) to something equal to or wider than you want. The default is $grid-row-width: $global-width. I think you are attempting to make it wider than the allowable global-width.
It was the wrong order of importing files in my app.scss file, for some reason when I was importing settings.scss after including foundation-everything it didn't work, but after I imported settings file before the foundation-everything then the row had a width of 1400px.
#import "foundation";
#import "settings";
#import "motion-ui";
#include foundation-everything;
#import "top-bar";
#import "front-page";
#import "article";
I'm using Foundation. Where I make a form the input field are very high like 40px. I want to make the less height like around 26px. I looked in the css setting file but you can change a lot but not the height. When I add the css code below it works in Chorme, but in FireFox the bottom part of the texted is hidden.
input {
height: 26px;
}
Does anyone have a idee?
Simplest and brutest (most brutey?) way to do it is:
input {
height: 26px !important;
}
in your app.scss and compile your css.
However, there is a better way..
Check in the file at /bower_components/foundation/scss/foundation/components/_forms.scss and you'll see that the height of form elements is based on the font-size and form-spacing
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); // line 121
Which by default (in the same file) are:
$form-spacing: rem-calc(16) !default; // line 14
$input-font-size: rem-calc(14) !default; // line 26
These can be found and uncommented in your _settings.scss file (same directory as your app.scss) to be overriden there before compiling again. Test well because these are general settings that will have an effect on most (if not all) form elements.
On the plus side, in your _settings.scss file they are immune from updates to the framework files, and will give you more consistency in your site-wide styles.