superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

package/app/styles/_carousel.scss

@@ -27,10 +27,10 @@
 }
 
 .sd-carousel__content {
-    background: #fff;
+    background: var(--color-modal-Bg);
     background-clip: padding-box;
     outline: 0;
-    box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.35);
+    box-shadow: 0 4px 24px hsla(0, 0%, 0%, 0.2), 0 10px 28px hsla(0, 0%, 0%, 0.35);
     border-radius: 1rem 1rem 0.8rem 0.8rem;
     min-height: 40rem;
     display: flex;
@@ -52,15 +52,15 @@
     width: 100%;
     height: 200px;
     border-radius: 0.8rem 0.8rem 0 0;
-    background-color: #303E55;
+    background-color: hsl(217, 28%, 26%);
     flex-grow: 0;
     position: relative;
     overflow: hidden;
     &--color-2 {
-        background-color: #856CA1;
+        background-color: hsl(268, 22%, 53%);
     }
     &--color-3 {
-        background-color: #6DBEC4;
+        background-color: hsl(184, 42%, 60%);
     }
 }
 
@@ -79,7 +79,7 @@
     width: 100%;
     text-align: center;
     z-index: 2;
-    color: #fff;
+    color: $white;
     font-size: 3.2rem;
     line-height: 1;
     top: calc(50% - 1.6rem);
@@ -112,11 +112,11 @@
 
 
 @mixin modalNavButton-style(
-  $background: #fff,
-  $background-hover: scale-color($background, $lightness: -10%),
-  $background-active: scale-color($background, $lightness: -20%)) 
+  $background: var(--sd-item__main-Bg),
+  $background-hover: var(--sd-item__main-Bg--hover),
+  $background-active: var(--sd-item__main-Bg--alternate)) 
   {
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     cursor: pointer;
     height: 5.6rem;
     line-height: 5.6rem;
@@ -166,10 +166,16 @@
     }
     &--end {
         right: -88px;
-        @include modalNavButton-style ($sd-green);
+        background-color: var(--sd-colour-success);
         &::after {
             content: "\e61d";
-            color: #fff;
+            color: $white;
+        }
+        &:hover {
+            background-color: var(--sd-colour-success--hover);
+        }
+        &:active {
+            background-color: var(--sd-colour-success--active);
         }
     }
 
@@ -185,7 +191,7 @@
 .sd-carousel__page-indicator {
     background-color: rgba(255,255,255,.2);
     border: 1px solid rgba(0,0,0,.4);
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     cursor: pointer;
     display: inline-block;
     height: 1.4rem;

package/app/styles/_content-divider.scss

@@ -0,0 +1,125 @@
+.sd-content-divider {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: $sd-text;
+    list-style: none;
+    border-top: 1px var(--sd-colour-line--medium);
+    border-style: solid;
+
+    &.sd-content-divider--with-text {
+        display: flex;
+        color: $sd-text;
+        font-weight: 500;
+        font-size: 16px;
+        white-space: nowrap;
+        text-align: center;
+        border-top: 0;
+        border-top-color: var(--sd-colour-line--medium);
+        border-top-style: solid;
+    }
+
+    &.sd-content-divider--horizontal {
+        display: flex;
+        clear: both;
+        width: 100%;
+        min-width: 100%;
+        margin: $sd-base-increment * 3 0;
+    }
+    &.sd-content-divider--horizontal.sd-content-divider--with-text {
+        margin: 1.6rem 0;
+        &::before, &::after {
+            content: "";
+            position: relative;
+            top: 50%;
+            width: 50%;
+            border-top: 1px transparent;
+            border-top-color: transparent;
+            border-top-color: inherit;
+            border-bottom: 0;
+            transform: translateY(50%);
+            border-top-style: inherit;
+        }
+        &.sd-content-divider--text-left {
+            &::before {
+                width: 5%;
+            }
+            &::after {
+                width: 95%;
+            }
+        }
+        &.sd-content-divider--text-right {
+            &::before {
+                width: 95%;
+            }
+            &::after {
+                width: 5%;
+            }
+        }
+    }
+
+
+    &.sd-content-divider--vertical {
+        position: relative;
+        display: inline-block;
+        margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
+        vertical-align: middle;
+        border-top: 0;
+        border-left: 1px var(--sd-colour-line--medium);
+        border-left-style: solid;
+        flex-grow: 0;
+        align-self: stretch;
+        min-height: $sd-base-increment * 2;
+        &.sd-content-divider--with-text {
+            margin: 0 $sd-base-increment * 1.5;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border-left: 0;
+            .sd-content-divider__inner-text {
+                padding: $sd-base-increment * 0.5 $sd-base-increment * 2;
+            }
+            &::before, &::after {
+                content: "";
+                background-color: transparent;
+                position: relative;
+                height: 50%;
+                border-left: 1px var(--sd-colour-line--medium);
+                border-bottom: 0;
+                width: 1px;
+                border-left-style: solid;
+            }
+            &.sd-content-divider--dashed {
+                &::before, &::after {
+                    border-left-style: dashed;
+                }
+                
+            }
+            &.sd-content-divider--dotted {
+                &::before, &::after {
+                    border-left-style: dotted;
+                    border-color: var(--sd-colour-line--strong);
+                }
+            }
+        }
+    }
+    &.sd-content-divider--dashed {
+        border-style: dashed;
+    }
+    &.sd-content-divider--dotted {
+        border-style: dotted;
+        border-color: var(--sd-colour-line--strong);
+    }
+    &.sd-content-divider--no-border {
+        border: 0 !important;
+        &::before, &::after {
+            border: 0 !important;
+        }
+    }
+}
+
+.sd-content-divider__inner-text {
+    display: inline-block;
+    padding: 0 $sd-base-increment;
+}

package/app/styles/_design-tokens.scss

@@ -0,0 +1,2 @@
+@import 'design-tokens/design-tokens-general';
+@import 'design-tokens/new-colors';

package/app/styles/_drag-drop.scss

@@ -5,7 +5,7 @@
     padding: 1.2rem;
     color: $grayText;
     text-align: center;
-    border-radius: 2px;
+    border-radius: $border-radius__base--x-small;
     i {
         opacity: 0.4;
         vertical-align: bottom;

package/app/styles/_empty-states.scss

@@ -4,12 +4,20 @@
     display: flex;
     flex-direction: column;
 }
-.content-state--empty-container {
+.content-state--empty-container,
+.content-state__empty-container {
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    &--absolute {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
 }
 .content-state__empty-info {
     display: flex;