N°7793 Add common SCSS variables between backoffice and end-user portal (#674)

* N°7793 Add common SCSS variables between backoffice and end-user portal

* Add shame & readme

* Move font face to common

* Inherit color functions

* Move font icon to common

* FIx breaking change introduced in lifecycle palette

* FIx breaking change introduced in base

* Move approot url to common

* Make highlightjs common variables more coherent with 3.2.1 commonization approach

* Deprecated and migrate the usage of ibo-adjust-alpha and ibo-adjust-lightness
This commit is contained in:
Stephen Abello
2024-11-06 09:52:54 +01:00
committed by GitHub
parent a10e547420
commit f90bd81e15
64 changed files with 2163 additions and 548 deletions

View File

@@ -3,9 +3,9 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-class-icon--small--size: 32px !default;
$ibo-class-icon--medium--size: 48px !default;
$ibo-class-icon--large--size: 64px !default;
$ibo-class-icon--small--size: $common-class-icon--small--size !default;
$ibo-class-icon--medium--size: $common-class-icon--medium--size !default;
$ibo-class-icon--large--size: $common-class-icon--large--size !default;
.ibo-class-icon{
&.ibo-is-small{

View File

@@ -3,24 +3,7 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-text-colors: (
'primary': $ibo-color-primary-800,
'secondary': $ibo-color-secondary-800,
'neutral': $ibo-color-secondary-800,
'information': $ibo-color-information-800,
'success': $ibo-color-success-800,
'failure': $ibo-color-danger-800,
'warning': $ibo-color-warning-800,
'danger': $ibo-color-danger-800,
'grey' : $ibo-color-grey-800,
'blue-grey': $ibo-color-blue-grey-800,
'blue': $ibo-color-blue-800,
'cyan': $ibo-color-cyan-800,
'green': $ibo-color-green-800,
'orange': $ibo-color-orange-800,
'red': $ibo-color-red-800,
'pink': $ibo-color-pink-800,
) !default;
$ibo-text-colors: $common-text-colors !default;
@each $sColor, $sColorValue in $ibo-text-colors {
.ibo-text.ibo-is-#{$sColor} {

View File

@@ -8,36 +8,3 @@
/* To use it, simply "@extend %fa-regular-base" in a rule and put the desired icon "content: '\f054'" */
/******************************************************************************************************************************/
%fa-regular-base{
font-family: "Font Awesome 5 Free";
font-weight: 400;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fa-solid-base{
font-family: "Font Awesome 5 Free";
font-weight: 900;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fc-regular-base{
display: inline-block;
font-family: CombodoRegular;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View File

@@ -10,12 +10,12 @@
/***********************************************************************/
/* SCSS variables */
$ibo-sticky-sentinel--left: 0 !default;
$ibo-sticky-sentinel--right: 0 !default;
$ibo-sticky-sentinel--height: 0 !default;
$ibo-sticky-sentinel-top--top: 0 !default;
$ibo-sticky-sentinel--left: $common-sticky-sentinel--left !default;
$ibo-sticky-sentinel--right: $common-sticky-sentinel--right !default;
$ibo-sticky-sentinel--height: $common-sticky-sentinel--height !default;
$ibo-sticky-sentinel-top--top: $common-sticky-sentinel-top--top !default;
$ibo-sticky-sentinel-top--height: $ibo-sticky-sentinel--height !default;
$ibo-sticky-sentinel-bottom--bottom: 0 !default;
$ibo-sticky-sentinel-bottom--bottom: $common-sticky-sentinel-bottom--bottom !default;
$ibo-sticky-sentinel-bottom--height: $ibo-sticky-sentinel--height !default;
/* Rules */

View File

@@ -4,13 +4,13 @@
*/
/* SCSS variables */
$ibo-has-description--content: "?" !default;
$ibo-has-description--padding-left: $ibo-spacing-200 !default;
$ibo-has-description--color: $ibo-color-grey-600 !default;
$ibo-has-description--font-size: 0.7em !default; /* Font size is em on purpose as we want it to be proportional to its context */
$ibo-has-description--content: $common-has-description--content !default;
$ibo-has-description--padding-left: $common-has-description--padding-left !default;
$ibo-has-description--color: $common-has-description--color !default;
$ibo-has-description--font-size: $common-has-description--font-size !default; /* Font size is em on purpose as we want it to be proportional to its context */
$ibo-is-code--background-color: $ibo-color-white-200 !default;
$ibo-is-code--padding: 1.25rem 1.5rem !default;
$ibo-is-code--background-color: $common-is-code--background-color !default;
$ibo-is-code--padding: $common-is-code--padding !default;
$ibo-hyperlink-color: $ibo-color-primary-700 !default;
$ibo-hyperlink-text-decoration: none !default;
@@ -19,8 +19,8 @@ $ibo-hyperlink-text-decoration--on-hover: $ibo-hyperlink-text-decoration !defaul
$ibo-hyperlink-color--on-active: $ibo-color-primary-900 !default;
$ibo-hyperlink-text-decoration--on-active: $ibo-hyperlink-text-decoration !default;
$ibo-figure--spacing-x: 2em !default; /* Mind that this matches Bulma rule for figure */
$ibo-figure--spacing-y: 2em !default;
$ibo-figure--spacing-x: $common-figure--spacing-x !default; /* Mind that this matches Bulma rule for figure */
$ibo-figure--spacing-y: $common-figure--spacing-y !default;
/* CSS variables */
:root{