mirror of
https://github.com/Combodo/iTop.git
synced 2026-03-05 17:14:20 +01:00
a713e1b56e
* No dashlet edition * Dashboard are not persisted * Unable to load a dashboard from an endpoint (refresh) * Grid library need proper npm integration
158 lines
4.7 KiB
SCSS
158 lines
4.7 KiB
SCSS
/**
|
|
* gridstack SASS styles 12.3.3
|
|
* Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
|
|
*/
|
|
|
|
$animation_speed: .3s !default;
|
|
|
|
@function fixed($float) {
|
|
@return calc(round($float * 1000) / 1000); // total 4-5 digits being %
|
|
}
|
|
|
|
@mixin vendor($property, $value...){
|
|
// -webkit-#{$property}: $value;
|
|
// -moz-#{$property}: $value;
|
|
// -ms-#{$property}: $value;
|
|
// -o-#{$property}: $value;
|
|
#{$property}: $value;
|
|
}
|
|
|
|
.grid-stack {
|
|
position: relative;
|
|
}
|
|
|
|
.grid-stack-rtl {
|
|
direction: ltr;
|
|
> .grid-stack-item {
|
|
direction: rtl;
|
|
}
|
|
}
|
|
|
|
.grid-stack-placeholder > .placeholder-content {
|
|
background-color: rgba(0,0,0,0.1);
|
|
margin: 0;
|
|
position: absolute;
|
|
width: auto;
|
|
z-index: 0 !important;
|
|
}
|
|
|
|
// make those more unique as to not conflict with side panel items
|
|
.grid-stack > .grid-stack-item {
|
|
position: absolute;
|
|
padding: 0;
|
|
top: 0; left: 0; // some default to reduce at least first row/column inline styles
|
|
width: var(--gs-column-width); // reduce 1x1 items inline styles
|
|
height: var(--gs-cell-height);
|
|
|
|
> .grid-stack-item-content {
|
|
margin: 0;
|
|
position: absolute;
|
|
width: auto;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
&.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
|
|
.grid-stack {
|
|
> .grid-stack-item > .grid-stack-item-content,
|
|
> .grid-stack-placeholder > .placeholder-content {
|
|
top: var(--gs-item-margin-top);
|
|
right: var(--gs-item-margin-right);
|
|
bottom: var(--gs-item-margin-bottom);
|
|
left: var(--gs-item-margin-left);
|
|
}
|
|
}
|
|
|
|
.grid-stack-item {
|
|
> .ui-resizable-handle {
|
|
position: absolute;
|
|
font-size: 0.1px;
|
|
display: block;
|
|
-ms-touch-action: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
&.ui-resizable-disabled > .ui-resizable-handle,
|
|
&.ui-resizable-autohide > .ui-resizable-handle { display: none; }
|
|
|
|
> .ui-resizable-ne,
|
|
> .ui-resizable-nw,
|
|
> .ui-resizable-se,
|
|
> .ui-resizable-sw {
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
> .ui-resizable-ne {
|
|
@include vendor(transform, rotate(45deg));
|
|
}
|
|
> .ui-resizable-sw {
|
|
@include vendor(transform, rotate(45deg));
|
|
}
|
|
|
|
> .ui-resizable-nw {
|
|
@include vendor(transform, rotate(-45deg));
|
|
}
|
|
> .ui-resizable-se {
|
|
@include vendor(transform, rotate(-45deg));
|
|
}
|
|
|
|
> .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); left: var(--gs-item-margin-left); }
|
|
> .ui-resizable-n { cursor: n-resize; height: 10px; top: var(--gs-item-margin-top); left: 25px; right: 25px; }
|
|
> .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); }
|
|
> .ui-resizable-e { cursor: e-resize; width: 10px; top: 15px; bottom: 15px; right: var(--gs-item-margin-right);}
|
|
> .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); right: var(--gs-item-margin-right); }
|
|
> .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: var(--gs-item-margin-bottom); right: 25px; }
|
|
> .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); }
|
|
> .ui-resizable-w { cursor: w-resize; width: 10px; top: 15px; bottom: 15px; left: var(--gs-item-margin-left); }
|
|
|
|
&.ui-draggable-dragging {
|
|
&> .ui-resizable-handle {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&.ui-draggable-dragging {
|
|
will-change: left, top;
|
|
}
|
|
|
|
&.ui-resizable-resizing {
|
|
will-change: width, height;
|
|
}
|
|
}
|
|
|
|
// not .grid-stack-item specific to also affect dragIn regions
|
|
.ui-draggable-dragging,
|
|
.ui-resizable-resizing {
|
|
z-index: 10000; // bootstrap modal has a z-index of 1050
|
|
|
|
> .grid-stack-item-content {
|
|
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.grid-stack-animate,
|
|
.grid-stack-animate .grid-stack-item {
|
|
@include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
|
|
}
|
|
|
|
.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
|
|
.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
|
|
.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
|
|
@include vendor(transition, left 0s, top 0s, height 0s, width 0s);
|
|
}
|
|
|
|
// make those more unique as to not conflict with side panel items, but apply to all column layouts (so not in loop below)
|
|
.grid-stack > .grid-stack-item[gs-y="0"] {
|
|
top: 0px;
|
|
}
|
|
.grid-stack > .grid-stack-item[gs-x="0"] {
|
|
left: 0%;
|
|
}
|
|
|