I found I can use this css link:
https://unpkg.com/#blueprintjs/core#^1.11.0/dist/blueprint.css for blueprint. Where do I get the CSS for the datetime module from?
It looks like this at the moment:
You must import the correct styles for DateRangeInput
#import "~normalize.css/normalize.css";
#import "~#blueprintjs/icons/lib/css/blueprint-icons.css";
#import "~#blueprintjs/core/lib/css/blueprint.css";
#import "~#blueprintjs/datetime/lib/css/blueprint-datetime.css";
i have already these
#import "~normalize.css";
#import "~#blueprintjs/core/lib/css/blueprint.css";
#import "~#blueprintjs/icons/lib/css/blueprint-icons.css";
added these css
#import "~#blueprintjs/datetime/lib/css/blueprint-datetime.css";
date picker working as well
Related
This have been asked several times but I can't seem to get an updated answer.
I've been trying to load a fontawesome icon in my .scss and I specifically followed this instruction https://fontawesome.com/how-to-use/on-the-web/using-with/sass but I'm still just getting squares.
Here are my codes
_fontawesome.scss
#import './scss/fontawesome.scss';
#import './scss/solid.scss';
.user {
#extend %fa-icon;
#extend .fas;
&:before {
content: fa-content($fa-var-user);
}
}
index.js
<span className="user" />
_variables.scss
$fa-font-path: "../webfonts" !default;
My directory
public/
fontawesome/
scss/
webfonts/
_fontawesome.scss
If it helps, I'm using this for react and I can perfectly use FontAwesome as a component using npm, but I have this case where I need to use it in the scss.
Please help! Thank you!
how you don't use the font awesome CDN ? it's works perfectly for me.
And it would keep you from getting bored with it :(
something like that to your and it's works:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
I'll take a closer look at your problem, but tomorrow because it's to late :p
The #import "reset.css" in Stylus .stylfile would generate #import "reset.css" entry in CSS.
Is there a way to make Stylus to instead include the content of the included CSS file?
Yes you can specify this in the options param of the stylus.render function, like
stylus.render(inputString, {'include css': true}, cb)
I am trying to create a custom theme by changing the default colors on carbon.
I have imported the carbon components scss files and I set the variable $carbon-theme as recommended but it is not working. I have imported them in my main index.scss file. I would eventually like to change the color variables and create a customized theme.
This is my index.scss file
#import 'carbon-components/scss/globals/scss/styles.scss';
#import '#carbon/themes/scss/themes';
#include carbon--theme($carbon--theme--g100);
body {
background-color: $ui-02;
}
This is the mixin I am trying to create.
#mixin custom-color {
$focus: green;
}
The above does not work. The theme does not change to the expected dark gray background. How do I do this? Also, how would I create the mixin to set other colors?
#import '#carbon/themes/scss/themes';
// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
#include carbon--theme();
#import 'carbon-components/scss/globals/scss/styles.scss';
body {
background-color: $ui-02;
}
And not put it into index.scss, put it into App.scss and import it in App.js
works for me, hope this work.
I'm styling a MERN project and I'd like to change the default font that Reactstrap (https://reactstrap.github.io/) uses for my React frontend. I've found some answers for changing the default Bootstrap 4 fonts, but I'm not sure how (or if) to apply those to Reactstrap -- any help or leads much appreciated!
You can import a css file in the entry file of the application. The css file can contain #import tags to load your custom font. Then you can set the font-family in the body selector tag.
# In entry file
import '/assets/css/mycssfile.css';
# In mycssfiles.css
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans', sans-serif;
}
I am trying to change theme in my project with the following code in the app.scss file
It seems that if I just have the first set of two #imports, the $base-color: green does not take effect. If I have just the second set of #imports, it looks fine.
If I have both the set of #imports, there appears to be a hybrid theme in some way between cupertino and the default, but in green. I don't understand why the second one won't supercede the first one
$base-color: green;
#import 'sencha-touch/cupertino-classic';
#import 'sencha-touch/cupertino-classic/all';
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
// Custom code goes here..