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 documentation

Browse Source
This commit is contained in:
Molkobain
2021-04-11 11:58:31 +02:00
parent 81d30ca9f4
commit 8313d61521
1 changed files with 97 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,99 +16,121 @@
* You should have received a copy of the GNU Affero General Public License
*/
.ibo-is-visible{
display: inherit !important; /* Note: !important is necessary as it needs to overload any standard rules */
visibility: visible !important;
/**************/
/* 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-hidden {
display: none !important; /* Note: !important is necessary as it needs to overload any standard rules */
}
/****************************/
/* Disposition / alignement */
/****************************/
.ibo-is-fullwidth {
width: 100%;
}
/* 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: 9000 !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: 9000;
%ibo-fully-centered-content {
display: flex;
justify-content: center;
align-items: center;
}
%ibo-fully-centered-content{
display: flex;
justify-content: center;
align-items: center;
%ibo-vertically-centered-content {
display: flex;
align-items: center;
}
%ibo-vertically-centered-content{
display: flex;
align-items: center;
}
/* Typically to align icons and text */
%ibo-baseline-centered-content{
display: flex;
align-items: baseline;
/* 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;
%ibo-full-height-content {
display: flex;
align-items: stretch;
}
%ibo-text-truncated-with-ellipsis{
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
/**************/
/* 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;
}
.ibo-text-truncated-with-ellipsis{
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: 9000 !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: 9000;
}
/****************/
/* 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;
}
%ibo-medallion{
position: relative;
border-radius: var(--ibo-border-radius-full);
border: 2px solid var(--ibo-color-grey-300);
overflow: hidden;
@extend %ibo-fully-centered-content;
/* 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;
> *{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: contain;
background-color: var(--ibo-color-grey-500);
}
&:hover,
&:active {
color: inherit;
}
}
%ibo-hyperlink-inherited-colors{
color: inherit;
%ibo-medallion {
position: relative;
border-radius: var(--ibo-border-radius-full);
border: 2px solid var(--ibo-color-grey-300);
overflow: hidden;
@extend %ibo-fully-centered-content;
&:hover,
&:active{
color: inherit;
}
}
> * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: contain;
background-color: var(--ibo-color-grey-500);
}
}