Skip to content

Commit

Permalink
Fix ruler styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthew44-mappable
matthew44-mappable committed Jul 5, 2024
1 parent 57b1027 commit 707b7f7
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 132 deletions.
6 changes: 4 additions & 2 deletions postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
module.exports = {
plugins: [require('postcss-nested'), require('autoprefixer')]
module.exports = (_api) => {
return {
plugins: ['postcss-nested', 'autoprefixer']
};
};
256 changes: 126 additions & 130 deletions src/controls/MMapRouteControl/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@
display: flex;
flex-direction: column;
gap: 4px;
}
.mappable--route-control.mappable--route-control_bottom {
flex-direction: column-reverse;
}

&.mappable--route-control_bottom {
flex-direction: column-reverse;
}

svg {
display: block;
}
.mappable--route-control svg {
display: block;
}

.mappable--route-control_parameters {
Expand All @@ -24,11 +23,12 @@
box-shadow:
0px 4px 12px 0px rgba(95, 105, 131, 0.1),
0px 4px 24px 0px rgba(95, 105, 131, 0.04);
}

svg {
display: block;
}
.mappable--route-control_parameters svg {
display: block;
}

.mappable--route-control_info {
box-sizing: border-box;
display: flex;
Expand All @@ -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__error {
padding: 20px 16px;
flex-direction: column;
align-items: center;
gap: 12px;
}
.mappable--route-control_info.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__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;
}

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 label {
display: flex;
justify-content: center;
flex-grow: 1;
padding: 6px;
border-radius: 8px;
cursor: pointer;
color: #7b7d85;
}

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_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;
}

.mappable--route-control_waypoints {
Expand All @@ -99,31 +99,30 @@
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;
}

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:hover {
color: #2e4ce5;
}

&:disabled {
color: #c8c9cc;
}
}
.mappable--route-control_actions button:disabled {
color: #c8c9cc;
}

@keyframes mappable--spinner_rotate {
Expand All @@ -141,33 +140,33 @@
justify-content: center;
align-items: center;
color: #34374a;
}

svg {
position: relative;
animation: mappable--spinner_rotate 1.5s linear infinite;
}
.mappable--route-control_info_loading 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__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__label {
color: #7b7d85;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.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 .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 {
Expand Down Expand Up @@ -214,55 +213,52 @@
font-weight: 500;
line-height: 16px;
cursor: pointer;
}

&:hover {
background-color: #e5fd30;
}
.mappable--route-control_info_error__button: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_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);
}

input[type='radio']:checked + label {
background: #1d1e1f;
color: #f2f5fa;
}
}
.mappable--route-control_actions button {
color: #7d90f0;
.mappable--route-control._dark .mappable--route-control_modes .mappable--route-control_modes__container {
background: rgba(250, 251, 255, 0.04);
}

&: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_modes input[type='radio']:checked + label {
background: #1d1e1f;
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;
}
}
.mappable--route-control._dark .mappable--route-control_actions button {
color: #7d90f0;
}
.mappable--route-control._dark .mappable--route-control_actions button:disabled {
color: #46464d;
}

.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;
}

0 comments on commit 707b7f7

Please sign in to comment.