github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 提取 scss 变量 和 mixin

Browse Source
This commit is contained in:
pipipi-pikachu 2021-06-21 22:32:29 +08:00
parent 260893d209
commit 8195284d5f
22 changed files with 63 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/assets/styles/mixin.scss
View File

@ -25,4 +25,17 @@
&:not(:nth-child(#{$col}n)) {
margin-right: calc(#{100 - $col * $colWidth} / #{$col - 1});
}
}
@mixin overflow-overlay() {
overflow: auto;
overflow: overlay;
}
@mixin absolute-0 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

4
src/assets/styles/variable.scss
View File

@ -5,4 +5,8 @@ $lightGray: #f9f9f9;
$boxShadow: 3px 3px 3px rgba(#000, 0.15);
$transitionDelay: .2s;
$transitionDelayFast: .1s;
$transitionDelaySlow: .3s;
$borderRadius: 2px;

19
src/components/ColorPicker/Alpha.vue
View File

@ -88,26 +88,15 @@ export default defineComponent({
<style lang="scss" scoped>
.alpha {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
@include absolute-0();
}
.alpha-checkboard-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
@include absolute-0();
}
.alpha-gradient {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
@include absolute-0();
}
.alpha-container {
cursor: pointer;

7
src/components/ColorPicker/Checkboard.vue
View File

@ -63,11 +63,8 @@ export default defineComponent({
<style lang="scss" scoped>
.checkerboard {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: contain;
@include absolute-0();
}
</style>

7
src/components/ColorPicker/Hue.vue
View File

@ -103,12 +103,9 @@ export default defineComponent({
<style lang="scss" scoped>
.hue {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
@include absolute-0();
}
.hue-container {
cursor: pointer;

7
src/components/ColorPicker/Saturation.vue
View File

@ -100,11 +100,8 @@ export default defineComponent({
.saturation,
.saturation-white,
.saturation-black {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
@include absolute-0();
cursor: pointer;
}
.saturation-white {

7
src/components/ColorPicker/index.vue
View File

@ -261,11 +261,8 @@ export default defineComponent({
}
}
.picker-current-color {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
@include absolute-0();
z-index: 2;
}

4
src/components/Contextmenu/MenuContent.vue
View File

@ -68,7 +68,7 @@ $subMenuWidth: 120px;
padding: 0 20px;
color: #555;
font-size: 12px;
transition: all .1s;
transition: all $transitionDelayFast;
white-space: nowrap;
height: $menuHeight;
line-height: $menuHeight;
@ -130,7 +130,7 @@ $subMenuWidth: 120px;
right: 18px;
top: 3px;
transform: scale(0);
transition: transform .2s;
transition: transform $transitionDelay;
}
.sub-text {

6
src/components/WritingBoard.vue
View File

@ -267,11 +267,7 @@ export default defineComponent({
background-color: #0f392b;
}
.canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include absolute-0();
}
.eraser, .pen {
pointer-events: none;

7
src/views/Editor/Canvas/GridLines.vue
View File

@ -67,13 +67,10 @@ export default defineComponent({
.grid-lines {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: visible;
z-index: 999;
pointer-events: none;
@include absolute-0();
}
</style>

7
src/views/Editor/CanvasTool/ChartPool.vue
View File

@ -47,11 +47,8 @@ export default defineComponent({
cursor: pointer;
}
.chart-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include absolute-0();
display: flex;
justify-content: center;
align-items: center;

7
src/views/Editor/CanvasTool/LinePool.vue
View File

@ -108,11 +108,8 @@ export default defineComponent({
cursor: pointer;
}
.line-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include absolute-0();
display: flex;
justify-content: center;
align-items: center;

7
src/views/Editor/CanvasTool/ShapePool.vue
View File

@ -86,11 +86,8 @@ export default defineComponent({
cursor: pointer;
}
.shape-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include absolute-0();
display: flex;
justify-content: center;
align-items: center;

2
src/views/Editor/EditorHeader/index.vue
View File

@ -142,7 +142,7 @@ export default defineComponent({
align-items: center;
font-size: 14px;
padding: 0 10px;
transition: background-color .2s;
transition: background-color $transitionDelay;
cursor: pointer;
.text {

7
src/views/Editor/Remark/index.vue
View File

@ -79,11 +79,6 @@ export default defineComponent({
textarea {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
resize: none;
border: 0;
@ -91,6 +86,8 @@ export default defineComponent({
padding: 8px;
font-size: 12px;
background-color: transparent;
@include absolute-0();
}
}
.resize-handler {

10
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
View File

@ -217,11 +217,11 @@ export default defineComponent({
.editor-content {
width: 100%;
height: 360px;
overflow: auto;
overflow: overlay;
position: relative;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
@include overflow-overlay();
}
.range-box {
position: absolute;
@ -231,17 +231,17 @@ export default defineComponent({
user-select: none;
}
.temp-range {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: rgba($color: #888, $alpha: .3);
}
.range-line {
position: absolute;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
border: 0 solid $themeColor;

2
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -421,7 +421,7 @@ export default defineComponent({
align-items: center;
position: relative;
cursor: pointer;
transition: all .2s;
transition: all $transitionDelay;
&:hover {
border-color: $themeColor;

2
src/views/Editor/Toolbar/SlideAnimationPanel.vue
View File

@ -115,7 +115,7 @@ export default defineComponent({
left: 0;
top: 0;
background-color: #d9dadb;
animation: $animationType .3s linear;
animation: $animationType $transitionDelaySlow linear;
}
&.fade:hover {

18
src/views/Editor/Toolbar/SlideStylePanel.vue
View File

@ -378,7 +378,7 @@ export default defineComponent({
border: 1px dashed $borderColor;
border-radius: $borderRadius;
position: relative;
transition: all .2s;
transition: all $transitionDelay;
&:hover {
border-color: $themeColor;
@ -386,11 +386,8 @@ export default defineComponent({
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include absolute-0();
display: flex;
justify-content: center;
align-items: center;
@ -413,16 +410,13 @@ export default defineComponent({
cursor: pointer;
.theme-item-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include absolute-0();
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: box-shadow .2s;
transition: box-shadow $transitionDelay;
&:hover {
box-shadow: 0 0 4px #888;

4
src/views/Editor/Toolbar/index.vue
View File

@ -123,7 +123,7 @@ export default defineComponent({
.content {
padding: 12px;
font-size: 13px;
overflow: auto;
overflow: overlay;
@include overflow-overlay();
}
</style>

4
src/views/Screen/SlideThumbnails.vue
View File

@ -79,8 +79,8 @@ export default defineComponent({
display: flex;
flex-wrap: wrap;
align-content: flex-start;
overflow: auto;
overflow: overlay;
@include overflow-overlay();
.thumbnail {
width: 150px;

9
src/views/components/element/TableElement/index.vue
View File

@ -198,13 +198,10 @@ export default defineComponent({
cursor: move;
}
.table-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
@include absolute-0();
opacity: 0;
transition: opacity .2s;
transition: opacity $transitionDelay;
.mask-tip {
position: absolute;