116 lines
3.0 KiB
CSS
116 lines
3.0 KiB
CSS
|
/**
|
||
|
|
* @file
|
||
|
|
* Drop button specific styles.
|
||
|
|
*/
|
||
|
|
|
||
|
|
@import "../base/variables.pcss.css";
|
||
|
|
|
||
|
|
.dropbutton {
|
||
|
|
border-top-left-radius: var(--border-radius-base); /* LTR */
|
||
|
|
border-top-right-radius: 0; /* LTR */
|
||
|
|
border-bottom-right-radius: 0; /* LTR */
|
||
|
|
border-bottom-left-radius: var(--border-radius-base); /* LTR */
|
||
|
|
background-color: var(--color--blue-20);
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir="rtl"] .dropbutton {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-top-right-radius: var(--border-radius-base);
|
||
|
|
border-bottom-right-radius: var(--border-radius-base);
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.js .dropbutton-widget .dropbutton {
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropbutton-action {
|
||
|
|
font-size: var(--font-size-s);
|
||
|
|
line-height: var(--line-height-s);
|
||
|
|
|
||
|
|
& a {
|
||
|
|
padding-block: var(--sp0-25);
|
||
|
|
padding-inline-start: var(--sp1);
|
||
|
|
padding-inline-end: var(--sp1);
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--color--white);
|
||
|
|
border-top-left-radius: var(--border-radius); /* LTR */
|
||
|
|
border-top-right-radius: 0; /* LTR */
|
||
|
|
border-bottom-right-radius: 0; /* LTR */
|
||
|
|
border-bottom-left-radius: var(--border-radius); /* LTR */
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--color--blue-50);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: var(--outline--base);
|
||
|
|
outline-offset: var(--outline-offset);
|
||
|
|
background-color: var(--color--blue-50);
|
||
|
|
box-shadow: var(--shadow-focusable-with-outline);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir="rtl"] .dropbutton-action a {
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-top-right-radius: var(--border-radius);
|
||
|
|
border-bottom-right-radius: var(--border-radius);
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.js .dropbutton-action a:focus {
|
||
|
|
outline: var(--outline--base);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropbutton-toggle {
|
||
|
|
border-inline-start: 1px solid var(--color--white);
|
||
|
|
border-top-left-radius: 0; /* LTR */
|
||
|
|
border-top-right-radius: var(--border-radius-base); /* LTR */
|
||
|
|
border-bottom-right-radius: var(--border-radius-base); /* LTR */
|
||
|
|
border-bottom-left-radius: 0; /* LTR */
|
||
|
|
background-color: var(--color--blue-20);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--color--blue-50);
|
||
|
|
}
|
||
|
|
|
||
|
|
& button {
|
||
|
|
border-top-left-radius: 0; /* LTR */
|
||
|
|
border-top-right-radius: var(--border-radius-base); /* LTR */
|
||
|
|
border-bottom-right-radius: var(--border-radius-base); /* LTR */
|
||
|
|
border-bottom-left-radius: 0; /* LTR */
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: var(--outline--base);
|
||
|
|
outline-offset: var(--outline-offset);
|
||
|
|
background-color: var(--color--blue-50);
|
||
|
|
box-shadow: var(--shadow-focusable-with-outline);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir="rtl"] .dropbutton-toggle {
|
||
|
|
border-top-left-radius: var(--border-radius-base);
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
border-bottom-left-radius: var(--border-radius-base);
|
||
|
|
|
||
|
|
& button {
|
||
|
|
border-top-left-radius: var(--border-radius-base);
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
border-bottom-left-radius: var(--border-radius-base);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropbutton-arrow {
|
||
|
|
inset-inline: 0;
|
||
|
|
margin-inline: auto;
|
||
|
|
border-top-color: var(--color--white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropbutton-multiple.open .dropbutton-arrow {
|
||
|
|
border-bottom-color: var(--color--white);
|
||
|
|
}
|