- 7 days for bootstrap-datetime-picker
A Pen by iModDesign on CodePen.
| Steps to reproduce: | |
| 1. npx create-react-app my-app | |
| 2. yarn add --dev tailwindcss autoprefixer postcss-cli @fullhuman/postcss-purgecss | |
| 3. ./node_modules/.bin/tailwind init tailwind.js | |
| 4. touch tailwind.css | |
| 5. touch postcss.config.js | |
| 6. modify start script in package.json: "node scripts/start.js && postcss ./tailwind.css -o src/App.css -w", | |
| 7. modify build script in package.json: "node scripts/build.js && postcss ./tailwind.css -o src/App.css" |
| var gulp = require('gulp'), | |
| sass = require('gulp-sass'), | |
| rename = require('gulp-rename'), | |
| cssmin = require('gulp-cssnano'), | |
| prefix = require('gulp-autoprefixer'), | |
| plumber = require('gulp-plumber'), | |
| notify = require('gulp-notify'), | |
| sassLint = require('gulp-sass-lint'), | |
| sourcemaps = require('gulp-sourcemaps'); | |
| // Temporary solution until gulp 4 |
| 'use strict'; | |
| import React from 'react'; | |
| import { | |
| StyleSheet, | |
| Text, | |
| View, | |
| Animated, | |
| Easing | |
| } from 'react-native'; |
| <button class="btn btn-primary" type="button">Button</button> |
| // ---- | |
| // libsass (v3.3.2) | |
| // ---- | |
| $spacer: 1rem; | |
| $spacer-x: $spacer; | |
| $spacer-y: $spacer; | |
| $spacers: (); |
| // ---- | |
| // libsass (v3.3.2) | |
| // ---- | |
| /* | |
| Convert Rem to Pixel | |
| http://www.stubbornella.org/content/2013/07/01/easy-peasy-rem-conversion-with-sass/ | |
| */ | |
| // Function | |
| @function RemToPx($size) { |
| %ul.rating | |
| - (1..5).each do |i| | |
| %li(class="star-#{i}") | |
| %input(type="radio" id="rating-star-#{i}" name="rating" value="#{i}") | |
| %label(for="rating-star-#{i}") #{i} stars | |
| %ul.rating2 | |
| - (1..8).each do |i| | |
| %li(class="star-#{i}") | |
| %input(type="radio" id="rating2-star-#{i}" name="rating-2" value="#{i}") |
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| %float-left { | |
| float: left; | |
| } | |
| @for $i from 1 through 12 { | |
| .col-xlg-#{$i} { | |
| width: 100% / 12 * $i; |
A Pen by iModDesign on CodePen.
A Pen by iModDesign on CodePen.