mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
617 lines
15 KiB
SCSS
617 lines
15 KiB
SCSS
/*
|
|
* @copyright Copyright (C) 2010-2024 Combodo SAS
|
|
* @license http://opensource.org/licenses/AGPL-3.0
|
|
*
|
|
* Combodo modification : replaced the `Alpha(` by `alpha(` to avoid warnings generated by SCSSPHP
|
|
*/
|
|
|
|
/*
|
|
* IMPORTANT: This is not how vendors should be integrated in the theme, we should include the base stylesheet, THEN only overload what is necessary.
|
|
* By doing a complete redefinition of the vendor stylesheet like this we won't be able to upgrade the vendor easily...
|
|
*/
|
|
|
|
$ibo-vendors-jqueryui--ui-dialog--padding-x: 30px !default;
|
|
$ibo-vendors-jqueryui--ui-dialog--border-radius: $ibo-border-radius-500 !default;
|
|
$ibo-vendors-jqueryui--ui-dialog--background-color: $ibo-color-white-100 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-dialog-titlebar--height: 50px !default;
|
|
$ibo-vendors-jqueryui--ui-dialog-titlebar--padding-x: $ibo-vendors-jqueryui--ui-dialog--padding-x !default;
|
|
$ibo-vendors-jqueryui--ui-dialog-titlebar--padding-y: .4em !default;
|
|
$ibo-vendors-jqueryui--ui-dialog-titlebar--background-color: $ibo-vendors-jqueryui--ui-dialog--background-color !default;
|
|
$ibo-vendors-jqueryui--ui-dialog-titlebar--border-bottom: solid 1px $ibo-color-grey-200 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-dialog-title--padding-right: $ibo-spacing-600 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-dialog-content--padding-x: $ibo-vendors-jqueryui--ui-dialog--padding-x !default;
|
|
$ibo-vendors-jqueryui--ui-dialog-content--padding-y: $ibo-spacing-500 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-dialog-buttonpane--height: $ibo-vendors-jqueryui--ui-dialog-titlebar--height !default;
|
|
$ibo-vendors-jqueryui--ui-dialog-buttonpane--background-color: $ibo-vendors-jqueryui--ui-dialog--background-color !default;
|
|
$ibo-vendors-jqueryui--ui-dialog-buttonpane--border-top: $ibo-vendors-jqueryui--ui-dialog-titlebar--border-bottom !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-dialog--border: $ibo-vendors-jqueryui--ui-dialog--background-color !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-widget-overlay--background-color: $ibo-color-blue-grey-800 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-datepicker--padding: $ibo-spacing-300 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker--background-color: $ibo-color-white-100 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker--border-radius: $ibo-border-radius-500 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker--box-shadow: $ibo-elevation-100 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-datepicker-header--margin: $ibo-vendors-jqueryui--ui-datepicker--padding $ibo-vendors-jqueryui--ui-datepicker--padding $ibo-spacing-200 $ibo-vendors-jqueryui--ui-datepicker--padding !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-header--padding-top: $ibo-spacing-600 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-datepicker-buttons--top: 0 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-prev--left: 0 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-next--right: 0 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-datepicker-year--margin-left: $ibo-spacing-300 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-datepicker-days--width: 23px !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-days--border-radius: $ibo-border-radius-full !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-days--color: $ibo-color-orange-700 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-days--active--background-color: $ibo-color-orange-700 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-days--active--color: $ibo-color-orange-100 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-days--highlight--background-color: $ibo-color-orange-200 !default;
|
|
$ibo-vendors-jqueryui--ui-datepicker-days--hover--background-color: $ibo-color-orange-900 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-slider--background-color: $ibo-color-grey-100 !default;
|
|
$ibo-vendors-jqueryui--ui-slider--border-color: $ibo-color-grey-600 !default;
|
|
$ibo-vendors-jqueryui--ui-slider--border-radius: $ibo-border-radius-300 !default;
|
|
|
|
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--background-color: $ibo-color-white-100 !default;
|
|
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-color: $ibo-vendors-jqueryui--ui-slider--border-color !default;
|
|
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-radius: $ibo-vendors-jqueryui--ui-slider--border-radius !default;
|
|
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--diameter: 1.4em !default;
|
|
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--hover--border-color: $ibo-color-orange-700 !default;
|
|
|
|
// Tabs
|
|
|
|
.ui-dialog{
|
|
box-sizing: content-box; /* Necessary to overload our theme default setting */
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: $ibo-vendors-jqueryui--ui-dialog--background-color;
|
|
border-radius: $ibo-vendors-jqueryui--ui-dialog--border-radius;
|
|
overflow: hidden;
|
|
outline: 0;
|
|
z-index: 21;
|
|
.ui-dialog-titlebar {
|
|
padding: $ibo-vendors-jqueryui--ui-dialog-titlebar--padding-y $ibo-vendors-jqueryui--ui-dialog-titlebar--padding-x;
|
|
position: relative;
|
|
background-color: $ibo-vendors-jqueryui--ui-dialog-titlebar--background-color;
|
|
height: $ibo-vendors-jqueryui--ui-dialog-titlebar--height;
|
|
border-bottom: $ibo-vendors-jqueryui--ui-dialog-titlebar--border-bottom;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.ui-dialog-title {
|
|
float: left;
|
|
margin: .1em 0;
|
|
width: 100%;
|
|
padding-right: $ibo-vendors-jqueryui--ui-dialog-title--padding-right; /* To avoid title being visible behind the closing "X" */
|
|
@extend %ibo-text-truncated-with-ellipsis;
|
|
}
|
|
.ui-dialog-titlebar-close {
|
|
position: absolute;
|
|
right: 0;
|
|
top: $ibo-vendors-jqueryui--ui-dialog-titlebar--padding-y;
|
|
width: 20px;
|
|
margin: -10px 0 0 0;
|
|
padding: 1px;
|
|
height: 20px;
|
|
}
|
|
.ui-dialog-content {
|
|
box-sizing: content-box; /* Necessary to overload our theme default setting */
|
|
position: relative;
|
|
padding: $ibo-vendors-jqueryui--ui-dialog-content--padding-y $ibo-vendors-jqueryui--ui-dialog-content--padding-x;
|
|
overflow: auto;
|
|
}
|
|
.ui-dialog-buttonpane {
|
|
margin-top: auto;
|
|
text-align: left;
|
|
border-width: 1px 0 0 0;
|
|
background-image: none;
|
|
padding: .4em $ibo-vendors-jqueryui--ui-dialog--padding-x;
|
|
position: relative;
|
|
background-color: $ibo-vendors-jqueryui--ui-dialog-buttonpane--background-color;
|
|
border-top: $ibo-vendors-jqueryui--ui-dialog-buttonpane--border-top;
|
|
height: $ibo-vendors-jqueryui--ui-dialog-buttonpane--height;
|
|
.ui-dialog-buttonset {
|
|
float: right;
|
|
}
|
|
button {
|
|
margin: .5em .4em .5em 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.ui-resizable-n {
|
|
height: 2px;
|
|
top: 0;
|
|
}
|
|
.ui-resizable-e {
|
|
width: 2px;
|
|
right: 0;
|
|
}
|
|
.ui-resizable-s {
|
|
height: 2px;
|
|
bottom: 0;
|
|
}
|
|
.ui-resizable-w {
|
|
width: 2px;
|
|
left: 0;
|
|
}
|
|
.ui-resizable-se {
|
|
width: 7px;
|
|
height: 7px;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.ui-resizable-sw {
|
|
width: 7px;
|
|
height: 7px;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
.ui-resizable-ne {
|
|
width: 7px;
|
|
height: 7px;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.ui-resizable-nw {
|
|
width: 7px;
|
|
height: 7px;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.ui-button {
|
|
@extend .ibo-button, .ibo-is-regular, .ibo-is-secondary;
|
|
> .ui-icon {
|
|
background-image: none;
|
|
float: unset;
|
|
margin: auto;
|
|
&.ui-icon-closethick::after{
|
|
content: '\f00d';
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 600;
|
|
text-indent: 0;
|
|
position: absolute;
|
|
left: 0px;
|
|
width: 100%;
|
|
top: 4px;
|
|
}
|
|
}
|
|
&.ui-dialog-titlebar-close{
|
|
@extend .ibo-is-alternative;
|
|
@extend .ibo-is-neutral;
|
|
|
|
}
|
|
}
|
|
}
|
|
.ui-button-icon-only {
|
|
text-indent: -9999px;
|
|
white-space: nowrap;
|
|
}
|
|
.ui-draggable {
|
|
.ui-dialog-titlebar {
|
|
cursor: move;
|
|
}
|
|
}
|
|
.ui-dialog-title{
|
|
@extend %ibo-font-ral-nor-250;
|
|
}
|
|
.ui-widget-overlay.ui-front{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: .6;
|
|
filter: alpha(opacity=60);
|
|
background-color: $ibo-vendors-jqueryui--ui-widget-overlay--background-color;
|
|
}
|
|
// Resiable
|
|
|
|
|
|
.ui-resizable {
|
|
position: relative;
|
|
}
|
|
.ui-resizable-handle {
|
|
position: absolute;
|
|
font-size: 0.1px;
|
|
display: block;
|
|
-ms-touch-action: none;
|
|
touch-action: none;
|
|
}
|
|
.ui-resizable-disabled {
|
|
.ui-resizable-handle {
|
|
display: none;
|
|
}
|
|
}
|
|
.ui-resizable-autohide {
|
|
.ui-resizable-handle {
|
|
display: none;
|
|
}
|
|
}
|
|
.ui-resizable-n {
|
|
cursor: n-resize;
|
|
height: 7px;
|
|
width: 100%;
|
|
top: -5px;
|
|
left: 0;
|
|
}
|
|
.ui-resizable-s {
|
|
cursor: s-resize;
|
|
height: 7px;
|
|
width: 100%;
|
|
bottom: -5px;
|
|
left: 0;
|
|
}
|
|
.ui-resizable-e {
|
|
cursor: e-resize;
|
|
width: 7px;
|
|
right: -5px;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
.ui-resizable-w {
|
|
cursor: w-resize;
|
|
width: 7px;
|
|
left: -5px;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
.ui-resizable-se {
|
|
cursor: se-resize;
|
|
width: 12px;
|
|
height: 12px;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
}
|
|
.ui-resizable-sw {
|
|
cursor: sw-resize;
|
|
width: 9px;
|
|
height: 9px;
|
|
left: -5px;
|
|
bottom: -5px;
|
|
}
|
|
.ui-resizable-nw {
|
|
cursor: nw-resize;
|
|
width: 9px;
|
|
height: 9px;
|
|
left: -5px;
|
|
top: -5px;
|
|
}
|
|
.ui-resizable-ne {
|
|
cursor: ne-resize;
|
|
width: 9px;
|
|
height: 9px;
|
|
right: -5px;
|
|
top: -5px;
|
|
}
|
|
|
|
// Layout
|
|
|
|
.ui-layout-pane {
|
|
overflow: auto;
|
|
}
|
|
|
|
// Date picker
|
|
.ui-datepicker {
|
|
/* Note: We can't put the padding directly here as the jQuery JS code will position it regarding its inner width, not taking the padding here into account, so it is placed in the header/calendar elements */
|
|
display: none;
|
|
background-color: $ibo-vendors-jqueryui--ui-datepicker--background-color;
|
|
border-radius: $ibo-vendors-jqueryui--ui-datepicker--border-radius;
|
|
box-shadow: $ibo-vendors-jqueryui--ui-datepicker--box-shadow;
|
|
z-index: 32 !important;
|
|
padding: $ibo-spacing-0 $ibo-spacing-300 5px $ibo-spacing-300;
|
|
|
|
.ui-datepicker-header {
|
|
position: relative;
|
|
margin: $ibo-vendors-jqueryui--ui-datepicker-header--margin;
|
|
padding-top: $ibo-vendors-jqueryui--ui-datepicker-header--padding-top;
|
|
}
|
|
|
|
.ui-datepicker-prev,
|
|
.ui-datepicker-next {
|
|
position: absolute;
|
|
top: $ibo-vendors-jqueryui--ui-datepicker-buttons--top;
|
|
}
|
|
|
|
.ui-datepicker-prev {
|
|
left: $ibo-vendors-jqueryui--ui-datepicker-prev--left;
|
|
}
|
|
|
|
.ui-datepicker-next {
|
|
right: $ibo-vendors-jqueryui--ui-datepicker-next--right;
|
|
}
|
|
|
|
.ui-datepicker-title {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
select {
|
|
flex-grow: 1;
|
|
@extend %ibo-font-ral-nor-100;
|
|
}
|
|
}
|
|
|
|
.ui-datepicker-year {
|
|
margin-left: $ibo-vendors-jqueryui--ui-datepicker-year--margin-left;
|
|
}
|
|
|
|
.ui-datepicker-calendar {
|
|
margin: 0 $ibo-vendors-jqueryui--ui-datepicker--padding $ibo-vendors-jqueryui--ui-datepicker--padding $ibo-vendors-jqueryui--ui-datepicker--padding;
|
|
}
|
|
|
|
th {
|
|
padding: .7em .3em;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
td {
|
|
padding: 1px;
|
|
|
|
span,
|
|
a {
|
|
display: block;
|
|
padding: .2em 0;
|
|
text-align: center;
|
|
width: $ibo-vendors-jqueryui--ui-datepicker-days--width;
|
|
border-radius: $ibo-vendors-jqueryui--ui-datepicker-days--border-radius;
|
|
color: $ibo-vendors-jqueryui--ui-datepicker-days--color;
|
|
|
|
&.ui-state-active {
|
|
background-color: $ibo-vendors-jqueryui--ui-datepicker-days--active--background-color;
|
|
color: $ibo-vendors-jqueryui--ui-datepicker-days--active--color;
|
|
}
|
|
&.ui-state-highlight:not(.ui-state-active) {
|
|
background-color: $ibo-vendors-jqueryui--ui-datepicker-days--highlight--background-color;
|
|
}
|
|
&.ui-state-hover:not(.ui-state-active) {
|
|
color: $ibo-vendors-jqueryui--ui-datepicker-days--hover--background-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-datepicker-buttonpane {
|
|
background-image: none;
|
|
margin: .7em 0 0 0;
|
|
padding: 0 .2em;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
|
|
button {
|
|
float: right;
|
|
margin: .5em .2em .4em;
|
|
cursor: pointer;
|
|
padding: .2em .6em .3em .6em;
|
|
width: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
button.ui-datepicker-current {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
.ui-datepicker.ui-datepicker-multi {
|
|
width: auto;
|
|
}
|
|
.ui-datepicker-multi {
|
|
.ui-datepicker-group {
|
|
float: left;
|
|
table {
|
|
width: 95%;
|
|
margin: 0 auto .4em;
|
|
}
|
|
}
|
|
.ui-datepicker-group-last {
|
|
.ui-datepicker-header {
|
|
border-left-width: 0;
|
|
}
|
|
}
|
|
.ui-datepicker-group-middle {
|
|
.ui-datepicker-header {
|
|
border-left-width: 0;
|
|
}
|
|
}
|
|
.ui-datepicker-buttonpane {
|
|
clear: left;
|
|
}
|
|
}
|
|
.ui-datepicker-multi-2 {
|
|
.ui-datepicker-group {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.ui-datepicker-multi-3 {
|
|
.ui-datepicker-group {
|
|
width: 33.3%;
|
|
}
|
|
}
|
|
.ui-datepicker-multi-4 {
|
|
.ui-datepicker-group {
|
|
width: 25%;
|
|
}
|
|
}
|
|
.ui-datepicker-row-break {
|
|
clear: both;
|
|
width: 100%;
|
|
font-size: 0;
|
|
}
|
|
.ui-datepicker-rtl {
|
|
direction: rtl;
|
|
.ui-datepicker-prev {
|
|
right: 2px;
|
|
left: auto;
|
|
&:hover {
|
|
right: 1px;
|
|
left: auto;
|
|
}
|
|
}
|
|
.ui-datepicker-next {
|
|
left: 2px;
|
|
right: auto;
|
|
&:hover {
|
|
left: 1px;
|
|
right: auto;
|
|
}
|
|
}
|
|
.ui-datepicker-buttonpane {
|
|
clear: right;
|
|
button {
|
|
float: left;
|
|
}
|
|
button.ui-datepicker-current {
|
|
float: right;
|
|
}
|
|
}
|
|
.ui-datepicker-group {
|
|
float: right;
|
|
}
|
|
.ui-datepicker-group-last {
|
|
.ui-datepicker-header {
|
|
border-right-width: 0;
|
|
border-left-width: 1px;
|
|
}
|
|
}
|
|
.ui-datepicker-group-middle {
|
|
.ui-datepicker-header {
|
|
border-right-width: 0;
|
|
border-left-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sliders
|
|
|
|
.ui-slider {
|
|
position: relative;
|
|
text-align: left;
|
|
background-color: $ibo-vendors-jqueryui--ui-slider--background-color;
|
|
border: solid 1px $ibo-vendors-jqueryui--ui-slider--border-color;
|
|
border-radius: $ibo-vendors-jqueryui--ui-slider--border-radius;
|
|
.ui-slider-handle {
|
|
background-color: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--background-color;
|
|
border: solid 1px $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-color;
|
|
border-radius: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-radius;
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--diameter;
|
|
height: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--diameter;
|
|
-ms-touch-action: none;
|
|
touch-action: none;
|
|
cursor: pointer;
|
|
&:hover, &:active{
|
|
border: solid 1px $ibo-color-orange-700;
|
|
}
|
|
}
|
|
.ui-slider-range {
|
|
position: absolute;
|
|
z-index: 1;
|
|
font-size: .7em;
|
|
display: block;
|
|
// border: 0;
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
.ui-slider.ui-state-disabled {
|
|
.ui-slider-handle {
|
|
filter: inherit;
|
|
}
|
|
.ui-slider-range {
|
|
filter: inherit;
|
|
}
|
|
}
|
|
.ui-slider-horizontal {
|
|
height: .8em;
|
|
.ui-slider-handle {
|
|
top: -.2em;
|
|
margin-left: -.6em;
|
|
}
|
|
.ui-slider-range {
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
.ui-slider-range-min {
|
|
left: 0;
|
|
}
|
|
.ui-slider-range-max {
|
|
right: 0;
|
|
}
|
|
}
|
|
.ui-slider-vertical {
|
|
width: .8em;
|
|
height: 100px;
|
|
.ui-slider-handle {
|
|
left: -.3em;
|
|
margin-left: 0;
|
|
margin-bottom: -.6em;
|
|
}
|
|
.ui-slider-range {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.ui-slider-range-min {
|
|
bottom: 0;
|
|
}
|
|
.ui-slider-range-max {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
// Autocomplete
|
|
|
|
.ui-autocomplete {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: default;
|
|
z-index: 100;
|
|
.ui-menu-item{
|
|
padding: 0;
|
|
}
|
|
}
|
|
.ui-autocomplete-input{
|
|
@extend .ibo-input;
|
|
width: auto;
|
|
display: inline;
|
|
}
|
|
|
|
.ui-autocomplete-category{
|
|
@extend .ibo-popover-menu--item-separator
|
|
}
|
|
// Menu
|
|
|
|
.ui-menu{
|
|
@extend .ibo-popover-menu;
|
|
}
|
|
.ui-menu-item{
|
|
@extend .ibo-popover-menu--item;
|
|
}
|
|
|
|
// Helper
|
|
|
|
.ui-helper-hidden-accessible {
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|
|
|
|
// Tabs
|
|
.ui-tabs-tab.ui-state-disabled a{
|
|
cursor: not-allowed !important;
|
|
} |