gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

init dev-push code ui base design

Browse Source
This commit is contained in:
leonard
2025-07-22 09:58:38 +07:00
parent ffdf5ccb66
commit eedbf94d56
214 changed files with 42170 additions and 28040 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
assets/scss/common/tabs.scss
View File

@ -1,20 +1,20 @@
// .v-tabs {
// height: 38px;
// flex: 0;
// & + .v-tabs-items {
// height: calc(100% - 38px) !important;
// width: 100%;
// background-color: transparent !important;
// }
// &-bar {
// height: 38px;
// background-color: transparent !important;
// border-bottom: 1px solid $--color-hover_d;
// }
// .v-tab {
// margin: 0 !important;
// }
// }
.v-tabs {
.v-tab {
padding: 16px 0;
font-size: 14px;
position: relative;
z-index: 2;
transform: translateY(1px);
letter-spacing: 0;
+.v-tab {
margin-left: 32px;
}
min-width:auto;
}
}
@each $theme in dark, light {
.v-application.#{$theme}-mode {
@ -22,67 +22,112 @@
position: relative;
z-index: 2;
.v-tabs-bar{
background-color: rgba(0, 0, 0, 0)
}
.v-slide-group__content {
border-bottom: 1px solid map-deep-get($config,
#{$theme},
"v-tabs-items-border-color"
);
}
.v-slide-group__wrapper {
background-color: map-deep-get($config,
#{$theme},
"card-default-backgroundColor"
);
overflow: visible !important;
contain: initial !important;
}
.v-tab {
border: 1px solid transparent;
border-radius: 6px 6px 0 0;
border-bottom-color: map-deep-get(
$config,
#{$theme},
"v-tabs-active-border-color"
);
background-color: map-deep-get(
$config,
#{$theme},
"v-tabs-backgroundColor"
);
padding: 16px 0;
font-size: 14px;
// border-radius: 6px 6px 0 0;
// border-bottom-color: map-deep-get(
// $config,
// #{$theme},
// "v-tabs-active-border-color"
// );
// background-color: map-deep-get(
// $config,
// #{$theme},
// "v-tabs-backgroundColor"
// );
position: relative;
z-index: 2;
transform: translateY(1px);
letter-spacing: 0;
+ .v-tab {
margin-left: 4px;
margin-left: 32px;
}
&::before {
background-color: transparent;
}
}
&:hover {
color: map-deep-get(
$config,
#{$theme},
"v-tabs-hover-color"
) !important
}
&:not(.v-tab--active){
color: map-deep-get($config, #{$theme}, "router-tab-item-color") !important;
}
}
.v-tab--active {
border-top-color: map-deep-get(
$config,
#{$theme},
"v-tabs-active-border-color"
);
border-right-color: map-deep-get(
$config,
#{$theme},
"v-tabs-active-border-color"
);
border-left-color: map-deep-get(
$config,
#{$theme},
"v-tabs-active-border-color"
);
border-bottom-color: map-deep-get(
$config,
#{$theme},
"v-tabs-active-backgroundColor"
);
// border-top-color: map-deep-get(
// $config,
// #{$theme},
// "v-tabs-active-border-color"
// );
// border-right-color: map-deep-get(
// $config,
// #{$theme},
// "v-tabs-active-border-color"
// );
// border-left-color: map-deep-get(
// $config,
// #{$theme},
// "v-tabs-active-border-color"
// );
// border-bottom-color: map-deep-get(
// $config,
// #{$theme},
// "v-tabs-active-backgroundColor"
// );
background-color: map-deep-get(
$config,
#{$theme},
"v-tabs-active-backgroundColor"
);
}
.v-tabs-slider {
border-bottom: 1px solid;
border-bottom-color: map-deep-get($config,
#{$theme},
"v-tabs-active-border-color"
);
}
}
.v-tabs-items {
position: relative;
z-index: 1;
border-top: 1px
solid
map-deep-get($config, #{$theme}, "v-tabs-active-border-color");
background-color: map-deep-get($config,
#{$theme},
"card-default-backgroundColor"
);
// border-top: 1px
// solid
// map-deep-get($config, #{$theme}, "v-tabs-active-border-color");
}
}
}