superdesk-ui-framework 3.0.42 → 3.0.44

package/app/styles/components/_list-item.scss

@@ -1,5 +1,4 @@
 // LIST ITEMS : components/list-items.scss
-// --------------
 
 //background color
 $sd-ListItem-background: var(--sd-item__main-Bg);
@@ -17,51 +16,18 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     background-color: $sd-ListItem-background;
     transition: background-color 0.2s linear;
     flex-shrink: 0;
+
     &:hover {
         background-color: $sd-ListItem-background-hover;
         cursor: pointer;
     }
-    &--active, &.active {
-        background-color: $sd-ListItem-background-activated;
-    }
-    &--selected, &--selected:hover, &.selected, &.selected:hover  {
-        background-color: $sd-ListItem-background-selected;
-        outline: 1px solid var(--sd-colour-interactive--alpha-50);
-    }
-    &--activated, &--activated:hover {
-        background-color: $sd-ListItem-background-activated;
-    }
-    &--no-bg {
-        background-color: transparent;
-    }
-    &--no-hover {
-        &:hover {
-            background-color: $sd-ListItem-background;
-            cursor: default;
-        }
-    }
-    &--inactive {
-        background-color: transparent;
-        color: rgba(123, 123, 123, 0.75);
-    }
-    &--draggable {
-        &:hover {
-            cursor: move; /* fallback if grab is unsupported */
-            cursor: grab;
-            cursor: -moz-grab;
-            cursor: -webkit-grab;
-        }
-        &:active {
-            cursor: grabbing;
-            cursor: -moz-grabbing;
-            cursor: -webkit-grabbing;
-        }
-    }
+
     &.actioning {
         &:hover {
             //pointer-events: none;
             //cursor: default !important;
             cursor: progress;
+
             .sd-list-item__action-menu {
                 padding: 0;
                 width: 0;
@@ -69,6 +35,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
                 opacity: 0;
             }
         }
+
         &::before {
             content: '';
             position: absolute;
@@ -85,11 +52,13 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             border-radius: var(--b-radius--small);
         }
     }
+
     &.locked {
         .sd-list-item__border {
             background: $red;
         }
     }
+
     &.archived {
         &:after {
             content: "";
@@ -105,28 +74,77 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             opacity: 0.16;
         }
     }
+
     .avatar {
         flex-shrink: 0;
     }
 }
 
+.sd-list-item--active, .sd-list-item.active {
+    background-color: $sd-ListItem-background-activated;
+}
+
+.sd-list-item--selected, .sd-list-item--selected:hover, .sd-list-item.selected, .sd-list-item.selected:hover  {
+    background-color: $sd-ListItem-background-selected;
+    outline: 1px solid var(--sd-colour-interactive--alpha-50);
+}
+
+.sd-list-item--activated, .sd-list-item--activated:hover {
+    background-color: $sd-ListItem-background-activated;
+}
+
+.sd-list-item--no-bg {
+    background-color: transparent;
+}
+
+.sd-list-item--no-hover {
+    &:hover {
+        background-color: $sd-ListItem-background;
+        cursor: default;
+    }
+}
+
+.sd-list-item--inactive {
+    background-color: transparent;
+    color: rgba(123, 123, 123, 0.75);
+}
+
+.sd-list-item--draggable {
+    &:hover {
+        cursor: move; /* fallback if grab is unsupported */
+        cursor: grab;
+        cursor: -moz-grab;
+        cursor: -webkit-grab;
+    }
+
+    &:active {
+        cursor: grabbing;
+        cursor: -moz-grabbing;
+        cursor: -webkit-grabbing;
+    }
+}
+
 .sd-list-item__border {
     width: 0.4rem;
     flex-grow: 0;
     flex-shrink: 0;
     background: transparent;
-    &--locked, &--error {
-        background: $red;
-    }
-    &--success, &--active {
-        background: $green;
-    }
-    &--idle {
-        background: $orange;
-    }
-    &--dark-blue {
-        background: #4d646f;
-    }
+}
+
+.sd-list-item__border--locked, .sd-list-item__border--error {
+    background: $red;
+}
+
+.sd-list-item__border--success, .sd-list-item__border--active {
+    background: $green;
+}
+
+.sd-list-item__border--idle {
+    background: $orange;
+}
+
+.sd-list-item__border--dark-blue {
+    background: #4d646f;
 }
 
 .sd-list-item__dot {
@@ -138,18 +156,22 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     height: 6px;
     border-radius: $border-radius__base--full;
     background-color: transparent;
-    &--locked, &--error {
-        background: $red;
-    }
-    &--success, &--active {
-        background: $green;
-    }
-    &--idle {
-        background: $orange;
-    }
-    &--dark-blue {
-        background: #4d646f;
-    }
+}
+
+.sd-list-item__dot--locked, .sd-list-item__dot--error {
+    background: $red;
+}
+
+.sd-list-item__dot--success, .sd-list-item__dot--active {
+    background: $green;
+}
+
+.sd-list-item__dot--idle {
+    background: $orange;
+}
+
+.sd-list-item__dot--dark-blue {
+    background: #4d646f;
 }
 
 .sd-list-item__column {
@@ -160,68 +182,83 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     padding: 0 $sd-base-increment * 1.5;
     overflow: hidden;
     flex-shrink: 0;
+
     &:last-child, &:last-of-type, &:only-child {
         border:none;
     }
-    &--no-border {
-        border:none;
-    }
-    &--large-padding {
-        padding: 0.8rem 1.6rem;
-    }
-    &--no-right-padding {
-        padding-right: 0;
-    }
-    &--grow {
-        flex-grow: 1;
-        flex-shrink: 1;
+}
+
+.sd-list-item__column--no-border {
+    border:none;
+}
+
+.sd-list-item__column--large-padding {
+    padding: 0.8rem 1.6rem;
+}
+
+.sd-list-item__column--no-right-padding {
+    padding-right: 0;
+}
+
+.sd-list-item__column--grow {
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.sd-list-item__column--shrink {
+    flex-shrink: 1;
+}
+
+.sd-list-item__column--has-check {
+    position: relative;
+
+    .sd-list-item__item-type {
+        opacity: 1;
+        margin-top: -0.2rem;
+        transition: opacity 0.1s linear;
     }
-    &--shrink {
-        flex-shrink: 1;
+
+    .sd-list-item__checkbox-container {
+        position: absolute;
+        padding: 0 0.8rem;
+        top: 0;
+        bottom:0;
+        left:0;
+        right:0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        z-index: 2;
+        opacity: 0;
+        transition: opacity 0.2s linear;
+
+        .sd-check__wrapper {
+            height: 1.6rem;
+            width: 1.6rem;
+
+            .sd-checkbox {
+                display: block;
+            }
+        }
     }
-    &--has-check {
-        position: relative;
+
+    &:hover {
         .sd-list-item__item-type {
-            opacity: 1;
-            margin-top: -0.2rem;
-            transition: opacity 0.1s linear;
+            opacity: 0;
         }
+
         .sd-list-item__checkbox-container {
-            position: absolute;
-            padding: 0 0.8rem;
-            top: 0;
-            bottom:0;
-            left:0;
-            right:0;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            z-index: 2;
-            opacity: 0;
-            transition: opacity 0.2s linear;
-            .sd-check__wrapper {
-                height: 1.6rem;
-                width: 1.6rem;
-                .sd-checkbox {
-                    display: block;
-                }
-            }
+            opacity: 1;
         }
-        &:hover {
-            .sd-list-item__item-type {
-                opacity: 0;
-            }
-            .sd-list-item__checkbox-container {
-                opacity: 1;
-            }
+    }
+
+    &.sd-list-item__column--checked, &.sd-list-item__column--checked:hover {
+        .sd-list-item__item-type {
+            opacity: 0;
         }
-        &.sd-list-item__column--checked, &.sd-list-item__column--checked:hover {
-            .sd-list-item__item-type {
-                opacity: 0;
-            }
-            .sd-list-item__checkbox-container {
-                opacity: 1;
-            }
+
+        .sd-list-item__checkbox-container {
+            opacity: 1;
         }
     }
 }
@@ -233,22 +270,28 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     align-items: center;
     overflow: hidden;
     gap: var(--gap--small);
+
     &:first-child {
         margin: 0.8rem 0 0.2rem;
     }
+
     &:last-child {
         margin: 0.2rem 0 0.8rem;
     }
+
     &:only-child {
         margin: 0.2rem 0;
     }
-    &--only-child {
-        margin: 0.2rem 0 !important;
-    }
-    &--wrap {
-        flex-wrap: wrap;
-    }
 }
+
+.sd-list-item__row--only-child {
+    margin: 0.2rem 0 !important;
+}
+
+.sd-list-item__row--wrap {
+    flex-wrap: wrap;
+}
+
 .sd-list-item__action-menu {
     display: flex;
     flex-direction: column;
@@ -261,13 +304,16 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     opacity: 0;
     transition: all ease-in 0.1s;
     align-items: center;
-    &--direction-row {
-        flex-direction: row;
-    }
+
     > .dropdown__toggle {
         line-height: 0;
     }
 }
+
+.sd-list-item__action-menu--direction-row {
+    flex-direction: row;
+}
+
 .sd-list-item__thumbnail, figure.sd-list-item__thumbnail {
     width: 6.4rem;
     height: 4.2rem;
@@ -278,6 +324,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     align-items: center;
     justify-content: center;
     background-color: rgba(128,128,128,0.2);
+
     img {
         max-width: 100%;
         max-height: 100%;
@@ -292,6 +339,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     font-weight: 300;
     color: $grayLight;
 }
+
 .sd-list-item:hover, .sd-list-item--activated {
     .sd-list-item__action-menu {
         padding: 0 0.6rem;
@@ -305,7 +353,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-grow: 1;
 }
 
-
 .sd-list-item {
     .badge {
         margin: 0.2rem;
@@ -330,6 +377,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         letter-spacing: 0.025em;
         flex-shrink: 0;
     }
+
     .sd-list-item__slugline {
         color: $sd-slugline;
         font-weight: 500;
@@ -337,32 +385,39 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         text-transform: uppercase;
         flex-shrink: 0;
     }
+    
     .sd-list-item__headline {
         color: $sd-text;
         font-weight: 500;
         font-size: 1.3rem;
     }
+
     .sd-list-item__normal {
         color: $sd-text;
         font-weight: 300;
     }
+
     .sd-list-item__strong {
         color: $sd-text;
         font-weight: 500;
     }
+
     .sd-list-item__text-label {
         color: var(--color-text-light);
         font-weight: 400;
         font-style: italic;
-        &--normal {
-            font-style: normal;
-        }
     }
+
+    .sd-list-item__text-label--normal {
+        font-style: normal;
+    }
+
     .sd-list-item__compound-text {
         display: flex;
         flex-direction: row;
         gap: var(--gap--x-small);
     }
+
     .sd-list-item__inline-icon,
     .sd-list-item__inline-text {
         margin-inline-end: 0.6rem;
@@ -374,23 +429,29 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         gap: var(--gap--small);
         min-height: 2rem;
         margin-inline-end: 4px;
+
         .sd-list-item__inline-icon {
             margin: 0;
         }
     }
+
     .sd-list-item__text-strong {
         font-weight: 500;
         color: $sd-text;
     }
+
     .sd-list-item__element-rm-10 {
         margin-inline-end: 1rem;
     }
+
     .sd-list-item__element-lm-10 {
         margin-inline-start: 1rem;
     }
+
     .sd-list-item__location {
         padding-left: 1.6rem;
         position: relative;
+
         &::before {
             position: absolute;
             left: 0;
@@ -426,30 +487,35 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     line-height: 3.2rem;
     letter-spacing: -0.03em;
     vertical-align: middle;
-    &--small {
-        height: 2.4rem;
-        width: 2.4rem;
-        font-size: 1rem;
-        line-height: 2.5rem;
-    }
-    &--large {
-        height: 4.8rem;
-        width: 4.8rem;
-        font-size: 1.8rem;
-        line-height: 5rem;
-    }
-    &--no-margin {
-        margin: 0;
-    }
-    &--empty {
-        background-color: rgba(123, 123, 123, 0.05);
-        color: transparent;
-        border: 1px dashed rgba(123, 123, 123, 0.6);
-    }
-    &--on-right {
-        margin-inline-end: 0;
-        margin-inline-start: 0.6rem;
-    }
+}
+
+.avatar--small {
+    height: 2.4rem;
+    width: 2.4rem;
+    font-size: 1rem;
+    line-height: 2.5rem;
+}
+
+.avatar--large {
+    height: 4.8rem;
+    width: 4.8rem;
+    font-size: 1.8rem;
+    line-height: 5rem;
+}
+
+.avatar--no-margin {
+    margin: 0;
+}
+
+.avatar--empty {
+    background-color: rgba(123, 123, 123, 0.05);
+    color: transparent;
+    border: 1px dashed rgba(123, 123, 123, 0.6);
+}
+
+.avatar--on-right {
+    margin-inline-end: 0;
+    margin-inline-start: 0.6rem;
 }
 
 .dropdown__toggle {
@@ -459,6 +525,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             opacity: 1;
         }
     }
+
     &:active {
         [class^="icon-"],
         [class*=" icon-"] {
@@ -467,9 +534,9 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         }
     }
 }
+
 .sd-list-item--activated {
 .dropdown__toggle {
-
         [class^="icon-"],
         [class*=" icon-"] {
             opacity: 1;
@@ -485,17 +552,20 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-direction: column;
     //margin-top: .8rem;
 }
+
 .sd-list-item-nested__childs {
     position: relative;
     z-index: 0;
     display: flex;
     flex-direction: column;
     margin-inline-start: 1rem;
+
     .sd-list-item {
         margin-top: 0;
         border-top: 1px solid var(--sd-colour-line--x-light);
     }
 }
+
 .sd-list-item-nested__parent {
     position: relative;
     z-index: 1;
@@ -510,6 +580,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         overflow: hidden;
     }
 }
+
 .sd-list-item-nested--expanded {
     .sd-list-item-nested__childs {
         transition: all ease-in 0.2s;
@@ -522,77 +593,92 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 .sd-list-item-group {
     display: flex;
     flex-direction: column;
+
     .sd-list-item {
         + .sd-list-item {
             border-top: 1px solid var(--sd-colour-line--x-light);
         }
     }
+
     .sd-list-item-nested {
         + .sd-list-item {
             border-top: 1px solid var(--sd-colour-line--x-light);
         }
     }
-    &--space-between-items {
-        gap: var(--gap--small);
-        .sd-list-item {
-            border-radius: var(--b-radius--small);
-            + .sd-list-item {
-                border-top: none;
-            }
-            .sd-list-item__border {
-                border-radius: var(--b-radius--small) 0 0 var(--b-radius--small);
-            }
+}
+
+.sd-list-item-group--space-between-items {
+    gap: var(--gap--small);
+
+    .sd-list-item {
+        border-radius: var(--b-radius--small);
+
+        + .sd-list-item {
+            border-top: none;
         }
-        .sd-list-item-nested {
-            + .sd-list-item {
-                border-top: none;
-            }
+
+        .sd-list-item__border {
+            border-radius: var(--b-radius--small) 0 0 var(--b-radius--small);
         }
-        .sd-list-item-nested__childs {
-            .sd-list-item {
-                margin-top: 0;
-                border-top: 1px solid var(--sd-colour-line--x-light);
-            }
+    }
+
+    .sd-list-item-nested {
+        + .sd-list-item {
+            border-top: none;
         }
     }
-    &--margin {
-        margin: 2rem;
+
+    .sd-list-item-nested__childs {
+        .sd-list-item {
+            margin-top: 0;
+            border-top: 1px solid var(--sd-colour-line--x-light);
+        }
     }
 }
 
+.sd-list-item-group--margin {
+    margin: 2rem;
+}
+
 .sd-list-header {
     display: flex;
     height: 2.4rem;
     margin-bottom: $sd-base-increment;
     align-items: center;
+
     .sd-list-header__name {
         font-size: 1.1rem;
         letter-spacing: .08em;
         font-weight: 500;
         text-transform: uppercase;
         color: var(--color-text-light);
+
         a {
             color: $sd-colour-interactive;
             text-decoration: none;
             display: inline-block;
             line-height: 1;
+
             &:hover {
                 color: var(--sd-colour-interactive--darken-20);
                 border-bottom: 1px dotted currentColor;
             }
         }
     }
+
     .sd-list-header__number {
         margin-inline-start: 1rem;
     }
+    
     .sd-list-header__stretch-bar {
         flex-grow: 1;
         height: 1px;
         background: transparent;
         margin: auto 0;
     }
-    &--m-top {
-        margin-top: 2.4rem;
-    }
+}
+
+.sd-list-header--m-top {
+    margin-top: 2.4rem;
 }