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

generalized the react-select component

Browse Source 
so tha we can reuse it all over the application.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta
2019-12-05 09:28:45 +01:00
parent a866bde4d1
commit 4129544738
7 changed files with 125 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
arduino-ide-extension/src/browser/style/arduino-select.css Normal file
View File

@@ -0,0 +1,46 @@
.arduino-select__control {
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
background: var(--theia-layout-color2) !important;
}
.arduino-select__control:hover {
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
}
.arduino-select__control--is-focused {
border-color: var(--theia-accent-color3) !important;
box-shadow: none !important;
}
.arduino-select__option--is-selected {
background-color: var(--theia-accent-color3) !important;
color: var(--theia-content-font-color0) !important;
border-color: var(--theia-accent-color3) !important;
}
.arduino-select__option--is-focused {
background-color: var(--theia-accent-color4) !important;
border-color: var(--theia-accent-color3) !important;
}
.arduino-select__menu {
background-color: var(--theia-layout-color2) !important;
border: 1px solid var(--theia-accent-color3) !important;
top: auto !important; /* to align the top of the menu with the bottom of the control */
box-shadow: none !important;
}
.arduino-select__control.arduino-select__control--menu-is-open {
border: 1px solid !important;
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" */
}
.arduino-select__value-container .arduino-select__single-value {
color: var(--theia-ui-font-color1) !important;
}
.arduino-select__menu-list {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

3
arduino-ide-extension/src/browser/style/index.css
View File

@@ -2,4 +2,5 @@
@import './board-select-dialog.css';
@import './main.css';
@import './editor.css';
@import './monitor.css';
@import './monitor.css';
@import './arduino-select.css';

7
arduino-ide-extension/src/browser/style/library-tab-icon.svg
View File

@@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="70" height="70" viewBox="0, 0, 70, 70">
<g id="Layer_1">
<path d="M60.2,18.2 L57.4,18.2 L57.4,12.32 C57.12,9.52 54.88,7.28 51.8,7 L45.92,7 C42.84,7 40.88,9.24 40.6,12.32 L40.6,18.2 L29.4,18.2 L29.4,12.32 C29.12,9.24 26.88,7 24.08,7 L18.2,7 C15.12,7 12.88,9.24 12.6,12.32 L12.6,18.2 L9.8,18.2 C8.12,18.2 7,19.32 7,21 L7,60.2 C7,61.88 8.12,63 9.8,63 L60.2,63 C61.88,63 63,61.88 63,60.2 L63,21 C63,19.32 61.88,18.2 60.2,18.2 z M45.92,12.6 L51.8,12.6 L51.8,18.2 L45.92,18.2 L45.92,12.6 z M18.2,12.6 L24.08,12.6 L24.08,18.2 L18.2,18.2 L18.2,12.6 z M18.2,23.8 L57.4,23.8 L57.4,39.2 L12.6,39.2 L12.6,23.8 L18.2,23.8 z M35,57.4 L12.6,57.4 L12.6,42 L57.4,42 L57.4,57.4 L35,57.4 z" fill="#000000"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 962 B

4
arduino-ide-extension/src/browser/style/list-widget.css
View File

@@ -1,6 +1,6 @@
.library-tab-icon {
-webkit-mask: url('library-tab-icon.svg');
mask: url('library-tab-icon.svg');
-webkit-mask: url('../icons/library-tab-icon.svg');
mask: url('../icons/library-tab-icon.svg');
}
.arduino-list-widget {

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

@@ -78,51 +78,3 @@
.p-TabBar-toolbar .item .clear-all {
background: var(--theia-icon-clear) no-repeat;
}
/* React Select Styles */
.serial-monitor-select .sms__control {
border: var(--theia-layout-color2) var(--theia-border-width) solid;
background: var(--theia-layout-color2);
}
.serial-monitor-select .sms__control:hover {
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
}
.serial-monitor-select .sms__control--is-focused {
border-color: var(--theia-accent-color3) !important;
box-shadow: none !important;
}
.serial-monitor-select .sms__option--is-selected {
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-accent-color4);
border-color: var(--theia-accent-color3);
}
.serial-monitor-select .sms__menu {
background-color: var(--theia-layout-color2);
border: 1px solid var(--theia-accent-color3);
top: auto !important; /* to align the top of the menu with the bottom of the control */
box-shadow: none;
}
.serial-monitor-select .sms__control.sms__control--menu-is-open {
border: 1px solid;
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 {
color: var(--theia-ui-font-color1);
}
.sms__menu-list {
padding-top: 0 !important;
padding-bottom: 0 !important;
}