Revert "Fix ruler styles (#24)"

This reverts commit a06c327.
mappable-world · Jul 5, 2024 · 2806112 · 2806112
1 parent a06c327
commit 2806112
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 130 deletions.
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,3 @@
-module.exports = (_api) => {
-    return {
-        plugins: ['postcss-nested', 'autoprefixer']
-    };
+module.exports = {
+    plugins: [require('postcss-nested'), require('autoprefixer')]
 };
diff --git a/src/controls/MMapRouteControl/index.css b/src/controls/MMapRouteControl/index.css
@@ -2,13 +2,14 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
-}
-.mappable--route-control.mappable--route-control_bottom {
-    flex-direction: column-reverse;
-}
 
-.mappable--route-control svg {
-    display: block;
+    &.mappable--route-control_bottom {
+        flex-direction: column-reverse;
+    }
+
+    svg {
+        display: block;
+    }
 }
 
 .mappable--route-control_parameters {
@@ -23,12 +24,11 @@
     box-shadow:
         0px 4px 12px 0px rgba(95, 105, 131, 0.1),
         0px 4px 24px 0px rgba(95, 105, 131, 0.04);
-}
 
-.mappable--route-control_parameters svg {
-    display: block;
+    svg {
+        display: block;
+    }
 }
-
 .mappable--route-control_info {
     box-sizing: border-box;
     display: flex;
@@ -43,50 +43,50 @@
     box-shadow:
         0px 4px 12px 0px rgba(95, 105, 131, 0.1),
         0px 4px 24px 0px rgba(95, 105, 131, 0.04);
-}
 
-.mappable--route-control_info.mappable--route-control_info__error {
-    padding: 20px 16px;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
+    &.mappable--route-control_info__error {
+        padding: 20px 16px;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+    }
 }
 
 .mappable--route-control_modes {
     width: 100%;
     padding: 4px;
-}
-.mappable--route-control_modes .mappable--route-control_modes__container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 5px;
-    padding: 2px;
-    border-radius: 8px;
-    background: rgba(92, 94, 102, 0.06);
-}
 
-.mappable--route-control_modes input[type='radio'] {
-    display: none;
-}
+    .mappable--route-control_modes__container {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: 5px;
+        padding: 2px;
+        border-radius: 8px;
+        background: rgba(92, 94, 102, 0.06);
+    }
 
-.mappable--route-control_modes label {
-    display: flex;
-    justify-content: center;
-    flex-grow: 1;
-    padding: 6px;
-    border-radius: 8px;
-    cursor: pointer;
-    color: #7b7d85;
-}
+    input[type='radio'] {
+        display: none;
+    }
+    label {
+        display: flex;
+        justify-content: center;
+        flex-grow: 1;
+        padding: 6px;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #7b7d85;
+    }
 
-.mappable--route-control_modes input[type='radio']:checked + label {
-    background: #fff;
-    box-shadow:
-        0px 4px 12px 0px rgba(95, 105, 131, 0.1),
-        0px 4px 24px 0px rgba(95, 105, 131, 0.04);
-    color: #050d33;
+    input[type='radio']:checked + label {
+        background: #fff;
+        box-shadow:
+            0px 4px 12px 0px rgba(95, 105, 131, 0.1),
+            0px 4px 24px 0px rgba(95, 105, 131, 0.04);
+        color: #050d33;
+    }
 }
 
 .mappable--route-control_waypoints {
@@ -99,30 +99,31 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-}
-.mappable--route-control_actions button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 0px;
-    background: none;
-    border: none;
-    color: #122db2;
-    text-align: center;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
-    cursor: pointer;
-}
 
-.mappable--route-control_actions button:hover {
-    color: #2e4ce5;
-}
+    button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 0px;
+        background: none;
+        border: none;
+        color: #122db2;
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 16px;
+        cursor: pointer;
+
+        &:hover {
+            color: #2e4ce5;
+        }
 
-.mappable--route-control_actions button:disabled {
-    color: #c8c9cc;
+        &:disabled {
+            color: #c8c9cc;
+        }
+    }
 }
 
 @keyframes mappable--spinner_rotate {
@@ -140,33 +141,33 @@
     justify-content: center;
     align-items: center;
     color: #34374a;
-}
 
-.mappable--route-control_info_loading svg {
-    position: relative;
-    animation: mappable--spinner_rotate 1.5s linear infinite;
+    svg {
+        position: relative;
+        animation: mappable--spinner_rotate 1.5s linear infinite;
+    }
 }
 
 .mappable--route-control_info_container {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-}
 
-.mappable--route-control_info_container .mappable--route-control_info_container__label {
-    color: #7b7d85;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-}
+    .mappable--route-control_info_container__label {
+        color: #7b7d85;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+    }
 
-.mappable--route-control_info_container .mappable--route-control_info_container__value {
-    color: #050d33;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 28px;
+    .mappable--route-control_info_container__value {
+        color: #050d33;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 28px;
+    }
 }
 
 .mappable--route-control_info_error__icon {
@@ -213,52 +214,55 @@
     font-weight: 500;
     line-height: 16px;
     cursor: pointer;
-}
 
-.mappable--route-control_info_error__button:hover {
-    background-color: #e5fd30;
+    &:hover {
+        background-color: #e5fd30;
+    }
 }
 
 /* dark theme styles */
-.mappable--route-control._dark .mappable--route-control_parameters {
-    background: #1d1e1f;
-    box-shadow:
-        0px 4px 12px 0px rgba(18, 20, 26, 0.22),
-        0px 4px 24px 0px rgba(18, 20, 26, 0.14);
-}
-
-.mappable--route-control._dark .mappable--route-control_modes .mappable--route-control_modes__container {
-    background: rgba(250, 251, 255, 0.04);
-}
+.mappable--route-control._dark {
+    .mappable--route-control_parameters {
+        background: #1d1e1f;
+        box-shadow:
+            0px 4px 12px 0px rgba(18, 20, 26, 0.22),
+            0px 4px 24px 0px rgba(18, 20, 26, 0.14);
+    }
+    .mappable--route-control_modes {
+        .mappable--route-control_modes__container {
+            background: rgba(250, 251, 255, 0.04);
+        }
 
-.mappable--route-control._dark .mappable--route-control_modes input[type='radio']:checked + label {
-    background: #1d1e1f;
-    color: #f2f5fa;
-}
+        input[type='radio']:checked + label {
+            background: #1d1e1f;
+            color: #f2f5fa;
+        }
+    }
+    .mappable--route-control_actions button {
+        color: #7d90f0;
 
-.mappable--route-control._dark .mappable--route-control_actions button {
-    color: #7d90f0;
-}
-.mappable--route-control._dark .mappable--route-control_actions button:disabled {
-    color: #46464d;
-}
+        &:disabled {
+            color: #46464d;
+        }
+    }
+    .mappable--route-control_info {
+        border: 1px solid #313133;
+        background: #1d1e1f;
+        box-shadow:
+            0px 4px 12px 0px rgba(18, 20, 26, 0.22),
+            0px 4px 24px 0px rgba(18, 20, 26, 0.14);
 
-.mappable--route-control._dark .mappable--route-control_info {
-    border: 1px solid #313133;
-    background: #1d1e1f;
-    box-shadow:
-        0px 4px 12px 0px rgba(18, 20, 26, 0.22),
-        0px 4px 24px 0px rgba(18, 20, 26, 0.14);
-}
-.mappable--route-control._dark .mappable--route-control_info .mappable--route-control_info_container__value {
-    color: #f2f5fa;
-}
-.mappable--route-control._dark .mappable--route-control_info .mappable--route-control_info_error__icon {
-    background: #4f1f24;
-}
-.mappable--route-control._dark .mappable--route-control_info .mappable--route-control_info_error__label {
-    color: #f2f5fa;
-}
-.mappable--route-control._dark .mappable--route-control_info .mappable--route-control_info_loading {
-    color: #f2f5fa;
+        .mappable--route-control_info_container__value {
+            color: #f2f5fa;
+        }
+        .mappable--route-control_info_error__icon {
+            background: #4f1f24;
+        }
+        .mappable--route-control_info_error__label {
+            color: #f2f5fa;
+        }
+        .mappable--route-control_info_loading {
+            color: #f2f5fa;
+        }
+    }
 }