d2coreui 21.0.10 → 21.0.13

package/style/flexLayout/new/flexLayoutBase.scss

@@ -0,0 +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;
+  }
+
+}

package/style/flexLayout/new/light.scss

@@ -0,0 +1,107 @@
+$color_text: black !default;
+$color_background: white !default;
+$color_base: white !default;
+$color_1: scale_color($color_base, $lightness: -3%) !default;
+$color_2: scale_color($color_1, $lightness: -3%) !default;
+$color_3: scale_color($color_2, $lightness: -3%) !default;
+$color_4: scale_color($color_3, $lightness: -3%) !default;
+$color_5: scale_color($color_4, $lightness: -3%) !default;
+$color_6: scale_color($color_5, $lightness: -3%) !default;
+$color_drag1: rgb(95, 134, 196) !default;
+$color_drag2: rgb(119, 166, 119) !default;
+$color_drag1_background: rgba(95, 134, 196, 0.1) !default;
+$color_drag2_background: rgba(119, 166, 119, 0.075) !default;
+
+$font-size: medium !default;
+$font-family: Roboto, Arial, sans-serif !default;
+
+@mixin tabset_mixin {
+  background-color: var(--color-background);
+}
+
+@mixin tabset_tabbar_mixin {
+  background-color: var(--color-background);
+}
+
+@mixin tabset_header_mixin {
+  background-color: var(--color-background);
+}
+
+@mixin tabset_selected_mixin {
+  background-color: var(--color-1);
+}
+
+@mixin tabset_maximized_mixin {
+  background-color: var(--color-6);
+}
+
+@mixin tab_top_mixin {
+}
+
+@mixin tab_bottom_mixin {
+}
+
+@mixin tab_button_mixin {
+}
+
+@mixin tab_button_selected_mixin {
+  background-color: var(--color-4);
+  color: var(--color-text);
+}
+
+@mixin tab_button_unselected_mixin {
+  color: gray;
+}
+
+@mixin tab_button_hovered_mixin {
+  background-color: var(--color-4);
+  color: var(--color-text);
+}
+
+@mixin close_button_hovered_mixin {
+  background-color:var(--color-3);
+}
+
+@mixin toolbar_button_hovered_mixin {
+  background-color:var(--color-2);
+}
+
+@mixin border_mixin {
+  background-color: var(--color-background);
+}
+
+@mixin border_button_mixin {
+  background-color: var(--color-2);
+}
+
+@mixin border_button_selected_mixin {
+  background-color: $color_border_line;
+  color: $color_text;
+}
+
+@mixin border_button_unselected_mixin {
+  color: gray;
+}
+
+@mixin border_button_hovered_mixin {
+  background-color: $color_border_line;
+  color: $color_text;
+}
+
+@mixin splitter_mixin {
+  background-color: $color_splitter;
+}
+
+@mixin splitter_hover_mixin {
+  background-color: $color_splitter_hover;
+}
+
+@mixin splitter_drag_mixin {
+  border-radius: 5px;
+  background-color: $color_splitter_drag;
+}
+
+@mixin splitter_border_mixin {
+}
+
+@import "_base";