From 123962086fb43428278b94344897bb1aa864b356 Mon Sep 17 00:00:00 2001
From: slavamuravey <slavamuravey@mail.ru>
Date: Thu, 1 Aug 2024 16:00:40 +0700
Subject: [PATCH] Replace less to scss

---
 dist/rc-dock-dark.css                         |  89 +++----
 dist/rc-dock.css                              |  87 +++----
 example/adv-save-layout.html                  |   2 +-
 example/adv-tab-update.html                   |   2 +-
 example/basic.html                            |   2 +-
 example/controlled-layout.html                |   2 +-
 example/dark-theme.html                       |   2 +-
 example/disable-dock.html                     |   2 +-
 example/divider-box.html                      |   2 +-
 example/drag-new-tab.html                     |   2 +-
 example/drop-mode.html                        |   2 +-
 example/gesture.html                          |   2 +-
 example/index.html                            |   2 +-
 example/new-window.html                       |   2 +-
 example/panel-extra.html                      |   2 +-
 example/panel-style.html                      |   2 +-
 example/panel-style.jsx                       |   6 +-
 example/save-layout.html                      |   2 +-
 example/standalone-divider.html               |   2 +-
 example/{style-dark.less => style-dark.scss}  |   0
 example/{style.less => style.scss}            |   8 +-
 example/tab-cache.html                        |   2 +-
 example/tab-min-size.html                     |   2 +-
 example/tab-update.html                       |   2 +-
 package.json                                  |  10 +-
 style/{dragging.less => dragging.scss}        |   4 +-
 style/index-dark.less                         |  31 ---
 style/index-dark.scss                         |  31 +++
 style/index-light.less                        |  31 ---
 style/index-light.scss                        |  31 +++
 style/{index.less => index.scss}              |   0
 style/{panel.less => panel.scss}              |  32 +--
 ...ned-panels.less => predefined-panels.scss} |  14 +-
 style/{tabs.less => tabs.scss}                |  44 ++--
 yarn.lock                                     | 223 ++++++++++--------
 35 files changed, 362 insertions(+), 317 deletions(-)
 rename example/{style-dark.less => style-dark.scss} (100%)
 rename example/{style.less => style.scss} (89%)
 rename style/{dragging.less => dragging.scss} (88%)
 delete mode 100644 style/index-dark.less
 create mode 100644 style/index-dark.scss
 delete mode 100644 style/index-light.less
 create mode 100644 style/index-light.scss
 rename style/{index.less => index.scss} (100%)
 rename style/{panel.less => panel.scss} (90%)
 rename style/{predefined-panels.less => predefined-panels.scss} (82%)
 rename style/{tabs.less => tabs.scss} (87%)

diff --git a/dist/rc-dock-dark.css b/dist/rc-dock-dark.css
index 7c225063..69d67d31 100644
--- a/dist/rc-dock-dark.css
+++ b/dist/rc-dock-dark.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 body > .dragging-layer {
   position: absolute !important;
   z-index: 9999;
@@ -29,14 +30,17 @@ body > .dragging-layer > div:last-child {
   left: 12px;
   top: 12px;
 }
+
 .drag-initiator {
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
 }
+
 .drag-accept-reject::after {
   content: "🚫";
 }
+
 .dock {
   box-sizing: border-box;
   width: 100%;
@@ -98,8 +102,7 @@ body > .dragging-layer > div:last-child {
 .dock-tab:hover {
   color: #40a5ed;
 }
-.dock-tab-active,
-.dock-tab-active:hover {
+.dock-tab-active, .dock-tab-active:hover {
   color: #108ee9;
   cursor: default;
   transform: translateZ(0);
@@ -114,10 +117,7 @@ body > .dragging-layer > div:last-child {
 .dock-content-animated {
   transition: margin 0.3s;
 }
-.dock-bottom > .dock-nav .dock-ink-bar-animated,
-.dock-top > .dock-nav .dock-ink-bar-animated,
-.dock-bottom > div > .dock-nav .dock-ink-bar-animated,
-.dock-top > div > .dock-nav .dock-ink-bar-animated {
+.dock-bottom > .dock-nav .dock-ink-bar-animated, .dock-bottom > div > .dock-nav .dock-ink-bar-animated, .dock-top > .dock-nav .dock-ink-bar-animated, .dock-top > div > .dock-nav .dock-ink-bar-animated {
   transition: width 0.3s, left 0.3s, right 0.3s;
 }
 .dock-content-animated .dock-tabpane {
@@ -164,7 +164,7 @@ body > .dragging-layer > div:last-child {
 .dock-tab-close-btn {
   position: absolute;
   cursor: pointer;
-  font-family: 'Fredoka One', sans-serif;
+  font-family: "Fredoka One", sans-serif;
   color: #444;
   right: -3px;
   font-size: 12px;
@@ -177,13 +177,11 @@ body > .dragging-layer > div:last-child {
 .dock-tab-close-btn:before {
   content: "X";
 }
-.dock-tab-close-btn:hover,
-.dock-tab-close-btn:focus {
+.dock-tab-close-btn:hover, .dock-tab-close-btn:focus {
   color: #fff;
   transform: scale(1.1, 1.1);
 }
-.dock-tab:hover .dock-tab-close-btn,
-.dock-tab-close-btn:focus {
+.dock-tab:hover .dock-tab-close-btn, .dock-tab-close-btn:focus {
   opacity: 1;
   color: #a2a2a2;
 }
@@ -239,7 +237,7 @@ body > .dragging-layer > div:last-child {
 .dock-nav-more::after {
   position: absolute;
   z-index: 1;
-  content: '';
+  content: "";
   pointer-events: none;
   width: 30px;
   height: 30px;
@@ -325,17 +323,18 @@ body > .dragging-layer > div:last-child {
   right: 2px;
 }
 .dock-dropdown-menu-item:hover {
-  background: #2b2b2b;
+  background: #2c2c2c;
 }
-.dock-dropdown-menu-item-disabled,
-.dock-dropdown-menu-item-disabled:hover {
+.dock-dropdown-menu-item-disabled, .dock-dropdown-menu-item-disabled:hover {
   color: #ccc;
   background: 0 0;
   cursor: not-allowed;
 }
+
 body.dock-dragging .dock-tab-hit-area {
   pointer-events: inherit;
 }
+
 body.dock-dragging {
   user-select: none;
   -webkit-user-select: none;
@@ -343,6 +342,7 @@ body.dock-dragging {
 body.dock-dragging iframe {
   pointer-events: none;
 }
+
 .dock-panel {
   box-sizing: border-box;
   position: relative;
@@ -414,11 +414,13 @@ body.dock-dragging iframe {
   height: 17px;
   cursor: nwse-resize;
 }
+
 .dock-box {
   box-sizing: border-box;
   display: flex;
   align-items: stretch;
 }
+
 .divider-box {
   box-sizing: border-box;
   display: flex;
@@ -427,16 +429,19 @@ body.dock-dragging iframe {
 .divider-box > *:nth-child(odd) {
   flex: 1 1 auto;
 }
+
 .dock-divider {
   box-sizing: border-box;
   flex: 0 0 4px;
   background: rgba(0, 0, 0, 0);
   z-index: 1;
 }
+
 .dock-hbox > .dock-divider {
   transform: scaleX(3);
   cursor: ew-resize;
 }
+
 .dock-vbox {
   flex-direction: column;
 }
@@ -444,6 +449,7 @@ body.dock-dragging iframe {
   transform: scaleY(3);
   cursor: ns-resize;
 }
+
 .dock-fbox {
   pointer-events: none;
   z-index: 200;
@@ -457,6 +463,7 @@ body.dock-dragging iframe {
   opacity: 0.8;
   pointer-events: none;
 }
+
 .dock-mbox {
   z-index: 250;
   width: 100%;
@@ -477,6 +484,7 @@ body.dock-dragging iframe {
   opacity: 0;
   animation: dock-mbox-hide 0.2s ease;
 }
+
 @keyframes dock-mbox-show {
   from {
     transform: scale(0.9, 0.9);
@@ -509,6 +517,7 @@ body.dock-dragging iframe {
   width: 100%;
   height: 100%;
 }
+
 .dock-layout {
   overflow: hidden;
   position: relative;
@@ -530,6 +539,7 @@ body.dock-dragging iframe {
   display: none;
   transition: all 0.1s ease-out;
 }
+
 .dock-drop-edge {
   position: absolute;
   top: 30px;
@@ -541,6 +551,7 @@ body.dock-dragging iframe {
   border: none;
   opacity: 0.01;
 }
+
 .dock-drop-layer {
   position: absolute;
   pointer-events: none;
@@ -556,7 +567,7 @@ body.dock-dragging iframe {
   z-index: 300;
   width: 32px;
   height: 32px;
-  font-family: 'Fredoka One', sans-serif;
+  font-family: "Fredoka One", sans-serif;
   color: #444;
   background: #141414;
   border: 1px solid transparent;
@@ -594,7 +605,7 @@ body.dock-dragging iframe {
   width: 16px;
 }
 .dock-drop-layer .dock-drop-left::before {
-  content: '>';
+  content: ">";
   transform: rotate(180deg);
 }
 .dock-drop-layer .dock-drop-right {
@@ -605,7 +616,7 @@ body.dock-dragging iframe {
   width: 16px;
 }
 .dock-drop-layer .dock-drop-right::before {
-  content: '>';
+  content: ">";
 }
 .dock-drop-layer .dock-drop-top {
   top: calc(50% - 48px);
@@ -618,7 +629,7 @@ body.dock-dragging iframe {
   line-height: 14px;
 }
 .dock-drop-layer .dock-drop-top::before {
-  content: '>';
+  content: ">";
   transform: rotate(270deg);
 }
 .dock-drop-layer .dock-drop-bottom {
@@ -632,21 +643,22 @@ body.dock-dragging iframe {
   line-height: 14px;
 }
 .dock-drop-layer .dock-drop-bottom::before {
-  content: '>';
+  content: ">";
   transform: rotate(90deg);
 }
 .dock-drop-layer .dock-drop-square-dropping {
   background: #125d94;
   color: white;
 }
+
 .dock-panel.dock-panel-dropping .dock-tab-close-btn {
   pointer-events: none;
 }
-.dock-panel-max-btn,
-.dock-panel-min-btn {
+
+.dock-panel-max-btn, .dock-panel-min-btn {
   height: 25px;
   width: 21px;
-  font-family: 'Fredoka One', sans-serif;
+  font-family: "Fredoka One", sans-serif;
   margin: 2px 2px 2px 0;
   padding: 6px 4px 4px 2px;
   cursor: pointer;
@@ -655,8 +667,7 @@ body.dock-dragging iframe {
   user-select: none;
   box-sizing: border-box;
 }
-.dock-panel-max-btn:before,
-.dock-panel-min-btn:before {
+.dock-panel-max-btn:before, .dock-panel-min-btn:before {
   position: absolute;
   content: " ";
   border: 2px solid #444;
@@ -665,22 +676,16 @@ body.dock-dragging iframe {
   height: 13px;
   box-sizing: border-box;
 }
-.dock-panel-max-btn:hover,
-.dock-panel-min-btn:hover,
-.dock-panel-max-btn:focus,
-.dock-panel-min-btn:focus {
+.dock-panel-max-btn:hover, .dock-panel-max-btn:focus, .dock-panel-min-btn:hover, .dock-panel-min-btn:focus {
   color: #a2a2a2;
 }
-.dock-panel-max-btn:hover:before,
-.dock-panel-min-btn:hover:before,
-.dock-panel-max-btn:focus:before,
-.dock-panel-min-btn:focus:before {
+.dock-panel-max-btn:hover:before, .dock-panel-max-btn:focus:before, .dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before {
   border-color: #a2a2a2;
 }
-.dock-panel-max-btn:hover,
-.dock-panel-min-btn:hover {
+.dock-panel-max-btn:hover, .dock-panel-min-btn:hover {
   transform: scale(1.1);
 }
+
 .dock-panel-min-btn:before {
   position: absolute;
   border-radius: 1px;
@@ -692,16 +697,17 @@ body.dock-dragging iframe {
   font-size: 20px;
   line-height: 4px;
 }
-.dock-panel-min-btn:hover:before,
-.dock-panel-min-btn:focus:before {
+.dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before {
   color: #999;
 }
+
 .dock-panel.dock-style-place-holder {
   border: none;
 }
 .dock-panel.dock-style-place-holder .dock-bar {
   display: none;
 }
+
 .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless {
   border: none;
 }
@@ -713,15 +719,14 @@ body.dock-dragging iframe {
   width: 100%;
   transition: all 0.15s ease-in-out;
 }
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover,
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within,
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar {
+.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar {
   opacity: 1;
   height: 31px;
 }
 .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-content {
   height: 100%;
 }
+
 .dock-panel.dock-style-main {
   border: none;
 }
@@ -732,6 +737,7 @@ body.dock-dragging iframe {
 .dock-panel.dock-style-main .dock-tab {
   background: #141414;
 }
+
 .dock-panel.dock-style-card .dock-tab {
   margin-right: 2px;
   border: 1px solid #434343;
@@ -759,8 +765,7 @@ body.dock-dragging iframe {
   left: -2px;
   right: -2px;
 }
-.dock-panel.dock-style-card .dock-panel-max-btn,
-.dock-panel.dock-style-card .dock-panel-min-btn {
+.dock-panel.dock-style-card .dock-panel-max-btn, .dock-panel.dock-style-card .dock-panel-min-btn {
   margin-top: 4px;
 }
 .dock-panel.dock-style-card .dock-tab-close-btn {
diff --git a/dist/rc-dock.css b/dist/rc-dock.css
index 9ee7c3b0..78695182 100644
--- a/dist/rc-dock.css
+++ b/dist/rc-dock.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 body > .dragging-layer {
   position: absolute !important;
   z-index: 9999;
@@ -29,14 +30,17 @@ body > .dragging-layer > div:last-child {
   left: 12px;
   top: 12px;
 }
+
 .drag-initiator {
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
 }
+
 .drag-accept-reject::after {
   content: "🚫";
 }
+
 .dock {
   box-sizing: border-box;
   width: 100%;
@@ -98,8 +102,7 @@ body > .dragging-layer > div:last-child {
 .dock-tab:hover {
   color: #349fec;
 }
-.dock-tab-active,
-.dock-tab-active:hover {
+.dock-tab-active, .dock-tab-active:hover {
   color: #108ee9;
   cursor: default;
   transform: translateZ(0);
@@ -114,10 +117,7 @@ body > .dragging-layer > div:last-child {
 .dock-content-animated {
   transition: margin 0.3s;
 }
-.dock-bottom > .dock-nav .dock-ink-bar-animated,
-.dock-top > .dock-nav .dock-ink-bar-animated,
-.dock-bottom > div > .dock-nav .dock-ink-bar-animated,
-.dock-top > div > .dock-nav .dock-ink-bar-animated {
+.dock-bottom > .dock-nav .dock-ink-bar-animated, .dock-bottom > div > .dock-nav .dock-ink-bar-animated, .dock-top > .dock-nav .dock-ink-bar-animated, .dock-top > div > .dock-nav .dock-ink-bar-animated {
   transition: width 0.3s, left 0.3s, right 0.3s;
 }
 .dock-content-animated .dock-tabpane {
@@ -164,7 +164,7 @@ body > .dragging-layer > div:last-child {
 .dock-tab-close-btn {
   position: absolute;
   cursor: pointer;
-  font-family: 'Fredoka One', sans-serif;
+  font-family: "Fredoka One", sans-serif;
   color: #ddd;
   right: -3px;
   font-size: 12px;
@@ -177,13 +177,11 @@ body > .dragging-layer > div:last-child {
 .dock-tab-close-btn:before {
   content: "X";
 }
-.dock-tab-close-btn:hover,
-.dock-tab-close-btn:focus {
+.dock-tab-close-btn:hover, .dock-tab-close-btn:focus {
   color: #666;
   transform: scale(1.1, 1.1);
 }
-.dock-tab:hover .dock-tab-close-btn,
-.dock-tab-close-btn:focus {
+.dock-tab:hover .dock-tab-close-btn, .dock-tab-close-btn:focus {
   opacity: 1;
   color: #a2a2a2;
 }
@@ -239,7 +237,7 @@ body > .dragging-layer > div:last-child {
 .dock-nav-more::after {
   position: absolute;
   z-index: 1;
-  content: '';
+  content: "";
   pointer-events: none;
   width: 30px;
   height: 30px;
@@ -327,15 +325,16 @@ body > .dragging-layer > div:last-child {
 .dock-dropdown-menu-item:hover {
   background: #f5f5f5;
 }
-.dock-dropdown-menu-item-disabled,
-.dock-dropdown-menu-item-disabled:hover {
+.dock-dropdown-menu-item-disabled, .dock-dropdown-menu-item-disabled:hover {
   color: #ccc;
   background: 0 0;
   cursor: not-allowed;
 }
+
 body.dock-dragging .dock-tab-hit-area {
   pointer-events: inherit;
 }
+
 body.dock-dragging {
   user-select: none;
   -webkit-user-select: none;
@@ -343,6 +342,7 @@ body.dock-dragging {
 body.dock-dragging iframe {
   pointer-events: none;
 }
+
 .dock-panel {
   box-sizing: border-box;
   position: relative;
@@ -414,11 +414,13 @@ body.dock-dragging iframe {
   height: 17px;
   cursor: nwse-resize;
 }
+
 .dock-box {
   box-sizing: border-box;
   display: flex;
   align-items: stretch;
 }
+
 .divider-box {
   box-sizing: border-box;
   display: flex;
@@ -427,16 +429,19 @@ body.dock-dragging iframe {
 .divider-box > *:nth-child(odd) {
   flex: 1 1 auto;
 }
+
 .dock-divider {
   box-sizing: border-box;
   flex: 0 0 4px;
   background: rgba(0, 0, 0, 0);
   z-index: 1;
 }
+
 .dock-hbox > .dock-divider {
   transform: scaleX(3);
   cursor: ew-resize;
 }
+
 .dock-vbox {
   flex-direction: column;
 }
@@ -444,6 +449,7 @@ body.dock-dragging iframe {
   transform: scaleY(3);
   cursor: ns-resize;
 }
+
 .dock-fbox {
   pointer-events: none;
   z-index: 200;
@@ -457,6 +463,7 @@ body.dock-dragging iframe {
   opacity: 0.8;
   pointer-events: none;
 }
+
 .dock-mbox {
   z-index: 250;
   width: 100%;
@@ -477,6 +484,7 @@ body.dock-dragging iframe {
   opacity: 0;
   animation: dock-mbox-hide 0.2s ease;
 }
+
 @keyframes dock-mbox-show {
   from {
     transform: scale(0.9, 0.9);
@@ -509,6 +517,7 @@ body.dock-dragging iframe {
   width: 100%;
   height: 100%;
 }
+
 .dock-layout {
   overflow: hidden;
   position: relative;
@@ -530,6 +539,7 @@ body.dock-dragging iframe {
   display: none;
   transition: all 0.1s ease-out;
 }
+
 .dock-drop-edge {
   position: absolute;
   top: 30px;
@@ -541,6 +551,7 @@ body.dock-dragging iframe {
   border: none;
   opacity: 0.01;
 }
+
 .dock-drop-layer {
   position: absolute;
   pointer-events: none;
@@ -556,7 +567,7 @@ body.dock-dragging iframe {
   z-index: 300;
   width: 32px;
   height: 32px;
-  font-family: 'Fredoka One', sans-serif;
+  font-family: "Fredoka One", sans-serif;
   color: #ddd;
   background: #fff;
   border: 1px solid transparent;
@@ -594,7 +605,7 @@ body.dock-dragging iframe {
   width: 16px;
 }
 .dock-drop-layer .dock-drop-left::before {
-  content: '>';
+  content: ">";
   transform: rotate(180deg);
 }
 .dock-drop-layer .dock-drop-right {
@@ -605,7 +616,7 @@ body.dock-dragging iframe {
   width: 16px;
 }
 .dock-drop-layer .dock-drop-right::before {
-  content: '>';
+  content: ">";
 }
 .dock-drop-layer .dock-drop-top {
   top: calc(50% - 48px);
@@ -618,7 +629,7 @@ body.dock-dragging iframe {
   line-height: 14px;
 }
 .dock-drop-layer .dock-drop-top::before {
-  content: '>';
+  content: ">";
   transform: rotate(270deg);
 }
 .dock-drop-layer .dock-drop-bottom {
@@ -632,21 +643,22 @@ body.dock-dragging iframe {
   line-height: 14px;
 }
 .dock-drop-layer .dock-drop-bottom::before {
-  content: '>';
+  content: ">";
   transform: rotate(90deg);
 }
 .dock-drop-layer .dock-drop-square-dropping {
   background: #88c7f4;
   color: white;
 }
+
 .dock-panel.dock-panel-dropping .dock-tab-close-btn {
   pointer-events: none;
 }
-.dock-panel-max-btn,
-.dock-panel-min-btn {
+
+.dock-panel-max-btn, .dock-panel-min-btn {
   height: 25px;
   width: 21px;
-  font-family: 'Fredoka One', sans-serif;
+  font-family: "Fredoka One", sans-serif;
   margin: 2px 2px 2px 0;
   padding: 6px 4px 4px 2px;
   cursor: pointer;
@@ -655,8 +667,7 @@ body.dock-dragging iframe {
   user-select: none;
   box-sizing: border-box;
 }
-.dock-panel-max-btn:before,
-.dock-panel-min-btn:before {
+.dock-panel-max-btn:before, .dock-panel-min-btn:before {
   position: absolute;
   content: " ";
   border: 2px solid #ddd;
@@ -665,22 +676,16 @@ body.dock-dragging iframe {
   height: 13px;
   box-sizing: border-box;
 }
-.dock-panel-max-btn:hover,
-.dock-panel-min-btn:hover,
-.dock-panel-max-btn:focus,
-.dock-panel-min-btn:focus {
+.dock-panel-max-btn:hover, .dock-panel-max-btn:focus, .dock-panel-min-btn:hover, .dock-panel-min-btn:focus {
   color: #a2a2a2;
 }
-.dock-panel-max-btn:hover:before,
-.dock-panel-min-btn:hover:before,
-.dock-panel-max-btn:focus:before,
-.dock-panel-min-btn:focus:before {
+.dock-panel-max-btn:hover:before, .dock-panel-max-btn:focus:before, .dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before {
   border-color: #a2a2a2;
 }
-.dock-panel-max-btn:hover,
-.dock-panel-min-btn:hover {
+.dock-panel-max-btn:hover, .dock-panel-min-btn:hover {
   transform: scale(1.1);
 }
+
 .dock-panel-min-btn:before {
   position: absolute;
   border-radius: 1px;
@@ -692,16 +697,17 @@ body.dock-dragging iframe {
   font-size: 20px;
   line-height: 4px;
 }
-.dock-panel-min-btn:hover:before,
-.dock-panel-min-btn:focus:before {
+.dock-panel-min-btn:hover:before, .dock-panel-min-btn:focus:before {
   color: #999;
 }
+
 .dock-panel.dock-style-place-holder {
   border: none;
 }
 .dock-panel.dock-style-place-holder .dock-bar {
   display: none;
 }
+
 .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless {
   border: none;
 }
@@ -713,15 +719,14 @@ body.dock-dragging iframe {
   width: 100%;
   transition: all 0.15s ease-in-out;
 }
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover,
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within,
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar {
+.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:hover, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-bar:focus-within, .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless.dock-panel-dropping .dock-bar {
   opacity: 1;
   height: 31px;
 }
 .dock-layout > :not(.dock-fbox) .dock-panel.dock-style-headless .dock-content {
   height: 100%;
 }
+
 .dock-panel.dock-style-main {
   border: none;
 }
@@ -732,6 +737,7 @@ body.dock-dragging iframe {
 .dock-panel.dock-style-main .dock-tab {
   background: #fff;
 }
+
 .dock-panel.dock-style-card .dock-tab {
   margin-right: 2px;
   border: 1px solid #ddd;
@@ -759,8 +765,7 @@ body.dock-dragging iframe {
   left: -2px;
   right: -2px;
 }
-.dock-panel.dock-style-card .dock-panel-max-btn,
-.dock-panel.dock-style-card .dock-panel-min-btn {
+.dock-panel.dock-style-card .dock-panel-max-btn, .dock-panel.dock-style-card .dock-panel-min-btn {
   margin-top: 4px;
 }
 .dock-panel.dock-style-card .dock-tab-close-btn {
diff --git a/example/adv-save-layout.html b/example/adv-save-layout.html
index b43a0c1d..b639287c 100644
--- a/example/adv-save-layout.html
+++ b/example/adv-save-layout.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/adv-tab-update.html b/example/adv-tab-update.html
index 51ca7597..54acd293 100644
--- a/example/adv-tab-update.html
+++ b/example/adv-tab-update.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/basic.html b/example/basic.html
index 00327921..50fbb88a 100644
--- a/example/basic.html
+++ b/example/basic.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/controlled-layout.html b/example/controlled-layout.html
index 4e1ff544..8376af0e 100644
--- a/example/controlled-layout.html
+++ b/example/controlled-layout.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/dark-theme.html b/example/dark-theme.html
index f9691aeb..044e4621 100644
--- a/example/dark-theme.html
+++ b/example/dark-theme.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style-dark.less">
+  <link rel="stylesheet" href="./style-dark.scss">
   <style>
 
   </style>
diff --git a/example/disable-dock.html b/example/disable-dock.html
index 03f32a4c..e631b6ca 100644
--- a/example/disable-dock.html
+++ b/example/disable-dock.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/divider-box.html b/example/divider-box.html
index 08eda6b9..1bbfd865 100644
--- a/example/divider-box.html
+++ b/example/divider-box.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/drag-new-tab.html b/example/drag-new-tab.html
index 1baa4a2e..83c7d859 100644
--- a/example/drag-new-tab.html
+++ b/example/drag-new-tab.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/drop-mode.html b/example/drop-mode.html
index 00701885..43a939d9 100644
--- a/example/drop-mode.html
+++ b/example/drop-mode.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/gesture.html b/example/gesture.html
index da5a0833..ef960661 100644
--- a/example/gesture.html
+++ b/example/gesture.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
     div {
diff --git a/example/index.html b/example/index.html
index cfca463e..672f64ab 100644
--- a/example/index.html
+++ b/example/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
     html, body {
       width: 100%;
diff --git a/example/new-window.html b/example/new-window.html
index cc2e1e51..f78e3b81 100644
--- a/example/new-window.html
+++ b/example/new-window.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/panel-extra.html b/example/panel-extra.html
index bc42b865..e6385d94 100644
--- a/example/panel-extra.html
+++ b/example/panel-extra.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
     .my-panel-extra-btn {
       cursor: pointer;
diff --git a/example/panel-style.html b/example/panel-style.html
index be015d70..6ff04a3f 100644
--- a/example/panel-style.html
+++ b/example/panel-style.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
     .github-icon {
diff --git a/example/panel-style.jsx b/example/panel-style.jsx
index dc5136b3..e1bb50b0 100644
--- a/example/panel-style.jsx
+++ b/example/panel-style.jsx
@@ -7,7 +7,7 @@ let groups = {
   headless: {
     // the css class for this would be dock-panel-headless
     // this is a pre-defined style, defined here:
-    // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less
+    // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss
     floatable: true,
     maximizable: true,
   },
@@ -36,7 +36,7 @@ let headlessTab = {
     </div>
   ),
   // this is a pre-defined style, defined here:
-  // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less
+  // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss
   group: 'headless'
 };
 let cardTab = {
@@ -47,7 +47,7 @@ let cardTab = {
     </div>
   ),
   // this is a pre-defined style, defined here:
-  // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.less
+  // https://github.com/ticlo/rc-dock/blob/master/style/predefined-panels.scss
   group: 'card'
 };
 let customTab = {
diff --git a/example/save-layout.html b/example/save-layout.html
index a315348f..7d0cf575 100644
--- a/example/save-layout.html
+++ b/example/save-layout.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/standalone-divider.html b/example/standalone-divider.html
index e224c846..0370e0f6 100644
--- a/example/standalone-divider.html
+++ b/example/standalone-divider.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
     div {
diff --git a/example/style-dark.less b/example/style-dark.scss
similarity index 100%
rename from example/style-dark.less
rename to example/style-dark.scss
diff --git a/example/style.less b/example/style.scss
similarity index 89%
rename from example/style.less
rename to example/style.scss
index 6f1376ca..f3a1c6d6 100644
--- a/example/style.less
+++ b/example/style.scss
@@ -4,8 +4,8 @@ body {
   font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   height: 100%;
   margin: 0;
-  background: @background-color;
-  color: @text-color;
+  background: $background-color;
+  color: $text-color;
 }
 
 .dock-tabpane > div {
@@ -28,7 +28,7 @@ body {
   user-select: none;
   -webkit-user-select: none;
   color: #212529;
-  background-color: @component-background;
+  background-color: $component-background;
   border: 1px solid #e9ecef;
   padding: 3px 10px;
   font-size: 1rem;
@@ -50,7 +50,7 @@ body {
 }
 
 .btn.disabled {
-  color: @disabled-color;
+  color: $disabled-color;
   background-color: #f8f8f8;
   border-color: #e9ecef;
   opacity: 0.65;
diff --git a/example/tab-cache.html b/example/tab-cache.html
index 229b6860..7fb1da18 100644
--- a/example/tab-cache.html
+++ b/example/tab-cache.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/tab-min-size.html b/example/tab-min-size.html
index 8ca60b5c..f50f7a7d 100644
--- a/example/tab-min-size.html
+++ b/example/tab-min-size.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/example/tab-update.html b/example/tab-update.html
index ff8dd0a7..b6bbb8ac 100644
--- a/example/tab-update.html
+++ b/example/tab-update.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width">
   <title>rc-dock</title>
   <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" crossorigin="anonymous">
-  <link rel="stylesheet" href="./style.less">
+  <link rel="stylesheet" href="./style.scss">
   <style>
 
   </style>
diff --git a/package.json b/package.json
index 671abe47..4597b9cb 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,9 @@
     "rc-dropdown": "~4.0.1",
     "rc-menu": "~9.8.4",
     "rc-new-window": "^0.1.13",
-    "rc-tabs": "~11.16.1"
+    "rc-tabs": "~11.16.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
@@ -49,12 +51,10 @@
     "@types/react-dom": "^18.0.6",
     "@types/shelljs": "^0.8.11",
     "deasync": "0.1.29",
-    "less": "^4.1.2",
     "node-gyp": "^10.1.0",
     "parcel": "1.12.4",
     "prismjs": "^1.26.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "sass": "^1.77.8",
     "shelljs": "^0.8.4",
     "ts-node": "^10.4.0",
     "tslint": "^6.1.3",
@@ -71,7 +71,7 @@
   },
   "scripts": {
     "example": "parcel example/*.html --open --out-dir temp --no-source-maps --no-hmr",
-    "build-less": "lessc style/index-light.less dist/rc-dock.css & lessc style/index-dark.less dist/rc-dock-dark.css ",
+    "build-style": "sass --no-source-map style/index-light.scss dist/rc-dock.css & sass --no-source-map style/index-dark.scss dist/rc-dock-dark.css",
     "build-doc": "typedoc",
     "build-www": "ts-node tool/build-www",
     "build-es": "tsc --module es2020 --outDir ./es",
diff --git a/style/dragging.less b/style/dragging.scss
similarity index 88%
rename from style/dragging.less
rename to style/dragging.scss
index 5bdb1e59..2d1f587d 100644
--- a/style/dragging.less
+++ b/style/dragging.scss
@@ -10,14 +10,14 @@ body > .dragging-layer {
   font-size: 14px;
   line-height: 1.5;
   white-space: nowrap;
-  --default-background-color: @component-background;
+  --default-background-color: #{$component-background};
   /* dragging element */
 
   & > *:first-child {
     pointer-events: none !important;
     overflow: hidden !important;
     transform: translate(-50%, -50%) !important;
-    box-shadow: @dragging-layer-shadow;
+    box-shadow: $dragging-layer-shadow;
   }
 
   & > .dragging {
diff --git a/style/index-dark.less b/style/index-dark.less
deleted file mode 100644
index 0381778a..00000000
--- a/style/index-dark.less
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "./index";
-
-@background-color: #000;
-@text-color: fade(#fff, 85%);
-@dragging-layer-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.1);
-
-@component-background: #141414;
-@primary-color: #108ee9;
-@primary-highlight: mix(#fff, @primary-color, 20%);
-@drop-indicator-bg: mix(@component-background, @primary-color, 40%);
-@drop-indicator-border-color: #fff;
-
-
-@disabled-color: #ccc;
-@panel-border-color: #434343;
-@nav-color-split: #282828;
-@nav-more-shadow: inset -10px 0 8px -8px fade(#000, 8%);
-@tab-background: #141414;
-@panel-corner-color: rgba(255, 255, 255, 0.15);
-@panel-box-shadow: 0 0 4px #444;
-
-@button-text-color: #444;
-@button-text-focus-color: #fff;
-@button-text-middle-color: mix(@button-text-color, @button-text-focus-color, 50%);
-
-// main window style
-@nav-color-split-main: #282828;
-
-@dropdown-menu-bg: @component-background;
-@item-hover-bg: mix(#fff, @dropdown-menu-bg, 10%);
-@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
diff --git a/style/index-dark.scss b/style/index-dark.scss
new file mode 100644
index 00000000..574ceef1
--- /dev/null
+++ b/style/index-dark.scss
@@ -0,0 +1,31 @@
+$background-color: #000;
+$text-color: rgba(#fff, 85%);
+$dragging-layer-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.1);
+
+$component-background: #141414;
+$primary-color: #108ee9;
+$primary-highlight: mix(#fff, $primary-color, 20%);
+$drop-indicator-bg: mix($component-background, $primary-color, 40%);
+$drop-indicator-border-color: #fff;
+
+
+$disabled-color: #ccc;
+$panel-border-color: #434343;
+$nav-color-split: #282828;
+$nav-more-shadow: inset -10px 0 8px -8px rgba(#000, 8%);
+$tab-background: #141414;
+$panel-corner-color: rgba(255, 255, 255, 0.15);
+$panel-box-shadow: 0 0 4px #444;
+
+$button-text-color: #444;
+$button-text-focus-color: #fff;
+$button-text-middle-color: mix($button-text-color, $button-text-focus-color, 50%);
+
+// main window style
+$nav-color-split-main: #282828;
+
+$dropdown-menu-bg: $component-background;
+$item-hover-bg: mix(#fff, $dropdown-menu-bg, 10%);
+$box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+@import "./index";
diff --git a/style/index-light.less b/style/index-light.less
deleted file mode 100644
index f070c81f..00000000
--- a/style/index-light.less
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "./index";
-
-@background-color: #fff;
-@text-color: fade(#000, 85%);
-@dragging-layer-shadow: 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.1);
-
-@component-background: #fff;
-@primary-color: #108ee9;
-@primary-highlight: mix(#fff, @primary-color, 15%);
-@drop-indicator-bg: mix(@component-background, @primary-color, 50%);
-@drop-indicator-border-color: #fff;
-
-
-@disabled-color: #ccc;
-@panel-border-color: #ddd;
-@nav-color-split: #f3f3f3;
-@nav-more-shadow: inset -10px 0 8px -8px fade(#000, 8%);
-@tab-background: #fafafd;
-@panel-corner-color: rgba(0,0,0,0.1);
-@panel-box-shadow: 0 0 4px #aaaaaa;
-
-@button-text-color: #ddd;
-@button-text-focus-color: #666;
-@button-text-middle-color: mix(@button-text-color, @button-text-focus-color, 50%);
-
-// main window style
-@nav-color-split-main: #eee;
-
-@dropdown-menu-bg: @component-background;
-@item-hover-bg: #f5f5f5;
-@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
diff --git a/style/index-light.scss b/style/index-light.scss
new file mode 100644
index 00000000..bdb41726
--- /dev/null
+++ b/style/index-light.scss
@@ -0,0 +1,31 @@
+$background-color: #fff;
+$text-color: rgba(#000, 85%);
+$dragging-layer-shadow: 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.1);
+
+$component-background: #fff;
+$primary-color: #108ee9;
+$primary-highlight: mix(#fff, $primary-color, 15%);
+$drop-indicator-bg: mix($component-background, $primary-color, 50%);
+$drop-indicator-border-color: #fff;
+
+
+$disabled-color: #ccc;
+$panel-border-color: #ddd;
+$nav-color-split: #f3f3f3;
+$nav-more-shadow: inset -10px 0 8px -8px rgba(#000, 8%);
+$tab-background: #fafafd;
+$panel-corner-color: rgba(0,0,0,0.1);
+$panel-box-shadow: 0 0 4px #aaaaaa;
+
+$button-text-color: #ddd;
+$button-text-focus-color: #666;
+$button-text-middle-color: mix($button-text-color, $button-text-focus-color, 50%);
+
+// main window style
+$nav-color-split-main: #eee;
+
+$dropdown-menu-bg: $component-background;
+$item-hover-bg: #f5f5f5;
+$box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+@import "./index";
diff --git a/style/index.less b/style/index.scss
similarity index 100%
rename from style/index.less
rename to style/index.scss
diff --git a/style/panel.less b/style/panel.scss
similarity index 90%
rename from style/panel.less
rename to style/panel.scss
index d92e90c4..9bfd8a87 100644
--- a/style/panel.less
+++ b/style/panel.scss
@@ -11,9 +11,9 @@ body.dock-dragging {
 .dock-panel {
   box-sizing: border-box;
   position: relative;
-  color: @text-color;
-  background: @component-background;
-  border: 1px solid @panel-border-color;
+  color: $text-color;
+  background: $component-background;
+  border: 1px solid $panel-border-color;
 
   &.dragging {
     opacity: 0.3;
@@ -79,7 +79,7 @@ body.dock-dragging {
   }
 
   &-drag-size-b-r {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath fill='@{panel-corner-color}' d='M2 12 L12 2 L12 12z'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath fill='#{$panel-corner-color}' d='M2 12 L12 2 L12 12z'/%3E%3C/svg%3E");
     bottom: -4px;
     right: -4px;
     width: 17px;
@@ -137,7 +137,7 @@ body.dock-dragging {
   & > .dock-panel {
     position: absolute;
     pointer-events: visible;
-    box-shadow: @panel-box-shadow;
+    box-shadow: $panel-box-shadow;
   }
 
   & > .dock-panel.dragging {
@@ -154,7 +154,7 @@ body.dock-dragging {
   & > .dock-panel {
     width: 100%;
     height: 100%;
-    box-shadow: @panel-box-shadow;
+    box-shadow: $panel-box-shadow;
   }
 
   &.dock-mbox-show {
@@ -221,10 +221,10 @@ body.dock-dragging {
     box-sizing: border-box;
     pointer-events: none;
     z-index: 400;
-    border: solid 1px @drop-indicator-border-color;
-    background: @drop-indicator-bg;
+    border: solid 1px $drop-indicator-border-color;
+    background: $drop-indicator-bg;
     opacity: 0.5;
-    box-shadow: 0 0 4px @panel-border-color;
+    box-shadow: 0 0 4px $panel-border-color;
     display: none;
     transition: all 0.1s ease-out;
   }
@@ -258,15 +258,15 @@ body.dock-dragging {
     width: 32px;
     height: 32px;
     font-family: 'Fredoka One', sans-serif;
-    color: @button-text-color;
-    background: @component-background;
+    color: $button-text-color;
+    background: $component-background;
     border: 1px solid transparent;
     left: calc(50% - 16px);
     top: calc(50% - 16px);
 
     .dock-drop-square-box {
       box-sizing: border-box;
-      border: 1px solid @panel-border-color;
+      border: 1px solid $panel-border-color;
       width: 100%;
       height: 100%;
     }
@@ -359,7 +359,7 @@ body.dock-dragging {
   }
 
   .dock-drop-square-dropping {
-    background: @drop-indicator-bg;
+    background: $drop-indicator-bg;
     color: white;
   }
 }
@@ -383,7 +383,7 @@ body.dock-dragging {
   &:before {
     position: absolute;
     content: " ";
-    border: 2px solid @button-text-color;
+    border: 2px solid $button-text-color;
     border-radius: 1px;
     width: 13px;
     height: 13px;
@@ -391,10 +391,10 @@ body.dock-dragging {
   }
 
   &:hover, &:focus {
-    color: @button-text-middle-color;
+    color: $button-text-middle-color;
 
     &:before {
-      border-color:@button-text-middle-color;
+      border-color:$button-text-middle-color;
     }
   }
 
diff --git a/style/predefined-panels.less b/style/predefined-panels.scss
similarity index 82%
rename from style/predefined-panels.less
rename to style/predefined-panels.scss
index 122a405b..3e43c188 100644
--- a/style/predefined-panels.less
+++ b/style/predefined-panels.scss
@@ -39,11 +39,11 @@
 
   .dock-bar {
     background: none;
-    border-bottom: 1px solid @nav-color-split-main;
+    border-bottom: 1px solid $nav-color-split-main;
   }
 
   .dock-tab {
-    background: @component-background;
+    background: $component-background;
   }
 }
 
@@ -52,17 +52,17 @@
 
   .dock-tab {
     margin-right: 2px;
-    border: 1px solid @panel-border-color;
+    border: 1px solid $panel-border-color;
     border-radius: 5px 5px 0 0;
   }
 
   .dock-tab.dock-tab-active {
-    border-bottom: 1px solid @component-background;
-    background: @component-background;
+    border-bottom: 1px solid $component-background;
+    background: $component-background;
   }
 
   .dock-bar {
-    border-bottom: 1px solid @panel-border-color;
+    border-bottom: 1px solid $panel-border-color;
     overflow: visible;
   }
 
@@ -73,7 +73,7 @@
 
   .dock-ink-bar {
     /* hide animated ink bar */
-    background: @component-background;
+    background: $component-background;
     opacity: 0;
   }
 
diff --git a/style/tabs.less b/style/tabs.scss
similarity index 87%
rename from style/tabs.less
rename to style/tabs.scss
index a08e4ecb..10b65f65 100644
--- a/style/tabs.less
+++ b/style/tabs.scss
@@ -21,7 +21,7 @@
     position: absolute;
     box-sizing: border-box;
     margin-top: -3px;
-    background-color: @primary-color;
+    background-color: $primary-color;
     transform-origin: 0 0;
     width: 0;
     height: 0;
@@ -30,7 +30,7 @@
 
   &-tab-btn-disabled {
     cursor: default;
-    color: @disabled-color;
+    color: $disabled-color;
   }
 
   &-nav-animated {
@@ -48,11 +48,11 @@
     transition: color 0.25s cubic-bezier(0.35, 0, 0.25, 1);
     padding: 0;
     font-weight: 500;
-    border-bottom: 1px solid @panel-border-color;
+    border-bottom: 1px solid $panel-border-color;
     cursor: pointer;
     float: left;
     margin-right: 10px;
-    background: @tab-background;
+    background: $tab-background;
     outline: none;
 
     &.dragging {
@@ -61,28 +61,28 @@
 
     & > div {
       padding: 4px 14px;
-      outline-color: @primary-color;
+      outline-color: $primary-color;
     }
   }
 
   &-tab:hover {
-    color: @primary-highlight;
+    color: $primary-highlight;
   }
 
   &-tab-active,
   &-tab-active:hover {
-    color: @primary-color;
+    color: $primary-color;
     cursor: default;
     transform: translateZ(0);
   }
 
   &-tab-disabled {
     cursor: default;
-    color: @disabled-color;
+    color: $disabled-color;
   }
 
   &-tab-disabled:hover {
-    color: @disabled-color;
+    color: $disabled-color;
   }
 
 
@@ -131,8 +131,8 @@
 
   &-top &-bar {
     flex: 0 0 auto;
-    background: @tab-background;
-    border-bottom: 1px solid @nav-color-split;
+    background: $tab-background;
+    border-bottom: 1px solid $nav-color-split;
     padding-left: 8px;
   }
 
@@ -156,7 +156,7 @@
     position: absolute;
     cursor: pointer;
     font-family: 'Fredoka One', sans-serif;
-    color: @button-text-color;
+    color: $button-text-color;
     right: -3px;
     font-size: 12px;
     width: 16px;
@@ -172,14 +172,14 @@
 
   &-tab-close-btn:hover,
   &-tab-close-btn:focus {
-    color: @button-text-focus-color;
+    color: $button-text-focus-color;
     transform: scale(1.1, 1.1);
   }
 
   &-tab:hover &-tab-close-btn,
   &-tab-close-btn:focus {
     opacity: 1;
-    color: @button-text-middle-color;
+    color: $button-text-middle-color;
   }
 
   &-tab-hit-area {
@@ -231,7 +231,7 @@
     &-more {
       height: 30px;
       border: none;
-      color: @text-color;
+      color: $text-color;
       background: transparent;
       cursor: pointer;
       position: relative;
@@ -246,7 +246,7 @@
         height: 30px;
         left: -30px;
         top: 0;
-        box-shadow: @nav-more-shadow;
+        box-shadow: $nav-more-shadow;
       }
     }
   }
@@ -282,7 +282,7 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    color: @text-color;
+    color: $text-color;
     font-size: 14px;
     font-variant: tabular-nums;
     line-height: 1.5715;
@@ -306,11 +306,11 @@
       overflow-y: auto;
       text-align: left;
       list-style-type: none;
-      background-color: @dropdown-menu-bg;
+      background-color: $dropdown-menu-bg;
       background-clip: padding-box;
       border-radius: 2px;
       outline: none;
-      box-shadow: @box-shadow-base;
+      box-shadow: $box-shadow-base;
     }
 
     &-menu-item {
@@ -318,7 +318,7 @@
       margin: 0;
       padding: 5px 12px;
       overflow: hidden;
-      color: @text-color;
+      color: $text-color;
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
@@ -339,11 +339,11 @@
     }
 
     &-menu-item:hover {
-      background: @item-hover-bg;
+      background: $item-hover-bg;
     }
 
     &-menu-item-disabled, &-menu-item-disabled:hover {
-      color: @disabled-color;
+      color: $disabled-color;
       background: 0 0;
       cursor: not-allowed
     }
diff --git a/yarn.lock b/yarn.lock
index 3ea85d69..fc6f2cc9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1435,6 +1435,14 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 arg@^4.1.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
@@ -1670,6 +1678,11 @@ binary-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
   integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
 
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
 bindings@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@@ -1728,6 +1741,13 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
 brfs@^1.2.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/brfs/-/brfs-1.6.1.tgz#b78ce2336d818e25eea04a0947cba6d4fb8849c3"
@@ -1958,6 +1978,21 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.4
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^2.1.5:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -2158,13 +2193,6 @@ convert-source-map@^1.5.1, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
-copy-anything@^2.0.1:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
-  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
-  dependencies:
-    is-what "^3.14.1"
-
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
@@ -2487,13 +2515,6 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^3.2.6:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
 decode-uri-component@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
@@ -2760,13 +2781,6 @@ err-code@^2.0.2:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
-errno@^0.1.1:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -3017,6 +3031,13 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3093,6 +3114,11 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -3160,6 +3186,13 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-to-regexp@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
@@ -3193,7 +3226,7 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
@@ -3465,7 +3498,7 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.6.2, iconv-lite@^0.6.3:
+iconv-lite@^0.6.2:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -3482,10 +3515,10 @@ ieee754@^1.1.4:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-image-size@~0.5.0:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
-  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
 
 import-fresh@^2.0.0:
   version "2.0.0"
@@ -3603,6 +3636,13 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -3713,7 +3753,7 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
-is-glob@^4.0.0:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -3751,6 +3791,11 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-obj@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
@@ -3814,11 +3859,6 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
-is-what@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
-  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4020,23 +4060,6 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-less@^4.1.2:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
-  integrity sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==
-  dependencies:
-    copy-anything "^2.0.1"
-    parse-node-version "^1.0.1"
-    tslib "^2.3.0"
-  optionalDependencies:
-    errno "^0.1.1"
-    graceful-fs "^4.1.2"
-    image-size "~0.5.0"
-    make-dir "^2.1.0"
-    mime "^1.4.1"
-    needle "^3.1.0"
-    source-map "~0.6.0"
-
 levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -4106,14 +4129,6 @@ magic-string@^0.22.4:
   dependencies:
     vlq "^0.2.2"
 
-make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
@@ -4224,7 +4239,7 @@ mime-types@^2.1.12, mime-types@~2.1.19:
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0, mime@^1.4.1:
+mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
@@ -4357,7 +4372,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.1.1:
+ms@2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -4384,15 +4399,6 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-needle@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-3.1.0.tgz#3bf5cd090c28eb15644181ab6699e027bd6c53c9"
-  integrity sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.6.3"
-    sax "^1.2.4"
-
 negotiator@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
@@ -4482,7 +4488,7 @@ normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -4739,11 +4745,6 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse-node-version@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
-  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
-
 parse5@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
@@ -4828,10 +4829,10 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pn@^1.1.0:
   version "1.1.0"
@@ -5269,11 +5270,6 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
-
 psl@^1.1.28:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -5549,6 +5545,13 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -5786,7 +5789,16 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sax@^1.2.4, sax@~1.2.4:
+sass@^1.77.8:
+  version "1.77.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
+  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -5806,7 +5818,7 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -6013,6 +6025,11 @@ socks@^2.7.1:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -6037,7 +6054,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -6160,7 +6177,16 @@ stream-http@^2.7.2:
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6210,7 +6236,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6231,6 +6257,13 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -6388,6 +6421,13 @@ to-regex-range@^2.1.0:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
@@ -6442,11 +6482,6 @@ tslib@^1.13.0, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.3.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
-  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
-
 tslint-react@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-5.0.0.tgz#d0ae644e8163bdd3e134012e9353094904e8dd44"