PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Deprecate the $spacing- variables (#10686)

Browse source 
* Deprecate the $spacing variables

* more comments
This commit is contained in:
Richard van der Hoff 2023-04-21 14:30:21 +01:00 committed by GitHub
parent 64997e6f69
commit 5fc402cda0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
res/css/_font-sizes.pcss
View file

@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/*
* SCSS variables defining a range of font sizes.
*
* These are defined in `rem` so that they scale with the `font-size` of the root element (which is adjustable via the
* "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS
* easier.
*
* That means that, slightly confusingly, `$font-10px` is only *actually* 10px at the default font size: at a base
* `font-size` of 15, it is actually 15px.
*/
$font-1px: 0.1rem;
$font-1-5px: 0.15rem;
$font-2px: 0.2rem;

12
res/css/_spacing.pcss
View file

@ -14,8 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
/* 1rem :: 10px */
/* SCSS variables representing a range of standard lengths.
*
* Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are
* effectively equivalent to using hardcoded values.
*
* In future, we plan to introduce variables named according to their purpose rather than their size. Additionally,
* we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have
* `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font
* sizes, for which see the `$font-<N>px` variables).
*/
$spacing-2: 2px;
$spacing-4: 4px;
$spacing-8: 8px;