Currently I'm building a template that will be used by multiple people on different projects. So making this work instantly without changing things per project install is crutial.
For this instance I want to change the $spacer variable that is used for all the margings and paddings classes that Bootstrap offers. But I cant seem to figure out how to change the $spacer variable outside of the /node_modules. I have an own _variables.scss that creates variables for the theme but an !important or anything else wont work eventhough the custom _variables.scss is loaded later that the bootstrap from the node modules.
Is there a way to send a scss file to the node_modules file so it changes the variables from within? or is there a different way to overwrite a variable from the node modules?
I always work like this and no problem:
// File: my-bootstrap-and-styles.scss
// your overrides
$primary : #FEBC35;
// include bootstrap.scss
#import "../node_modules/bootstrap/scss/bootstrap";
// Then add your additional custom code here
.my-primary-div {
background: $primary;
border: 1px solid black;
}
// also don't forget to take advantage
// of bootstrap's variables and mixins
#include media-breakpoint-down(md) {
.my-class {
overflow-y: auto;
}
}
Related
I am trying to apply CSS to Vaadin 8 component. I have followed this example and still unable to apply CSS. I understand that i can call the addStyleName method and i am able to apply the build in ValoTheme styles (for example ValoTheme.PANEL_BORDERLESS does make a button smaller), but my custom styles are ignored. I have tried defining my custom CSS rules in the following files:
/src/Main/webapp/VAADIN/themes/apptheme/styles.css
#import "../reindeer/styles.css";
.mystyle {
color: red;
background: #012345;
background-color: #012345;
}
Then in Java i create a button:
Button btn = new Button(" Test ");
btn.addStyleName("mystyle");
My custom style does not get applied to the button. I suspect that i am not defining CSS correctly. Please share your knowledge of how to do this correctly in Vaadin 8.
This is not related, but are you actually using a reindeer theme?
Otherwise, you should put you styles in your own theme file (the default one generated from an archetype is mytheme.scss)
It's suggested to leave styles.scss as it is. Also, it's mentioned in comments section of the file:
This file prefixes all rules with the theme name to avoid causing conflicts with other themes. The actual styles should be defined in mytheme.scss
If you want, you could add your styles there as well under
.mytheme {
#include addons;
#include mytheme;
.testStyle{
color: red;
background: #012345;
background-color: #012345;
}
}
While it works, I will still suggest to add them to your custom scss file (Based on your folder name it is apptheme.scss)
Mine mytheme.scss looks like this:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
.testStyle{
color: red;
background: #012345;
background-color: #012345;
}
}
After styles are applied, button looks like this:
Style files are located under webapp/VAADIN/themes/mytheme
In Bootstrap 4 there is a Sass varaible called $enable-rounded which
"Enables predefined border-radius styles on various components."
(https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options)
I have a requirement to remove the rounded corners on the Breadcrumb component, but I don't want to remove it from any other components. Therefore I can't use $enable-rounded to do what I need.
However, I don't know what the optimal way to do this is.
The Sass for _breadcrumb.scss contains this:
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
list-style: none;
background-color: $breadcrumb-bg;
#include border-radius($border-radius);
}
How do I override #include border-radius($border-radius); without modifying _breadcrumb.scss?
All of the CSS for my app is condensed into 1 file (app.css) which is built from a Sass file (app.scss) which first includes the relevant Bootstrap 4 Sass files. So I could do something like this:
// app.scss
#import breadcrumb;
#import // other_bootstrap_sass_files
// CSS specific to my app
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Is there a smarter way to do this with Sass for Bootstrap 4?
I think that for your specific case where you want only breadcrumbs without border-radius and all other components still have it, your only solution is doing like you mentioned in your question:
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Personally I dont't see any other solution, only because you don't want to edit the original _breadcrumb.scss
If you look at the _variables.scss file, you can see all the variables that are set with !default - think of this as a preferences file. When the SCSS is compiled, your new values are swapped for the default values without having to overwrite the CSS.
Seems like $breadcrumb-border-radius: $border-radius !default; is what you want.
Two ways of resetting that value:
1) Make a copy of the _variables.scss file and place it in your project directory (I like changing the name to, say, _myvariables.scss ), look for that variable, remove the !default and change it to $breadcrumb-border-radius: 0;
OR
2) Make a file, say _myvariables.scss, that contains $breadcrumb-border-radius: 0; (and any other default values you want to change later on).
Next, import that new file BEFORE your bootstrap scss. In your example that would be your app.scss file:
// app.scss
#import myvariables.scss; //no underscore because it's a partial
#import // other_bootstrap_sass_files including the breadcrumb component
Now, when the SCSS is compiled, the breadcrumb radius will be set to 0 without changing anything else or overwriting css.
I am trying to make a toggle between night mode and day mode only by changing colors. I have some base color variables inside my _colors.scss, and they are used all over my site. I use React to toggle a className between 'night-mode' and 'day-mode' at the first div of the project.
I have tried to wrap the variables in the mentioned class names, but the result is that no other files can access the variables. Therefore I was hoping for a solution where I can use a night-mode file and a day-time file and toggle between them.
As I see it now, the issue is that I can't wrap the $variables or the #import in a class name, which makes it difficult to know what mode is selected. I am looking for a solution that does not include jQuery (I have a variable globally stored that can be used for javascript reference if that ends up to be the best solution).
You can't toggle scss files at runtime, since they are already compiled to css.
I would go with CSS custom properties (sometimes called CSS variables) instead of pure Sass variables.
Example:
:root {
--background: lightblue;
}
.night-mode {
--background: darkblue;
}
.component {
background-color: var(--background);
}
Toggle the class .night-mode on with javascript depending on the time of day.
You may of course feed your CSS custom properties from Sass variables in your scss files:
$bg-day: lightblue;
$bg-night: darkblue;
:root {
--background: $bg-day;
}
.night-mode {
-- background: $bg-night;
}
.component {
background-color: var(--background);
}
I would like to change default styling for hover buttons (Bootstrap v3.2). By default it's becoming darker. Let's assume I would like to make it lighter.
I looked at Buttons Less variables but I don't see button hover styling option.
In SASS I can do:
#import "packages/stylesheets/bootstrap/bootstrap";
.btn {
&:hover {
background: yellow;
}
}
but it changes all button background to defined color (in this case yellow).
Is it possible to do it for all buttons?
The only solution I found id to do it this for each type of button this way but I hope it can be done for all buttons a bit simpler:
#import "packages/stylesheets/bootstrap/bootstrap";
.btn-primary {
&:hover {
background: lighten($btn-primary-bg, 5%);
}
}
.btn-success {
&:hover {
background: lighten($btn-success-bg, 5%);
}
}
While Marcin's solution will work, as he mentioned it is not very elegant as you will modify bootstrap's source code and you will loose all the edits once you update the base of bs.
What you need to do, in order to properly customize the button hover is, define a new file called for example "_buttons.scss" and include it in your main bootstrap/main file you are using (usually a file that include the base boostrap + the customized parts):
// Base bootstrap 3
#import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
#import "_buttons.scss"
This way you are overriding default styles in order to have your look and feel of default bootstrap elements, and keeping base bootstrap file intact so you can update it without a fear you will overwrite your changes with next update.
And now, your part:
in the _buttons.scss define your hovers like you mentioned:
// My custom variation for btn-primary
.btn-primary {
&:hover {
background: lighten($btn-primary-bg, 5%);
}
}
If you want to do that on global level, just simply update the mixins that are in charge for buttons output in the override file, so that would be (if you follow your Bootstrap's default namespace, in your custom styles folder for example: myproject/assets/scss/mixins/_buttons.scss)
// My custom mixin for button-variant override file
// I only include the part i want to customize
// In this case, i want to customize background-color
#mixin button-variant($color, $background, $border) {
&:hover {
background-color: darken($background, 40%);
}
}
.. and include it into your main file
// Base bootstrap 3
#import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
#import "_buttons.scss"
#import "mixins/_buttons.scss"
This way you are:
1) Able to update bootstrap base once the update is up
2) Able to keep your custom buttons styles in one file, if you decide to update it later, you can find it easily
3) Able to use same bootstrap base for different projects (if needed)
Hope it helps
Cheers
M.
The solution I found is not very elegant (you need to modify bootstrap file) but it works.
You need to go to mixins/_buttons.scss file and then change:
background-color: darken($background, 10%);
into
background-color: lighten($background, 10%);
It should do the job for all buttons.
I was wondering if anyone had found a way to create different CSS files from the same less files.
In my context I created a different customer less file. This file consist in a series of variable with their settings for the theme of a specific color and other CSS instruction.
I also have a less file for the default settings.
Here a representation of the less folder
Less Folder
My less folder
All the style specific to my context
customer.default.less
cutomer.less
I would like to compile two different css from the "My less folder" the first one would use the customer.default.less file in the variables. The second one would use the customer.less file. Creating the customer.default.css and the customer.css. In order of having the customer.css and the customer.default.css all way in synch together.
I'm currently using the compiler plugin in webstorm. Am I using the right tool?
Thanks
You can indeed produce multiple CSS outputs from a Less file, provided you use 'control' Less files.
E.g., here is the main stylesheet we're using for a site:
/* main-stylesheet.less */
#maincolor: #ff0000;
#secondarycolor: #00ff00;
body {
color: #maincolor;
background-color: #secondarycolor;
}
Now, we want to produce a secondary stylesheet (to output 'customer.default.css', or 'customer.css' as you prefer) - we import the main Less and override its variables:
/* secondary-stylesheet.less */
#import "main-stylesheet";
// Override variables from the 'main' stylesheet.
#maincolor: #0000ff;
Note that we do not define any rules or set any styles here, only override the variables.
Here are the output CSS files:
/* main */
body {
color: #ff0000;
background-color: #00ff00;
}
/* secondary */
body {
color: #0000ff;
background-color: #00ff00;
}
This is possible because Less uses lazy loading.
Be sure that the file watcher setting 'Track only root files' is disabled; otherwise the main stylesheet in our example would not produce any output css.
(Also, I would separate the two variable declaration blocks into their own Less files - perhaps as theme-variables-default.less and theme-variables-override-a.less)
I think you can accomplish this using the grunt-contrib-less GruntJS task with something like this in your Gruntfile.
less: {
development: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
},
production: {
files: {
"path/to/customer.css": "path/to/customer.less"
"path/to/customer.default.css": "path/to/customer.default.less"
}
}
}
LESS isn't my bread-and-butter, but using Sass enough and the grunt-contrib-sass task I assume the same set of features would exist.