refactoring of the less infrastructure
Caleb James DeLisle
6 years ago
parent
507e5b18e9
commit
0d5ac05866
@ -1,40 +0,0 @@
|
||||
@import (reference) './include/font.less';
|
||||
.font_neuropolitical();
|
||||
.font_open-sans();
|
||||
|
||||
body.cp-page-index { @import "./pages/page-index.less"; }
|
||||
body.cp-page-contact { @import "./pages/page-contact.less"; }
|
||||
body.cp-page-login { @import "./pages/page-login.less"; }
|
||||
body.cp-page-register { @import "./pages/page-register.less"; }
|
||||
body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
|
||||
body.cp-page-about { @import "./pages/page-about.less"; }
|
||||
body.cp-page-privacy { @import "./pages/page-privacy.less"; }
|
||||
body.cp-page-terms { @import "./pages/page-terms.less"; }
|
||||
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
html.cp-app-noscroll {
|
||||
@import (reference) "./include/app-noscroll.less";
|
||||
.app-noscroll_main();
|
||||
}
|
||||
// Set the HTML style for printing slides
|
||||
html.cp-app-print {
|
||||
@import (reference) "./include/app-print.less";
|
||||
.app-print_main();
|
||||
}
|
||||
|
||||
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
|
||||
|
||||
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
|
||||
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
|
||||
body.cp-app-code { @import "../../../code/app-code.less"; }
|
||||
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
||||
body.cp-app-file { @import "../../../file/app-file.less"; }
|
||||
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
||||
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
|
||||
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
|
||||
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
|
||||
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
|
||||
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
|
||||
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
|
||||
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
.font_neuropolitical () {
|
||||
@font-face {
|
||||
.font_main () {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
}
|
||||
|
||||
// Fonts need to go on the global scope
|
||||
@font-face {
|
||||
font-family: Neuropolitical;
|
||||
src: url("/customize/fonts/neuropolitical.ttf");
|
||||
}
|
||||
}
|
||||
.font_open-sans () {
|
||||
@import (once) '/customize/fonts/open-sans.less';
|
||||
}
|
||||
|
||||
@import (once) '/customize/fonts/open-sans.less';
|
||||
@ -1,20 +0,0 @@
|
||||
@import (reference) "./colortheme-all.less";
|
||||
|
||||
.markdownToolbar_main (@color, @bg-color) {
|
||||
.cp-markdown-toolbar {
|
||||
height: @toolbar_line-height;
|
||||
background-color: lighten(@bg-color, 20%);
|
||||
display: none;
|
||||
button {
|
||||
height: @toolbar_line-height !important;
|
||||
outline: 0;
|
||||
color: @color;
|
||||
.toolbar_button;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
&:hover {
|
||||
background-color: lighten(@bg-color, 8%);
|
||||
}
|
||||
&.cp-markdown-help { float: right; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
@import (reference) './include/font.less';
|
||||
.font_neuropolitical();
|
||||
.font_open-sans();
|
||||
|
||||
body.cp-page-index { @import "./pages/page-index.less"; }
|
||||
body.cp-page-contact { @import "./pages/page-contact.less"; }
|
||||
body.cp-page-login { @import "./pages/page-login.less"; }
|
||||
body.cp-page-register { @import "./pages/page-register.less"; }
|
||||
body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
|
||||
body.cp-page-about { @import "./pages/page-about.less"; }
|
||||
body.cp-page-privacy { @import "./pages/page-privacy.less"; }
|
||||
body.cp-page-features { @import "./pages/page-features.less"; }
|
||||
body.cp-page-faq { @import "./pages/page-faq.less"; }
|
||||
body.cp-page-terms { @import "./pages/page-terms.less"; }
|
||||
|
||||
// Set the HTML style for the apps which shouldn't have a body scrollbar
|
||||
html.cp-app-noscroll {
|
||||
@import (reference) "./include/app-noscroll.less";
|
||||
.app-noscroll_main();
|
||||
}
|
||||
// Set the HTML style for printing slides
|
||||
html.cp-app-print {
|
||||
@import (reference) "./include/app-print.less";
|
||||
.app-print_main();
|
||||
}
|
||||
|
||||
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
|
||||
|
||||
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
|
||||
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
|
||||
body.cp-app-code { @import "../../../code/app-code.less"; }
|
||||
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
|
||||
body.cp-app-file { @import "../../../file/app-file.less"; }
|
||||
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
|
||||
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
|
||||
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
|
||||
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
|
||||
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
|
||||
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
|
||||
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
|
||||
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
|
||||
body.cp-app-worker { @import "../../../worker/app-worker.less"; }
|
||||
body.cp-app-kanban { @import "../../../kanban/app-kanban.less"; }
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import (once) "../include/infopages.less";
|
||||
@import (reference) "../include/infopages.less";
|
||||
@import (reference) "../include/colortheme-all.less";
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
&.cp-page-terms {
|
||||
.infopages_main();
|
||||
}
|
||||
|
||||
@ -1,19 +1,45 @@
|
||||
# CryptPad Styling
|
||||
|
||||
How it works:
|
||||
* In this example, we use the index page, for each page we will have a corresponding class name and a corresponding less file.
|
||||
* The index page has a main div containing everything `<div id="cp-main" class="cp-page-index">`
|
||||
* There is a corresponding less file called `less2/pages/page-index.less`
|
||||
* Finally there is a corresponding line in main.less which imports that less file: `div#main.cp-page-index { @import "./pages/page-index.less"; }`
|
||||
* cp-page-index class means:
|
||||
* cp -> cryptpad
|
||||
* page -> this is a style for accessing a page's less file
|
||||
* index -> the name of the page and of the less file (page-index.less)
|
||||
* And everything which is standardized across pages is included from `page-index.less` as variables and mixins.
|
||||
## Linking Less/CSS
|
||||
|
||||
In order to keep the amount of CSS generated under control, we use "linking", via the LessLoader.
|
||||
This makes use of CSS variables in order to work. The old solution was to put all of the content into less mixins
|
||||
which would be used inside of the scope where they should be, but this caused a state explosion because each app needed
|
||||
essentially the same mixins. However, these mixins had arguments such as colors which were different per-app.
|
||||
|
||||
The new solution is to set CSS variables for the arguments (like color) and then put the bulk of the less at the global
|
||||
scope. When you include a dependency, the following happens:
|
||||
|
||||
1. You `@include (reference) './include/dependency.less`. The (reference) argument which means it will not emit CSS,
|
||||
this is important because otherwise all of the dependencies of your app's less file would end up bundled with it, the
|
||||
state explosion problem.
|
||||
2. You invoke `.dependency_main(@arg1 @arg2)` inside of the scope you want it in, the name `dependency_main` is a
|
||||
convention, all less variables, mixins, or CSS variables which a file creates should be prefixed with the name of the
|
||||
file (in this case, "dependency").
|
||||
3. The mixin `.dependency_main` does a couple of things:
|
||||
* First, it sets a CSS variable called `--LessLoader_require`, this is a special variable which the browser does not
|
||||
use, the only objective of this variable is to inform LessLoader that another file is needed. To do this, there is a
|
||||
helper function (also specified in LessLoader.js) called `LessLoader_currentFile()`. The syntax is:
|
||||
`--LessLoader_require: LessLoader_currentFile();` and in the CSS, this outputs something like:
|
||||
`--LessLoader_require: "/customize/src/less2/include/dependency.less?ver=2.4.0-1531572157592";`
|
||||
* Secondly, it sets browser variables for it's arguments, making sure to avoid namespace collisions:
|
||||
`--dependency-arg1: @arg1;`, `--dependency-arg2: @arg2;`. Sometimes a less transformation needs to be done on a
|
||||
variable, unfortunately in this case the transformation must be done here and the transformed variable must be output.
|
||||
`--dependency-arg1-l10: lighten(@arg1, 10%);`.
|
||||
4. After less processing is completed, the LessLoader caches the result of parsing, then scans the it for instances of
|
||||
`--LessLoader_require` variable and then processes them, but it does this separately. So even if dependency.less is
|
||||
required many times, it will only be processed by the less interpreter once.
|
||||
|
||||
## Other convensions
|
||||
|
||||
Rules:
|
||||
* All of our new classes and ids should start with `cp-`.
|
||||
* You may make as many files as you need, for different purposes, but they can only contain mixins and variables.
|
||||
* The document body has a class on it depending on the app/page, app classes begin with `cp-app-` and page classes begin
|
||||
with `cp-page-`.
|
||||
* Custom classes ought to begin with `cp-` and the name of the file where the rules are written for them (see help.less as
|
||||
an example of doing the right thing).
|
||||
* Since the include files generate CSS and the app cannot control the scope which it's run at, be considerate avoid
|
||||
making an include file which changes something significant (like making a rule for `li`). help.less is an excellent example
|
||||
of doing this well, infopages.less is the worst example (fortunately it doesn't get included in any of the apps).
|
||||
* All mixins and variables must be prefixed with the name of the file where they're defined and and underscore.
|
||||
* e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less`
|
||||
* All mixin / variable files go in an `/include/` directory.
|
||||
|
||||
Loading…
Reference in New Issue