diff --git a/docs/style.css b/docs/style.css index 8ac913e..b7cae6a 100755 --- a/docs/style.css +++ b/docs/style.css @@ -13,12 +13,14 @@ html { .version-select__snippet h3 { margin: 1rem 2.5rem 1rem 0; } + /* Make the ✔ / ❌ Emoji appear next to the button */ .version-select__snippet__btn { position: relative; margin: 0 2px 0 auto; overflow: visible; } + .version-select__snippet__btn span { position: absolute; left: -2rem; @@ -29,19 +31,23 @@ html { .version-select__options > label { white-space: pre; } + .version-select__options > label:not(:last-of-type) { margin-right: 1rem; } + .version-select__options__additional, .version-select__options__additional > *:not(summary) { display: block; margin: 1rem 0; } + .version-select__options__additional summary { outline: none; cursor: pointer; font-weight: 600; } + .version-select__options__additional summary:hover span, .version-select__options__additional summary:focus span { text-decoration: underline; @@ -50,6 +56,7 @@ html { .version-select__info caption { text-align: left; } + .version-select__info th { border: none; vertical-align: top; @@ -69,22 +76,40 @@ body > footer { align-items: center; justify-content: space-between; } + .emoji { /* Use proper Emoji instead of plain Unicode chars */ - font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, - Helvetica Neue, sans-serif; + font-family: + 'Segoe UI Emoji', + 'Apple Color Emoji', + 'Noto Color Emoji', + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, + sans-serif; } + .opacity-4 { opacity: 0.4; } + .opacity-7 { opacity: 0.76; } + .tooltip { position: relative; cursor: help; } + .tooltip::after { content: ''; position: absolute; @@ -100,13 +125,16 @@ body > footer { .v-leave-to { transform: scale(0) !important; } + .v-enter-active, .v-leave-active { transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } + [v-cloak] > * { display: none; } + [v-cloak]::after { content: 'Version picker is loading...'; } diff --git a/gulpfile.js b/gulpfile.js index 80104f1..dde5df2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -53,11 +53,6 @@ const formatByteMessage = (source, data) => { } const style = () => { - // const isLegacy = (path) => /legacy/.test(path) - - // const excludeModern = filter(file => isLegacy(file.path), { restore: true }) - // const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true }) - // Don't inline minified versions, so builds can lazily import them at runtime const cssImportOptions = { filter: (path) => !/\.min/.test(path) } @@ -99,73 +94,6 @@ const style = () => { .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' })) .pipe(browserSync.stream()) ) - - // return gulp.parallel( - // gulp.src(paths.styles.src) - // .pipe(sourcemaps.init()) - // ) - - return ( - gulp - .src(paths.styles.src) - // Add sourcemaps - .pipe(sourcemaps.init()) - // Resolve imports, calculated colors and inlined SVG files - .pipe(postcss([postcssImport(cssImportOptions), postcssColorModFunction(), postcssInlineSvg()])) - - // * Process legacy builds * - .pipe(excludeModern) - // Inline variable values so CSS works in legacy browsers - .pipe(postcss([postcssCssVariables()])) - // Calculate size before autoprefixing - .pipe(bytediff.start()) - // autoprefix - .pipe(postcss([autoprefixer({ - env: 'legacy' - })])) - // Write the amount gained by autoprefixing - .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) - .pipe(excludeModern.restore) - - // * Process modern builds * - .pipe(excludeLegacy) - // Calculate size before autoprefixing - .pipe(bytediff.start()) - // autoprefix modern builds - .pipe(postcss([autoprefixer({ - env: 'modern' - })])) - // Write the amount gained by autoprefixing - .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data))) - .pipe(excludeLegacy.restore) - - // Write the sourcemaps after making pre-minified changes - .pipe(sourcemaps.write('.')) - // Flatten output so files end up in dist/*, not dist/builds/* - .pipe(flatten()) - // Write pre-minified styles - .pipe(gulp.dest(paths.styles.dest)) - // Remove sourcemaps from the pipeline, only keep css - .pipe(filter('**/*.css')) - // Calculate size before minifying - .pipe(bytediff.start()) - // Minify using cssnano, use extra-low precision while minifying inline SVGs - .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) - // Write the amount saved by minifying - .pipe(bytediff.stop((data) => formatByteMessage('cssnano', data))) - // Rename the files have the .min suffix - .pipe(rename({ suffix: '.min' })) - // Write the sourcemaps after making all changes - .pipe(sourcemaps.write('.')) - // Write the minified files - .pipe(gulp.dest(paths.styles.dest)) - // Output files to docs directory so documentation site can use them - .pipe(gulp.dest(paths.docs.dest + '/water.css')) - // Final size report including gzipped sizes - .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' })) - // Stream any changes to browserSync - .pipe(browserSync.stream()) - ) } const docs = () => { diff --git a/package.json b/package.json index e4b7bcb..e0bbfa7 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "gulp build", "dev": "gulp watch", "lint:js": "eslint **/*.js **/*.html gulpfile.js --fix", - "lint:css": "stylelint src/**/*.css --fix", + "lint:css": "stylelint src/**/*.css docs/style.css --fix", "lint": "yarn lint:js && yarn lint:css" }, "repository": {