superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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,180 @@
+.sd-content-divider {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: $sd-text;
+    list-style: none;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
+    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-bottom: 0;
+        border-left: 0;
+        border-right: 0;
+        border-top-color: var(--sd-colour-line--medium);
+        border-style: solid;
+    }
+
+    &.sd-content-divider--horizontal {
+        display: flex;
+        clear: both;
+        width: 100%;
+        min-width: 100%;
+        &.sd-content-divider--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 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;
+            border-left: 0;
+            border-right: 0;
+            transform: translateY(50%);
+            border-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--margin-x-small {
+            margin: $sd-base-increment * 1 0;
+        }
+        &.sd-content-divider--margin-small {
+            margin: $sd-base-increment * 2 0;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: $sd-base-increment * 3 0;
+        }
+        &.sd-content-divider--margin-large {
+            margin: $sd-base-increment * 4 0;
+        }
+        &.sd-content-divider--margin-none {
+            margin: $sd-base-increment / 2 0;
+        }
+    }
+
+    &.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-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-right: 0;
+                border-bottom: 0;
+                border-top: 0;
+                width: 1px;
+                border-style: solid;
+            }
+            &.sd-content-divider--dashed {
+                &::before, &::after {
+                    border-left-style: dashed;
+                }
+                
+            }
+            &.sd-content-divider--dotted {
+                &::before, &::after {
+                    border-style: dotted;
+                    border-color: var(--sd-colour-line--strong);
+                }
+            }
+        }
+        &.sd-content-divider--margin-x-small {
+            margin: 0 $sd-base-increment * 1;
+        }
+        &.sd-content-divider--margin-small {
+            margin: 0 $sd-base-increment * 2;
+        }
+        &.sd-content-divider--margin-medium {
+            margin: 0 $sd-base-increment * 3;
+        }
+        &.sd-content-divider--margin-large {
+            margin: 0 $sd-base-increment * 4;
+        }
+        &.sd-content-divider--margin-none {
+            margin: 0 0;
+        }
+    }
+    &.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;

package/app/styles/_hamburger.scss

@@ -0,0 +1,160 @@
+// Settings
+// ==================================================
+$hamburger-layer-width         : 18px !default;
+$hamburger-layer-height        : 3px !default;
+$hamburger-layer-spacing       : 3px !default;
+$hamburger-layer-color         : #fff !default;
+$hamburger-layer-border-radius : 1px !default;
+$hamburger-hover-opacity       : 0.7 !default;
+$hamburger-active-layer-color  : $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+
+// Hamburger
+// ==================================================
+.hamburger {
+    cursor: pointer;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+
+    &:hover {
+        opacity: $hamburger-hover-opacity;
+    }
+  
+    &.is-active {
+        opacity: 0.5;
+      &:hover {
+          opacity: $hamburger-active-hover-opacity;
+      }
+  
+      .hamburger__inner,
+      .hamburger__inner::before,
+      .hamburger__inner::after {
+        background-color: $hamburger-active-layer-color;
+      }
+    }
+  }
+  
+  .hamburger__box {
+    width: $hamburger-layer-width;
+    height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+    display: inline-block;
+    position: relative;
+  }
+  
+  .hamburger__inner {
+    display: block;
+    top: 50%;
+    margin-top: $hamburger-layer-height / -2;
+  
+    &,
+    &::before,
+    &::after {
+      width: $hamburger-layer-width;
+      height: $hamburger-layer-height;
+      background-color: $hamburger-layer-color;
+      border-radius: $hamburger-layer-border-radius;
+      position: absolute;
+      transition-property: transform;
+      transition-duration: 0.15s;
+      transition-timing-function: ease;
+    }
+  
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+    }
+  
+    &::before {
+      top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+    }
+  
+    &::after {
+      bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+    }
+  }
+  
+
+// Hamburger animation
+// ==================================================
+
+/* Spin */
+.hamburger--spin {
+    .hamburger__inner {
+        transition-duration: 0.22s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top 0.1s 0.25s ease-in,
+                        opacity 0.1s ease-in;
+        }
+
+        &::after {
+            transition: bottom 0.1s 0.25s ease-in,
+                        transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    &.is-active {
+        .hamburger__inner {
+            transform: rotate(225deg);
+            transition-delay: 0.12s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+            top: 0;
+            opacity: 0;
+            transition: top 0.1s ease-out,
+                        opacity 0.1s 0.12s ease-out;
+            }
+
+            &::after {
+            bottom: 0;
+            transform: rotate(-90deg);
+            transition: bottom 0.1s ease-out,
+                        transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}
+
+/* Squeeze */
+.hamburger--squeeze {
+    .hamburger__inner {
+        transition-duration: 0.075s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top 0.075s 0.12s ease,
+                        opacity 0.075s ease;
+        }
+
+        &::after {
+            transition: bottom 0.075s 0.12s ease,
+                        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    &.is-active {
+        .hamburger__inner {
+            transform: rotate(45deg);
+            transition-delay: 0.12s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+                top: 0;
+                opacity: 0;
+                transition: top 0.075s ease,
+                            opacity 0.075s 0.12s ease;
+            }
+
+            &::after {
+                bottom: 0;
+                transform: rotate(-90deg);
+                transition: bottom 0.075s ease,
+                            transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}