jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-08 11:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix the react-select styling

Browse Source 
Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta 2019-12-04 21:50:44 +01:00
parent 85bf50213d
commit f635751a8c
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
View File

@ -208,6 +208,7 @@ export class MonitorWidget extends ReactWidget {
classNamePrefix='sms'
className='serial-monitor-select'
id={id}
isSearchable={false}
/>
}
}

18
arduino-ide-extension/src/browser/style/monitor.css
View File

@ -85,37 +85,39 @@
background: var(--theia-layout-color2);
}
.sms__control:hover {
border-color: var(--theia-accent-color3) !important;
}
.serial-monitor-select .sms__control--is-focused {
border-color: var(--theia-accent-color3) !important;
box-shadow: none !important;
}
.sms__control--is-focused:hover {
border-color: var(--theia-accent-color3) !important;
}
.serial-monitor-select .sms__option--is-selected {
background-color: var(--theia-ui-button-color-secondary-hover);
background-color: var(--theia-accent-color3);
color: var(--theia-content-font-color0);
border-color: var(--theia-accent-color3);
}
.serial-monitor-select .sms__option--is-focused {
background-color: var(--theia-ui-button-color-secondary-hover);
background-color: var(--theia-accent-color4);
border-color: var(--theia-accent-color3);
}
.serial-monitor-select .sms__menu {
background-color: var(--theia-layout-color1);
border: 1px solid var(--theia-border-color2);
border-color: var(--theia-accent-color3);
top: auto !important; /* to align the top of the menu with the bottom of the control */
border-top: none;
box-shadow: none;
}
.serial-monitor-select .sms__control.sms__control--menu-is-open {
border: 1px solid;
border-color: var(--theia-border-color2) !important;
border-bottom: none;
border-color: var(--theia-accent-color3) !important;
border-bottom-color: var(--theia-layout-color2) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
}
.serial-monitor-select .sms__value-container .sms__single-value {