e4ff408f23
Improve the accessibility of our modals (the color picker and the export dialog) Implement a focus trap so that tapping through the controls inside them don't escape to outer elements, it also allows to close the modals with the "Escape" key.
121 lines
2.5 KiB
CSS
121 lines
2.5 KiB
CSS
.color-picker {
|
|
width: 205px;
|
|
background: rgb(255, 255, 255);
|
|
border: 0px solid rgba(0, 0, 0, 0.25);
|
|
box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.color-picker-control-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.color-picker-triangle-shadow {
|
|
width: 0px;
|
|
height: 0px;
|
|
border-style: solid;
|
|
border-width: 0px 9px 10px;
|
|
border-color: transparent transparent rgba(0, 0, 0, 0.1);
|
|
position: absolute;
|
|
top: -11px;
|
|
left: 12px;
|
|
}
|
|
|
|
.color-picker-triangle {
|
|
width: 0px;
|
|
height: 0px;
|
|
border-style: solid;
|
|
border-width: 0px 9px 10px;
|
|
border-color: transparent transparent rgb(255, 255, 255);
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 12px;
|
|
}
|
|
|
|
.color-picker-content {
|
|
padding: 1rem 0.5rem 0.5rem 1rem;
|
|
}
|
|
|
|
.colors-gallery {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.color-picker-swatch {
|
|
position: relative;
|
|
height: 1.875rem;
|
|
width: 1.875rem;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
margin: 0px 0.375rem 0.375rem 0px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.color-picker-swatch:focus {
|
|
/* Note: in the original react-color it uses the color of the element,
|
|
but it's too annoying to set from JavaScript without a css lib... */
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.color-picker-transparent {
|
|
border-radius: 4px;
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
|
|
left center;
|
|
}
|
|
|
|
.color-picker-hash {
|
|
background: #dee2e6;
|
|
height: 1.875rem;
|
|
width: 1.875rem;
|
|
border-radius: 4px 0px 0px 4px;
|
|
color: #495057;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.color-input-container {
|
|
display: flex;
|
|
}
|
|
|
|
.color-picker-input {
|
|
width: 6.25em;
|
|
font-size: 1rem;
|
|
color: #343a40;
|
|
border: 0px;
|
|
outline: none;
|
|
height: 1.75em;
|
|
box-shadow: #dee2e6 0px 0px 0px 1px inset;
|
|
box-sizing: content-box;
|
|
border-radius: 0px 4px 4px 0px;
|
|
float: left;
|
|
padding-left: 0.5em;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.color-picker-label-swatch {
|
|
height: 1.875rem;
|
|
width: 1.875rem;
|
|
margin-right: 0.25rem;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.color-picker-swatch-input {
|
|
font-size: 1rem;
|
|
display: inline-block;
|
|
width: 6.25rem;
|
|
border-radius: 2px;
|
|
padding: 0.125em 0.25em;
|
|
border: 1px solid #dee2e6;
|
|
text-transform: lowercase;
|
|
}
|