SCSS: Replace font global redefinition with more accurate overloads (only size, only weight, ...) to simplify styles inheritance

2026-02-13 07:24:13 +01:00 · 2021-06-03 22:12:28 +02:00
parent 117bf3046d
commit 742e3a2a20
25 changed files with 39 additions and 43 deletions
--- a/css/backoffice/components/_alert.scss
+++ b/css/backoffice/components/_alert.scss
@@ -77,7 +77,7 @@ $ibo-alert-colors: (
 	border-radius: $ibo-alert--border-radius;
 	overflow: hidden; /* To force highlight color to be cropped by the border radius */

-	@extend %ibo-font-ral-med-150;
+	@extend %ibo-font-size-150;

 	&::before {
 		display: block;
@@ -93,7 +93,7 @@ $ibo-alert-colors: (
 	.ibo-alert--title {
 		cursor: pointer;

-		@extend %ibo-font-ral-bol-150;
+		@extend %ibo-font-weight-700;
 	}
 	
 	&.ibo-is-opened {
--- a/css/backoffice/components/_breadcrumbs.scss
+++ b/css/backoffice/components/_breadcrumbs.scss
@@ -37,7 +37,7 @@ $ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
 }
 .ibo-breadcrumbs--item{
 	color: $ibo-breadcrumbs--item--text-color;
-	@extend %ibo-font-ral-nor-100;
+	@extend %ibo-font-ral-med-100;

 	&:not(:last-child){
 		&::after{
@@ -59,7 +59,7 @@ $ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
 }
 .ibo-breadcrumbs--item-icon{
 	margin-right: $ibo-breadcrumbs--item-icon--margin-x;
-	@extend %ibo-font-ral-nor-150;
+	@extend %ibo-font-size-150;
 	transition: all 0.1s linear;

 	> span{
--- a/css/backoffice/components/_collapsible-section.scss
+++ b/css/backoffice/components/_collapsible-section.scss
@@ -84,7 +84,7 @@ $ibo-collapsible-section--body--border-color: $ibo-color-grey-400 !default;

 		.ibo-collapsible-section--title {
 			color: $ibo-collapsible-section--title--color;
-			@extend %ibo-font-ral-med-250;
+			@extend %ibo-font-size-250;
 			flex-grow: 1;
 		}
 	}
--- a/css/backoffice/components/_datatable.scss
+++ b/css/backoffice/components/_datatable.scss
@@ -25,7 +25,7 @@ $ibo-fieldsorter--selected--background-color: $ibo-color-blue-200 !default;
  padding: $ibo-datatable--toolbar--padding-y $ibo-datatable--toolbar--padding-x;

  color: $ibo-datatable--toolbar--text-color;
-  @extend %ibo-font-ral-med-100;
+  @extend %ibo-font-size-100;

  /* Above the table */
  &:first-child {
--- a/css/backoffice/components/_field-badge.scss
+++ b/css/backoffice/components/_field-badge.scss
@@ -10,8 +10,6 @@ $ibo-field-badge--border-radius: $ibo-border-radius-300 !default;
 $ibo-field-badge--label--spacing-x: 0.5rem !default;

 .ibo-field-badge {
-  @extend %ibo-font-ral-med-100;
-
  margin: $ibo-field-badge--margin;
  padding: $ibo-field-badge--padding;
  border-radius: $ibo-field-badge--border-radius;
--- a/css/backoffice/components/_field.scss
+++ b/css/backoffice/components/_field.scss
@@ -31,7 +31,7 @@ $ibo-field--value-decoration--spacing-x: 0.5rem !default;

 /* SCSS rules */
 .ibo-field {
-  @extend %ibo-font-ral-nor-150;
+  @extend %ibo-font-size-150;

  /* Avoid value to overflow from its container with very long strings (typically URLs) */
  /* Note: Some types of attribute must be excluding as it can alter their rendering    */
@@ -113,7 +113,7 @@ $ibo-field--value-decoration--spacing-x: 0.5rem !default;

  @extend %ibo-hyperlink-inherited-colors;
  @extend %ibo-fully-centered-content;
-  @extend %ibo-font-ral-nor-100;
+  @extend %ibo-font-size-100;

  &:hover {
    background-color: $ibo-field--fullscreen-toggler--background-color--on-hover;
@@ -124,6 +124,7 @@ $ibo-field--value-decoration--spacing-x: 0.5rem !default;
  min-width: 100px;
  max-width: 145px;
  width: 30%;
+  @extend %ibo-font-weight-600;

  > .ibo-has-description {
    &::after {
@@ -182,7 +183,7 @@ $ibo-field--value-decoration--spacing-x: 0.5rem !default;
 .object-ref-icon, .object-ref-icon-disabled {
  &.text_decoration {
    margin-right: $ibo-field--value-decoration--spacing-x;
-    @extend %ibo-font-ral-nor-100;
+    @extend %ibo-font-size-100;
  }
 }

--- a/css/backoffice/components/_fieldset.scss
+++ b/css/backoffice/components/_fieldset.scss
@@ -24,5 +24,5 @@ $ibo-fieldset--legend--border-bottom-style: solid !default;
  padding-bottom: $ibo-fieldset--legend--padding-bottom;
  border-bottom: $ibo-fieldset--legend--border-bottom-size $ibo-fieldset--legend--border-bottom-style $ibo-fieldset--legend--border-bottom-color;

-  @extend %ibo-font-ral-med-250;
+  @extend %ibo-font-size-250;
 }
--- a/css/backoffice/components/_file-select.scss
+++ b/css/backoffice/components/_file-select.scss
@@ -15,7 +15,7 @@ $ibo-input-file-select--file-name-margin-left: 10px !default;

    .ibo-input-file-select--file-name {
      margin-left: $ibo-input-file-select--file-name-margin-left;
-      @extend %ibo-font-ral-med-150;
+      @extend %ibo-font-size-150;
    }
  }
 }
--- a/css/backoffice/components/_global-search.scss
+++ b/css/backoffice/components/_global-search.scss
@@ -134,7 +134,7 @@ $ibo-global-search--compartment--placeholder-hint--text-color: $ibo-color-grey-7
 	padding: $ibo-global-search--drawer--padding-y $ibo-global-search--drawer--padding-x;
 	background-color: $ibo-global-search--drawer--background-color;
 	box-shadow: none;
-	@extend %ibo-font-ral-nor-100;
+	@extend %ibo-font-size-100;
 }
 .ibo-global-search--compartment-title{
 	margin-bottom: $ibo-global-search--compartment-title--margin-bottom;
--- a/css/backoffice/components/_newsroom-menu.scss
+++ b/css/backoffice/components/_newsroom-menu.scss
@@ -79,11 +79,9 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga
  align-items: center;
  float: right;
  align-self: center;
-  @extend %ibo-font-ral-nor-100;
  margin-left: $ibo-navigation-menu--notifications--item--bottom-text--margin-left;
 }
 .ibo-navigation-menu--notifications--item--content{
-  @extend %ibo-font-ral-nor-150;
  padding: $ibo-navigation-menu--notifications--item--content--padding-y $ibo-navigation-menu--notifications--item--content--padding-x;
  img{
    max-height: $ibo-navigation-menu--notifications--item--content--img--max-height;
@@ -108,7 +106,7 @@ img.ibo-navigation-menu--notifications--item--image:not([src=""]) ~ i.ibo-naviga
    margin-right: $ibo-navigation-menu--notifications-show-all-multiple--ibo-popover-menu--indicator--margin-right;
  }
  .ibo-navigation-menu--notifications-show-all-multiple--counter{
-    @extend %ibo-font-ral-bol-200;
+    @extend %ibo-font-weight-600;
  }
 }
 .ibo-navigation-menu--notifications-dismiss-all--icon{
--- a/css/backoffice/components/_panel.scss
+++ b/css/backoffice/components/_panel.scss
@@ -207,13 +207,13 @@ $ibo-panel-colors: (
 .ibo-panel--title {
  display: inline-block;
  color: $ibo-panel--title--color;
-  @extend %ibo-font-ral-med-350;
+  @extend %ibo-font-size-350;
  flex-grow: 1;
 }

 .ibo-panel--subtitle {
  display: flex;
-  @extend %ibo-font-ral-med-150;
+  @extend %ibo-font-size-150;
  color: $ibo-panel--subtitle--color;
 }

@@ -226,7 +226,7 @@ $ibo-panel-colors: (
  border-radius: $ibo-panel--body--border-radius;
  overflow: hidden; /* To force highlight color to be cropped by the border radius */

-  @extend %ibo-font-ral-nor-200;
+  @extend %ibo-font-size-150;
 }

 .ibo-panel--collapsible-toggler {
--- a/css/backoffice/components/_quick-create.scss
+++ b/css/backoffice/components/_quick-create.scss
@@ -170,7 +170,7 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70
 	padding: $ibo-quick-create--drawer--padding-y $ibo-quick-create--drawer--padding-x;
 	background-color: $ibo-quick-create--drawer--background-color;
 	box-shadow: none;
-	@extend %ibo-font-ral-nor-100;
+	@extend %ibo-font-size-100;
 }
 .ibo-quick-create--compartment-title{
 	margin-top: $ibo-quick-create--compartment-title--margin-top;
--- a/css/backoffice/components/_search-form.scss
+++ b/css/backoffice/components/_search-form.scss
@@ -829,7 +829,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search


 .sf_results_placeholder {
-	@extend %ibo-font-ral-med-150;
+	@extend %ibo-font-size-150;
 	margin-top: 24px;
 	text-align: center;
 	
@@ -855,7 +855,7 @@ $ibo-search-results-area--datatable-scrollhead--border--is-sticking: $ibo-search
  }
 }
 .ibo-criterion-area{
-	@extend %ibo-font-ral-med-100;
+	@extend %ibo-font-size-100;
 }
 #ibo-main-content .search_form_handler .sf_criterion_area{
 	padding: 0;
--- a/css/backoffice/components/_title.scss
+++ b/css/backoffice/components/_title.scss
@@ -51,7 +51,7 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
 }

 .ibo-title--for-object-details {
-  @extend %ibo-font-ral-med-300;
+  @extend %ibo-font-size-300;
 }

 .ibo-title--subtitle {
@@ -68,7 +68,7 @@ $ibo-title--icon-background--size--must-zoomout: 66.67% !default;
 	padding-top: 2em;
 }
 .ibo-title-for-dashlet--title {
-	@extend %ibo-font-ral-nor-350;
+	@extend %ibo-font-size-350;
 }

 .ibo-title-for-dashlet--content{
--- a/css/backoffice/components/dashlet/_dashlet-badge.scss
+++ b/css/backoffice/components/dashlet/_dashlet-badge.scss
@@ -74,7 +74,7 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default;
 }
 .ibo-dashlet-badge--action-create{
 	@extend %ibo-baseline-centered-content;
-	@extend %ibo-font-ral-med-150;
+	@extend %ibo-font-size-150;
 }
 .ibo-dashlet-badge--action-create-icon{
 	margin-right: $ibo-dashlet-badge--action-icon--margin-right;
--- a/css/backoffice/components/dashlet/_dashlet-header-dynamic.scss
+++ b/css/backoffice/components/dashlet/_dashlet-header-dynamic.scss
@@ -18,5 +18,5 @@ $ibo-dashlet-header-dynamic--count--margin-right: 10px !default;
 }

 .ibo-dashlet-header-dynamic--label {
-  @extend %ibo-font-ral-med-100;
+  @extend %ibo-font-size-100;
 }
--- a/css/backoffice/components/dashlet/_dashlet-header-static.scss
+++ b/css/backoffice/components/dashlet/_dashlet-header-static.scss
@@ -41,7 +41,7 @@ $ibo-dashlet-header-static--body--separator-after--left: calc(100% + #{$ibo-dash
  margin-left: $ibo-dashlet-header-static--body--margin-left;

  color: $ibo-dashlet-header-static--body--text-color;
-  @extend %ibo-font-ral-med-350;
+  @extend %ibo-font-size-350;

  &::before,
  &::after{
--- a/css/backoffice/components/popover-menu/_popover-menu-item.scss
+++ b/css/backoffice/components/popover-menu/_popover-menu-item.scss
@@ -35,7 +35,6 @@ $ibo-popover-menu--item--icon--padding-right: 5px !default;
 .ibo-popover-menu--item{
  padding: $ibo-popover-menu--item--padding-y $ibo-popover-menu--item--padding-right $ibo-popover-menu--item--padding-y $ibo-popover-menu--item--padding-left;
  color: $ibo-popover-menu--item--text-color;
-  @extend %ibo-font-ral-nor-150;

  a {
    color: $ibo-popover-menu--item--text-color;
--- a/css/backoffice/layout/_top-bar.scss
+++ b/css/backoffice/layout/_top-bar.scss
@@ -64,7 +64,7 @@ $ibo-top-bar--quick-actions--margin-right: $ibo-top-bar--elements-spacing !defau
 }

 .ibo-top-bar--toolbar-dashboard-title {
-	@extend %ibo-font-ral-med-250;
+	@extend %ibo-font-size-250;
 }

 .ibo-top-bar--toolbar-dashboard-menu-toggler {
--- a/css/backoffice/layout/activity-panel/_activity-entry.scss
+++ b/css/backoffice/layout/activity-panel/_activity-entry.scss
@@ -159,7 +159,7 @@ $ibo-activity-panel--load-more-entries--border: $ibo-content-block--border !defa

 	border-radius: $ibo-activity-entry--medallion--border-radius;

-	@extend %ibo-font-ral-nor-150;
+	@extend %ibo-font-size-150;

 	&.ibo-has-image{
 		background-color: $ibo-activity-entry--medallion--has-image--background-color;
@@ -227,7 +227,7 @@ $ibo-activity-panel--load-more-entries--border: $ibo-content-block--border !defa
  text-align: left;
  color: $ibo-activity-entry--sub-information--text-color;

-  @extend %ibo-font-ral-nor-50;
+  @extend %ibo-font-size-50;
 }

 .ibo-activity-entry--author-name {
--- a/css/backoffice/layout/activity-panel/_activity-panel.scss
+++ b/css/backoffice/layout/activity-panel/_activity-panel.scss
@@ -224,7 +224,7 @@ $ibo-activity-panel--open-icon--margin-left: 0.75rem !default;
 .ibo-activity-panel--tab-title-draft-indicator{
  display: none;
  margin-left: $ibo-activity-panel--tab-title-draft-indicator--margin-x;
-  @extend %ibo-font-ral-nor-50;
+  @extend %ibo-font-size-50;
 }
 .ibo-activity-panel--tab-title-text{
 	max-width: $ibo-activity-panel--tab-title-text--max-width;
--- a/css/backoffice/layout/dashboard/_dashboard-editor.scss
+++ b/css/backoffice/layout/dashboard/_dashboard-editor.scss
@@ -49,20 +49,20 @@ $ibo-dashboard-editor--delete-dashlet-icon--z-index: 21 !default;
 		td{
 			margin-bottom: 14px;
 			.ibo-field{
-				@extend %ibo-font-ral-med-100;				
+				@extend %ibo-font-size-100;
 			}
 		}
 	}
 }
 .ibo-dashboard-editor--properties-title{
 	padding-bottom: $ibo-dashboard-editor--properties-title--padding-bottom;
-	@extend %ibo-font-ral-med-250;
+	@extend %ibo-font-size-250;
 }
 .ibo-dashboard-editor--properties-subtitle,
 .ibo-dashboard--available-dashlet--title,
 .ibo-dashlet--properties--title{
 	@extend .ibo-fieldset-legend;
-	@extend %ibo-font-ral-med-150;
+	@extend %ibo-font-size-150;
 }

 .ibo-dashboard-editor--layout-list {
--- a/css/backoffice/layout/tab-container/_tab-container.scss
+++ b/css/backoffice/layout/tab-container/_tab-container.scss
@@ -57,7 +57,7 @@ $ibo-tab--temporary-remote-content--button--hover--color: $ibo-color-grey-200 !d
  height: $ibo-tab-container--tabs-list--height;

  background-color: $ibo-tab-container--tabs-list--background-color;
-  @extend %ibo-font-ral-nor-150;
+  @extend %ibo-font-size-150;
 }

 .ibo-tab-container--tab-header {
@@ -71,7 +71,7 @@ $ibo-tab--temporary-remote-content--button--hover--color: $ibo-color-grey-200 !d
  }

  &.ui-tabs-active {
-    @extend %ibo-font-ral-bol-150;
+    @extend %ibo-font-weight-700;
    color: $ibo-tab-container--tab-header--text-color--is-active;
  }
 }
@@ -154,7 +154,7 @@ $ibo-tab--temporary-remote-content--button--hover--color: $ibo-color-grey-200 !d
    margin-left: $ibo-tab-container--tab-container--label--span--margin-left;
    color: $ibo-tab-container--tab-container--label--text-color;

-    @extend %ibo-font-ral-med-250;
+    @extend %ibo-font-size-250;
  }

  > span::before,
@@ -207,7 +207,7 @@ $ibo-tab--temporary-remote-content--button--hover--color: $ibo-color-grey-200 !d
  width: 100%;

  cursor: pointer;
-  @extend %ibo-font-ral-med-300;
+  @extend %ibo-font-size-300;

  background-color: transparent;
  color: $ibo-tab--temporary-remote-content--button--color;
--- a/css/backoffice/vendors/_ckeditor.scss
+++ b/css/backoffice/vendors/_ckeditor.scss
@@ -78,6 +78,6 @@ ul.cke_autocomplete_panel{
  }
 	.ibo-vendors-ckeditor--autocomplete-item-title{
 		color: $ibo-vendors-ckeditor--autocomplete-item-title--text-color;
-		@extend %ibo-font-ral-bol-100;
+		@extend %ibo-font-weight-700;
 	}
 }
--- a/css/backoffice/vendors/_datatables.scss
+++ b/css/backoffice/vendors/_datatables.scss
@@ -59,7 +59,7 @@ $ibo-vendors-datatables--row-highlight--colors:(
    height: $ibo-vendors-datatables--pagination-button--min-size;
    border-radius: $ibo-vendors-datatables--pagination-button--border-radius;

-    @extend %ibo-font-ral-med-100;
+    @extend %ibo-font-size-100;
    @extend %ibo-hyperlink-inherited-colors;

    &:hover {
@@ -74,7 +74,7 @@ $ibo-vendors-datatables--row-highlight--colors:(

    &.previous,
    &.next {
-      @extend %ibo-font-ral-med-200;
+      @extend %ibo-font-size-200;
    }

    &.current {