FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Refactor(App): Change sass to less

Browse Source
This commit is contained in:
Fat Snake
2024-10-17 13:50:47 +08:00
parent a482bbc14c
commit 3d77dc793b
98 changed files with 466 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/components/common/card.scss → src/assets/css/components/common/card.less
View File

@@ -1,7 +1,7 @@
@use '@/assets/css/constants' as constants;
@import '@/assets/css/constants';
.card-box {
background-color: constants.$origin-color;
background-color: @origin-color;
border-radius: 8px;
overflow: hidden;
box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);

2
src/assets/css/components/common/fit-center.scss → src/assets/css/components/common/fit-center.less
View File

@@ -4,4 +4,4 @@
align-items: center;
width: 100%;
height: 100%;
}
}

2
src/assets/css/components/common/fit-fullscreen.scss → src/assets/css/components/common/fit-fullscreen.less
View File

@@ -2,4 +2,4 @@
position: relative;
width: 100%;
height: 100vh;
}
}

2
src/assets/css/components/common/flex-box.scss → src/assets/css/components/common/flex-box.less
View File

@@ -2,4 +2,4 @@
> * {
flex: 1;
}
}
}

2
src/assets/css/components/common/fullscreen-loading-mask.scss → src/assets/css/components/common/fullscreen-loading-mask.less
View File

@@ -7,4 +7,4 @@
height: 100%;
z-index: 100;
background-color: rgba(200, 200, 200, 0.2);
}
}

12
src/assets/css/components/common/hide-scrollbar.scss → src/assets/css/components/common/hide-scrollbar.less
View File

@@ -1,5 +1,5 @@
@use '@/assets/css/constants' as constants;
@use '@/assets/css/mixins' as mixins;
@import "@/assets/css/constants";
@import "@/assets/css/mixins";
.hide-scrollbar-mask {
position: relative;
@@ -41,12 +41,12 @@
width: 100%;
height: 100%;
border-radius: 8px;
background-color: constants.$font-secondary-color;
background-color: @font-secondary-color;
transition: background-color .2s;
}
:hover {
background-color: constants.$font-main-color;
background-color: @font-main-color;
}
}
@@ -55,14 +55,14 @@
opacity: 0;
animation: 0.4s linear;
@include mixins.unique-keyframes {
.keyframes(m7t06K, {
0% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
});
}
}

12
src/assets/css/components/common/indicator.scss → src/assets/css/components/common/indicator.less
View File

@@ -1,4 +1,4 @@
@use '@/assets/css/constants' as constants;
@import '@/assets/css/constants';
.dot-list {
display: flex;
@@ -15,20 +15,16 @@
width: 10px;
height: 10px;
border-radius: 50%;
border: {
width: 2px;
color: constants.$font-secondary-color;
style: solid;
};
border: 2px solid @font-secondary-color;
transition: all .2s;
}
:hover {
background-color: constants.$focus-color;
background-color: @focus-color;
}
}
.active > * {
background-color: constants.$font-secondary-color !important;
background-color: @font-secondary-color !important;
}
}

2
src/assets/css/components/common/loading-mask.scss → src/assets/css/components/common/loading-mask.less
View File

@@ -5,4 +5,4 @@
width: 100%;
height: 100%;
z-index: 100;
}
}

80
src/assets/css/components/common/sidebar.scss → src/assets/css/components/common/sidebar.less
View File

@@ -1,5 +1,5 @@
@use "@/assets/css/constants" as constants;
@use "@/assets/css/mixins" as mixins;
@import "@/assets/css/constants";
@import "@/assets/css/mixins";
.sidebar {
display: flex;
@@ -14,7 +14,7 @@
align-items: center;
font-weight: bold;
padding: 10px 14px;
color: constants.$main-color;
color: @main-color;
overflow: hidden;
.icon-box {
@@ -24,7 +24,7 @@
padding: 10px;
width: 40px;
height: 40px;
font-size: constants.$SIZE_ICON_SM;
font-size: @SIZE_ICON_SM;
border-radius: 8px;
cursor: pointer;
@@ -34,7 +34,7 @@
}
&:hover {
background-color: constants.$background-color;
background-color: @background-color;
}
}
@@ -79,7 +79,7 @@
padding: 0 10px;
width: 40px;
height: 40px;
font-size: constants.$SIZE_ICON_SM;
font-size: @SIZE_ICON_SM;
cursor: pointer;
img {
@@ -93,7 +93,7 @@
height: 100%;
width: 100%;
transition: all 0.2s;
background-color: constants.$origin-color;
background-color: @origin-color;
.text {
flex: 1;
@@ -104,11 +104,11 @@
}
&.active {
color: constants.$origin-color;
background-color: constants.$main-color;
color: @origin-color;
background-color: @main-color;
img {
filter: drop-shadow(1000px 0 0 constants.$origin-color);
filter: drop-shadow(1000px 0 0 @origin-color);
transform: translate(-1000px);
}
}
@@ -121,7 +121,7 @@
padding-left: 10px;
z-index: 10000;
animation: 0.1s ease forwards;
@include mixins.unique-keyframes {
.keyframes(XxrGiu, {
0% {
transform: translateX(0);
opacity: 1;
@@ -130,16 +130,16 @@
transform: translateX(-10px);
opacity: 0;
}
}
});
.content {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 10px;
background-color: constants.$origin-color;
background-color: @origin-color;
border-radius: 8px;
box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
.item {
border-radius: 8px;
@@ -157,13 +157,13 @@
}
&.active {
color: constants.$origin-color;
background-color: constants.$main-color;
color: @origin-color;
background-color: @main-color;
}
}
&:hover a:not(.active) {
background-color: constants.$background-color;
background-color: @background-color;
}
}
}
@@ -172,14 +172,14 @@
&:hover {
> .menu-bt {
a:not(.active) {
background-color: constants.$background-color;
background-color: @background-color;
}
}
.submenu {
visibility: visible;
animation: 0.3s ease;
@include mixins.unique-keyframes {
.keyframes(f6yTZM, {
0% {
transform: translateX(-10px);
opacity: 0;
@@ -188,7 +188,7 @@
transform: translateX(0);
opacity: 1;
}
}
});
}
}
}
@@ -196,12 +196,8 @@
.delete {
.menu-bt {
border: {
width: 1px;
color: constants.$error-secondary-color;
style: dashed;
};
filter: drop-shadow(1000px 0 0 constants.$error-secondary-color);
border: 1px dashed @error-secondary-color;
filter: drop-shadow(1000px 0 0 @error-secondary-color);
transform: translate(-1000px);
> a {
@@ -215,11 +211,7 @@
.separate {
height: 0;
margin: 10px 5px;
border: {
width: 1px;
color: constants.$font-secondary-color;
style: solid;
};
border: 1px solid @font-secondary-color;
opacity: 0.4;
}
@@ -228,7 +220,7 @@
align-items: center;
font-weight: bold;
padding: 8px 14px;
color: constants.$main-color;
color: @main-color;
.icon-user {
display: flex;
@@ -238,9 +230,9 @@
margin-left: 4px;
width: 36px;
height: 36px;
font-size: constants.$SIZE_ICON_XS;
border: 2px constants.$font-secondary-color solid;
color: constants.$font-secondary-color;
font-size: @SIZE_ICON_XS;
border: 2px @font-secondary-color solid;
color: @font-secondary-color;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
@@ -255,26 +247,26 @@
flex: 1;
padding-left: 10px;
font-size: 1.4em;
color: constants.$font-main-color;
color: @font-main-color;
user-select: text;
overflow: hidden;
text-overflow: ellipsis;
a {
color: constants.$main-color;
color: @main-color;
text-decoration: underline;
}
}
.icon-exit {
font-size: constants.$SIZE_ICON_XS;
color: constants.$error-color;
font-size: @SIZE_ICON_XS;
color: @error-color;
padding: 6px 10px;
cursor: pointer;
&:hover {
border-radius: 8px;
background-color: constants.$background-color;
background-color: @background-color;
}
}
}
@@ -327,14 +319,14 @@
.content {
padding: 8px;
border-radius: 8px;
background-color: constants.$origin-color;
background-color: @origin-color;
.icon-exit {
padding: 4px 8px;
&:hover {
border-radius: 8px;
background-color: constants.$background-color;
background-color: @background-color;
}
}
}
@@ -347,7 +339,7 @@
&:hover .submenu-exit {
display: block;
animation: 0.3s ease;
@include mixins.unique-keyframes {
.keyframes(mfdCZC, {
0% {
transform: translateX(-10px);
opacity: 0;
@@ -356,7 +348,7 @@
transform: translateX(0);
opacity: 1;
}
}
});
}
}
}

6
src/assets/css/components/common/url-card.scss → src/assets/css/components/common/url-card.less
View File

@@ -1,4 +1,4 @@
@use '@/assets/css/constants' as constants;
@import "@/assets/css/constants";
[data-component=component-url-card] {
cursor: pointer;
@@ -16,8 +16,8 @@
}
.icon {
color: constants.$production-color;
font-size: constants.$SIZE_ICON_XL;
color: @production-color;
font-size: @SIZE_ICON_XL;
}
.text {

0
src/assets/css/components/dnd/drag-handle.scss → src/assets/css/components/dnd/drag-handle.less
View File

22
src/assets/css/components/dnd/drop-mask.less Normal file
View File

@@ -0,0 +1,22 @@
@import "@/assets/css/constants";
[data-component=component-drop-mask] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0 10px 10px;
background-color: @origin-color;
.drop-mask-border {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
border: 2px dashed @font-secondary-color;
border-radius: 8px;
font-size: 1.8em;
}
}

30
src/assets/css/components/dnd/drop-mask.scss
View File

@@ -1,30 +0,0 @@
@use "@/assets/css/constants" as constants;
[data-component=component-drop-mask] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: {
left: 10px;
right: 10px;
bottom: 10px;
};
background-color: constants.$origin-color;
.drop-mask-border {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
border: {
width: 2px;
color: constants.$font-secondary-color;
style: dashed;
radius: 8px;
};
font-size: 1.8em;
}
}

10
src/assets/css/components/system/setting-card.scss → src/assets/css/components/system/setting-card.less
View File

@@ -1,17 +1,17 @@
@use '@/assets/css/constants' as constants;
@import "@/assets/css/constants";
[data-component=component-setting-card] {
.settings-card {
padding: 20px;
gap: 20px;
color: constants.$main-color;
color: @main-color;
> .head {
align-items: center;
gap: 5px;
.icon {
font-size: constants.$SIZE_ICON_MD;
font-size: @SIZE_ICON_MD;
flex: 0 0 auto;
}
@@ -22,11 +22,11 @@
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
color: @font-main-color;
}
.bt-save {
color: constants.$main-color;
color: @main-color;
}
}
}

12
src/assets/css/components/system/statistics-card.scss → src/assets/css/components/system/statistics-card.less
View File

@@ -1,4 +1,4 @@
@use '@/assets/css/constants' as constants;
@import "@/assets/css/constants";
[data-component=component-statistics-card] {
.statistics-card {
@@ -8,10 +8,10 @@
> .head {
align-items: center;
gap: 5px;
color: constants.$main-color;
color: @main-color;
.icon {
font-size: constants.$SIZE_ICON_MD;
font-size: @SIZE_ICON_MD;
flex: 0 0 auto;
}
@@ -22,7 +22,7 @@
:nth-child(n+3) {
flex: 0 0 auto;
color: constants.$font-main-color;
color: @font-main-color;
}
}
@@ -33,11 +33,11 @@
.key, .value-percent {
flex: 0 0 auto;
color: constants.$font-main-color;
color: @font-main-color;
}
.value {
color: constants.$font-secondary-color;
color: @font-secondary-color;
overflow: hidden;
> * {

6
src/assets/css/components/tools/load-more-card.scss → src/assets/css/components/tools/load-more-card.less
View File

@@ -1,4 +1,4 @@
@use '@/assets/css/constants' as constants;
@import "@/assets/css/constants";
[data-component=component-load-more-card] {
cursor: pointer;
@@ -11,8 +11,8 @@
.icon {
display: flex;
font-size: constants.$SIZE_ICON_XXL;
color: constants.$production-color;
font-size: @SIZE_ICON_XXL;
color: @production-color;
align-items: center;
transform: translateY(-20px);
}

8
src/assets/css/components/tools/repository-card.scss → src/assets/css/components/tools/repository-card.less
View File

@@ -1,4 +1,4 @@
@use '@/assets/css/constants' as constants;
@import "@/assets/css/constants";
[data-component=component-repository-card] {
height: 100%;
@@ -34,12 +34,12 @@
display: flex;
padding-top: 10px;
padding-bottom: 20px;
color: constants.$production-color;
font-size: constants.$SIZE_ICON_XL;
color: @production-color;
font-size: @SIZE_ICON_XL;
justify-content: center;
img {
width: constants.$SIZE_ICON_XL;
width: @SIZE_ICON_XL;
}
}

18
src/assets/css/components/tools/store-card.scss → src/assets/css/components/tools/store-card.less
View File

@@ -1,4 +1,4 @@
@use '@/assets/css/constants' as constants;
@import "@/assets/css/constants";
[data-component=component-store-card] {
height: 100%;
@@ -35,7 +35,7 @@
z-index: 100;
> *:hover {
color: constants.$font-secondary-color;
color: @font-secondary-color;
}
}
}
@@ -44,12 +44,12 @@
display: flex;
padding-top: 10px;
padding-bottom: 20px;
color: constants.$production-color;
font-size: constants.$SIZE_ICON_XL;
color: @production-color;
font-size: @SIZE_ICON_XL;
justify-content: center;
img {
width: constants.$SIZE_ICON_XL;
width: @SIZE_ICON_XL;
}
}
@@ -62,12 +62,8 @@
}
.tool-desc {
margin: {
top: 10px;
left: auto;
right: auto;
};
color: constants.$font-secondary-color;
margin: 10px auto 0;
color: @font-secondary-color;
overflow: hidden;
text-overflow: ellipsis;
max-height: 40px;