@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/components/SLTabs.vue

@@ -184,292 +184,345 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.tabs
-  &.tabs-sm
-    &.tabs-type-1
-      & > .tabs-nav
-        ul
-          .tab-nav-item
-            &-link
-              @apply text-sm
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.tabs.tabs-sm.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
+  @apply text-sm;
+}
+
+.tabs.tabs-xs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active::before {
+  @apply hidden;
+}
+
+.tabs.tabs-xs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
+  @apply py-0.75 text-base;
+}
+
+.tabs.tabs-type-1 > .tabs-nav {
+  @apply flex items-start justify-between h-0 space-x-8 overflow-hidden lg:space-x-30;
+}
+
+.tabs.tabs-type-1 > .tabs-nav.show {
+  @apply h-auto -mb-1.5;
+}
+
+.tabs.tabs-type-1 > .tabs-nav .tabs-nav-left {
+  @apply grow overflow-hidden;
+}
+
+.tabs.tabs-type-1 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul {
+  @apply inline-flex items-start -space-x-px;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item {
+  @apply relative rounded-t bg-white;
+}
+
+.tabs.tabs-type-1
+  > .tabs-nav
+  ul
+  .tab-nav-item:first-child
+  .tab-nav-item-link::after {
+  content: "";
+  @apply absolute bottom-0 left-0 w-px h-3 -mb-3 -ml-px bg-primary-600;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active {
+  @apply pb-1.75;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active::before {
+  content: "";
+  @apply block absolute top-0.5 right-0.75 left-0.75 h-1 bg-highlight-400;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply text-primary cursor-default;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block py-1.75 px-3.75 border-t border-r border-l border-primary-600 rounded-t text-lg text-primary-600;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-1 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs.tabs-type-1 > .tabs-content {
+  @apply p-4 border border-primary-600 rounded-lg bg-white overflow-hidden;
+}
+
+.tabs.tabs-type-1 > .tabs-content .tabs-content-header {
+  @apply flex items-start justify-between mb-4;
+}
+
+.tabs.tabs-type-2 > .tabs-nav {
+  @apply mb-0;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul {
+  @apply flex px-8 pb-5 space-x-8 lg:px-6 lg:space-x-14;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item {
+  @apply relative grow py-6 rounded bg-primary-100 text-lg text-primary-600 text-center lg:py-5.5;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item::before {
+  content: "";
+  @apply absolute top-0.5 left-0.5 block rounded bg-white;
+  width: calc(100% - var(--spacing));
+  height: calc(100% - var(--spacing));
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item::after {
+  content: "";
+  @apply absolute left-0 bottom-0 -ml-4 -mb-5 block w-full h-3 rounded-t bg-primary-300 opacity-0;
+  width: calc(100% + var(--spacing) * 4 * 2);
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active {
+  @apply text-primary font-bold;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active::after {
+  @apply opacity-100;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(odd) {
+  @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(odd)::after {
+  @apply bg-transparent bg-linear-to-r from-insight-web-title-start to-insight-web-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(even) {
+  @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active:nth-child(even)::after {
+  @apply bg-transparent bg-linear-to-r from-insight-poi-title-start to-insight-poi-title-end;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply cursor-default;
+}
+
+.tabs.tabs-type-2 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative;
+}
+
+.tabs.tabs-type-3 > .tabs-nav {
+  @apply flex items-start justify-between h-0 space-x-8 overflow-hidden lg:space-x-30;
+}
+
+.tabs.tabs-type-3 > .tabs-nav.show {
+  @apply h-auto mb-1;
+}
+
+.tabs.tabs-type-3 > .tabs-nav .tabs-nav-left {
+  @apply grow overflow-hidden;
+}
+
+.tabs.tabs-type-3 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul {
+  @apply inline-flex items-start space-x-2;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item {
+  @apply relative rounded-t bg-primary-100;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item.active {
+  @apply bg-primary;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply text-white cursor-default;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block py-2 px-8 rounded-t text-base text-primary;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-3 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs.tabs-type-3 > .tabs-content {
+  @apply p-6 rounded-tr-lg rounded-b-lg bg-white shadow-default overflow-hidden;
+}
+
+.tabs.tabs-type-3 > .tabs-content .tabs-content-header {
+  @apply flex items-start justify-between;
+}
+
+.tabs.tabs-type-3 > .tabs-content .tabs-dropdown {
+  @apply mb-4;
+}
+
+.tabs.tabs-type-4 {
+  @apply flex;
+}
+
+.tabs.tabs-type-4 > .tabs-nav {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul {
+  @apply flex flex-col space-y-0.5;
+}
 
-  &.tabs-xs
-    &.tabs-type-1
-      & > .tabs-nav
-        ul
-          .tab-nav-item
-            &.active
-              &:before
-                @apply hidden
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item {
+  @apply flex justify-between w-[184px] py-3 pl-3 pr-5 bg-primary-50 rounded-l-lg text-xs;
+}
 
-            &-link
-              @apply s("py-0.75") text-base
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item.active {
+  @apply bg-primary-600 text-white font-bold shadow-md;
+}
 
-  &.tabs-type-1
-    & > .tabs-nav
-      @apply flex items-start justify-between h-0 space-x-8 overflow-hidden
-      @apply s('lg:space-x-30')
+.tabs.tabs-type-4 > .tabs-nav .tabs-nav-left ul .tab-nav-item-link {
+  @apply block w-full;
+}
 
-      &.show
-        @apply h-auto s("-mb-1.5")
+.tabs.tabs-type-4 .tabs-content {
+  @apply grow -ml-2 p-4 bg-white border border-primary-600 rounded-lg shadow-md;
+}
 
-      .tabs-nav-left
-        @apply flex-grow overflow-hidden
+.tabs.tabs-type-4 .tabs-content > div {
+  @apply flex min-h-full;
+}
 
-      .tabs-nav-right
-        @apply flex-grow-0 flex-shrink-0
+.tabs.tabs-type-4 .tabs-content > div .tabs-content-body {
+  @apply w-full;
+}
 
-      ul
-        @apply inline-flex items-start s("-space-x-px")
+.tabs.tabs-type-5 > .tabs-nav {
+  @apply flex items-start justify-between h-0 mb-4 space-x-8 overflow-hidden lg:space-x-30;
+}
 
-        .tab-nav-item
-          @apply relative rounded-t bg-white
+.tabs.tabs-type-5 > .tabs-nav.show {
+  @apply h-auto;
+}
 
-          &:first-child
-            .tab-nav-item-link
-              &:after
-                content ""
-                @apply absolute bottom-0 left-0 w-px h-3 s("-mb-3") s("-ml-px") bg-primary-600
-
-          &.active
-            @apply s("pb-1.75")
-
-            &:before
-              content ""
-              @apply block absolute s("top-0.5") s("right-0.75") s("left-0.75") h-1 bg-highlight-400
-
-            .tab-nav-item-link
-              @apply text-primary cursor-default
-
-          &-link
-            @apply relative block s("py-1.75") s("px-3.75") border-t border-r border-l border-primary-600 rounded-t text-lg text-primary-600
-
-            &-title
-              @apply truncate
-
-        .tab-pane
-          @apply space-y-8
-
-    & > .tabs-content
-      @apply p-4 border border-primary-600 rounded-lg bg-white overflow-hidden
-
-      .tabs-content-header
-        @apply flex items-start justify-between mb-4
-
-  &.tabs-type-2
-    & > .tabs-nav
-      @apply mb-0
-
-      ul
-        @apply flex px-8 pb-5 space-x-8
-        @apply s('lg:px-6') s('lg:space-x-14')
-
-        .tab-nav-item
-          @apply relative flex-grow s('py-6') rounded bg-primary-100 text-lg text-primary-600 text-center
-          @apply s('lg:py-5.5')
-
-          &:before
-            content ""
-            @apply absolute s('top-0.5') s('left-0.5') block rounded bg-white
-            width calc(100% - theme('spacing.1'))
-            height calc(100% - theme('spacing.1'))
-
-          &:after
-            content ""
-            @apply absolute left-0 bottom-0 s('-ml-4') s('-mb-5') block w-full h-3 rounded-t bg-primary-300 opacity-0
-            width calc(100% + theme('spacing.4') * 2)
-
-          &.active
-            @apply text-primary font-bold
-
-            &:after
-              @apply opacity-100
-
-            &:nth-child(odd)
-              @apply bg-transparent s('bg-gradient-to-r') s('from-insight-web-title-start') s('to-insight-web-title-end')
-
-              &:after
-                @apply bg-transparent s('bg-gradient-to-r') s('from-insight-web-title-start') s('to-insight-web-title-end')
-
-            &:nth-child(even)
-              @apply bg-transparent s('bg-gradient-to-r') s('from-insight-poi-title-start') s('to-insight-poi-title-end')
-
-              &:after
-                @apply bg-transparent s('bg-gradient-to-r') s('from-insight-poi-title-start') s('to-insight-poi-title-end')
-
-            .tab-nav-item-link
-              @apply cursor-default
-
-          &-link
-            @apply relative
-
-  &.tabs-type-3
-    & > .tabs-nav
-      @apply flex items-start justify-between h-0 space-x-8 overflow-hidden
-      @apply s('lg:space-x-30')
-
-      &.show
-        @apply h-auto mb-1
-
-      .tabs-nav-left
-        @apply flex-grow overflow-hidden
-
-      .tabs-nav-right
-        @apply flex-grow-0 flex-shrink-0
-
-      ul
-        @apply inline-flex items-start space-x-2
-
-        .tab-nav-item
-          @apply relative rounded-t bg-primary-100
-
-          &.active
-            @apply bg-primary
-
-            .tab-nav-item-link
-              @apply text-white cursor-default
-
-          &-link
-            @apply relative block py-2 px-8 rounded-t text-base text-primary
-
-            &-title
-              @apply truncate
-
-        .tab-pane
-          @apply space-y-8
-
-    & > .tabs-content
-      @apply p-6 rounded-tr-lg rounded-b-lg bg-white shadow overflow-hidden
-
-      .tabs-content-header
-        @apply flex items-start justify-between
-
-      .tabs-dropdown
-        @apply mb-4
-
-  &.tabs-type-4
-    @apply flex
-
-    & > .tabs-nav
-      @apply flex-grow-0 flex-shrink-0
-
-      .tabs-nav-left
-        ul
-          @apply flex flex-col s('space-y-0.5')
-
-          .tab-nav-item
-            @apply flex justify-between s('w-[184px]') py-3 pl-3 pr-5 bg-primary-50 rounded-l-lg text-xs
-
-            &.active
-              @apply bg-primary-600 text-white font-bold shadow-md
-
-            &-link
-              @apply block w-full
-
-    .tabs-content
-      @apply flex-grow s('-ml-2') p-4 bg-white border border-primary-600 rounded-lg shadow-md
-
-      & > div
-        @apply flex min-h-full
-
-        .tabs-content-body
-          @apply w-full
-
-  &.tabs-type-5
-    & > .tabs-nav
-      @apply flex items-start justify-between h-0 mb-4 space-x-8 overflow-hidden
-      @apply s('lg:space-x-30')
-
-      &.show
-        @apply h-auto
-
-        .tabs-nav-left
-          &:before
-            content ""
-            @apply absolute right-0 bottom-0 left-0 h-px s('rounded-[1px]') bg-primary-300
-
-      .tabs-nav-left
-        @apply relative flex-grow overflow-hidden
-
-      .tabs-nav-right
-        @apply flex-grow-0 flex-shrink-0
-
-      ul
-        @apply inline-flex items-start
-
-        .tab-nav-item
-          @apply relative
-
-          &.active
-            &:after
-              content ""
-              @apply block absolute right-0 bottom-0 left-0 h-1 s('rounded-[1px]') bg-primary
-
-            .tab-nav-item-link
-              @apply cursor-default
-
-          &.disabled
-            .tab-nav-item-link
-              @apply text-pgray-4 cursor-default
-
-          &-link
-            @apply relative block  px-4 pb-2 text-lg text-pgray-2
-
-            &-title
-              @apply truncate
-
-        .tab-pane
-          @apply space-y-8
-
-  &.tabs-type-6
-    & > .tabs-nav
-      @apply flex items-start justify-between h-0 mb-6 space-x-8 overflow-hidden
-      @apply s('lg:space-x-30')
-
-      &.show
-        @apply h-auto
-
-        .tabs-nav-left
-          &:before
-            content ""
-            @apply absolute right-0 bottom-0 left-0 h-1 bg-pgray-5
-
-      .tabs-nav-left
-        @apply relative flex-grow-0 flex-shrink-0
-
-      .tabs-nav-right
-        @apply flex-grow-0 flex-shrink-0
-
-      ul
-        @apply inline-flex items-start
-
-        .tab-nav-item
-          @apply relative
-
-          &.active
-            &:after
-              content ""
-              @apply block absolute right-0 bottom-0 left-0 h-1 bg-blue-1
-
-            .tab-nav-item-link
-              @apply text-blue-1 cursor-default
-
-          &.disabled
-            .tab-nav-item-link
-              @apply text-pgray-4 cursor-default
-
-          &-link
-            @apply relative block pt-1 px-6 pb-2 text-base text-secondary-500
-
-            &-title
-              @apply truncate
-
-        .tab-pane
-          @apply space-y-8
-
-  & > .tabs-content
-    .tabs
-      & > .tabs-content
-        @apply shadow-md
-</style>
+.tabs.tabs-type-5 > .tabs-nav.show .tabs-nav-left::before {
+  content: "";
+  @apply absolute right-0 bottom-0 left-0 h-px rounded-[1px] bg-primary-300;
+}
+
+.tabs.tabs-type-5 > .tabs-nav .tabs-nav-left {
+  @apply relative grow overflow-hidden;
+}
+
+.tabs.tabs-type-5 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul {
+  @apply inline-flex items-start;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item {
+  @apply relative;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.active::after {
+  content: "";
+  @apply block absolute right-0 bottom-0 left-0 h-1 rounded-[1px] bg-primary;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply cursor-default;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item.disabled .tab-nav-item-link {
+  @apply text-pgray-4 cursor-default;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block px-4 pb-2 text-lg text-pgray-2;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-5 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs.tabs-type-6 > .tabs-nav {
+  @apply flex items-start justify-between h-0 mb-6 space-x-8 overflow-hidden lg:space-x-30;
+}
+
+.tabs.tabs-type-6 > .tabs-nav.show {
+  @apply h-auto;
+}
+
+.tabs.tabs-type-6 > .tabs-nav.show .tabs-nav-left::before {
+  content: "";
+  @apply absolute right-0 bottom-0 left-0 h-1 bg-pgray-5;
+}
+
+.tabs.tabs-type-6 > .tabs-nav .tabs-nav-left {
+  @apply relative grow-0 shrink-0;
+}
+
+.tabs.tabs-type-6 > .tabs-nav .tabs-nav-right {
+  @apply grow-0 shrink-0;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul {
+  @apply inline-flex items-start;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item {
+  @apply relative;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.active::after {
+  content: "";
+  @apply block absolute right-0 bottom-0 left-0 h-1 bg-blue-1;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.active .tab-nav-item-link {
+  @apply text-blue-1 cursor-default;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item.disabled .tab-nav-item-link {
+  @apply text-pgray-4 cursor-default;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item-link {
+  @apply relative block pt-1 px-6 pb-2 text-base text-secondary-500;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-nav-item-link-title {
+  @apply truncate;
+}
+
+.tabs.tabs-type-6 > .tabs-nav ul .tab-pane {
+  @apply space-y-8;
+}
+
+.tabs > .tabs-content .tabs > .tabs-content {
+  @apply shadow-md;
+}
+</style>