composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-22 01:58:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

SCSS: Add font size variables / helpers

Browse Source
This commit is contained in:
Molkobain
2021-06-03 18:55:03 +02:00
parent d405fc0675
commit b072e1bb3d
1 changed files with 77 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
css/backoffice/utils/helpers/_typography.scss
View File

@@ -16,11 +16,55 @@
* You should have received a copy of the GNU Affero General Public License
*/
/*
* SCSS helpers for font sizes (use in SCSS files)
*
* Use them to only redefine the font size instead of the global font defnition, this way if the container's font changes
* the other properties will be propagated (weight, style)
*
* Usage: @extend %ibo-font-size-XXX;
*/
%ibo-font-size-50 {
font-size: $ibo-font-size-50;
}
%ibo-font-size-100 {
font-size: $ibo-font-size-100;
}
%ibo-font-size-150 {
font-size: $ibo-font-size-150;
}
%ibo-font-size-200 {
font-size: $ibo-font-size-200;
}
%ibo-font-size-250 {
font-size: $ibo-font-size-250;
}
%ibo-font-size-300 {
font-size: $ibo-font-size-300;
}
%ibo-font-size-350 {
font-size: $ibo-font-size-350;
}
%ibo-font-size-400 {
font-size: $ibo-font-size-400;
}
%ibo-font-size-450 {
font-size: $ibo-font-size-450;
}
%ibo-font-size-500 {
font-size: $ibo-font-size-500;
}
%ibo-font-size-550 {
font-size: $ibo-font-size-550;
}
/*
* SCSS helpers for font weights (use in SCSS files)
*
* Use them to only redefine the font weight instead of the global font defnition, this way if the container's font changes
* the other properties will be propagated (size, style)
*
* Usage: @extend %ibo-font-weight-XXX;
*/
%ibo-font-weight-100 {
font-weight: $ibo-font-weight-100;
@@ -57,6 +101,8 @@
* SCSS helpers for global font definition (use in SCSS files)
*
* Use this only when you want to completely redefine the font, otherwise use the other helpers above
*
* Usage: @extend %ibo-font-XXX-YYY;
*/
%ibo-font-ral-nor-50 {
font-size: $ibo-font-size-50;
@@ -577,11 +623,40 @@
font-weight: $ibo-font-weight-400;
}
/*
* CSS classes for font sizes (use in HTML markup, JS scripts)
*
* Use them to only redefine the font size instead of the global font defnition, this way if the container's font changes
* the other properties will be propagated (weight, style)
*
* Usage: .ibo-font-size-XXX;
*/
$ibo-font-sizes: (
'ibo-font-size-50',
'ibo-font-size-100',
'ibo-font-size-150',
'ibo-font-size-200',
'ibo-font-size-250',
'ibo-font-size-300',
'ibo-font-size-350',
'ibo-font-size-400',
'ibo-font-size-450',
'ibo-font-size-500',
'ibo-font-size-550'
);
@each $sFontSize in $ibo-font-sizes {
.#{$sFontSize} {
@extend %#{$sFontSize};
}
}
/*
* CSS classes for font weights (use in HTML markup, JS scripts)
*
* Use them to only redefine the font weight instead of the global font defnition, this way if the container's font changes
* the other properties will be propagated (size, style)
*
* Usage: .ibo-font-weight-XXX;
*/
$ibo-font-weights: (
'ibo-font-weight-100',
@@ -605,6 +680,8 @@ $ibo-font-weights: (
* CSS classes for global font wrappers (use in HTML markup, JS scripts)
*
* Use this only when you want to completely redefine the font, otherwise use the other helpers
*
* Usage: .ibo-font-XXX-YYY;
*/
$ibo-fonts-all: (
'ibo-font-ral-nor-50',
@@ -674,7 +751,6 @@ $ibo-fonts-all: (
'ibo-font-code-500',
'ibo-font-code-550'
);
@each $sFont in $ibo-fonts-all {
.#{$sFont} {
@extend %#{$sFont};