gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 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

215
assets/scss/common/input.scss
View File

@ -1,40 +1,82 @@
.v-select__custom {
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
> .v-input__control
> .v-input__slot {
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
box-shadow: none;
}
&.v-text-field.v-text-field--solo .v-input__control {
min-height: 36px;
height: 36px;
min-height: 32px;
height: 32px;
}
&.v-input input {
min-height: 36px;
height: 36px;
min-height: 32px;
height: 32px;
}
.v-input--selection-controls {
margin-top: 0;
padding-top: 0;
}
.v-input__slot {
overflow: hidden;
position: relative;
height: 36px;
height: 32px;
}
&.v-text-field .v-input__control {
border-color: #d9d9d9;
}
&.select-large {
.v-input__slot,
.v-input__control {
height: 40px !important;
// border: solid 1px #D9D9D9;
border-radius: 8px !important;
}
}
legend {
width: 0;
}
}
.v-input__custom {
.v-input__slot {
&:before,
&:after {
display: none;
}
}
.v-input__slot {
overflow: hidden;
position: relative;
}
&.input-large {
border-radius: 8px !important;
input {
max-height: 40px;
height: 40px;
}
}
&.v-text-field .v-input__control {
border-color: #d9d9d9;
}
&.surface-name {
fieldset {
max-width: 345px;
}
}
}
.v-text-field .v-input__append-inner,
@ -45,20 +87,21 @@
.v-select__widget {
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
> .v-input__control
> .v-input__slot {
&.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot {
box-shadow: none;
}
&.v-text-field.v-text-field--solo .v-input__control {
min-height: 30px !important;
height: 30px !important;
}
&.v-input input {
min-height: 30px !important;
height: 30px !important;
}
&.v-text-field--outlined > .v-input__control > .v-input__slot {
&.v-text-field--outlined>.v-input__control>.v-input__slot {
align-items: stretch;
min-height: 30px;
}
@ -67,6 +110,7 @@
margin-top: 0;
padding-top: 0;
}
.v-input__slot {
overflow: hidden;
position: relative;
@ -79,20 +123,23 @@
width: 110px;
height: 30px;
flex: 0 0 auto;
&.v-text-field.v-text-field--solo .v-input__control {
min-height: 30px;
height: 30px;
}
}
}
.v-text-field > .v-input__control > .v-input__slot:after,
.v-text-field > .v-input__control > .v-input__slot:before {
.v-text-field>.v-input__control>.v-input__slot:after,
.v-text-field>.v-input__control>.v-input__slot:before {
display: none;
}
.v-input__slot {
margin-bottom: 0 !important;
}
.v-input {
margin-top: 0 !important;
padding-top: 0 !important;
@ -104,25 +151,117 @@
}
}
.v-main {
.ant-input,
.ant-input-affix-wrapper>input,
.ant-select-selection {
border-radius: 6px;
}
}
.custom-radio {
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
padding-left: 28px;
margin: 10px;
font-size: 16px;
}
.custom-radio input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Custom radio appearance */
.radio-mark {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 18px;
width: 18px;
background-color: white;
border: 2px solid #ccc;
border-radius: 50%;
transition: all 0.2s ease;
}
/* Show selected state */
.custom-radio input[type="radio"]:checked~.radio-mark {
border-color: #1677ff;
background-color: #fff;
}
.custom-radio input[type="radio"]:checked~.radio-mark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 11px;
width: 11px;
border-radius: 50%;
background-color: #1677ff;
}
/* Light mode: use Vuetify default */
.checkbox-light .v-icon {
color: #D9D9D9 !important;
}
/* Dark mode: override tick color to black */
.checkbox-dark .v-icon {
color: #424242 !important;
}
@each $theme in dark, light {
@include theme($theme);
.v-application.#{$theme}-mode {
.v-textarea {
.v-input__slot{
border: map-deep-get($config,
#{$theme},
"v-input-textarea-border"
);
fieldset {
background-color: map-deep-get($config,
#{$theme},
"v-input-textarea-bg"
);
}
}
}
.v-input {
border-radius: 4px;
border-radius: 6px;
border-color: #d9d9d9;
color: map-deep-get($config,
#{$theme},
"v-input-backgroundColor"
);
&:not(.v-input--radio-group, .v-input--checkbox) {
.v-input__slot {
background-color: map-deep-get(
$config,
background-color: map-deep-get($config,
#{$theme},
"v-input-backgroundColor"
);
}
}
.v-input__slot {
fieldset {
color: map-deep-get(
$config,
color: map-deep-get($config,
#{$theme},
"v-input-fieldset-color"
) !important;
@ -130,8 +269,7 @@
&:hover {
fieldset {
color: map-deep-get(
$config,
color: map-deep-get($config,
#{$theme},
"v-input-fieldset-hover-color"
) !important;
@ -144,15 +282,14 @@
}
&--is-readonly {
border-color: map-deep-get(
$config,
border-color: map-deep-get($config,
#{$theme},
"v-input-readonly-border-color"
);
&:not(.v-input--radio-group, .v-input--checkbox) {
.v-input__slot {
background-color: map-deep-get(
$config,
background-color: map-deep-get($config,
#{$theme},
"v-input-readonly-backgroundColor"
) !important;
@ -161,20 +298,20 @@
}
&--is-disabled {
border-color: map-deep-get(
$config,
border-color: map-deep-get($config,
#{$theme},
"v-input-readonly-border-color"
);
&:not(.v-input--radio-group, .v-input--checkbox) {
.v-input__slot {
background-color: map-deep-get(
$config,
background-color: map-deep-get($config,
#{$theme},
"v-input-disabled-backgroundColor"
) !important;
}
}
input {
color: map-deep-get($config, #{$theme}, "v-input-disabled-color");
}
@ -184,22 +321,23 @@
.v-select {
.v-label {
color: map-deep-get($config, #{$theme}, "v-select-label-color");
position: static !important;
}
&.v-input--is-disabled {
.v-label {
color: map-deep-get($config, #{$theme}, "v-input-disabled-color");
}
.v-icon.v-icon--disabled {
color: map-deep-get(
$config,
color: map-deep-get($config,
#{$theme},
"v-input-disabled-color"
) !important;
}
.v-select__selection--disabled {
color: map-deep-get(
$config,
color: map-deep-get($config,
#{$theme},
"v-input-disabled-color"
) !important;
@ -211,6 +349,7 @@
.v-label {
color: map-deep-get($config, #{$theme}, "non-activate");
}
&.v-item--active {
.v-label {
color: map-deep-get($config, #{$theme}, "activate");
@ -241,17 +380,19 @@
.v-input--checkbox {
.v-icon {
@if $theme == dark {
@if $theme ==dark {
color: rgba(255, 255, 255, 0.6);
} @else {
}
@else {
color: #aaaaaa;
}
}
}
.v-textarea{
textarea{
.v-textarea {
textarea {
padding: 10px;
}
}
}
}