composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 18:48:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3538 * New design for modals

Browse Source 
* Fix date picker style
* Move jQueryUI style to vendors/ stylesheet folder
This commit is contained in:
Stephen Abello
2021-01-21 16:39:38 +01:00
parent fa0ea7ed77
commit b8aeef1d71
4 changed files with 476 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
css/backoffice/components/_modal.scss
View File

@@ -1,146 +0,0 @@
$ibo-modal--ui-dialog--padding: 16px 16px 16px !default;
$ibo-modal--ui-dialog--border-radius: $ibo-border-radius-500 !default;
$ibo-modal--ui-dialog--background-color: $ibo-color-white-100 !default;
$ibo-modal--ui-widget-overlay--background-color: $ibo-color-blue-grey-900 !default;
.ui-dialog{
position: absolute;
top: 0;
left: 0;
padding: $ibo-modal--ui-dialog--padding;
background-color: $ibo-modal--ui-dialog--background-color;
border-radius: $ibo-modal--ui-dialog--border-radius;
overflow: hidden;
outline: 0;
z-index: 21;
&::before{
position: absolute;
top: 0;
left: 0;
display: block;
background-color: #2c5382;
content: "";
width: 100%;
height: 8px;
padding-bottom: 8px;
}
.ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
.ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog-content {
position: relative;
padding: .5em 1em;
}
.ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
.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;
@extend .ibo-is-regular;
@extend .ibo-is-secondary;
> .ui-icon {
background-image: none;
float: unset;
margin: auto;
top: 4px;
left: 2px;
&.ui-icon-closethick::before{
content: '\f00d';
font-family: 'Font Awesome 5 Free';
font-weight: 600;
text-indent: 0;
position: absolute;
left: 0px;
width: 100%;
}
}
&.ui-dialog-titlebar-close{
@extend .ibo-is-alternative;
@extend .ibo-is-red;
}
}
}
.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: .5;
filter: Alpha(Opacity=50);
background-color: $ibo-modal--ui-widget-overlay--background-color;
}

22
css/backoffice/components/input/_input-date.scss
View File

@@ -7,14 +7,6 @@ $ibo-input-date--button--padding: 0 !default;
$ibo-input-date--button--background-color: transparent !default;
$ibo-input-date--button--color: $ibo-color-grey-800 !default;
$ibo-input-date--ui-datepicker--padding-top: 34px !default;
$ibo-input-date--ui-datepicker--background-color: $ibo-color-white-100 !default;
$ibo-input-date--ui-datepicker--border-color: $ibo-color-grey-400 !default;
$ibo-input-date--ui-datepicker--border-radius: $ibo-border-radius-500 !default;
$ibo-input-date--ui-datepicker-header--padding: $ibo-border-radius-500 $ibo-border-radius-500 0 0 !default;
$ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
.ibo-input-date{
display: inline-block;
width: $ibo-input-date--width;
@@ -30,17 +22,3 @@ $ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
color: $ibo-input-date--button--color;
border: none;
}
.ui-datepicker{
padding-top: 34px;
background-color: $ibo-input-date--ui-datepicker--background-color;
border: solid 1px $ibo-input-date--ui-datepicker--border-color;
border-radius: $ibo-input-date--ui-datepicker--border-radius;
}
.ui-datepicker-header{
@extend .ui-dialog::before;
position: absolute;
height: unset;
padding: $ibo-input-date--ui-datepicker-header--border-radius;
border-radius: $ibo-input-date--ui-datepicker-header--border-radius;
}

3
css/backoffice/vendors/_all.scss vendored
View File

@@ -18,4 +18,5 @@
@import "bulma-variables-overload";
@import "../../../node_modules/bulma-scss/bulma";
@import "ckeditor";
@import "ckeditor";
@import "jqueryui";

474
css/backoffice/vendors/_jqueryui.scss vendored Normal file
View File

@@ -0,0 +1,474 @@
/*!
* @copyright Copyright (C) 2010-2020 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-modal--ui-dialog--padding-x: 30px !default;
$ibo-modal--ui-dialog--border-radius: $ibo-border-radius-500 !default;
$ibo-modal--ui-dialog--background-color: $ibo-color-white-100 !default;
$ibo-modal--ui-dialog-titlebar--height: 50px !default;
$ibo-modal--ui-dialog-titlebar--background-color: $ibo-modal--ui-dialog--background-color !default;
$ibo-modal--ui-dialog-titlebar--border-bottom: solid 1px $ibo-color-grey-200 !default;
$ibo-modal--ui-dialog-buttonpane--height: $ibo-modal--ui-dialog-titlebar--height !default;
$ibo-modal--ui-dialog-buttonpane--background-color: $ibo-modal--ui-dialog--background-color !default;
$ibo-modal--ui-dialog-buttonpane--border-top: $ibo-modal--ui-dialog-titlebar--border-bottom !default;
$ibo-modal--ui-dialog--border: $ibo-modal--ui-dialog--background-color !default;
$ibo-modal--ui-widget-overlay--background-color: $ibo-color-blue-grey-800 !default;
$ibo-input-date--ui-datepicker--padding-top: 34px !default;
$ibo-input-date--ui-datepicker--background-color: $ibo-color-white-100 !default;
$ibo-input-date--ui-datepicker--border-color: $ibo-color-grey-400 !default;
$ibo-input-date--ui-datepicker--border-radius: $ibo-border-radius-500 !default;
$ibo-input-date--ui-datepicker-header--padding: $ibo-border-radius-500 $ibo-border-radius-500 0 0 !default;
$ibo-input-date--ui-datepicker-header--border-radius: 4px !default;
// Tabs
.ui-dialog{
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
background-color: $ibo-modal--ui-dialog--background-color;
border-radius: $ibo-modal--ui-dialog--border-radius;
overflow: hidden;
outline: 0;
z-index: 21;
.ui-dialog-titlebar {
padding: .4em $ibo-modal--ui-dialog--padding-x;
position: relative;
background-color: $ibo-modal--ui-dialog-titlebar--background-color;
height: $ibo-modal--ui-dialog-titlebar--height;
border-bottom: $ibo-modal--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;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog-titlebar-close {
position: absolute;
right: $ibo-modal--ui-dialog--padding-x;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog-content {
position: relative;
padding: 16px $ibo-modal--ui-dialog--padding-x;
}
.ui-dialog-buttonpane {
margin-top: auto;
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
padding: .4em $ibo-modal--ui-dialog--padding-x;
position: relative;
background-color: $ibo-modal--ui-dialog-buttonpane--background-color;
border-top: $ibo-modal--ui-dialog-buttonpane--border-top;
height: $ibo-modal--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;
@extend .ibo-is-regular;
@extend .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-grey;
}
}
}
.ui-button-icon-only {
text-indent: -9999px;
white-space: nowrap;
}
.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-modal--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;
}
// Date picker
.ui-datepicker{
padding-top: 15px;
background-color: $ibo-input-date--ui-datepicker--background-color;
border: solid 1px $ibo-input-date--ui-datepicker--border-color;
border-radius: $ibo-input-date--ui-datepicker--border-radius;
.ui-datepicker-header{
height: unset;
padding: $ibo-input-date--ui-datepicker-header--border-radius;
border-radius: $ibo-input-date--ui-datepicker-header--border-radius;
&::before{
position: absolute;
top: 0;
left: 0;
display: block;
background-color: #2c5382;
content: "";
width: 100%;
height: 8px;
padding-bottom: 8px;
}
}
.ui-datepicker-prev {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
left: 2px;
span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
}
.ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
right: 2px;
span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
}
.ui-datepicker-prev-hover {
top: 1px;
left: 1px;
}
.ui-datepicker-next-hover {
top: 1px;
right: 1px;
}
.ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
select {
font-size: 1em;
margin: 1px 0;
}
}
select.ui-datepicker-month {
width: 45%;
}
select.ui-datepicker-year {
width: 45%;
}
table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em;
}
th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
// // border: 0;
}
td {
// // border: 0;
padding: 1px;
span {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
}
.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-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
left: .5em;
top: .3em;
}
}
.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;
}
}
}