Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix ruler styles #24

Merged
merged 1 commit into from
Jul 5, 2024
Merged

Fix ruler styles #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions postcss.config.js
View file
Open in desktop
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
Open in desktop
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;
}
Loading