hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-28 18:05:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: less to scss

Browse Source
This commit is contained in:
xingyu4j
2022-11-23 15:18:59 +08:00
parent a5287d7186
commit 8a77c94710
36 changed files with 293 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
yudao-ui-admin-vue3/src/components/Breadcrumb/src/Breadcrumb.vue
View File

@ -87,13 +87,13 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{elNamespace}-breadcrumb';
<style lang="scss" scoped>
$prefix-cls: #{$elNamespace}-breadcrumb;
.@{prefix-cls} {
.#{$prefix-cls} {
:deep(&__item) {
display: flex;
.@{prefix-cls}__inner {
.#{$prefix-cls}__inner {
display: flex;
align-items: center;
color: var(--top-header-text-color);
@ -105,7 +105,7 @@ export default defineComponent({
}
:deep(&__item):not(:last-child) {
.@{prefix-cls}__inner {
.#{$prefix-cls}__inner {
color: var(--top-header-text-color);
&:hover {
@ -115,7 +115,7 @@ export default defineComponent({
}
:deep(&__item):last-child {
.@{prefix-cls}__inner {
.#{$prefix-cls}__inner {
color: var(--el-text-color-placeholder);
&:hover {

10
yudao-ui-admin-vue3/src/components/Descriptions/src/Descriptions.vue
View File

@ -129,10 +129,10 @@ const toggleClick = () => {
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-descriptions';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-descriptions;
.@{prefix-cls}-header {
.#{$prefix-cls}-header {
&__title {
&::after {
position: absolute;
@ -146,8 +146,8 @@ const toggleClick = () => {
}
}
.@{prefix-cls}-content {
:deep(.@{elNamespace}-descriptions__cell) {
.#{$prefix-cls}-content {
:deep(.#{$elNamespace}-descriptions__cell) {
width: 0;
}
}

21
yudao-ui-admin-vue3/src/components/Dialog/src/Dialog.vue
View File

@ -92,23 +92,14 @@ const dialogStyle = computed(() => {
</ElDialog>
</template>
<style lang="less">
.@{elNamespace}-dialog__header {
<style lang="scss">
.#{$elNamespace}-dialog__header {
margin-right: 0 !important;
padding-bottom: 6px;
padding-top: 10px;
border-bottom: 1px solid var(--tags-view-border-color);
}
.@{elNamespace}-dialog__headerbtn {
top: -4px !important;
}
.@{elNamespace}-dialog__footer {
border-top: 0px solid var(--tags-view-border-color);
}
.dialog-footer button:first-child {
margin-right: 10px;
.#{$elNamespace}-dialog__footer {
border-top: 1px solid var(--tags-view-border-color);
}
.is-hover {
@ -118,11 +109,11 @@ const dialogStyle = computed(() => {
}
.dark {
.@{elNamespace}-dialog__header {
.#{$elNamespace}-dialog__header {
border-bottom: 1px solid var(--el-border-color);
}
.@{elNamespace}-dialog__footer {
.#{$elNamespace}-dialog__footer {
border-top: 1px solid var(--el-border-color);
}
}

4
yudao-ui-admin-vue3/src/components/Form/src/Form.vue
View File

@ -294,8 +294,8 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
.@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row {
<style lang="scss" scoped>
.#{$elNamespace}-form.#{$namespace}-form .#{$elNamespace}-row {
margin-right: 0 !important;
margin-left: 0 !important;
}

1
yudao-ui-admin-vue3/src/components/IFrame/src/IFrame.vue
View File

@ -29,4 +29,3 @@ onMounted(() => {
></iframe>
</div>
</template>
<script lang="less" scoped></script>

2
yudao-ui-admin-vue3/src/components/Icon/src/IconSelect.vue
View File

@ -182,7 +182,7 @@ watch(
</div>
</template>
<style lang="less" scoped>
<style lang="scss" scoped>
.el-divider--horizontal {
margin: 1px auto !important;
}

8
yudao-ui-admin-vue3/src/components/InputPassword/src/InputPassword.vue
View File

@ -74,11 +74,11 @@ const getIconName = computed(() => (unref(textType) === 'password' ? 'ep:hide' :
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-input-password';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-input-password;
.@{prefix-cls} {
:deep(.@{elNamespace}-input__clear) {
.#{$prefix-cls} {
:deep(.#{$elNamespace}-input__clear) {
margin-left: 5px;
}

64
yudao-ui-admin-vue3/src/components/Menu/src/Menu.vue
View File

@ -121,8 +121,8 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-menu';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-menu;
.is-active--after {
position: absolute;
@ -134,7 +134,7 @@ export default defineComponent({
content: '';
}
.@{prefix-cls} {
.#{$prefix-cls} {
position: relative;
transition: width var(--transition-time-02);
@ -147,20 +147,20 @@ export default defineComponent({
content: '';
}
:deep(.@{elNamespace}-menu) {
:deep(.#{$elNamespace}-menu) {
width: 100% !important;
border-right: none;
// 设置选中时子标题的颜色
.is-active {
& > .@{elNamespace}-sub-menu__title {
& > .#{$elNamespace}-sub-menu__title {
color: var(--left-menu-text-active-color) !important;
}
}
// 设置子菜单悬停的高亮和背景色
.@{elNamespace}-sub-menu__title,
.@{elNamespace}-menu-item {
.#{$elNamespace}-sub-menu__title,
.#{$elNamespace}-menu-item {
&:hover {
color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-color) !important;
@ -168,8 +168,8 @@ export default defineComponent({
}
// 设置选中时的高亮背景和高亮颜色
.@{elNamespace}-sub-menu.is-active,
.@{elNamespace}-menu-item.is-active {
.#{$elNamespace}-sub-menu.is-active,
.#{$elNamespace}-menu-item.is-active {
color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-active-color) !important;
@ -178,34 +178,34 @@ export default defineComponent({
}
}
.@{elNamespace}-menu-item.is-active {
.#{$elNamespace}-menu-item.is-active {
position: relative;
&:after {
.is-active--after;
@extend .is-active--after;
}
}
// 设置子菜单的背景颜色
.@{elNamespace}-menu {
.@{elNamespace}-sub-menu__title,
.@{elNamespace}-menu-item:not(.is-active) {
.#{$elNamespace}-menu {
.#{$elNamespace}-sub-menu__title,
.#{$elNamespace}-menu-item:not(.is-active) {
background-color: var(--left-menu-bg-light-color) !important;
}
}
}
// 折叠时的最小宽度
:deep(.@{elNamespace}-menu--collapse) {
:deep(.#{$elNamespace}-menu--collapse) {
width: var(--left-menu-min-width);
& > .is-active,
& > .is-active > .@{elNamespace}-sub-menu__title {
& > .is-active > .#{$elNamespace}-sub-menu__title {
position: relative;
background-color: var(--left-menu-collapse-bg-active-color) !important;
&:after {
.is-active--after;
@extend .is-active--after;
}
}
}
@ -213,26 +213,26 @@ export default defineComponent({
// 折叠动画的时候，就需要把文字给隐藏掉
:deep(.horizontal-collapse-transition) {
// transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
.@{prefix-cls}__title {
.#{$prefix-cls}__title {
display: none;
}
}
// 水平菜单
&__horizontal {
height: calc(~'var(--top-tool-height)') !important;
height: calc(var(--top-tool-height)) !important;
:deep(.@{elNamespace}-menu--horizontal) {
height: calc(~'var(--top-tool-height)');
:deep(.#{$elNamespace}-menu--horizontal) {
height: calc(var(--top-tool-height));
border-bottom: none;
// 重新设置底部高亮颜色
& > .@{elNamespace}-sub-menu.is-active {
.@{elNamespace}-sub-menu__title {
& > .#{$elNamespace}-sub-menu.is-active {
.#{$elNamespace}-sub-menu__title {
border-bottom-color: var(--el-color-primary) !important;
}
}
.@{elNamespace}-menu-item.is-active {
.#{$elNamespace}-menu-item.is-active {
position: relative;
&:after {
@ -240,19 +240,19 @@ export default defineComponent({
}
}
.@{prefix-cls}__title {
.#{$prefix-cls}__title {
/* stylelint-disable-next-line */
max-height: calc(~'var(--top-tool-height) - 2px') !important;
max-height: calc(var(--top-tool-height) - 2px) !important;
/* stylelint-disable-next-line */
line-height: calc(~'var(--top-tool-height) - 2px');
line-height: calc(var(--top-tool-height) - 2px);
}
}
}
}
</style>
<style lang="less">
@prefix-cls: ~'@{namespace}-menu-popper';
<style lang="scss">
$prefix-cls: #{$namespace}-menu-popper;
.is-active--after {
position: absolute;
@ -264,8 +264,8 @@ export default defineComponent({
content: '';
}
.@{prefix-cls}--vertical,
.@{prefix-cls}--horizontal {
.#{$prefix-cls}--vertical,
.#{$prefix-cls}--horizontal {
// 设置选中时子标题的颜色
.is-active {
& > .el-sub-menu__title {
@ -292,7 +292,7 @@ export default defineComponent({
}
&:after {
.is-active--after;
@extend .is-active--after;
}
}
}

6
yudao-ui-admin-vue3/src/components/Qrcode/src/Qrcode.vue
View File

@ -237,10 +237,10 @@ const disabledClick = () => {
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-qrcode';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-qrcode;
.@{prefix-cls} {
.#{$prefix-cls} {
&--disabled {
background: rgba(255, 255, 255, 0.95);

6
yudao-ui-admin-vue3/src/components/Setting/src/Setting.vue
View File

@ -288,10 +288,10 @@ const clear = () => {
</ElDrawer>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-setting;
.@{prefix-cls} {
.#{$prefix-cls} {
border-radius: 6px 0 0 6px;
}
</style>

6
yudao-ui-admin-vue3/src/components/Setting/src/components/ColorRadioPicker.vue
View File

@ -54,10 +54,10 @@ watch(
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-color-radio-picker';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-color-radio-picker;
.@{prefix-cls} {
.#{$prefix-cls} {
.is-active {
border-color: var(--el-color-primary);
}

6
yudao-ui-admin-vue3/src/components/Setting/src/components/LayoutRadioPicker.vue
View File

@ -59,10 +59,10 @@ const layout = computed(() => appStore.getLayout)
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-layout-radio-picker';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-layout-radio-picker;
.@{prefix-cls} {
.#{$prefix-cls} {
&__classic {
border: 2px solid #e5e7eb;
border-radius: 4px;

6
yudao-ui-admin-vue3/src/components/TabMenu/src/TabMenu.vue
View File

@ -213,10 +213,10 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-tab-menu';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-tab-menu;
.@{prefix-cls} {
.#{$prefix-cls} {
transition: all var(--transition-time-02);
&:after {

2
yudao-ui-admin-vue3/src/components/Table/src/Table.vue
View File

@ -295,7 +295,7 @@ export default defineComponent({
}
})
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.el-button.is-text) {
margin-left: 0;
padding: 8px 4px;

24
yudao-ui-admin-vue3/src/components/TagsView/src/TagsView.vue
View File

@ -463,11 +463,11 @@ watch(
</div>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-tags-view';
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-tags-view;
.@{prefix-cls} {
:deep(.@{elNamespace}-scrollbar__view) {
.#{$prefix-cls} {
:deep(.#{$elNamespace}-scrollbar__view) {
height: 100%;
}
@ -485,7 +485,7 @@ watch(
top: 1px;
left: 0;
width: 100%;
height: calc(~'100% - 1px');
height: calc(100% - 1px);
border-right: 1px solid var(--tags-view-border-color);
border-left: 1px solid var(--tags-view-border-color);
content: '';
@ -495,7 +495,7 @@ watch(
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
height: calc(100% - 4px);
padding-right: 25px;
margin-left: 4px;
font-size: 12px;
@ -509,8 +509,8 @@ watch(
display: none;
transform: translate(0, -50%);
}
&:not(.@{prefix-cls}__item--affix):hover {
.@{prefix-cls}__item--close {
&:not(.#{$prefix-cls}__item--affix):hover {
.#{$prefix-cls}__item--close {
display: block;
}
}
@ -526,7 +526,7 @@ watch(
color: var(--el-color-white);
background-color: var(--el-color-primary);
border: 1px solid var(--el-color-primary);
.@{prefix-cls}__item--close {
.#{$prefix-cls}__item--close {
:deep(span) {
color: var(--el-color-white) !important;
}
@ -535,7 +535,7 @@ watch(
}
.dark {
.@{prefix-cls} {
.#{$prefix-cls} {
&__tool {
&:hover {
:deep(span) {
@ -552,7 +552,7 @@ watch(
&__item {
position: relative;
top: 2px;
height: calc(~'100% - 4px');
height: calc(100% - 4px);
padding-right: 25px;
font-size: 12px;
cursor: pointer;
@ -568,7 +568,7 @@ watch(
&__item.is-active {
color: var(--el-color-white);
background-color: var(--el-color-primary);
.@{prefix-cls}__item--close {
.#{$prefix-cls}__item--close {
:deep(span) {
color: var(--el-color-white) !important;
}

2
yudao-ui-admin-vue3/src/components/XButton/src/XButton.vue
View File

@ -35,7 +35,7 @@ const getBindValue = computed(() => {
<Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
</el-button>
</template>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.el-button.is-text) {
margin-left: 0;
padding: 8px 4px;

2
yudao-ui-admin-vue3/src/components/XButton/src/XTextButton.vue
View File

@ -34,7 +34,7 @@ const getBindValue = computed(() => {
<Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
</el-button>
</template>
<style lang="less" scoped>
<style lang="scss" scoped>
:deep(.el-button.is-text) {
margin-left: 0;
padding: 8px 4px;