d2coreui 23.0.13 → 23.0.15

package/style/flexLayout/new/flexLayoutBase.scss

@@ -1,622 +1,622 @@
-@mixin absoluteFill {
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-}
-
-.flexlayout {
-  &__layout {
-    @include absoluteFill;
-    overflow: hidden;
-    background-color: $color_background;
-  }
-
-  &__splitter {
-    background-color: $color_splitter;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: $color_splitter_hover;
-      }
-    }
-
-    &_border {
-      z-index: 10;
-    }
-
-    &_drag {
-      border-radius: 5px;
-      background-color: $color_splitter_drag;
-      z-index: 1000;
-    }
-  }
-
-  &__outline_rect {
-    position: absolute;
-    cursor: move;
-    box-sizing: border-box;
-    border: 2px solid $color_drag1;
-    box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
-    border-radius: 5px;
-    z-index: 1000;
-
-    &_edge {
-      cursor: move;
-      border: 2px solid $color_drag2;
-      border-radius: 5px;
-      z-index: 1000;
-      box-sizing: border-box;
-    }
-  }
-
-  &__edge_rect {
-    position: absolute;
-    z-index: 1000;
-    background-color: $color_background;
-  }
-
-  &__drag_rect {
-    position: absolute;
-    cursor: move;
-    background-color: $color_background;
-    border: 2px solid $color_background_border;
-    border-radius: 5px;
-    z-index: 1000;
-    box-sizing: border-box;
-    opacity: 0.9;
-    text-align: center;
-
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    overflow: hidden;
-    padding: 10px;
-    word-wrap: break-word;
-    font-size: $font-size;
-    font-family: $font-family;
-  }
-
-  &__tabset {
-    overflow: hidden;
-    color: $color_text;
-    background-color: $color_background;
-    line-height: 1.5;
-    box-sizing: border-box;
-    font-size: $font-size;
-    font-family: $font-family;
-    font-feature-settings: "tnum";
-    zoom: 1;
-    margin: 0;
-    padding: 0;
-    font-variant: tabular-nums;
-
-    &_header { // tabset header bar
-      position: absolute;
-      display: flex;
-      align-items: center;
-      left: 0;
-      right: 0;
-      background-color: $color_background;
-      color: $color_text;
-      padding: 3px 3px 3px 5px;
-      box-sizing: border-box;
-
-      &_content {
-        flex-grow: 1;
-      }
-    }
-
-    &_tabbar {
-      &_outer {
-        // tabset tabbar outer
-        box-sizing: border-box;
-        position: absolute;
-        left: 2px;
-        right: 0;
-        overflow: hidden;
-        display: flex;
-      }
-
-      &_outer_top {
-        border-bottom: 1px solid $color_background_selected;
-      }
-
-      &_outer_bottom {
-        box-sizing: border-box;
-        border-top: 1px solid $color_background_selected;
-      }
-
-      &_inner {
-        // tabset tabbar inner
-        position: relative;
-        box-sizing: border-box;
-        display: flex;
-        flex-grow: 1;
-        overflow: hidden;
-
-        &_tab_container {
-          display: flex;
-          box-sizing: border-box;
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          width: 10000px;
-
-          &_top {
-            border-top: 2px solid transparent; // if you change this, update the _sizer above
-          }
-
-          &_bottom {
-            border-bottom: 2px solid transparent;
-          }
-        }
-      }
-    }
-
-    &-selected {
-    }
-
-    &-maximized {
-    }
-  }
-
-  &__tab {
-    overflow: auto;
-    position: absolute;
-    box-sizing: border-box;
-    color: $color_text;
-    background-color: $color_content_background;
-
-    &_button {
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      padding: 5px 10px 4px 12px; // if you change top or bottom update the tabset_sizer above
-      margin-right: 4px;
-      vertical-align: top;
-      cursor: pointer;
-
-      &--selected {
-        background-color: $color_background_selected;
-        color: $color_selected;
-      }
-
-      @media (hover: hover) {
-        &:hover {
-          background-color: $color_background_selected;
-          color: $color_selected;
-        }
-      }
-
-      &--selected {
-        font-weight: 500;
-        border-bottom: 3px solid $color_content_background;
-      }
-
-      &--unselected {
-        color: gray;
-        background-color: $color_background_unselected;
-      }
-
-      &_top {
-        border-top-left-radius: 0px;
-        border-top-right-radius: 0px;
-      }
-
-      &_bottom {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
-      }
-
-      &_leading {
-        display: inline-block;
-      }
-
-      &_content {
-        display: inline-block;
-      }
-
-      &_textbox {
-        border: none;
-        color: $color_text;
-        background-color: $color_content_background;
-      }
-
-      &_textbox:focus {
-        outline: none;
-      }
-
-      &_trailing {
-        display: inline-block;
-        margin-left: 8px;
-        margin-top: 0px;
-        min-width: 8px;
-        height: 21px;
-      }
-
-      @media (pointer: coarse) {
-        &_trailing {
-          min-width: 20px;
-          min-height: 20px;
-        }
-      }
-      @media (hover: hover) {
-        &:hover &_trailing {
-          background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
-        }
-      }
-
-      &--selected &_trailing {
-        background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
-      }
-
-      &_overflow {
-        margin-left: 10px;
-        padding-left: 12px;
-        border: none;
-        color: $color_text;
-        cursor: pointer;
-        font-size: inherit;
-        background: transparent url("../../components/icons/ant-design-double-right-outline.svg") no-repeat left;
-      }
-    }
-
-    &_toolbar {
-      display: flex;
-      align-items: center;
-
-      &_button {
-        min-width: 20px;
-        min-height: 20px;
-        border: none;
-        outline: none;
-
-        &-min {
-          background: transparent url("../../components/icons/maximize.png") no-repeat center;
-        }
-
-        &-max {
-          background: transparent url("../../components/icons/restore.png") no-repeat center;
-        }
-
-        &-float {
-          background: transparent url("../../components/icons/popout.png") no-repeat center;
-        }
-      }
-    }
-
-    &_floating {
-      overflow: auto;
-      position: absolute;
-      box-sizing: border-box;
-      color: $color_text;
-      background-color: $color_content_background;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &_inner {
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-
-      &_inner div {
-        margin-bottom: 5px;
-        text-align: center;
-      }
-
-      &_inner div a {
-        color: royalblue;
-      }
-    }
-  }
-
-  &__border {
-    background-color: $color_border;
-    box-sizing: border-box;
-    overflow: hidden;
-    display: flex;
-    font-size: $font-size;
-    font-family: $font-family;
-
-    &_top {
-      border-bottom: 1px solid $color_border_line;
-      align-items: center;
-    }
-
-    &_bottom {
-      border-top: 1px solid $color_border_line;
-      align-items: center;
-    }
-
-    &_left {
-      border-right: 1px solid $color_border_line;
-      align-content: center;
-      flex-direction: column;
-    }
-
-    &_right {
-      border-left: 1px solid $color_border_line;
-      align-content: center;
-      flex-direction: column;
-    }
-
-    &_inner {
-      position: relative;
-      box-sizing: border-box;
-      display: flex;
-      overflow: hidden;
-      flex-grow: 1;
-
-      &_tab_container {
-        white-space: nowrap;
-        display: flex;
-        box-sizing: border-box;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 10000px;
-
-        &_right {
-          transform-origin: top left;
-          transform: rotate(90deg);
-        }
-
-        &_left {
-          flex-direction: row-reverse;
-          transform-origin: top right;
-          transform: rotate(-90deg);
-        }
-      }
-    }
-
-    &_button {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      padding: 3px 8px;
-      margin: 2px;
-      border-radius: 3px;
-      box-sizing: border-box;
-      white-space: nowrap;
-
-      &--selected {
-        background-color: $color_border_line;
-        color: $color_text;
-      }
-
-      @media (hover: hover) {
-        &:hover {
-          background-color: $color_border_line;
-          color: $color_text;
-        }
-      }
-
-      &--unselected {
-        color: gray;
-      }
-
-      &_leading {
-        display: inline;
-      }
-
-      &_content {
-        display: inline-block;
-      }
-
-      &_trailing {
-        display: inline-block;
-        margin-left: 8px;
-        min-width: 12px;
-        min-height: 14px;
-        color: $color_text;
-      }
-
-      @media (pointer: coarse) {
-        &_trailing {
-          min-width: 20px;
-          min-height: 20px;
-        }
-      }
-
-      @media (hover: hover) {
-        &:hover &_trailing {
-          background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
-        }
-      }
-
-      &--selected &_trailing {
-        background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
-      }
-    }
-
-    &_toolbar {
-      display: flex;
-      align-items: center;
-
-      &_left {
-        flex-direction: column;
-      }
-
-      &_right {
-        flex-direction: column;
-      }
-
-      &_button {
-        min-width: 20px;
-        min-height: 20px;
-        border: none;
-        outline: none;
-
-        &-float {
-          background: transparent url("../../components/icons/popout.png") no-repeat center;
-        }
-
-        &_overflow {
-          border: none;
-          padding-left: 12px;
-          color: gray;
-          font-size: inherit;
-          background: transparent url("../../components/icons/more2.png") no-repeat left;
-        }
-
-        &_overflow_top,
-        &_overflow_bottom {
-          margin-left: 10px;
-        }
-
-        &_overflow_right,
-        &_overflow_left {
-          padding-right: 0px;
-          margin-top: 5px;
-        }
-      }
-    }
-  }
-
-  &__popup_menu {
-    font-size: $font-size;
-    font-family: $font-family;
-
-    &_item {
-      padding: 2px 10px 2px 10px;
-      white-space: nowrap;
-    }
-
-    @media (hover: hover) {
-      &_item:hover {
-        background-color: $color_border;
-      }
-    }
-
-    &_container {
-      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
-      border: 1px solid $color_border;
-      color: $color_text;
-      background: $color_background;
-      border-radius: 3px;
-      position: absolute;
-      z-index: 1000;
-      max-height: 50%;
-      min-width: 100px;
-      overflow: auto;
-    }
-  }
-
-  &__floating_window {
-    _body {
-      height: 100%;
-    }
-
-    &_content {
-      @include absoluteFill;
-    }
-
-    &_tab {
-      overflow: auto;
-      @include absoluteFill;
-
-      box-sizing: border-box;
-      background-color: $color_background;
-      color: $color_text;
-    }
-  }
-
-  &__tab_floating {
-    overflow: auto;
-    position: absolute;
-    box-sizing: border-box;
-    color: $color_text;
-    background-color: $color_background;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &_inner {
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &_inner div {
-      margin-bottom: 5px;
-      text-align: center;
-    }
-
-    &_inner div a {
-      color: royalblue;
-    }
-  }
-
-  &__tab_floating {
-    overflow: auto;
-    position: absolute;
-    box-sizing: border-box;
-    color: $color_text;
-    background-color: $color_background;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &_inner {
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &_inner div {
-      margin-bottom: 5px;
-      text-align: center;
-    }
-
-    &_inner div a {
-      color: royalblue;
-    }
-  }
-
-  &__error_boundary_container {
-    @include absoluteFill;
-    display: flex;
-    justify-content: center;
-  }
-
-  &__error_boundary_content {
-    display: flex;
-    align-items: center;
-  }
-
-  // These classes are used to measure the sizes for tab header bar, tab bar and border bars,
-  // only the height is used, the padding should match the vertical spacing (padding & margins)
-  // that have been used in the above classes
-
-  &__tabset_sizer {
-    padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
-    padding-bottom: 3px; // tab_button has 3 padding bottom
-    font-size: $font-size;
-    font-family: $font-family;
-  }
-
-  &__tabset_header_sizer {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: $font-size;
-    font-family: $font-family;
-  }
-
-  &__border_sizer {
-    padding-top: 6px;
-    padding-bottom: 5px;
-    font-size: $font-size;
-    font-family: $font-family;
-  }
-
+@mixin absoluteFill {
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.flexlayout {
+  &__layout {
+    @include absoluteFill;
+    overflow: hidden;
+    background-color: $color_background;
+  }
+
+  &__splitter {
+    background-color: $color_splitter;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: $color_splitter_hover;
+      }
+    }
+
+    &_border {
+      z-index: 10;
+    }
+
+    &_drag {
+      border-radius: 5px;
+      background-color: $color_splitter_drag;
+      z-index: 1000;
+    }
+  }
+
+  &__outline_rect {
+    position: absolute;
+    cursor: move;
+    box-sizing: border-box;
+    border: 2px solid $color_drag1;
+    box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
+    border-radius: 5px;
+    z-index: 1000;
+
+    &_edge {
+      cursor: move;
+      border: 2px solid $color_drag2;
+      border-radius: 5px;
+      z-index: 1000;
+      box-sizing: border-box;
+    }
+  }
+
+  &__edge_rect {
+    position: absolute;
+    z-index: 1000;
+    background-color: $color_background;
+  }
+
+  &__drag_rect {
+    position: absolute;
+    cursor: move;
+    background-color: $color_background;
+    border: 2px solid $color_background_border;
+    border-radius: 5px;
+    z-index: 1000;
+    box-sizing: border-box;
+    opacity: 0.9;
+    text-align: center;
+
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 10px;
+    word-wrap: break-word;
+    font-size: $font-size;
+    font-family: $font-family;
+  }
+
+  &__tabset {
+    overflow: hidden;
+    color: $color_text;
+    background-color: $color_background;
+    line-height: 1.5;
+    box-sizing: border-box;
+    font-size: $font-size;
+    font-family: $font-family;
+    font-feature-settings: "tnum";
+    zoom: 1;
+    margin: 0;
+    padding: 0;
+    font-variant: tabular-nums;
+
+    &_header { // tabset header bar
+      position: absolute;
+      display: flex;
+      align-items: center;
+      left: 0;
+      right: 0;
+      background-color: $color_background;
+      color: $color_text;
+      padding: 3px 3px 3px 5px;
+      box-sizing: border-box;
+
+      &_content {
+        flex-grow: 1;
+      }
+    }
+
+    &_tabbar {
+      &_outer {
+        // tabset tabbar outer
+        box-sizing: border-box;
+        position: absolute;
+        left: 2px;
+        right: 0;
+        overflow: hidden;
+        display: flex;
+      }
+
+      &_outer_top {
+        border-bottom: 1px solid $color_background_selected;
+      }
+
+      &_outer_bottom {
+        box-sizing: border-box;
+        border-top: 1px solid $color_background_selected;
+      }
+
+      &_inner {
+        // tabset tabbar inner
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-grow: 1;
+        overflow: hidden;
+
+        &_tab_container {
+          display: flex;
+          box-sizing: border-box;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: 10000px;
+
+          &_top {
+            border-top: 2px solid transparent; // if you change this, update the _sizer above
+          }
+
+          &_bottom {
+            border-bottom: 2px solid transparent;
+          }
+        }
+      }
+    }
+
+    &-selected {
+    }
+
+    &-maximized {
+    }
+  }
+
+  &__tab {
+    overflow: auto;
+    position: absolute;
+    box-sizing: border-box;
+    color: $color_text;
+    background-color: $color_content_background;
+
+    &_button {
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding: 5px 10px 4px 12px; // if you change top or bottom update the tabset_sizer above
+      margin-right: 4px;
+      vertical-align: top;
+      cursor: pointer;
+
+      &--selected {
+        background-color: $color_background_selected;
+        color: $color_selected;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: $color_background_selected;
+          color: $color_selected;
+        }
+      }
+
+      &--selected {
+        font-weight: 500;
+        border-bottom: 3px solid $color_content_background;
+      }
+
+      &--unselected {
+        color: gray;
+        background-color: $color_background_unselected;
+      }
+
+      &_top {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+      }
+
+      &_bottom {
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+
+      &_leading {
+        display: inline-block;
+      }
+
+      &_content {
+        display: inline-block;
+      }
+
+      &_textbox {
+        border: none;
+        color: $color_text;
+        background-color: $color_content_background;
+      }
+
+      &_textbox:focus {
+        outline: none;
+      }
+
+      &_trailing {
+        display: inline-block;
+        margin-left: 8px;
+        margin-top: 0px;
+        min-width: 8px;
+        height: 21px;
+      }
+
+      @media (pointer: coarse) {
+        &_trailing {
+          min-width: 20px;
+          min-height: 20px;
+        }
+      }
+      @media (hover: hover) {
+        &:hover &_trailing {
+          background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
+        }
+      }
+
+      &--selected &_trailing {
+        background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
+      }
+
+      &_overflow {
+        margin-left: 10px;
+        padding-left: 12px;
+        border: none;
+        color: $color_text;
+        cursor: pointer;
+        font-size: inherit;
+        background: transparent url("../../components/icons/ant-design-double-right-outline.svg") no-repeat left;
+      }
+    }
+
+    &_toolbar {
+      display: flex;
+      align-items: center;
+
+      &_button {
+        min-width: 20px;
+        min-height: 20px;
+        border: none;
+        outline: none;
+
+        &-min {
+          background: transparent url("../../components/icons/maximize.png") no-repeat center;
+        }
+
+        &-max {
+          background: transparent url("../../components/icons/restore.png") no-repeat center;
+        }
+
+        &-float {
+          background: transparent url("../../components/icons/popout.png") no-repeat center;
+        }
+      }
+    }
+
+    &_floating {
+      overflow: auto;
+      position: absolute;
+      box-sizing: border-box;
+      color: $color_text;
+      background-color: $color_content_background;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &_inner {
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &_inner div {
+        margin-bottom: 5px;
+        text-align: center;
+      }
+
+      &_inner div a {
+        color: royalblue;
+      }
+    }
+  }
+
+  &__border {
+    background-color: $color_border;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    font-size: $font-size;
+    font-family: $font-family;
+
+    &_top {
+      border-bottom: 1px solid $color_border_line;
+      align-items: center;
+    }
+
+    &_bottom {
+      border-top: 1px solid $color_border_line;
+      align-items: center;
+    }
+
+    &_left {
+      border-right: 1px solid $color_border_line;
+      align-content: center;
+      flex-direction: column;
+    }
+
+    &_right {
+      border-left: 1px solid $color_border_line;
+      align-content: center;
+      flex-direction: column;
+    }
+
+    &_inner {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      overflow: hidden;
+      flex-grow: 1;
+
+      &_tab_container {
+        white-space: nowrap;
+        display: flex;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 10000px;
+
+        &_right {
+          transform-origin: top left;
+          transform: rotate(90deg);
+        }
+
+        &_left {
+          flex-direction: row-reverse;
+          transform-origin: top right;
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    &_button {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      padding: 3px 8px;
+      margin: 2px;
+      border-radius: 3px;
+      box-sizing: border-box;
+      white-space: nowrap;
+
+      &--selected {
+        background-color: $color_border_line;
+        color: $color_text;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: $color_border_line;
+          color: $color_text;
+        }
+      }
+
+      &--unselected {
+        color: gray;
+      }
+
+      &_leading {
+        display: inline;
+      }
+
+      &_content {
+        display: inline-block;
+      }
+
+      &_trailing {
+        display: inline-block;
+        margin-left: 8px;
+        min-width: 12px;
+        min-height: 14px;
+        color: $color_text;
+      }
+
+      @media (pointer: coarse) {
+        &_trailing {
+          min-width: 20px;
+          min-height: 20px;
+        }
+      }
+
+      @media (hover: hover) {
+        &:hover &_trailing {
+          background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
+        }
+      }
+
+      &--selected &_trailing {
+        background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
+      }
+    }
+
+    &_toolbar {
+      display: flex;
+      align-items: center;
+
+      &_left {
+        flex-direction: column;
+      }
+
+      &_right {
+        flex-direction: column;
+      }
+
+      &_button {
+        min-width: 20px;
+        min-height: 20px;
+        border: none;
+        outline: none;
+
+        &-float {
+          background: transparent url("../../components/icons/popout.png") no-repeat center;
+        }
+
+        &_overflow {
+          border: none;
+          padding-left: 12px;
+          color: gray;
+          font-size: inherit;
+          background: transparent url("../../components/icons/more2.png") no-repeat left;
+        }
+
+        &_overflow_top,
+        &_overflow_bottom {
+          margin-left: 10px;
+        }
+
+        &_overflow_right,
+        &_overflow_left {
+          padding-right: 0px;
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+
+  &__popup_menu {
+    font-size: $font-size;
+    font-family: $font-family;
+
+    &_item {
+      padding: 2px 10px 2px 10px;
+      white-space: nowrap;
+    }
+
+    @media (hover: hover) {
+      &_item:hover {
+        background-color: $color_border;
+      }
+    }
+
+    &_container {
+      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
+      border: 1px solid $color_border;
+      color: $color_text;
+      background: $color_background;
+      border-radius: 3px;
+      position: absolute;
+      z-index: 1000;
+      max-height: 50%;
+      min-width: 100px;
+      overflow: auto;
+    }
+  }
+
+  &__floating_window {
+    _body {
+      height: 100%;
+    }
+
+    &_content {
+      @include absoluteFill;
+    }
+
+    &_tab {
+      overflow: auto;
+      @include absoluteFill;
+
+      box-sizing: border-box;
+      background-color: $color_background;
+      color: $color_text;
+    }
+  }
+
+  &__tab_floating {
+    overflow: auto;
+    position: absolute;
+    box-sizing: border-box;
+    color: $color_text;
+    background-color: $color_background;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &_inner {
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &_inner div {
+      margin-bottom: 5px;
+      text-align: center;
+    }
+
+    &_inner div a {
+      color: royalblue;
+    }
+  }
+
+  &__tab_floating {
+    overflow: auto;
+    position: absolute;
+    box-sizing: border-box;
+    color: $color_text;
+    background-color: $color_background;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &_inner {
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &_inner div {
+      margin-bottom: 5px;
+      text-align: center;
+    }
+
+    &_inner div a {
+      color: royalblue;
+    }
+  }
+
+  &__error_boundary_container {
+    @include absoluteFill;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__error_boundary_content {
+    display: flex;
+    align-items: center;
+  }
+
+  // These classes are used to measure the sizes for tab header bar, tab bar and border bars,
+  // only the height is used, the padding should match the vertical spacing (padding & margins)
+  // that have been used in the above classes
+
+  &__tabset_sizer {
+    padding-top: 5px; // tab_button has 3 padding top, tabset header inner has 2 border
+    padding-bottom: 3px; // tab_button has 3 padding bottom
+    font-size: $font-size;
+    font-family: $font-family;
+  }
+
+  &__tabset_header_sizer {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: $font-size;
+    font-family: $font-family;
+  }
+
+  &__border_sizer {
+    padding-top: 6px;
+    padding-bottom: 5px;
+    font-size: $font-size;
+    font-family: $font-family;
+  }
+
 }