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

Refactor SCSS misc. partial to dedicated partials as it was growing too much

Browse Source
This commit is contained in:
Molkobain
2023-01-27 15:26:19 +01:00
parent bc3b43958c
commit 27bd78d76b
7 changed files with 201 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/backoffice/utils/helpers/_all.scss
View File

@@ -5,9 +5,14 @@
@import "border-radius";
@import "color";
@import "class-icon";
@import "depression";
@import "elevation";
@import "font-icon";
@import "fullscreen";
@import "sticky-header";
@import "text-decoration";
@import "text-position";
@import "typography";
@import "misc";
@import "class-icon";
@import "visibility";

36
css/backoffice/utils/helpers/_fullscreen.scss Normal file
View File

@@ -0,0 +1,36 @@
/*!
* @copyright Copyright (C) 2010-2023 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* Used on all ancestors when an element needs to be fullscreen (see .ibo-is-fullscreen) */
html.ibo-has-fullscreen-descendant {
position: fixed !important;
width: 0 !important;
height: 0 !important;
}
body.ibo-has-fullscreen-descendant {
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.ibo-has-fullscreen-descendant {
position: static !important;
overflow: visible !important;
z-index: 1050 !important;
}
/* Used on a fullscreen element (see .ibo-has-fullscreen-descendant) */
.ibo-is-fullscreen {
position: absolute;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100vw;
height: 100vh;
overflow: auto;
z-index: 1050;
}

182
css/backoffice/utils/helpers/_misc.scss
View File

@@ -3,191 +3,9 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables */
$ibo-is-code--background-color: $ibo-color-white-200 !default;
$ibo-is-code--padding: 1.25rem 1.5rem !default;
$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-top--height: $ibo-sticky-sentinel--height !default;
$ibo-sticky-sentinel-bottom--bottom: 0 !default;
$ibo-sticky-sentinel-bottom--height: $ibo-sticky-sentinel--height !default;
/**************/
/* Visibility */
/**************/
.ibo-is-visible {
display: inherit !important; /* Note: !important is necessary as it needs to overload any standard rules */
visibility: visible !important;
}
.ibo-is-hidden {
display: none !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
.ibo-is-transparent {
opacity: 0 !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
.ibo-is-opaque {
opacity: 1 !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
/****************************/
/* Disposition / alignement */
/****************************/
.ibo-is-fullwidth {
width: 100%;
}
%ibo-fully-centered-content {
display: flex;
justify-content: center;
align-items: center;
}
%ibo-vertically-centered-content {
display: flex;
align-items: center;
}
/* Typically to align icons and text as it is a good practice to align them on the baseline and not the "middle" */
%ibo-baseline-centered-content {
display: flex;
align-items: baseline;
}
/* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */
%ibo-full-height-content {
display: flex;
align-items: stretch;
}
/**************/
/* Fullscreen */
/**************/
/* Used on all ancestors when an element needs to be fullscreen (see .ibo-is-fullscreen) */
html.ibo-has-fullscreen-descendant {
position: fixed !important;
width: 0 !important;
height: 0 !important;
}
body.ibo-has-fullscreen-descendant {
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.ibo-has-fullscreen-descendant {
position: static !important;
overflow: visible !important;
z-index: 1050 !important;
}
/* Used on a fullscreen element (see .ibo-has-fullscreen-descendant) */
.ibo-is-fullscreen {
position: absolute;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100vw;
height: 100vh;
overflow: auto;
z-index: 1050;
}
/****************/
/* Text helpers */
/****************/
%ibo-text-truncated-with-ellipsis {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.ibo-text-truncated-with-ellipsis {
@extend %ibo-text-truncated-with-ellipsis;
}
/* Use this when you want the hyperlink to be of the color of its container's text instead of the global hyperlink color */
%ibo-hyperlink-inherited-colors {
color: inherit;
&:hover,
&:active {
color: inherit;
}
}
.ibo-is-broken-hyperlink {
text-decoration: line-through;
cursor: help;
}
.ibo-is-code {
background-color: $ibo-is-code--background-color;
padding: $ibo-is-code--padding;
@extend %ibo-font-code-150;
}
.ibo-add-margin-top-250{
margin-top: $ibo-spacing-400;
}
/*
* A single class to handle WYSIWYG generated content, where only HTML tags are available
* See https://bulma.io/documentation/elements/content/
*/
.ibo-is-html-content {
@extend .content;
/* Force user-generated tables to fit within the container as they often have an hard-coded width */
table {
width: unset !important;
max-width: max-content;
}
/* For table to render like in CKEditor, works with bulma lib. overload see:
* - ../../vendors/_bulma-variables-overload.scss)
* - ../../_shame.scss
*/
table {
border-collapse: separate;
border-spacing: 2px;
}
/* Preserve original text color in code blocks, except for the Highlight.js blocks which have their own colors */
& > code,
code:not(.hljs) {
color: inherit;
}
}
/***********************************************************************/
/* Sticky headers */
/* */
/* Used as a trigger to make an element stick to another during scroll */
/***********************************************************************/
.ibo-sticky-sentinel {
position: absolute;
left: $ibo-sticky-sentinel--left;
right: $ibo-sticky-sentinel--right;
visibility: hidden;
}
.ibo-sticky-sentinel-top {
top: $ibo-sticky-sentinel-top--top;
height: $ibo-sticky-sentinel-top--height; /* To be overloaded by use cases */
}
.ibo-sticky-sentinel-bottom {
bottom: $ibo-sticky-sentinel-bottom--bottom;
height: $ibo-sticky-sentinel-bottom--height; /* To be overloaded by use cases */
}
%ibo-medallion {
position: relative;

35
css/backoffice/utils/helpers/_sticky-header.scss Normal file
View File

@@ -0,0 +1,35 @@
/*!
* @copyright Copyright (C) 2010-2023 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
/***********************************************************************/
/* Sticky headers */
/* */
/* Used as a trigger to make an element stick to another during scroll */
/***********************************************************************/
/* 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-top--height: $ibo-sticky-sentinel--height !default;
$ibo-sticky-sentinel-bottom--bottom: 0 !default;
$ibo-sticky-sentinel-bottom--height: $ibo-sticky-sentinel--height !default;
/* Rules */
.ibo-sticky-sentinel {
position: absolute;
left: $ibo-sticky-sentinel--left;
right: $ibo-sticky-sentinel--right;
visibility: hidden;
}
.ibo-sticky-sentinel-top {
top: $ibo-sticky-sentinel-top--top;
height: $ibo-sticky-sentinel-top--height; /* To be overloaded by use cases */
}
.ibo-sticky-sentinel-bottom {
bottom: $ibo-sticky-sentinel-bottom--bottom;
height: $ibo-sticky-sentinel-bottom--height; /* To be overloaded by use cases */
}

69
css/backoffice/utils/helpers/_text-decoration.scss Normal file
View File

@@ -0,0 +1,69 @@
/*!
* @copyright Copyright (C) 2010-2023 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables */
$ibo-is-code--background-color: $ibo-color-white-200 !default;
$ibo-is-code--padding: 1.25rem 1.5rem !default;
/* Rules */
%ibo-text-truncated-with-ellipsis {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.ibo-text-truncated-with-ellipsis {
@extend %ibo-text-truncated-with-ellipsis;
}
/* Use this when you want the hyperlink to be of the color of its container's text instead of the global hyperlink color */
%ibo-hyperlink-inherited-colors {
color: inherit;
&:hover,
&:active {
color: inherit;
}
}
.ibo-is-broken-hyperlink {
text-decoration: line-through;
cursor: help;
}
.ibo-is-code {
background-color: $ibo-is-code--background-color;
padding: $ibo-is-code--padding;
@extend %ibo-font-code-150;
}
/*
* A single class to handle WYSIWYG generated content, where only HTML tags are available
* See https://bulma.io/documentation/elements/content/
*/
.ibo-is-html-content {
@extend .content;
/* Force user-generated tables to fit within the container as they often have an hard-coded width */
table {
width: unset !important;
max-width: max-content;
}
/* For table to render like in CKEditor, works with bulma lib. overload see:
* - ../../vendors/_bulma-variables-overload.scss)
* - ../../_shame.scss
*/
table {
border-collapse: separate;
border-spacing: 2px;
}
/* Preserve original text color in code blocks, except for the Highlight.js blocks which have their own colors */
& > code,
code:not(.hljs) {
color: inherit;
}
}

34
css/backoffice/utils/helpers/_text-position.scss Normal file
View File

@@ -0,0 +1,34 @@
/*!
* @copyright Copyright (C) 2010-2023 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
/****************************/
/* Disposition / alignement */
/****************************/
.ibo-is-fullwidth {
width: 100%;
}
%ibo-fully-centered-content {
display: flex;
justify-content: center;
align-items: center;
}
%ibo-vertically-centered-content {
display: flex;
align-items: center;
}
/* Typically to align icons and text as it is a good practice to align them on the baseline and not the "middle" */
%ibo-baseline-centered-content {
display: flex;
align-items: baseline;
}
/* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */
%ibo-full-height-content {
display: flex;
align-items: stretch;
}

21
css/backoffice/utils/helpers/_visibility.scss Normal file
View File

@@ -0,0 +1,21 @@
/*!
* @copyright Copyright (C) 2010-2023 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
.ibo-is-visible {
display: inherit !important; /* Note: !important is necessary as it needs to overload any standard rules */
visibility: visible !important;
}
.ibo-is-hidden {
display: none !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
.ibo-is-transparent {
opacity: 0 !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
.ibo-is-opaque {
opacity: 1 !important; /* Note: !important is necessary as it needs to overload any standard rules */
}