search

frandiox / OnsenUI-Meteor-ToDo

Combining Onsen UI, React and Meteor
10 stars 1 forks source link

Switching from .css to .styl renders differently on iOS #1

Closed jasonnathan closed 8 years ago

jasonnathan commented 8 years ago

This is the screenshot of the repository defaults css imports in main.jsx.

image

Perfect. Here's what happens when I swap it out with blue-theme.styl.

screen shot 2016-08-31 at 3 23 22 pm

I think there are some styles missing in the stylus files, the toolbar is missing. I manually copied toolbar styles into my CSS, but that in turn leaves the "pending tasks" portion invisible.

I have tested on iPhone 4s simulator and an iPhone 6 device.

frandiox commented 8 years ago

@jasonnathan Hi! Sorry for the late reply. onsen-css-components.css is actually generated from the stylus files, so I doubt that there is an issue there. You need to import the stylus files and also onsenui.css file (that's not in the stylus). And of course it needs a stylus processor, but I guess you already have that.

For example, in Monaca CLI templates for React and Angular 2 we do it like this:

...
import React from 'react';
import ReactDOM from 'react-dom';
...

require('onsenui/stylus/blue-basic-theme.styl');
require('onsenui/css/onsenui.css');
jasonnathan commented 8 years ago

Hey @frankdiox, I figured that bit out on my own :) However, considering the styles seem to be in their self-contained folders ie {stylus,css}, it seems counter-intuitive to depend on a css file when you decided to go stylus..

Just my ten cents. Thanks for the repo, learnt a whole bunch about Onsen through it.