Add Indicator to home. Optimize stylesheet.
This commit is contained in:
@@ -4,12 +4,4 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.direction-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.direction-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
28
src/assets/css/components/common/indicator.scss
Normal file
28
src/assets/css/components/common/indicator.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@use '@/assets/css/constants.scss' as constants;
|
||||
|
||||
.dot-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
flex: auto;
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: {
|
||||
width: 2px;
|
||||
color: constants.$font-secondary-color;
|
||||
style: solid;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
.active>* {
|
||||
background-color: constants.$font-secondary-color;
|
||||
}
|
||||
}
|
||||
@@ -8,5 +8,4 @@
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #00D4FF;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../mixins" as mixins;
|
||||
@use "@/assets/css/mixins" as mixins;
|
||||
|
||||
.center-box {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user