Files
iTop/css/backoffice/components/_modal.scss
2021-01-06 11:19:43 +01:00

146 lines
2.6 KiB
SCSS

$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;
}