frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make typedInput keyboard navigable

Browse Source
This commit is contained in:
Nick O'Leary
2016-11-08 13:18:28 +00:00
parent 9c675a7847
commit 91f16215e5
3 changed files with 99 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
editor/sass/colors.scss
View File

@@ -58,7 +58,7 @@ $workspace-button-color-focus-outline: rgba(85,150,230,0.2);
$typedInput-button-background: #efefef;
$typedInput-button-background-hover: #ddd;
$typedInput-button-background-active: #e3e3e3;
$typedInput-button-background-active: #ddd;
$editor-button-color-primary: #eee;
$editor-button-background-primary: #AD1625;

41
editor/sass/ui/common/typedInput.scss
View File

@@ -49,7 +49,10 @@
border-color: $form-input-focus-color !important;
}
a {
button {
text-align: left;
border: none;
position: absolute;
box-sizing: border-box;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
@@ -82,13 +85,11 @@
&:not(.disabled):hover {
text-decoration: none;
background: $typedInput-button-background-hover;
span {
background: $typedInput-button-background-hover;
}
}
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 1px $form-input-focus-color;
}
&:not(.disabled):active {
background: $typedInput-button-background-active;
@@ -96,30 +97,40 @@
}
}
a.red-ui-typedInput-option-trigger {
button.red-ui-typedInput-option-trigger {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
padding: 0 5px 0 0;
padding: 0 0 0 0;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
width: calc( 100% );
i {
position:absolute;
right: 4px;
top: 7px;
}
span {
.red-ui-typedInput-option-label {
background:#fff;
position:absolute;
left:0;
right:23px;
top: 0;
padding: 0 5px 0 5px;
}
.red-ui-typedInput-option-caret {
top: 0;
position: absolute;
right: 0;
width: 17px;
}
&:focus {
box-shadow: none;
}
&:focus .red-ui-typedInput-option-caret {
box-shadow: inset 0 0 0 1px $form-input-focus-color;
}
}
}
.red-ui-typedInput-options {
@@ -139,12 +150,12 @@
}
&:focus {
text-decoration: none;
background: $typedInput-button-background-active;
outline: none;
}
&:active {
background: $typedInput-button-background-active;
text-decoration: none;
background: $typedInput-button-background-active;
}
}
}