D10 theme for Island Lives. This is a clone of drupals core theme Olivero. Notice this theme is named Olivera not Olivero :)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

157 lines
4.3 KiB

/**
* @file
* Dropbutton styles.
*/
.dropbutton-wrapper {
--dropbutton--height: var(--sp1-5);
--dropbutton--secondary-bg-color: var(--color--white);
--dropbutton--active-bg-color: var(--color--gray-90);
--dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--border-radius: var(--border-radius);
--dropbutton--font-size: var(--font-size-s);
--dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
&.open {
position: relative;
z-index: 100; /* Ensure this appears above all other dropbuttons. */
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
}
}
.dropbutton-widget {
position: relative;
width: max-content;
height: var(--dropbutton--height);
padding-inline-end: var(--dropbutton--height);
border-radius: var(--dropbutton--border-radius);
@nest .dropbutton-single & {
padding-inline-end: 0;
}
@nest .dropbutton-wrapper.open & {
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
}
}
.dropbutton {
height: var(--dropbutton--height);
margin-block: 0;
margin-inline-start: 0;
padding-inline-start: 0;
list-style: none;
font-size: var(--dropbutton--font-size);
}
/* This is the button that expands/collapses the secondary options. */
.dropbutton-toggle button {
position: absolute;
top: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--dropbutton--height);
height: var(--dropbutton--height);
padding: 0;
cursor: pointer;
border-color: transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
background: var(--dropbutton--active-bg-color);
&:focus {
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -2px;
}
&::before {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
content: "";
transform: translateY(-25%) rotate(45deg);
border-right: solid 2px var(--dropbutton--outline-color);
border-bottom: solid 2px var(--dropbutton--outline-color);
@nest .dropbutton-wrapper.open & {
transform: translateY(25%) rotate(225deg);
}
}
&:dir(rtl) {
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
}
}
/* This is the first <li> element in the list of actions. */
.dropbutton-action {
&:first-child {
margin-inline-end: 2px;
border: solid 1px transparent;
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
background: var(--dropbutton--active-bg-color);
&:dir(rtl) {
border: solid 1px transparent;
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
}
}
& a {
display: flex;
align-items: center;
margin-bottom: -2px; /* Account for borders. */
padding: 0 9px;
text-decoration: none;
color: var(--dropbutton--text-color);
font-weight: 600;
&:hover {
color: inherit;
}
&:focus {
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -1px; /* Overlap parent container by 1px. */
}
}
/* Special rules if there is only one action. */
@nest .dropbutton-single & {
&:first-child {
border-right: solid 1px transparent; /* LTR */
border-radius: var(--dropbutton--border-radius);
&:dir(rtl) {
border: solid 1px transparent;
}
}
& a {
justify-content: center;
}
}
}
/* These are the <li> elements other than the first. */
.secondary-action {
visibility: hidden;
width: calc(100% + var(--dropbutton--height));
border-right: 1px solid var(--dropbutton--active-bg-color);
border-left: 1px solid var(--dropbutton--active-bg-color);
background: var(--dropbutton--secondary-bg-color);
&:last-child {
border-bottom: 1px solid var(--dropbutton--active-bg-color);
}
& a:hover {
color: var(--dropbutton--text-hover-color);
}
@nest .dropbutton-wrapper.open & {
visibility: visible;
}
}