d2coreui 21.0.10 → 21.0.13

package/style/flexLayout/flexLayoutBase.scss

@@ -8,28 +8,48 @@
 
 .flexlayout {
   &__layout {
+    --color-text: #{$color_text};
+    --color-background: #{$color_background};
+    --color-base: #{$color_base};
+    --color-1: #{$color_1};
+    --color-2: #{$color_2};
+    --color-3: #{$color_3};
+    --color-4: #{$color_4};
+    --color-5: #{$color_5};
+    --color-6: #{$color_6};
+    --color-drag1: #{$color_drag1};
+    --color-drag2: #{$color_drag2};
+    --color-drag1-background: #{$color_drag1_background};
+    --color-drag2-background: #{$color_drag2_background};
+
+    --font-size: #{$font-size};
+    --font-family: #{$font-family};
+
     @include absoluteFill;
     overflow: hidden;
     background-color: $color_background;
   }
 
   &__splitter {
-    background-color: $color_splitter;
+    @include splitter_mixin;
 
     @media (hover: hover) {
       &:hover {
-        background-color: $color_splitter_hover;
+        transition: background-color ease-in .1s;
+        transition-delay: 0.05s;
+        @include splitter_hover_mixin;
       }
     }
-
     &_border {
       z-index: 10;
+      @include splitter_border_mixin;
     }
-
     &_drag {
-      border-radius: 5px;
-      background-color: $color_splitter_drag;
       z-index: 1000;
+      @include splitter_drag_mixin;
+    }
+    &_extra {
+      background-color: transparent;
     }
   }
 
@@ -37,14 +57,15 @@
     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: 2px solid var(--color-drag1);
+    background: var(--color-drag1-background);
     border-radius: 5px;
     z-index: 1000;
 
     &_edge {
       cursor: move;
-      border: 2px solid $color_drag2;
+      border: 2px solid var(--color-drag2);
+      background: var(--color-drag2-background);
       border-radius: 5px;
       z-index: 1000;
       box-sizing: border-box;
@@ -72,10 +93,10 @@
     justify-content: center;
     flex-direction: column;
     overflow: hidden;
-    padding: 10px;
+    padding: 0.5em 1em;
     word-wrap: break-word;
-    font-size: $font-size;
-    font-family: $font-family;
+    font-size: var(--font-size);
+    font-family: var(--font-family);
   }
 
   &__tabset {
@@ -92,7 +113,8 @@
     padding: 0;
     font-variant: tabular-nums;
 
-    &_header { // tabset header bar
+    &_header {
+      // tabset header bar
       position: absolute;
       display: flex;
       align-items: center;
@@ -102,6 +124,8 @@
       color: $color_text;
       padding: 3px 3px 3px 5px;
       box-sizing: border-box;
+      border-bottom: 1px solid var(--color-3);
+      @include tabset_header_mixin;
 
       &_content {
         flex-grow: 1;
@@ -117,6 +141,7 @@
         right: 0;
         overflow: hidden;
         display: flex;
+        @include tabset_tabbar_mixin;
       }
 
       &_outer_top {
@@ -138,6 +163,9 @@
 
         &_tab_container {
           display: flex;
+          gap: 4px;
+          padding-left: 4px;
+          padding-right: 4px;
           box-sizing: border-box;
           position: absolute;
           top: 0;
@@ -147,7 +175,6 @@
           &_top {
             border-top: 2px solid transparent; // if you change this, update the _sizer above
           }
-
           &_bottom {
             border-bottom: 2px solid transparent;
           }
@@ -156,12 +183,22 @@
     }
 
     &-selected {
+      @include tabset_selected_mixin;
     }
 
     &-maximized {
+      @include tabset_maximized_mixin;
     }
   }
 
+  &__tab_button_stamp {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3em;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
   &__tab {
     overflow: auto;
     position: absolute;
@@ -170,58 +207,53 @@
     background-color: $color_content_background;
 
     &_button {
-      display: inline-flex;
+      display: flex;
+      gap: 0.3em;
       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;
+      @include tab_button_mixin;
 
       &--selected {
-        background-color: $color_background_selected;
-        color: $color_selected;
+        @include tab_button_selected_mixin;
       }
-
       @media (hover: hover) {
         &:hover {
-          background-color: $color_background_selected;
-          color: $color_selected;
+          @include tab_button_hovered_mixin;
         }
       }
 
-      &--selected {
-        font-weight: 500;
-        border-bottom: 3px solid $color_content_background;
-      }
-
       &--unselected {
-        color: gray;
-        background-color: $color_background_unselected;
+        @include tab_button_unselected_mixin;
       }
 
       &_top {
-        border-top-left-radius: 0px;
-        border-top-right-radius: 0px;
+        @include tab_top_mixin;
       }
 
       &_bottom {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
+        @include tab_bottom_mixin;
       }
 
       &_leading {
-        display: inline-block;
+        display: flex;
       }
 
       &_content {
-        display: inline-block;
+        display: flex;
       }
 
       &_textbox {
         border: none;
+        font-family: var(--font-family);
+        font-size: var(--font-size);
         color: $color_text;
         background-color: $color_content_background;
+        border: 1px inset var(--color-1);
+        border-radius: 3px;
       }
 
       &_textbox:focus {
@@ -229,61 +261,77 @@
       }
 
       &_trailing {
-        display: inline-block;
-        margin-left: 8px;
-        margin-top: 0px;
-        min-width: 8px;
-        height: 21px;
+        display: flex;
+        visibility: hidden;
+        border-radius: 4px;
+        &:hover {
+          @include close_button_hovered_mixin;
+        }
       }
-
       @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;
+          visibility: visible;
         }
       }
 
       &--selected &_trailing {
-        background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
+        visibility: visible;
       }
 
       &_overflow {
-        margin-left: 10px;
-        padding-left: 12px;
+        display: flex;
+        align-items: center;
         border: none;
         color: $color_text;
         cursor: pointer;
         font-size: inherit;
-        background: transparent url("../../components/icons/ant-design-double-right-outline.svg") no-repeat left;
+        background-color: transparent;
       }
     }
 
     &_toolbar {
       display: flex;
       align-items: center;
+      gap: .3em;
+      padding-left: .5em;
+      padding-right: .3em;
 
       &_button {
-        min-width: 20px;
-        min-height: 20px;
         border: none;
         outline: none;
+        font-size: inherit;
+        margin: 0px;
+        background-color: transparent;
+        border-radius: 4px;
+        padding: 1px;
+        @media (hover: hover) {
+          &:hover {
+            @include toolbar_button_hovered_mixin;
+          }
+        }
 
         &-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;
         }
+
+        &-close {
+        }
+      }
+
+      &_sticky_buttons_container {
+        display: flex;
+        gap: 0.3em;
+        padding-left: 2px;
+        align-items: center;
       }
     }
 
@@ -317,12 +365,12 @@
   }
 
   &__border {
-    background-color: $color_border;
     box-sizing: border-box;
     overflow: hidden;
     display: flex;
-    font-size: $font-size;
-    font-family: $font-family;
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    @include border_mixin;
 
     &_top {
       border-bottom: 1px solid $color_border_line;
@@ -356,6 +404,9 @@
       &_tab_container {
         white-space: nowrap;
         display: flex;
+        gap: 4px;
+        padding-left: 2px;
+        padding-right: 2px;
         box-sizing: border-box;
         position: absolute;
         top: 0;
@@ -366,7 +417,6 @@
           transform-origin: top left;
           transform: rotate(90deg);
         }
-
         &_left {
           flex-direction: row-reverse;
           transform-origin: top right;
@@ -377,115 +427,123 @@
 
     &_button {
       display: flex;
+      gap: 0.3em;
       align-items: center;
       cursor: pointer;
-      padding: 3px 8px;
-      margin: 2px;
-      border-radius: 3px;
+      padding: 3px 0.5em;
+      margin: 2px 0px;
       box-sizing: border-box;
       white-space: nowrap;
+      @include border_button_mixin;
 
       &--selected {
-        background-color: $color_border_line;
-        color: $color_text;
+        @include border_button_selected_mixin;
       }
-
       @media (hover: hover) {
         &:hover {
-          background-color: $color_border_line;
-          color: $color_text;
+          @include border_button_hovered_mixin;
         }
       }
 
       &--unselected {
-        color: gray;
+        @include border_button_unselected_mixin;
       }
 
       &_leading {
-        display: inline;
+        display: flex;
       }
 
       &_content {
-        display: inline-block;
+        display: flex;
       }
 
       &_trailing {
-        display: inline-block;
-        margin-left: 8px;
-        min-width: 12px;
-        min-height: 14px;
+        display: flex;
+        border-radius: 4px;
+        visibility: hidden;
         color: $color_text;
+        &:hover {
+          @include close_button_hovered_mixin;
+        }
       }
-
       @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;
+          visibility: visible;
         }
       }
 
       &--selected &_trailing {
-        background: transparent url("../../components/icons/ant-design_close-outline.svg") no-repeat center;
+        visibility: visible;
       }
     }
 
     &_toolbar {
       display: flex;
+      gap: .3em;
       align-items: center;
 
-      &_left {
+      &_left,
+      &_right {
         flex-direction: column;
+        padding-top: .5em;
+        padding-bottom: .3em;
       }
 
-      &_right {
-        flex-direction: column;
+      &_top,
+      &_bottom {
+        padding-left: .5em;
+        padding-right: .3em;
       }
 
       &_button {
-        min-width: 20px;
-        min-height: 20px;
         border: none;
         outline: none;
+        font-size: inherit;
+        background-color: transparent;
+        border-radius: 4px;
+        padding: 1px;
+        @media (hover: hover) {
+          &:hover {
+            @include toolbar_button_hovered_mixin;
+          }
+        }
 
         &-float {
-          background: transparent url("../../components/icons/popout.png") no-repeat center;
         }
 
         &_overflow {
+          display: flex;
+          align-items: center;
           border: none;
-          padding-left: 12px;
           color: gray;
           font-size: inherit;
-          background: transparent url("../../components/icons/more2.png") no-repeat left;
+          background-color: transparent;
         }
 
         &_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;
+    font-size: var(--font-size);
+    font-family: var(--font-family);
 
     &_item {
-      padding: 2px 10px 2px 10px;
+      padding: 2px 0.5em;
       white-space: nowrap;
+      cursor: pointer;
+      border-radius: 2px;
     }
 
     @media (hover: hover) {
@@ -505,6 +563,7 @@
       max-height: 50%;
       min-width: 100px;
       overflow: auto;
+      padding: 2px;
     }
   }
 
@@ -522,64 +581,8 @@
       @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;
+      background-color: var(--color-background);
+      color: var(--color-text);
     }
   }
 
@@ -588,7 +591,6 @@
     display: flex;
     justify-content: center;
   }
-
   &__error_boundary_content {
     display: flex;
     align-items: center;
@@ -618,5 +620,4 @@
     font-size: $font-size;
     font-family: $font-family;
   }
-
-}
+}