wikiki / bulma-pricingtable Goto Github PK

Hi,

I'm a bit confused about how to turn this into CSS?

Could you point me in the right direction?

I follow how to implement Bulma AND the extension to work with create-react-app.

I can modify, let's say, $info: #d81bbf; and I will have a <h1 className="title is-1 has-text-info">TEST</h1> with a kinda pink title.

But the priceTag I have set as is-info stay with the original blue.

Here the pricetag must be the same pink as the up title where you see blue.

Here my App.scss that I target to get complied as a css file with node-sass-chokidar:

// 1. Import the initial variables
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";
$info: #d81bbf;

@import "bulma/bulma";
@import "~bulma-pricingtable/dist/bulma-pricingtable.min.css";

And here the scripts part of my package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "dev": "npm-run-all -p watch-css start"
  },

If I try to @import "~bulma-pricingtable"; or thes .sass file I have an error. So I think it's a node-sass-chokidar configuration that fail my project.

Hello,

When I have 3 plan-items and view the page in a mobile view the first 2 will go side by side and the third one will be below and full size.

Is it possible to control which plan-item will be full sized? For example I want the first plan-item to be full size while the second and third will be below and next to each other.

Example:

When using version 1.0.0 of this extension with Webpack I was getting the following error:

      File to import not found or unreadable: initial-variables.sass.
      in /my/path/node_modules/bulma-pricingtable/dist/bulma-pricingtable.sass (line 3, column 1)

I then downgraded to version 0.1.10 and it worked.

The diff between the 2 versions for the dist sass file is:

diff --unified -r bulma-pricingtable-0.1.10/dist/bulma-pricingtable.sass bulma-pricingtable-1.0.0/dist/bulma-pricingtable.sass
--- bulma-pricingtable-0.1.10/dist/bulma-pricingtable.sass	2018-02-10 03:59:52.000000000 -0500
+++ bulma-pricingtable-1.0.0/dist/bulma-pricingtable.sass	2018-02-10 11:40:06.000000000 -0500
@@ -1,3 +1,12 @@
+@charset "utf-8"
+
+@import "initial-variables.sass"
+@import "functions.sass"
+@import "derived-variables.sass"
+@import "animations.sass"
+@import "mixins.sass"
+@import "controls.sass"
+
 $pricing-plan-border: .1rem solid $white-ter !default
 $pricing-plan-border-radius: $radius !default
 $pricing-plan-active-shadow: 0 8px 12px 0 rgba($grey, 0.2) !default

I take that those @import are broken, they have a path which will never work.

Ideally, the "Features" section would behave in the same way as the other pricing-plan sections (flow into separate columns the smaller the width"

The issue is reproducible on the docs page as well (https://wikiki.github.io/components/pricingtable/) by reducing the browser window width

Hello,

Having issues with using the extension in ReactJS. Looked at other similar issues but they don't point to any solution. I also have node-sass installed.

Here is my index.js file with the imports

import React from 'react'
import ReactDOM from 'react-dom'
import 'bulma/css/bulma.css'
import 'bulma-pricingtable/dist/css/bulma-pricingtable.sass'
import 'bulma-pricingtable/dist/css/bulma-pricingtable.min.css'
import './resources/css/style.css'
import App from './App'

ReactDOM.render(, document.getElementById('root'))

And here is what it complains about.

./node_modules/bulma-pricingtable/dist/css/bulma-pricingtable.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./node_modules/bulma-pricingtable/dist/css/bulma-pricingtable.sass)
To import Sass files, you first need to install node-sass.
Run npm install node-sass or yarn add node-sass inside your workspace.
Require stack:

• ....\cart-client\node_modules\sass-loader\lib\loader.js
  -....\cart-client\node_modules\loader-runner\lib\loadLoader.js
  -....\cart-client\node_modules\loader-runner\lib\LoaderRunner.js
• ....\cart-client\node_modules\webpack\lib\NormalModule.js
  -....\cart-client\node_modules\webpack\lib\NormalModuleFactory.js
• ....\cart-client\node_modules\webpack\lib\Compiler.js
• ....\cart-client\node_modules\webpack\lib\webpack.js
• ....\cart-client\node_modules\react-scripts\scripts\start.js

{ Error: node_modules/bulma-extensions/bulma-pricingtable/pricing-table.sass
Error: Undefined variable: "$button-shadow-inset".
        on line 98 of node_modules/bulma-extensions/bulma-pricingtable/pricing-table.sass
>>             box-shadow: $button-shadow-inset;
   ------------------------^

I installed through npm i bulma-extensions, but on gulp --production it gives above error.