plain-design 1.0.0-beta.147 → 1.0.0-beta.148

package/src/packages/components/TabGroup/header/horizontal/tabs-header-shadow.scss

@@ -1,88 +1,88 @@
-@include prefix(tab-group) {
-  $background: plv(secondary-light-1);
-  $border: plv(border-color);
-
-  &.tabs-head-type-shadow {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0px rgba(0, 0, 0, 0.04);
-    border: solid 1px $border;
-    box-sizing: border-box;
-
-    & + * {
-      margin-top: 16px;
-    }
-
-    .tabs-header.tabs-header-horizontal.tabs-header-type-shadow {
-      background-color: $background;
-
-      .tabs-header-item {
-        line-height: 45px;
-        padding: 0 20px;
-        color: plv(text-2);
-        box-sizing: border-box;
-        transition: background-color linear 300ms;
-        border-left: solid 1px transparent;
-        border-right: solid 1px transparent;
-        border-bottom: solid 1px $border;
-
-        &:first-child {
-          border-left: none;
-        }
-
-        &:hover, &.tabs-header-item-active {
-          color: plv(primary-6);
-        }
-
-        &:before {
-          position: absolute;
-          background-color: transparent;
-          left: 0;
-          right: 0;
-          height: 1px;
-          content: '';
-          transition: all linear 300ms;
-        }
-
-        &.tabs-header-item-active {
-          position: relative;
-          background-color: plv(background-light);
-          border-color: $border;
-          border-bottom-color: transparent;
-
-          &:before {
-            background-color: plv(background-light);
-          }
-        }
-      }
-
-      & > .tabs-header-list {
-        &:after {
-          flex: 1;
-          content: ' ';
-          display: block;
-          align-self: stretch;
-          border-bottom: solid 1px $border;
-        }
-      }
-
-      &.tabs-header-pos-top {
-        .tabs-header-list {
-          border-bottom: solid 1px $background;
-
-          .tabs-header-item-active:before {
-            top: 100%
-          }
-        }
-      }
-
-      &.tabs-header-pos-bottom {
-        .tabs-header-list {
-          border-top: solid 1px $background;
-
-          .tabs-header-item-active:before {
-            bottom: 100%
-          }
-        }
-      }
-    }
-  }
-}
+@include prefix(tab-group) {
+  $background: plv(secondary-light-1);
+  $border: plv(border-color);
+
+  &.tabs-head-type-shadow {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0px rgba(0, 0, 0, 0.04);
+    border: solid 1px $border;
+    box-sizing: border-box;
+
+    & + * {
+      margin-top: 16px;
+    }
+
+    .tabs-header.tabs-header-horizontal.tabs-header-type-shadow {
+      background-color: $background;
+
+      .tabs-header-item {
+        line-height: 45px;
+        padding: 0 20px;
+        color: plv(text-2);
+        box-sizing: border-box;
+        transition: background-color linear 300ms;
+        border-left: solid 1px transparent;
+        border-right: solid 1px transparent;
+        border-bottom: solid 1px $border;
+
+        &:first-child {
+          border-left: none;
+        }
+
+        &:hover, &.tabs-header-item-active {
+          color: plv(primary-6);
+        }
+
+        &:before {
+          position: absolute;
+          background-color: transparent;
+          left: 0;
+          right: 0;
+          height: 1px;
+          content: '';
+          transition: all linear 300ms;
+        }
+
+        &.tabs-header-item-active {
+          position: relative;
+          background-color: plv(background-light);
+          border-color: $border;
+          border-bottom-color: transparent;
+
+          &:before {
+            background-color: plv(background-light);
+          }
+        }
+      }
+
+      & > .tabs-header-list {
+        &:after {
+          flex: 1;
+          content: ' ';
+          display: block;
+          align-self: stretch;
+          border-bottom: solid 1px $border;
+        }
+      }
+
+      &.tabs-header-pos-top {
+        .tabs-header-list {
+          border-bottom: solid 1px $background;
+
+          .tabs-header-item-active:before {
+            top: 100%
+          }
+        }
+      }
+
+      &.tabs-header-pos-bottom {
+        .tabs-header-list {
+          border-top: solid 1px $background;
+
+          .tabs-header-item-active:before {
+            bottom: 100%
+          }
+        }
+      }
+    }
+  }
+}

package/src/packages/components/TabGroup/header/horizontal/tabs-header-text.scss

@@ -1,50 +1,50 @@
-@include prefix(tab-group) {
-  .tabs-header.tabs-header-horizontal.tabs-header-type-text {
-
-    .tabs-header-item {
-      line-height: 45px;
-
-      & + .tabs-header-item {
-        margin-left: 32px;
-      }
-
-      &.tabs-header-item-active, &:hover {
-        color: plv(primary-6);
-      }
-    }
-
-    .tabs-header-list {
-      position: relative;
-
-      .tabs-header-horizontal-text-indicator-container {
-        background-color: plv(secondary-light-2);
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 2px;
-
-        .tabs-header-horizontal-text-indicator {
-          position: absolute;
-          width: 0;
-          left: 0;
-          height: 100%;
-          background-color: plv(primary-6);
-          display: block;
-          transition: all ease 150ms;
-        }
-      }
-    }
-
-    &.tabs-header-pos-top {
-      .tabs-header-horizontal-text-indicator-container {
-        bottom: 0;
-      }
-    }
-
-    &.tabs-header-pos-bottom {
-      .tabs-header-horizontal-text-indicator-container {
-        top: 0;
-      }
-    }
-  }
-}
+@include prefix(tab-group) {
+  .tabs-header.tabs-header-horizontal.tabs-header-type-text {
+
+    .tabs-header-item {
+      line-height: 45px;
+
+      & + .tabs-header-item {
+        margin-left: 32px;
+      }
+
+      &.tabs-header-item-active, &:hover {
+        color: plv(primary-6);
+      }
+    }
+
+    .tabs-header-list {
+      position: relative;
+
+      .tabs-header-horizontal-text-indicator-container {
+        background-color: plv(secondary-light-2);
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 2px;
+
+        .tabs-header-horizontal-text-indicator {
+          position: absolute;
+          width: 0;
+          left: 0;
+          height: 100%;
+          background-color: plv(primary-6);
+          display: block;
+          transition: all ease 150ms;
+        }
+      }
+    }
+
+    &.tabs-header-pos-top {
+      .tabs-header-horizontal-text-indicator-container {
+        bottom: 0;
+      }
+    }
+
+    &.tabs-header-pos-bottom {
+      .tabs-header-horizontal-text-indicator-container {
+        top: 0;
+      }
+    }
+  }
+}

package/src/packages/components/TabGroup/header/vertical/TabsHeaderVertical.tsx

@@ -1,24 +1,24 @@
-import {designComponent, useClasses} from "@peryl/react-compose";
-import './tabs-header-vertical.scss';
-import {TabCommonProps} from "../../tabs.utils";
-
-export const TabsHeaderVertical = designComponent({
-  props: {
-    ...TabCommonProps,
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const classes = useClasses(() => [
-      'tabs-header',
-      'tabs-header-vertical',
-      `tabs-header-pos-${props.headPosition}`,
-    ]);
-
-    return () => (
-      <div className={classes.value}>
-        {slots.default()}
-      </div>
-    );
-  },
-});
+import {designComponent, useClasses} from "@peryl/react-compose";
+import './tabs-header-vertical.scss';
+import {TabCommonProps} from "../../tabs.utils";
+
+export const TabsHeaderVertical = designComponent({
+  props: {
+    ...TabCommonProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      'tabs-header',
+      'tabs-header-vertical',
+      `tabs-header-pos-${props.headPosition}`,
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

package/src/packages/components/TabGroup/header/vertical/tabs-header-vertical.scss

@@ -1,116 +1,116 @@
-@include prefix(tab-group) {
-  &.tabs-head-position-left, &.tabs-head-position-right {
-    display: flex;
-
-    .tabs-body {
-      flex: 1;
-      box-sizing: border-box;
-    }
-
-    .tabs-header {
-      position: relative;
-
-      .tabs-header-item {
-        line-height: 36px;
-        padding: 0 16px;
-        position: relative;
-        z-index: 1;
-        transition: all linear 150ms;
-        white-space: nowrap;
-
-        &:hover {
-          color: plv(primary-6);
-        }
-
-        &.tabs-header-item-active {
-          color: plv(primary-6);
-          background-color: plv(primary-light-2);
-        }
-      }
-
-      &.tabs-header-pos-left {
-
-        &:before {
-          position: absolute;
-          content: '';
-          right: 0;
-          width: 2px;
-          top: 0;
-          bottom: 0;
-          background-color: plv(secondary-light-2);
-        }
-
-        .tabs-header-item {
-          text-align: right;
-          border-right: solid 2px transparent;
-
-          &:hover {
-            border-right-color: plv(primary-2);
-          }
-
-          &.tabs-header-item-active {
-            border-right-color: plv(primary-6);
-          }
-        }
-      }
-
-      &.tabs-header-pos-right {
-        &:before {
-          position: absolute;
-          content: '';
-          left: 0;
-          width: 2px;
-          top: 0;
-          bottom: 0;
-          background-color: plv(secondary-light-2);
-        }
-
-        .tabs-header-item {
-          text-align: left;
-          border-left: solid 2px transparent;
-
-          &:hover {
-            border-left-color: plv(primary-2);
-          }
-
-          &.tabs-header-item-active {
-            border-left-color: plv(primary-6);
-          }
-        }
-      }
-    }
-
-    &.tabs-fit-height {
-      height: 100%;
-      flex: 1;
-      align-items: stretch;
-
-      & > .tabs-header {
-        overflow: auto;
-      }
-
-      & > .tabs-body {
-        overflow: hidden;
-        display: flex;
-        align-items: stretch;
-
-        & > .inner-tab {
-          flex: 1;
-          overflow: auto;
-        }
-      }
-    }
-  }
-
-  &.tabs-head-position-left {
-    .tabs-body {
-      padding-left: 16px;
-    }
-  }
-
-  &.tabs-head-position-right {
-    .tabs-body {
-      padding-right: 16px;
-    }
-  }
-}
+@include prefix(tab-group) {
+  &.tabs-head-position-left, &.tabs-head-position-right {
+    display: flex;
+
+    .tabs-body {
+      flex: 1;
+      box-sizing: border-box;
+    }
+
+    .tabs-header {
+      position: relative;
+
+      .tabs-header-item {
+        line-height: 36px;
+        padding: 0 16px;
+        position: relative;
+        z-index: 1;
+        transition: all linear 150ms;
+        white-space: nowrap;
+
+        &:hover {
+          color: plv(primary-6);
+        }
+
+        &.tabs-header-item-active {
+          color: plv(primary-6);
+          background-color: plv(primary-light-2);
+        }
+      }
+
+      &.tabs-header-pos-left {
+
+        &:before {
+          position: absolute;
+          content: '';
+          right: 0;
+          width: 2px;
+          top: 0;
+          bottom: 0;
+          background-color: plv(secondary-light-2);
+        }
+
+        .tabs-header-item {
+          text-align: right;
+          border-right: solid 2px transparent;
+
+          &:hover {
+            border-right-color: plv(primary-2);
+          }
+
+          &.tabs-header-item-active {
+            border-right-color: plv(primary-6);
+          }
+        }
+      }
+
+      &.tabs-header-pos-right {
+        &:before {
+          position: absolute;
+          content: '';
+          left: 0;
+          width: 2px;
+          top: 0;
+          bottom: 0;
+          background-color: plv(secondary-light-2);
+        }
+
+        .tabs-header-item {
+          text-align: left;
+          border-left: solid 2px transparent;
+
+          &:hover {
+            border-left-color: plv(primary-2);
+          }
+
+          &.tabs-header-item-active {
+            border-left-color: plv(primary-6);
+          }
+        }
+      }
+    }
+
+    &.tabs-fit-height {
+      height: 100%;
+      flex: 1;
+      align-items: stretch;
+
+      & > .tabs-header {
+        overflow: auto;
+      }
+
+      & > .tabs-body {
+        overflow: hidden;
+        display: flex;
+        align-items: stretch;
+
+        & > .inner-tab {
+          flex: 1;
+          overflow: auto;
+        }
+      }
+    }
+  }
+
+  &.tabs-head-position-left {
+    .tabs-body {
+      padding-left: 16px;
+    }
+  }
+
+  &.tabs-head-position-right {
+    .tabs-body {
+      padding-right: 16px;
+    }
+  }
+}