styles/sass/layouts.scss
// Scaffolding
// Basic and global styles for generating a grid system, structural layout, and page templates
// -------------------------------------------------------------------------------------------
// Body reset
// ----------
body {
margin: 0;
font-family: $baseFontFamily;
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $sd-text;
background-color: $sd-background;
overflow: hidden;
height:100%;
}
@page {
margin-inline-start: 0;
margin-inline-end: 0;
margin-block-start: 1.5cm;
margin-block-end: 1.5cm;
}
// Layouts
// --------------------------------------------
.top-menu-hidden {
#top-menu {
display: none;
}
.monitoring {
inset-block-start: 0;
}
.subnav--authoring {
inset-block-start: 0;
}
.main-section {
// excludes $subnav-height
inset-block-start: $topspace;
}
}
// main container
// ------------------------------------
#main-container {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inset-inline-start: 0;
inset-block-end: 0;
padding-block-start: $topspace;
@include box-sizing(border-box);
background: $background-main;
overflow: hidden;
@include transition(all 0.3s ease);
&.menu {
inset-inline-start: $sf-main-menu-width;
}
&.authoring {
#workspace-container {
box-shadow: 2px 0 10px 0 rgba(0,0,0,0.3);
inset-inline-end: 44%;
z-index:100;
border-inline-end: 3px solid var(--sd-colour__splitter);
@include transition(all .5s);
@media only screen and (max-width : 1430px) {
inset-inline-end: 54%;
}
&.ui-resizable-resizing {
@include transition(none);
+ #authoring-container { @include transition(none); }
}
.ui-resizable-handle {
display: block;
&:hover {
background-color: var(--sd-colour-interactive);
margin-inline-start: 2px;
margin-inline-end: 2px;
width: 3px;
box-shadow: 2px 0 0 0 var(--sd-colour-interactive--alpha-20), -2px 0 0 0 var(--sd-colour-interactive--alpha-20);
}
}
}
#authoring-container {
width: 44%;
@include transition(width .5s);
.content-item-preview {
display: flex;
}
@media only screen and (max-width : 1430px) {
width: 54%;
}
}
}
&:not(.authoring) {
#workspace-container { width: auto !important; }
#authoring-container { width: auto !important; }
.ui-resizable-handle { display: none !important; }
}
&.hideMonitoring {
#workspace-container {
inset-inline-end: 100%;
margin-inline-start: -100%;
}
#authoring-container {
width: calc(100% - #{$sidebar-width}) !important;
}
.content-item-preview {
display: none;
}
}
}
// authoring sidebar container
#workspace-container {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
@include box-sizing(border-box);
inset-block-end: $authoring-opened-articles;
inset-inline-start: $sidebar-width;
background-color: $sd-background;
}
#authoring-container {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
@include box-sizing(border-box);
}
// Main section
// ------------------------------------
.main-section {
position:absolute;
inset-block-start: $subnav-height+$topspace;
inset-block-end:0; inset-inline-start:0; inset-inline-end:0;
margin:0;
padding:0;
z-index:1;
&.with-subnav {
.preview-layout {
top : $nav-height;
.preview-pane {
.actions {
padding: 15px 20px;
height: 28px;
}
.user-details-pane {
inset-block-start: 40px;
}
}
}
}
}
.main-section.filter {
inset-block-start: $subnav-height+$topspace;
inset-block-end:0; inset-inline-start:0; inset-inline-end:0;
margin:0;
padding:0;
z-index:1;
&.with-subnav {
.preview-layout {
top : $nav-height;
.preview-pane {
.actions {
padding: 15px 20px;
height: 28px;
}
.user-details-pane {
inset-block-start: 40px;
}
}
}
}
}
.main-section.search {
inset-block-start: $topspace;
.archive-sidebar {
inset-block-start:48px;
}
}
.search-label {
margin-block-end: -2px;
margin-block-start: 10px;
}
.main-section.users {
.preview-layout {
.list-pane > .content {
inset-inline-end: 400px;
transition: all ease-in-out 0.2s;
}
&.closed {
.list-pane > .content {
inset-inline-end: 0;
}
}
}
}
.main-section.contacts-section {
.preview-layout {
.content {
inset-inline-end: 560px;
transition: all ease-in-out 0.2s;
}
&.closed {
.content {
inset-inline-end: 0;
transition: all ease-in-out 0.2s;
}
}
}
}
// Preview layout
// ------------------------------------
.action-bar { //overhidding the header of preview layout
position: absolute;
inset-block-start: -96px;
inset-inline-start: 0; inset-inline-end: 0;
height: 48px;
background: transparent;
z-index: 1;
padding: $sd-base-increment $sd-base-increment * 1.5;
transition: all ease 0.35s;
border-block-end: 1px solid var(--sd-colour-line--light);
display: flex;
align-items: center;
&.show {
inset-block-start: -48px;
}
}
.preview-layout {
position: absolute;
inset-block-start: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-block-end: 0;
@include transition(right ease 0.2s);
.list-pane, .preview-pane {
> header {
height: $nav-height;
position: absolute;
inset-inline-start: 0; inset-inline-end: 0; inset-block-start: 0;
box-shadow: 0 1px 0 0 var(--sd-colour-line--x-light);
z-index: 1;
padding-inline-end: 3.6rem;
.nav-tabs {
box-shadow: none;
}
}
> .content {
position: absolute;
inset-block-start: $nav-height;
inset-inline-start: 0;
inset-block-end: 0;
inset-inline-end: 0;
}
}
.list-pane {
position:absolute;
background: $background-main;
inset-block-start: 0;
inset-inline-end: 0;
inset-inline-start: 0; inset-block-end:0;
border-inline-end: 1px solid hsl(0, 0%, 0%);
z-index: 1;
@include transition(right ease 0.2s);
.shadow-list-holder {
padding: 20px;
}
> header {
background-color:$sd-background;
}
> .content {
overflow: auto;
}
}
.preview-pane {
position: absolute;
width: $sidepreview-width;
inset-block-start: 48px;
inset-inline-end: 0; inset-block-end: 0;
background: var(--sd-colour-panel-bg--000);
overflow-y: auto;
@include transition(right ease 0.2s);
z-index: 2;
box-shadow: inset 2px 0 3px -1px hsla(0, 0%, 0%, 0.2);
> header {
position: relative;
display: flex;
align-items: center;
.close-preview {
position: absolute;
inset-block-start: 10px; inset-inline-end: 8px;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
}
> .content {
.additional-info {
border-block-end: 1px solid var(--sd-colour-line--light);
padding: 10px 20px;
}
.action-menu {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
inset-block-start: 0;
inset-inline-end: $sd-base-increment;
width: 3.2rem;
height: 4.8rem;
z-index: 2;
.dropdown {
display: block;
}
}
}
img {
max-width: 100%;
}
}
}
.ingest-container {
.list-pane {
inset-block-start:-$nav-height;
}
}
.archive-container {
.archive-sidebar {
inset-block-start:$nav-height;
}
}
// Slide pane
// ---------------------------------------------
.sd-overlay-panel {
z-index: $zindexSlidePane !important;
}
.workspace .main-section {
.sd-overlay-panel {
inset-block-start: 0;
inset-block-end: 0;
width: 56rem;
}
}
.workspace.authoring .main-section {
.sd-overlay-panel {
width: 40rem;
}
}
.workspace .main-section {
.archive-content {
.sd-overlay-panel {
inset-block-start: 4.8rem;
}
}
}
//Variables
$slide-pane-width: 400px;
.slide-pane {
position: absolute;
inset-block-start: 1px; inset-block-end: 0;
inset-inline-end: -$slide-pane-width;
width: $slide-pane-width;
background-color: $white;
z-index: $zindexSlidePane;
@include border-box();
display: flex;
flex-direction: column;
&.slide-pane--inset {
inset-block-start: $nav-height * 2;
inset-block-end: 30px;
}
&.open { inset-inline-end: 0; }
> .slide-pane__header {
height: $nav-height;
border-block-end: 1px solid #424242;
h3 {
font-size: 20px;
line-height: $nav-height;
color: $black;
@include text-light();
float: inline-start;
}
.close {
margin-block-start: 14px;
position: absolute;
inset-block-start: 0;
inset-inline-end: 12px;
}
}
> .slide-pane__content {
flex-grow: 1;
width: 100%;
inset-block-start: $nav-height;
overflow: auto;
padding: 20px 15px 0 20px;
@include border-box();
.dropdown {
margin-block-end: 20px;
.dropdown__toggle, .dropdown__menu {
width: 100%;
&.focus, &:focus {
outline: 2px solid $sd-blue;
}
}
}
}
> .slide-pane__footer {
width: 100%;
padding: 15px 15px 0 15px;
border-block-start: 1px solid #424242;
@include border-box();
button {
margin-block-end: 15px;
}
.btn-list li { padding-block-end: 0; }
}
// Stylings for slide pane
&.slide-pane--dark {
background-color: #3b3b3b;
> .slide-pane__header {
h3 {
color: $white;
}
}
}
}
.btn-list {
display: flex;
flex-direction: row;
overflow: hidden;
overflow-x: auto;
flex-wrap: wrap;
margin-inline-start: -0.4rem;
margin-inline-end: -0.4rem;
margin-block-end: 0.6rem;
li {
flex: 0 0 calc(50% - 0.8rem);
max-width: calc(50% - 0.8rem);
margin: 0.4rem !important;
.btn__check { width: 100%; }
}
}
.form__row--desk-select {
.dropdown__toggle, .dropdown__menu {
width: 100%;
}
.dropdown__toggle {
width: 100%;
max-height: 3.2rem;
}
}
// Split content
// ------------------------------------
.split-content {
position: absolute;
inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0;
> .nav, > .header, > header {
position: absolute;
inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0;
height: $nav-height;
border-block-end: 1px solid #f0f0f0;
@include border-box();
}
> .content {
position: absolute;
inset-block-start: $nav-height;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
overflow: auto;
overflow-x: hidden;
padding: 20px;
background-color: #f8f8f8;
}
}
// Tablist and tabpanes
// ------------------------------------
.tablist {
@include transition( all 0.3s ease);
width:$tablist-width;
position:absolute;
inset-block-start:0;
inset-block-end:0;
z-index:20;
background: $tablist-background;
overflow:hidden;
&.left-tablist {
inset-inline-start:0;
overflow: visible;
@include box-shadow(inset -8px 0 7px -6px #888);
}
&.right-tablist {
inset-inline-end:0;
overflow: visible;
@include box-shadow(inset 8px 0 7px -6px #888);
}
.navigation-tabs {
margin: 0;
border: 0;
list-style-type: none;
> li {
position:relative;
float:none;
.btn {
display:block;
position: relative;
box-sizing: border-box;
width: $tablist-width;
height: $tablist-width;
text-align: center;
padding: 0;
margin:0;
@include border-radius(0px);
border: 1px solid #898989;
border-width: 0 0 1px 0 !important;
background: none;
@include box-shadow(none);
&:hover {
background: #b7b7b7;
border: 1px solid #898989;
border-width: 0 0 1px 0 !important;
}
.helper-icon, .main-icon {
position: absolute;
inset-block-start: 10px;
inset-inline-start: 10px;
}
.helper-icon {
opacity: 0;
margin: 0;
inset-inline-start: 12px;
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
z-index: 2;
transition: all 0.4s 0s, transform 0.3s 0s;
}
.main-icon {
opacity: 1;
transition: all 0.2s, transform 0.2s;
}
}
.label--info {
position: absolute;
inset-block-start: 3px;
inset-inline-end: 3px;
text-shadow: none;
z-index: 2;
}
&.active {
.btn {
background: #b8b8b8;
}
.btn:hover {
.helper-icon {
opacity: 1;
transform: rotate(180deg);
transition: all 0.3s 0.2s, transform 0.2s 0.2s;
}
.main-icon {
opacity: 0;
height:8px;
width:8px;
inset-block-start: 20px;
inset-inline-start: 20px;
background-size: 100%;
}
}
}
}
}
}
.tabpane {
position:absolute;
width:$tabpane-width;
inset-block-start:0;
inset-block-end:0;
background: var(--sd-colour-panel-bg--100);
border-color:$tabpane-border;
border-style: solid;
z-index:15;
transition: all 0.3s ease;
&.left-tabpane {
inset-inline-start:-$tabpane-width;
border-width: 0 3px 0 0;
box-shadow: 2px 0px 8px 0px rgba(50,50,50,.35);
&.open-tabpane {
inset-inline-start:$tablist-width;
}
}
&.right-tabpane {
inset-inline-end:-$tabpane-width;
border-width: 0 0 0 3px;
box-shadow:-2px 0px 8px 0px rgba(40,50,50,.35);
&.open-tabpane {
inset-inline-end:$tablist-width;
}
}
.tabcontent {
padding: $tabcontent-padding;
position: absolute;
inset-block-end: 0;
inset-block-start: 0;
inset-inline-start:1px;
inset-inline-end:1px;
overflow: hidden;
}
}
// Notificaton pane
// ---------------------------------------------
.notification-pane {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
position: fixed;
color: var(--color-text);
inset-block-start: $nav-height;
inset-block-end: 32px;
inset-inline-end: -$notification-pane-width - 16px;
width: $notification-pane-width;
background: hsla(214, 13%, 12, 0.82);
backdrop-filter: blur(6px);
box-shadow: 0 2px 12px hsla(0, 0%, 0%, 0.32), 0 1px 4px hsla(0, 0%, 0%, 0.32), 0 0 0 1px var(--sd-colour-line--light);
z-index: 100;
transition: right 0.3s ease-in-out;
border-radius: var(--b-radius--x-large);
margin: 12px 0;
z-index: 1050;
&.show {
inset-inline-end: 12px;
}
.notification-pane__header {
grid-row: 1 / 2;
grid-column: 1 / 2;
height: 48px;
width: 100%;
border-block-end: 1px solid var(--sd-colour-line--light);
padding-inline-start: 10px;
padding-inline-end: 10px;
display: flex;
flex-direction: row;
align-items: center;
.user-info {
height: 40px;
padding-block-start: 12px;
padding-block-end: 2px;
.name {
color: var(--color-text-light);
font-size: 12px;
display: block;
line-height: 12px;
}
.displayname {
font-size: 11px;
color: var(--color-text-light);
display: block;
line-height: 12px;
margin-block-start: 2px;
}
}
.icn-btn {
color: var(--color-text-light);
}
.actions {
height: 20px;
button {
@include reset-button();
}
a, button {
font-size: 10px;
color: var(--color-text-light);
text-decoration: none;
text-transform: uppercase;
line-height: 20px;
padding-inline-end:16px;
padding-inline-start: 0;
display: inline-block;
margin: 0 !important;
&:last-child {
border:0;
}
&:hover {
color: var(--color-text);
}
}
}
}
.notification-pane__title {
font-size: 16px;
color: var(--color-text);
padding: 10px;
font-weight: 300;
margin-inline-end: auto;
}
.notification-pane__content {
grid-row: 2 / 2;
grid-column: 1 / 2;
overflow-y: auto;
position: relative;
.module {
margin-block-start: 20px;
.title {
font-size: 16px;
color:var(--color-text);
padding: 10px;
@include text-light();
}
}
}
}
// Default card box styling
// ---------------------------------------------
//color variables
$main-item-color: hsl(200, 18%, 46%);
$main-item-color-inactive: hsl(0, 0%, 67%);
.card-box {
position: relative;
border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
background-color: var(--sd-item__main-Bg);
font-size: 13px;
color: $sd-text;
&--with-click {
&:hover {
background-color: var(--sd-item__main-Bg--hover);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
}
}
&--flex {
display: flex;
flex-direction: column;
}
.card-box__header {
background-color: $main-item-color;
padding: 0;
border-radius: 4px 4px 0 0;
color: white;
@include box-sizing(border-box);
&::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 8px;
background-color: rgba(0,0,0,.2);
border-radius: 4px 4px 0 0;
}
.dropdown {
float: inline-end;
margin-block-start: 8px;
.dropdown__menu {
margin-block-start: 0;
}
.dropdown__toggle {
border: none;
outline: none;
padding: 0 8px;
display: block;
background: transparent;
height: 42px;
text-align: center;
line-height: 0;
font-size: 15px;
position: relative;
z-index: 2;
opacity: .4;
i {
color: $white;
}
&:hover {
opacity: .7;
}
}
&.open {
.dropdown__toggle {
opacity: 1;
}
}
}
&--empty {
height:8px;
}
&--padded-flex {
display:flex;
padding: 14px 24px 6px 14px;
i {
color: $white;
opacity: 0.7;
padding-inline-end: 10px;
}
}
}
&.inactive {
.card-box__header {
background-color: $main-item-color-inactive;
}
}
&.active {
.card-box__header {
background-color: var(--sd-item__main-Bg--activated);
}
}
.card-box__heading {
padding: 20px 16px 12px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: $white;
&--editable {
padding: 10px 16px 10px;
text-transform: initial;
&:hover {
cursor: text;
}
> div {
padding: 9px 0 3px 0;
}
> input {
margin-block-start: 6px;
}
}
}
.card-box__sub-heading {
background-color: var(--sd-colour-panel-bg--100);
font-size: 11px;
font-weight: 500;
color: $sd-text;
text-transform: uppercase;
padding: 4px 16px;
&.success {
background-color: #8bc34a;
color: $white;
}
}
.card-box__btn-group {
margin: 14px 6px 0 0;
&--right {
float: inline-end;
}
.btn {
background: transparent;
padding: 10px 2px;
color: $white;
opacity: 0.4;
&:focus, &:hover {
box-shadow: none;
opacity: 1;
}
[class^="icon-"],
[class*=" icon-"] {
color: $white;
}
}
}
.card-box__thumbnail {
padding-block-start: 8px;
line-height: 0;
& + .heading {
background-color: var(--sd-colour-panel-bg--200);
font-weight: 500;
text-align: center;
color: $sd-text;
padding: 10px 16px;
}
}
.card-box__content {
padding: 16px;
flex-grow: 1;
h4 {
text-transform: uppercase;
font-size: 11px;
color: $sd-text-light;
letter-spacing: 0.04em;
margin-block-end: 4px;
&.with-value {
margin-block-end: 0;
}
.label {
float: inline-end;
box-sizing: border-box;
height: 15px;
margin: auto 0;
padding: 3px 5px 0;
border-radius: 999px;
color: white;
background: hsla(0, 0%, 39%, 0.45);
font-size: 10px;
line-height: 100%;
letter-spacing: .06em;
font-weight: 400;
}
.value-label {
float: inline-end;
font-size: 13px;
color: $sd-text;
font-weight: 400;
text-transform: none;
letter-spacing: 0em;
}
&.card-box__h4--normal-case {
font-size: 12px;
text-transform: initial;
}
}
&--scrollable {
min-height: 20vh;
max-height: 30vh;
overflow-y: auto;
}
}
.card-box__placeholder {
padding: 16px;
flex-grow: 1;
height: calc(100% - 48px);
display: flex;
align-items: center;
justify-content: center;
color: $sd-text-light;
font-weight: 300;
font-size: 1.2rem;
&--cursorPointer {
cursor: pointer;
}
}
.card-box__content-list {
margin: -16px;
padding: 0;
list-style: none;
li, .card-box__content-list-item {
padding: 16px;
border-block-end: 1px solid var(--sd-colour-line--light);
&--inline {
display: flex;
h4 { flex: 1 1; }
span {
flex: 1 1;
text-align: end;
}
}
.card-box__content-list-inline-span {
display: inline-block;
}
&:last-child {
border: none;
}
&--border-bottom {
&:last-child {
border-block-end: 1px solid var(--sd-colour-line--light);
}
}
&--small {
padding: 7px 16px;
h4 {
margin: 0;
}
}
}
.creation-time {
display: block;
font-size: 12px;
color: $sd-text-light;
i {
display: inline-block;
opacity: 0.5;
margin-block-start: -2px;
}
}
.button__view-all {
border-block-end: 1px dotted #5598B4;
color: #5598B4;
cursor: pointer;
}
}
.card-box__article-header {
padding: 16px;
}
.card-box__time-date {
font-size: 11px;
color: $sd-text-lighter;
font-weight: 300;
&--reverse-color {
color: rgba(255,255,255, 0.6);
}
}
.cardbox__close {
position: absolute;
inset-block-start: 12px;
inset-inline-end: 6px;
z-index: 3;
}
.card-box__footer {
padding: 14px 16px;
border-block-start: 1px solid var(--sd-colour-line--medium);
background-color: var(--sd-item__main-Bg);
border-radius: 0 0 4px 4px;
&--light {
background-color: var(--sd-item__main-Bg);
}
}
.card-box__full-click {
position: absolute;
inset-block-start:0;
inset-block-end:0;
inset-inline-end:0;
inset-inline-start:0;
z-index: 2;
}
}
// Flex grid
// ---------------------------------------------
@mixin flex($grow, $shrink, $basis) {
-webkit-flex: $grow $shrink $basis;
-ms-flex: $grow $shrink $basis;
flex: $grow $shrink $basis;
}
$flex-grid-gap: 16px; // space between items is $flex-grid-gap*2
// grid
.flex-grid {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
overflow: hidden;
overflow-x: auto;
.flex-item {
position: relative;
}
&.wrap-items {
flex-wrap: wrap;
}
&.content-center {
justify-content: center;
}
&.two-lines-heading {
.header {
min-height: 72px;
}
}
&.box {
.flex-item {
margin: $flex-grid-gap;
}
}
// default grid setup (mobile first), calc for 1-6 columns
&.box.small {
&-6 {
.flex-item {
@include flex(0, 0, calc(16.6666% - #{$flex-grid-gap * 2}));
max-width: calc(16.6666% - #{$flex-grid-gap * 2});
}
}
&-5 {
.flex-item {
@include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
max-width: calc(20% - #{$flex-grid-gap * 2});
}
}
&-4 {
.flex-item {
@include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
max-width: calc(25% - #{$flex-grid-gap * 2});
}
}
&-3 {
.flex-item {
@include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
max-width: calc(33.3333% - #{$flex-grid-gap * 2});
}
}
&-2 {
.flex-item {
@include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
max-width: calc(50% - #{$flex-grid-gap * 2});
}
}
&-1 {
.flex-item {
@include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
max-width: calc(100% - #{$flex-grid-gap * 2});
}
}
}
&.small {
&-6 {
.flex-item {
@include flex(0, 0, 16.6666%);
max-width: 16.6666%;
}
}
&-5 {
.flex-item {
@include flex(0, 0, 20%);
max-width: 20%;
}
}
&-4 {
.flex-item {
@include flex(0, 0, 25%);
max-width: 25%;
}
}
&-3 {
.flex-item {
@include flex(0, 0, 33.3333%);
max-width: 33.3333%;
}
}
&-2 {
.flex-item {
@include flex(0, 0, 50%);
max-width: 50%;
}
}
&-1 {
.flex-item {
@include flex(0, 0, 100%);
max-width: 100%;
}
}
}
}
// medium screen media query /40em = 640px/
@media only screen and (min-width: 40em) {
.flex-grid {
&.box.medium {
&-6 {
.flex-item {
@include flex(0, 0, calc(16.6666% - #{$flex-grid-gap * 2}));
max-width: calc(16.6666% - #{$flex-grid-gap * 2});
}
}
&-5 {
.flex-item {
@include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
max-width: calc(20% - #{$flex-grid-gap * 2});
}
}
&-4 {
.flex-item {
@include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
max-width: calc(25% - #{$flex-grid-gap * 2});
}
}
&-3 {
.flex-item {
@include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
max-width: calc(33.3333% - #{$flex-grid-gap * 2});
}
}
&-2 {
.flex-item {
@include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
max-width: calc(50% - #{$flex-grid-gap * 2});
}
}
&-1 {
.flex-item {
@include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
max-width: calc(100% - #{$flex-grid-gap * 2});
}
}
}
&.medium {
&-6 {
.flex-item {
@include flex(0, 0, 16.6666%);
max-width: 16.6666%;
}
}
&-5 {
.flex-item {
@include flex(0, 0, 20%);
max-width: 20%;
}
}
&-4 {
.flex-item {
@include flex(0, 0, 25%);
max-width: 25%;
}
}
&-3 {
.flex-item {
@include flex(0, 0, 33.3333%);
max-width: 33.3333%;
}
}
&-2 {
.flex-item {
@include flex(0, 0, 50%);
max-width: 50%;
}
}
&-1 {
.flex-item {
@include flex(0, 0, 100%);
max-width: 100%;
}
}
}
}
}
// large screen media query /60em = 960px/
@media only screen and (min-width: 60em) {
.flex-grid {
&.box.large {
&-6 {
.flex-item {
@include flex(0, 0, calc(16.6666% - #{$flex-grid-gap * 2}));
max-width: calc(16.6666% - #{$flex-grid-gap * 2});
}
}
&-5 {
.flex-item {
@include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
max-width: calc(20% - #{$flex-grid-gap * 2});
}
}
&-4 {
.flex-item {
@include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
max-width: calc(25% - #{$flex-grid-gap * 2});
}
}
&-3 {
.flex-item {
@include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
max-width: calc(33.3333% - #{$flex-grid-gap * 2});
}
}
&-2 {
.flex-item {
@include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
max-width: calc(50% - #{$flex-grid-gap * 2});
}
}
&-1 {
.flex-item {
@include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
max-width: calc(100% - #{$flex-grid-gap * 2});
}
}
}
&.large {
&-6 {
.flex-item {
@include flex(0, 0, 16.6666%);
max-width: 16.6666%;
}
}
&-5 {
.flex-item {
@include flex(0, 0, 20%);
max-width: 20%;
}
}
&-4 {
.flex-item {
@include flex(0, 0, 25%);
max-width: 25%;
}
}
&-3 {
.flex-item {
@include flex(0, 0, 33.3333%);
max-width: 33.3333%;
}
}
&-2 {
.flex-item {
@include flex(0, 0, 50%);
max-width: 50%;
}
}
&-1 {
.flex-item {
@include flex(0, 0, 100%);
max-width: 100%;
}
}
}
}
}
// extra large screen media query /100em = 1600px/
@media only screen and (min-width: 100em) {
.flex-grid {
&.box.xlarge {
&-6 {
.flex-item {
@include flex(0, 0, calc(16.6666% - #{$flex-grid-gap*2}));
max-width: calc(16.6666% - #{$flex-grid-gap * 2});
}
}
&-5 {
.flex-item {
@include flex(0, 0, calc(20% - #{$flex-grid-gap * 2}));
max-width: calc(20% - #{$flex-grid-gap * 2});
}
}
&-4 {
.flex-item {
@include flex(0, 0, calc(25% - #{$flex-grid-gap * 2}));
max-width: calc(25% - #{$flex-grid-gap * 2});
}
}
&-3 {
.flex-item {
@include flex(0, 0, calc(33.3333% - #{$flex-grid-gap * 2}));
max-width: calc(33.3333% - #{$flex-grid-gap * 2});
}
}
&-2 {
.flex-item {
@include flex(0, 0, calc(50% - #{$flex-grid-gap * 2}));
max-width: calc(50% - #{$flex-grid-gap * 2});
}
}
&-1 {
.flex-item {
@include flex(0, 0, calc(100% - #{$flex-grid-gap * 2}));
max-width: calc(100% - #{$flex-grid-gap * 2});
}
}
}
&.xlarge {
&-6 {
.flex-item {
@include flex(0, 0, 16.6666%);
max-width: 16.6666%;
}
}
&-5 {
.flex-item {
@include flex(0, 0, 20%);
max-width: 20%;
}
}
&-4 {
.flex-item {
@include flex(0, 0, 25%);
max-width: 25%;
}
}
&-3 {
.flex-item {
@include flex(0, 0, 33.3333%);
max-width: 33.3333%;
}
}
&-2 {
.flex-item {
@include flex(0, 0, 50%);
max-width: 50%;
}
}
&-1 {
.flex-item {
@include flex(0, 0, 100%);
max-width: 100%;
}
}
}
}
}
.loading-overlay {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
&.active {
width: 100%;
height: 100%;
background: #fff url('~images/loading-large.gif') no-repeat center;
z-index: 1000;
opacity: 0.5;
}
}
.tab-box {
display: flex;
padding-block-end: 20px;
&__item {
flex: 1;
font-size: 11px;
font-weight: 500;
line-height: 33px;
text-align: center;
text-transform: uppercase;
color: $sd-text-light;
background-color: transparent;
border: 0;
border-block-end: 1px solid var(--sd-colour-line--medium);
border-inline-end: 1px solid var(--sd-colour-line--medium);
&:last-of-type {
border-inline-end: 0;
}
&--active {
color: var(--sd-colour-interactive);
border-block-start: 1px solid var(--sd-colour-line--medium);
border-block-end: 0;
}
}
}
.loading-overlay-for-tree-dot{
position: relative;
&.active {
background: url('~images/three-dots-white.svg') no-repeat center;
opacity: 0.5;
text-indent: -9999px;
background-size: 20%;
}
}
// Fix for height on master desk panel
.sd-content-wrapper__main-content-area {
grid-column: contentArea;
overflow: auto;
height: calc(100vh - 80px);
}
.sd-main-content-grid__content-inner {
height: 100%;
}
// Things for masterdesk, should be moved to ui-framework
.sd-main-content-grid__preview {
.search-box {
margin-block-start: -10px;
margin-inline-start: -10px;
margin-inline-end: -10px;
}
.content-list-holder {
display: contents;
}
}