This commit is contained in:
Fabio Franzini
parent
0d393f0658
commit
c0d18152cc
|
|
@ -0,0 +1,25 @@
|
||||||
|
# EditorConfig helps developers define and maintain consistent
|
||||||
|
# coding styles between different editors and IDEs
|
||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
|
||||||
|
[*]
|
||||||
|
|
||||||
|
# change these settings to your own preference
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# we recommend you to keep these unchanged
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[{package,bower}.json]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"version": "1.11.0",
|
||||||
|
"libraryName": "react-tailwindcss",
|
||||||
|
"libraryId": "62daa1f6-c9b4-4664-b101-37ccbddb47da",
|
||||||
|
"environment": "spo",
|
||||||
|
"packageManager": "npm",
|
||||||
|
"isCreatingSolution": true,
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"componentType": "webpart"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
---
|
||||||
|
page_type: sample
|
||||||
|
products:
|
||||||
|
- office-sp
|
||||||
|
languages:
|
||||||
|
- javascript
|
||||||
|
- typescript
|
||||||
|
extensions:
|
||||||
|
contentType: samples
|
||||||
|
technologies:
|
||||||
|
- SharePoint Framework
|
||||||
|
- TailWind CSS
|
||||||
|
platforms:
|
||||||
|
- React
|
||||||
|
createdDate: 10/17/2020 12:00:00 AM
|
||||||
|
---
|
||||||
|
|
||||||
|
# react-tailwindcss
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
This project shows how to integrate Tailwind CSS into a SPFx React project by:
|
||||||
|
- Create a custom Talwind CSS config file
|
||||||
|
- Create a custom Gulp Task to process the Tailwind CSS generated file and optimize it
|
||||||
|
- Using CSS custom properties to manage in Tailwind CSS Classes the Theme Variant into sections
|
||||||
|
- Avoid writing SASS but only use Tailwind CSS classes to style components
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
- [SharePoint Framework](https://aka.ms/spfx)
|
||||||
|
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
|
||||||
|
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- Basic knowledge of [Tailwind CSS](https://tailwindcss.com/)
|
||||||
|
- Basic knowledge of [GulpJs](https://gulpjs.com/)
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
react-tailwindcss | Fabio Franzini, [@franzinifabio](https://twitter.com/franzinifabio)
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.0|October 17, 2020|Initial release
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
|
||||||
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
|
- Clone this repository
|
||||||
|
- Ensure that you are at the solution folder
|
||||||
|
- in the command-line run:
|
||||||
|
- **npm install**
|
||||||
|
- **gulp serve**
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- [Getting started with Tailwind CSS](https://tailwindcss.com/)
|
||||||
|
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||||||
|
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||||||
|
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||||
|
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"hello-tailwind-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/HelloTailwindCss/HelloTailwindCssWebPart.js",
|
||||||
|
"manifest": "./src/webparts/HelloTailwindCss/HelloTailwindCssWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {},
|
||||||
|
"localizedResources": {
|
||||||
|
"HelloTailwindCssWebPartStrings": "lib/webparts/HelloTailwindCss/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "react-tailwindcss",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "react-tailwindcss-client-side-solution",
|
||||||
|
"id": "62daa1f6-c9b4-4664-b101-37ccbddb47da",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"developer": {
|
||||||
|
"name": "",
|
||||||
|
"websiteUrl": "",
|
||||||
|
"privacyUrl": "",
|
||||||
|
"termsOfUseUrl": "",
|
||||||
|
"mpnId": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/react-tailwindcss.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
|
||||||
|
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||||
|
|
||||||
|
// Step 1 + './src/tailwind.css' + './tailwind.config.js'
|
||||||
|
let tailwindBuild = build.subTask('build-tailwind', (gulp, buildOptions, done) => {
|
||||||
|
const postcss = require('gulp-postcss');
|
||||||
|
|
||||||
|
gulp.src(`${buildOptions.srcFolder}/tailwind.css`)
|
||||||
|
.pipe(postcss([
|
||||||
|
require('tailwindcss')('./tailwind.config.js'),
|
||||||
|
require('gulp-autoprefixer')
|
||||||
|
]))
|
||||||
|
.pipe(gulp.dest(buildOptions.libFolder));
|
||||||
|
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
build.rig.addPostBuildTask(tailwindBuild);
|
||||||
|
// End Step 1
|
||||||
|
|
||||||
|
build.initialize(require('gulp'));
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,44 @@
|
||||||
|
{
|
||||||
|
"name": "react-tailwindcss",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "npm run tailwind:css && gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test",
|
||||||
|
"build:tailwind": "postcss tailwind.source.css -o src/tailwind.css"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-core-library": "1.11.0",
|
||||||
|
"@microsoft/sp-lodash-subset": "1.11.0",
|
||||||
|
"@microsoft/sp-office-ui-fabric-core": "^1.11.0",
|
||||||
|
"@microsoft/sp-property-pane": "1.11.0",
|
||||||
|
"@microsoft/sp-webpart-base": "1.11.0",
|
||||||
|
"office-ui-fabric-react": "6.214.0",
|
||||||
|
"react": "16.8.5",
|
||||||
|
"react-dom": "16.8.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||||
|
"@microsoft/sp-build-web": "1.11.0",
|
||||||
|
"@microsoft/sp-module-interfaces": "1.11.0",
|
||||||
|
"@microsoft/sp-tslint-rules": "1.11.0",
|
||||||
|
"@microsoft/sp-webpart-workbench": "1.11.0",
|
||||||
|
"@types/chai": "3.4.34",
|
||||||
|
"@types/es6-promise": "0.0.33",
|
||||||
|
"@types/mocha": "2.2.38",
|
||||||
|
"@types/react": "16.8.8",
|
||||||
|
"@types/react-dom": "16.8.3",
|
||||||
|
"@types/webpack-env": "1.13.1",
|
||||||
|
"ajv": "~5.2.2",
|
||||||
|
"gulp": "~3.9.1",
|
||||||
|
"gulp-autoprefixer": "^7.0.1",
|
||||||
|
"gulp-postcss": "^8.0.0",
|
||||||
|
"gulp-sass": "^4.1.0",
|
||||||
|
"tailwindcss": "^1.8.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
@import "tailwindcss/components";
|
||||||
|
@import "tailwindcss/utilities";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--tw-fui-themeDarker: #004578;
|
||||||
|
--tw-fui-themeDark: #005a9e;
|
||||||
|
--tw-fui-themeDarkAlt: #106ebe;
|
||||||
|
--tw-fui-themePrimary: #0078d4;
|
||||||
|
--tw-fui-themeSecondary: #2b88d8;
|
||||||
|
--tw-fui-themeTertiary: #71afe5;
|
||||||
|
--tw-fui-themeLight: #c7e0f4;
|
||||||
|
--tw-fui-themeLighter: #deecf9;
|
||||||
|
--tw-fui-themeLighterAlt: #eff6fc;
|
||||||
|
--tw-fui-black: #000000;
|
||||||
|
--tw-fui-blackTranslucent40: rgba(0, 0, 0, .4);
|
||||||
|
--tw-fui-neutralDark: #212121;
|
||||||
|
--tw-fui-neutralPrimary: #333333;
|
||||||
|
--tw-fui-neutralPrimaryAlt: #3c3c3c;
|
||||||
|
--tw-fui-neutralSecondary: #666666;
|
||||||
|
--tw-fui-neutralSecondaryAlt: #767676;
|
||||||
|
--tw-fui-neutralTertiary: #a6a6a6;
|
||||||
|
--tw-fui-neutralTertiaryAlt: #c8c8c8;
|
||||||
|
--tw-fui-neutralQuaternary: #d0d0d0;
|
||||||
|
--tw-fui-neutralQuaternaryAlt: #dadada;
|
||||||
|
--tw-fui-neutralLight: #eaeaea;
|
||||||
|
--tw-fui-neutralLighter: #f4f4f4;
|
||||||
|
--tw-fui-neutralLighterAlt: #f8f8f8;
|
||||||
|
--tw-fui-accent: #0078d4;
|
||||||
|
--tw-fui-white: #ffffff;
|
||||||
|
--tw-fui-whiteTranslucent40: rgba(255, 255, 255, .4);
|
||||||
|
--tw-fui-yellow: #ffb900;
|
||||||
|
--tw-fui-yellowLight: #fff100;
|
||||||
|
--tw-fui-orange: #d83b01;
|
||||||
|
--tw-fui-orangeLight: #ea4300;
|
||||||
|
--tw-fui-orangeLighter: #ff8c00;
|
||||||
|
--tw-fui-redDark: #a80000;
|
||||||
|
--tw-fui-red: #e81123;
|
||||||
|
--tw-fui-magentaDark: #5c005c;
|
||||||
|
--tw-fui-magenta: #b4009e;
|
||||||
|
--tw-fui-magentaLight: #e3008c;
|
||||||
|
--tw-fui-purpleDark: #32145a;
|
||||||
|
--tw-fui-purple: #5c2d91;
|
||||||
|
--tw-fui-purpleLight: #b4a0ff;
|
||||||
|
--tw-fui-blueDark: #002050;
|
||||||
|
--tw-fui-blueMid: #00188f;
|
||||||
|
--tw-fui-blue: #0078d4;
|
||||||
|
--tw-fui-blueLight: #00bcf2;
|
||||||
|
--tw-fui-tealDark: #004b50;
|
||||||
|
--tw-fui-teal: #008272;
|
||||||
|
--tw-fui-tealLight: #00b294;
|
||||||
|
--tw-fui-greenDark: #004b1c;
|
||||||
|
--tw-fui-green: #107c10;
|
||||||
|
--tw-fui-greenLight: #bad80a;
|
||||||
|
/* ***** */
|
||||||
|
--tw-fui-bodyBackground: #ffffff;
|
||||||
|
--tw-fui-bodyStandoutBackground: #f8f8f8;
|
||||||
|
--tw-fui-bodyFrameBackground: #ffffff;
|
||||||
|
--tw-fui-bodyFrameDivider: #eaeaea;
|
||||||
|
--tw-fui-bodyText: #333333;
|
||||||
|
--tw-fui-bodyTextChecked: #000000;
|
||||||
|
--tw-fui-bodySubtext: #666666;
|
||||||
|
--tw-fui-bodyDivider: #eaeaea;
|
||||||
|
--tw-fui-disabledBackground: #f4f4f4;
|
||||||
|
--tw-fui-disabledText: #a6a6a6;
|
||||||
|
--tw-fui-disabledSubtext: #d0d0d0;
|
||||||
|
--tw-fui-disabledBodyText: #a6a6a6;
|
||||||
|
--tw-fui-disabledBodySubtext: #c8c8c8;
|
||||||
|
--tw-fui-focusBorder: #666666;
|
||||||
|
--tw-fui-variantBorder: #eaeaea;
|
||||||
|
--tw-fui-variantBorderHovered: #a6a6a6;
|
||||||
|
--tw-fui-defaultStateBackground: #f8f8f8;
|
||||||
|
--tw-fui-errorText: #a80000;
|
||||||
|
--tw-fui-warningText: #333333;
|
||||||
|
--tw-fui-errorBackground: rgba(232, 17, 35, .2);
|
||||||
|
--tw-fui-blockingBackground: rgba(234, 67, 0, .2);
|
||||||
|
--tw-fui-warningBackground: rgba(255, 185, 0, .2);
|
||||||
|
--tw-fui-warningHighlight: #ffb900;
|
||||||
|
--tw-fui-successBackground: rgba(186, 216, 10, .2);
|
||||||
|
--tw-fui-inputBorder: #a6a6a6;
|
||||||
|
--tw-fui-inputBorderHovered: #333333;
|
||||||
|
--tw-fui-inputBackground: #ffffff;
|
||||||
|
--tw-fui-inputBackgroundChecked: #0078d4;
|
||||||
|
--tw-fui-inputBackgroundCheckedHovered: #106ebe;
|
||||||
|
--tw-fui-inputForegroundChecked: #ffffff;
|
||||||
|
--tw-fui-inputFocusBorderAlt: #0078d4;
|
||||||
|
--tw-fui-smallInputBorder: #666666;
|
||||||
|
--tw-fui-inputText: #333333;
|
||||||
|
--tw-fui-inputTextHovered: #212121;
|
||||||
|
--tw-fui-inputPlaceholderText: #666666;
|
||||||
|
--tw-fui-buttonBackground: #f4f4f4;
|
||||||
|
--tw-fui-buttonBackgroundChecked: #c8c8c8;
|
||||||
|
--tw-fui-buttonBackgroundHovered: #eaeaea;
|
||||||
|
--tw-fui-buttonBackgroundCheckedHovered: #eaeaea;
|
||||||
|
--tw-fui-buttonBackgroundPressed: #eaeaea;
|
||||||
|
--tw-fui-buttonBackgroundDisabled: #f4f4f4;
|
||||||
|
--tw-fui-buttonBorder: transparent;
|
||||||
|
--tw-fui-buttonText: #333333;
|
||||||
|
--tw-fui-buttonTextHovered: #212121;
|
||||||
|
--tw-fui-buttonTextChecked: #212121;
|
||||||
|
--tw-fui-buttonTextCheckedHovered: #000000;
|
||||||
|
--tw-fui-buttonTextPressed: #212121;
|
||||||
|
--tw-fui-buttonTextDisabled: #a6a6a6;
|
||||||
|
--tw-fui-buttonBorderDisabled: transparent;
|
||||||
|
--tw-fui-primaryButtonBackground: #0078d4;
|
||||||
|
--tw-fui-primaryButtonBackgroundHovered: #106ebe;
|
||||||
|
--tw-fui-primaryButtonBackgroundPressed: #005a9e;
|
||||||
|
--tw-fui-primaryButtonBackgroundDisabled: #f4f4f4;
|
||||||
|
--tw-fui-primaryButtonBorder: transparent;
|
||||||
|
--tw-fui-primaryButtonText: #ffffff;
|
||||||
|
--tw-fui-primaryButtonTextHovered: #ffffff;
|
||||||
|
--tw-fui-primaryButtonTextPressed: #ffffff;
|
||||||
|
--tw-fui-primaryButtonTextDisabled: #d0d0d0;
|
||||||
|
--tw-fui-accentButtonBackground: #0078d4;
|
||||||
|
--tw-fui-accentButtonText: #ffffff;
|
||||||
|
--tw-fui-menuBackground: #ffffff;
|
||||||
|
--tw-fui-menuDivider: #c8c8c8;
|
||||||
|
--tw-fui-menuIcon: #0078d4;
|
||||||
|
--tw-fui-menuHeader: #0078d4;
|
||||||
|
--tw-fui-menuItemBackgroundHovered: #f4f4f4;
|
||||||
|
--tw-fui-menuItemBackgroundPressed: #eaeaea;
|
||||||
|
--tw-fui-menuItemText: #333333;
|
||||||
|
--tw-fui-menuItemTextHovered: #212121;
|
||||||
|
--tw-fui-listBackground: #ffffff;
|
||||||
|
--tw-fui-listText: #333333;
|
||||||
|
--tw-fui-listItemBackgroundHovered: #f4f4f4;
|
||||||
|
--tw-fui-listItemBackgroundChecked: #eaeaea;
|
||||||
|
--tw-fui-listItemBackgroundCheckedHovered: #dadada;
|
||||||
|
--tw-fui-listHeaderBackgroundHovered: #f4f4f4;
|
||||||
|
--tw-fui-listHeaderBackgroundPressed: #eaeaea;
|
||||||
|
--tw-fui-actionLink: #333333;
|
||||||
|
--tw-fui-actionLinkHovered: #212121;
|
||||||
|
--tw-fui-link: #0078d4;
|
||||||
|
--tw-fui-linkHovered: #004578;
|
||||||
|
--tw-fui-listTextColor: #333333;
|
||||||
|
--tw-fui-menuItemBackgroundChecked: #eaeaea;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "acebbfec-5fc8-42b0-94e5-cfbc43222cae",
|
||||||
|
"alias": "HelloTailwindCssWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
"supportsThemeVariants": true,
|
||||||
|
// The "*" signifies that the version should be taken from the package.json
|
||||||
|
"version": "*",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
|
||||||
|
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||||
|
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||||
|
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
"supportedHosts": ["SharePointWebPart"],
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||||
|
"group": { "default": "Other" },
|
||||||
|
"title": { "default": "Hello TailwindCss" },
|
||||||
|
"description": { "default": "Hello TailwindCss description" },
|
||||||
|
"officeFabricIconFontName": "Duststorm",
|
||||||
|
"properties": {
|
||||||
|
"description": "Hello TailwindCss"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Version } from '@microsoft/sp-core-library';
|
||||||
|
import {
|
||||||
|
IPropertyPaneConfiguration,
|
||||||
|
PropertyPaneTextField
|
||||||
|
} from '@microsoft/sp-property-pane';
|
||||||
|
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||||
|
import * as strings from 'HelloTailwindCssWebPartStrings';
|
||||||
|
import HelloTailwindCss from './components/HelloTailwindCss';
|
||||||
|
import { IHelloTailwindCssProps } from './components/IHelloTailwindCssProps';
|
||||||
|
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||||
|
|
||||||
|
|
||||||
|
export interface IHelloTailwindCssWebPartProps {
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class HelloTailwindCssWebPart extends BaseClientSideWebPart<IHelloTailwindCssWebPartProps> {
|
||||||
|
|
||||||
|
private _themeProvider: ThemeProvider;
|
||||||
|
private _themeVariant: IReadonlyTheme | undefined;
|
||||||
|
|
||||||
|
protected onInit(): Promise<void> {
|
||||||
|
// Consume the new ThemeProvider service
|
||||||
|
this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
|
||||||
|
|
||||||
|
// If it exists, get the theme variant
|
||||||
|
this._themeVariant = this._themeProvider.tryGetTheme();
|
||||||
|
|
||||||
|
// Register a handler to be notified if the theme variant changes
|
||||||
|
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
|
||||||
|
|
||||||
|
// Apply theme variant as CSS Variables at current DOM node
|
||||||
|
this._applyThemeVariant();
|
||||||
|
|
||||||
|
return super.onInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
|
||||||
|
this._themeVariant = args.theme;
|
||||||
|
this._applyThemeVariant();
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _applyThemeVariant() {
|
||||||
|
let style = this.domElement.style;
|
||||||
|
|
||||||
|
style.setProperty('--tw-fui-themeDarker', this._themeVariant.palette.themeDarker);
|
||||||
|
style.setProperty('--tw-fui-themeDark', this._themeVariant.palette.themeDark);
|
||||||
|
style.setProperty('--tw-fui-themeDarkAlt', this._themeVariant.palette.themeDarkAlt);
|
||||||
|
style.setProperty('--tw-fui-themePrimary', this._themeVariant.palette.themePrimary);
|
||||||
|
style.setProperty('--tw-fui-themeSecondary', this._themeVariant.palette.themeSecondary);
|
||||||
|
style.setProperty('--tw-fui-themeTertiary', this._themeVariant.palette.themeTertiary);
|
||||||
|
style.setProperty('--tw-fui-themeLight', this._themeVariant.palette.themeLight);
|
||||||
|
style.setProperty('--tw-fui-themeLighter', this._themeVariant.palette.themeLighter);
|
||||||
|
style.setProperty('--tw-fui-themeLighterAlt', this._themeVariant.palette.themeLighterAlt);
|
||||||
|
style.setProperty('--tw-fui-black', this._themeVariant.palette.black);
|
||||||
|
style.setProperty('--tw-fui-blackTranslucent40', this._themeVariant.palette.blackTranslucent40);
|
||||||
|
style.setProperty('--tw-fui-neutralDark', this._themeVariant.palette.neutralDark);
|
||||||
|
style.setProperty('--tw-fui-neutralPrimary', this._themeVariant.palette.neutralPrimary);
|
||||||
|
style.setProperty('--tw-fui-neutralPrimaryAlt', this._themeVariant.palette.neutralPrimaryAlt);
|
||||||
|
style.setProperty('--tw-fui-neutralSecondary', this._themeVariant.palette.neutralSecondary);
|
||||||
|
style.setProperty('--tw-fui-neutralSecondaryAlt', this._themeVariant.palette.neutralSecondaryAlt);
|
||||||
|
style.setProperty('--tw-fui-neutralTertiary', this._themeVariant.palette.neutralTertiary);
|
||||||
|
style.setProperty('--tw-fui-neutralTertiaryAlt', this._themeVariant.palette.neutralTertiaryAlt);
|
||||||
|
style.setProperty('--tw-fui-neutralQuaternary', this._themeVariant.palette.neutralQuaternary);
|
||||||
|
style.setProperty('--tw-fui-neutralQuaternaryAlt', this._themeVariant.palette.neutralQuaternaryAlt);
|
||||||
|
style.setProperty('--tw-fui-neutralLight', this._themeVariant.palette.neutralLight);
|
||||||
|
style.setProperty('--tw-fui-neutralLighter', this._themeVariant.palette.neutralLighter);
|
||||||
|
style.setProperty('--tw-fui-neutralLighterAlt', this._themeVariant.palette.neutralLighterAlt);
|
||||||
|
style.setProperty('--tw-fui-accent', this._themeVariant.palette.accent);
|
||||||
|
style.setProperty('--tw-fui-white', this._themeVariant.palette.white);
|
||||||
|
style.setProperty('--tw-fui-whiteTranslucent40', this._themeVariant.palette.whiteTranslucent40);
|
||||||
|
style.setProperty('--tw-fui-yellow', this._themeVariant.palette.yellow);
|
||||||
|
style.setProperty('--tw-fui-yellowLight', this._themeVariant.palette.yellowLight);
|
||||||
|
style.setProperty('--tw-fui-orange', this._themeVariant.palette.orange);
|
||||||
|
style.setProperty('--tw-fui-orangeLight', this._themeVariant.palette.orangeLight);
|
||||||
|
style.setProperty('--tw-fui-orangeLighter', this._themeVariant.palette.orangeLighter);
|
||||||
|
style.setProperty('--tw-fui-redDark', this._themeVariant.palette.redDark);
|
||||||
|
style.setProperty('--tw-fui-red', this._themeVariant.palette.red);
|
||||||
|
style.setProperty('--tw-fui-magentaDark', this._themeVariant.palette.magentaDark);
|
||||||
|
style.setProperty('--tw-fui-magenta', this._themeVariant.palette.magenta);
|
||||||
|
style.setProperty('--tw-fui-magentaLight', this._themeVariant.palette.magentaLight);
|
||||||
|
style.setProperty('--tw-fui-purpleDark', this._themeVariant.palette.purpleDark);
|
||||||
|
style.setProperty('--tw-fui-purple', this._themeVariant.palette.purple);
|
||||||
|
style.setProperty('--tw-fui-purpleLight', this._themeVariant.palette.purpleLight);
|
||||||
|
style.setProperty('--tw-fui-blueDark', this._themeVariant.palette.blueDark);
|
||||||
|
style.setProperty('--tw-fui-blueMid', this._themeVariant.palette.blueMid);
|
||||||
|
style.setProperty('--tw-fui-blue', this._themeVariant.palette.blue);
|
||||||
|
style.setProperty('--tw-fui-blueLight', this._themeVariant.palette.blueLight);
|
||||||
|
style.setProperty('--tw-fui-tealDark', this._themeVariant.palette.tealDark);
|
||||||
|
style.setProperty('--tw-fui-teal', this._themeVariant.palette.teal);
|
||||||
|
style.setProperty('--tw-fui-tealLight', this._themeVariant.palette.tealLight);
|
||||||
|
style.setProperty('--tw-fui-greenDark', this._themeVariant.palette.greenDark);
|
||||||
|
style.setProperty('--tw-fui-green', this._themeVariant.palette.green);
|
||||||
|
style.setProperty('--tw-fui-greenLight', this._themeVariant.palette.greenLight);
|
||||||
|
|
||||||
|
style.setProperty('--tw-fui-bodyBackground', this._themeVariant.semanticColors.bodyBackground);
|
||||||
|
style.setProperty('--tw-fui-bodyStandoutBackground', this._themeVariant.semanticColors.bodyStandoutBackground);
|
||||||
|
style.setProperty('--tw-fui-bodyFrameBackground', this._themeVariant.semanticColors.bodyFrameBackground);
|
||||||
|
style.setProperty('--tw-fui-bodyFrameDivider', this._themeVariant.semanticColors.bodyFrameDivider);
|
||||||
|
style.setProperty('--tw-fui-bodyText', this._themeVariant.semanticColors.bodyText);
|
||||||
|
style.setProperty('--tw-fui-bodyTextChecked', this._themeVariant.semanticColors.bodyTextChecked);
|
||||||
|
style.setProperty('--tw-fui-bodySubtext', this._themeVariant.semanticColors.bodySubtext);
|
||||||
|
style.setProperty('--tw-fui-bodyDivider', this._themeVariant.semanticColors.bodyDivider);
|
||||||
|
style.setProperty('--tw-fui-disabledBackground', this._themeVariant.semanticColors.disabledBackground);
|
||||||
|
style.setProperty('--tw-fui-disabledText', this._themeVariant.semanticColors.disabledText);
|
||||||
|
style.setProperty('--tw-fui-disabledSubtext', this._themeVariant.semanticColors.disabledSubtext);
|
||||||
|
style.setProperty('--tw-fui-disabledBodyText', this._themeVariant.semanticColors.disabledBodyText);
|
||||||
|
style.setProperty('--tw-fui-disabledBodySubtext', this._themeVariant.semanticColors.disabledBodySubtext);
|
||||||
|
style.setProperty('--tw-fui-focusBorder', this._themeVariant.semanticColors.focusBorder);
|
||||||
|
style.setProperty('--tw-fui-variantBorder', this._themeVariant.semanticColors.variantBorder);
|
||||||
|
style.setProperty('--tw-fui-variantBorderHovered', this._themeVariant.semanticColors.variantBorderHovered);
|
||||||
|
style.setProperty('--tw-fui-defaultStateBackground', this._themeVariant.semanticColors.defaultStateBackground);
|
||||||
|
style.setProperty('--tw-fui-errorText', this._themeVariant.semanticColors.errorText);
|
||||||
|
style.setProperty('--tw-fui-warningText', this._themeVariant.semanticColors.warningText);
|
||||||
|
style.setProperty('--tw-fui-errorBackground', this._themeVariant.semanticColors.errorBackground);
|
||||||
|
style.setProperty('--tw-fui-blockingBackground', this._themeVariant.semanticColors.blockingBackground);
|
||||||
|
style.setProperty('--tw-fui-warningBackground', this._themeVariant.semanticColors.warningBackground);
|
||||||
|
style.setProperty('--tw-fui-warningHighlight', this._themeVariant.semanticColors.warningHighlight);
|
||||||
|
style.setProperty('--tw-fui-successBackground', this._themeVariant.semanticColors.successBackground);
|
||||||
|
style.setProperty('--tw-fui-inputBorder', this._themeVariant.semanticColors.inputBorder);
|
||||||
|
style.setProperty('--tw-fui-inputBorderHovered', this._themeVariant.semanticColors.inputBorderHovered);
|
||||||
|
style.setProperty('--tw-fui-inputBackground', this._themeVariant.semanticColors.inputBackground);
|
||||||
|
style.setProperty('--tw-fui-inputBackgroundChecked', this._themeVariant.semanticColors.inputBackgroundChecked);
|
||||||
|
style.setProperty('--tw-fui-inputBackgroundCheckedHovered', this._themeVariant.semanticColors.inputBackgroundCheckedHovered);
|
||||||
|
style.setProperty('--tw-fui-inputForegroundChecked', this._themeVariant.semanticColors.inputForegroundChecked);
|
||||||
|
style.setProperty('--tw-fui-inputFocusBorderAlt', this._themeVariant.semanticColors.inputFocusBorderAlt);
|
||||||
|
style.setProperty('--tw-fui-smallInputBorder', this._themeVariant.semanticColors.smallInputBorder);
|
||||||
|
style.setProperty('--tw-fui-inputText', this._themeVariant.semanticColors.inputText);
|
||||||
|
style.setProperty('--tw-fui-inputTextHovered', this._themeVariant.semanticColors.inputTextHovered);
|
||||||
|
style.setProperty('--tw-fui-inputPlaceholderText', this._themeVariant.semanticColors.inputPlaceholderText);
|
||||||
|
style.setProperty('--tw-fui-buttonBackground', this._themeVariant.semanticColors.buttonBackground);
|
||||||
|
style.setProperty('--tw-fui-buttonBackgroundChecked', this._themeVariant.semanticColors.buttonBackgroundChecked);
|
||||||
|
style.setProperty('--tw-fui-buttonBackgroundHovered', this._themeVariant.semanticColors.buttonBackgroundHovered);
|
||||||
|
style.setProperty('--tw-fui-buttonBackgroundCheckedHovered', this._themeVariant.semanticColors.buttonBackgroundCheckedHovered);
|
||||||
|
style.setProperty('--tw-fui-buttonBackgroundPressed', this._themeVariant.semanticColors.buttonBackgroundPressed);
|
||||||
|
style.setProperty('--tw-fui-buttonBackgroundDisabled', this._themeVariant.semanticColors.buttonBackgroundDisabled);
|
||||||
|
style.setProperty('--tw-fui-buttonBorder', this._themeVariant.semanticColors.buttonBorder);
|
||||||
|
style.setProperty('--tw-fui-buttonText', this._themeVariant.semanticColors.buttonText);
|
||||||
|
style.setProperty('--tw-fui-buttonTextHovered', this._themeVariant.semanticColors.buttonTextHovered);
|
||||||
|
style.setProperty('--tw-fui-buttonTextChecked', this._themeVariant.semanticColors.buttonTextChecked);
|
||||||
|
style.setProperty('--tw-fui-buttonTextCheckedHovered', this._themeVariant.semanticColors.buttonTextCheckedHovered);
|
||||||
|
style.setProperty('--tw-fui-buttonTextPressed', this._themeVariant.semanticColors.buttonTextPressed);
|
||||||
|
style.setProperty('--tw-fui-buttonTextDisabled', this._themeVariant.semanticColors.buttonTextDisabled);
|
||||||
|
style.setProperty('--tw-fui-buttonBorderDisabled', this._themeVariant.semanticColors.buttonBorderDisabled);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonBackground', this._themeVariant.semanticColors.primaryButtonBackground);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonBackgroundHovered', this._themeVariant.semanticColors.primaryButtonBackgroundHovered);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonBackgroundPressed', this._themeVariant.semanticColors.primaryButtonBackgroundPressed);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonBackgroundDisabled', this._themeVariant.semanticColors.primaryButtonBackgroundDisabled);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonBorder', this._themeVariant.semanticColors.primaryButtonBorder);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonText', this._themeVariant.semanticColors.primaryButtonText);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonTextHovered', this._themeVariant.semanticColors.primaryButtonTextHovered);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonTextPressed', this._themeVariant.semanticColors.primaryButtonTextPressed);
|
||||||
|
style.setProperty('--tw-fui-primaryButtonTextDisabled', this._themeVariant.semanticColors.primaryButtonTextDisabled);
|
||||||
|
style.setProperty('--tw-fui-accentButtonBackground', this._themeVariant.semanticColors.accentButtonBackground);
|
||||||
|
style.setProperty('--tw-fui-accentButtonText', this._themeVariant.semanticColors.accentButtonText);
|
||||||
|
style.setProperty('--tw-fui-menuBackground', this._themeVariant.semanticColors.menuBackground);
|
||||||
|
style.setProperty('--tw-fui-menuDivider', this._themeVariant.semanticColors.menuDivider);
|
||||||
|
style.setProperty('--tw-fui-menuIcon', this._themeVariant.semanticColors.menuIcon);
|
||||||
|
style.setProperty('--tw-fui-menuHeader', this._themeVariant.semanticColors.menuHeader);
|
||||||
|
style.setProperty('--tw-fui-menuItemBackgroundHovered', this._themeVariant.semanticColors.menuItemBackgroundHovered);
|
||||||
|
style.setProperty('--tw-fui-menuItemBackgroundPressed', this._themeVariant.semanticColors.menuItemBackgroundPressed);
|
||||||
|
style.setProperty('--tw-fui-menuItemText', this._themeVariant.semanticColors.menuItemText);
|
||||||
|
style.setProperty('--tw-fui-menuItemTextHovered', this._themeVariant.semanticColors.menuItemTextHovered);
|
||||||
|
style.setProperty('--tw-fui-listBackground', this._themeVariant.semanticColors.listBackground);
|
||||||
|
style.setProperty('--tw-fui-listText', this._themeVariant.semanticColors.listText);
|
||||||
|
style.setProperty('--tw-fui-listItemBackgroundHovered', this._themeVariant.semanticColors.listItemBackgroundHovered);
|
||||||
|
style.setProperty('--tw-fui-listItemBackgroundChecked', this._themeVariant.semanticColors.listItemBackgroundChecked);
|
||||||
|
style.setProperty('--tw-fui-listItemBackgroundCheckedHovered', this._themeVariant.semanticColors.listItemBackgroundCheckedHovered);
|
||||||
|
style.setProperty('--tw-fui-listHeaderBackgroundHovered', this._themeVariant.semanticColors.listHeaderBackgroundHovered);
|
||||||
|
style.setProperty('--tw-fui-listHeaderBackgroundPressed', this._themeVariant.semanticColors.listHeaderBackgroundPressed);
|
||||||
|
style.setProperty('--tw-fui-actionLink', this._themeVariant.semanticColors.actionLink);
|
||||||
|
style.setProperty('--tw-fui-actionLinkHovered', this._themeVariant.semanticColors.actionLinkHovered);
|
||||||
|
style.setProperty('--tw-fui-link', this._themeVariant.semanticColors.link);
|
||||||
|
style.setProperty('--tw-fui-linkHovered', this._themeVariant.semanticColors.linkHovered);
|
||||||
|
style.setProperty('--tw-fui-listTextColor', this._themeVariant.semanticColors.listTextColor);
|
||||||
|
style.setProperty('--tw-fui-menuItemBackgroundChecked', this._themeVariant.semanticColors.menuItemBackgroundChecked);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
const element: React.ReactElement<IHelloTailwindCssProps> = React.createElement(
|
||||||
|
HelloTailwindCss,
|
||||||
|
{
|
||||||
|
description: this.properties.description
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDom.render(element, this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onDispose(): void {
|
||||||
|
ReactDom.unmountComponentAtNode(this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.BasicGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneTextField('description', {
|
||||||
|
label: strings.DescriptionFieldLabel
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
import './../../../tailwind.css';
|
||||||
|
import User, { IUserProps } from './User';
|
||||||
|
|
||||||
|
export interface IDocumentCardProps {
|
||||||
|
title: string;
|
||||||
|
documentImageUrl: string;
|
||||||
|
lastEditUserInfo: IUserProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class DocumentCard extends React.Component<IDocumentCardProps, {}> {
|
||||||
|
public render(): React.ReactElement<IDocumentCardProps> {
|
||||||
|
return (
|
||||||
|
<div className="max-w-sm overflow-hidden bg-white text-black border border-solid border-gray-400 hover:outline-none hover:shadow-lg hover:cursor-pointer">
|
||||||
|
<img className="w-full border-0 border-solid border-b border-gray-400" src={this.props.documentImageUrl} alt="Document Preview" />
|
||||||
|
<div className="px-4 py-3 pt-1">
|
||||||
|
<div className="text-lg mb-2">{this.props.title}</div>
|
||||||
|
<User profileImageUrl={this.props.lastEditUserInfo.profileImageUrl}
|
||||||
|
line1={this.props.lastEditUserInfo.line1}
|
||||||
|
line2={this.props.lastEditUserInfo.line1} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { IHelloTailwindCssProps } from './IHelloTailwindCssProps';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
import './../../../tailwind.css';
|
||||||
|
import DocumentCard from './DocumentCard';
|
||||||
|
import HorizontalCard from './HorizontalCard';
|
||||||
|
import { Stack } from 'office-ui-fabric-react';
|
||||||
|
|
||||||
|
export default class HelloTailwindCss extends React.Component<IHelloTailwindCssProps, {}> {
|
||||||
|
public render(): React.ReactElement<IHelloTailwindCssProps> {
|
||||||
|
return (
|
||||||
|
<Stack gap="20">
|
||||||
|
<DocumentCard title="Revenue stream proposal fiscal year 2016 version02.pptx"
|
||||||
|
documentImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/document-preview.png"
|
||||||
|
lastEditUserInfo={{
|
||||||
|
profileImageUrl: "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png",
|
||||||
|
line1: "Annie Lindqvist",
|
||||||
|
line2: "Created a few minutes ago"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<HorizontalCard title="Can coffee make you a better developer?"
|
||||||
|
description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
|
||||||
|
documentImageUrl="//tailwindcss.com/img/card-left.jpg"
|
||||||
|
lastEditUserInfo={{
|
||||||
|
profileImageUrl: "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png",
|
||||||
|
line1: "Annie Lindqvist",
|
||||||
|
line2: "Aug 18"
|
||||||
|
}}
|
||||||
|
/></Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
import './../../../tailwind.css';
|
||||||
|
import User, { IUserProps } from './User';
|
||||||
|
|
||||||
|
export interface IHorizontalCardProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
documentImageUrl: string;
|
||||||
|
lastEditUserInfo: IUserProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootClassName = "sp-col-1/3:max-w-sm sp-col-1:max-w-full sp-col-1:flex overflow-hidden shadow hover:outline-none hover:shadow-lg hover:cursor-pointer";
|
||||||
|
|
||||||
|
export default class HorizontalCard extends React.Component<IHorizontalCardProps, {}> {
|
||||||
|
public render(): React.ReactElement<IHorizontalCardProps> {
|
||||||
|
return (
|
||||||
|
<div className={rootClassName}>
|
||||||
|
<div className="h-48 sp-col-1:h-auto sp-col-1:w-48 flex-none bg-cover text-center overflow-hidden" style={{ backgroundImage: "url('//tailwindcss.com/img/card-left.jpg')" }} title="Woman holding a mug">
|
||||||
|
</div>
|
||||||
|
<div className="border-r border-b border-l border-gray-400 sp-col-1:border-l-0 sp-col-1:border-t bg-buttonBackground text-buttonText p-4 flex flex-col justify-between leading-normal">
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="font-bold text-xl mb-2">{this.props.title}</div>
|
||||||
|
<p className="text-base text-buttonTextDisabled">{this.props.description}</p>
|
||||||
|
</div>
|
||||||
|
<User profileImageUrl={this.props.lastEditUserInfo.profileImageUrl}
|
||||||
|
line1={this.props.lastEditUserInfo.line1}
|
||||||
|
line2={this.props.lastEditUserInfo.line1} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export interface IHelloTailwindCssProps {
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { escape } from '@microsoft/sp-lodash-subset';
|
||||||
|
import './../../../tailwind.css';
|
||||||
|
|
||||||
|
export interface IUserProps {
|
||||||
|
profileImageUrl: string;
|
||||||
|
line1: string;
|
||||||
|
line2: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class User extends React.Component<IUserProps, {}> {
|
||||||
|
public render(): React.ReactElement<IUserProps> {
|
||||||
|
return (
|
||||||
|
<div className="flex mt-4">
|
||||||
|
<img className="h-8 w-8 rounded-full mr-2" src={this.props.profileImageUrl} />
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="font-bold text-xs">{this.props.line1}</div>
|
||||||
|
<div className="text-xs text-buttonTextDisabled">{this.props.line2}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Description",
|
||||||
|
"BasicGroupName": "Group Name",
|
||||||
|
"DescriptionFieldLabel": "Description Field"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
declare interface IHelloTailwindCssWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
DescriptionFieldLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'HelloTailwindCssWebPartStrings' {
|
||||||
|
const strings: IHelloTailwindCssWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,289 @@
|
||||||
|
const plugin = require('tailwindcss/plugin');
|
||||||
|
const customSpSectionVariant = ['sp-col-1', 'sp-col-1/2', 'sp-col-1/3', 'sp-col-2/3'];
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
purge: {
|
||||||
|
enabled: true,
|
||||||
|
content: ['./src/**/*.tsx'],
|
||||||
|
options: {
|
||||||
|
whitelistPatterns: [/^CanvasSection*/]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
themeDarker: 'var(--tw-fui-themeDarker)',
|
||||||
|
themeDark: 'var(--tw-fui-themeDark)',
|
||||||
|
themeDarkAlt: 'var(--tw-fui-themeDarkAlt)',
|
||||||
|
themePrimary: 'var(--tw-fui-themePrimary)',
|
||||||
|
themeSecondary: 'var(--tw-fui-themeSecondary)',
|
||||||
|
themeTertiary: 'var(--tw-fui-themeTertiary)',
|
||||||
|
themeLight: 'var(--tw-fui-themeLight)',
|
||||||
|
themeLighter: 'var(--tw-fui-themeLighter)',
|
||||||
|
themeLighterAlt: 'var(--tw-fui-themeLighterAlt)',
|
||||||
|
//black: 'var(--tw-fui-black)',
|
||||||
|
blackTranslucent40: 'var(--tw-fui-blackTranslucent40)',
|
||||||
|
neutralDark: 'var(--tw-fui-neutralDark)',
|
||||||
|
neutralPrimary: 'var(--tw-fui-neutralPrimary)',
|
||||||
|
neutralPrimaryAlt: 'var(--tw-fui-neutralPrimaryAlt)',
|
||||||
|
neutralSecondary: 'var(--tw-fui-neutralSecondary)',
|
||||||
|
neutralSecondaryAlt: 'var(--tw-fui-neutralSecondaryAlt)',
|
||||||
|
neutralTertiary: 'var(--tw-fui-neutralTertiary)',
|
||||||
|
neutralTertiaryAlt: 'var(--tw-fui-neutralTertiaryAlt)',
|
||||||
|
neutralQuaternary: 'var(--tw-fui-neutralQuaternary)',
|
||||||
|
neutralQuaternaryAlt: 'var(--tw-fui-neutralQuaternaryAlt)',
|
||||||
|
neutralLight: 'var(--tw-fui-neutralLight)',
|
||||||
|
neutralLighter: 'var(--tw-fui-neutralLighter)',
|
||||||
|
neutralLighterAlt: 'var(--tw-fui-neutralLighterAlt)',
|
||||||
|
accent: 'var(--tw-fui-accent)',
|
||||||
|
//white: 'var(--tw-fui-white)',
|
||||||
|
whiteTranslucent40: 'var(--tw-fui-whiteTranslucent40)',
|
||||||
|
yellow: 'var(--tw-fui-yellow)',
|
||||||
|
yellowLight: 'var(--tw-fui-yellowLight)',
|
||||||
|
orange: 'var(--tw-fui-orange)',
|
||||||
|
orangeLight: 'var(--tw-fui-orangeLight)',
|
||||||
|
orangeLighter: 'var(--tw-fui-orangeLighter)',
|
||||||
|
redDark: 'var(--tw-fui-redDark)',
|
||||||
|
red: 'var(--tw-fui-red)',
|
||||||
|
magentaDark: 'var(--tw-fui-magentaDark)',
|
||||||
|
magenta: 'var(--tw-fui-magenta)',
|
||||||
|
magentaLight: 'var(--tw-fui-magentaLight)',
|
||||||
|
purpleDark: 'var(--tw-fui-purpleDark)',
|
||||||
|
purple: 'var(--tw-fui-purple)',
|
||||||
|
purpleLight: 'var(--tw-fui-purpleLight)',
|
||||||
|
blueDark: 'var(--tw-fui-blueDark)',
|
||||||
|
blueMid: 'var(--tw-fui-blueMid)',
|
||||||
|
blue: 'var(--tw-fui-blue)',
|
||||||
|
blueLight: 'var(--tw-fui-blueLight)',
|
||||||
|
tealDark: 'var(--tw-fui-tealDark)',
|
||||||
|
teal: 'var(--tw-fui-teal)',
|
||||||
|
tealLight: 'var(--tw-fui-tealLight)',
|
||||||
|
greenDark: 'var(--tw-fui-greenDark)',
|
||||||
|
green: 'var(--tw-fui-green)',
|
||||||
|
greenLight: 'var(--tw-fui-greenLight)',
|
||||||
|
/* ***** */
|
||||||
|
bodyBackground: 'var(--tw-fui-bodyBackground)',
|
||||||
|
bodyStandoutBackground: 'var(--tw-fui-bodyStandoutBackground)',
|
||||||
|
bodyFrameBackground: 'var(--tw-fui-bodyFrameBackground)',
|
||||||
|
bodyFrameDivider: 'var(--tw-fui-bodyFrameDivider)',
|
||||||
|
bodyText: 'var(--tw-fui-bodyText)',
|
||||||
|
bodyTextChecked: 'var(--tw-fui-bodyTextChecked)',
|
||||||
|
bodySubtext: 'var(--tw-fui-bodySubtext)',
|
||||||
|
bodyDivider: 'var(--tw-fui-bodyDivider)',
|
||||||
|
disabledBackground: 'var(--tw-fui-disabledBackground)',
|
||||||
|
disabledText: 'var(--tw-fui-disabledText)',
|
||||||
|
disabledSubtext: 'var(--tw-fui-disabledSubtext)',
|
||||||
|
disabledBodyText: 'var(--tw-fui-disabledBodyText)',
|
||||||
|
disabledBodySubtext: 'var(--tw-fui-disabledBodySubtext)',
|
||||||
|
focusBorder: 'var(--tw-fui-focusBorder)',
|
||||||
|
variantBorder: 'var(--tw-fui-variantBorder)',
|
||||||
|
variantBorderHovered: 'var(--tw-fui-variantBorderHovered)',
|
||||||
|
defaultStateBackground: 'var(--tw-fui-defaultStateBackground)',
|
||||||
|
errorText: 'var(--tw-fui-errorText)',
|
||||||
|
warningText: 'var(--tw-fui-warningText)',
|
||||||
|
errorBackground: 'var(--tw-fui-errorBackground)',
|
||||||
|
blockingBackground: 'var(--tw-fui-blockingBackground)',
|
||||||
|
warningBackground: 'var(--tw-fui-warningBackground)',
|
||||||
|
warningHighlight: 'var(--tw-fui-warningHighlight)',
|
||||||
|
successBackground: 'var(--tw-fui-successBackground)',
|
||||||
|
inputBorder: 'var(--tw-fui-inputBorder)',
|
||||||
|
inputBorderHovered: 'var(--tw-fui-inputBorderHovered)',
|
||||||
|
inputBackground: 'var(--tw-fui-inputBackground)',
|
||||||
|
inputBackgroundChecked: 'var(--tw-fui-inputBackgroundChecked)',
|
||||||
|
inputBackgroundCheckedHovered: 'var(--tw-fui-inputBackgroundCheckedHovered)',
|
||||||
|
inputForegroundChecked: 'var(--tw-fui-inputForegroundChecked)',
|
||||||
|
inputFocusBorderAlt: 'var(--tw-fui-inputFocusBorderAlt)',
|
||||||
|
smallInputBorder: 'var(--tw-fui-smallInputBorder)',
|
||||||
|
inputText: 'var(--tw-fui-inputText)',
|
||||||
|
inputTextHovered: 'var(--tw-fui-inputTextHovered)',
|
||||||
|
inputPlaceholderText: 'var(--tw-fui-inputPlaceholderText)',
|
||||||
|
buttonBackground: 'var(--tw-fui-buttonBackground)',
|
||||||
|
buttonBackgroundChecked: 'var(--tw-fui-buttonBackgroundChecked)',
|
||||||
|
buttonBackgroundHovered: 'var(--tw-fui-buttonBackgroundHovered)',
|
||||||
|
buttonBackgroundCheckedHovered: 'var(--tw-fui-buttonBackgroundCheckedHovered)',
|
||||||
|
buttonBackgroundPressed: 'var(--tw-fui-buttonBackgroundPressed)',
|
||||||
|
buttonBackgroundDisabled: 'var(--tw-fui-buttonBackgroundDisabled)',
|
||||||
|
buttonBorder: 'var(--tw-fui-buttonBorder)',
|
||||||
|
buttonText: 'var(--tw-fui-buttonText)',
|
||||||
|
buttonTextHovered: 'var(--tw-fui-buttonTextHovered)',
|
||||||
|
buttonTextChecked: 'var(--tw-fui-buttonTextChecked)',
|
||||||
|
buttonTextCheckedHovered: 'var(--tw-fui-buttonTextCheckedHovered)',
|
||||||
|
buttonTextPressed: 'var(--tw-fui-buttonTextPressed)',
|
||||||
|
buttonTextDisabled: 'var(--tw-fui-buttonTextDisabled)',
|
||||||
|
buttonBorderDisabled: 'var(--tw-fui-buttonBorderDisabled)',
|
||||||
|
primaryButtonBackground: 'var(--tw-fui-primaryButtonBackground)',
|
||||||
|
primaryButtonBackgroundHovered: 'var(--tw-fui-primaryButtonBackgroundHovered)',
|
||||||
|
primaryButtonBackgroundPressed: 'var(--tw-fui-primaryButtonBackgroundPressed)',
|
||||||
|
primaryButtonBackgroundDisabled: 'var(--tw-fui-primaryButtonBackgroundDisabled)',
|
||||||
|
primaryButtonBorder: 'var(--tw-fui-primaryButtonBorder)',
|
||||||
|
primaryButtonText: 'var(--tw-fui-primaryButtonText)',
|
||||||
|
primaryButtonTextHovered: 'var(--tw-fui-primaryButtonTextHovered)',
|
||||||
|
primaryButtonTextPressed: 'var(--tw-fui-primaryButtonTextPressed)',
|
||||||
|
primaryButtonTextDisabled: 'var(--tw-fui-primaryButtonTextDisabled)',
|
||||||
|
accentButtonBackground: 'var(--tw-fui-accentButtonBackground)',
|
||||||
|
accentButtonText: 'var(--tw-fui-accentButtonText)',
|
||||||
|
menuBackground: 'var(--tw-fui-menuBackground)',
|
||||||
|
menuDivider: 'var(--tw-fui-menuDivider)',
|
||||||
|
menuIcon: 'var(--tw-fui-menuIcon)',
|
||||||
|
menuHeader: 'var(--tw-fui-menuHeader)',
|
||||||
|
menuItemBackgroundHovered: 'var(--tw-fui-menuItemBackgroundHovered)',
|
||||||
|
menuItemBackgroundPressed: 'var(--tw-fui-menuItemBackgroundPressed)',
|
||||||
|
menuItemText: 'var(--tw-fui-menuItemText)',
|
||||||
|
menuItemTextHovered: 'var(--tw-fui-menuItemTextHovered)',
|
||||||
|
listBackground: 'var(--tw-fui-listBackground)',
|
||||||
|
listText: 'var(--tw-fui-listText)',
|
||||||
|
listItemBackgroundHovered: 'var(--tw-fui-listItemBackgroundHovered)',
|
||||||
|
listItemBackgroundChecked: 'var(--tw-fui-listItemBackgroundChecked)',
|
||||||
|
listItemBackgroundCheckedHovered: 'var(--tw-fui-listItemBackgroundCheckedHovered)',
|
||||||
|
listHeaderBackgroundHovered: 'var(--tw-fui-listHeaderBackgroundHovered)',
|
||||||
|
listHeaderBackgroundPressed: 'var(--tw-fui-listHeaderBackgroundPressed)',
|
||||||
|
actionLink: 'var(--tw-fui-actionLink)',
|
||||||
|
actionLinkHovered: 'var(--tw-fui-actionLinkHovered)',
|
||||||
|
link: 'var(--tw-fui-link)',
|
||||||
|
linkHovered: 'var(--tw-fui-linkHovered)',
|
||||||
|
listTextColor: 'var(--tw-fui-listTextColor)',
|
||||||
|
menuItemBackgroundChecked: 'var(--tw-fui-menuItemBackgroundChecked)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
accessibility: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
alignContent: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
alignItems: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
alignSelf: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
appearance: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundAttachment: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundClip: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundImage: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gradientColorStops: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundPosition: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundRepeat: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
backgroundSize: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
borderCollapse: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
borderColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
borderOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
borderRadius: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
borderStyle: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
borderWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
boxShadow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
boxSizing: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
container: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
cursor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
display: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
divideColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
divideOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
divideStyle: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
divideWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
fill: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
flex: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
flexDirection: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
flexGrow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
flexShrink: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
flexWrap: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
float: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
clear: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
fontFamily: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
fontSize: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
fontSmoothing: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
fontVariantNumeric: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
fontStyle: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
fontWeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
height: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
inset: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
justifyContent: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
justifyItems: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
justifySelf: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
letterSpacing: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
lineHeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
listStylePosition: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
listStyleType: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
margin: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
maxHeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
maxWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
minHeight: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
minWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
objectFit: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
objectPosition: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
opacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
order: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
outline: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
overflow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
overscrollBehavior: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
padding: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
placeContent: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
placeItems: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
placeSelf: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
placeholderColor: customSpSectionVariant.concat(['focus']),
|
||||||
|
placeholderOpacity: customSpSectionVariant.concat(['focus']),
|
||||||
|
pointerEvents: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
position: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
resize: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
space: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
stroke: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
strokeWidth: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
tableLayout: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
textAlign: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
textColor: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
textOpacity: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
textDecoration: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
textTransform: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
userSelect: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
verticalAlign: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
visibility: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
whitespace: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
width: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
wordBreak: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
zIndex: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gap: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridAutoFlow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridTemplateColumns: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridColumn: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridColumnStart: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridColumnEnd: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridTemplateRows: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridRow: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridRowStart: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
gridRowEnd: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
transform: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
transformOrigin: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
scale: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
rotate: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
translate: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
skew: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
transitionProperty: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
transitionTimingFunction: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
transitionDuration: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
transitionDelay: customSpSectionVariant.concat(['hover', 'focus']),
|
||||||
|
animation: customSpSectionVariant
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
plugin(function ({ addVariant, e }) {
|
||||||
|
addVariant('sp-col-1', ({ modifySelectors, separator }) => {
|
||||||
|
modifySelectors(({ className }) => {
|
||||||
|
return `.CanvasSection.CanvasSection-col.CanvasSection-xl12 .${e(`sp-col-1${separator}${className}`)}`
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
addVariant('sp-col-1/2', ({ modifySelectors, separator }) => {
|
||||||
|
modifySelectors(({ className }) => {
|
||||||
|
return `.CanvasSection.CanvasSection-col.CanvasSection-xl6 .${e(`sp-col-1/2${separator}${className}`)}`
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
addVariant('sp-col-1/3', ({ modifySelectors, separator }) => {
|
||||||
|
modifySelectors(({ className }) => {
|
||||||
|
return `.CanvasSection.CanvasSection-col.CanvasSection-xl4 .${e(`sp-col-1/3${separator}${className}`)}`
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
addVariant('sp-col-2/3', ({ modifySelectors, separator }) => {
|
||||||
|
modifySelectors(({ className }) => {
|
||||||
|
return `.CanvasSection.CanvasSection-col.CanvasSection-xl8 .${e(`sp-col-2/3${separator}${className}`)}`
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
],
|
||||||
|
future: {
|
||||||
|
removeDeprecatedGapUtilities: true,
|
||||||
|
purgeLayersByDefault: true
|
||||||
|
}
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,39 @@
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "lib",
|
||||||
|
"inlineSources": false,
|
||||||
|
"strictNullChecks": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"es6-promise",
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"lib"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||||
|
"rules": {
|
||||||
|
"class-name": false,
|
||||||
|
"export-name": false,
|
||||||
|
"forin": false,
|
||||||
|
"label-position": false,
|
||||||
|
"member-access": true,
|
||||||
|
"no-arg": false,
|
||||||
|
"no-console": false,
|
||||||
|
"no-construct": false,
|
||||||
|
"no-duplicate-variable": true,
|
||||||
|
"no-eval": false,
|
||||||
|
"no-function-expression": true,
|
||||||
|
"no-internal-module": true,
|
||||||
|
"no-shadowed-variable": true,
|
||||||
|
"no-switch-case-fall-through": true,
|
||||||
|
"no-unnecessary-semicolons": true,
|
||||||
|
"no-unused-expression": true,
|
||||||
|
"no-use-before-declare": true,
|
||||||
|
"no-with-statement": true,
|
||||||
|
"semicolon": true,
|
||||||
|
"trailing-comma": false,
|
||||||
|
"typedef": false,
|
||||||
|
"typedef-whitespace": false,
|
||||||
|
"use-named-parameter": true,
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": false
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue