90 lines
2.3 KiB
SCSS
90 lines
2.3 KiB
SCSS
/* stylelint-disable max-nesting-depth */
|
|
|
|
.ds-topics-widget {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
|
|
.ds-topics-widget-header {
|
|
font-size: var(--font-size-large);
|
|
}
|
|
|
|
hr {
|
|
// Bug 2001446: We are incorrectly using a border color token as the background color, but the
|
|
// intent of this element is to appear a 1px solid border line.
|
|
background-color: var(--border-color-deemphasized);
|
|
height: 1px;
|
|
border: 0;
|
|
margin: var(--space-small) 0 0;
|
|
}
|
|
|
|
.ds-topics-widget-list-container {
|
|
flex-grow: 1;
|
|
|
|
ul {
|
|
margin: var(--space-large) 0 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
grid-gap: var(--space-small);
|
|
flex-wrap: wrap;
|
|
|
|
li {
|
|
display: flex;
|
|
|
|
a {
|
|
font-size: var(--font-size-small);
|
|
text-decoration: none;
|
|
padding: var(--space-small) var(--space-medium);
|
|
background: var(--newtab-background-color-secondary);
|
|
border: 1px solid var(--border-color-deemphasized);
|
|
color: var(--newtab-text-primary-color);
|
|
border-radius: var(--border-radius-medium);
|
|
|
|
&:hover {
|
|
background: var(--newtab-element-hover-color);
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
|
|
transition: box-shadow 150ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ds-topics-widget-list-overflow-item {
|
|
display: flex;
|
|
|
|
@media (min-width: $break-point-medium) {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: $break-point-widest) {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ds-topics-widget-button {
|
|
margin: var(--space-large) 0 0;
|
|
font-size: inherit;
|
|
text-align: center;
|
|
padding: var(--space-small);
|
|
border-radius: var(--border-radius-small);
|
|
background-color: var(--newtab-primary-action-background-pocket);
|
|
border: 0;
|
|
|
|
&:hover {
|
|
background: var(--newtab-primary-element-hover-pocket-color);
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 3px var(--newtab-primary-action-background-pocket-dimmed), 0 0 0 1px var(--newtab-primary-action-background-pocket);
|
|
transition: box-shadow 150ms;
|
|
}
|
|
}
|
|
}
|