summary refs log tree commit diff
diff options
context:
space:
mode:
authorJorik Schellekens <joriks@matrix.org>2019-08-13 15:29:20 +0100
committerJorik Schellekens <joriks@matrix.org>2019-08-28 15:59:53 +0100
commit58964e4063dcf4220c795f91c594250e222150ac (patch)
tree5e31d1f862523c097095d356569dd4c7e2464fff
parentToggle a bit better. (diff)
downloadsynapse-58964e4063dcf4220c795f91c594250e222150ac.tar.xz
Move to scss.
Diffstat
-rw-r--r--synapse_topology/view/webui/index.html2


-rw-r--r--synapse_topology/view/webui/js/components/BaseIntro.jsx2


-rw-r--r--synapse_topology/view/webui/js/components/ButtonDisplay.jsx2


-rw-r--r--synapse_topology/view/webui/js/components/ContentWrapper.jsx2


-rw-r--r--synapse_topology/view/webui/js/components/DelegationOptions.jsx2


-rw-r--r--synapse_topology/view/webui/js/components/Error.jsx2


-rw-r--r--synapse_topology/view/webui/js/components/Loading.jsx2


-rw-r--r--synapse_topology/view/webui/js/components/TLS.jsx2


-rw-r--r--synapse_topology/view/webui/js/components/UI.jsx2


-rw-r--r--synapse_topology/view/webui/js/index.jsx2


-rw-r--r--synapse_topology/view/webui/less/themes.less8


-rw-r--r--synapse_topology/view/webui/package.json5


-rw-r--r--synapse_topology/view/webui/scss/animations.scss (renamed from synapse_topology/view/webui/less/animations.less)4


-rw-r--r--synapse_topology/view/webui/scss/bootstrap.min.css (renamed from synapse_topology/view/webui/less/bootstrap.min.css)0


-rw-r--r--synapse_topology/view/webui/scss/main.scss (renamed from synapse_topology/view/webui/less/main.less)57


-rw-r--r--synapse_topology/view/webui/scss/themes.scss8


-rw-r--r--synapse_topology/view/webui/webpack.config.babel.js20


17 files changed, 55 insertions, 67 deletions
diff --git a/synapse_topology/view/webui/index.html b/synapse_topology/view/webui/index.html
index 61c391a798..6eac2d5e13 100644
--- a/synapse_topology/view/webui/index.html
+++ b/synapse_topology/view/webui/index.html
@@ -5,7 +5,7 @@
   <title>Topology - The synapse configuration tool</title>
 </head>
 
-<link rel="stylesheet" href="less/bootstrap.min.css">
+<link rel="stylesheet" href="scss/bootstrap.min.css">
 
 <body>
   <div id="content" />
diff --git a/synapse_topology/view/webui/js/components/BaseIntro.jsx b/synapse_topology/view/webui/js/components/BaseIntro.jsx
index 91c9a9348e..35824fb36d 100644
--- a/synapse_topology/view/webui/js/components/BaseIntro.jsx
+++ b/synapse_topology/view/webui/js/components/BaseIntro.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 import ContentWrapper from '../containers/ContentWrapper';
 import ButtonDisplay from './ButtonDisplay';
 
diff --git a/synapse_topology/view/webui/js/components/ButtonDisplay.jsx b/synapse_topology/view/webui/js/components/ButtonDisplay.jsx
index 35495dccdf..8f3cade0c2 100644
--- a/synapse_topology/view/webui/js/components/ButtonDisplay.jsx
+++ b/synapse_topology/view/webui/js/components/ButtonDisplay.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 
 export default ({ children }) => <div className={style.buttonDisplay}>{children}</div>
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/components/ContentWrapper.jsx b/synapse_topology/view/webui/js/components/ContentWrapper.jsx
index c9b0dcf29c..dfd68a6adb 100644
--- a/synapse_topology/view/webui/js/components/ContentWrapper.jsx
+++ b/synapse_topology/view/webui/js/components/ContentWrapper.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 
 export default ({ servername, children }) => {
   if (servername) {
diff --git a/synapse_topology/view/webui/js/components/DelegationOptions.jsx b/synapse_topology/view/webui/js/components/DelegationOptions.jsx
index 354a414da8..b20529dcff 100644
--- a/synapse_topology/view/webui/js/components/DelegationOptions.jsx
+++ b/synapse_topology/view/webui/js/components/DelegationOptions.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
diff --git a/synapse_topology/view/webui/js/components/Error.jsx b/synapse_topology/view/webui/js/components/Error.jsx
index d401268be0..6f01286340 100644
--- a/synapse_topology/view/webui/js/components/Error.jsx
+++ b/synapse_topology/view/webui/js/components/Error.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 import ContentWrapper from '../containers/ContentWrapper';
 
 export default () => {
diff --git a/synapse_topology/view/webui/js/components/Loading.jsx b/synapse_topology/view/webui/js/components/Loading.jsx
index d519f5a2c7..8b8c598dff 100644
--- a/synapse_topology/view/webui/js/components/Loading.jsx
+++ b/synapse_topology/view/webui/js/components/Loading.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 import ContentWrapper from '../containers/ContentWrapper';
 
 export default () => {
diff --git a/synapse_topology/view/webui/js/components/TLS.jsx b/synapse_topology/view/webui/js/components/TLS.jsx
index 56ca3890e8..9132b97d47 100644
--- a/synapse_topology/view/webui/js/components/TLS.jsx
+++ b/synapse_topology/view/webui/js/components/TLS.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
diff --git a/synapse_topology/view/webui/js/components/UI.jsx b/synapse_topology/view/webui/js/components/UI.jsx
index 8e42d86c7b..b5c3297adf 100644
--- a/synapse_topology/view/webui/js/components/UI.jsx
+++ b/synapse_topology/view/webui/js/components/UI.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from '../../less/main.less';
+import style from '../../scss/main.scss';
 
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
diff --git a/synapse_topology/view/webui/js/index.jsx b/synapse_topology/view/webui/js/index.jsx
index aeff2d5c87..282e6ae9de 100644
--- a/synapse_topology/view/webui/js/index.jsx
+++ b/synapse_topology/view/webui/js/index.jsx
@@ -5,7 +5,7 @@ import { createStore, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk';
 import rootReducer from './reducers';
 import UI from './containers/UI';
-import style from '../less/main.less';
+import style from '../scss/main.scss';
 import logo from '../fonts/matrix-logo.svg';
 
 import { startup } from './actions';
diff --git a/synapse_topology/view/webui/less/themes.less b/synapse_topology/view/webui/less/themes.less
deleted file mode 100644
index c96c258d7f..0000000000
--- a/synapse_topology/view/webui/less/themes.less
+++ /dev/null
@@ -1,8 +0,0 @@
-.dark {
-  @primary: #ffffff;
-  @secondary: #f4f4f4;
-  @tertiary: #3b444b;
-  @font:  #333;
-  @highlight: #4AEFF0;
-  @link: #0098d4;
-}
\ No newline at end of file
diff --git a/synapse_topology/view/webui/package.json b/synapse_topology/view/webui/package.json
index 80b9ff1626..4b30548286 100644
--- a/synapse_topology/view/webui/package.json
+++ b/synapse_topology/view/webui/package.json
@@ -15,14 +15,15 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.5.5",
     "babel-loader": "^8.0.6",
-    "css-loader": "^3.1.0",
+    "css-loader": "^3.2.0",
     "file-loader": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.9.0",
-    "less-loader": "^5.0.0",
+    "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "redux-devtools-extension": "^2.13.8",
+    "sass-loader": "^7.2.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.38.0",
     "webpack-cli": "^3.3.6",
diff --git a/synapse_topology/view/webui/less/animations.less b/synapse_topology/view/webui/scss/animations.scss
index 470787dc3e..5f0f5aea53 100644
--- a/synapse_topology/view/webui/less/animations.less
+++ b/synapse_topology/view/webui/scss/animations.scss
@@ -1,4 +1,4 @@
-.rippler {
+@mixin rippler {
   position: relative;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
@@ -28,7 +28,7 @@
 }
 
 
-.dropshadowed {
+@mixin dropshadowed {
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 
diff --git a/synapse_topology/view/webui/less/bootstrap.min.css b/synapse_topology/view/webui/scss/bootstrap.min.css
index 92e3fe8712..92e3fe8712 100644
--- a/synapse_topology/view/webui/less/bootstrap.min.css
+++ b/synapse_topology/view/webui/scss/bootstrap.min.css
diff --git a/synapse_topology/view/webui/less/main.less b/synapse_topology/view/webui/scss/main.scss
index e964efb76b..6b0723fc01 100644
--- a/synapse_topology/view/webui/less/main.less
+++ b/synapse_topology/view/webui/scss/main.scss
@@ -1,13 +1,8 @@
-@import url('./themes.less');
-@import url('./animations.less');
+@import './themes.scss';
+@import './animations.scss';
 
-@font-face {
-  font-family: "Helvetica Neue", "Helvetica", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  src: url('../fonts/LiberationSans-Bold.ttf') format('truetype');
-}
-
-.theme {
-  .dark();
+@mixin theme {
+  @include dark;
 }
 
 html {
@@ -21,15 +16,15 @@ html {
 }
 
 body {
-  .theme();
-  background-color: @primary;
-  color: @font;
+  @include theme;
+  background-color: $primary;
+  color: $font;
   margin: 0;
 }
 
 a {
-  .theme();
-  color: @link;
+  @include theme;
+  color: $link;
   text-decoration: none;
 }
 
@@ -49,7 +44,7 @@ a {
 
 
 .contentWrapper {
-  .theme();
+  @include theme;
   margin: 0 20% 2rem 20%;
   display: flex;
   flex-direction: column;
@@ -70,42 +65,46 @@ a {
   }
 
   button {
-    .rippler();
-    .dropshadowed();
+    @include rippler;
+    @include dropshadowed;
     border-radius: 0.5rem;
     font-size: 1rem;
     padding: 0.6rem;
-    color: @font;
-    background-color: @tertiary;
+    color: $font;
+    background-color: $tertiary;
     border: none;
     display: inline-block;
     text-transform: capitalize;
     font-style: bold;
-    color: @primary;
+    color: $primary;
     margin-left: 0.4rem;
     margin-right: 0.4rem;
   }
 
 
   button[disabled] {
-    background-color: darken(@secondary, 20%);
-    color: lighten(@font, 20%);
+    background-color: darken($secondary, 20%);
+    color: lighten($font, 20%);
   }
 
-  input, .select {
+  @mixin select {
     padding: 0.4rem;
     font-size: 1rem;
-    background-color: @secondary;
+    background-color: $secondary;
     border-width: 0.1rem;
     border-radius: 0.5rem;
-    color: lighten(@font, 20%);
+    color: lighten($font, 20%);
     margin-bottom: 1rem;
     border-style: solid;
-    border-color: darken(@secondary, 50%);
+    border-color: darken($secondary, 50%);
+  }
+
+  input {
+    @include select;
   }
 
   select {
-    .select();
+    @include select;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -122,7 +121,7 @@ a {
     font-size: 0.6rem;
     text-align: left;
     border-style: solid;
-    border-color: darken(@secondary, 50%);
+    border-color: darken($secondary, 50%);
     border-radius: 0.5rem;
     text-decoration: none;
   }
@@ -141,6 +140,6 @@ a {
 }
 
 h1 {
-  .theme();
+  @include theme;
   font-size: 2rem;
 }
\ No newline at end of file
diff --git a/synapse_topology/view/webui/scss/themes.scss b/synapse_topology/view/webui/scss/themes.scss
new file mode 100644
index 0000000000..8192a690e0
--- /dev/null
+++ b/synapse_topology/view/webui/scss/themes.scss
@@ -0,0 +1,8 @@
+@mixin dark {
+  $primary: #ffffff !global;
+  $secondary: #f4f4f4 !global;
+  $tertiary: #3b444b !global;
+  $font:  #333 !global;
+  $highlight: #4AEFF0 !global;
+  $link: #0098d4 !global;
+}
\ No newline at end of file
diff --git a/synapse_topology/view/webui/webpack.config.babel.js b/synapse_topology/view/webui/webpack.config.babel.js
index d4226bad19..6477b3afc4 100644
--- a/synapse_topology/view/webui/webpack.config.babel.js
+++ b/synapse_topology/view/webui/webpack.config.babel.js
@@ -18,23 +18,11 @@ export default {
         use: ['babel-loader'],
       },
       {
-        test: /\.less$/,
+        test: /\.scss$/,
         use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              modules: {
-                localIdentName: '[local]___[hash:base64:5]'
-              }
-            },
-          },
-          {
-            loader: 'less-loader',
-          },
+	  'style-loader',
+	  'css-loader',
+	  'sass-loader',
         ],
       },
       {

 

generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-02-07 22:02:21 +0000