scripts/apps/dashboard/styles/widgets.scss
// world-clock.scss
// Styling for ingest widget
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';
.sd-widget {
&.ingest, &.archive, &.related-item, &.aggregate, &.package-manager, &.packages, &.user-activity {
.widget-header {
z-index: 2;
background-color: var(--sd-item__main-Bg);
box-sizing: border-box;
}
.widget-content {
overflow-x: hidden;
inset-block-start: 0;
}
.widget-mode {
float: inline-end;
position: relative;
z-index: 1;
margin-inline-end: 40px;
padding: 9px 0 0;
.text {
text-transform: uppercase;
font-size: 11px;
vertical-align: middle;
color: $sd-text-light;
}
}
.search-box__content {
position: relative;
display: flex;
align-items: center;
flex-grow: 1;
height: 100%;
width: 100%;
transition: opacity ease-in-out 0.2s;
opacity: 1;
.sd-input {
width: 100%;
}
.p-dropdown {
min-height: 5.6rem;
border-block-end: 1px solid var(--sd-colour-line--light);
background-color: var(--sd-item__main-Bg);
border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
width: 100%;
&:hover {
border-block-end: 1px solid var(--sd-colour-line--light);
background-color: var(--sd-item__main-Bg--hover);
}
}
}
.search-cancel {
position: absolute;
height: 24px;
width: 24px;
padding: 4px;
inset-inline-end: 6px;
margin: 0;
inset-block-start: 5px;
transition: opacity ease-in-out 0.2s;
opacity: 0.5;
&:hover {
opacity: 1;
}
&:active {
i {
color: $sd-blue;
}
}
}
.search-box {
transition: all ease-in-out 0.2s;
position: relative;
height: 34px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.12);
background-color: var(--sd-colour-panel-bg--100);
flex-shrink: 0;
flex-grow: 0;
display: flex;
align-items: center;
overflow: hidden;
z-index: 1;
&:hover {
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 0 0 rgba(0,0,0,0.1);
}
&:focus-within {
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 0 0 var(--sd-colour-interactive);
}
input {
transition: all ease-in-out 0.16s;
flex-grow: 1;
height: 100%;
border: none !important;
border-radius: 0;
padding: 0 30px 0 0.8rem;
margin: 0;
box-shadow: none;
display: block;
background-color: transparent;
}
&.blank {
background: var(--sd-colour-panel-bg--100);
}
.text {
font-size: 14px;
font-style: italic;
color: $gray;
padding: 10px;
background: var(--sd-colour-panel-bg--100);
}
.more-actions {
position: absolute;
inset-inline-end: 0px;
inset-block-start: 6px;
}
.search-box__btn {
flex: 0 0 auto;
margin: 0 0.8rem 0 auto;
}
.search-box__icon {
opacity: 0.3;
margin-inline-start: 0.6rem;
}
&--hidden {
height:0;
box-shadow: none;
border: none;
.search-box__content {
opacity: 0;
}
}
}
.search-box--no-shadow, .search-box--no-shadow:hover {
box-shadow: none;
}
.search-box--fluid-height {
min-height: 34px;
height: inherit;
}
.content-list-holder {
position: static;
flex-grow: 1;
overflow-y: auto;
}
.filter-box {
height: $nav-height - 10px;
position: absolute;
inset-block-start: $nav-height - 10px;
inset-inline-start: 0; inset-inline-end: 0;
border-block-end: 1px solid var(--sd-colour-line--light);
.btn {
margin: 5px 5px 0 0;
padding: 0 10px;
i {
opacity: 0.75;
}
}
.text {
margin-inline-end: 10px;
float: inline-start;
padding: 10px;
font-style: italic;
}
}
.pagination-box {
height: $nav-height - 10px;
position: absolute;
inset-block-start: $nav-height - 10px;
inset-inline-start: 0; inset-inline-end: 0;
border-block-end: 1px solid var(--sd-colour-line--light);
.sd-pagination {
padding: 5px 10px;
}
&.mode-detailed {
inset-block-start: 2*($nav-height - 10px);
}
.page-info {
float: inline-start;
}
}
.pin-info {
font-size: 9px;
}
.ingest-list-holder {
position: absolute;
inset-block-start: 3.6rem;
inset-inline-start: 0; inset-inline-end: 0;
inset-block-end: 0;
&.mode-detailed {
inset-block-start: 3*($nav-height - 10px);
}
}
.ingest-list {
margin:0;
list-style-type: none;
padding: 0;
/*overflow: hidden;*/
> li {
position: relative;
.item-block {
cursor: pointer;
border-block-end: 1px solid var(--sd-colour-line--light);
padding: 10px;
display:flex;
.content {
flex-grow: 1;
padding: 0 16px 0 8px;
}
i {
color: $sd-text-light;
margin-block-start: 1px;
}
&--basic {
border-block-end: none;
padding: 4px 0;
}
}
.basic {
.legal {
margin-inline-start: 10px;
}
.keyword {
color: $sd-keyword;
display: block;
}
.headline {
display:inline-block;
}
.takekey {
color: $sd-text;
font-weight: 500;
display: block;
}
}
.top-line {
margin:0;
list-style-type: none;
padding: 0;
margin-block-end: 5px;
> li {
float: inline-start;
padding-inline-end: 7px;
margin-inline-end: 7px;
border-inline-end: 1px solid var(--sd-colour-line--light);
font-size: 11px;
color: $sd-text-light;
line-height: 21px;
em {
color: $sd-text-lighter;
margin-inline-end: 4px;
}
.state-label {
margin-block-start: 4px;
}
.type-icon {
@include opacity(50);
}
.urgency-label {
margin-block-start: 2px;
}
&:last-child {
border: 0;
}
time {
color: $sd-text-lighter;
}
}
}
.main-line {
figure {
float: inline-start;
margin-inline-end: 10px;
border: 1px solid var(--sd-colour-line--x-light);
padding: 2px;
margin-block-start: 3px;
img {
height: 55px;
}
}
h5 {
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
&.alert {
border:0;
border-radius: 0;
}
.pinned {
.content {
opacity: 0.4;
}
}
.pinned.pinned-instance {
padding: 10px 5px 5px;
border-block-end: 0;
.content {
padding: 5px;
background: $white;
opacity: 1;
border: 1px solid var(--sd-colour-line--light);
border-radius: 3px;
}
}
&:first-child {
.pinned.pinned-instance {
margin-block-start: 10px;
}
}
.basic.item-block {
.content {
p {
padding-inline-end: 15px;
i {
margin-block-start: -2px;
height: 18px;
padding-inline-start: 0;
margin-inline-end: 4px;
background-position-x: 0px;
color: $sd-text-light;
}
}
}
}
.pin-info {
text-transform: uppercase;
font-size: 10px;
color: $sd-text-light;
}
.toggle-box {
margin-block-end: 0;
}
}
.active {
.item-block {
background: $sd-hover;
}
}
&.simple-list {
margin-block-start: 1.6rem;
}
}
.main-list {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inset-block-start: 34px;
width: 100%;
@include transition(all ease 0.2s);
overflow: hidden;
display: flex;
flex-direction: column;
&.wrap {
inset-inline-start: -100%;
inset-inline-end: auto;
overflow: hidden;
.scroll-shadow {
display: none;
}
.content-list-holder {
overflow: hidden !important;
}
}
&.custom-widget {
inset-block-end: 50%;
}
}
.preview {
//display: none;
position: absolute;
inset-inline-start: 0;
width: 100%;
inset-block-end: 0;
inset-block-start: 38px;
@include transition(all ease 0.2s);
&.custom-widget {
inset-block-start: 50%;
}
.nav {
height: 34px;
display: flex;
align-items: center;
background: var(--sd-colour-panel-bg--100);
padding: 0 10px;
border-block-end: 1px solid var(--sd-colour-line--light);
}
.open, .associate {
border: 0;
background: 0;
padding: 0 8px;
color: $sd-text;
line-height: 34px;
@include border-box();
span {
line-height:24px;
}
i {
margin-block-start: 3px;
margin-inline-end: 5px;
@include opacity(40);
}
&:hover {
i {
@include opacity(100);
}
}
}
.state-label {
margin-block-start: 5px;
}
.content-item-preview {
.content-container {
inset-block-start: 36px;
img {
max-width: 100%;
height: auto;
}
}
}
&.wrap {
inset-inline-start: 100%;
.scroll-shadow {
display: none;
}
}
}
}
}
.sd-widget {
&.related-item {
.preview {
.content-item-preview {
position: static;
width: 325px;
}
}
}
}
.widget-ingest, .widget-archive, .widget-related-item {
.ingest-list-holder {
background: $sd-background;
}
.ingest-list {
padding: 12px 12px $authoring-opened-articles;
> li {
.item-block {
border-color: var(--sd-colour-line--medium);
padding: 12px 0;
&.pinned.pinned-instance {
padding: 0 0 12px 0;
}
}
&.active {
.item-block.pinned {
background: none;
.content {
background: $sd-hover;
}
}
}
.top-line > li {
border: 0;
}
.main-line h5 {
font-family: $baseFontFamily;
color: var(--sd-colour-bg--02);
font-size: 13px;
line-height: 20px;
}
}
}
}
.tabpane {
&.widget-ingest, &.widget-archive, &.widget-related-item {
.sd-widget {
.widget-mode {
margin: 0;
padding: 10px 5px;
time {
font-size: 11px;
color: $sd-text-lighter;
text-align: end;
display: inline-block;
margin: 4px 10px 0 0;
}
}
.main-list {
inset-block-start: 0px
}
.existing-items {
inset-block-start: -35px;
}
.ingest-list-holder {
inset-block-end: 0;
}
.preview {
inset-block-start: 44px;
}
}
}
&.widget-related-item {
.boxed-list__static-actions {
.more-activity-toggle {
height: 2.4rem;
width: 2.4rem;
padding: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
position: static;
i {
margin: 0;
vertical-align: middle;
}
}
}
}
}