mirror of
https://github.com/vector-im/element-web.git
synced 2024-09-09 22:55:12 +00:00
experimental postcss
This commit is contained in:
parent
35b3013386
commit
691fe611d6
7 changed files with 94 additions and 153 deletions
14
package.json
14
package.json
|
@ -31,7 +31,7 @@
|
|||
"build:config": "cpx config.json webapp/",
|
||||
"build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/",
|
||||
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
|
||||
"build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"",
|
||||
"build:css": "mkdirp build && postcss -c postcss.config.json",
|
||||
"build:compile": "babel --source-maps -d lib src",
|
||||
"build:bundle": "NODE_ENV=production webpack -p --progress",
|
||||
"build:bundle:dev": "webpack --optimize-occurence-order --progress",
|
||||
|
@ -44,7 +44,7 @@
|
|||
"start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w",
|
||||
"start:js": "webpack-dev-server -w --progress",
|
||||
"start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
|
||||
"start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"",
|
||||
"start:skins:css": "mkdirp build && postcss -c postcss.config.json -w",
|
||||
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"",
|
||||
"start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"",
|
||||
"clean": "rimraf build lib webapp electron/dist",
|
||||
|
@ -80,6 +80,7 @@
|
|||
"url": "^0.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.6.0",
|
||||
"babel-cli": "^6.5.2",
|
||||
"babel-core": "^6.14.0",
|
||||
"babel-eslint": "^6.1.0",
|
||||
|
@ -116,10 +117,17 @@
|
|||
"node-sass": "^4.1.1",
|
||||
"parallelshell": "^1.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.7",
|
||||
"postcss-cli": "^2.6.0",
|
||||
"postcss-extend": "^1.0.5",
|
||||
"postcss-import": "^9.0.0",
|
||||
"postcss-mixins": "^5.4.1",
|
||||
"postcss-nested": "^1.0.0",
|
||||
"postcss-scss": "^0.4.0",
|
||||
"postcss-simple-vars": "^3.0.0",
|
||||
"postcss-strip-inline-comments": "^0.1.5",
|
||||
"react-addons-perf": "^15.4.0",
|
||||
"react-addons-test-utils": "^15.4.0",
|
||||
"rimraf": "^2.4.3",
|
||||
"sass-loader": "^4.1.1",
|
||||
"source-map-loader": "^0.1.5",
|
||||
"webpack": "^1.12.14",
|
||||
"webpack-dev-server": "^1.16.2"
|
||||
|
|
|
@ -1,73 +1,74 @@
|
|||
// autogenerated by rethemendex.sh
|
||||
@import "_common";
|
||||
@import "matrix-react-sdk/structures/_ContextualMenu";
|
||||
@import "matrix-react-sdk/structures/_CreateRoom";
|
||||
@import "matrix-react-sdk/structures/_FilePanel";
|
||||
@import "matrix-react-sdk/structures/_MatrixChat";
|
||||
@import "matrix-react-sdk/structures/_NotificationPanel";
|
||||
@import "matrix-react-sdk/structures/_RoomStatusBar";
|
||||
@import "matrix-react-sdk/structures/_RoomView";
|
||||
@import "matrix-react-sdk/structures/_SearchBox";
|
||||
@import "matrix-react-sdk/structures/_UploadBar";
|
||||
@import "matrix-react-sdk/structures/_UserSettings";
|
||||
@import "matrix-react-sdk/structures/login/_Login";
|
||||
@import "matrix-react-sdk/views/avatars/_BaseAvatar";
|
||||
@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog";
|
||||
@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog";
|
||||
@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog";
|
||||
@import "matrix-react-sdk/views/elements/_AddressSelector";
|
||||
@import "matrix-react-sdk/views/elements/_AddressTile";
|
||||
@import "matrix-react-sdk/views/elements/_DirectorySearchBox";
|
||||
@import "matrix-react-sdk/views/elements/_MemberEventListSummary";
|
||||
@import "matrix-react-sdk/views/elements/_ProgressBar";
|
||||
@import "matrix-react-sdk/views/elements/_RichText";
|
||||
@import "matrix-react-sdk/views/login/_ServerConfig";
|
||||
@import "matrix-react-sdk/views/messages/_MImageBody";
|
||||
@import "matrix-react-sdk/views/messages/_MNoticeBody";
|
||||
@import "matrix-react-sdk/views/messages/_MTextBody";
|
||||
@import "matrix-react-sdk/views/messages/_TextualEvent";
|
||||
@import "matrix-react-sdk/views/messages/_UnknownBody";
|
||||
@import "matrix-react-sdk/views/rooms/_Autocomplete";
|
||||
@import "matrix-react-sdk/views/rooms/_EntityTile";
|
||||
@import "matrix-react-sdk/views/rooms/_EventTile";
|
||||
@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget";
|
||||
@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo";
|
||||
@import "matrix-react-sdk/views/rooms/_MemberInfo";
|
||||
@import "matrix-react-sdk/views/rooms/_MemberList";
|
||||
@import "matrix-react-sdk/views/rooms/_MessageComposer";
|
||||
@import "matrix-react-sdk/views/rooms/_PresenceLabel";
|
||||
@import "matrix-react-sdk/views/rooms/_RoomHeader";
|
||||
@import "matrix-react-sdk/views/rooms/_RoomList";
|
||||
@import "matrix-react-sdk/views/rooms/_RoomPreviewBar";
|
||||
@import "matrix-react-sdk/views/rooms/_RoomSettings";
|
||||
@import "matrix-react-sdk/views/rooms/_RoomTile";
|
||||
@import "matrix-react-sdk/views/rooms/_SearchableEntityList";
|
||||
@import "matrix-react-sdk/views/rooms/_TabCompleteBar";
|
||||
@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar";
|
||||
@import "matrix-react-sdk/views/settings/_DevicesPanel";
|
||||
@import "matrix-react-sdk/views/settings/_IntegrationsManager";
|
||||
@import "matrix-react-sdk/views/voip/_CallView";
|
||||
@import "matrix-react-sdk/views/voip/_IncomingCallbox";
|
||||
@import "matrix-react-sdk/views/voip/_VideoView";
|
||||
@import "vector-web/_fonts";
|
||||
@import "vector-web/structures/_CompatibilityPage";
|
||||
@import "vector-web/structures/_LeftPanel";
|
||||
@import "vector-web/structures/_RightPanel";
|
||||
@import "vector-web/structures/_RoomDirectory";
|
||||
@import "vector-web/structures/_RoomSubList";
|
||||
@import "vector-web/structures/_ViewSource";
|
||||
@import "vector-web/views/context_menus/_MessageContextMenu";
|
||||
@import "vector-web/views/context_menus/_NotificationStateContextMenu";
|
||||
@import "vector-web/views/context_menus/_RoomTagContextMenu";
|
||||
@import "vector-web/views/dialogs/_ChangelogDialog";
|
||||
@import "vector-web/views/directory/_NetworkDropdown";
|
||||
@import "vector-web/views/elements/_ImageView";
|
||||
@import "vector-web/views/elements/_Spinner";
|
||||
@import "vector-web/views/globals/_GuestWarningBar";
|
||||
@import "vector-web/views/globals/_MatrixToolbar";
|
||||
@import "vector-web/views/messages/_MessageTimestamp";
|
||||
@import "vector-web/views/messages/_SenderProfile";
|
||||
@import "vector-web/views/rooms/_RoomDropTarget";
|
||||
@import "vector-web/views/rooms/_RoomTooltip";
|
||||
@import "vector-web/views/rooms/_SearchBar";
|
||||
@import "vector-web/views/settings/_Notifications";
|
||||
@import "./_common.scss";
|
||||
@import "./matrix-react-sdk/structures/_ContextualMenu.scss";
|
||||
@import "./matrix-react-sdk/structures/_CreateRoom.scss";
|
||||
@import "./matrix-react-sdk/structures/_FilePanel.scss";
|
||||
@import "./matrix-react-sdk/structures/_MatrixChat.scss";
|
||||
@import "./matrix-react-sdk/structures/_NotificationPanel.scss";
|
||||
@import "./matrix-react-sdk/structures/_RoomStatusBar.scss";
|
||||
@import "./matrix-react-sdk/structures/_RoomView.scss";
|
||||
@import "./matrix-react-sdk/structures/_SearchBox.scss";
|
||||
@import "./matrix-react-sdk/structures/_UploadBar.scss";
|
||||
@import "./matrix-react-sdk/structures/_UserSettings.scss";
|
||||
@import "./matrix-react-sdk/structures/login/_Login.scss";
|
||||
@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
|
||||
@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
|
||||
@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
|
||||
@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_AddressSelector.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_AddressTile.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
|
||||
@import "./matrix-react-sdk/views/elements/_RichText.scss";
|
||||
@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_MImageBody.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_MTextBody.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_TextualEvent.scss";
|
||||
@import "./matrix-react-sdk/views/messages/_UnknownBody.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_EntityTile.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_EventTile.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MemberList.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss";
|
||||
@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
|
||||
@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
|
||||
@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
|
||||
@import "./matrix-react-sdk/views/voip/_CallView.scss";
|
||||
@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
|
||||
@import "./matrix-react-sdk/views/voip/_VideoView.scss";
|
||||
@import "./themes/_base.scss";
|
||||
@import "./vector-web/_fonts.scss";
|
||||
@import "./vector-web/structures/_CompatibilityPage.scss";
|
||||
@import "./vector-web/structures/_LeftPanel.scss";
|
||||
@import "./vector-web/structures/_RightPanel.scss";
|
||||
@import "./vector-web/structures/_RoomDirectory.scss";
|
||||
@import "./vector-web/structures/_RoomSubList.scss";
|
||||
@import "./vector-web/structures/_ViewSource.scss";
|
||||
@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
|
||||
@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss";
|
||||
@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss";
|
||||
@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
|
||||
@import "./vector-web/views/directory/_NetworkDropdown.scss";
|
||||
@import "./vector-web/views/elements/_ImageView.scss";
|
||||
@import "./vector-web/views/elements/_Spinner.scss";
|
||||
@import "./vector-web/views/globals/_GuestWarningBar.scss";
|
||||
@import "./vector-web/views/globals/_MatrixToolbar.scss";
|
||||
@import "./vector-web/views/messages/_MessageTimestamp.scss";
|
||||
@import "./vector-web/views/messages/_SenderProfile.scss";
|
||||
@import "./vector-web/views/rooms/_RoomDropTarget.scss";
|
||||
@import "./vector-web/views/rooms/_RoomTooltip.scss";
|
||||
@import "./vector-web/views/rooms/_SearchBar.scss";
|
||||
@import "./vector-web/views/settings/_Notifications.scss";
|
||||
|
|
|
@ -4,5 +4,5 @@ echo "// autogenerated by rethemendex.sh" > _components.scss
|
|||
|
||||
for i in `find . -iname _\*.scss | fgrep -v _components.scss`;
|
||||
do
|
||||
echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss
|
||||
echo "@import \"$i\";" >> _components.scss
|
||||
done
|
||||
|
|
|
@ -1,72 +1,4 @@
|
|||
@import "_base";
|
||||
|
||||
// typical text (dark-on-white in light skin)
|
||||
$primary-fg-color: #dddddd;
|
||||
$primary-bg-color: #2d2d2d;
|
||||
|
||||
// used for focusing form controls
|
||||
$focus-bg-color: #101010;
|
||||
|
||||
// used for dialog box text
|
||||
$light-fg-color: #747474;
|
||||
|
||||
// button UI (white-on-green in light skin)
|
||||
$accent-fg-color: $primary-bg-color;
|
||||
$accent-color: #76CFA6;
|
||||
|
||||
// red warning colour
|
||||
$warning-color: #ff0064;
|
||||
|
||||
// left-panel style muted accent color
|
||||
$secondary-accent-color: $primary-bg-color;
|
||||
|
||||
// used by AddressSelector
|
||||
$selected-color: #eaf5f0;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: #353535;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: #474747;
|
||||
|
||||
// used for the border of input text fields
|
||||
$input-border-color: #3a3a3a;
|
||||
|
||||
// apart from login forms, which have stronger border
|
||||
$strong-input-border-color: #656565;
|
||||
|
||||
// context menus
|
||||
$menu-border-color: rgba(187, 187, 187, 0.5);
|
||||
$menu-bg-color: #373737;
|
||||
|
||||
$avatar-initial-color: #2d2d2d;
|
||||
|
||||
// ********************
|
||||
|
||||
$roomtile-name-color: rgba(186, 186, 186, 0.8);
|
||||
$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
$roomsublist-label-fg-color: $primary-fg-color;
|
||||
$roomsublist-label-bg-color: #454545;
|
||||
|
||||
// ********************
|
||||
|
||||
// event tile lifecycle
|
||||
$event-encrypting-color: #abddbc;
|
||||
$event-sending-color: #ddd;
|
||||
$event-notsent-color: #f44;
|
||||
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
$e2e-unverified-color: #e8bf37;
|
||||
$e2e-warning-color: #ba6363;
|
||||
|
||||
/*** ImageView ***/
|
||||
$lightbox-bg-color: #454545;
|
||||
$lightbox-fg-color: #ffffff;
|
||||
$lightbox-border-color: #ffffff;
|
||||
|
||||
@import "../_components";
|
||||
@import "_base.scss";
|
||||
@import "_dark.scss";
|
||||
@import "../_components.scss";
|
||||
// moofleasdadsasdadsa
|
|
@ -1,2 +1,2 @@
|
|||
@import "_base";
|
||||
@import "../_components";
|
||||
@import "_base.scss";
|
||||
@import "../_components.scss";
|
|
@ -30,7 +30,7 @@ require('babel-polyfill');
|
|||
|
||||
// CSS requires: just putting them here for now as CSS is going to be
|
||||
// refactored "soon" anyway
|
||||
require('../../build/themes/dark.css');
|
||||
require('../../build/dark.scss');
|
||||
require('gemini-scrollbar/gemini-scrollbar.css');
|
||||
require('gfm.css/gfm.css');
|
||||
require('highlight.js/styles/github.css');
|
||||
|
|
|
@ -24,8 +24,8 @@ module.exports = {
|
|||
{ test: /\.json$/, loader: "json" },
|
||||
{ test: /\.js$/, loader: "babel", include: path.resolve('./src') },
|
||||
// css-raw-loader loads CSS but doesn't try to treat url()s as require()s
|
||||
{ test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
|
||||
{ test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] },
|
||||
// we're assuming that postcss has already preprocessed SCSS by this point
|
||||
{ test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
|
||||
],
|
||||
noParse: [
|
||||
// don't parse the languages within highlight.js. They cause stack
|
||||
|
|
Loading…
Reference in a new issue