styles/sass/modals.scss
@import '~variables.scss';
// // MODALS
// // ------
// Modal fixes
.modal__wrapper {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.modal--nested-fix {
.modal__content {
> div, > div > div, > div > div > div, > div > div > div > div {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.modal__footer {
display: block;
}
}
}
// fix for modal call from another modal
.modal--z-index-fix {
z-index: 1051 !important;
}
// SPLIT POPUP (left sidebar)
// > used for upload avatar task
$split-modal-sidebar : 200px;
.split-popup {
min-height: 400px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: auto 1fr;
.sidebar {
width: $split-modal-sidebar;
border-inline-end: 1px solid var(--sd-colour-line--medium);
grid-column: 1 / 2;
}
.main {
grid-column: 2 / 3;
}
}
// Scheme create/edit modal
.add-scheme-modal {
.modal__dialog {
max-width: 840px !important;
width: 100%;
}
.modal__body {
> * {
display: flex;
flex-direction: column;
overflow-y: auto;
}
max-width: 840px !important;
}
.modal__body-header {
flex-shrink: 0;
}
.modal__body-content {
padding: 0 !important;
//min-height: 300px !important;
}
.nav-tabs {
background: $white;
}
.field {
clear: both;
float: none;
label {
display: inline-block;
margin-inline-end: 6px;
}
}
.summary {
margin-block-start: 20px;
> label {
margin-block-end: 10px;
}
.list-item {
display: block;
}
.title {
font-size: 11px;
text-transform: none;
color: $sd-text;
min-width: 0;
@include text-bold();
}
.field {
font-size: 11px;
}
}
.action-tab {
.field { margin-block-end: 10px; }
label { min-width: 90px; }
}
.btn-group {
.btn { margin-inline-end: 5px; }
}
.add {
position: absolute;
padding: 0;
margin-inline-start: 10px;
height: 22px;
width: 22px;
@include border-radius(50%);
line-height: 20px;
i { margin: 0; }
}
.term-editor {
.main-list {
overflow: visible;
}
}
}
// Split view for modals
// > used in routing schemes
.split-view {
display: flex;
.sidebar, .main {
overflow-x: hidden;
overflow-y: auto;
}
.sidebar {
width: 250px;
max-width: 250px;
flex: 0 0 auto;
padding: 20px;
& + .main {
border-inline-start: 1px solid var(--sd-colour-line--light);
}
}
.main {
flex: 1 1 auto;
}
.main + .main {
//left: 50%; inset-inline-end: 0;
border-inline-start: 1px solid var(--sd-colour-line--light);
}
.content {
padding: 2rem;
}
}
// article fullscreen preview modal
.modal--preview-article {
.scroll-shadow {
position: absolute;
inset-block-start: 47px;
width: 100vw;
}
.modal__header {
padding: 0.9rem 1.5rem !important;
.btn-group {
button {
cursor: pointer;
background: 0 0;
border: 0;
margin-block-start: 2px;
-webkit-appearance: none;
[class^="icon-"], [class*=" icon-"] {
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
color: #bfbfbf;
&:hover {
color: $gray;
}
}
}
label {
line-height: 18px;
display: inline-block;
}
}
.btn {
margin-inline-end: 12px;
}
&--no-border {
border: 0 !important;
}
}
.preview-content {
width: 100%;
max-width: 740px;
margin: 0 auto;
display: flex;
flex-direction: column;
.metadata {
margin: 30px 0 40px;
display: flex;
flex-direction: column;
flex-shrink: 0;
.preview-label {
min-width: 100px;
vertical-align: top;
}
.preview-data {
span {
font-size: 12px;
color: #000;
background-color: #f5f5f5;
margin-inline-end: 3px;
margin-block-end: 3px;
padding: 3px 6px;
border-radius: 2px;
display: inline-block;
}
}
&--top {
> div {
min-height: 24px;
overflow: hidden;
margin-block-end: 10px;
display: flex;
}
}
& + .metadata {
margin-block-start: 0;
}
}
.body {
margin-block-end: 30px;
}
figure {
margin-block-end: 2rem;
}
figcaption {
color: $grayLight;
padding: 4px 0;
}
img {
max-width: 100%;
}
}
}
// about modal
.modal--about {
h4 {
font-size: 16px;
}
.date-released {
color: #767676;
margin-block-end: 24px;
}
}
.modal__header--about {
background-color: $superdesk-green;
padding: 15px 15px 20px 20px !important;
i {
color: white;
}
.modal__header-sd-logo {
background: url(~images/superdesk-logo_white.svg) no-repeat 0 0;
width: 154px;
height: 48px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
float: inline-start;
}
}
// Custom animation
.animate-zoom__from-bottom-left {
animation: appearFromBottomLeft 0.4s ease-out 1;
}
//
.animate-slide-in__from-right {
animation: appearFromRight2 0.6s ease-out 0s 1;
}
// Styling for keyboard shortcut map (modal)
// ----------------------------------------------------------------------------------------
.keyboard-map {
h4 {
font-size: 16px;
font-weight: 400;
padding: 0 3px 8px 3px;
border-block-end: 2px solid rgba(0,0,0,.15);
}
ul {
li {
display: flex;
padding: 6px 3px;
border-style: solid;
border-color: rgba(0,0,0,.1);
border-width: 0 0 1px 0;
&:hover {
background-color: #f0f0f0;
}
.keyboard-map__shortcut {
font-weight: 500;
padding: 2px 7px;
background-color: rgba(0,0,0,.08);
}
.keyboard-map__description {
flex-grow: 1;
}
}
margin-block-end: 20px;
}
}
$sd-leftNav-bgColor: var(--sd-colour-panel-bg--100);
$sd-leftNav-borderColor: var(--sd-colour-line--light);
$sd-leftNavBtn-bgHoverColor: var(--sd-colour-interactive--alpha-20);
$sd-leftNavBtn-bgActiveColor: var(--sd-colour-interactive--alpha-10);
$sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
$sd-leftNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
.modal__body--with-navigation {
display: flex;
padding: 0 !important;
.modal__navigation {
background: $sd-leftNav-bgColor;
border-inline-end: 1px solid $sd-leftNav-borderColor;
li {
button {
font-size: 1.3rem;
color: $sd-text;
padding: 1.6rem 3rem 1.6rem 3rem;
text-align: start;
min-width: 200px;
transition: $sd-leftNavBtn-transition;
}
&:hover {
background-color: $sd-leftNavBtn-bgHoverColor;
color: $sd-text;
text-decoration: none;
}
&:active, &.active {
background-color: $sd-leftNavBtn-bgActiveColor;
color: $sd-blue;
}
&.active {
border-inline-end: $sd-leftNavBtn-borderActive;
}
}
}
.modal__navigation--content {
overflow: auto;
flex: 1 1 100%;
.subnav.pagination--rounded {
justify-content: center;
}
.table-list {
height: calc(100% - 96px);
overflow: auto !important;
}
table {
border-block-start: 0;
}
}
}
.modal-footer--flex,
.modal__footer--flex {
// border: 1px solid var(--color-line__modal);
// padding: $sd-base-increment $sd-base-increment * 2;
display: flex;
justify-content: space-between;
align-items: center;
gap: $sd-base-increment / 2;
}