refactor: 提取 scss 变量 和 mixin

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

View File

@ -26,3 +26,16 @@
margin-right: calc(#{100 - $col * $colWidth} / #{$col - 1}); 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;
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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