What packages do I need when using materialized sass source in a meteor project?
I am using meteor materialization. I am using the command meteor add materialize:materialize
to install. This works, but I would like to be able to edit the sass files before compiling them to css files (so I can change things like base color and what not). So far I've achieved this: downloaded the sass source files from http://materializecss.com/getting-started.html#download and copied them to the client folder. I also added the scss compiler meteor add fourseven:scss
. Even after all this on a new meteor project, something is perfectly valid, I'm wondering if I'm missing a materialization key package to work with? I believe I am probably just missing a package or library for some functionality.
Problems so far after using the settings below: (there will likely be more problems)
Problem 1: the wave effect does not disappear - after pressing the button, a wave appears, but after that the transparency effect is not cleared.
Problem 2: Items disappear on form submission. After submitting the form, the form input fields disappear and the rest of the buttons on the page disappear.
Problem 3: Unable to use materialization icons. When using an icon from materialization, it doesn't show up or use another one. If you're wondering what the icons look like, check here: http://materializecss.com/icons.html
Setting:
$ meteor create test
$ cd test
$ rm test.html test.css test.js
$ meteor add fourseven:scss
$ mkdir client
copied materialize-src into test/client/
created client/main.html
main.html:
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<nav class="blue darken-3">
<div class="nav-wrapper">
<a href="#" class="brand-logo center">
Logo
</a>
<!-- EXAMPLE ICONS (in navbar) -->
<ul class="right">
<li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="Map"><i class="mdi-social-public"></i></a></li>
<li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="List"><i class="mdi-action-view-list"></i></a></li>
<li><a href="#" class="tooltipped" data-position="left" data-delay="1000" data-tooltip="Logout"><i class="mdi-content-clear"></i></a></li>
</ul>
</div>
</nav>
<!-- EXAMPLE FORM -->
<form>
<div class="row">
<div class="input-field">
<input id="email" type="email">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input id="password" type="password">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<button class="btn-large col s12 blue darken-3 waves-effect waves-light" type="submit" name="">Log In</button>
</div>
</form>
<div class="row center-align">
<a class="btn-flat waves-effect waves-teal">Create Account</a>
</div>
<div class="row center-align">
<a class="btn-flat waves-effect waves-teal">Forgot Password</a>
</div>
</body>
Thanks for the help!
source to share
I'm having similar problems using sass source files with meteor.
There is a line of code in sokki's post that helped me fix the icons issue https://github.com/Dogfalo/materialize/issues/1018
There are two parts to fixing the problem.
-
In client / sass / components / _icons-material-design.scss file you need to replace
@each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons { .#{$mdi-prefix}#{$mdi-icon-name}:before { content: unicode($mdi-icon-value); } }
from
@each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons { .#{$mdi-prefix}#{$mdi-icon-name}:before { content: "\"" + $mdi-icon-value + "\""; } }
This should add blocks that your icons should be in, but the images won't be there.
-
Move the / font folder to your / public folder so you have / public / font / material -design-icons and / public / font / roboto
(I'm new to writing on SO, so sorry for any editing issues.)
source to share
There is a github related issue that you could join: https://github.com/Dogfalo/materialize/issues/1018
source to share