client/src/sky/SkyPicker/SkyPicker.scss
@use "sass:color";
@import "../../../styles/variables";
$sky-picker-border-radius: $border-radius-large;
$sky-picker-box-shadow: $medium-box-shadow;
$header-background-colour: $colour-turquoise-200;
$header-text-colour: $colour-turquoise-700;
.sky-picker-container-outer {
z-index: $z-07-sky-picker;
position: absolute;
// TODO: use button trigger to set initial position,
// and remember position on a per-session basis
bottom: 90px;
left: 50px;
max-width: 216px; /* prevent upgrade text from expanding width */
}
.sky-picker-container-inner {
background-color: white;
border-radius: $sky-picker-border-radius;
overflow: hidden;
box-shadow: $sky-picker-box-shadow;
user-select: none;
[dir="rtl"] & {
left: auto;
right: 50px;
}
}
.sky-picker header {
padding: 0.5em;
background-color: $header-background-colour;
color: $header-text-colour;
display: flex;
align-items: center;
}
.sky-picker.react-draggable header {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
}
.sky-picker.react-draggable-dragging header {
cursor: grabbing;
}
.sky-picker header img {
height: 16px;
width: auto;
margin-left: 0.5em;
pointer-events: none;
[dir="rtl"] & {
margin-right: 0.5em;
margin-left: auto;
}
}
.sky-picker header h3 {
flex: 1;
min-width: 0;
margin: 0 0.25em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1em;
.octicon {
margin-right: 0.5em;
[dir="rtl"] & {
margin-left: 0.5em;
margin-right: auto;
}
}
}
.sky-picker-content {
padding: 0;
}
.sky-picker-upgrade {
padding: 0.75em 1em;
background-color: $alert-background-light;
font-size: 1rem;
line-height: 1.2;
text-align: center;
color: $colour-copper-700;
/* Very similar to .toast-action style */
button {
display: block !important;
border: 1px solid $colour-copper-400;
border-radius: $border-radius-medium;
padding: 0.5em 1em;
margin: 0.75em auto 0.25em;
width: auto;
font-weight: 550;
background-color: transparent;
color: $colour-copper-600;
&:disabled {
border: 1px solid color.adjust($colour-copper-200, $saturation: -50%);
}
&:hover {
background-color: transparent;
color: $colour-copper-700;
}
}
}
/* Close button overrides */
.sky-picker .close {
position: relative;
width: 24px;
height: 24px;
padding: 0;
top: auto;
right: auto;
display: flex !important;
justify-content: center;
align-items: center !important;
}